/* ==========================================================================
   print-sheet.css — 인쇄용 A4 용지 공통 스타일
   word-test-maker 와 writing-sheets 가 함께 씁니다.

   설계 원칙
   - 화면에 보이는 .sheet DOM 이 그대로 인쇄됩니다. 인쇄 전용 렌더링이 따로 없습니다.
   - 페이지 나눔은 CSS 에 맡기지 않고 JS 가 .sheet 단위로 확정합니다.
     (브라우저마다 fragmentation 결과가 달라 정답지와 번호가 어긋납니다)
   - 🔴 요소 숨김에 `hidden` 속성을 쓰지 마세요. common.css 의 전역
     `[hidden]{display:none!important}` 가 인쇄 시에도 계속 이겨서 되살릴 수 없습니다.
     인쇄 때 감출 것은 `.no-print`, 인쇄 때만 보일 것은 `.print-only` 를 쓰세요.
   ========================================================================== */

/* --- 인쇄용 먹 농도 --------------------------------------------------------
   🔴 인쇄물 회색을 툴마다 따로 정하지 마세요.
   실측(2026-08-19): 인쇄 툴 9개가 서로 다른 회색 11가지(#333 #444 #555 #666
   #999 #ADADAD #9C9C9C #BBB #C9C9C9 #C2C8D2 #7A7A7A)를 각자 쓰고 있었습니다.
   같은 학원에서 뽑은 학습지인데 툴마다 선 농도가 달라 보입니다.
   새 인쇄 요소는 반드시 이 여섯 단계 안에서 고르세요.
   -------------------------------------------------------------------------- */
:root {
  --ink-900: #000000;  /* 본문 글자·굵은 테두리 */
  --ink-700: #333333;  /* 부제·강한 라벨 */
  --ink-600: #444444;  /* 보조 라벨 */
  --ink-500: #666666;  /* 안내문·머리글 */
  --ink-400: #999999;  /* 옅은 구분선 */
  --ink-300: #BBBBBB;  /* 점선·빈칸 밑줄 */
}

@page {
  size: A4;
  margin: 15mm;
}

/* --- 용지 --------------------------------------------------------------- */
.sheet {
  /* A4 210mm 에서 좌우 여백 15mm 씩을 뺀 본문 폭 */
  width: 180mm;
  min-height: 267mm;
  margin: 0 auto var(--space-5);
  padding: 0;
  background: #FFFFFF;
  color: var(--ink-900);
  /* 🔴 영문과 한글을 한 글꼴이 함께 담당하게 합니다.
     common.css 의 본문 스택은 Pretendard·Noto Sans KR 이 앞에 있는데 이 PC 에
     설치돼 있지 않아, 한 줄 안에서 영문(Segoe UI)과 한글(맑은 고딕)이 갈립니다.
     시험지는 영단어와 한글 뜻이 한 행에 붙으므로 기준선이 흔들립니다. */
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  box-sizing: border-box;
}

/* 화면에서만 종이처럼 보이게 합니다. 인쇄에는 영향이 없습니다. */
@media screen {
  .sheet {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    padding: 15mm;
    width: 210mm;
    max-width: 100%;
  }
}

/* --- 머리말 ------------------------------------------------------------- */
.sheet-head {
  margin-bottom: 6mm;
  padding-bottom: 3mm;
  border-bottom: 1.2pt solid var(--ink-900);
}

.sheet-title {
  margin: 0 0 2mm;
  font-size: 15pt;
  font-weight: 700;   /* 인쇄 글꼴(맑은 고딕)에 Bold 위 단계가 없습니다 */
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
}

.sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2mm 6mm;
  margin: 0;
  font-size: 9.5pt;
  color: var(--ink-900);
}

.sheet-meta span {
  white-space: nowrap;
}

/* 이름·점수 기입란 */
.sheet-fields {
  display: flex;
  gap: 8mm;
  margin-top: 3mm;
  font-size: 10pt;
}

.sheet-fields b {
  font-weight: 700;
}

.fill-line {
  display: inline-block;
  min-width: 28mm;
  border-bottom: 0.8pt solid var(--ink-900);
}

/* --- 꼬리말 ------------------------------------------------------------- */
.sheet-foot {
  margin-top: 6mm;
  padding-top: 2mm;
  border-top: 0.5pt solid var(--ink-400);
  font-size: 8pt;
  color: var(--ink-600);
  display: flex;
  justify-content: space-between;
}

/* --- 인쇄 ---------------------------------------------------------------
   사이트 크롬을 전부 감추고 .sheet 만 남깁니다.
   ---------------------------------------------------------------------- */
.print-only { display: none; }

@media print {
  /* 배경색·그림자를 빼서 잉크를 아낍니다. */
  body {
    background: #FFFFFF !important;
    margin: 0;
  }

  .site-header,
  .site-footer,
  .hero,
  .breadcrumbs,
  .skip-link,
  .tool-form,
  .empty-state,
  .result-header,
  .prose,
  .section--surface,
  .no-print {
    display: none !important;
  }

  .print-only { display: block; }

  /* 미리보기 껍데기가 만든 여백·테두리를 제거합니다. */
  .container,
  .tool-shell,
  .result-panel,
  .sheet-stack {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .sheet {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    /* 마지막 장 뒤에 빈 페이지가 나오지 않도록 after 가 아니라 before 를 씁니다. */
    break-before: page;
    page-break-before: always;
  }

  /* 🔴 인쇄에서 앞쪽 용지를 감추면(.is-excluded) :first-of-type 은 여전히 감춰진 용지를
     가리켜, 실제 첫 장에 page-break 가 남아 빈 페이지가 한 장 나옵니다.
     JS 가 실제로 인쇄될 첫 용지에 .is-print-first 를 달아 주면 여기서 보정합니다.
     → CherryTools.markPrintFirst(컨테이너) 를 인쇄 범위가 바뀔 때마다 부르세요. */
  .sheet.is-print-first {
    break-before: auto;
    page-break-before: auto;
  }

  .sheet:first-of-type {
    break-before: auto;
    page-break-before: auto;
  }

  /* 한 문항이 페이지 경계에서 잘리지 않게 합니다. */
  .q-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}