@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Noto+Serif+KR:wght@500;700&display=swap');

/* 첨삭 리포트 — 시험지 위에 빨간펜으로 표시하는 느낌. 값은 여기 토큰만 쓴다. */
:root {
  --bg: #f6f4ef; --paper: #fffdf8; --ink: #1d1b18; --mut: #6d675d; --line: #e7e1d3; --line-2: #d8d0bd;
  --pen: #d33a2f; --pen-soft: #fdecea; --hl: rgba(255, 214, 51, .62); --navy: #23386f; --navy-soft: #e8edfa;
  --ok: #17794a; --ok-soft: #e1f3e9; --warn: #a9640a; --warn-soft: #fff0d3; --bad: #c2352b; --bad-soft: #fde8e5;
  --shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 12px 32px -12px rgba(48, 36, 10, .16);
  --ease: cubic-bezier(.16, 1, .3, 1); --measure: 36em;
  --sans: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --serif: 'Noto Serif KR', 'Apple Myungjo', 'AppleMyungjo', Georgia, serif;
  --hand: 'Nanum Pen Script', 'Apple SD Gothic Neo', cursive;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #131315; --paper: #1b1b1f; --ink: #efece6; --mut: #a39d92; --line: #2c2c31; --line-2: #3b3b42;
    --pen: #ff6f62; --pen-soft: #3c1f1d; --hl: rgba(255, 205, 40, .38); --navy: #a9bdff; --navy-soft: #202a4a;
    --ok: #6fd6a0; --ok-soft: #173325; --warn: #f0bd64; --warn-soft: #3a2d12; --bad: #ff8a80; --bad-soft: #3d1f1c;
    --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 14px 36px -14px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
    --bg: #131315; --paper: #1b1b1f; --ink: #efece6; --mut: #a39d92; --line: #2c2c31; --line-2: #3b3b42;
  --pen: #ff6f62; --pen-soft: #3c1f1d; --hl: rgba(255, 205, 40, .38); --navy: #a9bdff; --navy-soft: #202a4a;
  --ok: #6fd6a0; --ok-soft: #173325; --warn: #f0bd64; --warn-soft: #3a2d12; --bad: #ff8a80; --bad-soft: #3d1f1c;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 14px 36px -14px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root[data-theme='light'] { color-scheme: light }
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h, 96px) + 12px) }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.72 var(--sans); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty }
h1, h2, h3, h4, p { margin: 0 }
h1, h2, h3 { text-wrap: balance }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px }
u { text-decoration-thickness: 2px; text-underline-offset: 4px }

/* 표시 색 — 톤 */
[data-mark] { --mk: var(--pen); position: relative }
[data-mark-tone='hl'] { --mk: var(--hl) }
[data-mark-tone='good'] { --mk: var(--ok) }
[data-mark-tone='warn'] { --mk: var(--warn) }
[data-mark-tone='ink'] { --mk: var(--navy) }
.rough-annotation { z-index: 0 }

/* 진행 막대 + 목차 */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--pen); transform-origin: 0 50%; transform: scaleX(0); z-index: 50 }
@supports (animation-timeline: scroll()) { .progress { animation: grow linear both; animation-timeline: scroll(root) } @keyframes grow { to { transform: scaleX(1) } } }
.toc { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line) }
.toc .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none }
.toc a { flex: none; font-size: 13px; padding: 5px 12px; border-radius: 999px; color: var(--mut); text-decoration: none; border: 1px solid transparent; transition: color .25s, background .25s, border-color .25s }
.toc a:hover { color: var(--ink) }
.toc a.is-on { color: var(--ink); background: var(--paper); border-color: var(--line-2); font-weight: 600 }

/* 히어로 */
.hero { padding: 72px 20px 36px }
.eyebrow { font: 700 12px/1 var(--sans); letter-spacing: .14em; color: var(--pen); text-transform: uppercase }
.hero h1 { font: 700 clamp(30px, 6vw, 48px)/1.16 var(--serif); letter-spacing: -.02em; margin: 14px 0 12px }
.lead { font-size: 18px; color: var(--mut); max-width: var(--measure) }
.lead b { color: var(--ink); font-weight: 650 }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 30px }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow) }
.stat .v { font: 700 30px/1.1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.stat .v small { font-size: 15px; color: var(--mut); font-weight: 500; margin-left: 2px }
.stat .k { font-size: 12.5px; color: var(--mut); margin-top: 4px; line-height: 1.4 }

/* 섹션 */
section { padding: 36px 0 }
.sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px }
.sec-head h2 { font: 700 22px/1.3 var(--serif); letter-spacing: -.01em }
.sec-head span { color: var(--mut); font-size: 13.5px }

/* 파이프라인 */
.pipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; position: relative }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); position: relative }
.step .no { font: 700 12px/1 var(--sans); color: var(--pen); letter-spacing: .1em }
.step h3 { font: 700 17px/1.3 var(--sans); margin: 8px 0 2px }
.step .sub { font-size: 13px; color: var(--mut); margin-bottom: 12px }
.step .big { font: 700 36px/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.step .big small { font-size: 16px; color: var(--mut); margin-left: 3px }
.step .cap { font-size: 12.5px; color: var(--mut); margin: 4px 0 12px }
.link { position: absolute; top: 50%; right: -13px; width: 14px; height: 2px; background: var(--pen); transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--ease) .5s; z-index: 2 }
.step.is-in .link { transform: scaleX(1) }
.step:last-child .link { display: none }
/* 막대 */
.bars { display: grid; gap: 9px }
.bar-row { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px }
.bar-row .k { color: var(--mut) }
.bar-row .tr { height: 9px; border-radius: 99px; background: var(--line); overflow: hidden }
.bar-row .fi { height: 100%; width: 100%; border-radius: 99px; background: var(--navy); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 120ms + 200ms) }
.bar-row .fi.pen { background: var(--pen) }.bar-row .fi.ok { background: var(--ok) }.bar-row .fi.warn { background: var(--warn) }
.is-in .fi, .fi.is-in { transform: scaleX(var(--v, 1)) }
.bar-row b { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 28px; text-align: right }
/* 대조 도식 */
.chk { display: grid; gap: 7px }
.chk-row { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; font-size: 12.5px }
.chk-row .q { font-weight: 700 }
.flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0 }
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 9px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); font-weight: 650; white-space: nowrap }
.pill.ok { background: var(--ok-soft); color: var(--ok) }.pill.bad { background: var(--bad-soft); color: var(--bad) }.pill.warn { background: var(--warn-soft); color: var(--warn) }
.arrow { width: 24px; height: 12px; flex: none }
.arrow path { fill: none; stroke: var(--mut); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1 }
.is-in .arrow path, .arrow.is-in path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease) calc(var(--i, 0) * 120ms + 350ms) }
.tick { font-weight: 700 }.tick.ok { color: var(--ok) }.tick.bad { color: var(--bad) }

/* 문항 카드 = 답안지 */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); margin: 0 0 26px; overflow: clip; position: relative; background-image: repeating-linear-gradient(transparent 0 33px, color-mix(in srgb, var(--line) 55%, transparent) 33px 34px); background-position: 0 14px }
.card::before { content: ''; position: absolute; inset: 0 auto 0 58px; width: 1.5px; background: color-mix(in srgb, var(--pen) 38%, transparent); pointer-events: none }
.c-head { display: flex; align-items: flex-start; gap: 16px; padding: 24px 24px 6px 20px; position: relative }
.c-no { font: 700 44px/1 var(--serif); width: 52px; text-align: right; letter-spacing: -.03em; flex: none; color: var(--ink) }
.c-no.sr { font-size: 15px; line-height: 1.3; padding-top: 8px; color: var(--pen) }
.c-meta { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; flex: 1 }
.tag { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mut); background: color-mix(in srgb, var(--paper) 85%, transparent) }
.tag.pts { color: var(--ink); font-weight: 650 }
.stamp { margin-left: auto; font: 400 20px/1 var(--hand); color: var(--ok); border: 2px solid currentColor; border-radius: 10px; padding: 6px 12px 4px; transform: rotate(-4deg) scale(1.5); opacity: 0; transition: transform .5s var(--ease) .9s, opacity .3s .9s; white-space: nowrap; text-align: center; line-height: 1.15 }
.is-in .stamp { transform: rotate(-4deg); opacity: 1 }
.stamp.warn { color: var(--warn) }.stamp.bad { color: var(--bad) }
.c-body { padding: 4px 24px 24px 82px }
.stem { font: 500 18px/1.8 var(--serif); margin: 10px 0 12px; max-width: var(--measure) }
.box { border: 1.5px solid var(--line-2); border-radius: 12px; padding: 12px 14px; font: 400 15px/1.85 var(--serif); white-space: pre-wrap; background: color-mix(in srgb, var(--paper) 70%, var(--bg)); max-width: 40em; margin: 8px 0 }
.ch { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 4px }
.ch li { display: grid; grid-template-columns: 30px 1fr; gap: 4px 8px; padding: 7px 10px; border-radius: 12px; transition: background .4s }
.ch li.right { background: var(--ok-soft) }
.ch li.stu { background: var(--bad-soft) }
.ch .n { font: 700 17px/1.7 var(--serif); text-align: center }
.ch .t { font: 400 16px/1.75 var(--serif); position: relative }
.ch .why { grid-column: 2; font: 400 13.5px/1.65 var(--sans); color: var(--mut); max-width: 38em }
.ch .why b { color: var(--ink) }
.flag { display: inline-block; font: 400 15px/1 var(--hand); margin-left: 6px; padding: 2px 7px 1px; border-radius: 6px; color: var(--ok); border: 1.5px solid currentColor; vertical-align: 2px }
.flag.stu { color: var(--bad) }
.sub-h { font: 700 12px/1 var(--sans); letter-spacing: .1em; color: var(--mut); text-transform: uppercase; margin: 22px 0 8px; display: flex; align-items: center; gap: 8px }
.sub-h::after { content: ''; flex: 1; height: 1px; background: var(--line) }
.md p { margin: .5em 0; max-width: var(--measure) }.md ul, .md ol { margin: .4em 0; padding-left: 1.3em; max-width: var(--measure) }.md li { margin: .2em 0 }.md b { font-weight: 700 }
.intent { font-size: 13.5px; color: var(--mut); margin: 4px 0 8px }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px }
.chip { font-size: 12.5px; padding: 3px 11px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); font-weight: 600 }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2) }.dots i.on { background: var(--pen) }
.note { font-size: 13.5px; background: var(--warn-soft); color: var(--warn); border-radius: 12px; padding: 10px 14px; margin: 12px 0; max-width: 40em; line-height: 1.65 }
.note b { font-weight: 700 }

/* 첨삭 영역 */
.rev { margin-top: 22px; border: 1.5px solid color-mix(in srgb, var(--pen) 40%, var(--line)); background: color-mix(in srgb, var(--pen-soft) 55%, var(--paper)); border-radius: 18px; padding: 18px 18px 14px; position: relative }
.rev-top { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center }
.ring { width: 112px; height: 112px; position: relative }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round }
.ring .tr { stroke: color-mix(in srgb, var(--pen) 16%, transparent) }
.ring .arc { stroke: var(--pen); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease) .3s }
.ring .arc.full { stroke: var(--ok) }
.ring.is-in .arc { stroke-dashoffset: calc(1 - var(--v)) }
.ring .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 700 26px/1 var(--serif); font-variant-numeric: tabular-nums }
.ring .num small { display: block; font: 400 12px/1.4 var(--sans); color: var(--mut); margin-top: 3px }
.hand { font: 400 26px/1.25 var(--hand); color: var(--pen); letter-spacing: .01em }
.rev dl { display: grid; grid-template-columns: 76px 1fr; gap: 8px 12px; margin: 16px 0 0; font-size: 14.5px }
.rev dt { color: var(--mut); font-size: 12.5px; padding-top: 2px; font-weight: 650 }.rev dd { margin: 0 }
.blanks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.blank { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; flex: 1 1 260px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px }
.blank .m { font: 700 15px/1.3 var(--serif); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center; color: #fff; font-family: var(--sans); font-size: 12px; margin-top: 2px }
.blank .m.o { background: var(--ok) }.blank .m.x { background: var(--bad) }

/* 서랍 */
.drawer-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy); padding: 6px 12px; border-radius: 999px; background: var(--navy-soft); margin: 10px 8px 0 0; transition: transform .2s }
.drawer-btn:active { transform: scale(.97) }.drawer-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.chev { display: inline-block; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .35s var(--ease) }.chev.is-open { transform: rotate(225deg) }
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease) }.drawer.is-open { grid-template-rows: 1fr }
.drawer > div { overflow: hidden; min-height: 0 }
.drawer .inner { padding-top: 10px }
img.pg { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; display: block }
.foot { color: var(--mut); font-size: 12.5px; padding: 8px 0 80px; line-height: 1.7 }

@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr) }.pipe { grid-template-columns: 1fr }.link { display: none }
  .card::before { left: 34px }.c-head { padding: 18px 14px 4px 8px; gap: 8px }.c-no { font-size: 32px; width: 34px }
  .c-body { padding: 4px 14px 20px 44px }.stem { font-size: 17px }.rev-top { grid-template-columns: 1fr; justify-items: start }
  .rev dl { grid-template-columns: 1fr; gap: 2px }.rev dt { margin-top: 8px }.hero { padding-top: 48px }
}
@media print { .toc, .progress { display: none } .rough-annotation { display: none } .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important } }

/* 라이트·다크 전환 버튼 */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .35s, color .35s, border-color .35s, fill .35s, stroke .35s !important }