/* ============================================================
   어사문 우리반 평가 — 화면과 종이 (exam/exam.css)
   정본: docs/exam/우리반평가_작업계획서.md §4-2 · §4-6

   ⚠ 셸(.yj-shell)을 씌우지 않는다 — 정보 밀도가 필요한 넓은 화면이다
      (yuja-design §4 의 hanja-detail·search 예외). 토큰과 100dvh 만 빌려 쓴다.
   ⚠ 하드코딩 HEX 를 쓰지 않는다. 색은 전부 ds/v1 토큰이다.
   ⚠ 인쇄물은 흑백 우선 — 색으로만 구분하는 표시가 없다(채움·점선·굵기로 가른다).
   ============================================================ */

/* ── 뼈대 ─────────────────────────────────────────────────── */
body.ex {
  margin: 0;
  min-height: 100dvh;
  background: var(--yj-surface);
  color: var(--yj-ink);
  font-family: var(--yj-font-ui);
}
.ex [hidden] { display: none !important; }

.ex__dock {
  height: var(--yj-dock-h);
  display: flex; align-items: center; gap: var(--yj-s3);
  padding: 0 var(--yj-s4);
  background: var(--yj-card);
  border-bottom: 1px solid var(--yj-hairline);
  position: sticky; top: 0; z-index: 20;
}
.ex__dock h1 {
  margin: 0; font-size: var(--yj-t-h2); font-weight: 800; color: var(--yj-ink-deep);
  white-space: nowrap;
}
.ex__dock .sp { margin-left: auto; }
.ex__back { display: inline-flex; align-items: center; gap: 4px; color: var(--yj-slate); text-decoration: none; }

/* ⚠ ds/v1 의 .yj-seg 는 칸을 똑같이 나눐다(flex: 1 1 0).
   여기 라벨은 "문제지"(3자)부터 "문제지+답안지"(7자)까지 길이가 달라
   좋은 칸 밖으로 글자가 흘러 옆 칸과 겹쳤다
   (2026-09-21 실측 — 46px 칸에 90px 글자). 칸을 글자에 맞춘다:
   폭을 균등하게 두는 것보다 겹치지 않는 것이 먼저다. */
.ex__dock .yj-seg { flex: 0 1 auto; min-width: 0; }
.ex__dock .yj-seg > button {
  flex: 0 0 auto; min-width: 0; padding: 0 10px; white-space: nowrap;
}

.ex__note {
  display: flex; align-items: center; gap: var(--yj-s3); flex-wrap: wrap;
  padding: var(--yj-s3) var(--yj-s4);
  background: var(--yj-amber-tint);
  color: var(--yj-ink-deep);
  font-size: var(--yj-t-cap);
}

.ex__main {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--yj-s4);
  padding: var(--yj-s4);
  align-items: start;
}
@media (max-width: 1080px) { .ex__main { grid-template-columns: 1fr; } }

/* ── 설정 패널 ────────────────────────────────────────────── */
.pn { display: flex; flex-direction: column; gap: var(--yj-s4); position: sticky; top: calc(var(--yj-dock-h) + var(--yj-s4)); }
@media (max-width: 1080px) { .pn { position: static; } }
.pn__sec { background: var(--yj-card); border: 1px solid var(--yj-hairline); border-radius: var(--yj-r-lg); padding: var(--yj-s4); }
.pn__t { margin: 0 0 var(--yj-s2); font-size: var(--yj-t-label); font-weight: 800; color: var(--yj-slate); }
.pn__row { display: flex; align-items: center; gap: var(--yj-s2); flex-wrap: wrap; margin-top: var(--yj-s2); }
.pn__row label { font-size: var(--yj-t-cap); color: var(--yj-slate); }
.pn__hint { margin: var(--yj-s2) 0 0; font-size: var(--yj-t-cap); color: var(--yj-steel); }
.pn__warn { margin: var(--yj-s2) 0 0; font-size: var(--yj-t-cap); color: var(--yj-steel); }
.pn input[type="text"], .pn input[type="date"], .pn input[type="number"], .pn select {
  font-family: inherit; font-size: var(--yj-t-cap);
  border: 1px solid var(--yj-hairline-strong); border-radius: var(--yj-r-xs);
  padding: 6px 8px; background: var(--yj-surface); color: var(--yj-ink);
  min-height: 34px;
}
.pn input[type="number"] { width: 64px; }
.pn__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--yj-s2); margin-top: var(--yj-s2); }
.pn__grid2 input, .pn__grid2 select { width: 100%; box-sizing: border-box; }

/* 권 탭 */
.vt { display: flex; flex-wrap: wrap; gap: 4px; }
.vt button {
  min-width: 36px; min-height: 32px; padding: 0 8px;
  border: 1px solid var(--yj-hairline-strong); background: var(--yj-surface);
  border-radius: var(--yj-r-xs); font: inherit; font-size: var(--yj-t-cap); color: var(--yj-slate);
  cursor: pointer; transition: background var(--yj-m-fast) var(--yj-ease);
}
.vt button[aria-pressed="true"] { background: var(--yj-amber); color: var(--yj-ink-deep); font-weight: 800; border-color: var(--yj-amber); }

/* 연번 격자 */
/* 한 줄에 5칸 고정(2026-09-21 사용자 지시 ⑤).
   auto-fill 은 창 폭에 따라 4칸이 돼 10연번짜리 챕터가 3행으로 쌍렸다.
   5칸이면 10연번은 정확히 2행이고 20연번(7권~)은 4행으로 일정하다. */
.gr {
  margin-top: var(--yj-s3);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px; max-height: 340px; overflow: auto;
  padding: 2px; user-select: none;
  /* 한 칸 레이아웃(≤1080px)에서는 패널이 화면 폭을 다 쓴다.
     5열을 그대로 두면 칸이 180px 넘게 부푸다 — 격자 폭을 잡아
     어느 화면에서든 "한 줄에 5칸"과 칸 크기를 동시에 지킨다. */
  max-width: 420px;
}
.gr__c {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 44px; padding: 3px 1px;
  border: 1px solid var(--yj-hairline); border-radius: var(--yj-r-xs);
  background: var(--yj-surface); cursor: pointer; position: relative;
  font-size: 10px; color: var(--yj-steel);
}
/* 칸의 주인공은 **훈음**이다 — 한자가 아니다(2026-09-20).
   어사문은 한자를 외우거나 쓰게 하지 않으므로, 교사가 범위를 고를 때 보는 것도 뜻과 음이다. */
.gr__c b {
  font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.15;
  color: var(--yj-ink); text-align: center; word-break: keep-all;
}
.gr__c[aria-pressed="true"] { background: var(--yj-amber-tint); border-color: var(--yj-amber); }
.gr__c[aria-pressed="true"] b { color: var(--yj-ink-deep); }
/* 우리반 진도 — 잎 색 점(§4-3). 색만으로 뜻을 주지 않도록 title 도 함께 단다 */
.gr__c.is-taught::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px; border-radius: var(--yj-r-full); background: var(--yj-leaf);
}
/* 챕터 줄 — 제목 + 전체선택 단추. 둘 다 같은 일을 하지만,
   누를 수 있다는 것을 알려 주는 것은 단추 쪽이다(2026-09-21 지시 ④). */
.gr__ch {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 2px 4px;
}
.gr__cht {
  flex: 1; border: 0; background: none; padding: 0;
  font: inherit; font-size: var(--yj-t-label); font-weight: 800; color: var(--yj-slate);
  cursor: pointer; text-align: left;
}
.gr__cha {
  flex: 0 0 auto; border: 0; cursor: pointer;
  /* ⚠ 스킬의 터치 타깃 44px 에는 미치지 못한다. 챕터 줄이 10개라
     44px 로 키우면 340px 격자 안에 170px 가 더 쌓인다 — 이 화면은
     교사용 PC 도구고(§3-3 컴퓨터 권장), 주 타깃인 연번 칸은 44px 를 지킨다. */
  min-height: 32px; padding: 5px 10px; border-radius: var(--yj-r-xs);
  background: var(--yj-amber-tint); color: var(--yj-ink-deep);
  font: inherit; font-size: var(--yj-t-cap); font-weight: 700;
  transition: filter var(--yj-m-fast) var(--yj-ease);
}
.gr__cha:hover { filter: brightness(.96); }
.gr__cha[aria-pressed="true"] { background: var(--yj-surface-2); color: var(--yj-slate); }

/* 범위 드롭다운 — 네 칸이 한 줄에 들어가게 좁게 잡는다 */
.rg select { min-width: 0; flex: 1 1 0; }
.rg .rg__t { color: var(--yj-steel); font-size: var(--yj-t-cap); }

/* 담은 것 */
.bag { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--yj-s3); max-height: 96px; overflow: auto; }
.bag__c {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: var(--yj-r-xs);
  background: var(--yj-surface-2); font-size: var(--yj-t-label); color: var(--yj-slate);
}
.bag__x { border: 0; background: none; cursor: pointer; color: var(--yj-steel); font: inherit; padding: 0 2px; }

/* 유형 줄 */
.ty { display: flex; align-items: center; gap: var(--yj-s2); margin-top: 6px; }
.ty__n { flex: 1; font-size: var(--yj-t-cap); color: var(--yj-ink); }
.ty__c { width: 58px; }

/* ── 미리보기 ─────────────────────────────────────────────── */
.pv { min-width: 0; }
.pv__bar {
  display: flex; align-items: center; gap: var(--yj-s3); flex-wrap: wrap;
  margin-bottom: var(--yj-s3);
}
.pv__stat { font-size: var(--yj-t-cap); color: var(--yj-slate); font-variant-numeric: tabular-nums; }
.pv__warn { font-size: var(--yj-t-cap); color: var(--yj-steel); }
.pv__scroll { overflow: auto; }
.pv__pages { display: flex; flex-direction: column; align-items: center; gap: var(--yj-s4); }

.pg-empty { padding: var(--yj-s6) var(--yj-s4); text-align: center; color: var(--yj-steel); }

/* ── 종이 ─────────────────────────────────────────────────── */
.pg {
  width: 210mm; height: 297mm; padding: 14mm;
  box-sizing: border-box; background: var(--yj-card-hi); color: var(--yj-ink-deep);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  display: flex; flex-direction: column;
  font-size: 11.5pt; line-height: 1.55;
}
.pg__body { flex: 1; min-height: 0; display: flex; gap: 10mm; }
.pg__col { flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.pg--2 .pg__col { border-right: 0; }

.pg .hd { border-bottom: 2px solid var(--yj-ink-deep); padding-bottom: 4mm; margin-bottom: 5mm; }
.pg .hd__top { display: flex; align-items: baseline; gap: var(--yj-s3); }
.pg .hd__title { margin: 0; font-family: var(--yj-font-disp); font-size: 17pt; font-weight: 800; }
.pg .hd__meta { margin-left: auto; font-size: 9.5pt; color: var(--yj-slate); white-space: nowrap; }
.pg .hd__line { display: flex; align-items: baseline; gap: var(--yj-s3); margin-top: 3mm; font-size: 10pt; }
.pg .hd__fill { flex: 1; }
.pg .hd__rule { display: inline-block; width: 28mm; border-bottom: 1px solid var(--yj-ink-deep); }
.pg .hd__rule--sm { width: 14mm; }
.pg .hd__range { margin: 2mm 0 0; font-size: 9pt; color: var(--yj-slate); }
.pg .rh { display: flex; font-size: 9pt; color: var(--yj-slate); border-bottom: 1px solid var(--yj-hairline); padding-bottom: 2mm; margin-bottom: 4mm; }
.pg .rh span:last-child { margin-left: auto; }

.pg .st { margin: 4mm 0 2mm; font-weight: 700; font-size: 10.5pt; break-inside: avoid; }
.pg .st__r { margin-right: 4px; }
.pg .box {
  border: 1px solid var(--yj-ink-deep); padding: 3mm; margin-bottom: 3mm;
  display: flex; flex-wrap: wrap; gap: 3mm 6mm; justify-content: center; break-inside: avoid;
}

.pg .q { margin-bottom: 3.5mm; break-inside: avoid; display: flex; gap: 2mm; }
.pg .q__h { display: flex; gap: 2px; white-space: nowrap; font-weight: 700; }
.pg .q__pt { font-weight: 400; font-size: 8.5pt; color: var(--yj-slate); }
.pg .q__b { flex: 1; min-width: 0; }
.pg .q__lead { font-weight: 700; }
.pg .q__lead--plain { font-weight: 400; }
.pg .q__sub { color: var(--yj-slate); font-size: 9.5pt; margin-left: 4px; }
.pg .q__hint { color: var(--yj-slate); font-size: 9.5pt; margin-left: 4px; }
.pg .q__gap { display: inline-block; width: 3mm; }
.pg .hj { font-family: var(--yj-font-hanja); color: var(--yj-slate); font-size: 9.5pt; margin-left: 2px; }
.pg .hj--big { font-family: var(--yj-font-hanja); color: var(--yj-ink-deep); font-size: 24pt; line-height: 1.1; margin: 0; }
.pg .hj--mid { font-family: var(--yj-font-hanja); color: var(--yj-ink-deep); font-size: 16pt; margin: 0; }
.pg .rule { display: inline-block; border-bottom: 1px solid var(--yj-ink-deep); vertical-align: baseline; }
.pg .bl { display: inline-block; border-bottom: 1px solid var(--yj-ink-deep); vertical-align: baseline; }

.pg .ch { list-style: none; margin: 1.5mm 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1mm 3mm; font-size: 10.5pt; }
.pg .ch--one { grid-template-columns: 1fr; }
.pg .ch__i { display: flex; gap: 3px; }
.pg .ch__n { flex: 0 0 auto; }

.pg .mt { display: flex; gap: 8mm; margin-top: 1.5mm; }
.pg .mt__c { list-style: none; margin: 0; padding: 0; flex: 1; font-size: 10.5pt; }
.pg .mt__c li { display: flex; align-items: center; gap: 3px; padding: 1mm 0; }
.pg .mt__c--r li { justify-content: flex-start; }
.pg .mt__n { color: var(--yj-slate); }
.pg .mt__dot { flex: 1; border-bottom: 1px dotted var(--yj-hairline-strong); margin: 0 2mm; }

.pg .es { margin-top: 2mm; }
.pg .es__l { border-bottom: 1px solid var(--yj-hairline-strong); height: 7mm; }

.pg .ak { display: flex; gap: 3mm; align-items: baseline; padding: 1mm 0; border-bottom: 1px dotted var(--yj-hairline); font-size: 10.5pt; }
.pg .ak__no { font-weight: 700; min-width: 8mm; }
.pg .ak__also { color: var(--yj-slate); font-size: 9pt; }
.pg .ak__src { margin-left: auto; color: var(--yj-steel); font-size: 8.5pt; }

.pg .sc { display: flex; flex-wrap: wrap; gap: 2mm 4mm; font-size: 11pt; }
.pg .sc__i { display: inline-flex; gap: 3px; border: 1px solid var(--yj-hairline); border-radius: var(--yj-r-xs); padding: 1mm 2mm; }

/* 글자 크기 3종 — 저학년 종이는 크게 (§6 C14) */
.pg--sm { font-size: 10.5pt; }
.pg--lg { font-size: 13pt; }

/* ── 인쇄 ─────────────────────────────────────────────────── */
/* ── 문항 잠그기 · 최근 시험지 (계획서 C5 · C4) ─────────
   ⚠ 종이의 틀을 **한 점도 움직이지 않는** 속성만 쓴다.
      조판기가 칸에 넣어 보고 넘치면 물리는 식으로 쪽을 나누므로,
      높이를 건드리면 미리보기와 인쇄가 어긋난다.
      outline 과 absolute 배지는 주변 문항을 밀지 않는다. */
@media screen {
  .pg .q[data-no] { position: relative; cursor: pointer; }
  .pg .q[data-no]:hover { outline: 1px dashed var(--yj-steel); outline-offset: 2px; }
  .pg .q--locked { outline: 2px solid var(--yj-leaf); outline-offset: 2px; }
  .pg .q--locked::after {
    content: "잠금";
    position: absolute; top: -9px; right: 0;
    font-size: 8px; line-height: 1; letter-spacing: 0;
    padding: 2px 5px; border-radius: var(--yj-r-full);
    background: var(--yj-leaf); color: #fff;
  }
}

.pv__bar--lock { margin-top: calc(var(--yj-s3) * -1); }
.bag__t { border: 0; background: none; cursor: pointer; color: inherit; font: inherit; padding: 0; }
.bag__t:hover { text-decoration: underline; }

@media print {
  @page { size: A4 portrait; margin: 0; }
  body.ex { background: none; }
  .ex__dock, .ex__note, .pn, .pv__bar, .noprint { display: none !important; }
  .ex__main { display: block; padding: 0; }
  .pv__scroll { overflow: visible; }
  .pv__pages { display: block; gap: 0; }
  .pg {
    box-shadow: none; break-after: page; page-break-after: always;
    width: 210mm;
    /* ⚠ 297mm 를 그대로 두면 반올림 때문에 쪽마다 **빈 쪽이 하나씩** 딸려 나온다
       (여백 0 + 높이 = 종이 높이). 0.4mm 를 덜어 그 경계를 피한다. */
    height: 296.6mm;
  }
  .pg:last-child { break-after: auto; page-break-after: auto; }
}