/* 3종 시각화 전용. app.css 다음에 로드된다(needsChartCss). */

/* ── 점성 글리프 폰트: Noto Sans Symbols(v1) + Symbols 2, 실측 커버리지대로 2분할 서브셋
   자체 호스팅(외부 CDN 금지). U+211E(역행, PRESCRIPTION TAKE)는 두 폰트 모두 없어
   의도적으로 본문 폰트(시스템 sans-serif)로 폴백한다 — @font-face 를 안 만든다.
   출처/서브셋 절차: public/fonts/build-subset.py. 라이선스: public/fonts/OFL.txt.
   근거: docs/astrology-engine-research.md §10.3. */
@font-face {
  font-family: 'Astro Glyphs';
  src: url('/fonts/NotoSansSymbols-astro-subset.woff2') format('woff2');
  unicode-range: U+2648-2653, U+263D-2647, U+260A-260D, U+26B3-26BC;
  font-display: swap;
}
@font-face {
  font-family: 'Astro Glyphs';
  src: url('/fonts/NotoSansSymbols2-astro-subset.woff2') format('woff2');
  unicode-range: U+2609, U+25A1, U+25B3, U+1F774, U+2BD3-2BDF;
  font-display: swap;
}
.astro-glyph { font-family: 'Astro Glyphs', sans-serif; }

/* ── 사주 4주 표 */
.saju-table, .run-table, .astro-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.saju-table caption, .run-table caption, .astro-table caption {
  caption-side: top; text-align: left; color: var(--ink-soft); font-size: 13px; padding: 0 0 8px;
}
.saju-table th, .saju-table td, .run-table th, .run-table td, .astro-table th, .astro-table td {
  border: 1px solid var(--line); padding: 8px 6px; text-align: center; white-space: nowrap;
}
.saju-table th[scope="row"], .run-table th[scope="row"], .astro-table th[scope="row"] {
  text-align: left; color: var(--ink-soft); font-weight: 500; background: #fff;
}
.saju-table .glyph, .run-table .glyph { font-size: 22px; line-height: 1.2; }
.saju-table .is-day { background: #fdf7e8; }
.saju-table .is-unknown { color: var(--ink-soft); background: #f5f3f0; }
.run-table .is-current { background: var(--accent-soft); font-weight: 700; }
.chart-note { color: var(--ink-soft); font-size: 14px; margin: 12px 0 0; }
.chart-block { margin: 24px 0 0; }
.chart-h3 { font-size: 16px; margin: 0 0 8px; }
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.chart-warnings { color: var(--ink-soft); font-size: 14px; padding-left: 20px; }

/* ── 사주 판(흙먹) 스코프. 이 아래 새 규칙은 예외 없이 `.page--reading .saju-board` 로 시작하고
   안에서는 --r-* 토큰만 읽는다. 블록·칩·레일 클래스가 점성 「주요 각」과 공용이고
   두 파셜 다 같은 .page--reading 안에서 도므로, 감싸개 없이는 반드시 샌다(스펙 §10).
   역할 토큰(--r-gold)은 여기서 재선언한다 — 전역 --gold 재활용은 포커스 링과 자미 배지로 샌다.
   값은 app.css :root 에 있다(홈의 무료 판이 chart.css 없이 같은 색을 써야 한다). */
.page--reading .saju-board {
  /* 판 전용 토큰. 처음엔 이 금빛 하나였고 2026-09-10 오행 점이 다섯을 더했다(그쪽은 --wx-* 라
     이 블록이 필요 없어 app.css :root 로 갔다). 부가 텍스트(궁성·부제·시각 모름 열)는
     새로 만들지 않고 --r-muted-2(5.67:1)를 쓴다 — 처음엔 --r-sub(#8d7660)·
     --r-dim(#6f5c4c)을 새로 뒀는데 각각 4.37:1·2.95:1(위쪽 라디얼 위에서는 3.84·2.60)로
     AA 를 밑돌았다. 판 위 금빛은 14.62:1.
     값이 아니라 가리킴인 이유: .reading-col 이 --r-gold 를 #c8a35a 로 쥐고 있어 이 재선언이
     없으면 판 금빛이 죽는다. 그래서 역할은 여기 남고 값만 :root 로 올라갔다. */
  --r-gold: var(--board-gold);
}

/* 4주 표: 한 표 두 밴드. 세로선 없이 가로 괘선만.
   공용 규칙(.saju-table 그룹 셀렉터)이 살아 있으므로 border 단축 속성·밝은 배경을 여기서 되돌린다.
   white-space 는 되돌리지 않는다 — 공용 규칙의 nowrap 을 그대로 물려받아 스펙 §3 「밴드 2 셀은
   white-space: nowrap 유지」를 만족한다. 시안은 본문 셀을 normal 로 뒀지만 가장 긴 값이 3자(지장간·납음)라
   360px 에서도 열 안에 들어가 화면 결과가 같다. 값이 길어지면 시안 쪽으로 다시 열 것. */
.page--reading .saju-board .saju-table { table-layout: fixed; }
.page--reading .saju-board .saju-table th,
.page--reading .saju-board .saju-table td {
  border: 0; border-bottom: 1px solid var(--r-line);
  text-align: center; font-weight: 400; padding: 6px 2px;
}
.page--reading .saju-board .saju-table thead th {
  font-size: 11px; letter-spacing: .06em; color: var(--r-muted); padding-bottom: 9px;
}
.page--reading .saju-board .saju-table thead th.lab { width: 46px; }
.page--reading .saju-board .saju-table thead th small {
  display: block; font-size: 10px; letter-spacing: 0; color: var(--r-muted-2); font-weight: 400; margin-top: 2px;
}
.page--reading .saju-board .saju-table thead th.is-day small { color: #c9a074; }
.page--reading .saju-board .saju-table tbody th[scope="row"] {
  text-align: left; font-size: 11px; color: var(--r-muted); letter-spacing: .04em; padding-left: 0;
}
.page--reading .saju-board .saju-table td { color: var(--r-muted); font-size: 12px; }
.page--reading .saju-board .saju-table .is-day { color: var(--r-gold); background: none; }
.page--reading .saju-board .saju-table .is-unknown { color: var(--r-muted-2); background: none; }
.page--reading .saju-board .saju-table .gongmang {
  font-style: normal; color: var(--r-accent-lit); font-weight: 600;
}
.page--reading .saju-board .saju-table .row-stem td,
.page--reading .saju-board .saju-table .row-branch td {
  font-family: var(--display-serif); font-size: 26px; line-height: 1.15;
  color: var(--r-ink); padding: 3px 2px 6px;
}
.page--reading .saju-board .saju-table .row-stem td.is-day,
.page--reading .saju-board .saju-table .row-branch td.is-day { color: var(--r-gold); font-weight: 600; }
.page--reading .saju-board .saju-table .row-stem td.is-unknown,
.page--reading .saju-board .saju-table .row-branch td.is-unknown { font-size: 20px; color: var(--r-muted-2); }
.page--reading .saju-board .saju-table .row-stem td small,
.page--reading .saju-board .saju-table .row-branch td small {
  display: block; font-family: inherit; font-size: 10px;
  color: var(--r-muted); line-height: 1.5; font-weight: 400;
}
.page--reading .saju-board .band--main td,
.page--reading .saju-board .band--main th[scope="row"] { border-bottom: 0; }
.page--reading .saju-board .band--main tr:first-child td,
.page--reading .saju-board .band--main tr:first-child th { padding-top: 8px; }
.page--reading .saju-board .band--sub { border-top: 1px solid var(--r-line); }
.page--reading .saju-board .band--sub th,
.page--reading .saju-board .band--sub td {
  padding: 5px 2px; font-size: 11.5px; border-bottom: 1px solid rgba(38, 32, 32, .55);
}
.page--reading .saju-board .band--sub tr:last-child th,
.page--reading .saju-board .band--sub tr:last-child td { border-bottom: 0; }
.page--reading .saju-board .band--sub th[scope="row"] { font-size: 10.5px; }
.page--reading .saju-board .chart-note {
  font-size: 12px; color: var(--r-muted); margin: 10px 0 0;
  padding-left: 10px; border-left: 2px solid var(--r-line);
}

/* 레일은 tabindex=0 이라 초점을 받는다. 링이 overflow 에 잘리지 않게 안쪽으로 넣는다
   (홈 카드와 같은 관례). */
.page--reading .saju-board .scroll-x:focus-visible {
  outline: 2px solid var(--r-accent-lit); outline-offset: -2px; border-radius: 4px;
}

/* ── 판: 블록 · 신살 칩 (시안 c398377).
   .chart-block 은 공용 규칙(38행)의 margin 을 그대로 쓴다 — 같은 값을 다시 쓰지 않는다. */
.page--reading .saju-board .chart-h3 {
  font-family: var(--display-serif);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 9px;
  color: var(--r-ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* 부제는 세운과 오행에만 붙는다(2026-09-10 오행 블록이 「원국 여덟 자」를 단다). 대운 h3 는 텍스트만 남긴다.
   font-family 는 app.css:21 본문 스택을 **문자 그대로** 복사한다 — 스펙 §9 가 「본문 산세리프」로 잠갔고,
   뒤 세 항목을 자르면 Pretendard·Apple SD Gothic Neo 가 없는 윈도우·안드로이드에서 제네릭 sans-serif 로
   떨어져 부제만 중국어 자형으로 렌더된다(app.css:20 의 한국어 자형 오염 방지 주석과 같은 이유). */
.page--reading .saju-board .chart-h3 small {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--r-muted-2);
}
.page--reading .saju-board .chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.page--reading .saju-board .chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--r-line);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px;
  color: var(--r-ink);
  background: rgba(244, 234, 219, .03);
}
.page--reading .saju-board .chip-sub { font-size: 10.5px; color: var(--r-muted); }

/* ── 판: 오행 오각형 (시안 C8, 스펙 2026-09-10).
   색은 라벨 옆 점 다섯에만 쓴다 — 다섯 색이 값 도형을 칠하면 판에서 가장 센 색 자리를
   일주 금빛에게서 뺏는다(시안 C3 에서 확인). 정보는 언제나 <text> 라벨이 진다:
   다섯 색은 서로의 명도로 안 갈리므로(토·금 1.10:1) 색만으로 오행을 가리게 두면
   그 순간 접근성 위반이다.

   오행 다섯은 **제 이름의 토큰을 갖는다.** 값 셋은 판이 이미 쓰던 것에서 가져왔지만
   `var(--r-jade)` 처럼 **가리키게** 두지 않는다 — `--r-gold` 는 「이 판의 강조색」이라는
   역할 토큰이고 궁합 상대 판에서 청백으로 재선언된다(`.saju-board.is-partner`).
   그대로 두면 그날 상대분 판의 토 점만 아무도 안 고쳤는데 색이 바뀐다. 값을 베끼는 것이
   역할에 묶이는 것보다 싸다. 대비는 전부 판 바탕(#0e0c0c) 기준.
   **선언은 app.css :root 에 있다** — 홈의 무료 판이 chart.css 없이 같은 다섯 색을 쓴다.
   재선언하는 스코프가 없으므로 :root 한 자리로 충분하다. 여기 남은 것은 소비자뿐이다. */
.page--reading .saju-board .wx-fig { display: flex; justify-content: center; padding: 2px 0 0; }
.page--reading .saju-board .wx-ring { fill: none; stroke: var(--r-line); stroke-width: 1; }
.page--reading .saju-board .wx-ring--mid { stroke-dasharray: 2 3; }
.page--reading .saju-board .wx-spoke { stroke: var(--r-line); stroke-width: 1; }
.page--reading .saju-board .wx-val {
  fill: rgba(255, 217, 168, .16); stroke: var(--r-gold); stroke-width: 1.5; stroke-linejoin: round;
}
.page--reading .saju-board .wx-lb {
  fill: var(--r-muted); font-size: 11px;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
}
.page--reading .saju-board .wx-lb.is-zero { fill: var(--r-muted-2); }
.page--reading .saju-board .wx-p-wood { fill: var(--wx-wood); }
.page--reading .saju-board .wx-p-fire { fill: var(--wx-fire); }
.page--reading .saju-board .wx-p-earth { fill: var(--wx-earth); }
.page--reading .saju-board .wx-p-metal { fill: var(--wx-metal); }
.page--reading .saju-board .wx-p-water { fill: var(--wx-water); }
/* 클래스 넷(0,4,0)이라 색 규칙 셋(0,3,0)을 특정도로 이긴다 — 순서에 기대지 않는다.
   0 인 축은 채우지 않고 테두리만 남겨 「없다」를 그림으로도 말한다. */
.page--reading .saju-board .wx-pt.is-zero { fill: none; stroke: var(--r-line); stroke-width: 1; }

/* ── 사주 대운 · 세운 레일: 표를 유지하고 border-spacing 으로 열 하나를 상자로 만든다.
   덮는 공용 규칙 — 23행(width/border-collapse), 27행(사방 border/padding), 34행(.glyph 22px),
   36행(.is-current 배경). 공용 규칙 자체는 한 줄도 안 고친다(§10). */
.page--reading .saju-board .scroll-x {
  margin: 0 calc(var(--r-pad) * -1); padding: 0 var(--r-pad); scrollbar-width: none;
}
.page--reading .saju-board .scroll-x::-webkit-scrollbar { display: none; }
.page--reading .saju-board .run-table {
  width: auto; border-collapse: separate; border-spacing: 6px 0; margin-left: -6px; font-size: 12px;
}
.page--reading .saju-board .run-table th[scope="col"],
.page--reading .saju-board .run-table td {
  text-align: center; font-weight: 400; white-space: nowrap;
  background: rgba(244, 234, 219, .02);
  border: 0; border-left: 1px solid var(--r-line); border-right: 1px solid var(--r-line);
}
.page--reading .saju-board .run-table th[scope="col"] {
  font-size: 11px; color: var(--r-muted); letter-spacing: .04em; padding: 7px 10px 3px;
  border-top: 1px solid var(--r-line); border-radius: 4px 4px 0 0;
}
/* 행 머리 열은 시각적으로 접는다(글자는 sr-only 로 남는다). 모서리 칸도 base 처럼
   th[scope=col] 이라 바로 위 규칙과 특정도가 같다 — **뒤**에 둬야 이긴다.
   앞에 두면 첫 칸 앞에 빈 상자가 하나 뜬다(인쇄에서 실제로 그랬다). */
.page--reading .saju-board .run-table th.lab0,
.page--reading .saju-board .run-table td.lab0 { width: 0; padding: 0; border: 0; background: none; }
.page--reading .saju-board .run-table .glyph {
  font-family: var(--display-serif); font-size: 19px; line-height: 1.2; color: var(--r-ink); padding: 2px 10px 0;
}
.page--reading .saju-board .run-table .glyph small {
  display: block; font-family: inherit; font-size: 10px; color: var(--r-muted); line-height: 1.5; font-weight: 400;
}
.page--reading .saju-board .run-table .tg {
  font-size: 11.5px; color: var(--r-muted); padding: 1px 10px 8px;
  border-bottom: 1px solid var(--r-line); border-radius: 0 0 4px 4px;
}
/* !important 는 바로 위 th[scope="col"] 규칙(속성 선택자로 특정도가 더 높다 — 0,4,1 > 0,4,0)의
   border-top·background 를 이기려는 것이다. background 에도 붙여야 한다 — 안 붙이면 현재 칸의
   나이·연도 th 만 강조 배경을 못 받아 상자 위아래 톤이 갈린다. */
.page--reading .saju-board .run-table .is-current {
  border-color: rgba(184, 73, 46, .75) !important;
  background: rgba(255, 217, 168, .06) !important;
}
.page--reading .saju-board .run-table th.is-current { color: var(--r-accent-lit); font-weight: 600; }
.page--reading .saju-board .run-table td.glyph.is-current { color: var(--r-gold); font-weight: 600; }
.page--reading .saju-board .run-table td.tg.is-current { color: #d8b48a; }

/* ── 자미 명반 (설계 스펙 2026-08-21). 값은 시안 ziwei-board.html 이식.
   이 블록은 `.page--reading` 안에서만 렌더된다(판을 include 하는 라우터가 reading·result 둘뿐
   이고 둘 다 pageClass 'reading') — 그래서 --r-* 토큰에 밝은 폴백을 두지 않는다(스펙 §13).
   대비 계약(스펙 §10): --r-accent(#b8492e)는 다크 위 3.53:1 이라 텍스트에 쓰지 않는다.
   테두리·면에만 쓰고, 주홍 '글자'는 전부 --r-accent-lit(7.35:1).
   세로쓰기(writing-mode) 금지 — 밝기·사화·스크린리더가 전부 깨진다. */

/* 시각 모름 배너 — 격자·중앙 셀은 평소와 완전히 동일하다(스펙 §8). */
.chart-assumed {
  border: 1px solid rgba(184, 73, 46, .6); background: rgba(184, 73, 46, .14);
  border-radius: 4px; padding: 9px 11px; margin: 0 0 10px; font-size: 12px; line-height: 1.55;
}
.chart-assumed b { display: block; font-weight: 700; margin-bottom: 2px; }

.ziwei-board {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--r-line); border: 1px solid var(--r-line);
}
/* 12궁 셀 배경은 전부 같다 — 위계는 면이 아니라 타이포·배지·점이 진다(스펙 §2-3). */
.palace { background: var(--r-cell); padding: 5px 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* 신궁 + 공궁 배지가 한 칸에 겹치면(명반의 13.8%) 궁명이 글자마다 줄바꿈돼 3줄이 된다.
   궁명은 절대 안 쪼개고, 자리가 모자라면 배지 묶음이 다음 줄로 내려가게 한다. */
.palace-head { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; justify-content: space-between; }
.palace-name { font-family: var(--display-serif); font-size: 12px; font-weight: 700; color: var(--r-ink); white-space: nowrap; }
.palace.is-soul .palace-name { color: var(--r-accent-lit); font-size: 13px; }
.palace.is-soul .palace-head { border-bottom: 1px solid rgba(184, 73, 46, .45); padding-bottom: 2px; }
/* 삼방사정은 궁명 뒤 4px 점. 명궁 본궁은 이미 주홍 궁명이라 점을 받지 않는다. */
.palace.is-trio .palace-name::after {
  content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--r-accent-lit); margin-left: 4px; vertical-align: middle;
}
.palace-badges { display: flex; gap: 2px; flex-shrink: 0; }
/* app.css 의 전역 .badge 는 페이지 스코프가 없어 --accent-soft 채움이 여기까지 샌다.
   시안의 배지는 투명 알약이고, 채우면 공궁 배지 대비가 5.34:1 → 4.36:1 로 AA 를 밑돈다. */
.palace-badges .badge { font-size: 8px; border-radius: 999px; padding: 0 3px; line-height: 1.6; white-space: nowrap; background: transparent; }
.palace-badges .badge--body { color: var(--r-gold); border: 1px solid rgba(200, 163, 90, .55); }
.palace-badges .badge--empty { color: var(--r-muted-2); border: 1px solid rgba(154, 135, 118, .6); }
.palace-stars { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 2px 5px; align-content: flex-start; padding: 1px 0 2px; }
.palace-borrow { width: 100%; font-size: 9px; color: var(--r-muted-2); font-style: italic; line-height: 1.4; }
.star { display: inline-flex; align-items: baseline; white-space: nowrap; font-size: 11px; line-height: 1.45; }
.star--major { color: var(--r-ink); font-weight: 700; font-size: 12px; }
.star--lucky { color: var(--r-jade); }
.star--malefic { color: var(--r-malefic); }
.star--minor { color: var(--r-muted); font-size: 10px; }
.star-br { font-weight: 400; font-size: 9px; color: var(--r-muted); margin-left: 1px; }
/* 사화는 한 벌 알약 + 화기만 채움. 색이 아니라 글자(록/권/과/기)와 형태가 구분을 진다(스펙 §2-6). */
.sahwa {
  font-size: 9px; font-weight: 700; line-height: 1.4; padding: 0 3px; border-radius: 999px; margin-left: 2px;
  color: var(--r-accent-lit); background: transparent; border: 1px solid rgba(184, 73, 46, .75);
}
.sahwa--ji { color: #0f0c0a; background: var(--r-muted-2); border-color: var(--r-muted-2); }
.palace-foot { border-top: 1px solid rgba(38, 32, 32, .9); padding-top: 3px; display: flex; flex-direction: column; gap: 1px; }
.palace-minor { font-size: 9px; color: var(--r-muted-2); line-height: 1.5; word-break: keep-all; }
.palace-span { display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; color: var(--r-muted); }
.palace-span b { font-weight: 400; }
.palace-span i { font-style: normal; color: var(--r-ink); font-size: 11px; }

/* 중앙 천반 = 해석의 열쇠. `overflow: auto` 를 다시 넣지 말 것 —
   중앙은 안에서 스크롤되지 않고 2·3행을 밀어 올려야 한다(스펙 §6). */
.ziwei-center {
  grid-row: 2 / 4; grid-column: 2 / 4; background: var(--r-cell-2); padding: 9px 8px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center;
}
.center-five { font-family: var(--display-serif); font-size: 19px; font-weight: 700; line-height: 1.2; margin: 0; }
.center-five span { display: block; font-size: 10px; font-weight: 400; color: var(--r-muted); margin-top: 2px; }
.center-soul { font-size: 11px; color: var(--r-muted); margin: 0; }
.center-soul b { color: var(--r-ink); font-weight: 700; }
.center-sahwa {
  /* padding 은 축약형으로 쓴다 — app.css 의 ul 기본 padding-inline-start(40px)가 남으면
     알약이 오른쪽으로 밀려 궁 이름 우측 정렬과 어긋난다. */
  list-style: none; width: 100%; border-top: 1px solid var(--r-line); padding: 6px 0 0;
  display: flex; flex-direction: column; gap: 3px; margin: 0;
}
.center-sahwa li { display: flex; align-items: baseline; gap: 5px; font-size: 10px; }
.center-sahwa .sahwa { margin-left: 0; flex: 0 0 auto; padding: 0 4px; }
.cs-star { color: var(--r-ink); font-weight: 700; }
.center-sahwa em { margin-left: auto; font-style: normal; color: var(--r-muted-2); font-size: 9px; }

/* 격자 아래 사실 블록 — 날짜·사주·납음 등 신원 확인용 값(스펙 §7). 2026-09-22 에 유료 화면에서
   걷었고(판 위 되읽기 한 줄이 이미 같은 일을 한다), `/unse` 의 판만 보는 종목에서만 다시 뜬다 —
   거기는 해석이 없어 손님이 「내 판이 맞나」를 볼 자리가 판밖에 없다. 게이트는 파셜의 showFacts. */
.ziwei-facts { margin-top: 10px; font-size: 11px; line-height: 1.5; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.ziwei-facts dt { color: var(--r-muted-2); font-size: 10px; white-space: nowrap; }
.ziwei-facts dd { margin: 0; }
.ziwei-facts dd.glyph { font-size: 13px; letter-spacing: .06em; }
.ziwei-facts .pillar-assumed { color: var(--r-muted); }
.fact-est { color: var(--r-accent-lit); font-size: 10px; border: 1px dashed rgba(184, 73, 46, .6); border-radius: 999px; padding: 0 5px; }

/* 경고 두 갈래 — 사용자 사실은 목록, 유파 선택은 한 문장(스펙 §9). */
.chart-notes { margin-top: 14px; }
.chart-notes-t { font-size: 10px; letter-spacing: .14em; color: var(--r-accent-lit); margin: 0 0 4px; }
.chart-notes ul { list-style: none; padding: 0; margin: 0; font-size: 11.5px; line-height: 1.6; }
.chart-notes li { padding-left: 10px; position: relative; }
.chart-notes li::before { content: '·'; position: absolute; left: 2px; color: var(--r-muted); }
.chart-method { margin-top: 12px; font-size: 11px; line-height: 1.6; color: var(--r-muted); }
.chart-method b { display: block; font-size: 10px; letter-spacing: .14em; color: var(--r-muted-2); font-weight: 400; margin-bottom: 3px; }

.chart-alt { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--r-line); font-size: 12px; }
/* summary 십자 토글 — app.css 「판 읽는 법」(.page--reading .board-help > summary)과 같은 옷. 근거는 그쪽 주석.
   line-height 20px = 12px 글자에서 높이 36 → top:50% 가 정수(18)라 획이 픽셀에 앉는다. */
.chart-alt > summary { position: relative; list-style: none; padding: 8px 0 8px 19px; line-height: 20px; cursor: pointer; color: var(--r-muted); }
.chart-alt > summary::-webkit-details-marker { display: none; }
.chart-alt > summary::before, .chart-alt > summary::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 9px; border-top: 1px solid var(--r-accent-lit);
}
.chart-alt > summary::after { transform: rotate(90deg); }
.chart-alt[open] > summary { color: var(--r-ink); }
.chart-alt[open] > summary::after { display: none; }
.chart-alt > summary:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 2px; }
.chart-alt-list { margin: 10px 0 0; padding-left: 18px; color: var(--r-muted); line-height: 1.7; font-size: 11px; }

/* ── 값 접기(2026-09-20). 점성 판의 천체 표·기운·주요 각을 소제목 줄로 내린다 — 맛보기에서
   어려운 것이 화면을 먼저 채우던 것을 접는다(시안 C).
   새 색을 만들지 않는다: 십자 토글은 바로 위 `.chart-alt` 와 같은 그림·같은 토큰이고, 급만 다르다
   (저쪽은 12px 잔글씨, 이쪽은 소제목 16px). 그래서 콤마로 합치지 않고 선언을 복사한다 —
   `.chart-alt` 의 font-size 12px 이 상속 기준이 되고, 아래 인쇄 블록의
   `.chart-alt, .board-help { display: none }` 을 물려받으면 종이에서 값이 통째로 사라진다.
   **`.chart-fold` 는 그 인쇄 줄에 넣지 않는다** — 낱낱의 값은 종이에 남아야 한다. */
.chart-fold { margin: 24px 0 0; }
/* 세로 패딩 합 12 + 줄 높이 24 = 36 → top:50% 가 정수(18)라 획이 픽셀에 앉는다. */
.chart-fold > summary { position: relative; list-style: none; padding: 6px 0 6px 19px; line-height: 24px; cursor: pointer; }
.chart-fold > summary::-webkit-details-marker { display: none; }
.chart-fold > summary::before, .chart-fold > summary::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 9px; border-top: 1px solid var(--r-accent-lit);
}
.chart-fold > summary::after { transform: rotate(90deg); }
.chart-fold[open] > summary::after { display: none; }
.chart-fold > summary:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 2px; }
/* 소제목이 여는 줄 **안**에 산다 — 판머리(app.css 의 `.fold > summary .board-title`)와 같은 처방.
   눌러야 할 것이 제목 자체다. h3 기본 margin 을 지우지 않으면 여는 줄이 두 줄 높이가 된다. */
.chart-fold > summary .chart-h3 { display: inline; margin: 0; font-weight: 500; }
/* 미리보기는 **접힌 동안만** 보인다 — 펼치면 바로 아래 속살이 같은 말을 더 정확히 한다. */
.fold-peek { margin-left: 8px; font-size: 11.5px; font-weight: 400; color: var(--r-muted); }
.chart-fold[open] > summary .fold-peek { display: none; }
/* 접힌 접기끼리는 24px 이 너무 벌어진다 — 세 줄이 한 덩이로 읽히게 좁힌다.
   **둘 다 접혔을 때만** 좁힌다: 자기가 펼쳐졌으면 소제목·설명·속살이 바로 위 접힌 한 줄에
   달라붙는다(앞 형제만 보면 그 조합이 6px 로 샌다). 네 조합 중 하나만 6px 다. */
.chart-fold + .chart-fold { margin-top: 6px; }
.chart-fold[open] + .chart-fold,
.chart-fold + .chart-fold[open] { margin-top: 24px; }

/* ── 점성 판. 색은 먹빛과 주홍 둘뿐이고, 위계는 종류가 아니라 오브(정확도)가 만든다.
   값 출처: docs/superpowers/specs/2026-08-21-astro-board-design.md §3·§4·§6.
   흙먹 다크 토큰은 새로 만들지 않는다 — .page--reading .reading-col 의 재매핑을 그대로 탄다. */
.astro-place { margin: 0 0 10px; font-size: 12px; color: var(--ink-soft); }

/* --r-ink/--r-accent(#f4eadb/#b8492e)의 채널 미러 — rgba() 합성용. 팔레트를 바꾸면 여기도 같이 바꾼다. */
.page--reading .astro-wheel {
  --astro-ink-rgb: 244, 234, 219;
  --astro-accent-rgb: 184, 73, 46;
}
.astro-wheel { width: 100%; height: auto; display: block; margin: 2px 0 14px; }
.astro-wheel .disc { fill: #100c0a; stroke: rgba(var(--astro-ink-rgb), .09); stroke-width: 1; }
.astro-wheel .band { fill: rgba(var(--astro-ink-rgb), .028); }
.astro-wheel .ring { fill: none; stroke: rgba(var(--astro-ink-rgb), .15); stroke-width: 1; }
.astro-wheel .ring--out { stroke: rgba(var(--astro-ink-rgb), .26); }
.astro-wheel .ring--inner { stroke-dasharray: 2 4; }
.astro-wheel .sign-line { stroke: rgba(var(--astro-ink-rgb), .13); stroke-width: 1; }
.astro-wheel .sign-label { font-size: 9px; fill: var(--ink-soft); }
.astro-wheel .sign-label .astro-glyph { font-size: 12px; }
.astro-wheel .house-line { stroke: rgba(var(--astro-ink-rgb), .10); stroke-width: 1; }
.astro-wheel .house-line.is-asc { stroke: var(--accent); stroke-width: 2; }
.astro-wheel .house-label { font-size: 8.5px; fill: #7d6a5c; }
.astro-wheel .angle-tick { stroke: rgba(var(--astro-ink-rgb), .30); stroke-width: 1.4; }
.astro-wheel .angle-tick.is-strong { stroke: var(--accent); stroke-width: 2; }
.astro-wheel .angle-lab { font-size: 8.5px; fill: #8a7565; letter-spacing: .04em; }
.astro-wheel .angle-lab.is-strong { fill: var(--accent); }
.astro-wheel .planet-tick { stroke: rgba(var(--astro-ink-rgb), .32); stroke-width: 1; }
.astro-wheel .planet-label { fill: var(--ink); }
.astro-wheel .planet-label .astro-glyph { font-size: 15px; }
.astro-wheel .planet-label .rx { font-size: 8px; fill: var(--accent); }
/* 색만 클래스가 정한다 — 진하기·굵기는 오브에서 계산해 인라인 style 로 온다.
   배경이 다른 화면이 생겨도 여기 두 줄만 갈아끼우면 된다. */
.astro-wheel .aspect { fill: none; }
.astro-wheel .aspect--hard { stroke: var(--accent); }
.astro-wheel .aspect--soft { stroke: var(--ink); }

/* 시각 모름: 하우스·앵글에 기대는 것만 점선·뮤트로 낮춘다. 값은 하나도 지우지 않는다. */
.astro-wheel.is-unsure .house-line { stroke: rgba(var(--astro-ink-rgb), .06); stroke-dasharray: 2 3; }
.astro-wheel.is-unsure .house-line.is-asc { stroke: rgba(var(--astro-accent-rgb), .42); stroke-width: 1.4; stroke-dasharray: 3 3; }
.astro-wheel.is-unsure .house-label { fill: #5c4c40; }
.astro-wheel.is-unsure .angle-tick { stroke: rgba(var(--astro-ink-rgb), .14); stroke-dasharray: 2 2; }
.astro-wheel.is-unsure .angle-tick.is-strong { stroke: rgba(var(--astro-accent-rgb), .45); }
.astro-wheel.is-unsure .angle-lab { fill: #5c4c40; }
.astro-wheel.is-unsure .angle-lab.is-strong { fill: rgba(var(--astro-accent-rgb), .7); }
/* 점선까지만 낮춘다. opacity 를 겹치면 인라인 stroke-opacity 와 곱해져 하한 .11 이 .055 로 떨어지는데,
   그 값은 설계 §4 가 「그려는 놨는데 안 보이면 삭제와 같다」며 이미 기각한 값이다. */
.astro-wheel.is-unsure .aspect--angle { stroke-dasharray: 2 3; }

/* ── 앵글 줄. 앵글은 하늘의 점이 아니라 지평선·자오선이라 천체 표에 섞지 않는다. */
.astro-angles {
  margin: 0 0 14px; padding: 9px 0; font-size: 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 5px;
}
.astro-angles > div { display: flex; gap: 10px; align-items: baseline; }
.astro-angles dt { flex: 0 0 auto; min-width: 44px; font-size: 11px; color: var(--ink-soft); }
.astro-angles dd { margin: 0; color: var(--ink); }
.astro-angles dd .astro-glyph { font-size: 13px; margin-right: 2px; }
.astro-angles.is-unsure dd { color: var(--ink-soft); }
/* 꼬리표는 <dl> 밖의 형제다(콘텐츠 모델). 상자의 아래 선을 꼬리표로 넘겨 줄 묶음과 한 상자로 보이게 한다.
   꼬리표는 시각 모름일 때만 렌더되므로 .is-unsure 가 그 조건과 1:1 이다. */
.astro-angles.is-unsure { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.astro-angles-note {
  margin: 3px 0 14px; padding-bottom: 9px; font-size: 11px; line-height: 1.55; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.astro-angles-note b { color: var(--accent); font-weight: 400; }

/* 하우스는 시각을 모르면 통째로 임의값이다 — 열만 낮추고 값은 남긴다. */
.astro-table td.is-unsure { color: #94806e; }
/* 표의 「역행」은 휠의 ℞ 와 같은 신호다 — 같은 주홍으로 읽히게 한다. */
.astro-table .is-rx { color: var(--accent); }

/* ── 기운 (원소 · 성질 · 음양) */
.astro-note { margin: 0 0 7px; font-size: 10.5px; color: var(--ink-soft); }
.astro-dist { margin: 0; font-size: 12px; display: flex; flex-direction: column; gap: 5px; }
.astro-dist > div { display: flex; gap: 10px; align-items: baseline; }
.astro-dist dt { flex: 0 0 auto; min-width: 44px; font-size: 11px; color: var(--ink-soft); }
.astro-dist dd { margin: 0; color: var(--ink-soft); }
.astro-dist dd b { color: var(--ink); font-weight: 600; }

/* ── 주요 각 : 천체별 묶음. 줄 안은 오브 순, 정각(1° 미만)은 주홍. */
.astro-aspects { margin: 0; font-size: 11.5px; }
.astro-aspects > div {
  display: flex; gap: 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
.astro-aspects dt { flex: 0 0 auto; min-width: 60px; color: var(--ink); }
.astro-aspects dt .astro-glyph { font-size: 13px; }
.astro-aspects dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-soft); }
.astro-aspects dd > span { white-space: nowrap; }
.astro-aspects dd > span.is-exact { color: var(--accent); }
.astro-aspects dd i { font-style: normal; margin-left: 3px; color: var(--ink-soft); }
.astro-aspects dd > span.is-exact i { color: var(--accent); }
/* 시각 모름: 앵글에 기댄 것만 휠의 점선과 같은 근거로 낮춘다 — 상승궁·중천 묶음 전체와,
   천체 묶음 안에서 상대가 앵글인 항목. 둘 다 남은 일은 정각 주홍을 상속색으로 내리는 것뿐이다
   (dd 가 이미 --ink-soft 라 나머지는 저절로 낮다). 오브 숫자는 지우지 않는다. */
.astro-aspects > div.is-unsure dt { color: var(--ink-soft); }
.astro-aspects > div.is-unsure dd > span.is-exact,
.astro-aspects > div.is-unsure dd > span.is-exact i,
.astro-aspects dd > span.is-unsure.is-exact,
.astro-aspects dd > span.is-unsure.is-exact i { color: inherit; }

/* ── 궁합 겹친 휠(설계 §6-1·§6-2, 시안 A안). 팔레트에 **색 하나만** 더한다 —
   본인은 이미 쓰는 금(#ffd9a8), 상대분은 그 반대편의 저채도 청백. 나머지 색·rgb 미러·시각 모름
   낮춤은 새로 만들지 않는다: 휠 SVG 가 `.astro-wheel` 클래스를 같이 달아 위 규칙을 그대로 탄다
   (디스크·띠·링·사인선·하우스선·is-unsure·인쇄 print-color-adjust까지). 여기는 그 위에 얹히는
   것만 — 두 링, 교차 선, 상대 AC 글자, 범례, 교차 목록. */
.page--reading .syn { --syn-self: #ffd9a8; --syn-partner: #a8c6dd; }
.syn-wheel .ring--split { stroke: rgba(var(--astro-ink-rgb), .10); stroke-dasharray: 1 3; }
/* 소속은 색이 정하고, 링 위치(바깥=상대분)가 한 번 더 받쳐 준다 — 색만으로 가르지 않는다. */
.syn-wheel .pt-tick { stroke-width: 1; }
.syn-wheel .pt-lab .astro-glyph { font-size: 15px; }
.syn-wheel .is-self .pt-tick { stroke: rgba(255, 217, 168, .45); }
.syn-wheel .is-self .pt-lab { fill: var(--syn-self); }
.syn-wheel .is-partner .pt-tick { stroke: rgba(168, 198, 221, .45); }
.syn-wheel .is-partner .pt-lab { fill: var(--syn-partner); }
/* 색만 클래스가 정한다 — 진하기·굵기는 오브에서 계산해 인라인 style 로 온다(.aspect--* 와 같은 규칙). */
.syn-wheel .xa { fill: none; }
.syn-wheel .xa--hard { stroke: var(--accent); }
.syn-wheel .xa--soft { stroke: var(--ink); }
.syn-wheel .who { font-size: 9.5px; letter-spacing: .06em; }
.syn-wheel .who--partner { fill: var(--syn-partner); }
/* 상대분이 시각을 모르면 그 사람의 상승궁은 확정값이 아니다 — 낮추되 지우지 않는다(설계 §6). */
.syn-wheel .who.is-unsure { opacity: .55; }

.syn-key {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin: 0 0 10px; font-size: 11.5px; color: var(--ink-soft);
}
.syn-key i {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 5px; vertical-align: -1px;
}
.syn-key .k-self i { background: var(--syn-self); }
.syn-key .k-partner i { background: var(--syn-partner); }
.syn-key .k-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.syn-cap { margin: 0 0 14px; font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); }
.syn-cap b { color: var(--ink); font-weight: 400; }

/* 교차 목록. 필터를 걸지 않으므로 50줄이 넘는다 — 글자는 작게, 열은 넷으로 좁게 유지한다. */
.xa-list { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0; }
.xa-list caption {
  text-align: left; font-size: 11px; color: var(--ink-soft);
  letter-spacing: .06em; padding: 0 0 6px;
}
.xa-list th { text-align: left; font-size: 10.5px; font-weight: 400; color: var(--ink-soft); padding: 0 8px 4px 0; }
.xa-list td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.xa-list tr:last-child td { border-bottom: 0; }
.xa-list .a { color: var(--syn-self); white-space: nowrap; }
.xa-list .b { color: var(--syn-partner); white-space: nowrap; }
.xa-list .t { color: var(--ink); white-space: nowrap; }
/* --accent(3.69:1)는 면·테두리용이다 — 글자는 --r-accent-lit(7.35:1)로 낸다(app.css:1030). */
.xa-list .t.is-hard { color: var(--r-accent-lit, var(--accent)); }
.xa-list .astro-glyph { font-size: 15px; }
.xa-list .o { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; font-size: 11px; }
/* 앵글은 유니코드 점성 글리프가 없다(glossary.ts:248) — 'AC'·'MC' 글자가 글리프 자리를 맡는다. */
.xa-list .ang { font-size: 10.5px; letter-spacing: .04em; }

/* 교차 하우스(2026-09-20 이전 이름 「하우스 겹치기」) — 그림에 없는 값이라 이 목록이 유일한 자리다. .astro-dist 와 같은 모양. */
.syn-overlay { margin: 0; font-size: 12px; display: flex; flex-direction: column; gap: 7px; }
.syn-overlay dt { font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
.syn-overlay dd { margin: 0; color: var(--ink-soft); line-height: 1.8; }
.syn-overlay dd b { color: var(--ink); font-weight: 600; }
.syn-overlay .ang { font-size: 10.5px; letter-spacing: .04em; }

/* ── 사주 궁합·자미 합반(설계 §6-4). 원칙은 겹친 휠과 같다 — 한 판, 본인이 기준, 상대가 얹힌다.
   **새 색은 없다.** 위 `.syn` 이 이미 든 --syn-partner 하나를 두 판이 그대로 쓴다. */

/* 사주는 표 두 벌이다. 상대분 판은 마크업이 같고 판의 금빛만 청백으로 갈아 낀다 —
   `.saju-board` 를 그대로 달았으므로 괘선·밴드·인쇄 되돌림은 저 위 규칙이 전부 물려준다. */
.page--reading .saju-board.is-partner { --r-gold: var(--syn-partner); margin-top: 20px; }
/* 1인분 판의 caption 은 sr-only 다. 여기서는 「당신」·「상대분」이 보이는 이름표라 색을 준다. */
.page--reading .saju-board .saju-table caption { color: var(--r-ink); font-size: 12px; letter-spacing: .06em; }
.page--reading .saju-board.is-partner .saju-table caption { color: var(--syn-partner); }

/* 자미는 판이 하나다. 상대 명궁은 칸 테두리 한 겹 + 배지로만 얹는다 —
   궁 셀 배경 열둘이 전부 같아야 한다는 1인분 판의 규칙(스펙 §2-3)을 깨지 않는다. */
.palace.is-partner-soul { box-shadow: inset 0 0 0 1px var(--syn-partner); }
.palace-badges .badge--partner { color: var(--syn-partner); border: 1px solid rgba(168, 198, 221, .55); }
/* 상대 생년사화가 내 궁에 떨어진 표식. 칸은 「어느 궁이냐」만 말하고 낱낱은 판 밖 목록이 진다. */
.palace-cross { margin: 0; font-size: 9px; line-height: 1.6; color: var(--syn-partner); word-break: keep-all; }

/* 사화 교차 목록 — 양방향 전부. UA 마커를 그대로 쓴다(list-style 을 끄지 않는다). */
.syn-cross { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.9; color: var(--ink-soft); }
.syn-cross em { font-style: normal; color: var(--ink); }

/* 자미 명반은 여기서 키우지 않는다 — 기둥이 400px 로 고정이라 넓은 화면에서도 판 폭은 그대로다. */
@media (min-width: 640px) {
  .saju-table, .run-table, .astro-table { font-size: 15px; }
}

/* 첫인상 카드 — 맛보기 티저(.block-teaser)와 전체풀이 카드가 같은 그릇이다(스펙 2026-09-04 잠금 10).
   판(.saju-board)의 흙먹·괘선 어휘를 따르되 클래스를 분리한다. 판 밖이라 그쪽 토큰
   재선언이 안 닿는다. 시안 docs/superpowers/mockups/first-impression/index.html 의 .tA.r11.out / .f1.
   `--r-gold` 는 선언하지 않는다 — 이 블록에 소비자가 없다(판에서 베껴 오지 말 것). */
.page--reading .block-card {
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(244, 234, 219, .04);
}
/* 위 12px 은 표제(.blk-lead)와의 간격이다 — 파셜이 상태와 무관하게 표제를 먼저 내므로
   티저가 표제 없이 서는 경로는 없다(그래서 옛 20px 을 따로 남겨 두지 않는다). */
.page--reading .block-teaser { margin: 12px var(--r-pad) 0; }
/* 카드 밖 표제(시안 2026-09-19 B). 「운명의 짝」·「제N장 …에서 공개됩니다」 — 카드 안에 있던
   .block-kicker·.block-sub 가 그대로 여기로 나왔다(_block-teaser.ejs). 표제가 장 목록과 카드
   사이에 서면서 예전에 여기 있던 규칙 하나가 없어졌다: 목록 마지막 구분선을 끊던
   `.next:has(+ .block-teaser)` 는 이제 목록 다음이 표제라 영영 안 맞는다. 선이 겹치지도 않는다 —
   목록 끝 선과 카드 상단 사이에 표제 두 줄이 들어간다.
   제목(.blk-lead-t)의 글꼴·크기는 선언하지 않는다 — app.css 의 `.next-title` 규칙에 묶여 있다
   (같은 화면·같은 급이라 복사하지 않는다). 위 padding 30px 은 시안(26px)이 아니라 `.next`·`.rv-sec`
   의 섹션 패딩(app.css)에 맞춘 값이다 — 같은 컬럼의 구획 리듬을 깨지 않는다. 그 값만 여기 손으로
   적는 이유는 인쇄 숨김(이 파일 끝 print 블록)과 한 파일에 두기 위해서다. */
.page--reading .blk-lead { padding: 30px var(--r-pad) 0; }
.page--reading .blk-lead-d { margin: 0; font-size: 13px; color: var(--r-muted); }
/* 사진은 카드 폭 정사각 자리다 — 벤더가 다른 비율을 줘도 카드가 흔들리지 않게 여기서 받는다. */
.page--reading .block-card .block-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(244, 234, 219, .06);
  display: flex; align-items: center; justify-content: center;
}
.page--reading .block-card .block-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 32px 파일을 카드 폭으로 키운다 — 보간만 하면 모자이크가 아니라 흐린 얼굴이 된다(윤곽이 되레 읽힌다).
   pixelated 로 격자를 살리되 blur 로 셀 경계를 녹인다 — 각진 경계가 「깨진 이미지」로 보였다.
   scale 은 blur 가 가장자리를 투명으로 빨아들여 사진 둘레에 밝은 테를 남기는 것을 덮는다. */
.page--reading .block-card .block-photo img.block-veil {
  image-rendering: pixelated;
  filter: blur(6px);
  transform: scale(1.12);
}
/* 가림 위의 잠금 — 사진 전체가 결제 시트를 여는 클릭 영역이고, 판은 그 표식이다.
   색은 낙관(封)과 같은 --r-accent 다. 사진 ::after 그라디언트에는 z-index 가 없으므로 이 z-index 1 이 위에 온다. */
/* 티저 사진 자리만 먹으로 깐다 — 카드 기본 미색 배경이면 320px 폭에서 blur 유출부가 밝은 테로 보인다.
   scale 을 더 키우는 것보다 이쪽이 폭과 무관하게 안전하다. */
.page--reading .block-teaser .block-photo { background: var(--r-void); }
.page--reading .block-teaser .block-lock {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  /* button 기본값을 벗긴다 — 색·폰트는 판(plate)이 정한다. */
  padding: 0; border: 0; background: transparent; color: inherit; font: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* 모자이크가 부드러워 대비가 약하다 — 판 뒤에만 얕은 먹을 깔아 글자를 읽히게 한다. */
.page--reading .block-teaser .block-lock::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(14, 12, 12, .58), rgba(14, 12, 12, 0) 75%);
}
.page--reading .block-teaser .block-lock-plate {
  position: relative;
  display: grid; justify-items: center; gap: 8px;
  padding: 16px 20px 14px;
  border: 1px solid var(--r-accent); border-radius: 2px;
  background: rgba(14, 12, 12, .42);
  /* 테두리는 --r-accent, 글자는 --r-accent-lit 다 — 3.69:1 인 --r-accent 는 텍스트에 못 쓴다(app.css 토큰 주석). */
  color: var(--r-accent-lit);
  transition: background .15s, transform .1s;
}
/* 포커스 링은 버튼이 아니라 판(plate)에 세운다 — 버튼은 사진(`overflow: hidden`)과 경계가 같아
   바깥에 그려지는 outline 이 offset 까지 더해 통째로 잘린다(WCAG 2.4.7). 색은 리딩 화면 관례대로
   홈 토큰 --gold 가 아니라 --r-gold 다(a11y.test.ts 가 접기 summary 셋에 대해 이미 잠근 규칙). */
.page--reading .block-teaser .block-lock:focus-visible { outline: none; }
.page--reading .block-teaser .block-lock:focus-visible .block-lock-plate {
  outline: 2px solid var(--r-gold); outline-offset: 2px;
}
.page--reading .block-teaser .block-lock-text {
  font-family: var(--display-serif); font-size: 13px; line-height: 1; letter-spacing: .12em;
}
/* 「›」는 결제 시트의 수단 버튼(.method .chev)이 이미 쓰는 기호다 — 누르면 다음으로 간다는 뜻. */
.page--reading .block-teaser .block-lock .chev { opacity: .8; }
/* hover 를 쓸 수 있는 기기에서만 — 터치에서는 탭 뒤 hover 가 눌린 채로 남는다(iOS). */
@media (hover: hover) {
  .page--reading .block-teaser .block-lock:hover .block-lock-plate { background: rgba(14, 12, 12, .62); }
}
.page--reading .block-teaser .block-lock:active .block-lock-plate { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .page--reading .block-teaser .block-lock-plate { transition: none; }
  /* transform 만 끄면 터치에서 누름 피드백이 0 이 된다(탭 하이라이트도 꺼 뒀다) — 배경으로 대신한다. */
  .page--reading .block-teaser .block-lock:active .block-lock-plate { transform: none; background: rgba(14, 12, 12, .62); }
}
/* 아래 30% 얕은 먹 그라디언트 — 낙관·본문으로 시선을 내린다. 대기·실패 자리엔 사진이 없어 끈다. */
.page--reading .block-card .block-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 70%, rgba(14, 12, 12, .55) 100%);
}
.page--reading .block-card .block-photo.is-wait::after,
.page--reading .block-card .block-photo.is-fail::after { content: none; }
.page--reading .block-card .block-photo.is-wait span { font-size: 12px; color: var(--r-muted-2); letter-spacing: .08em; }
/* 낙관(인장) — 카드마다 하나. 封(한 자)·因緣(두 자) 모두 받는다. */
.page--reading .block-card .block-seal {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  /* 장식이다 — 티저에서 사진 전체가 누르는 자리인데 여기만 죽은 구역이 되면 안 된다. */
  pointer-events: none;
  display: grid; place-items: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  border: 1.5px solid var(--r-accent); border-radius: 3px;
  color: var(--r-accent); font-family: var(--display-serif); font-size: 15px; font-weight: 700;
  line-height: 1; letter-spacing: .06em;
  transform: rotate(-6deg); opacity: .92;
}
.page--reading .block-card .block-body { padding: 14px 16px 16px; }
.page--reading .block-card .block-kicker { margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; color: var(--r-muted-2); }
.page--reading .block-card .block-title {
  margin: 0 0 12px; font-family: var(--display-serif); font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--r-ink);
}
.page--reading .block-card .block-title:has(+ .block-sub) { margin-bottom: 5px; }
/* 제목 아래 20px 은 **티저만** 쓴다(시안 2026-09-19 시안 2) — 소제목이 표제로 나가면서 21px 제목
   밑에 12px 짜리 라벨-값 목록이 바로 붙어 제목이 첫 항목의 머리글로 읽혔다. 공용 기본값을 올리지
   않는 이유: 그러면 전체 풀이 카드가 윗줄 `:has(+ .block-sub)` 의 취소에 기대게 되고, `:has()` 를
   모르는 파서에서 그 줄이 통째로 버려지면 폴백이 옛 12px 이 아니라 20px 이 된다. */
.page--reading .block-teaser .block-title { margin-bottom: 20px; }
.page--reading .block-card .block-sub {
  margin: 0 0 12px; font-family: var(--display-serif); font-size: 13px; letter-spacing: .1em; color: var(--r-accent-lit);
}
.page--reading .block-card .block-facts { margin: 0; display: grid; grid-template-columns: 70px 1fr; gap: 7px 14px; }
.page--reading .block-card .block-facts dt {
  font-family: var(--display-serif); font-size: 12px; color: var(--r-muted); letter-spacing: .04em; padding-top: 3px;
}
.page--reading .block-card .block-facts dd { margin: 0; font-family: var(--display-serif); font-size: 15px; line-height: 1.5; color: var(--r-ink); }
/* 가림은 행 단위다 — 라벨은 선명, 열린 값은 스크린리더가 읽고, 가린 값(더미)만 흐린다. */
.page--reading .block-card .block-facts dd.is-veiled { filter: blur(5px); user-select: none; color: var(--r-muted); }
.page--reading .block-card .block-cap { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--r-muted-2); }
/* 대기 문구는 이탤릭이 아니다 — .ch-wait 와 같은 규칙(한글 합성 이탤릭 금지, app.css 주석). */
.page--reading .block-card .block-wait { font-style: normal; }
/* 인생 그래프 블록(스펙 2026-09-19) — 카드 박스 없이 괘선 사이 SVG 하나. 시안 전체 2·맛보기 2.
   판 밖이라 --r-* 토큰만 읽는다(값은 .reading-col 에서 내려온다). 주홍 글자는 --r-accent-lit(7.35:1)뿐이다. */
.page--reading .life-graph { margin: 0 0 18px; padding: 12px 0 4px; border-top: 1px solid var(--r-line); border-bottom: 1px solid var(--r-line); }
/* 자물쇠(.block-lock)가 inset:0 이라 기준 상자가 필요하다 — 티저만 쓰지만 여기 한 자리에 둔다. */
.page--reading .life-graph .lg-wrap { position: relative; }
/* overflow:visible — 10대 눈금과 「지금 N세」 라벨이 viewBox 밖으로 조금 넘는다. */
.page--reading .life-graph svg.lg { width: 100%; height: auto; display: block; overflow: visible; }
.page--reading .life-graph .lg-grid { stroke: rgba(244, 234, 219, .06); stroke-width: 1; }
.page--reading .life-graph .lg-ax { stroke: var(--r-line); stroke-width: 1; }
.page--reading .life-graph .lg-tick { font-size: 10.5px; fill: var(--r-muted); letter-spacing: .04em; text-anchor: middle; }
.page--reading .life-graph .lg-tick.is-now { fill: var(--r-accent-lit); font-weight: 600; }
.page--reading .life-graph .lg-now { stroke: var(--r-accent-lit); stroke-width: 1; stroke-dasharray: 2 3; }
.page--reading .life-graph .lg-now-lab { font-size: 10px; fill: var(--r-accent-lit); letter-spacing: .1em; }
.page--reading .life-graph .lg-val { font-size: 10.5px; fill: var(--r-ink); text-anchor: middle; font-variant-numeric: tabular-nums; }
.page--reading .life-graph .lg-val.is-peak { fill: var(--r-gold); font-weight: 700; }
/* 얕은 금빛 면 — --r-gold(#c8a35a) 10%. 면은 리터럴이다(토큰에 알파를 못 실는다, 판의 관례와 같다). */
.page--reading .life-graph .lg-area { fill: rgba(200, 163, 90, .10); }
.page--reading .life-graph .lg-line { fill: none; stroke: var(--r-ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.page--reading .life-graph .lg-dot { fill: var(--r-void); stroke: var(--r-ink); stroke-width: 1.6; }
.page--reading .life-graph .lg-dot.is-peak { fill: var(--r-gold); stroke: var(--r-gold); }
/* 대기 문구는 이탤릭이 아니다 — 카드(.block-card .block-wait)와 같은 규칙. */
.page--reading .life-graph .block-wait { font-style: normal; }
/* 티저: 괘선 없이 표제 아래 눕고(시안 맛보기 2) 그래프 전체를 가린다.
   자물쇠 판은 `.page--reading .block-teaser .block-lock` 규칙을 그대로 받는다. */
.page--reading .life-graph.block-teaser { margin: 12px var(--r-pad) 0; padding: 14px 0 8px; border: 0; }
.page--reading .life-graph.block-teaser svg.lg { filter: blur(5px); opacity: .75; }

/* 맛보기 장식은 인쇄 대상이 아니다(가린 값이 더미이므로). 표제도 같이 내린다 — 안 내리면
   「운명의 짝」 두 줄만 남고 그 아래가 비어 종이에 미아가 된다. */
@media print { .page--reading .block-teaser, .page--reading .blk-lead { display: none; } }

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  /* 자미 판은 격자 밖에도 값이 있다(사실 블록·경고·배너) — 격자만 지정하면 그쪽이 흰 종이에 흰 글씨가 된다.
     사주 판만 뺀다 — 아래에서 종이 토큰으로 되돌리므로 다크 색을 강제로 찍으면 안 된다(스펙 §8). */
  .ziwei-board, .ziwei-facts, .chart-notes, .chart-method, .chart-assumed,
  .astro-wheel { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .chart-alt, .board-help { display: none; }
  /* 값 접기는 **숨기지 않는다** — 위 둘은 설명이라 종이에서 빼도 되지만 낱낱의 값은 남아야 한다.
     대신 여는 줄을 종이로 되돌린다. `.chart-fold` 는 `.fold` 를 일부러 안 달았으므로(app.css 의
     `.page--reading .fold > summary`(0,3,1)가 판머리 옷을 씌운다) 그쪽 인쇄 되돌림이 하나도
     안 닿는다 — 안 하면 누를 것이 없는 종이에 19px 들여쓰기와 살구색(#e08a70, 백지 2.6:1) 십자
     획이 그대로 찍힌다. 규칙은 `.fold` 쪽과 같은 짝이다(app.css 인쇄 블록). */
  .page--reading .chart-fold > summary {
    --r-accent-lit: #7a2f2f;
    padding: 0;
    cursor: auto;
    margin-bottom: 10px;
  }
  .page--reading .chart-fold > summary::before,
  .page--reading .chart-fold > summary::after { display: none; }
  /* 미리보기는 화면에서 접힌 동안만 보이는 잔글씨다 — 종이에서는 접기가 펴지므로 바로 아래
     속살이 같은 말을 더 정확히 한다. `[open]` 규칙만으로는 JS 가 죽어 닫힌 채 찍히는 경우에 남는다. */
  .page--reading .chart-fold .fold-peek { display: none; }
  /* JS 가 아예 안 실리는 경로(fold.js 404·네트워크 실패·차단)의 보조. 인라인은 항상 실행돼
     접어 두는데 펴 줄 fold.js 가 없으면 종이에서 값이 통째로 사라진다 — 서버가 open 으로 내서
     막으려던 바로 그 결과다. 문답 접기가 같은 구멍을 같은 한 줄로 이미 메운다(app.css).
     크로뮴 전용이고, 모르는 의사요소면 브라우저가 규칙을 통째로 버리므로 위험이 없다. */
  .page--reading details.chart-fold::details-content { content-visibility: visible; block-size: auto; }

  /* 페이지 수준(.page--reading·.reading-col 배경/글자색, .board-title, .reading-grain)은
     app.css 의 @media print **파일 끝**에 있다 — chart.css 는 needsChartCss 일 때만 실려서
     결제 화면 셋을 못 덮는다. 여기는 판 안쪽만 다룬다.

     그 페이지 규칙이 글자색을 종이색으로 내리는데, 자미·점성 격자는 위 print-color-adjust
     대상이라 **어두운 면을 그대로 찍는다** — 그 안에서 종이색을 상속하면 검은 면에 검은 글씨가
     된다. color 를 명시하지 않고 상속만 받는 .center-five(중앙 오행국 19px)가 정확히 여기
     걸린다. 면을 강제로 찍는 영역은 글자색도 흙먹으로 되돌린다. */
  .page--reading .ziwei-board,
  .page--reading .ziwei-facts,
  .page--reading .chart-notes,
  .page--reading .chart-method,
  .page--reading .chart-assumed { color: var(--r-ink); }

  /* ── 사주 판을 종이로 되돌린다. 판 안쪽 셀렉터는 .page--reading .saju-board 하나뿐이다.
     color 는 토큰이 아니라 .page--reading(app.css:770)·.reading-col(774)에서 상속되므로 명시한다.
     --ink/--ink-soft/--line/--accent 별칭은 .reading-col(app.css:786-790)에서 이미 계산돼 내려오므로
     후손에서 --r-* 만 갈아서는 안 덮인다 — 한 줄짜리 보험으로 같이 재선언한다. 배경은 선언하지 않는다. */
  .page--reading .saju-board {
    --r-ink: #1b1a19; --r-muted: #5b5754; --r-line: #ded6c9; --r-accent: #7a2f2f;
    --r-gold: #1b1a19;
    /* 이 둘은 오래 빠져 있던 구멍이다 — 화면값 #9a8776(백지 3.1:1)·#e08a70(2.6:1)이 그대로 찍혀
       궁성 부제가 종이에서 안 읽혔다. 토큰 한 줄로 덮는다. */
    --r-muted-2: #5b5754; --r-accent-lit: #7a2f2f;
    --ink: #1b1a19; --ink-soft: #5b5754; --line: #ded6c9; --accent: #7a2f2f; --accent-soft: transparent;
    color: #1b1a19;
  }
  /* 블록 카드도 판 밖이라 위 재선언이 안 닿는다. 이 블록이 실제로 소비하는 토큰만
     내린다: 키커·각주의 --r-muted-2, dt 의 --r-muted, dd·제목의 --r-ink, 낙관의 --r-accent, 테두리의 --r-line.
     안 내리면 백지에 #f4eadb(dd)·#9a8776(3.1:1)로 찍혀 사진만 남고 여섯 항목이 안 읽힌다 — `.p-line` 과 같은 처방. */
  .page--reading .block-card {
    --r-ink: #1b1a19;
    --r-muted: #5b5754;
    --r-muted-2: #5b5754;
    --r-accent: #7a2f2f;
    /* 소제목(.block-sub)이 쓴다 — 안 내리면 화면값 #e08a70 이 백지에 2.5:1 로 찍힌다.
       티저는 인쇄에서 숨지만 전체풀이 카드는 인쇄 대상이다. 위 .saju-board 와 같은 처방. */
    --r-accent-lit: #7a2f2f;
    --r-line: #ded6c9;
    background: none;
    color: #1b1a19;
  }
  /* 먹 그라디언트는 background 라 인쇄에서 반쯤만 찍혀 얼룩이 된다 — 끈다. */
  .page--reading .block-card .block-photo::after { content: none; }
  /* 인생 그래프도 판 밖이라 위 .saju-board 재선언이 안 닿는다(카드와 같은 처방). 이 파셜이 실제로
     소비하는 토큰만 내린다: 곡선·숫자의 --r-ink, 눈금의 --r-muted, 「지금」의 --r-accent-lit,
     괘선·바닥선의 --r-line, 점 속을 비우는 --r-void, 정점의 --r-gold.
     안 내리면 #f4eadb 곡선이 흰 종이에 흰 선으로 찍혀 그래프가 통째로 사라진다. 티저는 위에서 숨는다.
     금빛은 인쇄에 안 쓴다(판과 같은 규칙) — 정점도 검정으로 찍고 굵기·채움으로 드러낸다. */
  .page--reading .life-graph {
    --r-ink: #1b1a19;
    --r-muted: #5b5754;
    --r-accent-lit: #7a2f2f;
    --r-line: #ded6c9;
    --r-void: #fff;
    --r-gold: #1b1a19;
    color: #1b1a19;
  }
  /* 눈금선은 토큰이 아니라 크림 6% 리터럴이라 위 재선언이 안 닿는다 — 종이색으로 한 번 더 내린다. */
  .page--reading .life-graph .lg-grid { stroke: #ded6c9; }
  /* 면도 금빛 10% 리터럴이라 재선언이 안 닿는다 — 검정 8% 로 내린다(위 「금빛은 인쇄에 안 쓴다」). */
  .page--reading .life-graph .lg-area { fill: rgba(27, 26, 25, .08); }
  /* 금빛은 인쇄에 안 쓴다. 일주는 검정 굵게, 열 머리만 주홍. */
  .page--reading .saju-board .saju-table .is-day,
  .page--reading .saju-board .saju-table .row-stem td.is-day,
  .page--reading .saju-board .saju-table .row-branch td.is-day { color: #1b1a19; font-weight: 700; }
  .page--reading .saju-board .saju-table thead th.is-day,
  .page--reading .saju-board .saju-table thead th.is-day small { color: #7a2f2f; font-weight: 700; }
  /* 밴드 2 내부 괘선은 화면 리터럴 rgba(38,32,32,.55) 이라 종이에서 밴드 경계선(--r-line)보다 진해져
     위계가 뒤집힌다 — 종이색으로 맞춘다. */
  .page--reading .saju-board .band--sub th,
  .page--reading .saju-board .band--sub td { border-bottom-color: #ded6c9; }
  .page--reading .saju-board .chip { background: none; color: #1b1a19; }
  /* 브라우저 기본 economy 는 배경을 떨군다 — 「지금」은 테두리와 굵기로도 드러나야 한다. */
  .page--reading .saju-board .run-table th[scope="col"],
  .page--reading .saju-board .run-table td { background: none; }
  .page--reading .saju-board .run-table .is-current { border-color: #7a2f2f !important; background: none !important; }
  .page--reading .saju-board .run-table td.glyph.is-current,
  .page--reading .saju-board .run-table td.tg.is-current { color: #1b1a19; font-weight: 700; }
  .page--reading .saju-board .chart-h3 { color: #1b1a19; }
  /* 척도가 없으면 다각형이 허공에 뜬 먹칠이 된다 — 인쇄 괘선(#ded6c9)은 흰 종이에 1.44:1 로
     사실상 안 보이는데 다각형은 17.38:1 먹선이다. **바깥 고리 하나만** 읽히게 올린다(새 색을
     만들지 않고 이 판이 인쇄에서 이미 쓰는 --r-muted). 안쪽 고리·살은 장식이라 그대로 둔다. */
  .page--reading .saju-board .wx-ring { stroke: var(--r-muted); }
  .page--reading .saju-board .wx-ring--mid { stroke: var(--r-line); }
  /* 면은 종이에서 사라진다(.saju-table 이 print-color-adjust 대상 밖) — 반쯤 찍혀 얼룩이 되느니 끈다. */
  .page--reading .saju-board .wx-val { fill: none; }
  /* 색 점은 지운다. 빈 원으로 되돌리면 0 인 축과 구분이 사라지고, 라벨이 숫자를 이미 적는다. */
  .page--reading .saju-board .wx-pt { display: none; }

  /* ── 궁합. 판 밖 조각은 흙먹 토큰(--ink/--ink-soft)을 그대로 쥐어 백지에 흰 글씨로 찍힌다 —
     app.css 파일 끝 주석대로 종이 토큰이 판 안까지 내려오지 않기 때문이다. 파셜이 그 조각에만
     단 `syn-paper` 를 먹으로 되돌린다. 겹친 휠·12궁 격자에는 절대 주지 않는다 —
     그쪽은 어두운 면을 그대로 찍으므로 종이 먹을 상속하면 검은 면에 검은 글씨가 된다. */
  .page--reading .syn-paper { --ink: #1b1a19; --ink-soft: #5b5754; color: #1b1a19; }
  /* 상대분 판의 청백(#a8c6dd)은 백지에서 1.4:1 이다 — 판의 종이 토큰과 같은 먹으로 내린다.
     --r-gold 가 --syn-partner 를 참조하므로 이 한 줄이 일주 글자와 caption 을 함께 덮는다. */
  .page--reading .saju-board.is-partner { --syn-partner: #1b1a19; }
}