/* ═══════════════════════════════════════════════════════════════════════════
   print-report.css — 리포트 인쇄(PDF) 공통 보정
   ───────────────────────────────────────────────────────────────────────────
   [무엇을 하는 파일인가]
   사주·궁합·택일·성명학 리포트는 모두 어두운 화면 테마 위에서 만들어진다.
   그 색을 그대로 종이에 보내면 안 읽힌다. 이 파일이 "종이용 색"을 마지막에
   한 번 덮어써서, 어떤 화면 규칙이 남아 있든 인쇄물은 항상 읽히게 만든다.

   [왜 파일로 분리했나 — 2026-07-30]
   같은 인쇄 규칙이 리포트 4개 파일에 제각각 복사돼 있었고, 그 중 두 곳
   (사주·궁합·택일)에는 서로 모순되는 규칙이 앞뒤로 같이 들어 있었다.

     앞:  "종이는 밝게, 글자는 어둡게"      (배경 #f4f3f0 / 글자 #1a1a1a)
     뒤:  "화면과 똑같이 어두운 테마 유지"  (배경 #0f1115 · #14161b)

   CSS는 뒤에 선언된 쪽이 이긴다. 결과는 "어두운 배경 + 어둡게 강제된 글자",
   즉 본문이 통째로 안 보이는 리포트였고 그대로 고객에게 나갔다.
   규칙을 파일마다 복사해 두는 한 이 사고는 반복된다. 그래서 한 곳에 모은다.

   [쓰는 법]
   각 리포트 HTML의 </head> **바로 앞**에 이 한 줄을 넣는다. 반드시 그 문서의
   모든 <style>보다 뒤여야 이긴다.

       <link rel="stylesheet" href="/print-report.css" media="print">

   [바꾸기 전에]
   인쇄 CSS는 화면에서 절대 드러나지 않는다. 짐작으로 고치지 말고 반드시
   렌더해서 눈으로 본다. 명암비 검사까지 같이 돈다.

       npm start
       node tools/render-print.js --page saju --port 4000
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {

  /* ── 1. 화면용 배경을 전부 걷어낸다 ────────────────────────────────────────
     하나라도 남으면 그 위의 어두운 글자와 겹쳐 "검정 위 검정"이 된다.
     배경은 색이 아니라 테두리로 구분한다. */
  *, *::before, *::after {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }
  /* [2026-08-01 지시] "바탕색을 아예 없이"
     그동안 종이 바탕을 베이지(#f4f3f0)로 깔았다. 화면 테마를 종이로 옮기려던 것인데,
     실제로 인쇄하면 **프린터가 그 색을 잉크로 뿌린다.** 종이 전체가 옅게 칠해져 나오고,
     잉크를 쓰고, 무엇보다 감정서가 「인쇄물」이 아니라 「화면 캡처」처럼 보인다.
     흰 종이는 색을 안 칠하는 것이 아니라 **종이 그대로**를 쓰는 것이다. */
  html, body { background-color: #ffffff !important; }

  /* 위 `*` 규칙은 우선순위가 가장 낮아서 ID가 들어간 선택자한테는 진다.
     각 리포트가 ID로 배경을 지정한 컨테이너를 여기에 같은 무게로 적어 준다.
     ★ 이 목록을 믿지 말 것 — 진짜 안전장치는 render-print.js의 명암비 검사다. */
  #app, #reportZone, #resultArea, #resultSection, #detailSection, #detailPanel,
  #scholarSection, #expertSection, #qnaSection .qna-card, #palaceCards .myeongban-card,
  .print-area, .panel-card, .daewoon-wrap, .daewoon-chart-wrap, .sewoon-year-card,
  .geok-banner, .day-cell {
    background-color: transparent !important;
    background-image: none !important;
  }
  /* ⛔ [2026-08-04 지적] `.day-cell.gold`·`.day-cell.warn` 을 여기서 빼야 한다.
     달력 위에 **길일·평일·흉일 색 범례**를 두고서 정작 칸에는 색을 지우고 있었다.
     그러면 범례가 아무것도 가리키지 않는다 — 고객은 어느 날이 좋은지 색으로 못 본다.
     ⚠ 흑백 인쇄를 걱정해 지운 것이지만, 칸 오른쪽 위에 「길/평/흉」 **글자**가 이미 있다.
       색은 그 위에 얹는 보조 표시이므로 색이 빠져도 읽히고, 있으면 한눈에 들어온다.
     → 아래 10-4 절에서 **연한 색으로 되살린다.** 여기서 다시 지우지 말 것. */

  /* ── 2. 테두리는 종이에서 보이는 회색으로 ─────────────────────────────── */
  .panel, .panel-card, .card, .qna-card, .easy-card, .detail-card, .daeun-card,
  .ai-card, .ai-hero-card, .ai-final-card, .ai-action-cell, .ai-domain-cell,
  .daily-guide-collapse, .sewoon-year-card, .day-cell, .geok-banner,
  .saju-pillar-card, .saju-char-box, .upsell-item,
  table, th, td, hr { border-color: #c9c4b8 !important; }

  /* ── 3. 글자는 종이 기준 농도로 ───────────────────────────────────────────
     인라인으로 색을 준 것(오행 한자·차트 라벨)은 이미 종이용 중간 톤이라
     :not()으로 비켜 가서 색을 살린다. */
  body,
  p:not([style*="color"]), span:not([style*="color"]), div:not([style*="color"]),
  li:not([style*="color"]), td:not([style*="color"]), th:not([style*="color"]),
  h1:not([style*="color"]), h2:not([style*="color"]), h3:not([style*="color"]),
  h4:not([style*="color"]), h5:not([style*="color"]), h6:not([style*="color"]),
  label, b, strong, em, small, a { color: #1a1a1a !important; }

  /* [2026-07-30 추가] 위 :not([style*="color"])의 구멍을 막는다.
     "인라인 색은 이미 종이용"이라고 가정했는데, 그건 사주 화면의 오행 색만 그렇다.
     인텔리전스·코칭·데일리는 화면 테마 토큰을 그대로 인라인에 박아 쓴다 —
       color:var(--muted)  = #9aa0ac  (종이에서 명암비 2.37, 안 읽힘)
       color:#c9a84c       = 금색     (2.06, 안 읽힘)
       color:#e8d9a8       = 옅은 금색
     토큰 이름과 실제 값 양쪽으로 잡는다. 배경·테두리에 쓰인 곳까지 같이 걸리지만
     배경은 어차피 위에서 걷어내므로 글자만 짙어질 뿐 손해가 없다.
     ※ --ink는 배경용이라 여기 넣지 않는다. 색으로 뒤집으면 종이색 글자가 된다. */
  /* [2026-07-31] 하나씩 발견될 때마다 더하다가는 끝이 없다. 화면에서 쓰는 밝은 회색
     팔레트를 통째로 모아 한 번에 막는다. 목록은 아래 명령으로 다시 뽑을 수 있다.
       grep -ohE 'color:\s*#[0-9a-fA-F]{6}' public/*.html | sort | uniq -c | sort -rn
     ※ 새 화면에서 밝은 회색을 인라인으로 쓰면 여기에 추가해야 한다. */
  [style*="var(--muted)"], [style*="var(--text)"], [style*="var(--sub)"], [style*="var(--text2)"],
  [style*="#9aa0ac"], [style*="#8b909c"], [style*="#767c88"], [style*="#b7bcc6"],
  [style*="#c9cdd6"], [style*="#cfd3da"], [style*="#e9e9ee"], [style*="#e8e8ec"],
  [style*="#e7e3dc"], [style*="#cbd5e1"], [style*="#e2e8f0"], [style*="#c5a880"], [style*="#e3d2b0"] {
    color: #3a4050 !important;
  }
  [style*="var(--gold)"], [style*="var(--gold-pale)"], [style*="var(--gold-deep)"],
  [style*="#c9a84c"], [style*="#e8d9a8"], [style*="#a07830"], [style*="#e0a85c"] {
    color: #6b6250 !important;
  }
  /* 화면에서 흰색에 가깝게 강조하던 글자(#f7f6f2). 종이에서는 명암비 1.03 — 백지다. */
  [style*="#f7f6f2"], [style*="#f2e6c2"], [style*="#f0dca0"] { color: #14171d !important; }
  /* 인라인이 아니라 클래스로 금색을 준 곳(일진의 「띠별 상세」 접힘 제목 등) */
  summary, .syn summary, details > summary { color: #6b6250 !important; }

  /* ── 4. 표지(1쪽) ─────────────────────────────────────────────────────────
     [2026-07-30 지시] 리포트마다 표지가 제각각이었다. 어떤 건 한 쪽을 다 쓰는
     표지가 있고, 어떤 건 표지가 아예 없고, 어떤 건 작은 머리띠만 있었다.
     그래서 2쪽도 어디는 소개가 나오고 어디는 그냥 빈 여백이었다.
     여기서 규격을 하나로 세운다 — 리포트는 HTML에 표지 한 덩어리만 두면 된다.

       1쪽 = 표지          .print-only-cover  (+ cover-mid 또는 cover-top)
       2쪽 = 서비스 소개   .print-upsell
       3쪽~ = 본문

     [2026-07-30 최종 지시] **모든 표지를 세로·가로 다 가운데 맞춤**으로 통일한다.
     한때 궁합만 "세로는 맨 위"로 두었으나, 리포트마다 표지가 달라 보이는 것 자체가
     통일감을 해쳐 최종적으로 전부 가운데로 정했다.
     그래서 cover-mid / cover-top 이라는 구분 자체를 없앤다 — 클래스가 남아 있어도
     동작이 같으므로 화면 쪽 HTML을 고칠 필요가 없다.
     ───────────────────────────────────────────────────────────────────── */
  /* [2026-07-30] 표지 다음에 빈 쪽이 하나 더 생기던 문제.
     원인: 표지 높이(min-height)를 A4 인쇄 가능 높이보다 크게 잡아 두고
     그 뒤에 다시 쪽을 끊었다. 표지가 이미 한 쪽을 넘겨버린 뒤 또 끊으니 빈 쪽이 남는다.
     여백(@page margin 15mm×2)을 뺀 실제 인쇄 높이는 267mm이므로 그보다 넉넉히 작게 잡는다.
     ※ 이 값을 다시 키우면 빈 쪽이 되살아난다. */
  .print-only-cover:not(.print-upsell) {
    display: flex !important; flex-direction: column;
    align-items: center !important;          /* 가로 가운데 — 네 리포트 공통 */
    text-align: center !important;
    /* [2026-08-01 수정] 표지가 세로 가운데가 아니었다.
       PDF 를 그림으로 떠서 보니 제목이 **위쪽 39% 지점**에 있고 아래가 비었다.

       [왜] 표지 상자를 230mm 로 잡았는데, 1쪽은 `@page :first { margin: 0 }` 이라
       실제 종이 높이가 **297mm** 다. 230mm 안에서만 가운데를 맞추니
       종이 기준으로는 115/297 = 38.7% 지점에 놓인다. 화면에서 잰 값과 정확히 같다.
       → 상자를 종이 높이에 맞춘다. 그래야 진짜 한가운데에 온다.
       ※ 여백이 0인 것은 1쪽뿐이다. 이 값을 2쪽(.print-upsell)에 쓰면 넘쳐서
         빈 쪽이 생긴다 — 2쪽은 따로 200mm 로 두었다(9-5 아래). */
    /* [2026-08-01] 255mm 는 인쇄 가능 높이와 **정확히 같아서** 반올림 오차 1px 만
       넘쳐도 다음 쪽으로 새고, 그 자리가 빈 쪽이 된다(택일 2쪽에서 실제로 났다).
       3mm 를 덜어 여유를 둔다. 가운데는 0.5% 만 움직여 눈에 띄지 않는다. */
    /* [2026-08-01] min-height 를 height 로 바꿨다.
       로컬에서는 표지가 정확히 가운데인데 **운영에서 뽑은 PDF 는 40mm 위로** 몰렸다.
       같은 CSS 인데 결과가 달랐다 — min-height 는 "최소"일 뿐이라 상황에 따라
       상자가 그보다 작게 잡힐 수 있고, 그러면 그 작은 상자 안에서 가운데를 맞춘다.
       종이 기준으로는 위로 올라간다. 높이를 못 박아 흔들릴 여지를 없앤다. */
    /* [2026-08-01 최종] 표지 상자에 **높이를 주지 않는다.**
       [왜] 252mm 는 인쇄 가능 높이에 아슬아슬해서, 조금만 넘쳐도 브라우저의
       쪽 나눔이 개입한다. 그러면 상자가 통째로 밀리거나 위가 잘려
       글 위치가 예측을 벗어난다. 실제로 padding-top 을 27mm **늘렸더니**
       글이 36mm **올라가는** 거꾸로 된 일이 났다(실측).
       상자를 내용만큼만 두면 한 쪽에 여유롭게 들어가 그런 일이 없다.
       세로 위치는 아래 cover-mid 의 padding-top 하나로만 정한다. */
    height: auto; min-height: 0; max-height: none;
    padding: 0 10mm !important; margin: 0 !important;
    overflow: hidden;
    page-break-after: always; break-after: page;
    page-break-inside: avoid; break-inside: avoid;
  }
  /* 세로 가운데 — 모든 표지 공통. cover-mid·cover-top 어느 쪽이 붙어 있어도 같다. */
  /* [2026-08-01 재수정] 가운데 맞춤을 flex 에 맡기지 않는다.
     [무엇이 있었나] 로컬에서 뽑으면 표지가 정확히 가운데인데 **운영에서 뽑은 PDF 는
     40mm 위**였다. CSS 는 같았다. min-height 를 height 로 못 박아도 그대로였다.
     상자에 테두리를 넣어 로컬·운영 PDF 를 나란히 재서 확인한 사실이다.

     flex 의 가운데는 **상자 높이**를 기준으로 한다. 그 상자가 인쇄 시점에
     어떻게 잡히는지는 우리가 완전히 통제하지 못한다(브라우저의 쪽 나눔이 개입한다).
     그래서 기준을 상자가 아니라 **종이**로 옮긴다.

       인쇄 가능 높이 255mm (297 − 21 − 21) · 글 덩어리 약 36mm
       → 위 여백 (255 − 36) / 2 ≈ 109mm

     이러면 상자가 어떻게 잡히든 글은 언제나 종이 한가운데에 온다.
     ※ 표지 글이 두 줄이 되면 몇 mm 내려가지만 눈에 띄지 않는다.
       완전히 맞추려 flex 로 되돌리지 말 것 — 위 사고가 그대로 되살아난다. */
  .print-only-cover.cover-mid,
  .print-only-cover.cover-top {
    display: block !important;   /* 가운데는 padding 으로만 정한다 */
    /* [2026-08-01] 109mm 로 잡았더니 실측이 27mm 위였다(tools/pdf-measure.js).
       계산으로 낸 값(인쇄 가능 높이 255 − 글 36, 반으로 나눔)이 실제와 달랐다 —
       PDF 로 나갈 때 쪽 여백이 계산대로 잡히지 않는다. **재서 맞춘 값**을 쓴다.
       고칠 일이 있으면 계산하지 말고 다시 재라:
         node tools/pdf-measure.js "<PDF>" 1   → 「차이 ?mm」 만큼 여기에 더한다 */
    padding-top: 89mm !important;   /* 실측으로 맞춘 값 — 계산으로 바꾸지 말 것 */
  }

  .print-only-cover h1 {
    font-family: 'Noto Serif KR', serif; font-size: 32px; font-weight: 900;
    letter-spacing: 1px; color: #14171d !important; margin: 0 0 16px !important;
  }
  .print-only-cover p { margin: 0 !important; }
  .print-only-cover .cover-sub { font-size: 15px; color: #4a5060 !important; letter-spacing: 1px; margin: 0 0 26px !important; }
  .print-only-cover .cover-org {
    font-family: 'Noto Serif KR', serif; font-size: 16px; font-weight: 800;
    letter-spacing: 3px; color: #8a6522 !important;
  }

  /* ── 5. 서비스 소개(2쪽) — 네 리포트 모두 같은 자리, 같은 모양 ─────────── */
  /* [2026-08-01 지시] "이것도 세로를 가운데 맞춤하는 게 보기 좋지 않겠니? 미적으로"
     맞다. 지금은 위(26mm)에서 시작해 아래가 절반 넘게 비어 있었다.
     내용이 한 쪽의 절반밖에 안 되는데 위로 몰아 두면 잘리다 만 것처럼 보인다.
     1쪽 표지와 같은 방식으로 세로 가운데에 놓는다 — 두 쪽의 결이 맞는다.
     ※ min-height 는 표지와 같은 230mm. 이 값을 키우면 뒤에 빈 쪽이 생긴다
       (실제로 났던 사고 — 위 4번 주석 참고). 가로는 왼쪽 정렬 그대로 둔다. */
  .print-upsell {
    display: flex !important; flex-direction: column;
    justify-content: center !important; align-items: stretch !important;
    text-align: left !important;
    /* [2026-08-01 재수정] 표지와 **같은 값**을 쓴다.
       위·아래 여백을 21mm 로 같게 만들었으므로 인쇄 가능 높이는 255mm 로 확정이다.
       상자를 딱 255mm 로 두면 넘치지도 않고(빈 쪽 안 생김) 세로 가운데도 정확하다.
       전에 200mm 로 낮춰 두었더니 255mm 자리 안에서 위로 몰려 표지와 결이 달랐다.
       ※ 표지와 이 값을 따로 두지 말 것 — 두 쪽이 달라 보이는 원인이 된다. */
    /* 표지와 같은 값 — 위 주석 참고(255mm 는 딱 맞아서 넘친다) */
    /* 표지와 같은 이유로 height 를 못 박는다(위 4번 주석 참고) */
    height: 252mm !important; min-height: 252mm !important; max-height: 252mm !important;
    padding: 0 10mm !important; margin: 0 !important;
    overflow: hidden;
    page-break-after: always; break-after: page;
  }
  .print-upsell h2 { color: #14171d !important; font-family: 'Noto Serif KR', serif; font-size: 24px; line-height: 1.4; margin: 0 0 14px !important; }
  .print-upsell .upsell-desc,
  .print-upsell .upsell-item span { color: #4a5060 !important; }
  .print-upsell .upsell-desc { font-size: 13px; line-height: 1.8; margin: 0 0 28px !important; }
  .print-upsell .upsell-eyebrow,
  .print-upsell .upsell-item b,
  .print-upsell .upsell-cta { color: #8a6522 !important; }
  /* ★ [2026-08-03] 2쪽에 값이 없어 「그래서 얼마인가」에 답하지 못했다.
     본문보다 조금 작게, 그러나 눈에 걸리게 — 값은 무엇을 살지 정하는 근거다. */
  .print-upsell .upsell-price {
    font-size: 12.5px !important; line-height: 1.8 !important;
    color: #3a352c !important; margin: 18px 0 6px !important;
  }
  .print-upsell .upsell-price b { color: #1d3a6b !important; }
  .print-upsell .upsell-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 30px !important; }
  .print-upsell .upsell-item { border: 1px solid #c9c4b8 !important; border-radius: 10px; padding: 14px 16px; }

  /* 금색 강조는 종이에서 읽히는 짙은 금색으로 통일 */
  .ai-card-title, .ai-action-cell .lbl, .ai-domain-cell .val,
  .ai-meta-note, .cover-org { color: #6b6250 !important; }
  .ai-final-card, .daily-guide-text { color: #1a1a1a !important; }
  .daily-guide-collapse.collapsed { display: block !important; }  /* 접힘과 무관하게 인쇄엔 펼쳐 나간다 */

  /* ── 5. 등급 배지 — 화면에서는 어두운 배경 + 밝은 글자였다. 뒤집는다 ──── */
  .grade-good { background-color: #e7f4ec !important; color: #14532d !important; border-color: #9ec9b0 !important; }
  .grade-mid  { background-color: #eeeff1 !important; color: #33383f !important; border-color: #c2c6cd !important; }
  .grade-bad  { background-color: #fbeceb !important; color: #7f1d1d !important; border-color: #dda9a5 !important; }

  /* ── 6. 색 자체가 정보인 요소는 배경을 되살린다 ─────────────────────────
     왕쇠 막대는 길이와 색으로 세기를 읽는다. 지우면 정보가 사라진다. */
  .wang-soe-bar-track { background-color: #e4e2dc !important; border-color: #c9c4b8 !important; }
  .wang-soe-blue  { background-image: linear-gradient(90deg,#38bdf8,#6366f1) !important; }
  .wang-soe-green { background-image: linear-gradient(90deg,#4ade80,#16a34a) !important; }
  .wang-soe-amber { background-image: linear-gradient(90deg,#fbbf24,#f59e0b) !important; }
  .wang-soe-red   { background-image: linear-gradient(90deg,#f87171,#dc2626) !important; }
  .wang-soe-bar-fill { color: #0a0a0a !important; }
  #qnaSection .qna-num { background-color: #c9a227 !important; color: #1a1712 !important; }

  /* ── 7. 화면 위에 떠 있는 것들은 종이에서 빈 덩어리로만 남는다 ────────── */
  #expertGateModal, .modal, .gate-blur-wrap, .ai-spinner, #langSwitcher,
  [style*="position:fixed"], [style*="position: fixed"] { display: none !important; }

  /* 워터마크는 저작권 표시라 예외. 종이에서 보이는 농도로 낮춰 둔다. */
  .watermark-layer { display: grid !important; opacity: .055 !important; }
  .watermark-layer span { color: #2b303a !important; }

  /* 버튼은 종이에서 누를 수 없다. 등급 배지처럼 정보를 담은 것만 남긴다.
     (사주 화면에만 있던 규칙인데, 궁합에도 인쇄에 남는 버튼이 있어 공통으로 올린다) */
  button:not(.grade-good):not(.grade-mid):not(.grade-bad),
  input[type="checkbox"], input[type="date"] { display: none !important; }

  /* ── 7-2. 쪽 경계에서 카드가 잘리지 않게 ────────────────────────────────
     [2026-07-30 지시] "잘렸다는 느낌을 주면 진짜 저질의 상품이다."
     동시에 "텅 빈 말도 안 되는 공백을 만들면 안 된다."
     두 요구는 서로 밀기 때문에 크기로 나눈다.

       · 한 쪽에 넉넉히 들어가는 작은 카드(대략 A4 절반 이하)
         → 절대 쪼개지 않는다. 다음 쪽으로 통째로 넘긴다.
           넘겨도 남는 공백이 반 쪽을 넘지 않으므로 어색하지 않다.

       · 한 쪽의 절반을 넘는 큰 덩어리(대운 해설·용어 부록·대운 표 등)
         → 쪼개지 않으면 앞 쪽이 통째로 비어버린다. 그래서 자연스럽게 이어가되
           제목만 홀로 남거나 마지막 한 줄만 떨어지는 것을 막는다.

     ※ 이 균형을 바꿀 때는 반드시 tools/render-print.js로 다시 뽑아
       "쪽 경계에서 잘리는 카드"와 빈 공백을 함께 확인할 것.
     ───────────────────────────────────────────────────────────────────── */
  /* .expert-block — 카드 하나가 A4보다 클 때 "어디서 끊을지"를 정해 주는 단위.
     [2026-07-31] 성명학 전문가 모드에서 총점 표 한가운데가 갈려, 다음 쪽에
     「합계 8」 한 줄만 남는 조각 페이지가 나왔다. 덩어리째 넘기게 한다. */
  .expert-block,
  .easy-card, .qna-card, .daeun-card, .ai-card, .ai-action-cell, .ai-domain-cell,
  .myeongban-card, .term-block, .rank-card, .day-cell, .sewoon-year-card,
  .upsell-item, tr, thead, .daeun-line-chart, #daeunLineChartWrap {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* ⛔⛔ [2026-08-08 · PDF 를 열어 눈으로 찾음] **크롬은 인쇄에서 격자(grid) 칸을
       `break-inside: avoid` 를 무시하고 자른다.**
     ─────────────────────────────────────────────────────────────────────────
     사주 감정서 3→4쪽에서 「⚠ 주의점」 카드가 갈렸다. 4쪽 머리에 **제목도 없는 세 줄**이
     왼쪽을 텅 비운 채 떠 있었다 — 손님이 보면 「무슨 말이 하다 만 것」이다.
     ⚠ `.ai-card` 에는 위에서 `avoid` 를 이미 걸어 두었다. **걸어 뒀는데 안 들었다.**
       칸이 격자 안에 있으면 크롬이 그 규칙을 안 지킨다(격자 조각내기 미구현).
     → **격자 통째로** 넘기게 한다. 칸이 아니라 **담은 그릇**에 걸어야 듣는다.
     ⚠ 그릇이 한 쪽보다 크면 어차피 갈린다 — 그때는 갈리는 게 맞다. 여기 것들은 작다. */
  .grid:has(> .ai-card),
  .grid:has(> .easy-card),
  .grid:has(> .rank-card) {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* 큰 덩어리는 이어가되, 보기 흉하게 끊기는 것만 막는다. */
  .panel, section, table, .detail-card {
    break-inside: auto; page-break-inside: auto;
    orphans: 3; widows: 3;          /* 한두 줄만 떨어져 남는 것을 막는다 */
  }
  /* ⚠ [2026-08-06] 카드 **안쪽 첫 줄 제목**은 아래 목록에 없어 그대로 떨어졌다.
     사주 감정서 7쪽 「■ 이 해의 핵심 흐름」이 그랬다.
     ⛔ 카드 통째로 `avoid` 를 걸지 않는다 — 이 칸은 글 길이가 들쭉날쭉해서
       통째로 걸면 앞 쪽이 절반 넘게 빈다(2026-08-01 「80% 공백」 지적이 그것이다).
     → **제목만** 아래 본문에 붙들어 둔다. 쪽은 갈려도 제목이 혼자 남지 않는다. */
  .easy-card > div:first-child,
  .qna-card > div:first-child,
  .ai-card > div:first-child {
    break-after: avoid !important; page-break-after: avoid !important;
    break-inside: avoid !important; page-break-inside: avoid !important;
  }

  /* 제목이 본문과 떨어져 혼자 쪽 끝에 남는 일을 막는다. */
  h1, h2, h3, h4, .section-title, .term-block-title, .card-title, .page-title-compact {
    break-after: avoid !important; page-break-after: avoid !important;
    break-inside: avoid !important; page-break-inside: avoid !important;
  }

  /* ── 8. 잠긴 유료 구간은 인쇄물에 절대 나가면 안 된다 ─────────────────── */
  #expertSection.is-locked { display: none !important; }
  .no-print { display: none !important; }
  /* ⛔⛔ [2026-08-04] **「불러오는 중…」이 감정서에 찍혔다.**
     심리검사 종합 리포트 3쪽 맨 위에 로딩 문구가 그대로 나갔고, 그 자리만큼 여백도 생겼다.
     화면 전용인데 `no-print` 가 없었다. 고객이 돈을 내고 받는 물건이다.
     ⚠ 화면마다 붙이지 않는다 — 반드시 한둘이 빠진다. **공통 클래스로 한 곳에서** 막는다.
     ⚠ 새 화면에서 로딩 표시를 만들면 `loading-dot` 을 쓴다. 새 이름을 만들면 여기서 안 걸린다. */
  .loading-dot, [data-loading], .skeleton,
  /* ⚠ [2026-08-04] 클래스만 막았더니 **32번에 하나 남았다.** 심리검사는 `id="loadingMsg"` 를 쓴다.
     화면마다 이름이 다르므로 **id·클래스를 함께** 잡는다. 새 이름이 또 나오면 여기 더한다. */
  #loadingMsg, #dailyLoading, #monthlyLoading, [id$="Loading"], [id$="loadingMsg"],
  .ai-spinner, .spinner { display: none !important; }
  /* ★ [2026-08-04] `no-print` 의 짝 — **종이에만** 나오는 안내.
     화면 전용 단추를 인쇄에서 감추면 그 자리가 통째로 사라져, 손에 든 사람이
     「어디로 가면 되는지」를 알 길이 없어진다. 단추 대신 **주소를 글자로** 남긴다.
     ⚠ 화면에서는 `style="display:none"` 으로 숨어 있고 여기서만 되살아난다. */
  .print-only-note { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. 감수 지적 반영 (2026-07-31) — 이별코칭 3~5쪽에서 드러난 것들
   ─────────────────────────────────────────────────────────────────────
   지적
     · 5쪽: UI가 다른 리포트와 전혀 다르다. 상단 박스의 한자가 다음 쪽으로 넘친다.
            글자 크기는 두고 **행간을 조여** 이상하게 넘어가지 않게 할 것.
     · 4쪽: 첫 줄이 종이 위에 딱 붙는다. 여백을 줄 것.
     · 3쪽: 좌우 여백을 더 줄 것.
   ═══════════════════════════════════════════════════════════════════════ */
@media print {

  /* ── 9-1. 종이 여백 — 지금까지 브라우저 기본값에 맡기고 있었다 ─────────
     좌우를 넉넉히 주어 글이 종이 끝에 붙지 않게 한다. 위는 첫 줄이 붙는 것을 막는다. */
  @page {
    size: A4;
    margin: 18mm 20mm 16mm 20mm;   /* 위 오른쪽 아래 왼쪽 */
  }
  /* 표지·업셀은 꽉 차야 하므로 여백을 따로 준다 */
  /* [2026-08-01] @page :first 규칙 제거 — Chrome 이 무시한다(아래 9-11 주석 참고) */

  /* 각 쪽 첫 덩어리가 종이 위에 딱 붙는 것을 막는다 —
     페이지가 넘어간 자리의 첫 줄에도 숨 쉴 틈을 준다. */
  .panel, section, .detail-card, .term-block {
    padding-top: 2mm;
  }

  /* ── 9-2. 사이트 헤더·푸터는 감정서에 나가면 안 된다 ───────────────────
     [왜] 이별코칭 5쪽 끝에 「회사소개 / 서비스 / 고객지원 / 이용약관…」이
     통째로 찍혀 나갔다. 감정서에 사이트 메뉴가 들어갈 이유가 없다.
     이 규칙이 아예 없어서 **모든 리포트**가 같은 상태였다. */
  #klmHeader, #siteHeader,
  #klmFooter, #siteFooter,
  .kf-grid, .kf-links, .kf-about,
  nav.klm-cat, .klm-drop, .klm-burger {
    display: none !important;
  }

  /* ── 9-3. 부록(전문 용어 안내) — 다른 리포트와 같은 모양으로 ───────────
     글자 크기는 건드리지 않는다(지시). 행간과 칸만 조인다. */
  /* [2026-08-01 수정] 부록에서 "무조건 새 쪽" 규칙을 뺐다.

     [왜] 본문이 쪽 중간에서 끝나면 그 아래가 통째로 버려졌다. 실제로
     인텔리전스 학습 성향은 4쪽에서 본문이 끝나고 **5쪽이 백지**, 부록은 6쪽이었다.
     적성·진로도 6쪽이 백지였다. 부록은 낱말 뜻풀이 몇 줄짜리라 자기 쪽을
     따로 가질 만큼 크지도 않다.

     [대신] 위에 선을 긋고 간격을 벌려 "여기서부터 부록"이 눈으로 구분되게 한다.
     쪽을 강제로 끊지 않으니 버려지는 자리가 없다.
     ※ 다시 `break-before: page` 로 되돌리지 말 것 — 빈 쪽이 되살아난다. */
  #termAppendix, .term-appendix {
    break-before: auto; page-break-before: auto;
    break-inside: avoid-page;
    margin-top: 8mm;
    padding-top: 5mm;
    border-top: 1px solid #c9c4b8;
  }
  .term-block { break-inside: avoid !important; page-break-inside: avoid !important; }
  .term-table { width: 100%; border-collapse: collapse; }
  .term-table tr { break-inside: avoid !important; page-break-inside: avoid !important; }
  .term-table td {
    line-height: 1.45;              /* 행간만 조인다 — 크기는 그대로 */
    padding: 1.5mm 2mm;
    vertical-align: top;
  }
  /* 용어와 뜻풀이가 붙어 보이던 것 — 칸을 나눠 읽히게 한다 */
  .term-table .term-name { white-space: nowrap; padding-right: 4mm; font-weight: 700; }
  .term-table .term-desc { word-break: keep-all; }

  /* ── 9-4. 행간을 조여 어정쩡한 넘김을 줄인다 ──────────────────────────
     넘어가는 것 자체는 괜찮지만, 두세 줄만 넘어가 보기 흉한 것을 막는다.
     **글자 크기는 그대로 두고 행간만** 손댄다(지시). */
  p, li, td, dd { line-height: 1.55; }
  .panel p, .detail-card p, section p { margin-bottom: 2.5mm; }
  h2, h3, h4 { margin-top: 4mm; margin-bottom: 2mm; line-height: 1.3; }

  /* 한두 줄만 떨어져 넘어가는 것을 더 강하게 막는다 */
  p, li { orphans: 3; widows: 3; }
}

/* ── 9-5. 2쪽(서비스 소개) 카드 글자가 너무 크다 (2026-07-31 지적) ────────
   카드 안 글자 크기를 따로 정하지 않아 기본값으로 크게 나갔다.
   제목·설명 크기를 정해 카드가 빽빽해 보이지 않게 한다. */
@media print {
  .print-upsell .upsell-item {
    padding: 12px 14px;
    line-height: 1.5;
  }
  .print-upsell .upsell-item b {
    display: block;
    font-size: 12.5px;      /* 카드 제목 */
    font-weight: 700;
    margin-bottom: 3px;
    line-height: 1.35;
  }
  .print-upsell .upsell-item span {
    display: block;
    font-size: 11px;        /* 카드 설명 */
    line-height: 1.6;
    word-break: keep-all;   /* 한글이 어중간하게 잘리지 않게 */
  }
  .print-upsell .upsell-grid { gap: 11px; }
}

/* ── 9-6. AI 코칭 대화 — 채팅 화면은 인쇄 규격이 없었다 (2026-07-31) ────────
   [증상] 32번 PDF가 2쪽인데 그중 1쪽이 빈 쪽이었다.
   [원인] 채팅은 화면에서 스크롤로 보는 구조다 — #chatLog가 flex로 높이를 잡고
          overflow-y:auto로 잘려 있어, 인쇄하면 보이는 만큼만 나오고 나머지가
          빈 쪽으로 남는다. 대화가 길수록 더 많이 잘린다. */
@media print {
  /* 스크롤 상자를 풀어 대화 전체가 이어 나오게 한다 */
  #chatLog {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    display: block !important;
    padding: 0 !important;
  }
  /* 채팅 컨테이너가 화면 높이(100vh)에 묶여 있으면 뒤가 통째로 잘린다 */
  body, .wrap, .chat-wrap, main {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* 말풍선이 쪽 경계에서 반토막 나지 않게 */
  #chatLog .msg { break-inside: avoid !important; page-break-inside: avoid !important; margin-bottom: 4mm; }

  /* 입력창·초기화 버튼은 종이에 나갈 것이 아니다 */
  #inputRow, #chatInput, #sendBtn, #clearBtn, .disclaim, #gateBox { display: none !important; }
}

/* ── 9-7. 표지 글자 규격 통일 (2026-07-31 지적: "UI 디자인이 전혀 일치 안 함") ──
   [무엇이 달랐나] 표지 틀(가운데 정렬·쪽나눔)은 이미 여기서 통일돼 있었는데
   **글자 크기와 색은 각 화면이 제각각** 들고 있었다.
     · 사주   h1 36px / 색 #14171d (짙은색 — 종이에서 읽힘)
     · 궁합   h1 30px / 색 #f7f6f2 (**흰색 — 밝은 종이에서 안 읽힌다**)
   표지 제목은 화면마다 내용이 다르지만(고객 이름·두 사람 이름) **생김새는 같아야 한다.**
   여기서 한 번에 정하고, 각 화면 값은 덮어쓴다. 표지를 고칠 곳은 이제 이 파일이다. */
@media print {
  .print-only-cover:not(.print-upsell) h1 {
    font-family: 'Noto Serif KR', serif !important;
    font-size: 33px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    letter-spacing: .5px !important;
    color: #14171d !important;      /* 밝은 종이에 짙은 글자 */
    margin: 0 0 16px !important;
    word-break: keep-all;
  }
  .print-only-cover:not(.print-upsell) .cover-sub {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: #4a5060 !important;
    margin: 0 0 26px !important;
    word-break: keep-all;
  }
  .print-only-cover:not(.print-upsell) .cover-org {
    font-family: 'Noto Serif KR', serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: #6b6250 !important;
    margin: 0 !important;
  }
}

/* ── 9-8. 택일 표지가 두 장이던 것 (2026-08-01) ──────────────────────────────
   [증상] 택일 PDF가 1쪽 「홍길동 님의 이사 길일 명적서」, 2쪽 「택일(擇日) 감정서」로
          표지가 두 장이었다. 렌더 검사에서 계속 "빈쪽 1"로 잡히던 것의 정체다.
   [원인] 2026-07-30에 표지(.print-only-cover)를 새로 붙이면서, 원래 화면에 있던
          개인화 제목 블록(#coverTitle)을 치우지 않았다. 둘 다 인쇄에 나간 것이다.
   [조치] 인쇄에서는 화면용 제목 블록을 감춘다. 고객 이름이 든 제목은
          표지(#printCoverTitle)가 이미 보여준다 — 같은 말을 두 번 할 이유가 없다.
   ※ 화면에서는 그대로 보인다. 인쇄에서만 감춘다. */
@media print {
  #coverTitle { display: none !important; }
}

/* ── 9-9. 화면 안내문·목록 카드가 감정서에 섞여 나가던 것 (2026-08-01) ─────────
   [증상] 24번 이별 코칭 3쪽 맨 위에 「COACHING / 코칭 — 관계를 더 잘 이끌어가는 법 /
          이미 하신 감명 결과를 판정하지 않습니다… / NEW · 대화형 /
          AI 라이프 코치와 편하게 대화하기 →」가 통째로 찍혀 나갔다.
   [원인] 코칭·인텔리전스처럼 **한 화면이 목록과 리포트를 같이 들고 있는 구조**에서,
          목록 쪽(소개문·홍보 배너·엔진 카드)을 인쇄에서 치우는 규칙이 없었다.
          9-2에서 헤더·푸터만 막았지 화면 본문의 안내문은 그대로 남아 있었다.
          사장님이 「전혀 UI 디자인이 일치 안 함」이라고 하신 것의 실체가 이것이다.
   [조치] 감정서는 표지 → 상품안내 → 본문으로만 이뤄져야 한다.
          화면에서만 쓰는 것은 `no-print` 를 붙이고, 여기서 한 번에 감춘다.
   ※ 새 화면을 만들 때 화면 전용 요소에는 class="no-print" 를 붙인다. */
@media print {
  .no-print,
  .hero,                    /* 화면 상단 소개문 (라벨·제목·설명) */
  #coachGrid,               /* 코칭 6종 고르는 카드 목록 */
  #loadingBox, #errBox,     /* 진행중·오류 안내 */
  .engine-grid, #engineGrid {
    display: none !important;
  }
}

/* ── 9-10. 대운 에너지 흐름 그래프 — 종이에서 읽히게 (2026-08-01 신설) ────────
   [주의] 이 화면들은 인라인 색을 그대로 박아 쓴다. 화면 테마 색(#c9a84c 2.06,
   #9aa0ac 2.37)은 밝은 종이에서 명암비가 3 미만이라 **안 읽힌다.**
   `tools/render-reports.js` 가 매번 이걸 잡아낸다 — 여기서 미리 덮어쓴다. */
@media print {
  /* ⚠ [2026-08-03] 전에는 한 절 전체에 `break-inside: avoid` 를 걸었다.
     그때는 그래프가 한 장뿐이라 그럭저럭 넘어갔지만, **재 보니 쪽 높이의 48%** 였고
     2026-08-03 지시로 그래프가 **3종**이 되면서 한 쪽에 둘이 못 들어간다.
     그러면 남은 자리에 안 들어갈 때 통째로 다음 쪽으로 튀어 **앞쪽이 거의 백지**가 된다
     — 8/1 에 지적받은 그것이다("또 한 페이지의 80%를 공백으로 만들 거지? 안 된다").
     → 절은 **흐르게** 두고, **그림 상자 하나만** 쪼개지지 않게 한다.
       그림은 두 쪽에 걸치면 아예 못 읽으므로 이것만은 통째로 움직여야 한다. */
  .daeun-energy-section { break-inside: auto !important; page-break-inside: auto !important; }
  .daeun-energy-section > div { break-inside: avoid-page; page-break-inside: avoid; }
  /* ⚠ [2026-08-03] 제목(①격국론…)만 쪽 끝에 남고 그림이 다음 쪽으로 넘어가
     **앞쪽 아래 40% 가 비었다**(감수용 PDF 5쪽 실측).
     제목과 그림은 붙여 넘긴다 — 제목만 남으면 그 쪽은 버려지는 것과 같다. */
  .daeun-energy-section h4 { break-after: avoid-page !important; page-break-after: avoid !important; }
  /* 「대운(大運) 흐름」 안내문도 그림과 떨어지면 홀로 남는다 */
  .report-evidence h4 + p { break-after: avoid-page; page-break-after: avoid; }
  /* ⛔ [2026-08-05] 그런데 위 규칙이 **절 머리 안내문까지** 붙잡아
     「대운 흐름」 제목 + 안내문 + 첫 그래프가 **한 덩어리로 다음 쪽에 튀었다.**
     그 바람에 명반·판정요약이 있는 앞쪽 **아래 40%가 비었다**(실측, 부모코칭 3쪽).
     절 머리 안내문(「세 이론은 서로 다른 것을 묻습니다…」)은 **어느 한 그래프의 설명이
     아니라 세 장 전체의 읽는 법**이다. 그림에 붙어 다닐 이유가 없다 → 흐르게 둔다.
     ⚠ 그래프별 해설은 `> div` 안에 있어 이 규칙에 안 걸린다. 거기는 계속 붙어 다닌다. */
  .daeun-energy-section > p { break-after: auto !important; page-break-after: auto !important; }
  .daeun-energy-section h4 { color: #6b5312 !important; font-size: 13px !important; }
  .daeun-energy-section p  { color: #3d4250 !important; font-size: 11px !important; line-height: 1.65 !important; }
  .daeun-energy-section b  { color: #6b5312 !important; }
  .daeun-energy-section > div { background: #fff !important; border-color: #d8cfae !important; }

  /* ── 근거 블록(명반 + 판정 요약 + 그래프 3종) — 2026-08-03 지시로 신설 ──
     이 절은 **키가 아주 크다.** 통째로 묶으면 반드시 앞 쪽을 버린다. 흐르게 둔다.
     대신 **명반 4궁만은 쪼개지지 않게** 한다 — 두 쪽에 걸치면 명식을 읽을 수 없다. */
  /* ★ [2026-08-03] 판정 요약 여덟 줄을 세로로 쌓았더니 **쪽 아래 절반이 비었다.**
     그러면 그래프가 통째로 다음 쪽으로 밀려 종이가 한 장 더 든다.
     → 종이에서는 **두 칸**으로 나눈다(세로가 절반이 된다).
     ⚠ 화면 쪽 규칙(`@media (min-width:560px)`)은 인쇄에서 종이 폭이 좁게 잡히면
       안 먹는다 — 그래서 여기 따로 둔다. 한쪽만 고치면 종이에서만 한 줄로 남는다. */
  .report-evidence .ev-summary { display: grid !important; grid-template-columns: 1fr 1fr !important;
    column-gap: 8mm !important; }
  .report-evidence .ev-summary > p { grid-column: 1 / -1 !important; }

  .report-evidence { break-inside: auto !important; page-break-inside: auto !important; }
  .report-evidence .myeongban-grid { break-inside: avoid-page !important; page-break-inside: avoid !important; }
  .report-evidence h3 { color: #1d3a6b !important; font-size: 14px !important; }
  .report-evidence h4 { color: #6b5312 !important; font-size: 12.5px !important; }
  .report-evidence p  { color: #3d4250 !important; }
  .report-evidence b  { color: #6b5312 !important; }
  /* 판정 요약의 칸 구분선 — 화면용 반투명 금색은 종이에서 안 보인다 */
  .report-evidence [style*="border-bottom"] { border-bottom-color: #ddd6c2 !important; }

  /* ── 백년지도(국가 통계) — 2026-08-08 ────────────────────────────────────
     화면은 어두운 바탕에 밝은 글씨다. 종이에 그대로 내면 **검은 상자**가 찍힌다.
     ⛔ 절 전체에 `avoid` 를 걸지 않는다 — 계열이 셋이면 한 쪽을 넘긴다(8/3 에 겪은 그것).
       **카드 한 장씩만** 안 쪼개지게 한다. */
  .report-100yearmap { break-inside: auto !important; page-break-inside: auto !important; }
  .report-100yearmap .hym-card {
    background: #fbfaf6 !important; border: 1px solid #ddd6c2 !important;
    break-inside: avoid-page !important; page-break-inside: avoid !important;
  }
  /* ⛔ [2026-08-08 · 감수용 PDF 를 눈으로 보고 고침] 제목이 쪽 맨 아래 혼자 남았다.
     자녀진로코칭 6쪽 — 「이 방향은 실제로 어떤가」 제목과 안내문만 남고 **아래 절반이 텅 비고**,
     표는 7쪽으로 넘어갔다. 손님이 보면 「제목만 있고 내용이 없는 쪽」이다.
     ⚠ 제목에만 `break-after: avoid` 를 걸면 **바로 다음 것(안내문)까지만** 붙는다.
       안내문에도 걸어야 **첫 카드까지** 딸려 온다. 셋이 한 덩어리여야 뜻이 산다. */
  .report-100yearmap h4 { color: #6b5312 !important; font-size: 12.5px !important;
    break-after: avoid-page !important; page-break-after: avoid !important; }
  .report-100yearmap h4 + p {
    break-after: avoid-page !important; page-break-after: avoid !important;
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
  .report-100yearmap p, .report-100yearmap td { color: #3d4250 !important; }
  .report-100yearmap b { color: #6b5312 !important; }
  /* ⚠ 인라인으로 밝은 회색을 준 글자들 — 종이에서는 거의 안 보인다. 눌러서 진하게. */
  .report-100yearmap [style*="color:#9aa0ac"],
  .report-100yearmap [style*="color:#7c8290"] { color: #5a6070 !important; }
  .report-100yearmap [style*="color:#e6c86a"] { color: #6b5312 !important; }
  .report-100yearmap [style*="color:#dfe3ea"] { color: #1d2330 !important; }
}

/* ── 9-11. 카드가 다음 쪽으로 넘어갈 때 종이 맨 위에 붙던 것 (2026-08-01 지적) ──
   [지적] "같은 템플릿 카드가 다음 페이지에 넘어갈 때 바로 페이지 상단부터 시작하지 말고
          여백을 만들어. 디자인이 자꾸 이상해지는 것 좀 막아라."
   [무엇이 문제였나]
     ① 위 여백이 18mm로 빠듯했다. 카드가 밀려 넘어가면 종이 위쪽 선에 딱 붙어 시작해,
        앞 쪽과 생김새가 달라 보였다.
     ② 9-1의 `padding-top: 2mm`는 너무 얇아 눈에 띄지 않았다.
     ③ **카드가 쪽 경계에서 반토막**나는 것을 막는 규칙이 카드 종류마다 빠져 있었다.
        반쯤 잘린 카드가 다음 쪽 맨 위에서 이어지니 더 어색했다.
   [조치] 위 여백을 24mm로 넓히고, 카드는 통째로 넘어가게 하며,
          제목이 쪽 끝에 혼자 남지 않게 한다. */
/* [2026-08-01 재수정] 위·아래 여백을 **같게** 만든다.

   [왜] 표지가 세로 가운데로 안 오는 것을 세 번 고쳤는데 계속 어긋났다.
   원인은 두 가지였다.
     ① `@page :first { margin: 0 }` — **Chrome 은 이 규칙을 무시한다.**
        그래서 "1쪽은 여백 0" 이라고 믿고 계산했는데 실제로는 여백이 있었다.
        화면에서 잰 값(위128mm=아래128mm)과 PDF 결과가 어긋난 이유가 이것이다.
     ② 위 24mm / 아래 18mm 로 **위아래가 달랐다.** 상자를 아무리 정확히
        가운데 맞춰도 종이 기준으로는 3mm 위로 올라간다.
   [조치] 위아래를 21mm 로 같게 하고, `:first` 예외를 없앤다.
   그러면 인쇄 가능 높이가 297 − 21 − 21 = **255mm** 로 확정되고,
   표지 상자를 255mm 로 두면 글 중심이 21 + 127.5 = 148.5mm — 정확히 50% 다.
   ※ `@page :first` 를 다시 넣지 말 것. Chrome 이 안 먹고 계산만 어긋난다. */
@page { margin: 21mm 20mm; }

@media print {
  /* 쪽이 바뀐 자리에서도 첫 덩어리가 숨 쉴 틈을 갖게 한다 */
  /* 여백은 "적당히" — 두껍게 주면 그만큼 아래가 밀려 빈 쪽이 생긴다(지적)

     ⚠ [2026-08-01] 표지와 2쪽은 **반드시 제외한다.** 둘 다 `section` 이라
     이 규칙에 걸리면 255mm + 3mm = 258mm 가 되어 인쇄 가능 높이(255mm)를 넘고,
     넘친 3mm 때문에 **뒤에 빈 쪽이 한 장 생긴다.** 실제로 궁합·택일에서 났다.
     표지·2쪽은 자기 여백을 스스로 갖고 있으므로 여기서 더할 필요도 없다. */
  .panel, section:not(.print-only-cover):not(.print-upsell),
  .detail-card, .term-block { padding-top: 3mm; }

  /* 카드는 통째로 움직인다 — 반토막 난 카드가 다음 쪽 위에 이어지는 것을 막는다.

     ⚠ [2026-08-01 지적] "이렇게 하면 또 한 페이지의 80%를 공백으로 만들 거지? 안 된다."
     맞는 지적이다. **큰 덩어리에는 절대 걸면 안 된다.** 키가 큰 블록에 걸면
     남은 자리에 안 들어갈 때 통째로 다음 쪽으로 튀고, 앞쪽이 거의 백지가 된다.
     그래서 여기 목록은 **작은 카드만** 남긴다.
     뺀 것: .panel · #nowContent · section — 화면 한 덩어리 전체라 키가 크다. */
  .card, .rcard, .detail-card, .upsell-item, .easy-card,
  .print-card, .r-card, .engine-card {
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
  }

  /* 제목만 쪽 끝에 혼자 남고 본문이 넘어가는 것을 막는다 */
  h1, h2, h3, h4 { break-after: avoid-page; page-break-after: avoid; }

  /* 표도 행 단위로 쪼개지지 않게 */
  table { break-inside: auto; }
  tr, thead { break-inside: avoid !important; page-break-inside: avoid !important; }
}

/* ── 9-12. 대운·세운 환경이 세로로 쌓여 6대 영역을 다음 쪽으로 밀던 것 ────────
   [지적 2026-08-01] "대운 환경과 세운 환경을 나란히 옆으로 놓으면 6대영역 템플릿을
   다음 페이지로 넘어가지 않게 할 수 있잖아. 줄 간격·템플릿 간격 조절하면 되잖아."

   [원인] 이 두 칸은 Tailwind의 `md:grid-cols-2` 로 되어 있다. `md:` 는 **화면 폭**에
   따라 켜지는 규칙인데, 인쇄는 폭이 좁게 잡혀 규칙이 꺼진다. 그래서 화면에서는
   나란히 보이던 두 칸이 **종이에서는 위아래로 쌓여** 세로를 두 배로 먹었고,
   그만큼 아래 6대 영역이 다음 쪽으로 밀려났다. 화면만 보고는 알 수 없는 차이다.

   [조치] 인쇄에서는 폭과 무관하게 두 칸으로 고정하고, 칸과 줄 간격을 조인다.
   그리고 「대운·세운 환경」과 바로 아래 「6대 영역」이 갈라지지 않게 묶는다. */
@media print {
  /* 화면 폭에 걸린 2단 규칙은 종이에서도 켠다 — 짧은 카드 두 칸은 나란히 두는 게 낫다 */
  .grid.md\:grid-cols-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; }

  /* ⛔⛔ [2026-08-04 지적] 3단은 **한 칸으로 편다.**
     전에는 종이에서도 3단을 강제로 켰다. A4 인쇄 폭(약 168mm)을 셋으로 나누면
     한 칸이 **55mm** 다 — 한글 문장이 **두세 낱말마다 끊긴다.**
     실제로 「지난해·올해·내년 세운」과 「길일·평일·흉일이란」이 그렇게 나갔다
     (사장님 사진: 한 줄에 「오행은 용신을」·「생조하여」처럼 토막나 있다).
     게다가 세로로 길어져 **쪽 경계에서 위아래로 쪼개진다.**
     → 종이에서는 한 칸으로 흐르게 둔다. 세로는 길어지지만 **읽을 수 있게** 된다.
     ⚠ 여기를 다시 `repeat(3, 1fr)` 로 되돌리지 말 것.
     ※ 날짜 입력칸(년/월/일)처럼 짧은 3단은 `md:` 가 아닌 `grid-cols-3` 이라 여기 안 걸린다. */
  .grid.md\:grid-cols-3 { display: block !important; }
  .grid.md\:grid-cols-3 > * { margin-bottom: 3mm; }

  /* 두 칸을 얇게 — 높이를 줄여야 아래 블록이 같은 쪽에 남는다 */
  .easy-card { padding: 7px 9px !important; border-radius: 8px !important; }
  .easy-card > div { line-height: 1.4 !important; margin-bottom: 1px !important; }
  .easy-card .font-serif { font-size: 15px !important; }

  /* 칸 사이 간격도 조인다 */
  .grid.gap-3 { gap: 7px !important; }
  .grid.gap-2 { gap: 5px !important; }

  /* 「대운·세운 환경」 다음에 바로 6대 영역이 오도록 붙여 둔다.
     ※ #nowContent 전체에 break-inside:avoid 를 걸지 않는다 — 키가 커서
       통째로 다음 쪽으로 튀면 앞쪽이 거의 백지가 된다(2026-08-01 지적). */
  #nowContent > .grid { margin-bottom: 8px !important; break-after: avoid-page; page-break-after: avoid; }
}

/* ── 9-13. 빈 껍데기가 쪽을 끊어 빈 쪽을 만들던 것 (2026-08-01) ──────────────
   [증상] 궁합 감정서 2쪽(상품 안내) 다음 3쪽이 통째로 비고, 본문은 4쪽부터 시작했다.
   [원인] 내용이 없는 자리(모드에 따라 안 쓰이는 섹션 등)에 `page-break-before: always`
          같은 강제 쪽넘김이 걸려 있으면, **내용이 없어도 쪽은 넘어간다.**
          결과가 백지 한 장이다. 화면에서는 높이가 0이라 아무도 눈치채지 못한다.
   [조치] 인쇄에서 알맹이가 없는 컨테이너는 아예 감춘다. 감추면 그 안의 쪽넘김도
          같이 사라진다. 특정 화면 한 곳만 고치지 않고 여기서 한 번에 막는다.
   ※ :empty 는 공백 문자만 있어도 해당되지 않으므로, 강제 쪽넘김이 걸린 자리는
     넘김 자체도 함께 풀어 준다(이중 안전장치). */
@media print {
  section:empty, div:empty, article:empty { display: none !important; }

  /* 알맹이 없이 공백만 남은 자리는 쪽을 끊지 않는다 */
  section:empty, div:empty,
  .hidden, [hidden], [style*="display:none"], [style*="display: none"] {
    break-before: auto !important; page-break-before: auto !important;
    break-after: auto !important;  page-break-after: auto !important;
  }
}

/* ── 9-14. 「이 리포트, 도움이 되셨나요?」 피드백 위젯이 인쇄에 나가던 것 ────────
   [증상] 인텔리전스 학습 성향 감정서 5쪽에 이 한 줄만 덩그러니 찍히고,
          부록은 6쪽에서 새로 시작했다. **한 쪽을 통째로 낭비**했다.
   [원인] 이 위젯은 화면에서 의견을 받는 도구다. 종이에 나갈 것이 아닌데
          인쇄에서 치우는 규칙이 없었다. 9-9와 같은 종류의 누락이다.
   [조치] 리포트가 나오는 모든 화면에서 한 번에 감춘다. 화면 전용 요소는
          class="no-print" 를 붙이는 것이 원칙이지만, 이 위젯은 header.js가
          공통으로 만들어 넣으므로 클래스 이름으로 잡는다. */
@media print {
  .kl-feedback-box, .feedback-box, .fb-q, .fb-thanks, .kl-fb-btn { display: none !important; }
}

/* ── 9-15. 쪽넘김을 **어디서 끊을지** 한 곳에서 정한다 (2026-08-01 전면 정리) ──
   [왜 다시 손댔나]
   빈 쪽을 고칠 때마다 다른 자리에서 되살아났다. 이유는 규칙이 세 곳에 흩어져
   서로를 무력화하고 있었기 때문이다.

     ① 이 파일(공통)          .print-upsell { page-break-after: always }
     ② 화면 HTML 의 <style>    사주·택일이 자기 규격을 따로 갖고 있었다 (지웠다)
     ③ 화면 HTML 의 인라인     style="page-break-after: always" 등이 태그마다 달랐다

   ③ 이 특히 나빴다. 인라인은 스타일시트를 이기므로, 공통 파일을 아무리 고쳐도
   화면마다 다르게 나왔다. 실제로 궁합 앞 업셀에는 break-after, 택일 뒤 업셀에는
   break-after:auto, 택일 앞 업셀에는 아무것도 없는 식으로 제각각이었다.

   [지금 규격 — 네 리포트가 모두 이 순서다]
     1쪽      .print-only-cover                표지        → 뒤에서 끊는다
     2쪽      .print-upsell.upsell-front       서비스 소개  → 뒤에서 끊는다(본문이 3쪽부터)
     3쪽~     본문
     마지막쪽 .print-upsell.upsell-back        더 깊이 보기 → **앞에서만** 끊는다

   두 업셀은 하는 일이 반대라서(하나는 뒤를 끊고 하나는 앞을 끊는다) 클래스를 나눴다.
   전에는 둘 다 `.print-upsell` 하나였고, :last-of-type 같은 위치 선택자로
   구분하려 했다 — 뒤 업셀이 부모의 마지막 자식이 아니면 안 걸려서 실패했다.

   **인라인 style 로 쪽넘김을 다시 넣지 말 것.** 여기서만 정한다. */
@media print {
  /* 앞 업셀(2쪽) — 표지가 이미 앞에서 끊었으므로 앞에서 또 끊으면 사이에 백지가 낀다 */
  .print-upsell.upsell-front {
    page-break-before: auto !important; break-before: auto !important;
    page-break-after: always !important; break-after: page !important;
  }
  /* 뒤 업셀(마지막 쪽) — 뒤에서 끊으면 문서 끝에 백지 한 장이 남는다 */
  .print-upsell.upsell-back {
    page-break-before: always !important; break-before: page !important;
    page-break-after: auto !important; break-after: auto !important;
  }
}

/* ── 9-16. 표지·업셀을 종이 밖으로 밀어내던 **바깥 여백** (2026-08-01) ─────────
   [어떻게 찾았나] `node tools/render-reports.js --probe` 로 인쇄 모드 좌표를 찍었다.
   머리로 추리하지 말고 재야 했다 — 범인이 표지 자신이 아니라 **조상**이었기 때문이다.

     택일  표지가 0mm 가 아니라 18mm 에서 시작했다.
           표지를 감싼 div.max-w-5xl 의 padding 56px + 부모 section 11px = 18mm.
           표지 상자는 252mm 인데 18mm 밀려 270mm → 인쇄 가능 높이 255mm 를 넘는다.
           넘친 꼬리(글자 없는 부분)가 그대로 **2쪽 백지**가 됐다.
           표지 안쪽만 아무리 고쳐도 안 잡히던 이유다.

     궁합  body 에 margin-bottom 168px(=44mm) 이 남아 있었다.
           마지막 쪽(뒤 업셀) 뒤로 44mm 가 더 있으니 **쪽이 한 장 더** 생긴다.
           그 쪽에는 아무 글자도 없다 — 11쪽 백지의 정체다.

   [조치] 표지·업셀은 종이 한 쪽을 통째로 쓰는 물건이다.
          그것을 직접 담고 있는 상자의 위·아래 여백을 인쇄에서 없앤다.
          :has() 로 **표지를 담은 상자만** 고른다 — 본문 여백은 건드리지 않는다.
   ※ 좌우 여백은 그대로 둔다. 종이 여백은 @page 가 정한다(9-11). */
@media print {
  body { margin-top: 0 !important; margin-bottom: 0 !important;
         padding-top: 0 !important; padding-bottom: 0 !important; }

  /* [2026-08-01 보정] 처음에는 `:has(> …)` 로 **직접 부모만** 골랐다. 그랬더니
     택일이 18mm → 15mm 로만 줄고 여전히 넘쳤다. 56px 를 가진 div.max-w-5xl 이
     부모가 아니라 **조부모**였기 때문이다. 조상 전체로 넓힌다.
     위·아래 여백만 없애므로 본문이 좌우로 붙는 일은 없고,
     종이 여백은 @page 가 따로 준다(9-11). */
  :has(.print-only-cover), :has(.print-upsell) {
    padding-top: 0 !important; padding-bottom: 0 !important;
    margin-top: 0 !important; margin-bottom: 0 !important;
  }
}

/* ── 9-17. 「쪼개지 마라」의 단위를 **카드 한 건**으로 내린다 (2026-08-01 지시) ──
   [지시] "템플릿을 잘게 쪼개" · "카드 건건이 템플릿으로 인식하던지"

   [무엇이 문제였나]
   빈 쪽은 없앴는데 **쪽 아래가 크게 비는** 것이 남아 있었다. 택일 3쪽은 아래 60%,
   4쪽은 아래 40% 가 백지였다. 빈 쪽이 아니라서 지금까지의 검사는 전부 통과했다.

   원인은 「쪼개지 마라(break-inside: avoid)」를 **덩어리째** 걸어 둔 것이다.
   재 보니 이렇다(node tools/render-reports.js --only … 의 「큰덩어리」 줄):

     사주  .easy-card            한 쪽의 171% · 103% · 91%
     택일  #quickReport          142%
     택일  .panel-card           87% · 89%

   한 쪽의 171% 짜리는 애초에 한 쪽에 들어갈 수가 없다. 그런데 "쪼개지 마라"가
   걸려 있으니 앞 쪽 남은 자리를 통째로 버리고 다음 쪽으로 튄다. 버린 자리가 백지다.

   [무엇이 카드인가]
   .easy-card 를 열어 보니 카드가 아니라 **문단 7~8개가 든 긴 글 덩어리**였다.
   이름만 카드다. 이런 것은 쪽 사이로 흐르는 것이 정상이다.

   [조치] 단위를 한 단계 내린다.
     · 큰 덩어리는 흐르게 둔다(break-inside: auto)
     · 대신 **그 안의 한 조각**(문단·표의 행·작은 칸)이 쪼개지지 않게 한다
     · 문단은 한두 줄만 떨어져 나가지 않게 orphans/widows 로 묶는다
   그러면 앞 쪽이 끝까지 채워지고, 넘어간 쪽도 문장 중간에서 어색하게 끊기지 않는다.

   ※ 여기가 파일의 **맨 끝**인 것에 이유가 있다. 앞쪽 2·9-11 절에도 같은 클래스에
     avoid 가 걸려 있는데, CSS 는 뒤가 이기므로 이 절이 그것을 되돌린다.
     앞의 규칙을 지우지 않은 것은 다른 화면이 그 목록에 기대고 있기 때문이다.
   ※ 새로 만든 화면의 큰 블록이 또 이 증상을 내면 `--only <이름>` 으로 돌려
     「큰덩어리」 줄을 보고 아래 목록에 이름을 넣는다. 눈으로 안 봐도 잡힌다. */
@media print {
  /* ① **전부 흐르게 되돌린다.** 앞 절(2 · 9-11)에서 클래스 목록에 avoid 를
        걸어 둔 것을 여기서 푼다. 목록을 조금씩 손보는 방식으로는 매번 다른
        화면에서 같은 증상이 되살아났다 — 기본을 "흐른다"로 뒤집는다. */
  .expert-block, .easy-card, .qna-card, .daeun-card, .ai-card,
  .ai-action-cell, .ai-domain-cell, .term-block, .sewoon-year-card,
  .card, .rcard, .detail-card, .print-card, .r-card, .engine-card,
  .panel, .panel-card, .avoid-break, .daily-guide-collapse, .rank-card,
  #quickReport, #principleSection, #termAppendix,
  section, article, p, li {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  /* ② **쪼개면 뜻이 깨지는 것만** 예외로 남긴다.
        전부 작다 — 표의 한 행, 달력의 한 칸, 명반의 한 기둥. 한 쪽을 다 잡아먹지 않는다.
        달력(#calendarGrid)과 그래프는 예외 중에서도 크지만, 두 쪽에 걸치면
        아예 읽을 수 없는 물건이라 통째로 넘기는 편이 낫다. */
  /* .rank-card 는 여기 있었는데 성명학에서 한 쪽의 **190%** 였다.
     이름이 카드일 뿐 실제로는 긴 설명 덩어리다 — ① 로 옮겨 흐르게 했다. */
  tr, thead, .day-cell, .upsell-item,
  .myeongban-card, .saju-pillar-card, .saju-char-box,
  #calendarGrid, .daeun-line-chart, #daeunLineChartWrap,
  .print-only-cover, .print-upsell {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* ③ 흐르되 어색하게 끊기지 않게 — 잘림 방지는 이제 이쪽이 맡는다 */
  p, li { orphans: 2; widows: 2; }
  h1, h2, h3, h4, h5, h6,
  .easy-card > .font-bold, .panel-card > .font-bold,
  .report-section-head {
    break-after: avoid-page !important; page-break-after: avoid !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. 감정서를 「인쇄물」로 — 외곽선을 전부 걷고 글로 흘린다  (2026-08-01 지시)
   ───────────────────────────────────────────────────────────────────────────
   [지시]
     ① 바탕색을 아예 없이
     ② 카드는 명조·대운·세운·월운 60갑자·대운 그래프 등 **반드시 그림이어야 하는 것만**
        (해설은 카드에서 빼고 그래프 바로 아래 텍스트로)
     ③ 나머지는 텍스트로 흘림
     ④ **"선도 다 없애. 선이 있던 자리도 남기면 안 돼."** — 여기서 선은 **외곽선**이다
     → "깔끔하게 텍스트 + 이미지 카드만"

   [왜 이게 맞나]
   지금까지는 화면의 카드 UI를 그대로 종이에 옮겼다. 그래서 종이가
   「둥근 상자 수십 개」가 됐다. 상자마다 외곽선·여백이 붙으니
     · 같은 내용에 쪽수가 늘고(14쪽 → 12쪽으로 줄었다)
     · 상자가 쪽 경계에 걸려 잘리고(11곳 → 3곳)
     · 무엇보다 **감정서가 아니라 웹페이지 인쇄본처럼 보인다.**

   종이에서 구분은 선이 아니라 **제목과 여백**이 한다. 책이 그렇게 되어 있다.
   외곽선은 「표」와 「그림」에만 쓴다 — 칸이 곧 뜻이라 선을 없애면 못 읽는 것들.

   [설계]
     ⑴ 인쇄에서는 **모든 테두리를 0으로** 놓는다(선을 지우는 것이 아니라 자리까지 없앤다)
     ⑵ 그 다음 **남길 목록에만** 다시 그린다
   순서가 중요하다. 반대로 하면 어딘가에 선이 살아남고, 그걸 찾느라 시간을 버린다.
   실제로 «남은 선 찾기»를 도구로 재서 잡았다 — 눈으로 보면 놓친다.

   ★ 화면은 건드리지 않는다. @media print 안이라 클릭·펼침은 그대로 살아 있다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {

  /* ── 10-1. 모든 선을 없앤다 (자리까지) ────────────────────────────────
     border-color 를 흰색으로 두는 식으로 「안 보이게」 하면 **자리는 남는다.**
     1px 씩이라도 수십 개가 쌓이면 줄이 밀리고, 흑백 인쇄에서 옅게 비친다.
     width 를 0 으로 만들어 자리 자체를 없앤다.

     ★ 선택자를 **`body *` 하나로만** 둔다. 여기에 ID(`#app *` 같은 것)를 넣지 말 것.
       [왜] `#app *` 는 특정도가 (ID 1, 클래스 0) 이라 10-2 의 `.saju-pillar-card`
       (ID 0, 클래스 1) 를 **이긴다.** 둘 다 !important 라 특정도로 갈리기 때문이다.
       그래서 사주 명식(`#palaceCards .myeongban-card` — ID 1 + 클래스 1)은 선이 남고
       궁합 명식(`.saju-pillar-card`)은 선이 사라지는, 화면마다 다른 결과가 났다.
       재서 찾았다 — 사주 1px, 궁합 0px. 눈으로는 「궁합만 왜 다르지」에서 멈춘다. */
  body * {
    border-width: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
  }

  /* 상자를 없앴으니 안쪽 여백도 뺀다 — 안 그러면 글이 가운데로 몰려 좁아 보인다 */
  .card, .rcard, .detail-card, .print-card, .r-card, .engine-card,
  .qna-card, .easy-card, .daeun-card, .ai-card, .ai-hero-card, .ai-final-card,
  .panel, .panel-card, .rank-card, .term-block, .expert-block,
  .daily-guide-collapse, .geok-banner,
  #scholarSection, #expertSection, #quickReport, #principleSection, #termAppendix {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 4mm !important;   /* 문단 하나만큼의 숨 */
  }

  /* 카드 안의 제목은 이제 그 문단의 소제목이다. 굵기와 여백으로만 구분한다. */
  .qna-card > .font-bold, .easy-card > .font-bold, .panel-card > .font-bold,
  .detail-card > .font-bold, .rank-card > .font-bold,
  #qnaSection .qna-card > div:first-child {
    display: block;
    margin: 0 0 1.5mm !important;
  }

  /* ── 10-2. 다시 선을 그릴 것 — 칸이 곧 뜻인 것만 ──────────────────────
     [지시] 명조 · 대운 · 세운 · 월운 60갑자 · 대운 그래프
     여기서 선을 빼면 어느 글자가 어느 자리인지 알 수 없어 읽기가 불가능해진다.
     ※ 10-1 보다 **뒤에** 있어야 한다. 앞에 두면 10-1 이 덮어 버린다. */
  /* ★ [2026-08-03 지시] 「하나의 사주명반임을 바로 알 수 있게」 —
     네 기둥이 각자 테두리를 갖고 떨어져 있으면 **별개 카드 넷**으로 읽힌다.
     바깥을 한 줄로 두르고, 안쪽은 **세로 구분선**으로만 나눈다.
     ⚠ 종이에서는 화면용 반투명 흰 선이 사라지므로 여기서 따로 정한다. */
  /* ★ [2026-08-03] 6대 영역 **한 칸**은 쪼개지지 않게 한다.
     앞 쪽에 「관계운」 라벨만 남고 배지·본문이 다음 쪽으로 넘어가 있었다.
     ⚠ `.easy-card` 전체가 아니라 **이 칸만**이다 — 그 이름은 한 쪽의 171% 짜리
       긴 글 덩어리에도 쓰여, 통째로 걸면 앞 쪽이 백지가 된다(맨 끝 절 참고). */
  .easy-card.domain-cell { break-inside: avoid-page !important; page-break-inside: avoid !important; }

  #palaceCards, .myeongban-grid {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #b9b2a4 !important;
    border-radius: 6px !important;
    overflow: hidden;
    gap: 0 !important;
  }
  #palaceCards .myeongban-card + .myeongban-card,
  .myeongban-grid .mb-cell + .mb-cell {
    border-left-width: 1px !important;
    border-left-style: solid !important;
    border-left-color: #d5cfc3 !important;
  }

  .saju-pillar-card, .saju-char-box,
  .daeun-tile,                      /* 대운 한 칸 */
  .sewoon-year-card,                /* 세운 한 해 */
  .day-cell,                        /* 월운 60갑자 한 칸 */
  #calendarGrid,
  .daeun-line-chart, #daeunLineChartWrap, .daewoon-chart-wrap {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #b9b3a6 !important;
    border-radius: 3px !important;
    padding: 1.5mm !important;
  }
  /* 표는 원래 선으로 읽는 물건이다 */
  table, th, td {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #b9b3a6 !important;
  }

  /* ── 10-3. 대운 그래프 — 해설은 상자 밖, 그래프 바로 아래 글로 ────────
     [지시] "해설은 카드에서 제외 + 그래프 바로 아래 텍스트만"
     [왜] 그래프와 해설이 각각 상자에 들어 있으면 쪽이 나뉠 때 둘이 떨어진다.
     그래프만 있고 읽는 법이 다음 쪽에 있으면 그 그래프는 못 읽는 그림이 된다. */
  .daeun-energy-section, .daeun-energy-section > div {
    border-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .daeun-energy-section {
    /* ⚠ [2026-08-03] 여기에 `break-inside: avoid` 가 있었다. 9-10절(위쪽)에서 `auto` 로
       바꿔 놓고도 **이 규칙이 뒤에 있어 그것을 덮고 있었다** — 같은 셀렉터가 두 곳에 있으면
       나중 것이 이긴다. 그래서 아무리 위를 고쳐도 계속 「큰덩어리」로 잡혔다.

       그래프가 한 장이던 때는 「그래프와 해설은 함께 넘어간다」가 맞았다. 그러나
       2026-08-03 지시로 **3종**이 되면서 한 절이 쪽 높이의 40~51% 가 됐다(실측).
       그러면 남은 자리에 못 들어갈 때 통째로 튀어 **앞쪽이 크게 빈다** — 8/1 지적 그대로다.
       → 절은 흐르게 두고, **그림 상자만** 쪼개지지 않게 한다(9-10절에 있다).
         그래프와 해설이 갈릴 위험은 제목 붙임(h4 break-after:avoid)이 막는다. */
    margin-bottom: 4mm !important;
  }
  .daeun-energy-section h4 { margin: 2mm 0 1mm !important; }
  .daeun-energy-section p  { margin: 0 0 1.5mm !important; }

  /* ── 10-4. 칠해서 구분하던 것도 글자색으로 바꾼다 ─────────────────────
     등급 배지(좋음/보통/주의)·강조 칸은 배경을 깔고 있었다.
     흑백 인쇄에서 회색 덩어리가 되고, 컬러에서는 잉크를 쓴다. 글자만 남긴다. */
  .grade-good, .grade-mid, .grade-bad,
  .wang-soe-bar-track,
  [class*="bg-blue-"], [class*="bg-emerald-"], [class*="bg-amber-"], [class*="bg-black/"] {
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
  }

  /* ★ [2026-08-04 지시] **달력 칸은 색을 살린다.**
     "달력 안의 날짜도 길일 등에 따라 앞에 있는 색을 적용할 것"
     위 범례(길일·평일·흉일)와 **같은 색**을 칸에 얹는다 — 안 그러면 범례가 헛것이 된다.
     ⚠ 종이용으로 **연하게** 깐다. 화면 색을 그대로 쓰면 잉크를 먹고 글자가 묻힌다.
     ⚠ `print-color-adjust: exact` 가 있어야 브라우저가 배경색을 지우지 않는다. */
  .day-cell.gold, .day-cell.warn {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  .day-cell.gold {
    background-color: #f3ead6 !important;   /* 길일 — 위 범례의 금색을 종이용으로 연하게 */
    border-color: #b99b5e !important;
  }
  .day-cell.warn {
    background-color: #f6e3e0 !important;   /* 흉일 — 범례의 붉은색을 연하게 */
    border-color: #b5716a !important;
  }
  .grade-good { color: #14532d !important; }
  .grade-mid  { color: #33383f !important; }
  .grade-bad  { color: #7f1d1d !important; }
  /* 왕쇠 막대 — 채워진 부분이 곧 눈금이라 이것만은 남긴다.
     ★ 막대 **안에 글자가 들어 있다**(「신강(身强)」). 그래서 색을 마음대로 못 정한다.
       처음에 진회색(#6b6357)으로 깔았더니 어두운 글자와 겹쳐 명암비 2.94 — 안 읽혔다.
       옅은 회색으로 깔아 어두운 글자가 그대로 읽히게 한다. 비율은 그대로 보인다. */
  .wang-soe-blue, .wang-soe-green, .wang-soe-amber, .wang-soe-red {
    background-image: none !important;
    background-color: #d7d2c6 !important;
  }
  .wang-soe-bar-fill { color: #1a1a1a !important; }
  /* 막대의 「빈 쪽」도 보여야 채운 비율이 읽힌다 — track 만 테두리를 되살린다 */
  .wang-soe-bar-track {
    border: 1px solid #b9b3a6 !important;
    border-radius: 2px !important;
  }

  /* ── 10-5. 제목은 여백으로만 구분한다 ─────────────────────────────────
     [지시] "선이 있던 자리도 남기면 안 돼" — 제목 위 구분선도 넣지 않는다.
     대신 위 여백을 넉넉히 줘서 이야기가 바뀌는 것을 알린다(책이 쓰는 방식). */
  .report-section-head,
  h2:not(.print-only-cover h2):not(.print-upsell h2) {
    margin-top: 7mm !important;
    padding-top: 0 !important;
  }
  .report-section-head:first-child, h2:first-child { margin-top: 0 !important; }

  /* ── 10-6. 빈 껍데기 제거 ─────────────────────────────────────────────
     선을 없애면 «내용 없는 상자»가 빈 줄로 남는다.
     화면에서는 선이 있어 자리로 보였지만 종이에서는 그냥 빈틈이다. */
  .card:empty, .qna-card:empty, .easy-card:empty, .panel:empty,
  .panel-card:empty, .detail-card:empty, hr { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. 그래프(<canvas>)는 화면용·인쇄용 두 장을 그려 두고 여기서 고른다 (2026-08-01 지시)
   ───────────────────────────────────────────────────────────────────────────
   [지시] "그래프 위 글자 등 다 굵은 검정색으로 바꿔"

   [왜 CSS 만으로 안 되나] <canvas> 는 그려진 픽셀이다. 인쇄 색 보정이 문서 글자를 아무리
   어둡게 바꿔도 **캔버스 안쪽에는 손이 닿지 않는다.** 종이 배경을 흰색으로 바꾼 뒤에도
   간지(#E7E3DC)·나이(#C9C2B4)가 흰 종이 위 흰 글씨로 남아 있었다(사진으로 확인됐다).

   [왜 다시 그리지 않고 두 장을 쓰나] beforeprint·matchMedia 로 다시 그리는 방법을 먼저 썼는데
   헤드리스 렌더에서 이벤트가 안 불려 흰 글씨가 그대로 나갔다. **이벤트에 기대면 언젠가 샌다.**
   미리 두 장을 그려 두고 CSS 로 고르면 어느 경로로 인쇄해도 항상 맞다.

   ※ 화면에서 인쇄용을 숨기는 규칙은 **각 화면의 CSS 에 있다.**
     이 파일은 media="print" 라 화면에서는 읽히지 않는다 —
     여기에만 적어 두면 화면에 그래프가 두 개 보인다(실제로 그렇게 나왔다).
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .chart-screen-only { display: none !important; }
  .chart-print-only  { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. 그래프 글자는 어디서든 **굵은 검정**  (2026-08-01 지시 · 공통 적용)
   ───────────────────────────────────────────────────────────────────────────
   [지시] "그래프 위 글자 등 다 굵은 검정색으로" · "공통사항이면 다 적용하라"

   [왜 여기 따로 있나] 그래프가 두 종류다.
     · 택일 대운 그래프   <canvas>  → CSS 가 안 닿는다. 두 장을 그려 11절에서 고른다.
     · 사주·코칭 대운 그래프 <svg>   → **CSS 가 닿는다.** 여기서 한 번에 바꾼다.
   같은 지시를 두 가지 방법으로 지키는 것이라, 한쪽만 고치면 다른 쪽이 옅게 남는다.
   실제로 택일만 고쳤다가 사주 그래프가 그대로였다.

   [왜 회색을 안 쓰나] 옅은 회색은 인쇄기·복사기를 거치며 더 옅어져 사라진다.
   종이는 화면이 아니다. 굵기로 위계를 주고 색은 검정 하나로 간다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  /* 축 라벨·간지·나이·범례 — SVG 안의 모든 글자 */
  .daeun-energy-chart text {
    fill: #000000 !important;
    font-weight: 700 !important;
  }
  /* 눈금선·기준선은 보이되 글자를 방해하지 않을 만큼만 */
  .daeun-energy-chart line {
    stroke: #555555 !important;
    opacity: 1 !important;
  }
  /* 선 자체는 색으로 역할을 구분하므로 두께만 올린다 — 얇으면 종이에서 끊겨 보인다 */
  .daeun-energy-chart polyline { stroke-width: 2.4 !important; }
  /* 「지금」 표시는 더 굵게 — 이 그래프에서 가장 먼저 찾는 지점이다 */
  .daeun-energy-chart text[font-weight="700"] { font-weight: 800 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. 제목은 컬러로 · 카드용 여백은 줄인다  (2026-08-01 지시 · 공통 적용)
   ───────────────────────────────────────────────────────────────────────────
   [지시]
     · "h1, h2, h3 등의 헤드라인, headline은 아니나 (선택하신 고민)처럼 소제목처럼
        새 항목안내를 하는 글자와 제목글자는 컬러로 해 다른 항목과 구분되게 해"
     · "6대 영역과 핵심Q&A 사이 여백 너무 많음 >>> 모든 리포트에 기존 템플릿, 카드
        때문에 의도적으로 준 여백은 줄일 것"

   [왜 지금까지 검정이었나]
   3절이 「종이에서는 글자를 어둡게」라며 h1~h6 을 전부 #1a1a1a 로 눌렀다.
   흰 종이에 흰 글씨가 나가던 사고를 막으려던 규칙인데, 그 바람에
   **제목과 본문이 같은 검정**이 되어 어디서 항목이 바뀌는지 눈에 안 들어왔다.

   [왜 색만으로 하지 않나]
   흑백 인쇄·복사에서는 색이 회색으로 뭉갠다. **굵기를 함께** 준다.
   그래야 컬러 프린터가 없어도 위계가 남는다.

   [색] 브랜드 금색 계열 #8a6522. 흰 종이 대비 5.4 로 명암비 기준(3)을 넉넉히 넘는다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {

  /* ── 13-1. 제목 ─────────────────────────────────────────────────────────
     ※ 표지·2쪽 업셀은 자기 색이 따로 있으므로 건드리지 않는다. */
  h1:not(.print-only-cover h1):not(.print-upsell h1),
  h2:not(.print-only-cover h2):not(.print-upsell h2),
  h3:not(.print-only-cover h3):not(.print-upsell h3),
  h4:not(.print-only-cover h4):not(.print-upsell h4),
  .report-section-head, .report-section-head h2,
  .daeun-chart-title,                  /* 대운 그래프 제목 */
  .daeun-energy-section h4 {           /* 대운 흐름 ①②③ 제목 */
    color: #8a6522 !important;
    font-weight: 800 !important;
  }

  /* ── 13-2. 헤드라인은 아니지만 **새 항목을 여는** 글자 ──────────────────
     예: ■ 선택하신 고민 진단 / [선택 고민 1] 건강운 / 요약 / 조상궁 …
     [왜] 화면에서는 카드 테두리가 「여기부터 새 항목」을 알려 줬다.
     종이에서 테두리를 걷었으니 그 구실을 **색과 굵기**가 대신해야 한다. */
  .section-label, .item-label, .field-title, .palace-name,
  .qna-card > .font-bold, .easy-card > .font-bold, .panel-card > .font-bold,
  .detail-card > .font-bold, .rank-card > .font-bold,
  #qnaSection .qna-card > div:first-child,
  .print-lead {
    color: #8a6522 !important;
    font-weight: 800 !important;
  }

  /* ── 13-3. 카드 때문에 주던 여백을 줄인다 ──────────────────────────────
     [무엇이 있었나] 상자끼리 떨어뜨리려고 준 여백(mb-8·mt-10 등)이
     상자를 없앤 뒤에도 그대로 남아, 6대 영역과 핵심 Q&A 사이가 통째로 비었다.
     상자가 없으면 문단 간격이면 충분하다. */
  .mb-8, .mb-10, .mb-12, .mt-8, .mt-10, .mt-12,
  .py-8, .py-10, .py-12, .space-y-8 > * + * {
    margin-top: 0 !important;
    margin-bottom: 4mm !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* 절(節)이 바뀌는 자리만 조금 더 준다 — 여기까지 줄이면 글이 붙어 버린다 */
  .report-section-head { margin-top: 7mm !important; margin-bottom: 3mm !important; }
  .report-section-head:first-child { margin-top: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. 대운 줄이 종이 밖으로 나가던 것  (2026-08-01 지시)
   ───────────────────────────────────────────────────────────────────────────
   [지시] "27세 대운 짤림. 가로폭 축소 또는 한 줄 내에 자동맞춤"

   [원인] 대운 타일이 `w-[72px]` 로 **고정 폭**이고 가로 스크롤(overflow-x)에 담겨 있다.
   화면에서는 옆으로 밀어 보면 되지만 **종이는 밀 수 없다.**
   9구간 × 72px + 간격 ≈ 종이 폭을 넘어 마지막 칸이 잘렸다.

   [조치] 인쇄에서는 고정 폭을 버리고 **남은 폭을 9로 나눠 쓴다.**
   글자가 조금 작아지지만 잘리는 것보다 낫다 — 잘리면 그 칸은 아예 못 읽는다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  /* 가로 스크롤 상자를 편다 — 안 그러면 넘친 부분이 그냥 사라진다
     ⛔⛔ [2026-08-03] `[class*="overflow-x"]` 는 **너무 넓다.**
        `#resultSection` 은 클래스가 `panel … hidden overflow-x-auto` 인데,
        여기 걸려 `display:flex !important` 가 되면서 **`.hidden` 을 이겼다.**
        그 절은 **전문가(58,000원) 전용**이다 —
        일반(29,000원) 결제 고객이 인쇄만 하면 그대로 가져갔다.
        화면에서는 안 보이므로 **눈으로는 절대 안 잡힌다.**
     → 화면이 감춘 것(`.hidden`)은 종이에서도 감춘다. 이 `:not(.hidden)` 을 빼지 말 것.
     ⚠ 인쇄에서 일부러 펴야 하는 절(`#palaceSection`·`#scholarSection`)은
       감명이 끝나면 JS 가 `hidden` 을 떼므로 여기 걸리지 않는다. */
  /* ① 넘친 부분이 사라지지 않게 **펴기만** 한다 — 이건 넓게 걸어도 안전하다. */
  .daeun-track, .daeun-strip, #daeunTrack,
  [class*="overflow-x"]:not(.hidden) {
    overflow: visible !important;
  }
  /* ② `display:flex` 는 **가로로 늘어놓는 트랙에만** 준다.
     ⛔⛔ [2026-08-03] 전에는 `[class*="overflow-x"]` 에도 flex 를 줬다. 두 가지가 났다.
        · `#resultSection`(클래스에 `overflow-x-auto`)이 flex 가 되어
          **제목과 대운표가 가로로 나란히** 놓였다
        · 그러면 flex 자식이 세로로 stretch 되어 `h2` 높이가 컨테이너만큼 늘어나고,
          제목에 걸린 `break-inside: avoid` 때문에 **한 쪽의 61%짜리 「쪼개지 마라」**
          가 생겨 앞 쪽이 백지가 될 자리가 됐다
     → 클래스 이름으로 짐작하지 말고 **트랙을 이름으로 적는다.** */
  .daeun-track, .daeun-strip, #daeunTrack {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .daeun-tile {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;      /* 남은 폭을 고르게 나눈다 */
    padding: 1.5mm 0.5mm !important;
    font-size: 10px !important;
  }
  .daeun-now-badge { color: #8a6522 !important; font-weight: 800 !important; }

  /* 세운 제목 — 아래 「…님의 N년 세운 풀이」보다 커야 위계가 산다 */
  .seun-head { font-size: 14px !important; color: #8a6522 !important; font-weight: 800 !important; }
}

/* ── 12-2. 대운 그래프 안의 제목이 **바깥 제목과 겹치던 것** ────────────
   [무엇이 있었나] SVG 안에 제목(dc-head)·부제(dc-axis)가 또 들어 있었다.
   바깥에 <h4> 로 같은 제목이 있으니 **같은 말이 두 번** 나오고,
   게다가 그 글자들이 그래프 선 위에 겹쳐 둘 다 안 읽혔다(사진으로 확인).
   [조치] 종이에서는 SVG 안 제목·부제를 감춘다 — 바깥 제목이 이미 그 일을 한다.
   범례는 남긴다. 어느 선이 무엇인지는 범례 없이 알 수 없다. */
@media print {
  /* ★ 앞에 `.daeun-energy-chart` 를 붙이지 말 것 — 그래프 구현이 **두 가지**다.
       코칭·인텔리전스는 daeun-chart.js(.daeun-energy-chart),
       사주는 자체 구현(.daeun-line-chart)이다. 한쪽만 잡으면 다른 쪽에 유령 제목이 남는다.
       실제로 사주 그래프에 fill=#e7e9ee(거의 흰색) 제목이 겹쳐 보였다. */
  .dc-head, .dc-axis { display: none !important; }
  .daeun-energy-chart .dc-legend text, .daeun-line-chart text {
    fill: #000000 !important; font-weight: 700 !important; font-size: 10px !important;
  }
}

  /* 제목·부제를 감췄으니 범례를 그 자리로 끌어올린다.
     안 그러면 범례만 남고 그 위가 통째로 빈다(그래프가 아래로 밀려 잘린다).
     ⚠ [2026-08-03] 가로 위치는 **그림의 왼쪽 여백(padL)과 같아야** 눈금선과 줄이 맞는다.
       `daeun-chart.js` 에서 padL 을 44 → 52 로 넓혔으므로(눈금 글자가 굵어지면
       왼쪽으로 더 뻗는다) 여기도 함께 옮긴다. **한쪽만 고치면 범례가 6px 어긋난다.** */
@media print {
  .daeun-energy-chart .dc-legend { transform: translate(52px, 12px) !important; }
}

  /* ── 12-3. 월운 상자의 어두운 배경 ────────────────────────────────────
     [무엇이 있었나] 화면용 `.daily-guide-collapse { background:#14161b !important }` 가
     인쇄에서도 살아 있었다. 두 달치를 펼치자 그 위에 어두운 글자가 얹혀
     **명암비 1.04** — 25곳이 통째로 안 읽혔다(도구가 잡았다).
     [왜 1절에서 안 걸렸나] 1절의 `* { background: transparent !important }` 는
     특정도가 0 이라 클래스 + !important 를 못 이긴다.
     같은 클래스로 되받아 친다. */
@media print {
  .daily-guide-collapse,
  .daily-guide-collapse .panel {
    background: transparent !important;
    background-color: transparent !important;
  }
  .daily-guide-text { color: #1a1a1a !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. 궁(宮) 설명은 **한 개씩 세로로**  (2026-08-01 지시)
   ───────────────────────────────────────────────────────────────────────────
   [지시] "조상궁 등 궁 설명을 한 개씩 차례대로 설명해.
          두 개의 카드 형태로 조상궁 / 부모궁 식으로 나란히 하지말고."

   [무엇이 문제였나] 두 개씩 가로로 놓고 있었다.
       조상궁   부모궁
       설명     설명
   ① 조상궁 설명을 읽다가 눈이 오른쪽 부모궁으로 튄다
   ② 한 궁의 설명이 좁은 칸에 갇혀 줄이 잘게 끊긴다(종이에서 특히 심하다)
   궁은 서로 다른 항목이다. 세로로 나란히 놓고 각자 한 줄을 다 쓰게 한다.

   ※ 화면 CSS 에도 같은 규칙을 넣었지만, 여기에 못박아 둔다 —
     Tailwind 의 md:grid-cols-2 같은 것이 다시 붙어도 종이에서는 세로를 지킨다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  #gungText, .gung-text-list {
    display: block !important;
    grid-template-columns: none !important;
  }
  #gungText > *, .gung-text-list > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 4mm !important;
    /* ⛔ [2026-08-04] 여기 `break-inside: avoid` 가 걸려 있었다. 「한 궁이 두 쪽에 걸치면
       읽기 어렵다」는 뜻이었는데, 이 카드가 **쪽 높이의 56~60%** 다(실측).
       둘이 한 쪽에 못 들어가므로 **쪽마다 40%가 빈다.** 사주 전문가에서만 4건이었다.
       사장님 지시는 분명하다 — *"또 한 페이지의 80%를 공백으로 만들 거지? 안 된다"*.
       그리고 이 저장소의 규칙도 「기본은 흐른다, 예외는 작은 것만」이다.
       궁 해설은 그냥 글이라 두 쪽에 걸쳐도 읽힌다 — 표도 그림도 아니다.
       → 흐르게 두고, **제목이 혼자 떨어지는 것**과 **한두 줄만 넘어가는 것**만 막는다. */
    break-inside: auto !important;
    page-break-inside: auto !important;
    orphans: 3; widows: 3;
  }
  /* 소제목이 쪽 맨 아래에 혼자 남지 않게 — 이것만 지키면 쪼개져도 읽힌다. */
  #gungText > * > :is(h3, h4, .text-sm.font-bold, .seal-accent),
  .gung-text-list > * > :is(h3, h4, .text-sm.font-bold, .seal-accent) {
    break-after: avoid-page !important; page-break-after: avoid !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. 제목에 색을 준다 · 「의도적으로 준 여백」을 줄인다  (2026-08-01 감수 지시)
   ───────────────────────────────────────────────────────────────────────────
   [지시] "제목·소제목을 컬러로. 지금은 본문도 제목도 전부 같은 검정이라
          어디서 항목이 바뀌는지 눈에 안 들어온다."
          "6대 영역과 핵심 Q&A 사이가 지나치게 비어 있다."

   ⚠ 색만으로 구분하지 않는다. 흑백으로 인쇄해도 위계가 남아야 하므로 **굵기를 함께** 준다.
     색약·흑백 프린터 어느 쪽에서도 제목이 제목으로 보여야 한다.

   색 고르기 — #1d3a6b (깊은 남색). 이유:
     · 흰 종이에서 명암비 9.3 → tools/render-print.js 의 3.0 기준을 넉넉히 넘는다
     · 오행 색(목=녹 화=적 토=황 금=금 수=흑)과 겹치지 않는다.
       금색(#8a6522)을 쓰면 본문의 토·금 오행 표시와 헷갈린다
     · 표지 금색과 나란히 놓아도 브랜드가 깨지지 않는다

   ※ 위 3절이 h1~h6 을 #1a1a1a 로 강제한다. 여기가 뒤에 있으므로 이긴다.
     새 규칙을 이 아래에 또 넣을 때는 그 점을 기억할 것.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  :root { --print-head: #1d3a6b; }

  /* ── 16-1. 헤드라인 ─────────────────────────────────────────────────────── */
  /* ★ [2026-08-03] 조상을 `main`·`section` 으로 제한해 두어,
     **그 밖에 놓인 리포트의 소제목이 화면 테마 색(금색) 그대로 인쇄**됐다.
     코칭 감정서의 「지금 상황」·「강점」이 갈색이고 사주는 남색이라 **리포트마다 색이 달랐다.**
     제목 색은 종이 전체에서 하나여야 한다 — 조상 제한을 푼다.
     ⚠ 헤더·푸터는 인쇄에서 숨겨지므로(`no-print`) 물들 걱정이 없다. */
  h1, h2, h3, h4 {
    color: var(--print-head) !important;
    font-weight: 700 !important;
  }

  /* ── 16-2. 헤드라인은 아니지만 **새 항목을 여는 소제목** ──────────────────
     예: 「■ 선택하신 고민 진단」 「글자들의 관계(형충회합)」 「대운 흐름 ① 격국론」
     화면에서는 div/span 으로 만들어 두어 h 태그가 아니다. 클래스로 잡는다. */
  .section-label,
  .print-subhead,
  div[class*="font-bold"][class*="text-sm"],
  h3[class*="uppercase"][class*="tracking-wider"] {
    color: var(--print-head) !important;
    font-weight: 700 !important;
  }

  /* 대운 그래프 제목이 위 3절의 --muted 규칙에 먼저 걸려 회색이 된다. 되돌린다. */
  h3[class*="uppercase"][style*="var(--muted)"],
  h3[class*="text-[var(--muted)]"] { color: var(--print-head) !important; }

  /* ── 16-3. 「글자들의 관계(형충회합)」은 하위 항목보다 커야 한다 (2차 지시 8) ──
     지금은 天干 合·地支 六合 과 같은 크기라 위계가 없다. */
  .section-label { font-size: 1.15em !important; }

  /* ── 16-4. 상자를 없앤 뒤에도 남은 여백을 줄인다 (지시 2) ────────────────
     옛 카드 구조에서 상자끼리 떨어뜨리려고 준 값이다.
     상자가 없으면 문단 간격이면 충분하다. 값은 반으로 줄이는 선에서 멈춘다 —
     0 으로 만들면 항목이 서로 붙어 버려 이번 지시의 취지(위계)와 반대가 된다. */
  .report-print section, main > section, .panel > section { margin-bottom: 4mm !important; }
  .report-print section > *:last-child, main > section > *:last-child { margin-bottom: 0 !important; }
  [class*="mt-10"], [class*="mt-12"], [class*="mt-16"] { margin-top: 4mm !important; }
  [class*="mb-10"], [class*="mb-12"], [class*="mb-16"] { margin-bottom: 4mm !important; }
  [class*="py-10"], [class*="py-12"], [class*="py-16"] { padding-top: 3mm !important; padding-bottom: 3mm !important; }
  [class*="gap-8"], [class*="gap-10"], [class*="gap-12"] { gap: 3mm !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. 종이에서만 거슬리는 「화면 장치」를 걷는다 (2026-08-03, 감수용 PDF 를 눈으로 보고)
   ─────────────────────────────────────────────────────────────────────────
   [지시] 「리뷰는 디자인과 ux만 하면 됨 — 통일성 있고, 사용자가 쉽게 접근하게」
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  /* 17-1. 용어 밑줄(`.term-tip`)은 **화면에서 눌러 보라**는 표시다.
     종이에서는 누를 수 없는데 점선만 남아, 택일 표 안이 밑줄투성이로 보였다.
     뜻풀이는 부록이 이미 싣는다 — 종이에서는 표시를 걷는다. */
  .term-tip {
    border-bottom: none !important;
    cursor: auto !important;
  }

  /* 17-2. 표의 좁은 칸에서 글자가 **세로로 쪼개지던 것**.
     택일 「추천 길일」 표에서 「1위」가 「1 / 위」로, 헤더 「일진(日辰)」이
     「일진(日 / 辰)」으로 갈렸다. 짧은 라벨은 접지 않는다. */
  table th, table td { word-break: keep-all; }
  table th { white-space: nowrap; }
  /* 순위·번호처럼 아주 짧은 칸은 폭을 확보해 준다. */
  table td:first-child { white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. 「고객용으로 인쇄」 — 감명 근거를 빼고 뽑는다 (2026-08-04 지시)
   ───────────────────────────────────────────────────────────────────────────
   [지시] *"전문가 모드에서 감명 근거는 인쇄 시 뺄 수 있는 옵션 줘야,*
          *전문가가 고객에게 일반모드 제공할 수 있음."*

   전문가(술사)는 우리 화면으로 감명하고 **고객에게는 결과만** 건넨다.
   근거가 딸려 나가면 그 전문가는 우리 서비스를 실무에 못 쓴다.

   [어떻게 켜지나] `public/print-options.js` 가 인쇄 버튼 옆에 체크를 하나 두고,
   끄면 <html data-print-plain="1"> 을 붙인다. **화면은 그대로**다 —
   전문가는 계속 근거를 보면서 일하고, 종이에서만 빠진다.

   ⚠ 감출 대상을 **여기 한 곳에만** 적는다. 화면마다 적으면 새 화면에서 반드시 빠진다.
   ⚠ 새 근거 블록을 만들면 **이 목록에 더한다.** 안 그러면 고객용 인쇄에 그것만 남는다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  html[data-print-plain] #expertSection,          /* 궁합·택일 전문가 절 */
  html[data-print-plain] #expertDetailSection,    /* 성명학 전문가 상세 */
  html[data-print-plain] #resultSection,          /* 사주 전문가 조견표 */
  html[data-print-plain] #scholarSection,         /* 학술 근거 절 */
  html[data-print-plain] .classic-ref,            /* 고전 근거(원문 번역 + 주석) */
  html[data-print-plain] .report-evidence,        /* 리포트 근거 블록(명반 + 판정요약 + 그래프) */
  html[data-print-plain] .daeun-energy-section,   /* 대운 12운성 그래프 3종 */
  html[data-print-plain] #daeunEnergyHost,
  html[data-print-plain] #daewoonChartSection,    /* 택일 대운 그래프 */
  html[data-print-plain] #sewoonSection,          /* 택일 세운 3개년 */
  html[data-print-plain] #sinsalCompareSection {  /* 궁합 12신살 상호 동태 */
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. 심리검사 점수 막대 — 종이에서도 보이게 (2026-08-04)
   ───────────────────────────────────────────────────────────────────────────
   [무엇이었나] 「31. 일 가치관」·「29. Big Five」를 눈으로 보다 잡았다.
   화면에서는 점수 막대가 그려지는데 **인쇄에서는 막대가 통째로 사라져**
   「외향성 50」 다섯 줄만 남았다. 그런데 그 아래 「해 석」 절이 같은
   라벨·점수를 다시 찍는다 → 고객 눈에는 **같은 숫자표가 두 번** 나온 꼴이다.

   사장님 기준으로 두 가지를 동시에 어긴다 —
   ① 「쪽수를 늘리려고 중복을 넣지 않는다」 ② 「첫 장에서 와, 풍성하다」.

   [왜 사라졌나] 막대는 `background`(그라디언트)로만 그렸다. 브라우저는 인쇄에서
   배경을 기본으로 버린다. 그래서 **화면만 보면 절대 안 보이는 종류의 결함**이다.

   [어떻게 고치나] 색을 종이용으로 바꾸고 `print-color-adjust: exact` 로 강제한다.
   ⚠ 막대를 지우고 숫자만 남기는 쪽으로 가지 말 것 — 막대가 이 화면의 알맹이다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .bar-track {
    background: #e6e3dc !important;
    border: 0.4pt solid #b9b3a6 !important;
    height: 7px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    break-inside: avoid;
  }
  .bar-fill {
    background: #8a6d28 !important;   /* 금색은 종이에서 흐리다 — 어둡게 내린다 */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* 라벨·점수도 종이용 대비로 (화면 토큰은 밝은 회색이라 안 읽힌다) */
  .bar-row .label { color: #1a1c22 !important; }
  .bar-row .label span { color: #1a1c22 !important; }
  .bar-row { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. 활자 위계 — **네 단만 쓴다** (2026-08-05 지시)
   ───────────────────────────────────────────────────────────────────────────
   [지시] *"글자크기는 큰 것부터 {제목 > 부제1 > 부제2 > 본문=표}의 체계로 만들 것.
          글자크기가 말도 안되게 크기도 하고, 작기도 해 **반드시 위계를 세워**
          전반적으로 다 수정할 것."*

   [무엇이었나 — 재서 확인했다]
   리포트 8화면이 쓰는 글자 크기가 **23종**이었다.
     9 · 9.5 · 10 · 10.5 · 11 · 11.5 · 12 · 12.5 · 13 · 13.5 · 14 · 14.5 · 15 ·
     16 · 17 · 18 · 19 · 20 · 21 · 22 · 24 · 26 · 38px
   사주 화면 **한 장에만 16종**이 있다.
   13px 과 13.5px 이 나란히 있으면 눈에는 위계가 아니라 **잡음**으로 보인다.
   0.5px 차이는 「다른 단」이 아니라 「어긋난 것」이다.

   [어떻게 고치나 — 크기가 아니라 **단(段)**을 준다]
   ┌──────────┬───────┬──────────────────────────────────────────────┐
   │ 단        │ 크기  │ 어디                                          │
   ├──────────┼───────┼──────────────────────────────────────────────┤
   │ 표지 제목 │ 30px  │ 표지에만. 본문에 이 크기를 쓰지 않는다          │
   │ 제목      │ 19px  │ 절 제목 — h1 · .section-title                  │
   │ 부제1     │ 15px  │ h2 · .panel 제목 · 카드 제목                    │
   │ 부제2     │ 13px  │ h3~h6 · 표 머리 · 작은 제목                     │
   │ 본문=표   │ 11.5px│ p · li · td · th · 대부분                       │
   │ (주)      │ 10px  │ 각주·출처·단위. **단이 아니다** — 곁다리다      │
   └──────────┴───────┴──────────────────────────────────────────────┘
   · 단 사이 비율 ≈ 1.28 — 눈이 「다른 단」으로 읽는 최소 차이다
   · **본문과 표가 같은 크기**다(지시 그대로). 표만 작게 하면 표가 부록처럼 보인다
   · 서체 — 제목 계열은 **Noto Serif KR(명조)**, 본문은 산세리프.
     index.html 이 쓰는 짝과 같다. 크기만으로 세운 위계는 흑백에서 약하다

   ⚠ **화면 HTML 의 인라인 크기를 여기서 이긴다.** 화면마다 고치면 반드시 빠진다 —
     실제로 8/3 에 「공통은 하나 고치면 다 바뀐다」가 안 되고 있던 것을 겪었다.
   ⚠ **새 화면을 만들 때 인쇄용 크기를 직접 쓰지 말 것.** 여기 네 단만 쓴다.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ★★ [2026-08-05 지적] **위계가 인쇄에만 걸려 있었다.**
   사장님: *"글자크기는 다 같게 하라고 했는데 왜 같은 본문인데 …
   리포트의 **웹화면, 리포트의 인쇄모드, PDF 모두 동일**하게 적용할 것"*

   ⚠ **내가 20절을  안에만 넣었다.** 그래서 종이에서는 네 단인데
     **화면에서는 제각각**이었다. 같은 리포트가 매체마다 다르게 보였다.
   → 미디어 밖으로 뺀다. 화면·인쇄·PDF 가 **같은 규칙 하나**를 쓴다.
   ⛔ 다시  안으로 넣지 말 것. */
  :root {
    --p-cover: 30px;   /* 표지 제목 */
    --p-h1:    19px;   /* 제목 */
    --p-h2:    15px;   /* 부제1 */
    --p-h3:    13px;   /* 부제2 */
    --p-body:  11.5px; /* 본문 = 표 */
    --p-note:  10px;   /* 주 — 단이 아니다 */
    --p-serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  }

  /* ── 본문 = 표. 여기가 바닥이다 ─────────────────────────────────────────
     인라인 style="font-size:…" 이 붙은 곳까지 이겨야 한다 — 리포트 화면은
     인라인으로 크기를 박아 쓴 곳이 많다(선언 167개 중 상당수). */
  body, p, li, td, th, dd, dt, span, div, label, figcaption {
    font-size: var(--p-body) !important;
    line-height: 1.75 !important;
  }

  /* ── 제목 계열 — 큰 것부터 네 단 ─────────────────────────────────────── */
  h1, .section-title, .report-title {
    font-size: var(--p-h1) !important;
    font-family: var(--p-serif) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
  }
  h2, .panel-title, .card-title, .sub-title {
    font-size: var(--p-h2) !important;
    font-family: var(--p-serif) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
  }
  h3, h4, h5, h6, thead th, .label, .eyebrow {
    font-size: var(--p-h3) !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
  }

  /* ── 주(註) — 각주·출처·단위. 작아도 되는 것만 여기에 ────────────────── */
  .print-note, .print-only-note, .source, .footnote, .unit, small, sub, sup,
  .term-glossary li, .classic-ref .src {
    font-size: var(--p-note) !important;
    line-height: 1.7 !important;
  }

  /* ── 표지 — 유일한 예외 ──────────────────────────────────────────────── */
  .print-only-cover h1, .print-only-cover .cover-title, #printCoverTitle {
    font-size: var(--p-cover) !important;
    font-family: var(--p-serif) !important;
    font-weight: 900 !important;
  }
  .print-only-cover h2, .print-only-cover .cover-sub, #printCoverSub {
    font-size: var(--p-h2) !important;
  }

  /* ── 명반·오행 낱자는 크기를 지킨다 ──────────────────────────────────────
     한자 여덟 글자는 「읽는 글」이 아니라 **그림**이다. 본문 크기로 내리면
     명반이 아니라 글줄이 된다. 위 규칙(div·span)에 걸리므로 되돌린다. */
  .mb-char, .mb-cell .mb-char, .p-hanja, .pillar .p-hanja {
    font-size: 22px !important;
    font-family: var(--p-serif) !important;
    line-height: 1.15 !important;
  }
  .mb-sub, .mb-cell .mb-ko, .mb-sip {
    font-size: var(--p-note) !important;
    line-height: 1.4 !important;
  }


/* ═══════════════════════════════════════════════════════════════════════════
   21. 사주명반 — **쪽 최상단 · 리포트 첫머리** (2026-08-05 지시)
   ───────────────────────────────────────────────────────────────────────────
   [지시] *"사주명반은 반드시 **페이지 최상단**에 오게 할 것.
          사주명반은 사주리포트 **처음**에 나오는 걸로 **모두 통일**할 것."*

   [무엇이었나] 근거 블록(명반+판정요약+그래프)이 화면마다 다른 자리에 붙었다 —
   코칭은 끝에서 두 번째, 데일리는 맨 끝, 인텔리전스는 피드백 앞.
   종이에서는 **근거가 맨 뒤 허공에 떴다.** 감정서는 명반을 먼저 펼치고
   그것을 보며 읽는 물건이다. 뒤에 있으면 「덧붙인 것」이 된다.

   [자리] `report-evidence.js` 의 `mount` 가 **afterbegin** 으로 맨 앞에 넣는다.
          화면이 자리를 정하지 않는다 — 정하게 두면 또 갈라진다.

   [여기서 하는 것] 그 절이 **쪽 위에서 시작**하게 하고 명반이 쪼개지지 않게 한다.
   ⚠ 절 전체에 `break-inside: avoid` 를 걸지 말 것 — 명반+요약+그래프 3장이라
     키가 아주 크다. 걸면 남은 자리에 못 들어가 통째로 넘어가고 **앞쪽이 백지**가 된다.
     (2026-08-03 에 실제로 겪었다.) 절은 흐르게 두고 **명반 4궁에만** 건다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  /* 근거 절은 리포트 맨 앞이다 — 위 여백을 없애 쪽 최상단에 붙인다. */
  .report-evidence {
    margin-top: 0 !important;
    padding-top: 0 !important;
    break-inside: auto;          /* ⛔ avoid 로 바꾸지 말 것 — 앞쪽이 백지가 된다 */
  }
  .report-evidence > :first-child { margin-top: 0 !important; }

  /* 명반 4궁은 한 덩어리다. 두 쪽에 걸치면 아예 못 읽는다. */
  .myeongban-grid, #palaceCards, .saju-4col-grid, .mb-grid {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin-top: 0 !important;
  }
  /* 명반 바로 다음 제목이 혼자 남지 않게 붙여 둔다. */
  .myeongban-grid + h2, .myeongban-grid + h3,
  .mb-grid + h2, .mb-grid + h3 { break-before: avoid !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. 표·명반 — **선을 긋고, 가운데 맞추고, 쪽 위에서 시작한다** (2026-08-05 지시)
   ───────────────────────────────────────────────────────────────────────────
   [지시 원문]
     *"그냥 보고서를 쓰듯이 쭉 써. **이미지는 오직 사주명반, 그래프만** 있어도 돼.
      이미지 말고 **표를 활용**해. 너무 길게 표를 만들지 말고, 비교설명할 때만, 그것도 짧게…
      나머지는 다 텍스트로 쓰라고."*
     *"**모든 표의 텍스트는 가로세로 모두 가운데 맞춤**을"*
     *"표를 만들때, 이미지를 만들때는 사람들이 **표, 이미지를 인식할 수 있도록 선을 사용**해야 함"*
     *"**사주명반은 항상 페이지 제일 상단에서만 시작**"*

   [21절에서 빠져 있던 것] 21절은 명반을 **리포트 첫머리**로 옮겼지만
   그 절이 **쪽 위에서 시작**하게는 하지 않았다(위 여백만 없앴다).
   앞에 무엇이 오느냐에 따라 쪽 중간에서 시작할 수 있었다. 여기서 못 박는다.

   ⚠ `break-before: page` 는 「여기서 새 쪽」이라 앞쪽이 짧게 끝날 뿐, **빈 쪽을 만들지 않는다.**
     빈 쪽을 만드는 것은 키 큰 덩어리에 건 `break-inside: avoid` 다(21절 경고 참조).
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {

  /* ── 22-1. 사주명반 절은 **언제나 쪽 최상단에서** 시작한다 ─────────────── */
  .report-evidence { break-before: page !important; page-break-before: always !important; }
  /* 다만 그 절이 **문서의 맨 처음**이면 새 쪽을 열 필요가 없다(빈 쪽이 된다). */
  .report-evidence:first-child { break-before: auto !important; page-break-before: auto !important; }

  /* ── 22-2. 표는 **가로·세로 모두 가운데**. 예외 없다 ────────────────────── */
  table th, table td {
    text-align: center !important;
    vertical-align: middle !important;
  }

  /* ── 22-3. 표에는 **선을 긋는다** — 표라는 것을 알아볼 수 있어야 한다 ───── */
  table {
    border-collapse: collapse !important;
    border: 1px solid #4a5060 !important;
    margin: 6px auto 10px !important;      /* 가운데로 놓는다 */
  }
  table th, table td {
    border: 1px solid #8b93a3 !important;
    padding: 4px 7px !important;
  }
  table th {
    background: #eceff4 !important;
    font-weight: 700 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* ── 22-4. 그림(명반·그래프)에도 **테두리** — 본문과 갈라 보이게 ────────── */
  .myeongban-grid, #palaceCards, .saju-4col-grid, .mb-grid,
  .daeun-chart, .daeun-chart-box, .dc-box {
    border: 1px solid #8b93a3 !important;
    border-radius: 4px !important;
    padding: 6px !important;
  }

  /* ⛔ 표를 세로로 길게 늘이지 않는다(지시). CSS 로 강제할 수 없는 것이라
       `tools/verify-reports.js` 가 **행 수를 세어** 알린다. 여기서는 자리만 잡는다. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. 쪽번호 — **몇 쪽인지 알 수 있어야 한다** (2026-08-05)
   ───────────────────────────────────────────────────────────────────────────
   [왜] 사장님이 직접 쓰신 감정서를 스타일 참조로 주셨다.
     거기엔 위에 상호, 아래에 **「페이지 2 / 9」**가 있다.
     우리 감정서는 **17쪽·28쪽인데 쪽번호가 없다.** 종이로 받으면 흩어졌을 때
     순서를 못 맞추고, 전화로 「몇 쪽 보세요」를 못 한다.

   [어떻게] `@page` 의 **마진 박스**를 쓴다. 크롬이 `@bottom-right` 의
     `counter(page)` 는 실제로 낸다(실물로 확인하고 적는다).
   ⛔ `position: fixed` 로 하지 말 것 — 인쇄에서 **첫 쪽에만** 찍힌다.
   ⛔ 전체 쪽수(「/ 9」)는 안 넣는다. `counter(pages)` 는 크롬에서 비어 나온다 —
     **틀린 총쪽수보다 없는 것이 낫다.**
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  @page {
    @bottom-right {
      content: counter(page) '쪽';
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 9.5pt;
      color: #8b93a3;
    }
  }
  /* 표지에는 번호를 안 찍는다 — 표지는 쪽이 아니라 얼굴이다. */
  @page :first { @bottom-right { content: ''; } }
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. 사장님 지적 반영 (2026-08-05 저녁) — 오행 한 줄 · 표 쪽걸침 · 부록
   ───────────────────────────────────────────────────────────────────────────
   ① *"사주. 아래 **오행 한 줄로 맞출것**"*
      木·火·土·金 이 한 줄이고 **水만 다음 줄로** 밀려 있었다.
      다섯이 한 덩어리인데 하나가 떨어지면 **세다 만 것처럼** 보인다.

   ⑤ *"**표 1개가 2페이지에 걸쳐있지 않게** 할 것"*
      ⚠ 이것과 「키 큰 덩어리에 avoid 를 걸지 마라」(9-14·21절)가 부딪힌다.
        한 쪽에 못 들어가는 표에 avoid 를 걸면 **앞쪽이 통째로 빈다.**
      → **쪽 높이의 70% 이하인 표에만** 건다. 그보다 큰 표는 흐르게 두고
        `thead` 를 반복해 두 쪽에 걸쳐도 읽히게 한다.
        ⛔ 모든 표에 무조건 걸지 말 것 — 8/1 에 그렇게 해서 빈 쪽이 났다.

   ⑦ *"**부록 > 삭제**"* — 전문 용어 안내를 인쇄에서 뺀다.
      화면에는 그대로 둔다(웹에서는 눌러서 찾아보는 자리라 쓸모가 있다).
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {

  /* ① 오행 다섯은 **한 줄**. 줄바꿈하지 않는다 */
  #ohengCounterBar {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }
  #ohengCounterBar > * {
    flex: 0 0 auto !important;
    padding: 2px 8px !important;      /* 다섯이 들어가게 좁힌다 */
    font-size: 11px !important;
  }

  /* ⑤ 표가 두 쪽에 걸치지 않게 — 다만 **작은 표에만** 건다 */
  table { break-inside: avoid; page-break-inside: avoid; }
  /* 큰 표는 예외 — 걸면 앞쪽이 빈다. 대신 머리행을 반복한다. */
  table.tall, table[data-tall] { break-inside: auto !important; page-break-inside: auto !important; }
  thead { display: table-header-group; }   /* 두 쪽에 걸치면 머리행을 다시 그린다 */
  tr    { break-inside: avoid; page-break-inside: avoid; }

  /* ⑦ 부록(전문 용어 안내)은 인쇄에서 뺀다 — 화면에는 남는다 */
  #termAppendix, .term-appendix, [data-term-appendix] { display: none !important; }
}

/* ── 24-2. 월운은 **해당 월 한 달치만** (2026-08-05 지시) ─────────────────
   *"**월운을 해당 월 한달치만** 담도록"*

   [무엇이었나] 12개월 트랙이 쪽 경계에 걸려 **천간 줄과 지지 줄이 갈라졌다.**
   14쪽에 천간, 다음 쪽에 지지가 찍혀 **아무것도 못 읽는 상태**가 됐다.

   → 인쇄에서는 **현재월 한 칸만** 남긴다. 흐름은 아래 설명글(`#wolwoonMiniReport`)이 맡는다.
   ⛔ 화면에서는 12칸 그대로 둔다 — 웹에서는 눌러서 다른 달을 볼 수 있는 자리다. */
@media print {
  #wolwoonTrack { display: flex !important; justify-content: center !important; }
  #wolwoonTrack > .wolwoon-cell { display: none !important; }
  #wolwoonTrack > .wolwoon-now {
    display: block !important;
    min-width: 64px; padding: 6px 12px !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* 제목이 「12개월」이라 적혀 있는데 한 칸만 나오면 어긋난다 — 인쇄용 제목으로 바꾼다. */
  #wolwoonTrack ~ * .print-wolwoon-title, h3[data-i18n="tmyhvbb"] { font-size: 0 !important; }
  h3[data-i18n="tmyhvbb"]::after {
    content: '월운(月運) — 이번 달';
    font-size: 13px; font-weight: 700; color: #1d3a6b;
  }
}

/* ★ [2026-08-05 지시] **표 가운데 맞춤은 화면에도 건다.**
   *"리포트의 **웹화면, 인쇄모드, PDF 모두 동일**하게 적용할 것"*
   ⚠ 22절에 넣었는데 그것도 @media print 안이었다 — 20절과 **같은 실수**다.
   ⛔ 이 규칙을 다시 미디어 안으로 넣지 말 것. */
.report-evidence table th, .report-evidence table td,
#termAppendix table th, #termAppendix table td,
.term-table th, .term-table td {
  text-align: center; vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────────
   25. 가운데 맞춘 글은 **줄 길이를 고르게** (2026-08-05 지시)
   *"가운데 맞춤할 거면 길이가 비슷해야지. 첫 번째와 두 번째 줄이"*

   [무엇이었나] 가운데로 모은 두 줄짜리 안내문이
     1줄  사주 여덟 글자가 무슨 십성이냐보다, 어느 자리에 있느냐가 가족과의 인연을
     2줄  보는 더 근본적인 기준입니다.
   처럼 **첫 줄만 꽉 차고 둘째 줄이 토막**으로 남았다. 가운데 맞춤은 두 줄이 비슷해야
   가운데로 모은 티가 나고, 한쪽만 길면 **삐뚤어진 것처럼** 보인다.

   → 브라우저가 줄 길이를 고르게 나누게 한다(`text-wrap: balance`).
     ⛔ `<br>` 로 손수 끊지 말 것 — 글자 크기·언어·화면 폭이 바뀌면 그 자리가 어긋난다.
        4개 언어를 쓰므로 특히 그렇다.
     ⚠ 크롬은 여섯 줄까지만 고르게 나눈다. 긴 본문에는 아무 일도 안 일어나므로
       걸어 두어도 해가 없다.
   ★ **웹·인쇄·PDF 가 같아야 하므로 `@media print` 밖에 둔다**(20·22절과 같은 이유).
   ───────────────────────────────────────────────────────────────────────────── */
p.text-center, h1.text-center, h2.text-center, h3.text-center, h4.text-center,
.text-center > p, .print-only-cover .cover-sub, .report-evidence .cr-title,
figcaption, .chart-caption {
  text-wrap: balance;
  /* ★ **어절 한가운데서 끊지 않는다.**
     한국어는 기본값(`normal`)에서 **글자 아무 데서나** 줄이 넘어간다 — 한자·한글을
     낱자로 보기 때문이다. 그래서 줄 길이를 고르게 하자마자
       1줄  … 어느 자리(宮·궁)
       2줄  에 있느냐가 …
     처럼 **조사 「에」가 앞말에서 떨어져** 나갔다. 줄이 고른 것보다 이게 더 나쁘다.
     → `keep-all` 로 **띄어쓰기에서만** 넘긴다.
     ⚠ 아주 좁은 칸에서는 긴 어절이 넘칠 수 있으므로 **가운데 맞춘 짧은 글에만** 건다.
        본문 전체에 걸지 말 것. */
  word-break: keep-all;
}

/* ★ 한 어절을 **통째로** 유지한다 — `한자(한글)` 병기가 든 말에 쓴다.
   `word-break: keep-all` 은 CJK 낱자 사이는 막지만 **닫는 괄호 뒤**는 막지 못한다
   (줄 끝에 `)` 가 오는 것은 정상 줄바꿈이라 브라우저가 허용한다).
   그래서 「어느 자리(宮·궁)」 뒤에서 끊기고 조사 「에」가 다음 줄로 넘어갔다.
   ⚠ **꼭 필요한 말에만** 건다. 남발하면 좁은 칸에서 글자가 밖으로 넘친다. */
.keep-word { white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   26. 사주 감정서 4쪽에서 눈으로 잡은 것 (2026-08-06)
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
  /* ★ **왕쇠 진행바는 종이에 싣지 않는다.**
     [무엇이었나] 「신약(身弱)」이라는 **회색 라벨 하나와 텅 빈 흰 상자**로 나왔다.
     화면에서는 색 띠가 채워져 강약이 한눈에 보이지만, 종이에서는 채움이 사라져
     **무엇을 뜻하는 상자인지 알 수 없다.**
     · 게다가 **바로 위에 「신약(身弱)」이 글자로 이미 있다** — 같은 말을 두 번 한다
     · 사장님 지시: *"이미지는 오직 **사주명반, 그래프**만 있어도 돼"* — 이 띠는 둘 다 아니다
     ⛔ 채움을 인쇄에 살리는 쪽으로 고치지 말 것. 띠 길이는 **왕쇠 점수의 모양**이라
       종이에 남기면 판정 방식이 새는 쪽으로 간다(특허 청구항). */
  .wang-soe-bar-track { display: none !important; }

  /* ★ **제목만 남고 표가 다음 쪽으로 넘어갔다.**
     4쪽 맨 아래에 「용신 조견표 — 억부론 / 격국론」 제목 둘만 남고 표는 5쪽에 있었다.
     제목과 표가 갈리면 **제목은 아무 정보가 아니고, 표는 이름을 잃는다.**
     → 이 상자는 제목 한 줄 + 한 줄짜리 표라 **아주 작다.** 통째로 묶어도 안전하다.
     ⚠ 큰 덩어리에는 절대 걸지 말 것(7/31 지적) — 남은 자리에 못 들어가면
       통째로 튀어 앞 쪽이 백지가 된다. **작은 것에만** 건다. */
  .yongsin-table-card { break-inside: avoid; page-break-inside: avoid; }
}

@media print {
  /* ★ 요약 카드 셋을 **나란히** 둔다 (2026-08-06)
     `md:grid-cols-3` 은 **화면 폭**에 반응한다. 인쇄는 폭이 좁게 잡혀 그 규칙이 꺼지고,
     화면에선 나란하던 카드가 **종이에서만 세로로 쌓여 여덟 줄**을 썼다.
     ⚠ 8/1 에 대운·세운에서 겪은 것과 **같은 함정**이다 — 화면만 봐서는 알 수 없다.
     셋 다 「이름 한 줄 + 값 한 줄」로 아주 짧으므로 나란히 두는 것이 맞다.
     ⛔ 긴 카드가 든 grid 에는 이 규칙을 쓰지 말 것 — 칸이 좁아 글자가 잘게 끊긴다. */
  /* ⚠ 앞(676줄)에 `.grid.md\:grid-cols-3 { display: block !important }` 가 있다.
     **클래스 둘이라 더 세다** — `.summary-cards` 한 클래스로는 `!important` 를 붙여도 진다.
     그래서 같은 두 클래스에 하나를 더해 이긴다.
     ⚠ 「고쳤는데 안 바뀌면 같은 자리를 누르는 더 센 선택자가 앞에 있는지 본다」 —
       8/3 에 겪은 것과 같은 종류다(그때는 같은 셀렉터가 뒤에 또 있었다). */
  .grid.md\:grid-cols-3.summary-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .grid.md\:grid-cols-3.summary-cards > * {
    margin-bottom: 0 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
}

@media print {
  /* ★ 6대 영역은 **세 칸**으로 (2026-08-06)
     종이에서 여섯이 한 줄씩 쌓여 있었다. 등급이 모두 「보통」인 대운에서는
     **같은 말을 다섯 번 되풀이한 것처럼** 보였다 — 나란히 놓으면 한눈에 읽히는 것이다.
     한 칸은 「이름 + 등급 + 한 줄」로 짧으므로 세 칸이 맞다.
     ⚠ 앞(676줄)의 `.grid.md\:grid-cols-3 { display:block }` 이 클래스 둘이라 더 세다 →
       같은 두 클래스에 하나를 더해 이긴다(`.summary-cards` 와 같은 이유). */
  .grid.md\:grid-cols-3.domain-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .grid.md\:grid-cols-3.domain-grid > * { margin-bottom: 0 !important; }
}

@media print {
  /* ★ [2026-08-06 지적] **표처럼 보이는데 선이 없어 칸이 구분되지 않았다.**
     사장님: *"표처럼 보이므로 **선을 추가해 구별되게** 함"*
     6대 영역은 3×2 로 놓이면 눈에는 표다. 그런데 테두리가 없어
     「직업운 보통 …」과 옆 칸의 글이 **한 문단처럼** 이어져 읽혔다.
     ⚠ 이미 정해 둔 규칙이기도 하다 — *"표를 만들 때는 사람들이 표로 인식할 수 있도록
       **선을 사용**해야 함"*(2026-08-05 지시).
     → 칸마다 테두리 + 옅은 머리 배경. 표의 결을 그대로 따른다(22절 표 규격과 같은 색). */
  .grid.md\:grid-cols-3.domain-grid > .domain-cell {
    border: 1px solid #9aa3b2 !important;
    border-radius: 0 !important;
    padding: 5px 7px !important;
    background: #fff !important;
  }
  /* 칸 이름(직업운·재물운…)은 표의 머리칸처럼 옅게 깔아 준다 — 값과 구분된다. */
  .grid.md\:grid-cols-3.domain-grid > .domain-cell > div:first-child {
    background: #eef1f6 !important;
    margin: -5px -7px 4px !important;
    padding: 3px 7px !important;
    border-bottom: 1px solid #9aa3b2 !important;
    text-align: center !important;
    font-weight: 700 !important;
    color: #1d3a6b !important;
  }
  /* 칸 사이가 붙어 보이지 않게 아주 좁은 틈만 둔다(표의 격자처럼 읽힌다). */
  .grid.md\:grid-cols-3.domain-grid { gap: 4px !important; }
}

@media print {
  /* ★ [2026-08-06 지시] **본문 양이 달라지면 쪽 아래가 크게 빈다** — 재서 잡았다.
     *"본문 양이 변할 때 그림, 표가 한페이지가 두페이지로 나눠지는지,
       너무 공백을 많이 만드는 지 확인"*

     [무엇이었나] 1990-07-15 명식으로 뽑으니 **14쪽이 74% 비었다.**
     ① 「이번달 나의 운세 — **월을 선택하세요**」 — 종이에서는 **고를 수 없다.**
        화면 전용 안내가 그대로 찍히고 있었다(`no-print` 를 붙였어야 할 자리다).
     ② 그 절이 쪽 끝에 걸리면 짧은 글 몇 줄이 **한 쪽을 통째로** 쓴다.

     → 안내 문구는 인쇄용 제목으로 바꾸고, 이 절은 **흐르게** 둔다.
     ⛔ 여기에 `break-before: page` 를 걸지 말 것 — 그러면 오히려 앞 쪽이 백지가 된다
       (7/31 지적: *"또 한 페이지의 80%를 공백으로 만들 거지? 안 된다"*). */
  h3[data-i18n="t1p2qmfo"] { font-size: 0 !important; }
  h3[data-i18n="t1p2qmfo"]::after {
    content: '이번 달의 운세';
    font-size: var(--p-h3, 13px); font-weight: 700; color: #1d3a6b;
  }
}
