/* 내 오답 문제 모음 PDF — H30 (설계.md §19).
   자료실(`/materials/`)과 성적확인 › 성적표 탭(`/app/`)이 같이 쓴다.
   변수를 쓰지 않고 색을 직접 적는 까닭: 이 문서는 **인쇄물**이라 두 화면에서 똑같이 나와야 하고,
   site.css(홈페이지)와 report-tool.css(도구)의 팔레트가 서로 다르기 때문이다.
   자주 #8b1e3f · 벽돌빨강 #c62828 은 성적표(§5.4)와 같은 값이다. */

/* ── 고르는 자리 (화면에만 보인다) ───────────────────── */
.wn-pick { margin: 0 0 14px; }
.wn-pick-list { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; }
.wn-pick-list label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 44px; padding: 6px 4px; border-bottom: 1px solid #eceaf0; cursor: pointer;
}
.wn-pick-list label.off { color: #9a9aa4; cursor: default; }
.wn-pick-list input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
.wn-pick-list .d { flex: 0 0 auto; font-size: 12.5px; color: #6b6b76; font-variant-numeric: tabular-nums; }
.wn-pick-list .t { flex: 1 1 160px; min-width: 0; font-weight: 700; letter-spacing: -0.02em; }
.wn-pick-list .w { flex: 0 0 auto; font-size: 12.5px; color: #8b1e3f; font-weight: 700; }
.wn-pick-list label.off .w { color: #9a9aa4; font-weight: 400; }

.wn-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 12px; }
.wn-opts label { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; cursor: pointer; }
.wn-opts input[type="radio"] { width: 17px; height: 17px; }
/* H42(§29.3) — 정답 옵션 줄 아래 "문제 구성" 줄. 두 줄이 나란히 서도록 이름표를 앞에 둔다. */
.wn-opts .cap { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #6b6b76; }
.wn-opts.shape { margin-top: -4px; }

.wn-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wn-prog { font-size: 13px; color: #6b6b76; }
/* site.css 의 .gk-btn 은 display 를 직접 정해서 [hidden] 을 이긴다 — 여기서 다시 눌러 준다. */
.wn-acts button[hidden] { display: none !important; }

/* ── 만들어진 문서 ─────────────────────────────────── */
.wn-doc {
  width: 210mm; max-width: 100%; box-sizing: border-box;
  margin: 14px auto 0; padding: 0;
  color: #222;
  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size: 12.5px; line-height: 1.5;
}
.wn-sheet {
  position: relative; box-sizing: border-box; width: 210mm; max-width: 100%; height: 297mm;
  margin: 0 auto 14px; padding: 34mm 12mm 20mm;
  background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
.wn-sheet > .wn-body { display: flow-root; height: 243mm; }
.wn-head {
  position: absolute; top: 12mm; left: 12mm; right: 12mm; height: 18mm;
  box-sizing: border-box; border-bottom: 2px solid #222; padding-bottom: 8px; margin: 0;
}
.wn-head h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; color: #8b1e3f; }
.wn-who { margin: 4px 0 0; font-size: 13px; color: #444; font-variant-numeric: tabular-nums; }
.wn-page-footer {
  position: absolute; bottom: 9mm; left: 12mm; right: 12mm;
  font-size: 9.5px; color: #6b6f76; line-height: 1.7;
}
.wn-sheet.odd > .wn-page-footer { text-align: right; }
.wn-sheet.even > .wn-page-footer { text-align: left; }
/* 쪽 나누기를 잴 때는 화면 크기·부모의 숨김 상태에 영향을 받지 않는다. */
.wn-doc.wn-measuring {
  position: absolute; left: -10000px; top: 0; width: 210mm; max-width: none;
  visibility: hidden; margin: 0;
}

.wn-item { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px dashed #d7d7de;
  page-break-inside: avoid; break-inside: avoid; }
.wn-item:last-child { border-bottom: 0; }
.wn-ihead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 7px; }
.wn-ihead .t { font-size: 11.5px; color: #6b6b76; }
.wn-ihead .no { font-size: 15px; font-weight: 800; color: #8b1e3f; letter-spacing: -0.02em; }
.wn-ihead .m { font-size: 11.5px; color: #6b6b76; }
.wn-cut { display: flex; flex-direction: column; gap: 2px; }
.wn-cut img { display: block; max-width: 100%; height: auto; }

.wn-ans { margin: 8px 0 0; display: flex; gap: 16px; align-items: baseline; font-size: 12.5px; }
.wn-ans b { color: #1b7a3e; font-weight: 800; }
.wn-ans .mine { color: #c62828; font-weight: 700; }
.wn-ans .mine.none { color: #6b6b76; font-weight: 400; }

.wn-note { margin: 6px 0; font-size: 12px; }
.wn-note.warn { color: #d97706; }
.wn-note.ok { color: #6b6b76; }
.wn-note.wait { color: #6b6b76; }

/* ── 쌍둥이 문제 (설계.md §29.3 · H42) ────────────────
   원본 문항(시험지에서 잘라 온 그림) 바로 아래에 선다. 폭은 원본 그림과 같은 값을
   wrongnote.js 가 인라인으로 넣어 주므로(시험지에서 잰 pt → mm) 여기서는 상한만 둔다.
   문항 사이에서만 쪽이 나뉘게 — 쌍둥이 한 문제가 두 쪽으로 갈리지 않는다. */
.wn-twin {
  max-width: 100%; box-sizing: border-box;
  margin: 10px 0 0; padding: 8px 10px;
  border: 1px solid #e0dce8; border-left: 3px solid #8b1e3f; border-radius: 3px;
  background: #fcfbff; font-size: 12.5px; line-height: 1.55;
  page-break-inside: avoid; break-inside: avoid;
}
.wn-thead { margin: 0 0 5px; font-size: 12px; font-weight: 800; color: #8b1e3f; letter-spacing: -0.02em; }
.wn-tbody { margin: 0; }
.wn-tbody p { margin: 0 0 4px; }
.wn-tbody p:last-child { margin-bottom: 0; }
.wn-tcond { margin: 6px 0 0; padding: 6px 9px; border: 1px solid #ddd9e4; background: #fff; }
.wn-tcond p { margin: 0 0 3px; }
.wn-tcond p:last-child { margin-bottom: 0; }
.wn-tchoices { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.wn-tchoices .c { display: inline-flex; align-items: baseline; gap: 4px; }
.wn-tchoices .c i { font-style: normal; color: #6b6b76; }
.wn-tgraph { margin: 6px 0 0; }
.wn-tgraph svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.wn-tans { margin: 6px 0 0; font-size: 12.5px; }
.wn-tans b { color: #1b7a3e; font-weight: 800; }
.wn-table td.twin { color: #8b1e3f; font-weight: 700; }

.wn-table { margin: 0; }
.wn-table h2 { margin: 0 0 8px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #8b1e3f; }
.wn-table table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.wn-table th, .wn-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid #e4e4ea; }
.wn-table th { background: #eceaf6; font-weight: 700; }
.wn-table tbody tr:nth-child(even) td { background: #fafaff; }
.wn-table td.none { color: #6b6b76; }
.wn-table td.sol { color: #6b6b76; font-size: 11px; }

/* ── 인쇄 (§19) ────────────────────────────────────
   WN.print 이 화면 문서와 별도로 인쇄 사본을 body 바로 밑에 두고 .wn-print 를 건다.
   저장창이 내용을 다 읽을 때까지 사본을 유지하되 홈페이지 화면에는 보이지 않는다.
   여백 0 은 성적표(report-tool.css)와 같은 값이라 /app/ 에서 부딪히지 않는다.
   종이 안쪽 여백 12mm 와 머리말·꼬리말 자리는 .wn-sheet 가 확보한다. */
.wn-doc.wn-print-copy { display: none !important; }
@media print {
  @page { size: A4; margin: 0; }
  /* 성적표만 인쇄하실 때 화면에 남아 있던 오답 노트가 딸려 나오지 않게 한다(/app/). */
  .wn-doc { display: none !important; }
  body.wn-print { background: #fff; margin: 0; padding: 0; }
  body.wn-print > * { display: none !important; }
  body.wn-print > .wn-doc.wn-print-copy { display: block !important; width: 210mm; max-width: none; margin: 0; padding: 0; box-shadow: none; }
  .wn-sheet {
    width: 210mm; max-width: none; margin: 0; box-shadow: none;
    break-after: page; page-break-after: always;
  }
  .wn-sheet:last-child { break-after: auto; page-break-after: auto; }
  /* 긴 한 묶음도 종이 상자 높이는 늘리지 않는다. 넘친 내용은 크기 그대로 둔다. */
  .wn-sheet.wn-overflow { overflow: hidden; }
  .wn-sheet.wn-overflow > .wn-body { position: absolute; top: 34mm; left: 12mm; right: 12mm; }
  .wn-sheet.wn-overflow .wn-item, .wn-sheet.wn-overflow .wn-twin {
    page-break-inside: auto; break-inside: auto;
  }
}

@media (max-width: 640px) {
  .wn-doc { margin-top: 10px; }
  /* 좁은 화면: 첫 줄에 [체크박스][날짜], 둘째 줄에 [시험 제목][틀린 문항 수]. */
  .wn-pick-list .t { flex: 1 1 100%; }
  .wn-acts { width: 100%; }
  .wn-acts .gk-btn { flex: 1 1 auto; }
}
/* 손가락으로 누르는 자리는 44px 이상 (§12.10 · H22). 도구(성적확인)의 작은 단추는 그대로 둔다. */
@media (max-width: 640px), (pointer: coarse) {
  .wn-acts .gk-btn { min-height: 44px; }
}