/* 웹 문제지 — style.css 의 토큰·부품 위에 얹는다. 글자 크기는 --fz(가−/가+)로 함께 커진다. */
.wrap.wide { max-width: 1180px }
.hero.wrap.wide { padding: 48px 20px 18px }
.hero h1 { font-size: clamp(26px, 5vw, 42px) }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.tag.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent }
.tag.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent }
.keys { margin-top: 14px; font-size: 12.5px; color: var(--mut) }
kbd { font: 600 11.5px/1 var(--sans); padding: 3px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--paper); color: var(--ink) }

/* ── 상단 도구 막대 ── */
.bar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line) }
.bar-in { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; padding-bottom: 8px }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap }
.bar-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--line) }
.seg button { all: unset; cursor: pointer; font-size: 13px; line-height: 1; padding: 7px 13px; border-radius: 999px; color: var(--mut); transition: background .25s, color .25s, box-shadow .25s; white-space: nowrap }
.seg button:hover { color: var(--ink) }
.seg button.is-on { background: var(--paper); color: var(--ink); font-weight: 650; box-shadow: 0 1px 3px rgba(0, 0, 0, .12) }
.seg button:focus-visible, .pill-btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.seg.sm button { padding: 7px 10px; font-size: 12.5px }
.pill-btn { all: unset; cursor: pointer; font-size: 13px; line-height: 1; padding: 8px 13px; border-radius: 999px; background: var(--line); color: var(--ink) }
.pill-btn b { font-variant-numeric: tabular-nums; color: var(--pen); margin-left: 2px }
.btn-primary { all: unset; cursor: pointer; font-size: 13.5px; font-weight: 650; line-height: 1; padding: 9px 18px; border-radius: 999px; background: var(--pen); color: #fff; transition: transform .2s var(--ease), filter .2s }
.btn-primary:hover { filter: brightness(1.06) }.btn-primary:active { transform: scale(.97) }
.btn-primary.lg { font-size: 16px; padding: 14px 30px }
.btn-primary[hidden], .btn-ghost[hidden] { display: none }
.btn-ghost { all: unset; cursor: pointer; font-size: 14px; color: var(--mut); padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line-2) }
.btn-ghost:hover { color: var(--ink) }
.chips-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none }
.chips-nav 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 }
.chips-nav a:hover { color: var(--ink) }
.chips-nav a.is-on { color: var(--ink); background: var(--paper); border-color: var(--line-2); font-weight: 650 }

/* 답안지(OMR) */
.omr { padding: 10px 2px 4px }
.omr[hidden] { display: none }
.omr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px }
.omr-grid button { all: unset; cursor: pointer; text-align: center; font: 600 13px/1 var(--sans); padding: 10px 0; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); color: var(--mut); transition: transform .15s, background .2s }
.omr-grid button:hover { transform: translateY(-1px) }
.omr-grid button:focus-visible { outline: 2px solid var(--navy) }
.omr-grid button.a { background: var(--navy-soft); color: var(--navy); border-color: transparent }
.omr-grid button.o { background: var(--ok-soft); color: var(--ok); border-color: transparent }
.omr-grid button.x { background: var(--bad-soft); color: var(--bad); border-color: transparent }
.omr-grid button.p { background: var(--warn-soft); color: var(--warn); border-color: transparent }
.omr-legend { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--mut); align-items: center }
.omr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px }
.omr-legend .a { background: var(--navy-soft); outline: 1px solid var(--navy) }.omr-legend .o { background: var(--ok) }.omr-legend .x { background: var(--bad) }.omr-legend .p { background: var(--warn) }

/* ── 채점 결과 ── */
.summary[hidden] { display: none }
.summary { padding-top: 8px; padding-bottom: 8px }
.sum-card { display: grid; grid-template-columns: 132px 1fr; gap: 24px; align-items: center; background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--pen) 40%, var(--line)); border-radius: 22px; padding: 20px 24px; box-shadow: var(--shadow) }
.sum-card .ring { width: 132px; height: 132px }
.sum-card .ring .num { font-size: 30px }
.sum-title { font: 700 20px/1.3 var(--serif); margin-bottom: 4px }
.sum-wrong { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--mut) }
.sum-wrong button { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--bad-soft); color: var(--bad) }
.sum-wrong button:hover { filter: brightness(.96) }
.sum-wrong button:focus-visible { outline: 2px solid var(--navy) }

/* ── 지문 묶음 ── */
.grp { padding: 26px 0 6px }
.grp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink) }
.grp-head .range { font: 700 13px/1 var(--sans); color: var(--pen); letter-spacing: .04em }
.grp-head h2 { font: 700 20px/1.35 var(--serif); letter-spacing: -.01em }
.passage-in { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; box-shadow: var(--shadow); margin-bottom: 18px }
.p-toggle { all: unset; cursor: pointer; display: none; font-size: 12.5px; color: var(--navy); background: var(--navy-soft); padding: 5px 12px; border-radius: 999px; margin: 0 0 10px auto; position: sticky; top: 0; z-index: 1 }
.p-block + .p-block { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line-2) }
.p-label { font: 700 13px/1 var(--sans); color: var(--pen); margin-bottom: 10px; letter-spacing: .04em }
.p-text { font: 400 calc(16px * var(--fz, 1))/1.95 var(--serif); white-space: pre-wrap; max-width: 36em }
.fig { display: block; margin: 12px 0; padding: 14px 16px; border: 1.5px dashed var(--line-2); border-radius: 12px; color: var(--mut); font: 400 13.5px/1.6 var(--sans); background: color-mix(in srgb, var(--paper) 60%, var(--bg)) }
@media (min-width: 1000px) {
  .grp.has-passage .grp-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start }
  .passage { position: sticky; top: calc(var(--bar-h, 96px) + 10px) }
  .passage-in { max-height: calc(100vh - var(--bar-h, 96px) - 28px); overflow: auto; overscroll-behavior: contain }
}
@media (max-width: 999px) {
  .passage { position: sticky; top: var(--bar-h, 96px); z-index: 5 }
  .passage-in { max-height: 34vh; overflow: auto; overscroll-behavior: contain; padding: 12px 16px; border-radius: 14px }
  .p-toggle { display: block }
  .passage.is-collapsed .passage-in { max-height: none; overflow: hidden }
  .passage.is-collapsed .p-body { display: none }
  .passage.is-collapsed .p-toggle { margin-bottom: 0 }
}

/* ── 문항 ── */
.q { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 16px; margin-bottom: 14px; box-shadow: var(--shadow); transition: border-color .3s, box-shadow .3s }
.q.is-cur { border-color: color-mix(in srgb, var(--navy) 45%, var(--line)) }
.q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap }
.q-no { font: 700 30px/1 var(--serif); letter-spacing: -.03em; min-width: 38px }
.q-no.sr { font-size: 15px; color: var(--pen); min-width: 0 }
.q-res { margin-left: auto; min-height: 24px }
.q .stem { font: 500 calc(17px * var(--fz, 1))/1.8 var(--serif); margin: 8px 0 10px; max-width: 38em }
.q .box { font-size: calc(15px * var(--fz, 1)) }
.q .ch.pick li { cursor: pointer; border: 1px solid transparent; padding: 9px 10px; transition: background .2s, border-color .2s }
.q .ch.pick li:hover { background: color-mix(in srgb, var(--navy-soft) 60%, transparent) }
.q .ch.pick li:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px }
.q .ch.pick li.is-pick { background: var(--navy-soft); border-color: color-mix(in srgb, var(--navy) 35%, transparent) }
.q .ch.pick li.is-right { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent) }
.q .ch.pick li.is-wrong { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 45%, transparent) }
.q.is-locked .ch.pick li { cursor: default }
.q .ch .t { font-size: calc(16px * var(--fz, 1)) }
.q .ch .why { display: none; font-size: 13.5px; line-height: 1.7; color: var(--mut); margin-top: 2px }
.q.show-why .ch .why { display: block }
.why b { margin-right: 4px }.why b.o { color: var(--ok) }.why b.x { color: var(--bad) }
.why-hint { font-size: 12.5px; color: var(--mut); margin-top: 6px }
.blanks-in { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 4px }
.blanks-in label { display: flex; align-items: center; gap: 6px; font: 700 15px/1 var(--serif) }
.blanks-in input { font: 400 15px/1.2 var(--sans); padding: 9px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink); width: 160px; transition: border-color .2s, background .2s }
.blanks-in input:focus { outline: none; border-color: var(--navy) }
.blanks-in input.is-ok { border-color: var(--ok); background: var(--ok-soft) }
.blanks-in input.is-bad { border-color: var(--bad); background: var(--bad-soft) }
.blanks-in input:disabled { opacity: 1; -webkit-text-fill-color: var(--ink) }
.sr-answer { margin-top: 6px; font-size: 14px }.sr-answer:empty { display: none }
.sr-answer .k { font: 700 11px/1 var(--sans); letter-spacing: .1em; color: var(--mut); margin-right: 6px }
.solve-btn { margin-top: 12px; font-weight: 600 }
.solve-btn[disabled] { opacity: .55; cursor: default }

/* 풀이 영역 */
.ans-line { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap }
.ans-line .k { font: 700 12px/1 var(--sans); letter-spacing: .1em; color: var(--mut) }
.ans-line .a { font: 700 22px/1.3 var(--serif); padding: 0 6px }
.an-list { display: grid; gap: 2px }
.an { font-size: 14px; border-top: 1px solid var(--line); padding: 7px 0; line-height: 1.7 }.an:first-child { border-top: 0 }
.an .v { font-weight: 700; margin-right: 8px; white-space: nowrap }.an .v.o { color: var(--ok) }.an .v.x { color: var(--bad) }
.diff { font-size: 12.5px; color: var(--mut) }
.drawer .inner { padding-top: 6px }
.md { font-size: calc(15.5px * var(--fz, 1)) }

.end { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 28px 0 8px }
@media (max-width: 720px) {
  .bar-row { gap: 6px }
  .bar-tools { gap: 6px; width: 100% }
  .bar-tools .btn-primary { margin-left: auto }
  .q { padding: 16px 14px 14px } .q .stem { font-size: calc(16.5px * var(--fz, 1)) }
  .sum-card { grid-template-columns: 1fr; justify-items: start; padding: 18px }
  .blanks-in input { width: 130px }
  .keys { display: none }
}
@media print { .bar, .end, .solve-btn { display: none } }

/* ══ 학습 기능 ══ */
/* 지문 표시(형광펜·밑줄·근거 위치) — CSS Custom Highlight API. 라이트·다크 모두에서 읽히는 반투명 색. */
::highlight(hl-y) { background-color: rgba(255, 214, 51, .55) }
::highlight(hl-g) { background-color: rgba(70, 200, 120, .42) }
::highlight(hl-p) { background-color: rgba(255, 110, 150, .38) }
::highlight(hl-u) { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: #d33a2f }
::highlight(ev) { background-color: rgba(255, 150, 40, .6) }
.hl-bar { position: fixed; z-index: 70; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .3) }
.hl-bar[hidden] { display: none }
.hl-bar button { all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; font: 700 12px/1 var(--sans); color: var(--bg); box-sizing: border-box }
.hl-bar .c-y { background: #ffd633 }.hl-bar .c-g { background: #46c878 }.hl-bar .c-p { background: #ff6e96 }
.hl-bar .c-u { background: transparent; border: 1.5px solid var(--bg); text-decoration: underline }
.hl-bar .c-x { background: transparent; color: var(--bg); font-size: 14px }
.hl-bar button:focus-visible { outline: 2px solid var(--bg); outline-offset: 1px }

/* 선지 소거 */
.q .ch.pick li { grid-template-columns: 30px 1fr auto }
.q .ch .why { grid-column: 2 / -1 }
.x-btn { all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; font-size: 12px; color: var(--mut); opacity: .55; transition: opacity .15s, background .15s }
.x-btn:hover { opacity: 1; background: var(--line) }
.x-btn:focus-visible { outline: 2px solid var(--navy); opacity: 1 }
.q.is-locked .x-btn, .q.show-why .x-btn { display: none }
.ch li.is-out .t, .ch li.is-out .n { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .42 }
.ch li.is-out .x-btn { opacity: 1; color: var(--pen) }

/* 오답노트 별 */
.star { all: unset; cursor: pointer; font-size: 20px; line-height: 1; color: var(--mut); padding: 4px 6px; border-radius: 8px }
.star:hover { color: var(--warn) }
.star.is-on { color: #e0a000 }
.star:focus-visible { outline: 2px solid var(--navy) }
.pill-btn.is-on { background: var(--warn-soft); color: var(--warn) }
.filter-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 7px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn) }
.filter-note[hidden] { display: none }
.filter-note button { all: unset; cursor: pointer; font-weight: 650; text-decoration: underline; text-underline-offset: 3px }

/* 지문 근거 링크 */
.ev { all: unset; cursor: pointer; border-bottom: 1.5px dotted var(--navy); color: var(--navy); font-weight: 600 }
.ev:hover { background: var(--navy-soft) }
.ev:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px }
.ev-sample { border-bottom: 1.5px dotted var(--navy); color: var(--navy); font-weight: 600 }
.ans-badge { display: inline-grid; place-content: center; min-width: 36px; height: 36px; border: 2px solid var(--pen); border-radius: 50%; color: var(--pen); font: 700 20px/1 var(--serif) }

/* 도움말·상단 */
.tips { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--mut) }
.tips b { color: var(--ink); font-weight: 650 }
.tips .keys { margin-top: 0 }
.progress { height: 2px }

/* 채점 요약: 점수 링은 연출 없이 바로 표시 */
.sum-card { grid-template-columns: 132px 1fr }
.sum-card .ring .arc { transition: none; stroke-dashoffset: calc(1 - var(--v)) }
.weak { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px }
.weak-title { font: 700 13px/1 var(--sans); margin-bottom: 8px }
.weak-title span { font-weight: 400; color: var(--mut) }
.weak-row { all: unset; cursor: pointer; display: grid; grid-template-columns: minmax(120px, 220px) 1fr 40px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; font-size: 13.5px; width: calc(100% - 16px) }
.weak-row:hover { background: var(--line) }
.weak-row:focus-visible { outline: 2px solid var(--navy) }
.weak-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.weak-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden }
.weak-bar i { display: block; height: 100%; background: var(--bad); border-radius: 99px }
.weak-row b { text-align: right; font-variant-numeric: tabular-nums }
.sum-filter { background: var(--navy-soft) !important; color: var(--navy) !important }
.pill-btn[data-timer] { font-variant-numeric: tabular-nums }
@media (max-width: 720px) {
  .sum-card { grid-template-columns: 1fr }
  .weak-row { grid-template-columns: minmax(80px, 140px) 1fr 36px }
}
@media print { .hl-bar { display: none } }

/* ── 학습 기능: 확신도 · 힌트 · 메모 · 다시 풀기 · 기록 ── */
[hidden].history, [hidden].review-btn, [hidden].vw { display: none !important }
.bar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.back { font-size: 13px; color: var(--mut); text-decoration: none; padding: 6px 4px; white-space: nowrap }
.back:hover { color: var(--ink) }
.back:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px }
.h-course { color: var(--mut); font-weight: 500 }
.tag.ink { color: var(--navy); background: var(--navy-soft); border-color: transparent }
.review-btn { color: var(--navy); border-color: var(--navy); font-weight: 650 }
.q.is-redo { border-color: var(--navy) }
.memo { display: block; margin-top: 18px }
.memo span { display: block; font-size: 13px; font-weight: 650; margin-bottom: 6px }
.memo small { font-weight: 400; color: var(--mut); margin-left: 4px }
.memo textarea { width: 100%; font: inherit; font-size: calc(14.5px * var(--fz, 1)); color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; resize: vertical; min-height: 56px }
.memo textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px }
.q.has-memo .star::after { content: '✎'; font-size: 12px; margin-left: 4px; color: var(--navy) }
.history { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 13.5px; color: var(--mut) }
.history .k { font-weight: 650; color: var(--ink) }
.history i { font-style: normal; opacity: .5 }
.history .att.last { color: var(--ink); font-weight: 700 }
.delta { font-size: 13px; font-weight: 650; margin-left: 8px; padding: 3px 8px; border-radius: 999px }
.delta.up { color: var(--ok); background: var(--ok-soft) }
.delta.down { color: var(--bad); background: var(--bad-soft) }
.sum-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center }
.sum-next { margin-top: 12px; font-size: 13px; color: var(--mut) }
.sum-next b { color: var(--navy) }
.empty { padding: 96px 20px; text-align: center }
.empty h1 { font: 700 28px/1.3 var(--serif); margin-bottom: 12px }
.empty p { color: var(--mut); margin-bottom: 18px }
.empty a.btn-primary { text-decoration: none; display: inline-block }

/* ── 자료실 ── */
.lib-hero { padding-bottom: 8px }
.lib-top { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.today { margin-top: 20px }
.today-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow) }
.today-h { font: 700 12px/1 var(--sans); letter-spacing: .12em; color: var(--pen); margin-bottom: 12px }
.today-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 }
.today-row + .today-row { border-top: 1px dashed var(--line) }
.today-k { font-weight: 650; font-size: 14.5px; margin-right: 6px }
.today-k b { color: var(--navy); font-size: 18px }
.today-s, .today-empty { color: var(--mut); font-size: 14px }
.today-empty b { color: var(--ink) }
.today-a { font-size: 13.5px; text-decoration: none; color: var(--ink); padding: 7px 12px; border-radius: 999px; background: var(--navy-soft); transition: transform .2s var(--ease) }
.today-a:hover { transform: translateY(-1px) }
.today-a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.today-a b { color: var(--navy); margin-left: 4px }
.weak-all .chip b { color: var(--bad); margin-left: 4px }
.lib { margin-top: 28px; padding-bottom: 64px }
.lib-filter { display: flex; flex-direction: column; gap: 10px }
.lib-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.lib-search input[type='search'] { flex: 1 1 240px; max-width: 420px; font: inherit; font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 16px }
.lib-search input[type='search']:focus { outline: 2px solid var(--navy); outline-offset: 1px }
.lib-toggle { font-size: 13.5px; color: var(--mut); display: inline-flex; align-items: center; gap: 6px; cursor: pointer }
.facet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.facet-k { font-size: 12px; font-weight: 700; color: var(--mut); width: 48px; flex: none }
.fchip { all: unset; cursor: pointer; font-size: 13px; line-height: 1; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); transition: background .2s, color .2s, border-color .2s }
.fchip i { font-style: normal; color: var(--mut); font-size: 11.5px; margin-left: 2px }
.fchip:hover { border-color: var(--mut) }
.fchip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.fchip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.fchip.is-on i { color: inherit; opacity: .7 }
.lib-count { margin: 18px 0 10px; font-size: 13px; color: var(--mut) }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px }
.ex-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 16px; box-shadow: var(--shadow); transition: transform .25s var(--ease), border-color .25s }
a.ex-card:hover { transform: translateY(-2px); border-color: var(--line-2) }
a.ex-card:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.ex-card.has-due { border-color: var(--navy) }
.ex-card.is-off { box-shadow: none; background: transparent; border-style: dashed; color: var(--mut) }
.ex-meta { font-size: 12.5px; color: var(--mut); font-weight: 600 }
.ex-card h3 { font: 700 19px/1.3 var(--serif); margin: 2px 0 0 }
.ex-course { font-size: 14.5px; color: var(--mut) }
.ex-card .meta-row { margin-top: 10px; gap: 6px }
.ex-note { font-size: 13px; margin-top: 10px }
.ex-bar { height: 4px; border-radius: 4px; background: var(--line); margin-top: 14px; overflow: hidden }
.ex-bar i { display: block; height: 100%; background: var(--ok); border-radius: 4px }
.ex-bar i.prog { background: var(--navy) }
.ex-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px }
.ex-my { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--mut) }
.my.score { color: var(--ink) } .my.score b { font-size: 20px }
.my.prog { color: var(--navy); font-weight: 650 }
.ex-cta { font-size: 13.5px; font-weight: 650; color: var(--navy); white-space: nowrap }
@media (max-width: 720px) { .facet-k { width: 100% } .ex-grid { grid-template-columns: 1fr } }
@media print { .memo, .history, .back, .vw { display: none !important } }

/* ── 빨간펜 첨삭 표시 (문제지 · 뷰어 공통) ── */
.q-no { position: relative; display: inline-block }
.gmark { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; transform: translate(-50%, -50%) rotate(-6deg); pointer-events: none }
.q-no.sr .gmark { left: 14px; width: 50px; height: 50px }
.gmark svg { width: 100%; height: 100%; overflow: visible }
.gmark path { fill: none; stroke: var(--pen); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pen-draw .55s var(--ease) .05s forwards; opacity: .9 }
@keyframes pen-draw { to { stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce) { .gmark path { animation: none; stroke-dashoffset: 0 } }
.pen-score { font: 400 26px/1 var(--hand); color: var(--pen); display: inline-block; transform: rotate(-3deg); padding: 0 4px }
.pen-score.bad { font-size: 22px }
/* 선지: 정답 번호에 펜 동그라미, 내가 고른 오답 번호에 빗금 */
.q .ch.pick li.is-right, .vw-ch li.is-right { background: transparent; border-color: transparent }
.q .ch.pick li.is-wrong, .vw-ch li.is-wrong { background: transparent; border-color: transparent }
.ch li.is-right .n, .ch li.is-wrong .n { position: relative; color: var(--pen) }
.ch li.is-right .n::after { content: ''; position: absolute; inset: 1px -1px; border: 2.4px solid var(--pen); border-radius: 54% 46% 57% 43% / 47% 56% 44% 53%; transform: rotate(-9deg); opacity: .9 }
.ch li.is-wrong .n::after { content: ''; position: absolute; inset: -2px -3px; background: linear-gradient(to top right, transparent calc(50% - 1.3px), var(--pen) calc(50% - 1.3px), var(--pen) calc(50% + 1.3px), transparent calc(50% + 1.3px)); opacity: .9 }
.ch li.is-right .t { font-weight: 600 }
.ch li.is-wrong .t { color: var(--mut) }
.sr-answer .hand { font-size: 22px }
.blanks-in input.is-bad { text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px }
::highlight(pen) { text-decoration: underline; text-decoration-color: #d33a2f; text-decoration-thickness: 2.5px; background-color: rgba(211, 58, 47, .09) }

/* 선지 옆 빨간펜 메모 */
.pen-note { grid-column: 2; display: block; margin-top: 2px; padding: 4px 0 4px 12px; border-left: 2.5px solid var(--pen); color: var(--pen); font: 400 calc(14px * var(--fz, 1))/1.7 var(--sans) }
.pen-note b { font: 400 21px/1 var(--hand); margin-right: 8px }
.pen-note .ev { color: inherit; border-bottom-color: currentColor }
.vw-blanks { display: grid; gap: 10px; margin: 14px 0 6px }
.vw-blank { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 calc(16px * var(--fz, 1))/1.5 var(--serif) }
.vw-blank .mine { padding: 2px 10px; border-bottom: 1.5px solid var(--line-2); min-width: 80px }
.vw-blank .mine.bad { text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; color: var(--mut) }
.vw-blank .fix, .vw-model .hand { font-size: 24px }
.vw-model { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2) }
.vw-model .k { font: 700 11px/1 var(--sans); letter-spacing: .1em; color: var(--mut) }
/* ── 상단 막대 (한 줄: 제목 · 시간 · 답안지 · 설정 · 채점) ── */
.hero.wrap.wide { padding: 36px 20px 10px }
.bar-row { flex-wrap: nowrap }
.bar-left { flex: 1; min-width: 0; flex-wrap: nowrap }
.back { font-size: 18px; line-height: 1; width: 34px; height: 34px; display: grid; place-content: center; border-radius: 50%; padding: 0; flex: none }
.back:hover { background: var(--line) }
.bar-title { min-width: 0; display: flex; flex-direction: column; line-height: 1.25 }
.bar-title b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bar-title span { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bar-tools { flex-wrap: nowrap; flex: none }
.pill-btn.is-open { background: var(--ink); color: var(--bg) }
.pill-btn.is-open b { color: inherit }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow) }
.panel[hidden] { display: none }
.omr-filters { display: flex; gap: 6px; margin-bottom: 10px }
.fbtn { all: unset; cursor: pointer; font-size: 12.5px; line-height: 1; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mut) }
.fbtn[hidden] { display: none }
.fbtn:hover { color: var(--ink) }
.fbtn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.fbtn.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.prefs { display: grid; gap: 10px; max-width: 420px; margin-left: auto }
.pref { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px }
.pref > span { color: var(--mut); flex: none }
.pref.keys { align-items: flex-start; margin-top: 0 }
.pref.keys div { text-align: right; line-height: 2 }
/* 문항 아래 버튼: 채점 전에는 조용하게, 채점 뒤에는 빨간펜 색으로 */
.solve-btn { background: transparent; border: 1px solid var(--line-2); color: var(--mut); padding: 7px 14px }
.solve-btn:hover { color: var(--ink); border-color: var(--mut) }
.solve-btn.is-done { background: var(--pen-soft); border-color: transparent; color: var(--pen); font-weight: 650 }
@media (max-width: 720px) {
  .bar-title span { display: none }
  .bar-tools { gap: 5px }
  .pill-btn { padding: 8px 10px }
  .btn-primary { padding: 9px 13px }
}

/* ── 시험지 조판: 원본 쪽 단위 종이 + 2단, 가운데 세로줄 ── */
.paper { max-width: 1180px; padding-top: 8px }
.sheet { background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--shadow); border-radius: 4px; padding: 34px 40px 26px; margin: 0 auto 26px }
.sheet[hidden] { display: none }
.cols { column-count: 2; column-gap: 56px; column-rule: 1px solid var(--line-2) }
.sheet-run { font: 700 13px/1 var(--serif); text-align: right; color: var(--mut); padding-bottom: 10px; margin-bottom: 18px; border-bottom: 2px solid var(--ink) }
.sheet-no { text-align: center; font: 400 13px/1 var(--serif); color: var(--mut); margin-top: 22px }
.paper-head { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 2px solid var(--ink) }
.ph-title { font: 700 clamp(20px, 3vw, 26px)/1.3 var(--serif); text-align: center; letter-spacing: .02em; margin-bottom: 14px }
.ph-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--serif) }
.ph-table th, .ph-table td { border: 1px solid var(--ink); padding: 7px 10px; text-align: center }
.ph-table th { width: 64px; font-weight: 700; background: color-mix(in srgb, var(--ink) 6%, transparent) }
.ph-subject { font-weight: 700; font-size: 16px }
.grp { padding: 0; margin: 0 }
.grp[hidden] { display: none }
.g-inst { font: 500 calc(15.5px * var(--fz, 1))/1.7 var(--serif); margin: 0 0 10px }
.g-inst b { font-weight: 700 }
.p-block { margin: 0 0 14px }
.p-block + .p-block { margin-top: 0; padding-top: 0; border-top: 0 }
.p-label { display: block; font: 700 calc(15px * var(--fz, 1))/1.6 var(--serif); color: var(--ink); margin: 0 0 2px; letter-spacing: 0 }
.p-text { font: 400 calc(15px * var(--fz, 1))/1.9 var(--serif); text-align: justify; max-width: none; text-indent: 1em }
.q { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 30px; break-inside: avoid; position: relative }
.q.is-cur { border: 0 }
.q.is-cur::before { content: ''; position: absolute; left: -14px; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--navy) 50%, transparent) }
.q.is-redo::before { content: ''; position: absolute; left: -14px; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: var(--pen) }
.q-line { display: flex; gap: 6px; align-items: baseline }
.q-no { font: 700 calc(17px * var(--fz, 1))/1.7 var(--serif); letter-spacing: 0; min-width: 1.6em; flex: none }
.q-no.sr { font-size: calc(15.5px * var(--fz, 1)); color: var(--ink); white-space: nowrap }
.q .stem { font: 500 calc(15.5px * var(--fz, 1))/1.7 var(--serif); margin: 0; max-width: none }
.q-pts { white-space: nowrap; font-weight: 400 }
.gmark { width: 54px; height: 54px }
.q-no.sr .gmark { left: 22px }
.q .box { border: 1px solid var(--ink); border-radius: 0; background: none; margin: 10px 0 8px 1.6em; padding: 10px 12px; font: 400 calc(14.5px * var(--fz, 1))/1.8 var(--serif); max-width: none }
.q .ch.pick { margin: 8px 0 0 1.6em; gap: 1px }
.q .ch.pick li { grid-template-columns: 1.5em 1fr auto; padding: 3px 6px; border-radius: 6px; gap: 0 4px }
.q .ch .n { font: 400 calc(15.5px * var(--fz, 1))/1.7 var(--serif) }
.q .ch .t { font: 400 calc(15px * var(--fz, 1))/1.7 var(--serif) }
.q .ch.pick li.is-pick { background: none; border-color: transparent }
.q .ch.pick li.is-pick .n { background: var(--ink); color: var(--paper); border-radius: 50%; width: 1.35em; height: 1.35em; line-height: 1.35em; margin-top: .18em; font-weight: 700 }
.q .ch.pick li.is-pick .t { font-weight: 600 }
.q.is-locked .ch.pick li.is-pick.is-wrong .n { background: none; color: var(--pen) }
.x-btn { opacity: 0 }
.q .ch.pick li:hover .x-btn, .x-btn:focus-visible, .ch li.is-out .x-btn { opacity: .7 }
.blanks-in { margin: 10px 0 0 1.6em }
.blanks-in input { border-radius: 0; border-width: 0 0 1.5px; background: none; padding: 6px 4px; width: 150px }
.sr-answer { margin-left: 1.6em }
.q-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 6px 0 0 1.6em; min-height: 30px; flex-wrap: wrap }
.q-foot .q-res { margin-left: 0; margin-right: auto; display: flex; align-items: center; gap: 6px; min-height: 0 }
.q-foot .star { font-size: 16px; opacity: .45 }
.q-foot .star:hover, .q-foot .star.is-on { opacity: 1 }
.solve-btn { all: unset; cursor: pointer; font: 500 12.5px/1 var(--sans); color: var(--mut); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); margin: 0 }
.solve-btn:hover { color: var(--ink); border-color: var(--mut) }
.solve-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.solve-btn.is-done { background: var(--pen-soft); border-color: transparent; color: var(--pen); font-weight: 650 }
.q:not(.is-locked):not(:hover):not(.is-cur) .q-foot .solve-btn, .q:not(.is-locked):not(:hover):not(.is-cur) .q-foot .star:not(.is-on) { opacity: 0 }
@media (hover: none) { .q .q-foot .solve-btn, .q .q-foot .star { opacity: 1 !important } .x-btn { opacity: .5 } }
@media (max-width: 900px) {
  .cols { column-count: 1 }
  .sheet { padding: 22px 18px 18px; border-radius: 0; margin-left: -20px; margin-right: -20px; border-left: 0; border-right: 0 }
  .ph-table { font-size: 12.5px } .ph-table th { width: auto }
}
@media print { .sheet { box-shadow: none; border: 0; break-after: page } .q-foot { display: none } }

/* 펜 표시는 번호 글자 크기에 맞춘다 (선지가 여러 줄이어도 늘어나지 않게) */
.ch .n { align-self: start }
.ch li.is-right .n::after { inset: .12em -.12em }
.ch li.is-wrong .n::after { inset: 0 -.2em }
.ch.marked .flag { color: var(--pen) }

/* ── 모션 없음: 스크롤할 때 화면이 움직이거나 다시 그려지지 않게 한다 ── */
*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important }
html { scroll-behavior: auto }
.gmark path { stroke-dashoffset: 0 }
.ring .arc { stroke-dashoffset: calc(1 - var(--v)) }
.bar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none }
.q.is-cur::before { content: none }
/* 문항 아래 도구는 항상 같은 자리에 같은 모습으로 (마우스·스크롤에 따라 나타났다 사라지지 않음) */
.q .q-foot .solve-btn, .q .q-foot .star, .q:not(.is-locked):not(:hover):not(.is-cur) .q-foot .solve-btn, .q:not(.is-locked):not(:hover):not(.is-cur) .q-foot .star:not(.is-on) { opacity: 1 }
.q-foot .star { opacity: .45 }
.x-btn, .q .ch.pick li:hover .x-btn { opacity: .35 }
.x-btn:hover, .ch li.is-out .x-btn { opacity: .9 }
.q .ch.pick li:hover { background: none }
.sheet { contain: layout paint }
.chips-nav a, .chips-nav a.is-on { font-weight: 500; border: 1px solid transparent }
.chips-nav a.is-on { border-color: var(--line-2) }

/* ════════ 문제 풀기(한 문제씩) · 시험지 전체 — PC·모바일 공통 레이아웃 ════════ */
body[data-view='solve'] { overflow: hidden }

/* 상단 막대 */
.bar { position: sticky; top: 0; z-index: 40 }
.bar-in { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px clamp(12px, 2vw, 24px) }
.bar-row { min-height: 40px }
.chips-nav { max-width: 1140px; width: 100%; margin: 0 auto }
.panel { position: absolute; right: clamp(12px, 2vw, 24px); top: calc(100% + 6px); width: min(440px, calc(100vw - 24px)); z-index: 45; max-height: calc(100dvh - var(--bar-h, 56px) - 24px); overflow: auto }
.prefs { max-width: none; margin: 0 }
.omr-grid { grid-template-columns: repeat(6, 1fr) }
.omr-grid button { padding: 12px 0 }
.filter-note { align-self: center }

/* 문제 풀기 화면 */
.vw { height: calc(100dvh - var(--bar-h, 57px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg) }
.vw-tabs { display: none }
.vw-body { display: grid; grid-template-columns: var(--vw-l, 50%) 14px minmax(0, 1fr); min-height: 0 }
.vw.no-pass .vw-body { grid-template-columns: minmax(0, 1fr) }
.vw.no-pass .vw-left, .vw.no-pass .vw-split { display: none }
.vw-left, .vw-right { overflow-y: auto; overscroll-behavior: contain; min-width: 0; padding: 30px clamp(16px, 3.2vw, 48px) 48px; -webkit-overflow-scrolling: touch }
.vw-left { background: var(--paper); border-right: 1px solid var(--line) }
.vw-split { cursor: col-resize; position: relative; touch-action: none; margin-left: -7px; z-index: 2 }
.vw-split::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 4px; background: var(--line-2) }
.vw-split:hover::after, .vw-split:focus-visible::after { background: var(--navy) }
.vw-split:focus-visible { outline: none }
.vw-pass-in { max-width: 40em; margin: 0 auto }
.vw-pass-in .g-inst { color: var(--mut); font-size: calc(14px * var(--fz, 1)); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line) }
.vw-pass-in .p-text { font-size: calc(16px * var(--fz, 1)); line-height: 2 }
.vw-pass-in .p-block { margin-bottom: 22px }
.vw-col { max-width: 44em; margin: 0 auto }
.vq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px }
.vq-head .q-no { font: 700 34px/1 var(--serif); min-width: 0; padding: 4px 6px 4px 0 }
.vq-head .q-no.sr { font-size: 19px }
.vq-head .gmark { width: 64px; height: 64px }
.vq-head .q-res { margin-left: auto; display: flex; align-items: center }
.vq-head .star { font-size: 22px; padding: 6px 8px }
.vw .stem { font: 500 calc(18px * var(--fz, 1))/1.75 var(--serif); margin: 0 0 16px; max-width: none }
.vw .box { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; font: 400 calc(15.5px * var(--fz, 1))/1.85 var(--serif); max-width: none; white-space: pre-wrap; background: var(--paper) }
.vw.no-pass .vw-right { background: var(--bg) }
/* 선지: 누르기 쉬운 큰 줄 */
.vw .ch.pick { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.vw .ch.pick li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 32px; gap: 0 10px; align-items: start; cursor: pointer; padding: 13px 10px 13px 14px; min-height: 52px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--paper) }
.vw .ch.pick li:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.vw .ch.pick .n { font: 400 calc(17px * var(--fz, 1))/1.6 var(--serif); text-align: center; border-radius: 50%; width: 1.6em; height: 1.6em; line-height: 1.6em }
.vw .ch.pick .t { font: 400 calc(16.5px * var(--fz, 1))/1.65 var(--serif) }
.vw .ch.pick li.is-pick { border-color: var(--navy); background: var(--navy-soft) }
.vw .ch.pick li.is-pick .n { background: var(--navy); color: var(--paper); font-weight: 700 }
.vw .ch.pick li.is-pick .t { font-weight: 600 }
.vw .ch.pick .x-btn { opacity: .4; width: 32px; height: 32px; align-self: center }
.vw .ch.pick li.is-out { background: transparent; border-style: dashed }
.vw .ch.pick li.is-out .t, .vw .ch.pick li.is-out .n { text-decoration: line-through; opacity: .45 }
.vw .ch.pick li.is-out .x-btn { opacity: .9 }
@media (hover: hover) { .vw .ch.pick li:hover { border-color: var(--mut) } .vw .ch.pick li.is-pick:hover { border-color: var(--navy) } }
.vw .blanks-in { display: grid; gap: 10px; margin: 0 }
.vw .blanks-in label { display: grid; grid-template-columns: 2em minmax(0, 1fr); align-items: center; font: 700 17px/1 var(--serif) }
.vw .blanks-in input { width: 100%; font: 400 16px/1.3 var(--sans); padding: 13px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink) }
.vw .blanks-in input:focus { outline: none; border-color: var(--navy) }
/* 첨삭된 선지 */
.vw .ch.marked { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none }
.vw .ch.marked li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 0 }
.vw .ch.marked .n { font: 400 calc(17px * var(--fz, 1))/1.65 var(--serif); text-align: center }
.vw .ch.marked .t { font: 400 calc(16.5px * var(--fz, 1))/1.65 var(--serif) }
.vw .ch.marked .flag { font-size: 16px }
/* 풀이 */
.vw-sol { margin-top: 34px; padding-top: 22px; border-top: 2px solid var(--ink); font-size: calc(15.5px * var(--fz, 1)) }
.sol-title { font: 700 12px/1 var(--sans); letter-spacing: .14em; color: var(--pen) }
.vw-sol .md p, .vw-sol .md ul, .vw-sol .md ol, .vw-sol .note, .vw-sol .intent { max-width: none }
.vw-sol .why-hint { font-size: 12.5px; color: var(--mut); margin-top: 8px }
/* 아래 고정 막대 */
.dock { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px clamp(12px, 2vw, 24px) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--paper) }
.dock-nav { all: unset; cursor: pointer; justify-self: start; font: 500 14px/1 var(--sans); color: var(--ink); padding: 13px 16px; border-radius: 999px; border: 1px solid var(--line-2); white-space: nowrap }
.dock-nav:last-child { justify-self: end }
.dock-nav[disabled] { opacity: .35; cursor: default }
.dock-nav:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.dock-mid { display: flex; align-items: center; gap: 16px }
.dock-pos { font: 500 13px/1 var(--sans); color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap }
.dock .btn-primary { min-width: 220px; text-align: center; box-sizing: border-box; padding: 15px 28px; font-size: 16px }
.dock .btn-primary.is-next { background: var(--ink); color: var(--bg) }

/* 시험지 전체(읽기 전용): 문항을 누르면 그 문항 풀기로 */
#paper .q { cursor: pointer }
.q .ch { margin: 8px 0 0 1.6em; gap: 1px }
.q .ch li { grid-template-columns: 1.5em minmax(0, 1fr); padding: 3px 6px; gap: 0 4px }
.q .ch li.is-pick .n { background: var(--ink); color: var(--paper); border-radius: 50%; width: 1.35em; height: 1.35em; line-height: 1.35em; margin-top: .18em; font-weight: 700 }
.q .ch li.is-pick .t { font-weight: 600 }
.q.is-locked .ch li.is-pick.is-wrong .n, .q.is-locked .ch li.is-right .n { background: none; color: var(--pen) }
.blanks-ro { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0 1.6em; font: 400 calc(15px * var(--fz, 1))/1.5 var(--serif) }
.blanks-ro .bl { display: inline-flex; align-items: baseline; gap: 6px }
.blanks-ro .mine { display: inline-block; min-width: 96px; min-height: 1.5em; border-bottom: 1.5px solid var(--line-2); padding: 0 4px }
.blanks-ro .mine.is-bad { text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; color: var(--mut) }
.blanks-ro .mine.is-ok { border-bottom-color: var(--pen) }
.star-mark { color: #e0a000; font-size: 15px }
.end { gap: 12px }
.end [data-toggle-view] { background: var(--ink); color: var(--bg) }

/* ── 좁은 화면(휴대폰·세로 태블릿) ── */
@media (max-width: 860px) {
  .bar-in { padding: 6px 10px; gap: 4px }
  .bar-title span, .t-timer { display: none }
  .bar-title b { font-size: 14px }
  .bar-tools { gap: 5px }
  .pill-btn { padding: 9px 11px; font-size: 13px }
  .bar .btn-primary { padding: 10px 14px }
  .panel { left: 10px; right: 10px; width: auto }
  .vw-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-bottom: 1px solid var(--line) }
  .vw.no-pass .vw-tabs { display: none }
  .vw-tabs button { all: unset; cursor: pointer; text-align: center; padding: 12px 0 10px; font: 500 14px/1 var(--sans); color: var(--mut); border-bottom: 2px solid transparent }
  .vw-tabs button.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink) }
  .vw-body, .vw.no-pass .vw-body { grid-template-columns: minmax(0, 1fr) }
  .vw-split { display: none }
  .vw[data-tab='q'] .vw-left, .vw[data-tab='p'] .vw-right { display: none }
  .vw-left { border-right: 0 }
  .vw-left, .vw-right { padding: 20px 16px 32px }
  .vq-head .q-no { font-size: 28px }
  .vw .stem { font-size: calc(17px * var(--fz, 1)) }
  .dock { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding-left: 10px; padding-right: 10px }
  .dock-nav { padding: 14px 16px; font-size: 16px }
  .dock-nav span { display: none }
  .dock-mid { gap: 10px }
  .dock-pos { font-size: 12px }
  .dock .btn-primary { min-width: 0; flex: 1; padding: 15px 10px }
  .hero.wrap.wide { padding: 22px 16px 6px }
  .sum-card { grid-template-columns: 1fr; justify-items: start }
  .omr-grid { grid-template-columns: repeat(6, 1fr) }
}
@media print { .vw, .dock { display: none !important } }
/* 풀기 화면은 화면 높이에 꼭 맞춘다 (막대 높이를 계산하지 않고 남는 높이를 그대로 쓴다) */
body[data-view='solve'] { height: 100dvh; display: flex; flex-direction: column }
body[data-view='solve'] .bar { flex: none; position: relative }
body[data-view='solve'] #app { flex: 1; min-height: 0 }
.vw { height: 100% }
.bar-title { align-items: flex-start; text-align: left }
.sum-filter { all: unset; cursor: pointer; font: 500 13px/1 var(--sans); color: var(--ink); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2) }
.sum-filter:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.sum-actions .btn-primary { padding: 11px 18px }
.vw { padding: 0 }
@media (max-width: 860px) {
  .bar-row { flex-wrap: nowrap; gap: 6px }
  .bar-left { flex: 1 1 0; min-width: 0; gap: 4px }
  .bar-tools { width: auto; flex: none }
  .bar-tools .btn-primary { margin-left: 0 }
  .bar-title b { display: block; max-width: 100% }
}
.vw-tabs { grid-row: 1 } .vw-body { grid-row: 2 } .dock { grid-row: 3 }

/* 자료실: 좁은 화면에서는 필터를 한 줄씩 옆으로 넘긴다 */
@media (max-width: 860px) {
  .lib-hero { padding-top: 28px }
  .facet { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px }
  .facet::-webkit-scrollbar { display: none }
  .facet-k { width: auto; min-width: 40px }
  .fchip { flex: none; white-space: nowrap; padding: 9px 13px }
  .lib-search input[type='search'] { flex-basis: 100%; max-width: none }
  .today-card { padding: 16px }
}

/* ════════ 문항 내비게이션 ════════ */
/* PC: 왼쪽에 항상 보이는 문항 목록 · 가운데 지문/문제 · 아래 막대는 문제 쪽에 모아 둔다 */
.vw { grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto }
.qnav { grid-column: 1; grid-row: 1 / 4; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg) }
.vw-tabs { grid-column: 2; grid-row: 1 } .vw-body { grid-column: 2; grid-row: 2 } .dock { grid-column: 2; grid-row: 3 }
.qn-head { padding: 18px 16px 12px; border-bottom: 1px solid var(--line) }
.qn-count { font: 500 13px/1 var(--sans); color: var(--mut) }
.qn-count b { font: 700 22px/1 var(--serif); color: var(--ink) }
.qn-bar { height: 4px; border-radius: 4px; background: var(--line); margin: 10px 0 12px; overflow: hidden }
.qn-bar i { display: block; height: 100%; background: var(--navy); border-radius: 4px }
.qn-filters { display: flex; gap: 6px; flex-wrap: wrap }
.qn-filters .fbtn { padding: 6px 10px; font-size: 12px }
.qn-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 24px; overscroll-behavior: contain }
.qn-g + .qn-g { margin-top: 16px }
.qn-l { font: 700 11px/1 var(--sans); letter-spacing: .04em; color: var(--mut); margin-bottom: 8px }
.qn-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px }
.qn-chips button { all: unset; cursor: pointer; position: relative; text-align: center; font: 600 13px/36px var(--sans); height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); color: var(--mut); box-sizing: border-box }
.qn-chips button.a { background: var(--navy-soft); color: var(--navy); border-color: transparent }
.qn-chips button.o { background: var(--ok-soft); color: var(--ok); border-color: transparent }
.qn-chips button.x { background: var(--bad-soft); color: var(--bad); border-color: transparent }
.qn-chips button.p { background: var(--warn-soft); color: var(--warn); border-color: transparent }
.qn-chips button.is-cur { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.qn-chips button.is-cur.o { background: var(--ok); color: #fff; border-color: var(--ok) }
.qn-chips button.is-cur.x { background: var(--bad); color: #fff; border-color: var(--bad) }
.qn-chips button.is-cur.p { background: var(--warn); color: #fff; border-color: var(--warn) }
.qn-chips button.has-star::after { content: '★'; position: absolute; right: -3px; top: -7px; font-size: 10px; line-height: 1; color: #e0a000 }
.qn-chips button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
/* 아래 막대: 이전 · 정답 확인 · 다음을 한데 모은다 */
.dock { display: flex; align-items: center; justify-content: center; gap: 10px }
.dock .btn-primary { min-width: 240px }
.dock-pos { min-width: 64px; text-align: right; margin-right: 6px }
.dock-hint { text-align: left; margin: 0 0 0 6px; opacity: .7 }
.dock-nav { justify-self: auto }

/* 태블릿·휴대폰: 문항 목록은 위쪽 가로 띠 */
@media (max-width: 1080px) {
  .vw { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto }
  .qnav { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); background: var(--paper) }
  .vw-tabs { grid-column: 1; grid-row: 2 } .vw-body { grid-column: 1; grid-row: 3 } .dock { grid-column: 1; grid-row: 4 }
  .qn-head { flex: none; padding: 8px 4px 8px 12px; border-bottom: 0; display: flex; align-items: center }
  .qn-count, .qn-bar { display: none }
  .qn-filters { flex-wrap: nowrap }
  .qn-filters .fbtn { padding: 9px 10px; white-space: nowrap }
  .qn-list { display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 8px 12px 8px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch }
  .qn-list::-webkit-scrollbar { display: none }
  .qn-g { display: flex; align-items: center; flex: none }
  .qn-g + .qn-g { margin: 0 0 0 8px; padding-left: 8px; border-left: 1px solid var(--line-2) }
  .qn-l { display: none }
  .qn-chips { display: flex; gap: 5px }
  .qn-chips button { flex: none; width: 38px; height: 38px; line-height: 38px; border-radius: 50% }
}
@media (max-width: 860px) {
  .dock { gap: 8px }
  .dock-pos { display: none }
  .dock .btn-primary { min-width: 0; flex: 1 }
}

/* ════════ 지문 고정: 문제를 넘겨도 지문은 그대로 ════════ */
.vw-left { padding-top: 0 }
.vw-pass-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 calc(-1 * clamp(16px, 3.2vw, 48px)) 18px; padding: 12px clamp(16px, 3.2vw, 48px); background: var(--paper); border-bottom: 1px solid var(--line) }
.pass-range { font: 700 13px/1 var(--serif); color: var(--mut); white-space: nowrap }
.pass-qs, .pass-jump { display: flex; gap: 5px; align-items: center }
.pass-jump { margin-left: auto }
.pass-qs button, .pass-jump button { all: unset; cursor: pointer; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 8px; text-align: center; font: 600 13px/32px var(--sans); border-radius: 999px; border: 1px solid var(--line-2); color: var(--mut); background: var(--paper) }
.pass-jump button { font-family: var(--serif); color: var(--ink) }
.pass-qs button.a { background: var(--navy-soft); color: var(--navy); border-color: transparent }
.pass-qs button.o { background: var(--ok-soft); color: var(--ok); border-color: transparent }
.pass-qs button.x { background: var(--bad-soft); color: var(--bad); border-color: transparent }
.pass-qs button.p { background: var(--warn-soft); color: var(--warn); border-color: transparent }
.pass-qs button.is-cur { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.pass-qs button:focus-visible, .pass-jump button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }
.vw-pass-in .p-block { scroll-margin-top: 64px }
/* 좁은 화면: 탭 대신 위(지문)·아래(문제)로 나눠 함께 본다 */
@media (max-width: 860px) {
  .vw-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--vw-t, 44%) 24px minmax(0, 1fr) }
  .vw.no-pass .vw-body { grid-template-rows: minmax(0, 1fr) }
  .vw-left, .vw-right { display: block !important }
  .vw.no-pass .vw-left { display: none !important }
  .vw-left { padding-top: 0; padding-bottom: 18px }
  .vw-right { padding-top: 16px }
  .vw-pass-head { margin: 0 -16px 12px; padding: 8px 16px; gap: 8px }
  .pass-qs button, .pass-jump button { min-width: 36px; height: 36px; line-height: 36px }
  .vw-pass-in .p-text { font-size: calc(15.5px * var(--fz, 1)); line-height: 1.9 }
  .vw-split { display: block; cursor: row-resize; margin: 0; background: var(--bg); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); box-shadow: 0 -6px 10px -8px rgba(0, 0, 0, .25) }
  .vw.no-pass .vw-split { display: none }
  .vw-split::after { width: 44px; height: 4px; margin: -2px 0 0 -22px }
}
/* 좁은 화면은 바로 위에 문항 띠가 있으므로 지문 머리에는 범위와 (가)(나) 바로가기만 둔다 */
@media (max-width: 1080px) { .pass-qs { display: none } }

/* 객관식 선지: 배경·테두리 없이 줄글로. 고른 선지는 번호를 칠하고 글자를 굵게 */
.vw .ch.pick { gap: 2px }
.vw .ch.pick li { background: none; border: 0; border-radius: 10px; padding: 10px 4px 10px 6px; min-height: 48px }
.vw .ch.pick li.is-pick { background: none }
.vw .ch.pick li.is-pick .n { background: var(--ink); color: var(--bg) }
.vw .ch.pick li.is-out { background: none }
@media (hover: hover) { .vw .ch.pick li:hover .n { outline: 1.5px solid var(--line-2); outline-offset: 1px } .vw .ch.pick li.is-pick:hover .n { outline: 0 } }
.vw .box { background: none }

/* ── 모바일에서 깨지던 곳 ── */
@media (max-width: 860px) {
  /* 양쪽 맞춤은 좁은 폭에서 낱말 사이가 벌어진다 → 왼쪽 맞춤 */
  .p-text, .vw-pass-in .p-text { text-align: left; text-indent: 0 }
  /* 시험지 머리 표: 칸이 좁아 글자가 세로로 쪼개지던 것을 줄글로 */
  .ph-table, .ph-table tbody { display: block }
  .ph-table tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 2px 0 }
  .ph-table th, .ph-table td { display: inline; border: 0; padding: 0; background: none; width: auto; font-size: 13.5px; white-space: nowrap }
  .ph-table th { color: var(--mut); font-weight: 500; margin-right: -8px }
  .ph-table th::after { content: ' ' }
  .ph-subject { font-size: 13.5px }
  .ph-title { font-size: 19px; margin-bottom: 10px }
  .paper-head { margin-bottom: 16px; padding-bottom: 12px }
  /* 채점 표시가 왼쪽 가장자리 밖으로 나가지 않게 */
  .vq-head { padding-left: 8px }
  .q-line { padding-left: 6px }
  /* 문항 띠: 필터와 번호 목록의 경계를 분명히 */
  .qn-head { border-right: 1px solid var(--line-2); padding-right: 10px; margin-right: 0 }
  .qn-list { padding-left: 10px }
  .memo small { display: block; margin: 2px 0 0 }
  .sum-card { padding: 18px 16px }
  .weak-row { grid-template-columns: minmax(0, 1fr) 80px auto }
}
@media (hover: none) { .pref.keys { display: none } }
@media (max-width: 860px) { .ph-table tr { gap: 4px 10px } .ph-table th, .ph-table td, .ph-subject { font-size: 12.5px } }

/* ════════ 풀기 화면은 고정, 시험지(변환본·원본)와 채점 결과는 팝업 ════════ */
.paper-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden }
.paper-page .bar { flex: none; position: relative }
.paper-page #app { flex: 1; min-height: 0 }
.paper-page:not([data-view]) #vw { visibility: hidden }
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(20, 18, 14, .5); display: grid; place-items: center; padding: 3vh 3vw }
.modal[hidden] { display: none }
.modal-box { width: min(1200px, 100%); height: 100%; background: var(--bg); border-radius: 18px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5) }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--line) }
.modal-body { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.modal-body [hidden] { display: none }
.modal .chips-nav { position: sticky; top: 0; z-index: 3; max-width: none; margin: 0; padding: 8px 20px; background: var(--bg); border-bottom: 1px solid var(--line) }
.modal .paper { padding-top: 18px }
.modal .hero.wrap.wide { padding-top: 26px }
.modal .end { margin: 18px 0 40px }
/* 원본 시험지: 쪽 이미지를 세로로 이어 보여 준다. 누르면 확대 */
.orig { max-width: 980px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 18px }
.orig figure { margin: 0; overflow: auto; background: #fff; border: 1px solid var(--line-2); border-radius: 4px; box-shadow: var(--shadow); cursor: zoom-in }
.orig img { display: block; width: 100%; height: auto }
.orig figure.is-zoom { cursor: zoom-out }
.orig figure.is-zoom img { width: 200% }
.orig figcaption { position: sticky; left: 0; text-align: center; font: 400 12px/1 var(--serif); color: #666; padding: 8px 0; background: #fff }
:root[data-eff='dark'] .orig img { filter: none }
@media (max-width: 860px) {
  .modal { padding: 0 }
  .modal-box { width: 100%; height: 100dvh; border-radius: 0 }
  .modal-head { padding: 8px 10px }
  .modal-head .seg button { padding: 9px 11px }
  .orig { padding: 10px 0 30px; gap: 10px }
  .orig figure { border-left: 0; border-right: 0; border-radius: 0 }
}
.seg button[hidden], .pill-btn[hidden], .btn-ghost[hidden] { display: none }