/* v4 sample.html 의 자체 스타일 그대로 (내용·디자인 변경 없음). */

/* 사주 리포트 화면 양식 v2 (2026-11-01) — 단정한 네이비 표지 + 따뜻한 종이 본문 (판타지 장식 없음, 대표님 v3.2 지적 반영)
   대상: 20~50 여성 손님, 휴대폰·A4 인쇄 둘 다. 구조(id·class)는 01 문서 9절 18) 계약을 그대로 씀. */
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&display=swap");

:root{
  --night:#1e2340; --night-2:#2c3260; --gold:#c9a45c; --gold-soft:#efe3c6;
  --paper:#fbf8f2; --surface:#ffffff; --ink:#26231f; --muted:#776f64; --line:#e8e1d4;
  --accent:#7a4e2d; --accent-soft:#f5ece0;
  --wood:#3d7a52; --fire:#c2522d; --earth:#a87b2c; --metal:#6b7385; --water:#2f5aa8;
  --good:#3d7a52; --good-bg:#eaf4ec; --mixed:#a87b2c; --mixed-bg:#fbf3e3;
  --bad:#b4472e; --bad-bg:#fbeae5; --worst:#8f2a1c; --worst-bg:#f6d9d2;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.85 "Noto Sans KR","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  word-break:keep-all;overflow-wrap:anywhere}
main{max-width:820px;margin:0 auto;padding:24px 16px 72px}
section{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 22px;margin:20px 0}
h1,h2,.chapter h2{font-family:"Gowun Batang","Noto Serif KR","Batang",serif}
h1{font-size:2rem;margin:0 0 8px;letter-spacing:-.01em;line-height:1.35}
h2{font-size:1.4rem;margin:0 0 14px;color:var(--accent);line-height:1.4}
h3{font-size:1.08rem;margin:28px 0 8px;color:var(--ink)}
h4{font-size:1rem;margin:18px 0 6px}
section p{margin:0 0 13px}
.note{font-size:.88rem;color:var(--muted)}
.conf{font-size:.9rem;color:var(--muted);margin-top:18px;padding-top:10px;border-top:1px dashed var(--line)}

/* ── 표지: 밤하늘 ─────────────────────────────── */
#cover{background:var(--night);
  color:#f3efe6;border:0;padding:44px 26px 36px;position:relative;overflow:hidden}
#cover h1{color:#fff;font-size:2.2rem}
#cover h1::before{content:"白兎堂 · 백토당 평생 상세 사주";display:block;font-size:.72rem;letter-spacing:.35em;color:var(--gold);margin-bottom:12px;font-family:"Noto Sans KR",sans-serif}
#cover .note{color:#c9c6d8}
#cover h2{color:var(--gold);font-size:1.15rem;margin-top:26px}
#cover .who{background:rgba(255,255,255,.07);border:1px solid rgba(201,164,92,.35);border-radius:14px;padding:16px 18px;font-size:1.04rem}
#cover .who p{margin:8px 0;padding-left:18px;position:relative}
#cover .who p::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:2px;background:var(--gold)}
#cover .qs{border-left:3px solid var(--gold);padding:4px 16px;margin:22px 0 4px}
#cover .qs p{color:#c9c6d8;font-size:.92rem}
#cover .qs h3{color:#fff;font-family:"Gowun Batang",serif;font-size:1.06rem;margin:12px 0 4px}

/* ── 한 장 달력: 판정 색으로 칠함 ───────────────── */
#calendar h2::after{content:" — 열두 달을 한눈에";font-size:.8rem;color:var(--muted);font-family:"Noto Sans KR",sans-serif}
.table-wrap{overflow-x:auto;margin:10px 0}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.9rem;line-height:1.55}
th,td{padding:8px 9px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500;font-size:.8rem;white-space:nowrap;background:var(--paper)}
table.calendar td:first-child{white-space:nowrap;font-weight:700;font-family:"Gowun Batang",serif}
table.calendar tr:has(.tag.good) td{background:var(--good-bg)}
table.calendar tr:has(.tag.mixed) td{background:var(--mixed-bg)}
table.calendar tr:has(.tag.bad) td{background:var(--bad-bg)}
table.calendar tr:has(.tag.worst) td,table.calendar tr:has(.tag.bad.worst) td{background:var(--worst-bg)}
table.calendar tr td:first-child{border-left:5px solid transparent}
table.calendar tr:has(.tag.good) td:first-child{border-left-color:var(--good)}
table.calendar tr:has(.tag.mixed) td:first-child{border-left-color:var(--mixed)}
table.calendar tr:has(.tag.bad) td:first-child{border-left-color:var(--bad)}
.tag{display:inline-block;font-size:.76rem;font-weight:700;padding:1px 9px;border-radius:999px;white-space:nowrap;color:#fff}
.tag.good{background:var(--good)} .tag.mixed{background:var(--mixed)} .tag.bad{background:var(--bad)}
.good{color:var(--good)} .mixed{color:var(--mixed)} .bad{color:var(--bad)}
.tag.good,.tag.mixed,.tag.bad{color:#fff}

/* ── 핵심 시기 표·처방 ─────────────────── */
#timing{border-top:5px solid var(--gold)}
#timing td:first-child{font-weight:700;white-space:nowrap}
#answer{border-top:5px solid var(--accent)}
#answer blockquote{font-family:"Gowun Batang",serif;font-size:1.08rem}
blockquote{margin:14px 0;padding:12px 16px;border-left:4px solid var(--gold);background:var(--accent-soft);border-radius:10px}
#rx td:first-child{font-weight:700;color:var(--accent);white-space:nowrap}
.lines.act{color:var(--accent);font-weight:500;background:var(--accent-soft);border-radius:10px;padding:8px 12px}
#guide{background:var(--paper)}
#scope{border:1px dashed var(--muted);border-radius:10px;padding:8px 12px;margin-top:10px;font-size:.92rem}

/* ── 장 머리: 큰 장 번호 띠 ─────────────────────── */
section.chapter>h2:first-child{font-size:1.55rem;color:var(--ink);padding:18px 0 14px;margin:-6px 0 18px;
  border-bottom:2px solid var(--gold)}
section.chapter>h2:first-child::first-line{color:var(--accent)}
section.chapter[data-topic="love"]{border-top:6px solid #c46a7a}
section.chapter[data-topic="money"]{border-top:6px solid var(--earth)}
section.chapter[data-topic="work"]{border-top:6px solid var(--water)}
section.chapter[data-topic="year"]{border-top:6px solid var(--gold)}
section.chapter[data-topic="daeun"]{border-top:6px solid var(--night-2)}
section.chapter[data-topic="care"]{border-top:6px solid var(--wood)}

/* ── 여덟 글자 ─────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 16px}
.pillar{border:1px solid var(--line);border-radius:14px;padding:12px 4px;text-align:center;background:var(--paper)}
.pillar.day{border:2px solid var(--gold);background:var(--gold-soft)}
.pillar .lab,.pillar .ss{display:block;font-size:.76rem;color:var(--muted);line-height:1.4}
.pillar .gz{display:block;font-size:2.2rem;line-height:1.2;font-family:"Gowun Batang","Noto Serif KR",serif}
.wood{color:var(--wood)} .fire{color:var(--fire)} .earth{color:var(--earth)} .metal{color:var(--metal)} .water{color:var(--water)}

/* ── 달 풀이·요약 ─────────────────────────────── */
.month{border-top:1px dashed var(--line);padding:12px 0 2px}
.summary{background:var(--gold-soft);border-radius:12px;padding:16px 16px 16px 36px}
.summary li{margin:6px 0}
.checklist li{list-style:"☐  ";margin:4px 0}
#appendix{background:var(--paper);font-size:.92rem}

/* ── 인쇄(A4) ─────────────────────────────────── */
@page{size:A4;margin:14mm 13mm}
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff;font-size:10.5pt}
  main{max-width:none;padding:0}
  section{border:0;padding:0;margin:0 0 7mm;border-radius:0;background:#fff}
  section.chapter{border-top:0!important}
  section.chapter>h2:first-child{margin-top:4mm}
  section#cover{break-after:page;min-height:250mm;padding:34mm 16mm 16mm;border-radius:0;background:var(--night)}
  #timing,#answer{border-top:0}
  h2,h3,h4{break-after:avoid}
  section p,.summary li,tr,.month,.lines.act{break-inside:avoid}
  table.calendar{font-size:8.6pt}
}

#cover .cover-art{display:block;width:100%;aspect-ratio:5/2;object-fit:cover;border-radius:12px;margin:0 0 22px;border:1px solid rgba(201,164,92,.45)}
@media print{#cover .cover-art{height:32mm;aspect-ratio:auto;margin-bottom:4mm} section#cover{padding-top:9mm!important;padding-bottom:6mm!important;min-height:0!important} #cover .who{padding:10px 14px} #cover .who p{margin:5px 0} #cover h2{margin-top:14px} #cover .qs{break-inside:avoid} #cover .qs h3{break-after:auto;margin:6px 0 2px}}