/* ══════════════════════════════════════════════
   print.css — 시험지 인쇄 / PDF 저장
   화면용(오버레이)과 인쇄용 규칙이 함께 들어 있으므로 <link> 에 media 를 주지 않는다.

   설계 메모
   - @page 여백을 0 으로 만들어 브라우저 머리말/꼬리말을 지우는 트릭을 쓰지 않는다.
     여백을 살려야 브라우저가 꼬리말에 페이지 번호(1/3)를 찍어 준다.
     CSS 의 @bottom-center 는 Chrome 131+ 전용이라 크로스브라우저로는 이 방법뿐이다.
     대가로 URL·날짜가 함께 찍히는데, 사용자가 인쇄 창에서 끌 수 있다(페이지 번호도 같이 사라짐).
   - 색·배경에 의존하지 않는다. 사용자가 '배경 그래픽'을 끄면 배경은 통째로 사라진다.
     구분은 전부 테두리(실선/점선)와 굵기로 한다.
   - page-break-* 를 break-* 와 병기한다. Safari·iOS Safari 는 신형 break-* 를 모른다.
   ══════════════════════════════════════════════ */

/* 상세 화면의 인쇄 버튼 2개 — 좁은 화면에서 '← 목록으로' 아래로 줄바꿈된다 */
.print-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ── 미리보기 오버레이 (화면) ── */
#print-root {
  position: fixed; inset: 0; z-index: 2000;
  background: #fff; overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.p-toolbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  background: #f8fafc; border-bottom: 1px solid #cbd5e1;
}
.p-tname {
  font-weight: 700; font-size: 0.92rem; color: #1e293b;
  margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-btn-main, .p-btn {
  padding: 9px 16px; border-radius: 9px;
  font-size: 0.88rem; font-weight: 700; font-family: inherit; cursor: pointer;
  min-height: 40px;
}
.p-btn-main { border: none; background: #2f5c50; color: #fff; }
.p-btn-main:hover { background: #244b40; }
.p-btn { border: 1.5px solid #cbd5e1; background: #fff; color: #475569; }
.p-btn:hover { border-color: #2f5c50; color: #2f5c50; }
.p-btn-main:focus-visible, .p-btn:focus-visible { outline: 2px solid #2f5c50; outline-offset: 2px; }
.p-hint {
  flex-basis: 100%; font-size: 0.74rem; color: #64748b; line-height: 1.6; margin-top: 2px;
}
.p-page { padding: 10mm 6mm 24mm; }

/* ── 지면 (화면 미리보기와 인쇄가 같은 규칙을 쓴다) ── */
.p-sheet {
  font: 10.5pt/1.55 'Pretendard Variable', system-ui, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  color: #000; max-width: 182mm; margin: 0 auto;
}
.p-band { border-bottom: 1.5px solid #000; padding-bottom: 3mm; margin-bottom: 6mm; }
.p-title { font-size: 14pt; font-weight: 700; }
.p-kind {
  font-size: 9.5pt; font-weight: 600;
  border: 1px solid #000; border-radius: 2mm; padding: 0.6mm 2mm;
  margin-left: 2mm; vertical-align: 2px;
}
.p-meta { font-size: 8.5pt; color: #333; margin-top: 1.5mm; }

/* 한 문항이 쪽 경계에서 갈라지지 않게. page-break-inside 는 모든 엔진이 지원한다. */
.p-item, .p-ans, .p-key {
  page-break-inside: avoid; break-inside: avoid;
  margin-bottom: 7mm; orphans: 2; widows: 2;
}
.p-ihead { display: flex; align-items: center; gap: 2mm; margin-bottom: 1.5mm; flex-wrap: wrap; }
.p-no { font-weight: 700; font-size: 11pt; min-width: 7mm; }
.p-type {
  font-size: 8pt; color: #333;
  border: 1px solid #666; border-radius: 1mm; padding: 0.3mm 1.5mm;
}
/* 객관식 답 기입 박스 — 헤더 오른쪽 끝 */
.p-abox { margin-left: auto; display: inline-block; min-width: 20mm; height: 7mm; border: 1px solid #000; }
.p-body { white-space: pre-wrap; }

/* 선택지가 본문과 갈라지지 않게 별도로 한 번 더 */
.p-choices {
  list-style: none; margin: 2mm 0 0; padding: 0;
  page-break-inside: avoid; break-inside: avoid;
}
.p-choices li { padding: 0.6mm 0 0.6mm 1mm; }

/* 빈칸 손글씨 자리 — 본문의 ____ 를 print.js 가 이걸로 바꾼다 */
.p-blank { display: inline-block; width: 25mm; border-bottom: 1px solid #000; }
/* 단답형·서술형 답 쓸 괘선. 배경 그라디언트가 아니라 테두리여야 '배경 끄기'에서 살아남는다 */
.p-rule { border-bottom: 1px solid #999; height: 9mm; margin-top: 2mm; }

/* 오른쪽 메모 여백 — 문항마다 20mm 를 비우고 점선으로 경계를 긋는다 */
.p-sheet.memo .p-item { padding-right: 20mm; border-right: 1px dotted #999; }

.p-end {
  text-align: center; font-size: 9pt; color: #555;
  border-top: 1px solid #999; padding-top: 3mm; margin-top: 4mm;
}

/* ── 정답 · 해설지 ── */
.p-sub {
  font-weight: 700; font-size: 11pt;
  border-bottom: 1px solid #000; padding-bottom: 1mm; margin: 6mm 0 3mm;
}
.p-key { border-collapse: collapse; width: 100%; }
.p-key td { border: 1px solid #666; padding: 1.5mm 2mm; font-size: 9.5pt; width: 50%; }
.p-ex { font-size: 9pt; color: #444; }
.p-ansline { margin-bottom: 1.5mm; }
.p-exp { border-left: 2px solid #000; padding-left: 2.5mm; font-size: 9.5pt; }

/* ══════════════ 인쇄 ══════════════ */
@media print {
  @page { size: A4 portrait; margin: 14mm 14mm 12mm; }

  /* 인쇄 모드일 때: body 직속 자식 중 #print-root 만 남긴다.
     숨길 것을 열거하는 deny-list 가 아니라 보일 것만 정하는 allow-list 라,
     나중에 화면에 새 요소가 추가돼도 종이에 새지 않는다. */
  body.print-mode > *:not(#print-root) { display: none !important; }
  body.print-mode #print-root {
    position: static; overflow: visible; background: none;
  }
  .p-toolbar { display: none !important; }
  .p-page { padding: 0; }
  .p-sheet { max-width: none; }

  /* 버튼을 거치지 않고 Ctrl+P 를 누른 경우 — 인쇄를 막고 안내만 내보낸다.
     이게 없으면 화면에 열려 있던 정답이 그대로 종이에 찍힌다. */
  body:not(.print-mode) > * { display: none !important; }
  body:not(.print-mode)::before {
    content: '인쇄하려면 시험지 화면에서 [문제지 인쇄] 또는 [정답·해설 인쇄] 버튼을 눌러 주세요.';
    display: block; padding: 40mm 20mm; font-size: 12pt; line-height: 1.8;
    font-family: 'Pretendard Variable', system-ui, 'Malgun Gothic', sans-serif;
  }
}