@font-face{font-family:'ReportGothic';src:url('/samples/compat/fonts/NanumGothic-Regular.woff2') format('woff2');font-weight:normal;font-style:normal;}
@font-face{font-family:'ReportGothic';src:url('/samples/compat/fonts/NanumGothic-Bold.woff2') format('woff2');font-weight:600 900;font-style:normal;}
@font-face{font-family:'ReportMyeongjo';src:url('/samples/compat/fonts/NanumMyeongjo-Regular.woff2') format('woff2');font-weight:normal;font-style:normal;}
@font-face{font-family:'ReportMyeongjo';src:url('/samples/compat/fonts/NanumMyeongjo-Bold.woff2') format('woff2');font-weight:600 900;font-style:normal;}
@font-face{font-family:'ReportGothic';src:url('/samples/compat/fonts/ReportHanja.woff2') format('woff2');font-weight:normal;font-style:normal;unicode-range:U+4E00-9FFF;}
@font-face{font-family:'ReportGothic';src:url('/samples/compat/fonts/ReportHanja.woff2') format('woff2');font-weight:600 900;font-style:normal;unicode-range:U+4E00-9FFF;}
@font-face{font-family:'ReportMyeongjo';src:url('/samples/compat/fonts/ReportHanja.woff2') format('woff2');font-weight:normal;font-style:normal;unicode-range:U+4E00-9FFF;}
@font-face{font-family:'ReportMyeongjo';src:url('/samples/compat/fonts/ReportHanja.woff2') format('woff2');font-weight:600 900;font-style:normal;unicode-range:U+4E00-9FFF;}
/* 천문성좌(天文星座) 다크 테마 — 명식을 별자리로 읽는다는 컨셉.
   v2: Puppeteer margin은 상하좌우 전부 0 — 페이지 전체를 본문 배경색이 그대로
   덮는다(과거 header/footerTemplate 방식은 Chromium의 5.3mm 강제 인셋 버그 때문에
   완전한 풀블리드가 불가능했다 — 경위는 renderPdf.js 상단 주석과
   docs/design-decisions.md 참고). 여백은 각 섹션의 CSS padding으로 직접 만들고,
   연속 페이지에서도 여백이 유지되도록 `box-decoration-break: clone`을 함께 쓴다. */

@page {
  size: A4;
  margin: 0;
}

:root {
  --bg: #0f1420;
  --bg2: #161d30;
  --star: #ece2c4;
  --text: #d7dae8;
  --muted: #8d96b8;
  --gold: #c7a13a;
  --gold-dim: #8a7530;
  --line: #2a3350;
  --danger: #b5573f;
  --mok: #6f9376; --hwa: #b5573f; --to: #c7a13a; --geum: #aab0ba; --su: #4d6f92;
}

* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

html, body {
  margin: 0;
  background: var(--bg);
}

body {
  font-family: 'ReportGothic', '맑은 고딕', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  font-size: 13pt;
  line-height: 2.85;
  color: var(--text);
  /* 단일 배경색만 사용 — 겹친 CSS 그라디언트 배경이 일부 PDF 뷰어에서 텍스트보다
     나중에 칠해지는(z-order) 렌더링 버그를 일으켜, 안전한 단색으로 대체했다.
     (자세한 경위는 docs/design-decisions.md 참고) */
  background-color: var(--bg);
}

.page-break { page-break-before: always; }
.avoid-break { page-break-inside: avoid; }

.section-pad { padding: 16mm 26mm 12mm; }

/* ── 표지 ── */
.cover {
  min-height: 297mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16mm 26mm;
}
.cover .eyebrow { font-size: 11pt; letter-spacing: 0.28em; color: var(--gold); margin-bottom: 6mm; }
.cover h1 {
  font-family: 'ReportMyeongjo', 'Batang', '바탕', serif;
  font-size: 27pt; line-height: 1.4; margin: 0 0 4mm; color: var(--star);
}
.cover .subtitle { font-size: 11.5pt; color: var(--muted); margin-bottom: 10mm; }
.cover-summary {
  /* 표지 배경(--bg)과 예전 배경(--bg2)이 색상 차이가 미미해서 박스가 배경에 묻혀
     보였다 — 금색 톤을 살짝 섞은 더 밝은 배경 + 좌측 금색 강조선(다른 곳의
     .myeongsik-summary와 같은 패턴)으로 눈에 띄게 한다. */
  background: linear-gradient(135deg, rgba(199,161,58,0.14), rgba(199,161,58,0.05));
  border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 4mm;
  padding: 8mm 10mm; margin-bottom: 10mm; max-width: 130mm;
}
.cover-summary-ttl { font-size: 9pt; letter-spacing: 0.16em; color: var(--gold); margin-bottom: 4mm; font-weight: 700; }
/* .cover 전체가 가운데정렬이라 그대로 두면 2~3줄짜리 문장이 매번 다른 위치에서
   꺾여 읽기 불편하다 — 이 문단만 왼쪽정렬로 되돌린다. 굵기·크기도 살짝 키워서
   본문 시작 전 가장 먼저 읽히는 "훅"답게 시각적 무게를 준다. */
.cover-summary p { font-size: 13.5pt; font-weight: 600; line-height: 1.85; color: var(--star); margin: 0 0 2.5mm; text-align: left; }
.cover-summary p:last-child { margin-bottom: 0; }
.cover .meta { font-size: 11pt; color: var(--text); line-height: 2.0; }
.cover .meta b { color: var(--gold); }
.cover .disclaimer-mini, .compat-cover .disclaimer-mini { margin-top: 8mm; font-size: 8.5pt; color: var(--muted); max-width: 130mm; line-height: 1.6; }
.cover .imprint, .compat-cover .imprint { margin-top: 5mm; font-size: 9pt; letter-spacing: 0.18em; color: var(--gold-dim); }

/* ── 얻게 될 3가지 ── */
.benefits { padding: 18mm 26mm 16mm; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.benefits .eyebrow { font-size: 10pt; letter-spacing: 0.24em; color: var(--gold); margin-bottom: 4mm; }
.benefits h2 { font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 18pt; color: var(--star); border-bottom: 1px solid var(--line); padding-bottom: 5mm; margin: 0 0 10mm; }
.benefit-item { display: flex; gap: 6mm; margin-bottom: 10mm; }
.benefit-num { font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 20pt; color: var(--gold-dim); flex-shrink: 0; width: 14mm; }
.benefit-ttl { font-size: 13pt; font-weight: 700; color: var(--star); margin-bottom: 2mm; }
.benefit-desc { font-size: 11pt; color: var(--muted); line-height: 1.8; }

/* ── 목차 ── */
.toc { padding: 18mm 26mm 16mm; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.toc .eyebrow { font-size: 10pt; letter-spacing: 0.24em; color: var(--gold); margin-bottom: 4mm; }
.toc h2 { font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 18pt; color: var(--star); border-bottom: 1px solid var(--line); padding-bottom: 5mm; margin: 0 0 8mm; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { display: flex; justify-content: space-between; padding: 2.8mm 0; border-bottom: 1px dotted var(--line); font-size: 11pt; }
.toc li .num { color: var(--gold); font-variant-numeric: tabular-nums; margin-right: 3mm; }
.toc a { color: var(--text); text-decoration: none; }

/* ── 명식 원국표 ── */
.myeongsik { padding: 18mm 26mm 16mm; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.myeongsik .eyebrow { font-size: 10pt; letter-spacing: 0.24em; color: var(--gold); margin-bottom: 4mm; }
.myeongsik h2 { font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 18pt; color: var(--star); margin: 0 0 8mm; }
.myeongsik-table { width: 100%; border-collapse: collapse; margin-bottom: 8mm; font-size: 10pt; }
.myeongsik-table th, .myeongsik-table td {
  border: 1px solid var(--line); padding: 3mm; text-align: center; color: var(--text);
}
.myeongsik-table th { background: rgba(199,161,58,0.08); color: var(--muted); font-weight: normal; letter-spacing: 0.04em; }
.myeongsik-table .ganji { font-size: 15pt; font-family: 'ReportMyeongjo','Batang','바탕',serif; color: var(--star); }
.myeongsik-table .ilgan-col { background: rgba(199,161,58,0.10); }
.myeongsik-summary {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  padding: 5mm 6mm; margin-bottom: 8mm; font-size: 10.5pt; color: var(--text); line-height: 1.9;
}
.myeongsik-summary b { color: var(--gold); }
/* margin이 아니라 padding을 쓴다 — avoid-break로 차트가 새 페이지 맨 위로 밀려날 때
   블록의 top margin은 (그 페이지의 "시작 여백"으로 취급되어) 소실되는 경우가 있어,
   차트 제목이 헤더 바로 아래에 여백 없이 붙어 잘려 보이는 문제가 있었다. padding은
   이런 상황에서도 사라지지 않는다. */
.chart-container { text-align: center; padding: 7mm 0; }
.chart-container canvas { max-width: 100%; }

/* 명식과 분포는 긴 본문과 분리된 밝은 데이터 시트로 읽는다.
   그래프는 HTML 막대라 PDF 확대/인쇄 시에도 레이블과 수치가 선명하다. */
.myeongsik, .myeongsik-data {
  min-height: 297mm; padding: 17mm 23mm 17mm;
  background: #faf8f4; color: #29394b; font-size: 11pt; line-height: 1.55;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.myeongsik-data { padding: 0; }
.myeongsik-data-inner { min-height: 297mm; padding: 12mm 23mm 10mm; }
.myeongsik .eyebrow, .myeongsik-data .eyebrow { color: #8a7044; font-size: 9pt; font-weight: 700; letter-spacing: .12em; margin: 0 0 3mm; }
.myeongsik h2, .myeongsik-data h2 { color: #24344b; font-size: 21pt; line-height: 1.35; margin: 0 0 4mm; }
.myeongsik-lead { max-width: 155mm; margin: 0 0 8mm; color: #647285; font-size: 10pt; line-height: 1.65; }
.myeongsik-focus { display: flex; flex-direction: column; gap: 1mm; margin: 0 0 8mm; padding: 6mm 7mm; border-radius: 4mm; background: #24344b; color: #dbe2ea; font-size: 9pt; }
.myeongsik-focus .focus-label { color: #dfc68b; font-size: 8.5pt; font-weight: 700; }
.myeongsik-focus strong { color: #fff; font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 19pt; line-height: 1.3; }
.myeongsik-focus b { color: #fff; }
.myeongsik .myeongsik-table { table-layout: fixed; width: 100%; margin: 0 0 8mm; border-collapse: separate; border-spacing: 0; font-size: 9pt; }
.myeongsik .myeongsik-table th, .myeongsik .myeongsik-table td { border: 0; border-bottom: 1px solid #e4e4df; padding: 3mm 2mm; color: #354457; line-height: 1.45; word-break: keep-all; }
.myeongsik .myeongsik-table thead th { background: #f0f0eb; color: #34485c; font-weight: 700; }
.myeongsik .myeongsik-table th:first-child { width: 22%; text-align: left; padding-left: 4mm; }
.myeongsik .myeongsik-table th:not(:first-child), .myeongsik .myeongsik-table td { width: 19.5%; text-align: center; }
.myeongsik .myeongsik-table small { color: #7b8791; font-size: 8pt; font-weight: 400; }
.myeongsik .myeongsik-table .ilgan-col { background: #f6efdf; color: #5a4520; }
.myeongsik .myeongsik-core td { padding-top: 4mm; padding-bottom: 4mm; }
.myeongsik .myeongsik-core .ganji { display: block; color: #24344b; font-size: 17pt; font-weight: 700; line-height: 1.4; }
.myeongsik .myeongsik-core .hanja { display: block; color: #768391; font-size: 10pt; }
.myeongsik-subtitle { margin: 3mm 0 3mm; color: #24344b; font-size: 11pt; }
.myeongsik .myeongsik-detail { font-size: 8.7pt; }
.myeongsik .myeongsik-detail .tag { margin: 1mm 1mm 0 0; padding: .6mm 1.5mm; border-color: #dae0dc; background: #f1f3ef; color: #435866; font-size: 7.6pt; }
.myeongsik-footnote { margin: 0; color: #77838c; font-size: 8.5pt; line-height: 1.55; }
.myeongsik-key { margin: -3mm 0 5mm; color: #617481; font-size: 8.7pt; line-height: 1.5; }
.myeongsik-data-card { margin: 0 0 5mm; padding: 5mm 7mm; border: 1px solid #e4e5df; border-radius: 4mm; background: #fff; }
.data-heading { margin-bottom: 4mm; }
.data-heading > span { color: #758a76; font-size: 8.5pt; font-weight: 800; }
.data-heading h3 { margin: 1.5mm 0; color: #24344b; font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 15pt; line-height: 1.4; }
.data-heading p { margin: 0; color: #7c8792; font-size: 9pt; }
.data-bars { display: flex; flex-direction: column; gap: 2mm; }
.data-row { display: grid; grid-template-columns: 27mm minmax(0,1fr) 15mm; align-items: center; gap: 3mm; min-height: 6mm; }
.data-label { display: flex; align-items: center; gap: 2mm; color: #2e4052; font-size: 9.5pt; white-space: nowrap; }
.data-dot { display: inline-block; flex: 0 0 3mm; width: 3mm; height: 3mm; border-radius: 50%; }
.data-track { display: block; height: 5mm; border-radius: 3mm; background: #edeee9; overflow: hidden; }
.data-fill { display: block; height: 100%; border-radius: 3mm; }
.data-dot.wood, .data-fill.wood { background: #3d7962; }
.data-dot.fire, .data-fill.fire { background: #b86150; }
.data-dot.earth, .data-fill.earth { background: #a47b38; }
.data-dot.metal, .data-fill.metal { background: #657486; }
.data-dot.water, .data-fill.water { background: #49759e; }
.data-fill.role { background: #687f71; }
.data-value { color: #26394c; font-size: 9pt; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.role-bars .data-label { display: block; }
.role-bars .data-label strong { display: block; }
.role-bars .data-label small { display: block; color: #82909b; font-size: 8pt; }
.role-bars .data-row { min-height: 7.5mm; }
.data-note { margin: 4mm 0 0; padding: 2.5mm 0 0; border-top: 1px solid #e9e9e4; color: #667482; font-size: 8.8pt; line-height: 1.6; }
.data-note b { color: #32495c; }
.data-reading { margin: 4mm 0 0; color: #34495a; font-size: 9pt; line-height: 1.55; }
.data-reading b { color: #55715e; }
.myeongsik-next { margin: 0; color: #657285; font-size: 8.8pt; line-height: 1.5; }

/* 7장 대운: 캔버스 곡선 대신 수치가 직접 읽히는 인쇄용 비교표. */
.daewoon-sheet { min-height: 297mm; background: #faf8f4; color: #29394b; font-size: 11pt; line-height: 1.55; }
.daewoon-inner { min-height: 297mm; padding: 17mm 23mm; }
.daewoon-sheet .eyebrow { color: #8a7044; font-size: 9pt; font-weight: 700; letter-spacing: .12em; }
.daewoon-sheet h2 { margin: 3mm 0 4mm; color: #24344b; font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 21pt; line-height: 1.35; }
.daewoon-lead { margin: 0 0 7mm; color: #647285; font-size: 10pt; line-height: 1.65; }
.daewoon-lead b { color: #435f4d; }
.daewoon-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-bottom: 7mm; }
.daewoon-summary > div { padding: 5mm 6mm; border: 1px solid #e4e5df; border-radius: 4mm; background: #fff; }
.daewoon-summary small { display: block; margin-bottom: 1mm; color: #718092; font-size: 8.5pt; }
.daewoon-summary strong { color: #24344b; font-size: 13pt; }
.daewoon-list { padding: 4mm 6mm; border: 1px solid #e4e5df; border-radius: 4mm; background: #fff; }
.daewoon-row { display: grid; grid-template-columns: 38mm minmax(0,1fr) 11mm; align-items: center; gap: 3mm; min-height: 13mm; border-bottom: 1px solid #f0f0ec; }
.daewoon-row:last-child { border-bottom: 0; }
.daewoon-row .period strong { display: block; color: #24344b; font-size: 10pt; }
.daewoon-row .period span { color: #7e8b95; font-size: 8pt; }
.daewoon-row .track { height: 5mm; border-radius: 3mm; background: #edeee9; overflow: hidden; }
.daewoon-row .track span { display: block; height: 100%; border-radius: 3mm; background: #24344b; }
.daewoon-row .track span.top { background: #9e7d41; }
.daewoon-row .score { color: #24344b; font-size: 10pt; text-align: right; }
.daewoon-guide { margin-top: 7mm; padding: 5mm 6mm; border-left: 3px solid #c7a13a; background: #f5f1e8; border-radius: 0; }
.daewoon-guide strong { color: #24344b; font-size: 10pt; }
.daewoon-guide p { margin: 2mm 0 0; color: #566978; font-size: 9pt; line-height: 1.7; text-align: left; }

/* ── 챕터 ── */
/* box-decoration-break: clone이 핵심 — 이게 없으면 이 padding은 챕터가 시작하는
   "첫 페이지"에만 적용되고, 챕터가 여러 페이지에 걸쳐 이어질 때 "연속 페이지"는
   padding 없이 문단이 페이지 맨 위 가장자리에 거의 붙어버린다(CSS 프래그먼테이션
   기본 동작). clone을 주면 모든 페이지 조각에 padding이 반복 적용된다. */
.chapter {
  padding: 18mm 26mm 16mm;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  position: relative;
}
/* 챕터 오프너 — 번호를 종이 위 종이색 고스트 워터마크로 깔고 그 위에 아이브로우·제목.
   장식이 아니라 "여기서 장이 바뀐다"는 리듬을 만든다(DESIGN.md 6장). 첫 페이지에만 보이도록
   position absolute — clone된 연속 페이지에는 반복되지 않는다. */
.chapter .chapter-ghost {
  position: absolute; top: 10mm; right: 22mm;
  font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 64pt; line-height: 1; font-weight: 700;
  color: rgba(255,255,255,0.06); letter-spacing: -0.02em; pointer-events: none; user-select: none;
}
.chapter .chapter-num {
  font-size: 9.5pt; letter-spacing: 0.22em; color: var(--gold); margin-bottom: 3mm;
  display: flex; align-items: center; gap: 2mm;
}
.chapter .chapter-star { flex-shrink: 0; }
.chapter h2 {
  font-family: 'ReportMyeongjo','Batang','바탕',serif;
  font-size: 17pt; color: var(--star);
  border-bottom: 1px solid var(--line);
  padding-bottom: 5mm; margin: 0 0 8mm;
  position: relative;
}
.chapter p { margin: 0 0 5mm 0; text-align: justify; color: var(--text); }
/* 골격(outline) 소제목 — 챕터를 5~7개 소주제로 나눈다. 챕터 제목(h2)보다 한 단계 작게. */
.chapter h3.sub { font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 12.5pt; color: var(--star); margin: 8mm 0 3mm; padding-bottom: 1.5mm; border-bottom: 1px solid var(--line); break-after: avoid; }
.chapter h3.sub:first-of-type { margin-top: 2mm; }
.chapter ul.sub-list { margin: 0 0 5mm; padding-left: 6mm; color: var(--text); }
.chapter ul.sub-list li { margin-bottom: 1.5mm; }

/* 챕터 도입부 키워드 칩 — 긴 줄글을 읽기 전에 이 장의 핵심 사실을 먼저 스캔할 수 있게. */
.chapter-keywords { display: flex; flex-wrap: wrap; gap: 2.5mm; margin: 0 0 7mm; }
.chapter-keywords .kw-chip {
  font-size: 9.5pt; font-weight: 700; color: var(--gold);
  border: 1px solid rgba(199,161,58,0.4); background: rgba(199,161,58,0.08);
  border-radius: 999px; padding: 1.5mm 4mm;
}

/* 개운법(17장) 끝 — 캡처해서 매일 볼 수 있는 실천 체크리스트 카드.
   .myeongsik-summary와 같은 좌측 금색 강조선 패턴으로 통일감을 준다. */
.quest-card {
  margin-top: 10mm; border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: 4mm; padding: 7mm 8mm; background: rgba(199,161,58,0.06);
}
.quest-card-ttl { font-size: 11.5pt; font-weight: 800; color: var(--star); margin-bottom: 5mm; }
.quest-list { list-style: none; padding: 0; margin: 0; }
.quest-list li {
  display: flex; align-items: center; gap: 4mm; font-size: 11pt; color: var(--text);
  padding: 2.2mm 0; border-bottom: 1px dotted var(--line);
}
.quest-list li:last-child { border-bottom: none; }
.quest-box {
  flex-shrink: 0; width: 4.5mm; height: 4.5mm; border: 1.4px solid var(--gold); border-radius: 1mm;
}
.quest-hint { font-size: 9pt; color: var(--muted); margin: 5mm 0 0; }

/* 형광펜 강조(핵심 결론) — LLM이 **로 감싼 문구를 <mark>로 변환해 넣는다.
   브라우저 기본 mark 스타일(검은 글자 위 노란 배경)은 다크 테마와 안 맞아 직접 재정의한다. */
mark {
  /* 글자 아래 45%만 칠하는 형광펜 + 실제 Bold — 예전의 옅은 배경 전체 칠하기는
     본문과 대비가 약해 "어디가 핵심인지" 잘 안 보였다. */
  background: linear-gradient(transparent 55%, rgba(199,161,58,0.55) 55%);
  color: #fff;
  font-weight: 700;
  padding: 0 0.8mm;
  border-radius: 0.6mm;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* 괄호 속 "쉽게 풀어쓴 설명" — 본문보다 살짝 옅고 작게 둬서, 핵심 문장과 부연 설명이
   시각적으로 구분되게 한다(둘 다 같은 굵기·색이면 어디가 설명이고 어디가 핵심인지
   구별이 안 된다는 피드백을 반영). */
.gloss { color: var(--muted); font-size: 0.94em; }

.disclaimer {
  margin-top: 10mm; padding-top: 5mm; border-top: 1px solid var(--line);
  font-size: 9pt; color: var(--muted);
}

/* ── 신살/개수 태그 ── */
.tag {
  display: inline-block;
  background: rgba(141,150,184,0.14);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3mm;
  padding: 0.5mm 2.5mm;
  margin: 0 1mm 1mm 0;
  font-size: 8.5pt;
}

/* ── 궁합 리포트 ── */
.compat-cover {
  min-height: 297mm;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16mm 26mm;
}
.compat-cover .eyebrow { font-size: 11pt; letter-spacing: 0.28em; color: var(--gold); margin-bottom: 10mm; }
.compat-cover h1 { font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 25pt; color: var(--star); line-height: 1.5; margin: 0 0 6mm; }
.compat-cover .subtitle { font-size: 11.5pt; color: var(--muted); margin-bottom: 16mm; }

.compat-pair { display: flex; gap: 10mm; width: 100%; max-width: 150mm; margin-bottom: 12mm; }
.compat-person {
  flex: 1; border: 1px solid var(--line); border-radius: 3mm; padding: 6mm;
  text-align: left; background: rgba(199,161,58,0.04);
}
.compat-person .p-name { font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 14pt; color: var(--star); margin-bottom: 3mm; }
.compat-person .p-row { font-size: 10pt; color: var(--muted); margin-bottom: 1.5mm; }
.compat-person .p-row b { color: var(--text); }
.compat-vs { align-self: center; font-size: 16pt; color: var(--gold); font-family: 'ReportMyeongjo','Batang','바탕',serif; }

.compat-score-num { font-size: 54pt; color: var(--gold); font-weight: bold; line-height: 1; margin-bottom: 2mm; }
.compat-score-label { font-size: 10.5pt; color: var(--muted); margin-bottom: 14mm; }

.compat-section {
  width: 100%; text-align: left; padding: 18mm 26mm 16mm;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.compat-section h2 {
  font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 16pt; color: var(--star);
  border-bottom: 1px solid var(--line); padding-bottom: 4mm; margin: 0 0 6mm;
}
.compat-section p { margin: 0 0 5mm 0; text-align: justify; color: var(--text); }
.compat-rel-list { list-style: none; margin: 0 0 6mm; padding: 0; }
.compat-rel-list li {
  font-size: 10pt; color: var(--muted); padding: 2mm 0; border-bottom: 1px dotted var(--line);
}
.compat-rel-list li b { color: var(--text); }

/* 차트 바로 아래 붙는 "읽는 법" 캡션 — 차트만 봐서는 뭘 뜻하는지 모른다는
   피드백을 반영. 소수점/새 판단 없이 차트 자체를 어떻게 읽는지만 설명하는
   정적 텍스트라 매 리포트마다 동일하게 안전히 넣을 수 있다. */
.chart-caption {
  font-size: 9pt; color: var(--muted); line-height: 1.8;
  max-width: 130mm; margin: 3mm auto 8mm; text-align: left;
  border-left: 2px solid var(--gold-dim); padding-left: 4mm;
}
.chart-caption b { color: var(--text); }

/* 평생사주와 궁합은 웹과 같은 밝은 읽기 면을 사용한다.
   표지는 남색으로 남겨 두 상품의 첫인상을 통일한다. */
html:has(> body.lifetime-report), html:has(> body.compat-report),
body.lifetime-report, body.compat-report { background: #faf8f4; }
body.lifetime-report, body.compat-report { color: #29394b; font-size: 11.3pt; line-height: 1.8; }
.lifetime-report .cover, .compat-report .compat-cover {
  background: #24344b;
  --star: #fff; --text: #e2e9ef; --muted: #c1ccd7;
  --gold: #e0c78d; --gold-dim: #c4a873; --line: rgba(255,255,255,.19);
}
.lifetime-report .cover .subtitle, .compat-report .compat-cover .subtitle { max-width: 145mm; line-height: 1.7; }
.lifetime-report .benefits, .lifetime-report .toc,
.lifetime-report .chapter, .compat-report .compat-section { background: #faf8f4; }
.lifetime-report .benefits, .lifetime-report .toc { min-height: 297mm; padding: 18mm 23mm; }
.lifetime-report .benefits .eyebrow, .lifetime-report .toc .eyebrow,
.lifetime-report .chapter .chapter-num { color: #937440; }
.lifetime-report .benefits h2, .lifetime-report .toc h2, .lifetime-report .chapter h2,
.compat-report .compat-section h2 { color: #24344b; border-color: #dedfd9; }
.lifetime-report .benefit-ttl { color: #24344b; }
.lifetime-report .benefit-desc, .lifetime-report .toc li { color: #596879; }
.lifetime-report .toc a { color: #2f4052; }
.lifetime-report .toc li { border-color: #dedfd9; }
.lifetime-report .toc li .num { color: #947442; }
.lifetime-report .chapter { padding: 18mm 23mm 16mm; font-size: 11.3pt; line-height: 1.78; }
.lifetime-report .chapter .chapter-ghost { color: #f1ede4; }
.lifetime-report .chapter h3.sub, .compat-report .compat-body h3.sub { border-bottom-color: #dedfd9; }
.lifetime-report .chapter p, .compat-report .compat-section p {
  color: #354457; line-height: 1.78; text-align: left; overflow-wrap: break-word;
}
.lifetime-report .chapter .chapter-keywords { margin-bottom: 8mm; }
.lifetime-report .chapter-keywords .kw-chip {
  border-color: #e6d9bd; background: #f6efdf; color: #7a5f2c; font-size: 8.8pt;
}
/* 강조 — 실제 Bold + 글자 아래쪽만 칠하는 형광펜(예전 #eee4ca 전체 칠하기는 대비가 약했다). */
.lifetime-report mark, .compat-report mark { background: linear-gradient(transparent 56%, #f3d78a 56%); color: #14233a; font-weight: 700; }
.lifetime-report .gloss, .compat-report .gloss { color: #667486; }
.lifetime-report .quest-card { border-color: #e6e2d8; border-left-color: #c7a13a; background: #f5f1e8; }
.lifetime-report .quest-card-ttl { color: #24344b; }
.lifetime-report .quest-list li { color: #354457; border-color: #e6e2d8; }
.lifetime-report .quest-box { border-color: #937440; }
.lifetime-report .quest-hint, .lifetime-report .disclaimer,
.compat-report .disclaimer { color: #718092; border-color: #dedfd9; }
.compat-report .compat-section { padding: 18mm 23mm 16mm; font-size: 11.3pt; line-height: 1.78; }
.compat-report .compat-section h2 { font-size: 19pt; }
.compat-report .compat-rel-list li { color: #5c6a79; border-color: #dedfd9; }
.compat-report .compat-rel-list li b { color: #24344b; }
.compat-reading { margin: 0 0 8mm; padding: 6mm 7mm; border-left: 3px solid #c7a13a; border-radius: 0; background: #f5f1e8; }
.compat-reading .label { margin-bottom: 2mm; color: #937440; font-size: 8.5pt; font-weight: 800; }
.compat-report .compat-reading p { margin: 0; color: #263b4b; font-size: 12pt; line-height: 1.65; }
.compat-report .compat-subtitle { margin: 8mm 0 4mm; color: #24344b; font-size: 12pt; }
.compat-report .compat-body h3.sub { font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 12.5pt; color: #24344b; margin: 8mm 0 3mm; padding-bottom: 1.5mm; border-bottom: 1px solid #dedfd9; break-after: avoid; }
.compat-report .compat-body h3.sub:first-child { margin-top: 0; }
.compat-report .compat-body ul.sub-list { margin: 0 0 5mm; padding-left: 6mm; }
.compat-report .compat-body ul.sub-list li { margin-bottom: 1.5mm; }
.compat-report .compat-data-intro { color: #657283; font-size: 9pt; line-height: 1.65; }
.compat-report .compat-key-fact { margin: 0 0 5mm; color: #cbd5dd; font-size: 9.5pt; line-height: 1.5; }
.compat-report .compat-key-fact strong { display: block; margin-top: 1mm; color: #f0ddb1; font-family: 'ReportMyeongjo','Batang','바탕',serif; font-size: 19pt; }
.compat-report .compat-score-line { color: #cbd5dd; font-size: 9pt; }
.compat-report .compat-score-line b { margin-left: 2mm; color: #f0ddb1; font-size: 15pt; }
.compat-report .compat-score-label { max-width: 120mm; margin: 2mm 0 10mm; line-height: 1.6; }