/* 예비조사.html 의 스타일 — 2026-09-02 html 에서 분리(175KB 매 방문 → html 25KB + 캐시). */
    /* ─────────────────────────────────────────────────────────────────────────
   학습계획 예비조사 · moat/choice
   어드벤처식 단계 인터뷰(질문 5개, 한 화면 하나) → 예상점수 리포트(A4 3장).
   문서 스킨은 보고서 계열이되 어조는 시뮬레이션(2026-08-29 톤 하향). 엔진 = 부트스트랩 몬테카를로
   + 풀이 순서 전략(문제 순서대로/세목 우선) + 시간·문항 예산 + 찍기 번호의
   실측 정답 분포(cta 600문항). 답변은 localStorage에 자동 저장된다.
   방법론 정본: 같은 폴더 「예상점수 시뮬레이션.md」. 하드코딩된 결과값 없음.
   ───────────────────────────────────────────────────────────────────────── */
    :root {
      color-scheme: light;
      --office: #e6e4dd;
      --cabinet: #dcd9d0;
      --cabinet-edge: #b8b4a6;
      --paper: #fdfcf7;
      --manila: #f0e6cb;
      --manila-mid: #dfe9f2;
      --manila-hi: #d5e0ee;
      --ink: #1f2328;
      --ink-mid: #4c5158;
      --ink-soft: #7d8288;
      --rule: #2a2f35;
      --seal: #c23b2a;
      --navy: #1f4e79;
      --jade: #217a57;
      --amber: #a8690f;
      --tick: #2456a6;
      --shadow: 0 2px 6px rgba(31, 35, 40, .10), 0 14px 34px rgba(31, 35, 40, .12);
      --sans: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
      --serif: 'AppleMyungjo', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
      --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
      --g-소득세법: #c2703d;
      --g-법인세법: #5b6fa8;
      --g-부가가치세법: #3f8f6b;
      --g-국세기본법: #a8944a;
      --g-국세징수법: #9a5f74;
      --g-국제조세조정법: #4f8ba8;
      --g-조세범처벌법: #a84f4f;
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0
    }

    body {
      background: radial-gradient(1000px 400px at 90% -5%, rgba(31, 78, 121, .05), transparent 60%);
      color: var(--ink);
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
      word-break: keep-all;
      letter-spacing: -.01em;
    }

    /* 단독으로 열어도 대문과 같은 도서관 그림 — 고정 레이어로 깐다.
   background-attachment:fixed 는 모바일에서 깨진다 (실측). 대문 경유 땐 대문이 숨긴다 */
    html::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      background: var(--office) url('/그림/공용/도서관/낮_가로.webp?v=3') center/cover no-repeat
    }

    @media (orientation: portrait) {
      html::before {
        background-image: url('/그림/공용/도서관/낮_세로.webp?v=3')
      }
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .5;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
    }

    /* ══ 마법사 ══ */
    .wiz {
      position: relative;
      z-index: 1;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      max-width: 860px;
      margin: 0 auto;
      padding: 22px 24px 30px
    }

    .wtop {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px
    }

    .wtop .brand {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 16.5px
    }

    .wtop .brand em {
      font-style: normal;
      color: var(--ink-soft);
      font-weight: 400;
      font-size: 11.5px;
      margin-left: 6px
    }

    .dots {
      margin-left: auto;
      display: flex;
      gap: 6px;
      align-items: center
    }

    .dots i {
      width: 8px;
      height: 8px;
      border-radius: 99px;
      background: var(--cabinet-edge);
      transition: .2s
    }

    .dots i.on {
      background: var(--navy);
      transform: scale(1.25)
    }

    .dots i.done {
      background: var(--jade)
    }

    .stepwrap {
      flex: 1;
      display: flex;
      align-items: flex-start;
      padding-top: 2vh
    }

    .step {
      display: none;
      width: 100%
    }

    .step.on {
      display: block;
      animation: rise .38s cubic-bezier(.2, .8, .3, 1)
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .qcard {
      background: rgba(253, 252, 247, 0.40);
      backdrop-filter: blur(14px) saturate(130%);
      -webkit-backdrop-filter: blur(14px) saturate(130%);
      border: 1px solid rgba(201, 196, 180, 0.7);
      box-shadow: 0 4px 20px rgba(31, 35, 40, .08), 0 16px 40px rgba(31, 35, 40, .10), inset 0 1px 0 rgba(255, 255, 255, .8);
      border-radius: 8px;
      padding: 34px 38px 30px;
      position: relative;
    }

    .qcard::before {
      content: '';
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(31, 78, 121, .14);
      border-radius: 5px;
      pointer-events: none;
    }

    .eyebrow {
      font: 11.5px var(--mono);
      letter-spacing: .3em;
      color: var(--ink-soft);
      margin-bottom: 10px
    }

    .qcard h2 {
      margin: 0 0 7px;
      font-family: var(--serif);
      font-size: 25.5px;
      line-height: 1.42;
      letter-spacing: -.01em
    }

    .qcard .hint {
      margin: 0 0 20px;
      font-size: 14px;
      color: var(--ink-mid)
    }

    .bigval {
      font-family: var(--serif);
      font-size: 62px;
      font-weight: 700;
      text-align: center;
      margin: 8px 0 2px;
      font-variant-numeric: tabular-nums;
      color: var(--navy)
    }

    .bigval small {
      font-size: 20px;
      color: var(--ink-mid);
      font-weight: 400;
      margin-left: 4px
    }

    .valnote {
      text-align: center;
      font-size: 12.5px;
      color: var(--ink-soft);
      min-height: 17px;
      margin-bottom: 10px
    }

    .opts {
      display: grid;
      gap: 12px;
      margin: 14px 0 4px
    }

    .opts.two {
      grid-template-columns: 1fr 1fr
    }

    @media (max-width:700px) {
      .opts.two {
        grid-template-columns: 1fr
      }
    }

    .opt {
      text-align: left;
      padding: 16px 18px;
      border: 1.5px solid rgba(184, 180, 166, 0.7);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      cursor: pointer;
      font: inherit;
      transition: .15s;
    }

    .opt:hover {
      border-color: var(--navy);
      background: rgba(255, 255, 255, 0.92);
    }

    .opt.sel {
      border-color: var(--navy);
      background: rgba(31, 78, 121, .08);
      box-shadow: 0 0 0 1px var(--navy)
    }

    .opt b {
      display: block;
      font-size: 16px;
      margin-bottom: 4px
    }

    .opt span {
      font-size: 13px;
      color: var(--ink-mid)
    }

    /* OMR 답안카드 */
    .omr {
      margin: 16px 0 4px;
      border: 1.5px solid rgba(207, 157, 148, 0.85);
      border-radius: 8px;
      background: rgba(251, 243, 241, 0.8);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      padding: 14px 20px 12px
    }

    .omr .ot {
      display: flex;
      justify-content: space-between;
      font: 10.5px var(--mono);
      color: #b0685c;
      letter-spacing: .28em;
      border-bottom: 1px solid #e6c8c1;
      padding-bottom: 8px;
      margin-bottom: 12px
    }

    .omr .orow {
      display: flex;
      align-items: center;
      gap: 18px
    }

    .omr .oq {
      font: 700 12.5px var(--sans);
      color: #8d5348;
      line-height: 1.35;
      white-space: nowrap
    }

    .omr .oq em {
      font: 400 10px var(--sans);
      font-style: normal;
      color: #b0685c
    }

    .omr .obubs {
      display: flex;
      gap: 14px;
      flex: 1;
      justify-content: space-evenly
    }

    .bub {
      width: 58px;
      height: 32px;
      border-radius: 50%;
      border: 1.7px solid #555;
      background: #fff;
      font: 600 15px var(--sans);
      color: #555;
      cursor: pointer;
      transition: .13s;
      position: relative;
    }

    .bub:hover {
      border-color: #1f2328;
      color: #1f2328;
      transform: scale(1.06)
    }

    .bub.sel {
      background: #26292d;
      color: #fbf3f1;
      border-color: #26292d;
      box-shadow: inset 0 0 0 2px #26292d, 0 1px 4px rgba(31, 35, 40, .35)
    }

    .omr .onote {
      margin-top: 11px;
      font-size: 11px;
      color: #b0685c
    }

    .nav {
      display: flex;
      gap: 10px;
      margin-top: 22px
    }

    .btn {
      padding: 11px 22px;
      border-radius: 8px;
      border: 1.5px solid var(--cabinet-edge);
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      color: var(--ink-mid);
      font: 600 14.5px var(--sans);
      cursor: pointer;
      transition: .15s;
    }

    .btn:hover {
      border-color: var(--navy);
      color: var(--navy);
      background: #fff;
    }

    .btn.primary {
      margin-left: auto;
      background: var(--navy);
      border-color: var(--navy);
      color: #fff
    }

    .btn.primary:hover {
      background: var(--rule)
    }

    .btn.ghost {
      border-color: transparent;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    input[type=range].big {
      width: 100%;
      height: 30px
    }

    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      height: 24px;
      background: transparent;
      cursor: grab;
      width: 100%
    }

    input[type=range]:active {
      cursor: grabbing
    }

    input[type=range]::-webkit-slider-runnable-track {
      height: 6px;
      border-radius: 99px;
      background: linear-gradient(to right, var(--navy) var(--f, 50%), rgba(31, 35, 40, .15) var(--f, 50%));
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      margin-top: -8px;
      background: radial-gradient(circle at 38% 32%, #fff, #dcd7c8 70%);
      border: 1px solid rgba(31, 35, 40, .45);
      box-shadow: 0 2px 5px rgba(31, 35, 40, .3);
    }

    input[type=range]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #dcd7c8;
      border: 1px solid #555
    }

    /* 단계 4: 튜토리얼 (스포트라이트 + 코치 말풍선) */
    .tut-focus {
      position: relative !important;
      z-index: 1001;
      box-shadow: 0 0 0 4px var(--navy), 0 0 0 9999px rgba(20, 25, 30, .58) !important;
      border-radius: 10px
    }

    /* 어둠은 서서히 깔리고 걷힌다 — 튜토리얼이 뚝 끊겨 보이지 않게.
       (box-shadow 는 none↔값 사이도 보간된다. 대상은 TUT 의 셀렉터들뿐) */
    .tdials,
    .chipbox,
    .drawer .gname {
      transition: box-shadow .5s ease
    }

    .tutbubble {
      position: fixed;
      z-index: 1002;
      width: min(92vw, 380px);
      background: var(--paper);
      border: 1.5px solid var(--navy);
      border-radius: 12px;
      box-shadow: 0 14px 40px rgba(20, 25, 30, .4);
      padding: 16px 18px 14px;
      /* 자리를 잡은 뒤 .show 로 떠오르고, .leave 로 날아가며 사라진다 */
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .3, 1);
    }

    .tutbubble.show {
      opacity: 1;
      transform: none
    }

    .tutbubble.leave {
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none
    }

    body.rm .tutbubble,
    body.rm .tdials,
    body.rm .chipbox,
    body.rm .drawer .gname {
      transition: none
    }

    /* ── 발행 대기 연출: 몬테카를로 비 (시안 1·나 — 점수축 스펙트럼) ──
       「예상점수 보기」 뒤 시뮬레이션·총평 LLM 이 도는 동안 화면을 채운다.
       표본 계수는 장식이 아니라 실제 계산 회차다(6개 전략 누적). */
    #calcOv {
      position: fixed;
      inset: 0;
      z-index: 1200;
      /* 회색 판이 아니라 유리 베일(효과사전 A4) — 대문 문설주(#gate 열림: 종이 50%·blur 3px)와
         같은 처방이라, 대문 안에서 옆에 붙어도 다른 두 판으로 보이지 않는다 */
      background: rgba(253, 252, 247, .55);   /* color-mix 미지원(구형 iOS) 폴백 */
      background: color-mix(in srgb, var(--paper) 50%, transparent);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      transition: opacity .4s ease;
    }

    #calcOv.fade {
      opacity: 0;
      pointer-events: none
    }

    #calcOv .stage {
      position: relative;
      width: min(92vw, 560px);
      height: min(44vh, 300px);
      background: rgba(253, 252, 247, .74);   /* 반투명 종이 — 유리 베일 위 서류 한 장 */
      border: 1px solid rgba(216, 188, 133, .55);   /* 모래빛 — 대문 표찰과 같은 괘선 */
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(96, 74, 34, .08), 0 18px 44px rgba(96, 74, 34, .16);
    }

    #calcOv .stage::after {
      /* 겹괘선 액자(효과사전 A2) — 캔버스 위에 얹히는 안쪽 가는 줄 */
      content: '';
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(216, 188, 133, .30);
      border-radius: 4px;
      pointer-events: none;
    }

    #calcOv .stage canvas {
      width: 100%;
      height: 100%;
      display: block
    }

    #calcOv .line {
      font: 13.5px var(--mono);
      letter-spacing: .16em;
      color: var(--ink-mid);
      white-space: nowrap;   /* flex 세로축에서 min-content 로 쭈그러들며 세 줄로 꺾인다 (실측) */
      /* 베일 위 밝은 그림이 비쳐도 읽히게 — 종이빛 후광(A1) */
      text-shadow: 0 1px 10px rgba(253, 252, 247, .9), 0 0 3px rgba(253, 252, 247, .7)
    }

    #calcOv .line b {
      color: var(--navy);
      font-variant-numeric: tabular-nums
    }

    #calcOv .line .dots {
      /* 본문 진행점 .dots(display:flex; margin-left:auto)와 클래스 충돌 — 줄이 꺾인다 (실측) */
      display: inline;
      margin: 0
    }

    #calcOv .line .dots::after {
      content: '';
      animation: calcDots 1.4s steps(4) infinite
    }

    @keyframes calcDots {
      0% {
        content: ''
      }

      25% {
        content: '.'
      }

      50% {
        content: '..'
      }

      75% {
        content: '...'
      }
    }

    .tutbubble::before {
      content: '';
      position: absolute;
      top: -9px;
      left: 38px;
      width: 16px;
      height: 16px;
      background: var(--paper);
      border-left: 1.5px solid var(--navy);
      border-top: 1.5px solid var(--navy);
      transform: rotate(45deg)
    }

    .tutbubble.below::before {
      top: auto;
      bottom: -9px;
      border: 0;
      border-right: 1.5px solid var(--navy);
      border-bottom: 1.5px solid var(--navy)
    }

    .tutbubble .tt {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      color: var(--navy);
      margin-bottom: 6px
    }

    .tutbubble .tx {
      font-size: 13.5px;
      line-height: 1.6
    }

    .tutbubble .tx b {
      color: var(--navy)
    }

    .tutbubble .demo-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 0 2px
    }

    .tutbubble .demo-row .cap {
      font-size: 11px;
      color: var(--ink-mid)
    }

    .tutbubble .tnav {
      display: flex;
      align-items: center;
      margin-top: 12px
    }

    .tutbubble .tnav .skip {
      background: none;
      border: 0;
      color: var(--ink-soft);
      font-size: 11.5px;
      cursor: pointer
    }

    .tutbubble .tnav .go {
      margin-left: auto
    }

    /* 단계 4: 칩 분류 */
    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      margin: 2px 0 12px;
      font-size: 12.5px;
      color: var(--ink-mid)
    }

    .legend .sw {
      display: inline-block;
      width: 13px;
      height: 13px;
      border-radius: 4px;
      vertical-align: -2px;
      margin-right: 4px;
      border: 1px solid rgba(31, 35, 40, .3)
    }

    .tdials {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 14px
    }

    @media (max-width:700px) {
      .tdials {
        grid-template-columns: 1fr
      }
    }

    .tdial {
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: 1px solid rgba(184, 180, 166, 0.7);
      border-radius: 8px;
      padding: 9px 12px
    }

    .tdial .tl {
      display: flex;
      align-items: baseline;
      font-size: 12.5px;
      font-weight: 700;
      margin-bottom: 2px
    }

    .tdial .tl .v {
      margin-left: auto;
      font: 13px var(--mono);
      font-weight: 700;
      color: var(--navy)
    }

    .chipbox {
      border: 1px solid rgba(184, 180, 166, 0.7);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      padding: 4px 12px
    }

    .drawer {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 0;
      border-top: 1px solid rgba(184, 180, 166, .6)
    }

    .drawer:first-child {
      border-top: 0
    }

    .drawer .gname {
      flex: 0 0 112px;
      padding-top: 5px;
      font-size: 12.5px;
      font-weight: 700;
      display: flex;
      align-items: flex-start;
      gap: 6px
    }

    .drawer .gname i {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      flex: 0 0 auto;
      margin-top: 3px
    }

    .drawer .gname .gset {
      display: flex;
      gap: 3px;
      margin-top: 4px
    }

    .drawer .gname .gset button {
      padding: 1px 5px;
      font-size: 9px;
      border-radius: 5px;
      border: 1px solid var(--cabinet-edge);
      background: #fff;
      cursor: pointer;
      color: var(--ink-mid)
    }

    .drawer .gname .gset button:hover {
      border-color: var(--navy);
      color: var(--navy)
    }

    .drawer .schips {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }

    .chip {
      position: relative;
      user-select: none;
      background: #eceae4;
      color: #5c5a54;
      border-radius: 7px;
      padding: 5px 11px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.25;
      cursor: pointer;
      border: 1.5px solid #d4d0c4;
      font-family: var(--sans);
      display: inline-flex;
      flex-direction: column;
      gap: 1px;
      transition: .12s;
    }

    .chip .meta {
      font: 9.5px var(--mono);
      color: #8c887e
    }

    .chip.mid {
      background: #cbe7d2;
      color: #1b4f32;
      border-color: #8fc9a2
    }

    .chip.mid .meta {
      color: #2b6140
    }

    .chip.high {
      background: #207a4a;
      color: #ffffff;
      border-color: #145934
    }

    .chip.high .meta {
      color: #bce6cc
    }

    .chip:hover {
      transform: translateY(-1px)
    }

    .chip:focus-visible {
      outline: 2px solid var(--navy);
      outline-offset: 2px
    }

    .spin {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding: 60px 0
    }

    .spin .ring {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 4px solid var(--cabinet-edge);
      border-top-color: var(--navy);
      animation: whirl 1s linear infinite
    }

    @keyframes whirl {
      to {
        transform: rotate(360deg)
      }
    }

    .spin p {
      font-family: var(--serif);
      font-size: 15px;
      color: var(--ink-mid);
      margin: 0
    }

    /* 멘토 총평 (감사의견 본문): 도장 자리만 첫 줄들이 비켜 돌고 나머지는 전폭 */
    .stampgap {
      float: right;
      width: 116px;
      height: 88px
    }

    #mentorBody p {
      margin: 5px 0;
      font-size: 13.5px;
      line-height: 1.68
    }

    /* 채점 점수 도장: 감사의견 도장과 같은 물성 */
    .stamp.scorest {
      right: 64px;
      top: 74px;
      width: auto;
      min-width: 104px;
      height: 76px;
      padding: 0 14px;
      font-size: 27px;
      letter-spacing: .02em;
      flex-direction: row;
      align-items: center;
      gap: 2px;
      transform: rotate(-7deg);
      /* 오른쪽이 위로 */
    }

    .stamp.scorest small {
      font-size: 14px;
      font-weight: 700
    }

    /* 표본 답안지 채점표 */
    .gradewrap {
      display: flex;
      gap: 14px;
      margin: 8px 0
    }

    .gradewrap table {
      flex: 1;
      font-size: 11.8px;
      margin: 0
    }

    .gradewrap th,
    .gradewrap td {
      padding: 2.5px 6px
    }

    .gradewrap td.u {
      font-family: var(--sans);
      font-size: 11.3px
    }

    .gradewrap .gd {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 2px;
      margin-right: 4px;
      vertical-align: 0
    }

    .gradewrap tr.guess td {
      background: rgba(31, 35, 40, .035);
      color: var(--ink-mid);
      border-color: #6d7278;
      border-width: 1.5px
    }

    /* 못 푼 문항 꼬리표 — 답 칸에 「3찍」으로 붙이던 것을 상태 낱말로(2026-09-02 사용자 지정 「못품」) */
    .np {
      display: inline-block;
      margin-left: 5px;
      padding: 0 4px;
      border: 1px solid currentColor;
      border-radius: 3px;
      font-size: 9px;
      line-height: 1.5;
      letter-spacing: .04em;
      color: var(--ink-mid);
      vertical-align: 1px;
      white-space: nowrap
    }

    .gradenote {
      margin-top: 8px;
      font-size: 12px;
      color: var(--ink-mid)
    }

    .gradewrap td.ox {
      text-align: center;
      font-weight: 700;
      font-family: var(--sans)
    }

    .gradewrap td.ox.o {
      color: var(--tick)
    }

    .gradewrap td.ox.x {
      color: var(--seal)
    }

    /* ══ 보고서 (A4) ══ */
    #report {
      position: relative;
      z-index: 1;
      display: none;
      padding: 22px 16px 50px
    }

    #report.on {
      display: block
    }

    .rbar {
      max-width: 794px;
      margin: 0 auto 14px;
      display: flex;
      gap: 8px;
      justify-content: flex-end
    }

    .sheet {
      background: var(--paper);
      width: 100%;
      max-width: 794px;
      min-height: 1085px;
      margin: 0 auto 26px;
      padding: 58px 66px 70px;
      border: 1px solid #c9c4b4;
      box-shadow: var(--shadow);
      font-family: var(--serif);
      font-size: 13.5px;
      line-height: 1.68;
      position: relative;
    }

    .sheet .pageno {
      position: absolute;
      bottom: 26px;
      left: 0;
      right: 0;
      text-align: center;
      font: 11px var(--mono);
      color: var(--ink-soft)
    }

    .sheet .docno {
      font: 11.5px var(--mono);
      color: var(--ink-soft);
      display: flex;
      justify-content: space-between
    }

    .sheet h1 {
      margin: 12px 0 0;
      text-align: center;
      font-size: 26px;
      letter-spacing: .44em;
      text-indent: .44em;
      font-weight: 700
    }

    .sheet .under {
      border-bottom: 2.5px solid var(--rule);
      position: relative;
      margin: 10px 0 0
    }

    .sheet .under::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -4.5px;
      border-bottom: 1px solid var(--rule)
    }

    .sheet h3 {
      margin: 20px 0 6px;
      font-size: 15px;
      letter-spacing: .05em;
      font-weight: 700;
      color: var(--vera-data-paper, #b45309);   /* 데이터색(종이) — 토큰.css */
      /* 소제목은 주황 볼드 — 종합 판정과 같은 결 (2026-08-30) */
      display: flex;
      align-items: baseline;
      gap: 8px
    }

    .sheet h3 .en {
      font: 9px var(--mono);
      color: var(--ink-soft);
      letter-spacing: 0;
      font-weight: 400
    }

    .sheet p {
      margin: 4px 0
    }

    .sheet .num {
      font-family: var(--mono);
      font-size: 12.5px;
      font-weight: 700
    }

    .sheet table {
      width: 100%;
      border-collapse: collapse;
      margin: 6px 0;
      font-size: 12px
    }

    .sheet th,
    .sheet td {
      border: 1px solid #cfc9b8;
      padding: 4px 8px;
      text-align: left;
      vertical-align: top
    }

    .sheet th {
      background: rgba(31, 78, 121, .05);
      font-weight: 700
    }

    .sheet td.r {
      text-align: right;
      font-family: var(--mono);
      white-space: nowrap
    }

    .sheet td.c {
      text-align: center;
      font-family: var(--mono)
    }

    .sheet tr.hl td {
      background: rgba(33, 122, 87, .07);
      font-weight: 700
    }

    .sheet tr.bad td {
      background: rgba(194, 59, 42, .06)
    }

    .sheet table.overview th,
    .sheet table.overview td {
      text-align: left;
      font-family: var(--serif);
      white-space: normal
    }

    .sheet table.overview .num {
      font-family: var(--serif);
      font-size: inherit
    }

    .opwrap {
      position: relative
    }

    .stamp {
      position: absolute;
      right: 0;
      top: -4px;
      width: 80px;
      height: 80px;
      border: 3.5px solid var(--seal);
      color: var(--seal);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-weight: 700;
      font-size: 23px;
      letter-spacing: .08em;
      line-height: 1.15;
      text-align: center;
      transform: rotate(6deg);
      background: rgba(194, 59, 42, .04);
      mix-blend-mode: multiply;
      white-space: pre-line;
    }

    .bigscore {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin: 8px 0 0
    }

    .bigscore b {
      font-size: 33px;
      line-height: 1;
      letter-spacing: -.02em;
      font-variant-numeric: tabular-nums
    }

    .bigscore .pm {
      font: 12px var(--mono);
      color: var(--ink-mid)
    }

    .gcbox {
      margin: 8px 0;
      padding: 9px 12px;
      border: 1.5px solid var(--seal);
      border-radius: 4px;
      background: rgba(194, 59, 42, .035);
      font-size: 12px
    }

    .gcbox b {
      color: var(--seal)
    }

    .meters {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 8px 0
    }

    .meter {
      border: 1px solid #cfc9b8;
      border-radius: 6px;
      padding: 7px 10px
    }

    .meter .k {
      font-size: 11px;
      color: var(--ink-soft);
      font-family: var(--sans)
    }

    .meter .v {
      font: 17px var(--mono);
      font-weight: 700;
      margin: 1px 0 4px
    }

    .meter .v.jade {
      color: var(--jade)
    }

    .meter .v.ver {
      color: var(--seal)
    }

    .meter .bar {
      height: 6px;
      border-radius: 99px;
      background: rgba(42, 38, 32, .1);
      overflow: hidden
    }

    .meter .bar i {
      display: block;
      height: 100%;
      border-radius: 99px
    }

    .meter.pass .bar i {
      background: var(--jade)
    }

    .meter.fail .bar i {
      background: var(--seal)
    }

    .sheet canvas {
      display: block;
      width: 100%;
      height: auto;
      margin: 8px 0 2px
    }

    .pctrow {
      display: flex;
      gap: 6px;
      margin-top: 4px
    }

    .pctrow .p {
      flex: 1;
      text-align: center;
      border: 1px solid #cfc9b8;
      border-radius: 4px;
      padding: 6px 2px
    }

    .pctrow .p .k {
      font-size: 10.5px;
      color: var(--ink-soft);
      font-family: var(--sans)
    }

    .pctrow .p .v {
      font: 13.5px var(--mono);
      font-weight: 700
    }

    .reco {
      margin: 6px 0 0;
      padding-left: 0;
      list-style: none;
      counter-reset: rc
    }

    .reco li {
      counter-increment: rc;
      margin: 7px 0;
      padding-left: 26px;
      position: relative
    }

    .reco li::before {
      content: counter(rc);
      position: absolute;
      left: 0;
      top: 1px;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: var(--navy);
      color: #fff;
      font: 700 10px var(--sans);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .signrow {
      display: flex;
      align-items: flex-end;
      margin-top: 26px
    }

    .signrow .who {
      margin-left: auto;
      text-align: right;
      font-size: 12.5px
    }

    .signrow .who .role {
      font-size: 10px;
      color: var(--ink-soft)
    }

    .gate {
      font: 11px var(--mono);
      color: var(--ink-soft);
      line-height: 1.6;
      margin-top: 14px;
      border-top: 1px solid #d8d2c0;
      padding-top: 9px
    }

    .gate .ok {
      color: var(--jade)
    }

    .gate .bad {
      color: var(--seal);
      font-weight: 700
    }

    .smallnote {
      font-size: 11.5px;
      color: var(--ink-soft);
      font-family: var(--sans);
      margin-top: 6px
    }

    /* ══ 발행 연출 · 마이크로 인터랙션 ══ */
    .rm * {
      animation: none !important;
      transition: none !important
    }

    .qcard.shake {
      animation: qshake .38s
    }

    @keyframes qshake {

      20%,
      60% {
        transform: translateX(-7px)
      }

      40%,
      80% {
        transform: translateX(7px)
      }
    }

    .errline {
      min-height: 17px;
      margin-top: 10px;
      font-size: 12.5px;
      color: var(--seal);
      font-weight: 600
    }

    .bigval span.tick {
      display: inline-block;
      animation: tickp .16s
    }

    @keyframes tickp {
      50% {
        transform: scale(1.07)
      }
    }

    .coverbar {
      display: flex;
      height: 13px;
      border-radius: 99px;
      overflow: hidden;
      margin: 0 0 5px;
      border: 1px solid var(--cabinet-edge);
      background: repeating-linear-gradient(-45deg, rgba(31, 35, 40, .06) 0 6px, transparent 6px 12px)
    }

    .coverbar .ch {
      background: #207a4a
    }

    .coverbar .cm {
      background: #8fc9a2
    }

    .coverlab {
      font-size: 11.5px;
      color: var(--ink-mid);
      margin-bottom: 10px;
      min-height: 15px
    }

    .coverlab b {
      color: var(--navy)
    }

    .chip.pop {
      animation: chippop .22s
    }

    @keyframes chippop {
      45% {
        transform: scale(1.13)
      }
    }

    /* 별지 — 후속조치 계획 (기출 강의 처방) */
    .rx-unit {
      margin: 12px 0 18px
    }

    .rx-uh {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
      font-weight: 700;
      font-size: 13.5px;
      margin-bottom: 6px
    }

    .rx-uh .m {
      font: 11px var(--mono);
      color: var(--ink-soft);
      font-weight: 400
    }

    .rx-items {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .rx-item {
      display: flex;
      align-items: baseline;
      gap: 10px;
      width: 100%;
      text-align: left;
      font: inherit;
      background: #fff;
      border: 1px solid #d8d2c0;
      border-radius: 6px;
      padding: 7px 12px;
      cursor: pointer;
      transition: .13s
    }

    .rx-item:hover {
      border-color: var(--navy);
      transform: translateY(-1px)
    }

    .rx-item .rx-y {
      font: 700 11px var(--mono);
      color: var(--navy);
      white-space: nowrap
    }

    .rx-item .rx-t {
      font-size: 12.5px;
      font-family: var(--serif)
    }

    .rx-item .rx-tag {
      margin-left: auto;
      font: 10.5px var(--mono);
      color: var(--jade);
      white-space: nowrap
    }

    .rx-item.lock {
      opacity: .6;
      cursor: default
    }

    .rx-item.lock:hover {
      transform: none;
      border-color: #d8d2c0
    }

    .rx-item.lock .rx-tag {
      color: var(--ink-soft)
    }

    .rx-note {
      min-height: 15px;
      font-size: 11.5px;
      color: var(--amber);
      margin-top: 4px;
      font-family: var(--sans)
    }

    tr.glink {
      cursor: pointer
    }

    tr.glink:hover td {
      background: rgba(31, 78, 121, .07) !important
    }

    .rx-set {
      display: flex;
      align-items: baseline;
      gap: 8px;
      width: 100%;
      text-align: left;
      font: inherit;
      background: rgba(33, 122, 87, .06);
      border: 1.5px solid var(--jade);
      border-radius: 6px;
      padding: 9px 12px;
      cursor: pointer;
      margin-bottom: 6px;
      transition: .13s;
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 700;
      color: var(--jade)
    }

    .rx-set:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(33, 122, 87, .18)
    }

    .rx-set .m {
      margin-left: auto;
      font: 10.5px var(--mono);
      font-weight: 400;
      color: var(--ink-soft)
    }

    /* ── 보강 계획서(2026-08-30): 단원당 1:1 검증 세트 박스 — 「가) 정갈한 서류」 확정안.
       레터프레스 결: 금박 코너 괘선·세목 오너먼트·한자 번호 타임라인.
       금박(--gold)은 여기서만 쓴다 — 절제가 격이다. ── */
    .rx-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
      margin: 12px 0 6px
    }

    .rx-box {
      --gold: #b08d3e;
      --gold-hi: #d6b877;
      aspect-ratio: 1 / 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      font: inherit;
      padding: 18px 12px;
      margin: 0;
      border: 1.5px solid var(--jade);
      border-radius: 10px;
      background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .9), rgba(253, 252, 247, 0) 60%),
        linear-gradient(180deg, #fffefb, #faf7ee);
      box-shadow: 0 1px 2px rgba(31, 35, 40, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
      cursor: pointer;
      transition: .18s;
    }

    .rx-box:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(33, 122, 87, .18)
    }

    /* ── 다 밟은 세트 (2026-09-01) — 「읽은 서류」의 결.
       지면을 한 톤 눌러 회색 기미를 주고, 금박 괘선과 글자를 함께 물린다.
       지우지 않고 **물리는** 것이 요점이다 — 다시 눌러 복습할 수 있어야 하므로
       커서와 호버는 남기되 들어올림만 얕게 한다. ── */
    .rx-box.done {
      border-color: #cbcfc9;
      background: linear-gradient(180deg, #f7f6f1, #efeee7);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6)
    }

    .rx-box.done .bx-frame {
      --gold: #c6c1b0;
      opacity: .8
    }

    .rx-box.done .bx-g,
    .rx-box.done .bx-u,
    .rx-box.done .bx-flow,
    .rx-box.done .bx-m {
      opacity: .62;
      filter: saturate(.35)
    }

    .rx-box.done:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(31, 35, 40, .1)
    }

    .rx-box.done:hover .bx-g,
    .rx-box.done:hover .bx-u,
    .rx-box.done:hover .bx-flow,
    .rx-box.done:hover .bx-m {
      opacity: .82
    }

    /* 완료 인장 — 「먼저」가 서던 자리(위 가운데)를 그대로 받는다. 두 배지를 같이 띄우지 않는다 */
    .rx-box .bx-done {
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      font: 700 9.5px var(--serif);
      letter-spacing: .28em;
      text-indent: .28em;
      color: #2f6a4f;
      background: linear-gradient(180deg, #eef5f0, #dfeae3);
      border: 1px solid rgba(33, 122, 87, .38);
      border-radius: 99px;
      padding: 2.5px 12px;
      white-space: nowrap
    }

    /* 금박 코너 괘선 — 여덟 획으로 네 모서리만. 호버하면 또렷해지며 살짝 벌어진다 */
    .rx-box .bx-frame {
      position: absolute;
      inset: 8px;
      pointer-events: none;
      border-radius: 5px;
      background:
        linear-gradient(var(--gold), var(--gold)) left 0 top 0/14px 1px,
        linear-gradient(var(--gold), var(--gold)) left 0 top 0/1px 14px,
        linear-gradient(var(--gold), var(--gold)) right 0 top 0/14px 1px,
        linear-gradient(var(--gold), var(--gold)) right 0 top 0/1px 14px,
        linear-gradient(var(--gold), var(--gold)) left 0 bottom 0/14px 1px,
        linear-gradient(var(--gold), var(--gold)) left 0 bottom 0/1px 14px,
        linear-gradient(var(--gold), var(--gold)) right 0 bottom 0/14px 1px,
        linear-gradient(var(--gold), var(--gold)) right 0 bottom 0/1px 14px;
      background-repeat: no-repeat;
      opacity: .7;
      transition: .18s;
    }

    .rx-box:hover .bx-frame {
      opacity: 1;
      inset: 6px
    }

    /* 세목명 — 양옆에 금빛으로 사라지는 가는 괘선 오너먼트 */
    .rx-box .bx-g {
      display: flex;
      align-items: center;
      gap: 8px;
      font: 600 9.5px var(--sans);
      letter-spacing: .3em;
      text-indent: .3em;
      color: var(--ink-soft);
      white-space: nowrap;
    }

    .rx-box .bx-g::before,
    .rx-box .bx-g::after {
      content: '';
      width: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-hi));
    }

    .rx-box .bx-g::after {
      background: linear-gradient(90deg, var(--gold-hi), transparent)
    }

    .rx-box .bx-u {
      font-family: var(--serif);
      font-size: 16.5px;
      font-weight: 700;
      letter-spacing: .02em;
      color: var(--ink);
      line-height: 1.28;
      margin: 6px 0 1px;
    }

    /* 절차 — 한자 번호 각인을 가는 금선이 세로로 꿰는 타임라인 */
    .rx-box .bx-flow {
      list-style: none;
      position: relative;
      margin: 10px 0 11px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-start;
    }

    .rx-box .bx-flow::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 9px;
      bottom: 9px;
      width: 1px;
      background: linear-gradient(180deg, var(--gold-hi), rgba(176, 141, 62, .25));
    }

    .rx-box .bx-flow li {
      display: flex;
      align-items: center;
      gap: 9px;
      font: 600 11px var(--sans);
      letter-spacing: .02em;
      color: var(--ink-mid);
    }

    .rx-box .bx-flow li i {
      font-style: normal;
      flex: 0 0 17px;
      height: 17px;
      border-radius: 50%;
      position: relative;
      z-index: 1;
      border: 1px solid var(--gold);
      background: var(--paper);
      color: var(--gold);
      font: 700 9px var(--serif);
      display: grid;
      place-items: center;
    }

    .rx-box .bx-flow li.last i {
      background: var(--jade);
      border-color: var(--jade);
      color: #fff
    }

    .rx-box.calc {
      border-color: var(--navy)
    }

    .rx-box.calc .bx-flow li.last i {
      background: var(--navy);
      border-color: var(--navy)
    }

    /* 바닥 각주 — 연 문항수 (무료 표지는 2026-08-31 제거) */
    .rx-box .bx-m {
      display: flex;
      align-items: center;
      gap: 8px;
      font: 10px var(--mono);
      color: var(--ink-soft);
    }

    /* 우선순위 견장 — 첫 박스 상단 중앙에 걸친다 */
    .rx-box .bx-first {
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translateX(-50%);
      font: 700 9.5px var(--serif);
      letter-spacing: .28em;
      text-indent: .28em;
      color: #7c2013;
      background: linear-gradient(180deg, #f6e8e5, #f0d9d4);
      border: 1px solid rgba(194, 59, 42, .45);
      border-radius: 99px;
      padding: 2.5px 12px;
      box-shadow: 0 2px 5px rgba(31, 35, 40, .12);
    }

    .rx-box.lock {
      opacity: .55;
      cursor: default
    }

    .rx-box.lock:hover {
      transform: none;
      box-shadow: none
    }

    .vera-note {
      display: block;
      font: 11px var(--mono);
      color: var(--amber);
      margin-top: 7px;
      min-height: 14px
    }

    /* 총평 문장 끝에 붙는 작은 링크 — 버튼이 아니라 글의 연장처럼 */
    .vera-link {
      display: inline;
      font: 600 12px var(--sans);
      color: var(--jade);
      background: none;
      border: none;
      padding: 0;
      margin-left: 6px;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-style: dotted;
      white-space: nowrap;
    }

    .vera-link:hover {
      color: #155c40;
      text-decoration-style: solid
    }

    /* OX 카드 (검증 세트 예비 절차) */
    #lvOx {
      flex: 1;
      overflow: auto;
      padding: 28px 34px;
      display: none
    }

    .oxp {
      font: 11.5px var(--mono);
      letter-spacing: .25em;
      color: var(--ink-soft);
      margin-bottom: 14px
    }

    .oxs {
      font-family: var(--serif);
      font-size: 17.5px;
      line-height: 1.75;
      min-height: 90px
    }

    .oxbtns {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin: 26px 0 10px
    }

    /* O/X 는 인장 — 이중 테두리 직인, 호버에 인주빛. 판정 뒤엔 .small 로 축소 */
    .oxbtn {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      border: 2px solid #b8ab8a;
      background: #fff;
      font: 800 27px var(--serif);
      color: var(--ink-mid);
      cursor: pointer;
      position: relative;
      transition: .14s
    }

    .oxbtn::after {
      content: '';
      position: absolute;
      inset: 4px;
      border: 1px solid rgba(184, 171, 138, .55);
      border-radius: 50%
    }

    .oxbtn:hover:not(:disabled) {
      border-color: var(--seal);
      color: var(--seal);
      box-shadow: 0 3px 12px rgba(194, 59, 42, .18)
    }

    .oxbtn:disabled {
      cursor: default;
      opacity: .42
    }

    .oxbtn.small {
      width: 46px;
      height: 46px;
      font-size: 17px
    }

    .oxbtn.pick {
      opacity: 1;
      border-color: var(--navy);
      color: var(--navy)
    }

    .oxhint {
      text-align: center;
      font: 11px var(--mono);
      color: #a09a8c
    }

    /* 문항은 겹괘선 카드 위에 (A2) */
    .q-no {
      font-family: var(--serif);
      font-weight: 800;
      font-size: 13px;
      color: var(--gold);
      letter-spacing: .3em
    }

    .q-card {
      position: relative;
      border: 1px solid #dcd2b8;
      border-radius: 6px;
      background: #fff;
      padding: 18px 20px;
      margin-top: 10px
    }

    .q-card::after {
      content: '';
      position: absolute;
      inset: 5px;
      border: 1px solid rgba(176, 141, 62, .22);
      border-radius: 3px;
      pointer-events: none
    }

    /* 판정 = 낙관 쿵(D5). 판정 자리는 예약(min-height) — 레이아웃 점프 방지 */
    #oxR,
    #cxR,
    #csR {
      min-height: 210px
    }

    .verdict {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 14px 0 0
    }

    .vseal {
      flex: 0 0 auto;
      width: 54px;
      height: 54px;
      border: 2.5px solid;
      border-radius: 8px;
      display: grid;
      place-items: center;
      font-family: var(--serif);
      font-weight: 800;
      font-size: 22px;
      transform: rotate(-5deg)
    }

    .vseal.bad {
      color: var(--seal);
      border-color: rgba(194, 59, 42, .75);
      background: rgba(194, 59, 42, .05)
    }

    .vseal.good {
      color: var(--jade);
      border-color: rgba(33, 122, 87, .7);
      background: rgba(33, 122, 87, .05)
    }

    .vseal.pop {
      animation: vpop .5s cubic-bezier(.3, 1.35, .45, 1) both
    }

    @keyframes vpop {
      from {
        opacity: 0;
        transform: rotate(-5deg) scale(2)
      }

      to {
        opacity: 1;
        transform: rotate(-5deg) scale(1)
      }
    }

    body.rm .vseal.pop {
      animation: none
    }

    .vline {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 15px
    }

    .vline.bad {
      color: var(--seal)
    }

    .vline.good {
      color: var(--jade)
    }

    .vrec {
      font: 11px var(--mono);
      color: var(--ink-soft)
    }

    .v-why {
      border-left: 2px solid #d9cba4;
      padding: 2px 0 2px 12px;
      margin: 12px 0 0;
      font-size: 13px;
      line-height: 1.75;
      color: var(--ink-mid)
    }

    /* 세트 결산 카드 — 기출 채점 뒤 이 5분의 기록을 말한다 */
    .done-card {
      position: relative;
      border: 1px solid #dcd2b8;
      border-radius: 8px;
      background: #fff;
      padding: 20px 22px;
      margin-top: 10px
    }

    .done-card::after {
      content: '';
      position: absolute;
      inset: 5px;
      border: 1px solid rgba(176, 141, 62, .2);
      border-radius: 5px;
      pointer-events: none
    }

    .done-h {
      font-family: var(--serif);
      font-weight: 800;
      font-size: 15px;
      letter-spacing: .12em
    }

    .done-rows {
      margin: 12px 0 0;
      display: grid;
      gap: 7px;
      max-width: 420px;
      /* 우상단 낙관(회전 bbox 포함)이 값 칩을 가리지 않게 — 행이 도장 왼쪽에서 끝난다 (실측 104px) */
      padding-right: 104px
    }

    @media (min-width:701px) {
      .done-rows {
        padding-right: 0
      }
    }

    .done-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      color: var(--ink-mid);
      border-bottom: 1px dashed #e0d9c6;
      padding-bottom: 6px
    }

    .done-row b {
      font: 700 12px var(--mono)
    }

    .done-row b.g {
      color: var(--jade)
    }

    .done-row b.r {
      color: var(--seal)
    }

    .done-note {
      font-size: 12px;
      color: var(--ink-soft);
      margin-top: 12px;
      max-width: 52ch
    }

    .dseal {
      position: absolute;
      right: 16px;
      top: 14px;
      width: 74px;
      height: 74px;
      border: 3px solid rgba(194, 59, 42, .65);
      border-radius: 10px;
      color: var(--seal);
      display: grid;
      place-items: center;
      transform: rotate(7deg);
      font-family: var(--serif);
      font-weight: 800;
      font-size: 15px;
      line-height: 1.25;
      text-align: center;
      background: rgba(194, 59, 42, .04)
    }

    .dseal.wait {
      color: var(--navy);
      border-color: rgba(31, 78, 121, .45);
      background: rgba(31, 78, 121, .04)
    }

    .dseal.pop {
      animation: vpop2 .5s cubic-bezier(.3, 1.35, .45, 1) both
    }

    @keyframes vpop2 {
      from {
        opacity: 0;
        transform: rotate(7deg) scale(2)
      }

      to {
        opacity: 1;
        transform: rotate(7deg) scale(1)
      }
    }

    body.rm .dseal.pop {
      animation: none
    }

    /* 검산 정답 · 워크스루 줄 */
    .cx-card.right {
      border-color: var(--jade);
      background: rgba(33, 122, 87, .06);
      opacity: 1
    }

    .cx-card.right .cx-badge {
      color: var(--jade)
    }

    .wk-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
      padding: 8px 10px;
      border-bottom: 1px dashed #d8d2c0;
      font-family: var(--serif);
      animation: rise .3s cubic-bezier(.2, .8, .3, 1)
    }

    .wk-row .wk-n {
      font-weight: 700;
      white-space: nowrap;
      font-size: 13.5px
    }

    .wk-row .wk-e {
      color: var(--ink-mid);
      font-size: 13.5px
    }

    .wk-row .wk-s {
      color: var(--ink-soft);
      font-size: 12px
    }

    .wk-row .wk-v {
      margin-left: auto;
      font: 700 13px var(--mono);
      color: var(--navy);
      white-space: nowrap
    }

    #wkCtl {
      margin-top: 14px
    }

    /* 대질 심문 카드 */
    .cx-lead {
      font-family: var(--serif);
      font-size: 15.5px;
      margin-bottom: 14px
    }

    .cx-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      width: 100%;
      text-align: left;
      font: inherit;
      background: #fff;
      border: 1.5px solid var(--cabinet-edge);
      border-radius: 8px;
      padding: 13px 15px;
      margin-bottom: 9px;
      cursor: pointer;
      transition: .14s;
      position: relative
    }

    .cx-card:hover:not(:disabled) {
      border-color: var(--navy);
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(31, 35, 40, .12)
    }

    .cx-card .cx-no {
      flex: 0 0 auto;
      font: 800 15px var(--serif);
      color: var(--gold);
      padding-top: 1px;
      white-space: nowrap
    }

    .cx-card .cx-s {
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.68
    }

    /* 판정 소인 — 사실은 옅은 jade, 거짓은 짙은 seal 도장 */
    .cx-card .cx-badge {
      margin-left: auto;
      flex: 0 0 auto;
      align-self: center;
      font: 800 12px var(--serif);
      border: 1.5px solid transparent;
      border-radius: 5px;
      padding: 2px 8px;
      transform: rotate(-4deg)
    }

    .cx-card.truth .cx-badge {
      border-color: rgba(33, 122, 87, .5)
    }

    .cx-card.lie .cx-badge {
      border-color: rgba(194, 59, 42, .7);
      font-size: 13px;
      padding: 3px 10px
    }

    .cx-card:disabled {
      cursor: default
    }

    .cx-card.lie {
      border-color: var(--seal);
      background: rgba(194, 59, 42, .05)
    }

    .cx-card.lie .cx-badge {
      color: var(--seal)
    }

    .cx-card.truth {
      opacity: .75
    }

    .cx-card.truth .cx-badge {
      color: var(--jade)
    }

    .cx-card.picked {
      box-shadow: 0 0 0 2px var(--navy)
    }

    .oxv {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 700;
      margin: 8px 0 6px
    }

    .oxv.good {
      color: var(--jade)
    }

    .oxv.bad {
      color: var(--seal)
    }

    .oxw {
      font-size: 13.5px;
      line-height: 1.7;
      margin: 4px 0
    }

    .oxl {
      font: 11px var(--mono);
      color: var(--ink-soft);
      margin: 2px 0 14px
    }

    /* 강의 뷰어 */
    #lecView {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: none;
      background: rgba(20, 25, 30, .55)
    }

    #lecView.on {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    .lv-panel {
      width: min(880px, 96vw);
      height: min(92vh, 1000px);
      background: var(--paper);
      border-radius: 8px;
      box-shadow: 0 24px 80px rgba(20, 25, 30, .5);
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    /* ── 뷰어 크롬 「별지 제3호」 (2026-08-31 재설계, 아티팩트 「검증 세트 별지 시안」) ──
       두 줄 고정: 문서띠(라벨·닫기) + 표제·번호 타임라인. 안내는 하단 스트립이 받는다. */
    .lv-doc {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font: 11px var(--mono);
      letter-spacing: .14em;
      color: var(--ink-soft);
      padding: 8px 16px;
      border-bottom: 1px solid #e4ddc9;
      background: #faf8f0
    }

    .lv-x {
      border: 0;
      background: transparent;
      font: 15px var(--sans);
      color: var(--ink-soft);
      cursor: pointer;
      padding: 2px 7px
    }

    .lv-x:hover {
      color: var(--ink)
    }

    .lv-head {
      padding: 12px 20px 0
    }

    .lv-title {
      font-family: var(--serif);
      font-weight: 800;
      font-size: 17px;
      color: var(--ink)
    }

    .lv-title small {
      font: 400 10.5px var(--mono);
      color: var(--ink-soft);
      letter-spacing: .18em;
      margin-left: 10px
    }

    .lv-rule {
      height: 0;
      border-top: 3px double #c9b789;
      margin: 0 20px
    }

    .lv-tl {
      display: flex;
      margin-top: 12px;
      padding-bottom: 12px
    }

    /* [hidden] 은 UA 시트라 display:flex 클래스에 진다 (실측) — 명시로 되살린다 */
    .lv-tl[hidden],
    .lv-strip[hidden] {
      display: none !important
    }

    .lv-tl .tstep {
      flex: 1;
      text-align: center;
      position: relative
    }

    .lv-tl .tstep::before {
      content: '';
      position: absolute;
      top: 14px;
      left: -50%;
      width: 100%;
      height: 1px;
      background: #d9cba4
    }

    .lv-tl .tstep:first-child::before {
      display: none
    }

    .lv-tl .h {
      width: 29px;
      height: 29px;
      margin: 0 auto;
      border-radius: 50%;
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
      font-size: 13px;
      background: var(--paper);
      border: 1.5px solid #d9cba4;
      color: #b3a67f
    }

    .lv-tl .lb {
      display: block;
      font-size: 11px;
      color: #a09a8c;
      margin-top: 4px
    }

    .lv-tl .sc {
      display: block;
      font: 10px var(--mono);
      color: var(--ink-soft);
      letter-spacing: .1em;
      min-height: 13px
    }

    .lv-tl .tstep.done .h {
      border-color: var(--jade);
      background: var(--jade);
      color: var(--paper)
    }

    .lv-tl .tstep.done .lb {
      color: var(--jade)
    }

    .lv-tl .tstep.now .h {
      border-color: var(--navy);
      color: var(--navy);
      border-width: 2px;
      box-shadow: 0 0 0 3px rgba(31, 78, 121, .12)
    }

    .lv-tl .tstep.now .lb {
      color: var(--navy);
      font-weight: 700
    }

    .lv-tl .tstep.done+.tstep::before {
      background: var(--jade)
    }

    /* 안내 스트립 — 기출 단계의 소인·안내문·해설 버튼 */
    .lv-strip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      background: #faf8f0;
      border-top: 1px solid #e4ddc9;
      border-bottom: 1px solid #e4ddc9;
      font: 12.5px var(--sans);
      color: var(--ink-mid);
      flex-wrap: wrap
    }

    .lv-tag {
      font: 700 11px var(--serif);
      border: 1.5px solid rgba(125, 130, 136, .5);
      color: var(--ink-soft);
      border-radius: 5px;
      padding: 2px 9px;
      transform: rotate(-3deg)
    }

    .lv-tag.g {
      color: var(--jade);
      border-color: rgba(33, 122, 87, .55)
    }

    .lv-tag.r {
      color: var(--seal);
      border-color: rgba(194, 59, 42, .6)
    }

    .lv-panel iframe {
      flex: 1;
      border: 0;
      width: 100%;
      background: #fff
    }

    /* 보고서 입장·도장 */
    .sheet.reveal-pending {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .65s cubic-bezier(.2, .8, .3, 1), transform .65s cubic-bezier(.2, .8, .3, 1);
    }

    .sheet.reveal-in {
      opacity: 1;
      transform: none;
    }

    /* 블록 단위 스크롤 리빌 — 스크롤이 닿을 때 문단·표·차트가 하나씩 떠오른다 */
    .sheet .rv {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
    }

    .sheet .rv.in {
      opacity: 1;
      transform: none;
    }

    .stamp.prep {
      opacity: 0
    }

    .stamp.pop {
      animation: stampin2 .45s cubic-bezier(.3, 1.35, .45, 1) forwards
    }

    @keyframes stampin2 {
      from {
        opacity: 0;
        transform: rotate(6deg) scale(2.2)
      }

      60% {
        opacity: 1
      }

      to {
        opacity: 1;
        transform: rotate(6deg) scale(1)
      }
    }

    .stamp.scorest.pop {
      animation-name: stampin3
    }

    @keyframes stampin3 {
      from {
        opacity: 0;
        transform: rotate(-7deg) scale(2.2)
      }

      60% {
        opacity: 1
      }

      to {
        opacity: 1;
        transform: rotate(-7deg) scale(1)
      }
    }

    .meter .bar i {
      transition: width .9s cubic-bezier(.2, .8, .3, 1)
    }

    .mcaret {
      display: inline-block;
      width: 7px;
      height: 14px;
      background: var(--navy);
      vertical-align: -2px;
      animation: blink .8s steps(1) infinite;
      margin-left: 2px
    }

    @keyframes blink {
      50% {
        opacity: 0
      }
    }

    /* ── 모바일 — 보고서 용지를 화면 폭에 맞춘다 (A4 고정폭·2열 채점표가 좁은 화면을 뚫는다) ── */
    @media (max-width:700px) {

      /* 뷰어(별지 제3호) — 폰에선 전면 시트, 타임라인은 번호+성적만 */
      #lecView.on {
        padding: 0
      }

      .lv-panel {
        width: 100%;
        height: 100%;
        border-radius: 0
      }

      .lv-tl .lb {
        display: none
      }

      .oxbtn {
        width: 64px;
        height: 64px;
        font-size: 23px
      }

      #lvOx {
        padding: 20px 18px
      }

      .dseal {
        width: 60px;
        height: 60px;
        font-size: 13px
      }

      /* 답안카드 — 번호 원 5개가 오른쪽을 뚫는다 → 줄바꿈 허용·간격 축소 */
      .omr {
        padding: 12px 12px 10px
      }

      .omr .orow {
        flex-wrap: wrap;
        gap: 8px 10px
      }

      .omr .obubs {
        gap: 8px;
        flex-basis: 100%;
        justify-content: space-between
      }

      /* 원 5개가 322px 를 요구해 카드 내폭(약 300px)을 뚫는다 — 폭을 나눠 갖게 한다 */
      .omr .obubs .bub {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        max-width: 58px;
      }

      .qcard {
        padding: 24px 18px 22px
      }

      .qcard h2 {
        font-size: 21px
      }

      /* 채점 점수 도장 — 제목을 덮을 만큼 크다 → 축소해서 우상단 빈자리(문서번호 오른쪽)로 */
      .stamp.scorest {
        right: 0;
        top: -8px;
        min-width: 70px;
        height: 46px;
        padding: 0 8px;
        font-size: 17px;
        transform: rotate(-6deg)
      }

      .stamp.scorest small {
        font-size: 10px
      }

      /* 단원 분류 — 세목 라벨(112px 고정)이 칩을 한 줄에 하나로 떨어뜨린다 → 라벨을 위로 */
      .drawer {
        flex-direction: column;
        gap: 7px
      }

      .drawer .gname {
        flex: none;
        padding-top: 0;
        align-items: center;
        flex-wrap: wrap
      }

      .drawer .gname .gset {
        margin-top: 0;
        margin-left: 4px
      }

      .wtop {
        flex-wrap: wrap;
        row-gap: 2px
      }

      .sheet {
        padding: 30px 16px 52px;
        min-height: auto;
        font-size: 12.8px
      }

      .sheet h1 {
        font-size: 20px;
        letter-spacing: .18em;
        text-indent: .18em
      }

      .sheet .docno {
        flex-wrap: wrap;
        gap: 2px 10px
      }

      .gradewrap {
        flex-direction: column;
        gap: 8px
      }

      .gradewrap table {
        font-size: 11.2px
      }

      .rbar {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 8px
      }

      .rbar .btn {
        padding: 8px 12px;
        font-size: 12.5px
      }

      .sheet table {
        font-size: 11.8px
      }

      .sheet th,
      .sheet td {
        padding: 3px 5px
      }
    }

    @media print {
      body::before {
        display: none
      }

      .wiz,
      .rbar,
      #distReplay {
        display: none !important
      }

      #report {
        display: block !important;
        padding: 0
      }

      .sheet {
        box-shadow: none;
        border: 0;
        margin: 0;
        break-after: page;
        min-height: auto
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .step.on {
        animation: none
      }

      .spin .ring {
        animation-duration: 2s
      }
    }