/* =====================================================================
   한자 — 글꼴 · 획순 · 쓰기칸 · 필기답안

   관리자 화면(app.css) · 학생 포털(public.css) · 인쇄(print.php)가 모두 쓴다.
   한자가 나오는 곳은 세 군데인데 글자 모양이 서로 달라 보이면 안 된다.
   ===================================================================== */

/* ── 한자만 명조로 ──────────────────────────────────────────────────
   본문 글꼴 Paperlogy 에도 한자가 2,135자 들어 있어 «명조를 뒤에» 두는 흔한
   수법이 통하지 않는다 — Paperlogy 가 한자를 그려 버려 고딕이 된다.
   그래서 **한자 영역만 담은 글꼴**을 만들어 앞에 세운다(unicode-range).
   한글·영문은 이 글꼴에 «없는 글자» 라 그대로 Paperlogy 로 넘어간다.
   기기에 명조가 깔려 있으면 local() 로 그것을 쓰고 2MB 를 받지 않는다.

   원본 Noto Serif CJK KR · SIL OFL 1.1 (fonts/HanjaSerif-LICENSE.txt)
   만드는 법은 fonts/HanjaSerif-README.md 참고.                        */
@font-face {
  font-family: 'HanjaSerif';
  src: local('Noto Serif KR'), local('Noto Serif CJK KR'), local('Source Han Serif KR'),
       local('Nanum Myeongjo'), local('Batang'), local('AppleMyungjo'),
       url('/assets/fonts/HanjaSerif-Regular.woff2') format('woff2');
  unicode-range: U+2E80-2FDF, U+3005, U+3007, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+20000-2A6DF;
  font-display: swap;
}

/* app.css 의 `* { font-family: … !important }` 를 넘어서야 한다.
   자손까지 함께 적어 주지 않으면 칸 안의 <strong> 같은 것이 도로 고딕이 된다. */
.s-hanja, .s-hanja *,
.han, .han * {
  font-family: 'HanjaSerif', 'Paperlogy', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── 획순(필순) 그림 ────────────────────────────────────────────────
   묻는 획만 진하게, 나머지 획은 흐리게. **글자는 늘 다 그린다** —
   그 획까지만 그리면 «몇 번째 획인가» 가 그림에 그대로 드러난다. */
.hj-stroke { margin: 8px 0 0; display: inline-grid; gap: 4px; justify-items: center; }
.hj-stroke figcaption { font-size: 11.5px; color: var(--muted, #6A7180); }
.hj-stroke-svg { display: block; max-width: 100%; height: auto;
                 background: #fff; border-radius: 8px; }
.hj-stroke-grid { stroke: var(--border, #E7E9EF); fill: none; }
.hj-stroke-svg .st-base { fill: var(--text, #171A21); }
.hj-stroke-svg .st-dim  { fill: #D2D6DE; }
.hj-stroke-svg .st-mark { fill: var(--text, #171A21); stroke: var(--text, #171A21);
                          stroke-width: 6; stroke-linejoin: round; paint-order: stroke; }

/* ── 한자 쓰기칸 — 캔버스처럼 한 글자씩 크게 (십자 안내선) ──────── */
.hj-write { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.hj-box {
  width: 92px; height: 92px; flex: none;
  border: 1.5px solid var(--border, #cbd0da); border-radius: 8px; background: #fff;
  background-image:
    linear-gradient(to right,  transparent calc(50% - .5px), #e4e7ee calc(50% - .5px),
                    #e4e7ee calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), #e4e7ee calc(50% - .5px),
                    #e4e7ee calc(50% + .5px), transparent calc(50% + .5px));
}
.hj-write-line {
  height: 60px; border: 1.5px solid var(--border, #cbd0da); border-radius: 8px;
  background: #fff; margin: 10px 0 0; max-width: 460px;
}

/* ── 학생이 손으로 쓴 답안 (채점화면 · 결과화면) ────────────────── */
.hj-hand { display: flex; flex-wrap: wrap; gap: 6px; }
.hj-hand-svg { border: 1px solid var(--border, #E7E9EF); border-radius: 8px; background: #fff; }
.hj-hand-guide line { stroke: #e4e7ee; stroke-width: 3; }
.hj-hand-ink path { fill: none; stroke: #171A21; stroke-width: 26;
                    stroke-linecap: round; stroke-linejoin: round; }

/* ── 인쇄 ──────────────────────────────────────────────────────────
   쓰기칸은 종이에서 «실제로 쓸 수 있는 크기» 여야 한다 — mm 로 잡는다. */
@media print {
  .hj-stroke-svg { background: none; }
  .hj-stroke-grid { stroke: #ddd; }
  .hj-stroke-svg .st-base, .hj-stroke-svg .st-mark { fill: #000; }
  .hj-stroke-svg .st-mark { stroke: #000; }
  .hj-stroke-svg .st-dim  { fill: #c9ccd3; }

  .hj-box { width: 26mm; height: 26mm; border-color: #999; border-radius: 3px;
            -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hj-write-line { height: 16mm; border-color: #999; border-radius: 3px; max-width: 120mm; }
  .hj-hand-svg { border-color: #bbb; }
}