/* 신점당 공통 스타일. 모바일 우선. 외부 폰트·import 없음(시스템 폰트 스택). */
:root {
  --ink: #1b1a19;
  --ink-soft: #5b5754;
  --paper: #fbf8f3;
  --line: #ded6c9;
  --accent: #7a2f2f;
  --accent-soft: #f0e2dc;
  --gold: #a8832c;
  --radius: 10px;
  --gap: 16px;
  /* 명조. 컬럼(.home-col/.fortune-col/.reading-col/.side-col)마다 복제하다 네 번째가
     빠뜨려 세 화면의 명조가 통째로 죽었다 — `font:` 축약은 var 가 비면 선언이 통째로 무효다.
     한 자리로 올린다. 종이 화면은 이 변수를 참조하지 않으므로 달라지는 것이 없다. */
  --display-serif: 'Noto Serif KR', 'Apple Myungjo', 'Nanum Myeongjo', 'Batang', serif;
  /* 오행 다섯 색. 값은 chart.css `.page--reading .saju-board` 에 있던 것 그대로다(대비비가 이 값에
     걸려 있어 한 글자도 안 바꾼다. 기준은 판 바탕 #0e0c0c). 홈의 무료 판(.page--home .quick-board)과
     리딩 판이 같은 색을 써야 하는데 홈은 chart.css 를 안 싣는다 — --display-serif 와 같은 처방으로
     한 자리에 둔다. 소비자 규칙(.wx-p-*)은 옮기지 않았다, 여전히 판 스코프 안이다. */
  --wx-wood: #8fb3a4;   /*  8.50:1 — 자미 --r-jade 와 같은 값 */
  --wx-fire: #d4795c;   /*  6.21:1 — 자미 --r-malefic 과 같은 값 */
  --wx-earth: #ffd9a8;  /* 14.62:1 — 판 금빛과 같은 값 */
  --wx-metal: #cfd6d8;  /* 13.25:1 */
  --wx-water: #6f8fae;  /*  5.77:1 */
  /* 판 금빛의 **값** 자리. --r-gold 자체는 여기로 못 올린다 — 그건 「이 판의 강조색」이라는 역할
     토큰이라 스코프마다 다르게 선언돼 있고(.reading-col #c8a35a, 판 #ffd9a8, 상대분 판 청백,
     인쇄 먹) :root 에 적어 봐야 .reading-col 이 덮어 판 금빛이 #c8a35a 로 죽는다.
     값만 한 자리에 두고 각 스코프가 --r-gold 를 이 값으로 가리킨다. */
  --board-gold: #ffd9a8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* 한국어 자형 오염 방지: 한국어 폰트를 중국어 폰트보다 앞에 둔다 (ZIWEI-ENGINE.md §10-10). */
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -9999px; }
/* 다크 컬럼 안에서는 color 가 컬럼의 미색을 상속해 흰 배경에 크림 글자가 된다(1.19:1) —
   키보드 손님에게 스킵 링크가 사실상 없었다. 배경을 주는 자리에서 글자색도 같이 못박는다. */
.skip:focus { left: 8px; top: 8px; z-index: 10; background: #fff; color: #1b1a19; padding: 8px 12px; border-radius: var(--radius); }

.site-header, .site-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap);
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.site-footer { border-bottom: 0; border-top: 1px solid var(--line); display: block; color: var(--ink-soft); font-size: 14px; }
.site-logo { font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; }
/* 처리방침 줄 — 모든 화면의 푸터에 선다. 색을 **정하지 않고 상속한다**: 푸터 색은 화면마다
   다르고(.side-col 은 --s-muted-2, 종이는 --ink-soft, 홈·상세·풀이는 각 컬럼이 정한다)
   상속하면 그 화면이 이미 통과시킨 대비를 그대로 쓴다. 콜로폰(.colophon)이 규칙 없이
   푸터 색을 물려받는 것과 같은 관례다. 조판은 `.page--home .footer-lookup a` 를 그대로 옮겼다. */
.footer-legal, .footer-help { margin: 0 0 12px; }
.footer-legal a, .footer-help a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* 인라인 요소의 세로 패딩은 줄 상자를 밀지 않으므로 아래 콜로폰과의 간격은 그대로다. */
  padding: 6px 0;
}
/* 사업자 정보 — 글자를 찍은 그림 한 장(249×94, 3배 해상도, 투명·#b39a82). 홈·풀이 푸터 색과 같다. */
.footer-biz { margin: 0 0 12px; }
.footer-biz img { display: block; max-width: 100%; height: auto; }
/* 붓글씨 로고 — 한 장 PNG(신점당 + 神占四柱 인장, 830×290, 투명). 다크 크롬(홈·상세·풀이)에서만 렌더된다.
   48px 박스에서 글자 약 37px·인장 약 21px(위아래 투명 여백 포함). 1-B·2-B, 2026-09-03 */
.site-brand { display: block; height: 48px; width: auto; }
.site-nav { margin-left: auto; }
.site-nav a { color: var(--ink-soft); text-decoration: none; }

.doc { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.sec { margin: 0 0 40px; }
.sec-kicker { display: block; color: var(--accent); font-size: 13px; letter-spacing: .08em; margin: 0 0 4px; }
.sec-title { font-size: 22px; margin: 0 0 12px; line-height: 1.4; }
.hero-title { font-size: 32px; margin: 0 0 8px; }
.sec-lead, .hero-lead { color: var(--ink-soft); margin: 0 0 12px; }

.cta {
  display: inline-block; width: 100%; text-align: center;
  padding: 14px 20px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: 17px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.cta--ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.cta:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}
/* 스크립트가 옮겨 준 초점에는 링을 안 남긴다(사용자 지시 2026-09-22). tabindex="-1" 은 Tab 순서
   밖이라 여기 걸리는 초점은 사람이 직접 짚어 만든 것이 아니다 — JS 의 초점 이동, autofocus, 클릭.
   :focus:not(:focus-visible) 로는 못 지운다 — 모달리티가 키보드면 옮긴 초점에도 :focus-visible 이
   붙는다(크로미움 실측). 그래서 :focus 에서 통째로. 판 가로 스크롤 같은 tabindex="0" 은 안 걸린다.
   **여기서 전역이 아닌 자리가 하나 있다**: 이 줄은 (0,2,0)이고 아래쪽 `.side-col :focus-visible`
   도 (0,2,0)이라, 동률이면 뒤가 이겨 곁 화면(찾기·목록·처리방침·약관·오류)에서는 저쪽이
   남는다. 그 안의 유일한 대상이 lookup 의 `p.f-err[tabindex="-1"][autofocus]` 라 **의도대로**다 —
   폼 오류 요약은 브라우저가 준 초점이고 「지금 봐야 할 곳」이라 강조가 기능이다.
   quick.view.test.ts 가 이 순서를 잠근다. 뒤집으려면 이 줄을 `.side-col` 뒤로 옮기면 된다. */
[tabindex="-1"]:focus { outline: none; }

.form-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: #fff; }
.field { display: block; border: 0; margin: 0 0 20px; padding: 0; }
.field legend, .flabel { display: block; font-weight: 600; margin: 0 0 8px; }
.radio, .check { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 8px 0; }
.check { display: flex; margin-top: 8px; }
.dob { display: flex; gap: 8px; }
.selbox { flex: 1 1 0; }
.selbox select, .text-input {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  font-size: 16px; color: var(--ink);
}
.city-combobox { position: relative; }
.city-combobox .selbox { display: block; }
.city-combobox.is-enhanced select {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); border: 0;
  pointer-events: none;
}
.city-combobox__list {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%;
  max-height: 240px; overflow-y: auto;
  margin: 4px 0 0; padding: 4px 0; list-style: none;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.city-combobox__opt { padding: 10px 12px; cursor: pointer; }
.city-combobox__opt.is-active, .city-combobox__opt:hover { background: var(--accent-soft); }
.f-hint { color: var(--ink-soft); font-size: 14px; margin: 8px 0 0; }
.f-err { color: var(--accent); font-size: 14px; margin: 8px 0 0; font-weight: 600; }
.flash, .notice {
  background: var(--accent-soft); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 20px;
}

.card-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; text-decoration: none; color: var(--ink);
}
.card--soon .card-link { opacity: .55; }
.card-title { font-weight: 600; }
.card-meta, .chip-sub { color: var(--ink-soft); font-size: 14px; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; background: var(--accent-soft); color: var(--accent);
}
.badge--lock { background: #eee; color: var(--ink-soft); }

.ch-no { color: var(--ink-soft); font-size: 14px; flex: 0 0 auto; }

.chapter { margin: 0 0 32px; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.ch-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ch-title { font-size: 20px; margin: 4px 0 8px; }
.ch-body p { margin: 0 0 14px; }
.ch-note { color: var(--ink-soft); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-list { color: var(--ink-soft); margin-right: 8px; }
.price-now { font-size: 22px; color: var(--accent); }

@media (min-width: 640px) {
  .doc { padding: 40px 24px 80px; }
  .hero-title { font-size: 40px; }
  .sec-title { font-size: 26px; }
  .cta { width: auto; }
}

/* `*::before, *::after` 를 반드시 같이 적는다 — `*` 는 의사 요소에 안 닿는다.
   추가 질문 대기 연출(.ask-status.is-busy::after)이 의사 요소라 이게 없으면 reduce 를 켜도 계속 움직인다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  /* .wait-blot·.ch-wait::before 는 장식 먹 방울이다 — 종이에 주홍 얼룩으로 찍힌다. */
  /* .rv-sec(맛보기 후기)은 .cta 와 같은 판촉물이라 숨긴다 — 손님이 종이에 남기려는 것은 자기 풀이지
     남의 후기가 아니다. 색을 종이값으로 내리는 쪽(.ask·.tocC 관례)을 안 쓴 이유가 이것이다.
     숨기지도 내리지도 않으면 흰 종이에 크림 글씨 1.19:1 로 자리만 차지한다. */
  /* .paybar 는 안의 .cta 가 이미 숨어도 **빈 상자가 남는다** — fixed 라 그 띠가 종이 첫 장 밑에
     그대로 앉는다. 안을 비우는 것으로는 못 없앤다. */
  .site-header, .site-nav, .cta, .page--lookup-list .x, .chnav, .keep, .ask-form, .ask-status,
  .rv-sec, .paybar, .page--fortune .f-sec-title::before, .ch-wait::before, .wait-blot { display: none !important; }
  /* 처리방침 링크는 종이에서 누를 수 없다 — .cta·.rv-sec 와 같은 이유로 뺀다.
     면책 콜로폰은 남긴다: 그것은 링크가 아니라 종이에도 유효한 문장이다.
     **위 목록에 끼우지 않는다** — tests/web/waitView.test.ts 가 그 선택자 줄을 문자열로 잠가 뒀다. */
  /* 사업자 정보 그림은 크림 글자라 흰 종이에서 안 읽힌다. 고객센터 줄은 링크라 위와 같은 이유. */
  .footer-legal, .footer-help, .footer-biz { display: none !important; }
  body { background: #fff; }
  .doc { max-width: none; }

}

/* ── 흙먹 컬럼 껍데기. 네 화면(홈·상세·풀이·곁)이 글자 그대로 같은 선언을 네 벌 들고 있어
   한 자리로 뺐다. 남기는 것: overflow(홈만 hidden, 나머지 셋은 clip — clip 이어야 안쪽 sticky 가
   산다), 토큰 정의(--home- / --f- / --r- / --s- 는 이름도 값도 갈린다), 그리고 각자 자기 토큰을
   가리키는 color·background.
   **스코프는 떼지 않는다** — 이 파일은 전부 페이지 스코프이고, 인쇄 블록이 (0,2,0) 컬럼 규칙과
   순서로 겨루다 실제로 버그를 낸 적이 있다(아래 인쇄 블록 머리주석). 복합 선택자로 묶으면
   한 자리 편집이라는 이득은 그대로면서 특이도가 전과 같다. */
.page--home .home-col,
.page--fortune .fortune-col,
.page--reading .reading-col,
.side-col {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  min-height: 100vh;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.page--home .home-grain,
.page--fortune .fortune-grain,
.page--reading .reading-grain,
.side-col .side-grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("/images/grain.svg");
}

/* ── 홈 흙먹. .page--home 안에서만. 폼·결제·결과 토큰은 건드리지 않는다. */
.page--home {
  background: #101012;
  color: #f4eadb;
}
.page--home .home-col {
  /* C안(2026-09-03): 흙먹 갈색 → 근흑. 위쪽 라디얼 글로우 없음 */
  --home-void: #0e0c0c;
  --home-ink: #f4eadb;
  --home-muted: #b39a82;
  --home-line: #262020;
  --home-accent: #b8492e;
  --chip-on-ink: #fff4ea;
  --chip-on-line: #b8492e;
  --chip-on-bg: color-mix(in srgb, #b8492e 22%, transparent);
  --slide-w: 80%;
  --card-r: 4px;
  --home-pad: 18px;
  /* 간단풀이 폼용. -edge 는 셀렉트·텍스트·textarea 의 상자 테두리와 알약 칩·체크 네모의 선이
     쓴다(2026-09-22 G-1 조판) — 면은 없고 선 하나가 컨트롤 경계다.
     -lit 는 다크 위 주홍 '글자'용 7.47:1 이다. --home-accent 는 3.74:1 이라 면·테두리에만 쓴다. */
  /* .42 = 근흑 위 3.6:1. UI 경계 기준(WCAG 1.4.11)이 3:1 인데 .35 는 2.86:1 이었다 —
     면 없이 선 하나가 유일한 단서인 조판이라 이 값이 필요하다. 상세 폼의 --f-edge 와
     값이 갈리는 이유가 이것이다. */
  --home-edge: rgba(244, 234, 219, .42);
  --home-accent-lit: #e08a70;
  overflow: hidden;
  color: var(--home-ink);
  background: var(--home-void);
}
.page--home .skip { z-index: 8; }
/* .doc 은 뺀다 — main 이 쌓임 맥락이 되면 그 안의 고정 오버레이가 푸터(2)·그레인(6) 밑에 갇힌다. */
.page--home .site-header,
.page--home .site-footer { position: relative; z-index: 2; }
.page--home .site-header {
  display: flex;
  align-items: center;
  padding: 16px var(--home-pad) 12px;
  background: #0b0b0c;
  border-bottom: 1px solid var(--home-line);
}
.page--home .site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--home-ink);
  font-size: inherit;
  font-weight: inherit;
}
.page--home .doc {
  max-width: none;
  margin: 0;
  padding: 0 0 8px;
}
/* 5칩은 한 줄이다. wrap 이면 390·360px 에서 「무료사주」가 둘째 줄로 떨어져 메뉴가 두 줄짜리
   덩어리가 된다 — 좁으면 접히는 대신 가로로 민다(.track 과 같은 수법, 스크롤바는 숨긴다).
   **밀림은 결함이 아니라 선택이다**(2026-09-20 결정, 2026-09-22 에 균등 5칸을 거쳐 되돌아왔다 — 시안 라).
   글자 16px 에서 칩 줄은 한글 한 자 advance 최악값 1.0em 기준 428px 라, 어느 폰트·어느 폭에서도
   화면보다 길다 — 손님은 밀어서 본다.
   (advance 실측: Apple SD Gothic Neo·Pretendard 0.865em, Noto Sans CJK KR 0.92em, Malgun Gothic 1.0em.)
   치르는 값은 하나, **다섯째 「무료사주」가 첫 화면에서 덜 보인다**. 브라우저 실측 노출 비율:
   430px 93% · 390px 80% · 360px 40%(애플 폰트), 전각 폰트면 45% · 33% · 0%.
   그 칩이 공짜 미끼라 이 표를 알고 고른 값이다(글자 15px 이면 390px 애플에서 99% 였다).
   **값이 제일 큰 곳은 `/unse` 다** — 거기서는 이 칩이 `aria-current` 라, 덜 보인다는 것이 곧
   「지금 어느 페이지인지」가 덜 보인다는 뜻이다(계약 폭 320px 에서는 어느 폰트로도 0%).
   그래도 `overflow-x` 가 있으면 밀어서 닿기는 한다 — 밸브를 걷으면 그 길마저 없어진다(WCAG 1.4.10).
   균등 5칸(repeat(5, 1fr))으로 바꿔 잘림을 없앤 판이 2026-09-22 에 한 번 있었으나, 사용자가
   「오른쪽이 좀 잘리더라도 옆으로 스크롤되는 쪽」을 골라 되돌렸다 — 칸 나누기는 재론하지 말 것.
   스크롤바는 숨기므로 손님에게 남는 단서는 잘린 알약 모양뿐이다. 오른쪽 페이드는 안 쓴다 —
   이제는 어느 폭에서도 넘치므로 페이드가 늘 켜져 있게 되고, 그건 장식이지 신호가 아니다.
   좌우 패딩 9px 은 알약의 제 치수다(7px 은 「안 밀리게」 맞추던 시절의 값이라 되돌렸다).
   아래 패딩 24px 은 「칩 줄 아래 여백」 전부다 — 뒤에 오는 덩어리는 윗여백을 지지 않는다(바로 아래 네 규칙). */
.page--home .home-cats {
  display: flex;
  background: #100d0d;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px var(--home-pad) 24px;
  /* 현재 칩을 줄 안으로 끌어올 때(home.ejs 의 인라인 한 줄) 알약이 줄 가장자리에 딱 붙지 않게 한다 —
     이 값이 없으면 `/unse` 에서 「무료사주」의 오른쪽 테두리가 좌우 패딩을 먹고 화면 끝에 닿는다(실측). */
  scroll-padding-inline: var(--home-pad);
}
.page--home .home-cats::-webkit-scrollbar { display: none; }
.page--home .home-cats a {
  text-decoration: none;
  background: transparent;
  color: var(--home-muted);
  border: 1px solid var(--home-line);
  /* 높이 40px = 글자 16 × 줄높이 1 + 상하 패딩 22 + 테두리 2. 이 셋 중 하나만 바뀌어도 칩 줄 높이
     72px(8+40+24)이 깨져 히어로 자리가 밀린다 — 테스트가 세 값을 읽어 높이를 다시 잰다.
     WCAG 2.5.8(최소 24px)은 넘고 iOS 권장 44px 은 못 넘는다. 44px 로 키우려면 줄 패딩과 히어로 자리를
     다시 정하는 일이지 칸 나누기로 돌아갈 일이 아니다(위 주석). */
  padding: 11px 9px;
  border-radius: 999px;
  /* 칩은 줄어들지도 글자가 쪼개지지도 않는다 — nowrap 컨테이너 안에서 flex 기본값이 수축이다 */
  flex: 0 0 auto;
  white-space: nowrap;
  /* 단축 font 안의 inherit 는 <family-name> 자리에 올 수 없어 선언 전체가 무효가 된다 — 롱핸드로 적는다 */
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
.page--home .home-cats a[aria-current="page"] {
  color: var(--chip-on-ink);
  border-color: var(--chip-on-line);
  background: var(--chip-on-bg);
}
/* 칩 아래 여백은 칩 줄 하나가 쥔다. 이 셋이 없으면 값이 뒤에 오는 덩어리마다 달라진다 —
   홈 18px(.rail 8) · 분야 36px(.sec-head 26) · 무료 85px(.sec--quick 44+괘선+30) 이었다.
   인접 형제라 칩 바로 밑 한 번만 걸린다: 섹션끼리의 26px 도, 홈 레일 사이 간격도 그대로다.
   .sec--quick 의 괘선은 뗀다 — 칩 줄 밴드 경계 바로 밑에 놓이면 선이 두 줄로 보인다. */
.page--home .home-cats + .rail { margin-top: 0; }
.page--home .home-cats + .sec .sec-head { padding-top: 0; }
.page--home .home-cats + .sec--quick {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* 네 번째 타입. `/unse` 는 레일도 섹션도 아닌 `.free-index` 로 시작하므로 위 셋 중 어느 것도 안 닿는다.
   **오늘 이 선언은 무효다** — `.free-index`·`.fi-head` 의 윗여백이 이미 0 이라 지워도 픽셀이 안 변한다
   (실측, 적대적 리뷰 2026-09-20). 남겨 두는 것은 위 셋과 같은 방어선이기 때문이다: 나중에 누가
   `.free-index` 나 첫 자식에 윗여백을 주는 날, 칩 아래 여백이 이 화면에서만 24px 이 아니게 된다. */
.page--home .home-cats + .free-index {
  margin-top: 0;
  padding-top: 0;
}
.page--home .rail { margin: 8px 0 4px; --slide-w: 80%; }
.page--home .rail--hero { --slide-w: 88%; }
.page--home .track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100% - var(--slide-w)) / 2);
  padding-inline: calc((100% - var(--slide-w)) / 2);
  scrollbar-width: none;
}
.page--home .track::-webkit-scrollbar { display: none; }
/* 분야 페이지의 세로 1열(시안 D). `overflow: visible` 은 .track 이 스크롤 컨테이너가 되지
   않게 하려는 것이다 — 그래야 위 블록에 그대로 남은 scroll-snap-type·scroll-padding-inline 과
   .slide 의 scroll-snap-align 이 되살아나지 않고, 클리핑 상자도 생기지 않는다.
   한 축만 끄면(overflow-x) 안 된다: 한쪽이 visible 이고 다른 쪽이 아니면 visible 이 auto 로
   계산되므로, 위 블록에 overflow-y 가 한 줄 붙는 날 스냅이 통째로 되살아난다. 두 축을 같이 잡는다.
   padding-inline 은 캐러셀의 중앙 정렬 calc 을 대체한다: .page--home .sec 에는 좌우 패딩이 없고
   18px 은 .sec-head 에만 있어서, 카드를 섹션 머리와 같은 선에 세우려면 트랙이 같은 --home-pad 를 진다.
   카드 간격 14px 은 여기 없다 — 같은 요소에 걸린 위 .track 규칙의 gap 을 안 덮어서 남은 값이다
   (상속이 아니라 캐스케이드다. grid 에도 그대로 적용된다).
   .slide 는 한 글자도 안 고친다 — grid 아이템이라 flex: 0 0 var(--slide-w) 가 무시된다. */
.page--home .rail--list .track {
  display: grid;
  overflow: visible;
  padding-inline: var(--home-pad);
}
.page--home .slide {
  flex: 0 0 var(--slide-w);
  aspect-ratio: 4 / 5;
  scroll-snap-align: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: #fff;
  border-radius: var(--card-r);
  border: 0;
}
.page--home .slide:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
.page--home .slide--soon { filter: saturate(.7); }
.page--home .slide--soon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
}
.page--home .slide-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page--home .slide-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 5, 4, .9) 0%, rgba(8, 5, 4, .22) 48%, transparent 66%);
}
.page--home .slide--astro .slide-shade {
  background: linear-gradient(to top, rgba(4, 6, 10, .92) 0%, rgba(4, 6, 10, .35) 50%, transparent 70%);
}
.page--home .slide-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 1;
}
.page--home .slide-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  padding: 4px 9px;
  margin-bottom: 4px;
  background: transparent;
  color: #f3ded2;
  border: 1px solid rgba(243, 222, 210, .5);
  border-radius: 999px;
}
.page--home .slide-title,
.page--home .slide .card-title {
  font-family: var(--display-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.28;
  margin: 0;
  color: #fff;
}
.page--home .slide-line {
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.page--home .dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 10px 0 0;
}
.page--home .dots button {
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--home-muted) 55%, transparent);
  padding: 8px;
  background-clip: content-box;
  cursor: pointer;
}
.page--home .dots button[aria-current="true"] { background-color: var(--home-ink); }
.page--home .sec { margin: 0; }
.page--home .sec-head { padding: 26px var(--home-pad) 8px; }
/* 키커·제목·리드는 분야 화면과 무료 목록(`/unse`)이 한 규칙을 나눠 쓴다 — 같은 값을 두 벌 적어 두었더니
   색(주홍/-lit)과 여백(6/7px, 4/8px)이 갈려 칩만 바꿔 넘나들 때 머리가 튀었다(2026-09-22).
   색은 밝은 쪽으로 모은다: 11px 글자는 큰 글자 예외(3:1)에 안 들어 근흑 위 --home-accent 는 3.74:1 로
   4.5:1(무료 잠금 10)에 모자란다. 같은 결의 키커인 .quick-form legend 도 같은 이유로 -lit 다. */
.page--home .sec-k,
.page--home .fi-k {
  font-size: 11px;
  letter-spacing: .22em;
  margin: 0 0 6px;
  color: var(--home-accent-lit);
  writing-mode: horizontal-tb;
}
.page--home .sec-title,
.page--home .fi-t {
  font-family: var(--display-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--home-ink);
}
.page--home .sec-lead,
.page--home .fi-l {
  color: var(--home-muted);
  font-size: 13px;
  margin: 6px 0 0;
  max-width: 28em;
}

/* ── `/unse` 무료 목록(스펙 2026-09-20 free-index, 시안 사 「칸 안의 갈래」). 사진을 떼고 글자만으로
   나열한다 — 새 색도 새 토큰도 없이 --home-* 만 쓴다(잠금 4). */
/* 아래 패딩은 .sec-head 와 같은 8px 이다. 윗패딩만 0 인데, 이 머리는 늘 칩 줄 바로 밑에 서기 때문이다
   — 분야 화면의 26px 도 거기서는 `.home-cats + .sec .sec-head` 가 0 으로 덮는다(같은 자리, 같은 값).
   키커(.fi-k)·제목(.fi-t)·리드(.fi-l) 선언은 위 .sec-k/.sec-title/.sec-lead 에 함께 있다. */
.page--home .fi-head { padding: 0 var(--home-pad) 8px; }
/* 무리 머리는 어깨 표식 하나다 — 왼쪽 주홍 막대뿐이고, 오른쪽으로 뻗던 괘선은 없다(잠금 5).
   그 줄은 원래 오른쪽 끝의 개수를 받치던 것이라 개수와 함께 뺐다. */
.page--home .fi-gh { padding: 28px var(--home-pad) 10px; }
.page--home .fi-gh h2 {
  position: relative;
  padding-left: 13px;
  font-family: var(--display-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--home-ink);
}
.page--home .fi-gh h2::before {
  content: "";
  position: absolute;
  left: 0;
  /* 글자 높이에 맞춰 깎는다 — 줄상자 전체를 채우면 막대가 제목보다 길어 보인다. */
  top: .28em;
  bottom: .28em;
  width: 3px;
  background: var(--home-accent);
}
.page--home .fi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--home-line);
}
/* 괘선은 **칸의 테두리**로 긋는다. gap:1px + 배경으로 그으면 항목이 홀수인 무리 끝에
   빈 칸이 밝은 상자로 남는다(시안에서 실제로 났다). */
.page--home .fi-cell {
  display: block;
  padding: 14px 14px 13px;
  /* 칸이 터치 타깃이다 — 한 줄짜리 제목이어도 52px 밑으로는 안 내려간다. */
  min-height: 52px;
  border-bottom: 1px solid var(--home-line);
  text-decoration: none;
  color: inherit;
}
/* 세로 괘선은 왼쪽 칸에만. 한때 「칸마다 오른쪽 선 + 격자를 1px 넓혀 오른끝을 .home-col 의
   overflow: hidden 으로 잘라내기」였는데, 그 수법은 전폭 칸이 있을 때만 필요하고 조상의
   overflow 값에 그림이 업힌다 — 누가 .home-col 을 visible 로 바꾸는 날 1px 이 새어 나온다.
   전폭 칸을 안 만들기로 하면서(아래 주석) 같이 걷었다. */
.page--home .fi-cell:nth-child(odd) { border-right: 1px solid var(--home-line); }
/* 링은 안쪽으로 그린다. 격자가 기둥 좌우 끝까지 차 있어 전역 `outline-offset: 2px` 는 바깥으로
   5px 를 그리고, 그만큼이 `.home-col` 의 overflow: hidden 에 잘린다 — 왼쪽 열은 왼쪽 획이,
   오른쪽 열은 오른쪽 획이 통째로 안 보인다(실측). 바로 위 `.slide:focus-visible` 와 같은 함정·같은 처방이다. */
.page--home .fi-cell:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
.page--home .fi-nm {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--home-ink);
}
.page--home .fi-sb {
  display: block;
  font-size: 11px;
  color: var(--home-muted);
  margin-top: 3px;
}
/* 전폭 「갈래 칸」(한 칸 안에 사주·자미두수·점성술 세 토막) — 스펙 2026-09-22 §9-1.
   칸은 `div` 라 링크가 아니고 갈래 셋이 각자 `<a>` 다(잠금 11): 한 <a> 로 묶으면 <a> 안의 <a> 가
   되어 세 주소 중 둘이 버려지고, 세 갈래는 제 sub·엔진·폼·CTA 를 갖는 독립 변형이라
   형제 하나가 남의 주소를 드는 모양도 뒤집혀 있다(적대적 리뷰 2026-09-20 이 막았던 것이 이 둘이다). */
/* 칸 자신의 패딩을 걷는다 — 제목 줄이 없어져 갈래 셋이 칸을 통째로 쓰고, 그래야 세로 괘선이
   칸 위아래 끝까지 닿는다(시안 2026-09-22-today-forks 「나」). */
.page--home .fi-wide { grid-column: 1 / -1; border-right: 0; padding: 0; }
.page--home .fi-forks { display: flex; }
/* 갈래 하나하나가 손가락이 닿는 링크다 — 칸(52px)이 아니라 이쪽이 타깃이다(잠금 17).
   min-width: 0 은 flex 항목의 기본 auto 를 푼다: 안 풀면 「자미두수」가 트랙을 넘겨 셋이 안 선다.
   분야 이름만 명조다 — 색(--home-accent-lit)은 예전부터 갈래를 갈라 놓고 있었고, 여기에 서체를 더한다.
   목록의 다른 칸은 전부 산세리프 15px 라, 새 색 없이(잠금 4) 무게를 주는 길이 서체뿐이다.
   쪽지는 본문 산세리프로 되돌리고 .fi-sb(11px)보다 한 단 큰 12px 로 둔다. */
.page--home .fi-forks a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 18px 8px 16px;
  text-align: center;
  font-family: var(--display-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
  color: var(--home-accent-lit);
  text-decoration: none;
}
.page--home .fi-forks a + a { border-left: 1px solid var(--home-line); }
.page--home .fi-forks a b {
  display: block;
  /* 이름만 명조다 — 쪽지는 본문 스택으로 되돌린다(시안 2026-09-22-today-forks 의 `.forks b`).
     안 적으면 바로 위 `a` 의 --display-serif 를 상속해 쪽지까지 명조로 찍힌다.
     스택을 통째로 복사한다 — 뒤 세 항목을 자르면 Pretendard 가 없는 기기에서 중국어 자형으로 떨어진다. */
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--home-muted);
  margin-top: 5px;
}
/* 링은 안쪽이다 — 위 .fi-cell:focus-visible 와 같은 함정(.home-col 의 overflow 가 바깥을 먹는다). */
.page--home .fi-forks a:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
/* 전폭 칸이 첫 칸이면 그 뒤로는 **짝수**가 왼쪽 열이다 — 세로 괘선을 통째로 뒤집는다(잠금 10).
   갈래 행이 둘째 이후로 밀리면 이 반전이 거꾸로 서는데, 그 순서는 freeIndexGroups() 가 만들지 않는다. */
.page--home .fi-grid--wide .fi-cell:nth-child(odd) { border-right: 0; }
.page--home .fi-grid--wide .fi-cell:nth-child(even) { border-right: 1px solid var(--home-line); }

/* ── 띠별 오늘의 운세(스펙 2026-09-22, 확정 시안: tti-title A · tti-hanpok 마-2).
   --home-* 만 쓴다(오행 칩은 2026-09-25 에 걷었다). 글자색에 --home-accent 를 쓰지 않는다(대비).
   모든 블록은 --home-pad 안쪽이다 — 이 블록은 초점 링 규칙을 못 쓰므로(테스트 잠금) 전역 링이
   .home-col 의 overflow 에 잘리지 않게 여백을 남긴 것이다. */
.page--home .tti {
  padding: 18px 0 32px;
}
.page--home .tti-head { padding: 0 var(--home-pad); }
.page--home .tti-h {
  margin: 0;
  font-family: var(--display-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--home-ink);
}
/* 날짜 줄이 곧 이동기다(시안 2026-09-25-tti-daynav C). 예전 알약은 inline-flex 안의 ::before 「‹ 」가
   따로 떨어진 flex 항목이 되어 공백이 잘리고, 12px 본문 글꼴의 ‹ 가 작고 처져 보였다 — 글자 대신 SVG 꺾쇠다.
   제목이 혼자 한 줄이라 320px 기본 글자 크기에선 줄이 안 내려간다. wrap 은 글자 확대 때 일진이
   .home-col 의 overflow 에 잘리지 않고 아랫줄로 내려가게 하는 안전망이다. */
.page--home .tti-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--home-muted);
}
/* 32px 원이 터치 칸이다. 첫 꺾쇠를 -9px 당겨 획이 제목 왼쪽 선 가까이(약 3px 안쪽) 선다 — 더 당겨 선을
   맞추면(≈-13px) 전역 링(3px + 2px)이 .home-col 의 overflow 선에 닿아 잘린다. 앞뒤 날이 없을 때의 span 은 자리만 지킨다. */
.page--home .tti-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--home-muted);
}
.page--home .tti-step:first-child { margin-left: -9px; }
.page--home a.tti-step:hover { color: var(--home-ink); background: color-mix(in srgb, var(--home-ink) 7%, transparent); }
.page--home .tti-step svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page--home .tti-day { font-size: 14px; color: var(--home-ink); white-space: nowrap; }
.page--home .tti-iljin { margin-left: 8px; white-space: nowrap; }
/* 열두 얼굴 색인. 여섯 열, 얼굴만(이름은 aria-label). 누르면 같은 장의 그 카드로. */
.page--home .tti-idx {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 28px var(--home-pad) 0;
}
/* 칸이 터치 타깃이다 — 여섯 열이라 360px 기기에서 초상이 49px 로 내려간다(실측). 높이만 52px 로 받친다,
   `.fi-cell` 과 같은 처방이다. 초상은 그대로 정사각이고 위아래로 1.5px 씩 여백이 생길 뿐이다. */
.page--home .tti-idx a {
  display: flex;
  align-items: center;
  min-height: 52px;
}
.page--home .tti-idx img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
/* 한 폭 카드. 초상 전폭 3:2, 이름은 그림 왼쪽 아래 — 누르면 그 띠의 무료 풀이 면으로. */
.page--home .tti-card {
  margin: 26px var(--home-pad) 0;
  padding-top: 18px;
  border-top: 1px solid var(--home-line);
  scroll-margin-top: 12px;
}
.page--home .tti-pic { position: relative; }
/* 이름이 앉는 아래쪽에 그늘을 깐다. 열두 장 모두 검은 바탕의 **밝은** 먹그림이라 이름 자리 배경이
   흰 털과 겹친다 — 실측으로 최소 1.18:1, 여덟 장은 영역 평균도 4.5:1 미만이었다(그림자만으로는 못 받친다).
   72% 면 배경이 순백이어도 7.1:1 이다. 새 색 없이 --home-void 의 농도만 쓴다. */
.page--home .tti-pic::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 112px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--home-void) 72%, transparent) 0,
    color-mix(in srgb, var(--home-void) 72%, transparent) 48px,
    transparent 100%
  );
  pointer-events: none;
}
.page--home .tti-face {
  display: block;
  width: 100%;
  height: 236px;
  object-fit: cover;
  object-position: center 30%;
}
.page--home .tti-name {
  position: absolute;
  left: 10px;
  bottom: 8px;
  margin: 0;
  font-family: var(--display-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--home-ink);
  text-shadow: 0 1px 3px var(--home-void), 0 0 10px var(--home-void);
  /* 이름 앞 주홍 획은 늘 켠다(2026-09-25) — 색인에서 건너온 카드에만 켜던 것이다. */
  padding-left: 11px;
  border-left: 3px solid var(--home-accent);
  /* ::after 그늘이 DOM 마지막이라 z-index 없이는 이름 위에 깔린다. */
  z-index: 1;
}
/* 누르는 칸은 52px(색인·summary 와 같은 처방). 글자는 31px 이라 위아래로 늘리고 음수 여백으로 제자리에 둔다. */
.page--home .tti-name a { display: inline-block; padding: 11px 0; margin: -11px 0; color: inherit; text-decoration: none; }
.page--home .tti-sum {
  margin: 12px 0 0;
  font-family: var(--display-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--home-ink);
}
/* 조심·열림. 라벨은 뮤트, 값은 먹. 위 괘선으로 요약과 나눈다. */
.page--home .tti-kv {
  display: flex;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--home-line);
  font-size: 14px;
  line-height: 1.5;
}
.page--home .tti-kv dt { margin: 0 5px 0 0; color: var(--home-muted); }
.page--home .tti-kv dd { margin: 0 18px 0 0; font-weight: 600; color: var(--home-ink); }
/* 출생 해 접기. 닫힘 ＋ / 펼침 － 십자는 풀이 판 .board-help 의 문법 그대로(마크업은 잠겨 있다). */
.page--home .tti-years { margin: 4px 0 0; }
.page--home .tti-card summary {
  position: relative;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 0 0 19px;
  font-size: 13px;
  color: var(--home-muted);
  cursor: pointer;
}
.page--home .tti-card summary::-webkit-details-marker { display: none; }
.page--home .tti-card summary::before,
.page--home .tti-card summary::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  border-top: 1px solid var(--home-accent-lit);
}
.page--home .tti-card summary::after { transform: rotate(90deg); }
.page--home .tti-years[open] > summary { color: var(--home-ink); }
.page--home .tti-years[open] > summary::after { display: none; }
.page--home .tti-year {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 8px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--home-ink);
}
.page--home .tti-year b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--home-muted);
}
/* 빈 날. */
.page--home .tti-empty {
  margin: 28px var(--home-pad) 0;
  padding: 28px 0;
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  text-align: center;
}
.page--home .tti-empty p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--home-ink); }
.page--home .tti-empty p + p { margin-top: 14px; }
/* 주홍 테두리·투명 배경 버튼 — 홈 「내 풀이 다시 보기」와 같은 급. */
.page--home .tti-cta-btn,
.page--home .tti-cta a {
  display: block;
  padding: 13px 16px;
  border: 1px solid var(--home-accent);
  border-radius: 4px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--home-ink);
  text-decoration: none;
}
.page--home .tti-empty .tti-cta-btn { display: inline-block; padding: 11px 22px; }
.page--home .tti-foot {
  margin: 28px var(--home-pad) 0;
  padding-top: 22px;
  border-top: 1px solid var(--home-line);
}
.page--home .tti-foot p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--home-muted); }
.page--home .tti-foot .tti-cta { color: var(--home-ink); }
.page--home .tti-cta a { margin: 10px 0 18px; }
/* ── 홈 간단 사주풀이(스펙 2026-09-06 시안 E 「여백」 → 2026-09-22 시안 G-1 「상자 조판」).
   전역 폼은 흰 상자라 근흑 위에서 그대로 쓸 수 없다. 시안 E 는 면·테두리를 다 지우고 밑줄만 남겼는데,
   사용자가 「누를 자리가 안 보인다」고 판정해 면 없는 1px 상자(8px)와 알약 칩으로 다시 그렸다. */
.page--home .sec--quick {
  margin: 44px var(--home-pad) 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--home-line);
}
/* .field/.check 의 display 가 UA 의 [hidden] 을 이긴다 — quick.js 가 윤달 라벨을 hidden 으로 감춘다.
   위쪽 `.page--fortune [hidden]` 과 같은 이유·같은 처방이고, 그 규칙은 홈에 닿지 않는다. */
.page--home .sec--quick [hidden] { display: none !important; }
/* 제목은 위쪽 분야 섹션과 같은 22px 다. 시안은 26px 였는데 레일을 한 줄 placeholder 로 대신한 프레임이라
   비교 대상이 없었다 — 실제 홈에 얹으니 무료 미끼가 유료 상품 셋보다 큰 제목을 갖는다(스펙 §8-5).
   리드는 한 문장으로 줄이되 「무료」는 남긴다: 유료 25종이 걸린 화면에서 생년월일을 묻는 폼은,
   공짜라고 적지 않으면 돈 받는 것으로 읽힌다. */
/* 띠 껍데기의 초상. `.sec--quick` 이 이미 --home-pad 만큼 들어와 있어 폭은 그대로 두고 아래 여백만 준다. */
.page--home .sec--quick .tti-pic { margin: 0 0 18px; }
.page--home .sec--quick .sec-title { margin: 0 0 6px; letter-spacing: -.01em; }
.page--home .sec--quick .sec-lead { margin: 0 0 26px; }
/* 오류 한 줄. 상자가 없는 화면이라 색만으로는 어디에 걸린 말인지 안 보인다 — 왼쪽에 주홍 세로선을 세운다. */
.page--home .quick-say {
  font-size: 13px; font-weight: 600; color: var(--home-accent-lit);
  margin: 0 0 18px; padding: 0 0 0 12px; border-left: 2px solid var(--home-accent);
}
.page--home .quick-say:empty { display: none; }

/* 폼 격자. 성별·달력만 2열로 앉히고 나머지는 전폭이다. _birth-form 은 고치지 않는다(스펙 잠금 2) —
   래퍼 div 대신 격자를 깔면 이 폼의 직계 자식(fieldset 넷 + 버튼)만으로 2열이 선다. */
.page--home .quick-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0; }
.page--home .quick-form > * { grid-column: 1 / -1; }
/* 라디오 칸은 격자에서 한 칸을 쓰고, 그 안쪽은 다시 flex 다 — 알약 칩 둘이 트랙을 반씩 나눠 선다.
   align-items·align-content 를 flex-start 로 붙드는 이유: 「윤달」이 아랫줄로 내려간 달력 칸에서
   칩이 줄 높이만큼 세로로 늘어나 성별 칸의 칩과 키가 갈리는 것을 막는다(두 칸은 같은 격자 행이다). */
.page--home .quick-form .field--radio {
  grid-column: auto;
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 8px;
}
/* 오류·윤달은 칩 옆에 끼지 않고 제 줄을 통째로 쓴다. `.f-err` 를 빼면 오류가 난 칸에서
   주홍 한 줄이 칩 사이를 비집고 들어가 두 칸의 세로선이 어긋난다. legend 는 여기 없다 —
   fieldset 의 legend 는 flex 항목이 되지 않고(HTML 렌더링 규칙) UA 가 제 줄에 둔다. */
.page--home .quick-form .field--radio .f-err,
.page--home .quick-form .field--radio .check { flex: 1 0 100%; }
.page--home .quick-form .field { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
/* 입력 모양 여섯이 쓰는 새 칸 셋(스펙 2026-09-22 §6). 상세 폼의 .form-who·.f-note 와 같은 이름이지만
   그쪽 규칙은 `.page--fortune` 스코프라 홈에 안 닿는다 — 흰 상자 조판을 물려받으면 근흑 위에서 죽는다. */
.page--home .quick-form .form-who {
  grid-column: 1 / -1; margin: 6px 0 18px;
  font-family: var(--display-serif); font-size: 17px; color: var(--home-ink);
}
.page--home .quick-form .f-note { font-size: 12px; color: var(--home-muted); margin: 8px 0 0; }
/* 꿈 textarea·이름·날짜 칸 — 셀렉트와 같은 8px 상자다(아래 .selbox select 와 값을 맞춘다).
   16px 밑으로 내리면 iOS 사파리가 탭할 때마다 확대한다(같은 이유·같은 값). */
.page--home .quick-form textarea,
.page--home .quick-form .text-input {
  width: 100%; border: 1px solid var(--home-edge); border-radius: 8px;
  background: transparent; color: var(--home-ink);
  font-size: 16px; line-height: 1.5;
  /* 날짜 칸의 네이티브 달력 아이콘·피커까지 어둡게 그리라고 UA 에게 말한다. */
  color-scheme: dark;
}
/* 한 줄 칸은 셀렉트와 같은 키다. 여러 줄인 textarea 만 위아래 여백을 따로 진다. */
.page--home .quick-form .text-input { height: 46px; padding: 0 10px; } /* 실제 키는 전역 min-height 48 — 셀렉트와 같다 */
/* textarea 는 UA 가 font-family 를 상속시키지 않아 꿈 칸만 고정폭으로 떴다(2026-09-22 렌더 확인). */
.page--home .quick-form textarea { padding: 10px; font-family: inherit; }
/* 캡션 — 11px 주홍 자간 캡션에서 미색 13px 로(시안 G). 칸 이름이 장식 키커가 아니라 읽는 글이 된다. */
.page--home .quick-form legend {
  display: block; width: 100%; padding: 0; margin: 0 0 8px;
  font-size: 13px; letter-spacing: .01em; font-weight: 600;
  color: var(--home-ink);
}
/* 셀렉트 — 밑줄 하나에서 8px 상자로. 네이티브 화살표를 지우고 쉐브론을 따로 얹는다. */
.page--home .quick-form .dob { gap: 8px; }
.page--home .quick-form .selbox { position: relative; display: block; }
/* 파이어폭스는 셀렉트의 기본 폭을 가장 긴 옵션에 맞춘다 — flex 항목의 min-width 를 풀어 두지 않으면
   옵션이 길어지는 날 세 칸이 줄지 못하고 줄을 넘긴다. */
.page--home .quick-form .dob .selbox { min-width: 0; }
/* ▾ 글자는 10px 로도 작고 삼각형 모양이 글꼴마다 다르다 — 1.5px 획 두 줄을 45도 돌려 직접 그린다.
   5px 정사각형이라 대각선으로 보이는 폭은 약 7px 다(시안 G-1). translateY 가 -50% 가 아니라 -70%
   인 것은 회전한 정사각형의 시각 중심이 기하 중심보다 아래에 있기 때문이다. */
.page--home .quick-form .selbox::after {
  content: ''; position: absolute; right: 9px; top: 50%;
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--home-ink); border-bottom: 1.5px solid var(--home-ink);
  transform: translateY(-70%) rotate(45deg); opacity: .8; pointer-events: none;
}
.page--home .quick-form .selbox select {
  -webkit-appearance: none; appearance: none;
  /* 실제 키는 전역 `.selbox select` 의 min-height: 48px 이 잡는다 — 여기 height 는 그 밑으로 못 내려간다.
     line-height 가 46px 인 이유가 그것이다: 48 에서 위아래 테두리 2px 을 뺀 안쪽을 딱 채운다. */
  /* 안여백은 320px 실측으로 정했다(적대 리뷰 2026-09-22): 셀렉트 폭 87px 에서 「1996년」이 49px 인데
     30+14 를 빼면 43px 이라 잘렸다. 22+10 이면 55px 이 남는다. 쉐브론 right 9 는 이 22 안에 든다.
     년 칸에만 flex 를 더 주는 안은 「12월」을 굶겨 기각. */
  height: 46px; padding: 0 22px 0 10px;
  border: 1px solid var(--home-edge); border-radius: 8px;
  background: transparent; color: var(--home-ink);
  /* 16px 아래로 내리면 iOS 사파리가 탭할 때마다 화면을 확대한다 — 이 페이지는
     maximum-scale 을 걸지 않아 확대된 채로 남는다(전역 .selbox select 가 16px 인 이유). */
  font-size: 16px; line-height: 46px;
  /* 아래 option 규칙은 안드로이드 크롬에서만 먹는다 — 사파리는 네이티브 피커라 대체로 무시한다.
     이 한 줄이 UA 에게 펼침 목록·스크롤바까지 어둡게 그리라고 말한다. 둘은 겹쳐 두는 것이 맞다. */
  color-scheme: dark;
}
/* 「시각 모름」을 켜면 quick.js 가 시·분을 disabled 로 잠근다. UA 의 회색 처리를 author 규칙이
   덮어써서 잠긴 칸이 멀쩡해 보인다 — 눌러도 안 열리는데 이유가 안 보인다.
   색은 어디서나 걸리고, :has 는 쉐브론·상자까지 함께 흐리는 덤이다. */
.page--home .quick-form .selbox select:disabled { color: var(--home-muted); }
.page--home .quick-form .selbox:has(select:disabled) { opacity: .55; }
/* 투명한 셀렉트의 펼침 목록은 시스템 기본색으로 뜬다 — 근흑·미색으로 되돌린다. */
.page--home .quick-form .selbox select option { background: var(--home-void); color: var(--home-ink); }
/* 라디오 — 알약 아웃라인 칩이다. 2026-09-22 사용자 판정: 마름모는 표식이 작고 뜻이 없어 라디오로
   안 읽힌다 → 시안 C 알약 아웃라인, 나머지 칸은 시안 G 상자 조판, 쉐브론 5px(합쳐 G-1).
   시안 정본: docs/superpowers/mockups/2026-09-22-quick-form-g-final.html 의 첫 열
   (`v v-g cap-ink cta-box arr-chev chev5`). 비교 시안은 같은 폴더의
   2026-09-22-quick-form-rest.html · 2026-09-22-quick-form-segmented.html 이다.
   **폭 계약**(가장 좁은 흔한 폰 320px 에서 성별·달력 2열이 줄바꿈 없이 선다)은 이 조판이 마름모
   시절보다 세게 지킨다. 320px 에서 `.home-col` 안쪽은 320 − 18×2 = 284px, 격자 gap 16 을 빼고
   반씩 나누면 트랙이 134px 다. 칩 하나 = 글자 + padding 16 + 테두리 2 이고 가장 긴 「양력」이
   15px·자간 .06em 로 약 32px 이니 50px × 2 + gap 8 = 108px ≤ 134px 다. 게다가 `flex: 1` 은
   basis 가 0 이라 트랙이 그보다 좁아져도 칩이 함께 줄어들 뿐 줄을 넘지 않는다 — 마름모 시절의
   「줄바꿈 임계 310px」 같은 것이 아예 없어졌다. justify-content 는 center 로 돌려놨다:
   칩이 트랙을 반씩 채우므로 글자 수가 달라도 두 칸의 세로선이 어긋나지 않는다. */
.page--home .quick-form .field--radio .radio {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 0 8px;
  border: 1px solid var(--home-edge); border-radius: 999px;
  font-size: 15px; letter-spacing: .06em; color: var(--home-muted); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
/* 점을 지우는 것은 :has 를 쓸 수 있을 때뿐이다. 조건을 긍정으로 건다 —
   부정(`not (selector(...))`)으로 걸면 selector() 자체를 모르는 엔진이 블록을 통째로 버려,
   폴백이 필요한 바로 그 엔진에서 「점도 없고 강조도 없는」 폼이 남는다.
   폴백 그림은 이렇다: 네이티브 점·네모가 칩과 라벨 안에 그대로 보인다(accent-color 가 미색이다). */
@supports selector(:has(*)) {
  .page--home .quick-form .field--radio .radio input[type="radio"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
  }
  /* 켜짐을 색 하나로 알리지 않는다 — 테두리·면·글자색·굵기가 함께 바뀐다. 면은 주홍 16% 라
     근흑 위에서 아주 옅고, 글자는 4.5:1 을 넘는 -lit 쪽이다. */
  .page--home .quick-form .field--radio .radio:has(input:checked) {
    border-color: var(--home-accent-lit); background: rgba(184, 73, 46, .16);
    color: var(--home-accent-lit); font-weight: 700;
  }
  /* 체크박스(윤달·시각 모름)는 네모 + 획이다 — 상세 스텝 폼(.page--fortune .f-form.is-steps)이 쓰는
     그림을 홈 토큰으로 옮긴 것. 마름모는 「체크할 칸」으로 안 읽혔고(2026-09-09 상품 폼 시안 A),
     알약 칩과도 모양이 갈려야 라디오와 체크가 구분된다. 입력을 숨기는 일이라 라디오와 같은
     게이트 안이다 — :has 를 모르는 엔진에서는 네이티브 네모가 그대로 남는다. */
  /* 셀렉터에 [type] 을 붙이는 이유: 아래 accent-color 규칙(.quick-form input[type="checkbox"])과
     특이도가 같으면 뒤엣것이 이겨 15px 이 남는다 — opacity 0 이라 안 보일 뿐 죽은 선언이다. */
  .page--home .quick-form .check input[type="checkbox"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
  }
  .page--home .quick-form .check::before {
    content: ''; width: 18px; height: 18px; flex: 0 0 auto;
    border: 1px solid var(--home-edge); border-radius: 3px;
  }
  .page--home .quick-form .check::after {
    content: ''; position: absolute; left: 4px; top: 50%;
    width: 10px; height: 5px; margin-top: -4px;
    border-left: 2px solid var(--home-ink); border-bottom: 2px solid var(--home-ink);
    transform: rotate(-45deg); opacity: 0;
  }
  .page--home .quick-form .check:has(input:checked)::before { border-color: var(--home-ink); }
  .page--home .quick-form .check:has(input:checked)::after { opacity: 1; }
  /* 입력이 숨어 있어 전역 :focus-visible 링이 안 보인다 — 라벨이 대신 받는다.
     offset 은 전역과 같은 2px 다 — 다른 값을 둘 이유가 없다. 첫 칩은 컬럼 왼끝에서
     --home-pad 18px 안쪽에 서므로 .home-col 의 overflow: hidden 과는 여유가 있다. */
  .page--home .quick-form .field--radio .radio:has(input:focus-visible),
  .page--home .quick-form .check:has(input:focus-visible) {
    outline: 3px solid var(--gold); outline-offset: 2px;
  }
}
/* 고대비 모드는 color 를 시스템 색으로 덮지만 opacity 는 건드리지 않는다 — 입력은 숨은 채
   색 구분만 사라져 굵기 하나로 골라야 한다. 상세 스텝 폼이 같은 기법에 이미 쓰는 처방이고,
   위 @supports 블록보다 뒤에 와야 이긴다(특이성이 같다). */
@media (forced-colors: active) {
  .page--home .quick-form .field--radio .radio input[type="radio"],
  .page--home .quick-form .check input[type="checkbox"] {
    appearance: auto;
    position: static; width: auto; height: auto; opacity: 1; margin: 0 6px 0 0;
  }
  /* 네이티브 네모가 돌아왔으니 그린 네모·획은 지운다 — 안 지우면 표식이 둘이다.
     고대비 모드는 author 의 background·border-color 를 시스템 색으로 덮어 「빈/참」 구분도 지운다. */
  .page--home .quick-form .check::before,
  .page--home .quick-form .check::after { content: none; }
  /* 칩 기하는 게이트 밖(글자만 담는 크기)이라 점이 돌아오면 320px 트랙 63px 안에 점+글자+안여백이
     못 들어가 흘러넘친다(적대 리뷰 2026-09-22). 점이 보이는 순간 칩은 할 일이 없다 — 인라인 컨트롤로 되돌린다. */
  .page--home .quick-form .field--radio .radio {
    flex: none; min-width: auto; padding: 0; border: 0; border-radius: 0;
    letter-spacing: 0; justify-content: flex-start;
  }
}
/* 전역 .check 가 display:flex 인 것은 「윤달」 칸이 라디오와 한 줄에 서지 않게 하려는 것이다 —
   inline-flex 로 바꾸면 폭이 남는 순간 옆에 붙는다. position:relative 는 위 ::after 획의 기준점이다. */
.page--home .quick-form .check {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  /* 44px: 같은 블록의 칩과 같은 터치 타겟이다(시안은 40 이었다 — 4px 차이는 눈에 안 띄고 엄지에는 띈다). */
  min-height: 44px; margin: 4px 0 0;
  font-size: 14px; color: var(--home-muted); cursor: pointer;
}
.page--home .quick-form .check:has(input:checked) { color: var(--home-ink); }
/* 라디오도 함께 겨냥한다 — 폴백·고대비에서 점이 도로 나오면 브라우저 기본 파랑이 근흑 위에 뜬다.
   같은 파일의 다른 다크 폼(.page--fortune, .page--reading)이 미색을 쓰는 이유와 같다. */
.page--home .quick-form input[type="radio"],
.page--home .quick-form input[type="checkbox"] { width: 15px; height: 15px; accent-color: #f4eadb; }
.page--home .quick-form .f-err { color: var(--home-accent-lit); }
/* 버튼은 기존대로 전폭이다(2026-09-06 사용자 결정) — 모서리는 셀렉트 상자와 같은 8px 로. */
.page--home .quick-form .cta {
  display: block; width: 100%; margin: 14px 0 0;
  min-height: 48px; padding: 14px 20px; border-radius: 8px;
  background: var(--home-accent); color: #fff4ea;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
}

/* ── 무료 판(시안 C · 스펙 2026-09-20 §5). `.quick-say` 아래·`.quick-wait` 위에 서고, 대기와 결과가
   같은 판 하나를 나눠 쓴다. chart.css 는 홈에 안 실리므로(잠금 §3-7) 규칙은 전부 여기 홈 스코프에 있다.
   **새 색은 없다** — 오행 5색·판 금빛은 :root 토큰이고 나머지는 홈 토큰이다(값 복제 금지, [[css-traps]]). */
.page--home .quick-board {
  /* 역할 토큰은 판 스코프에 산다(chart.css:57 과 같은 처방). `.page--home` 에는 --r-gold 가 아예 없어서
     이 한 줄이 없으면 아래 var(--r-gold) 가 guaranteed-invalid 가 되고, 금빛이 상속색으로 조용히 죽는다 —
     화면이 깨지는 게 아니라 색만 틀리는, 눈으로만 보이는 고장이다. */
  --r-gold: var(--board-gold);
  margin: 0 0 26px;
}
/* 판만 보는 종목(자미 명반·점성 차트, 잠금 19)은 유료 판 조각을 `.page--reading > .reading-col` 로
   감싸 그대로 꽂는다(views/_quick-chart.ejs) — 토큰·표·인쇄 규칙을 홈 스코프로 복사하지 않기 위해서다.
   감싸개는 페이지 기둥의 옷(100vh·그림자·400px·가운데 정렬)을 입고 오므로 그것만 걷는다.
   토큰·색·접기·인쇄는 그대로 둔다 — 그게 감싸는 이유다. */
.page--home .quick-board .reading-col {
  min-height: 0;
  max-width: none;
  margin: 0;
  box-shadow: none;
}
/* 오늘 일진 한 줄 — 여덟 글자 **위**. `saju-free-today` 봉투에만 있다. */
.page--home .quick-board .qb-iljin { font-size: 12px; color: var(--home-muted); margin: 0 0 14px; }
.page--home .quick-board .qb-iljin b {
  font-family: var(--display-serif); font-size: 15px; font-weight: 400; color: var(--r-gold);
}
/* 여덟 글자. 4열 고정이라 한 칸이 컬럼 안폭의 1/4(373px 기준 93px)이고 한자 34px 는 여유가 있다. */
.page--home .quick-board .qb-eight {
  width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0 0 20px;
}
.page--home .quick-board .qb-eight th {
  text-align: center; font-weight: 400; font-size: 10px; letter-spacing: .12em;
  color: var(--home-muted); padding: 0 0 7px; border: 0;
}
.page--home .quick-board .qb-eight td {
  text-align: center; padding: 10px 0 12px; border: 1px solid var(--home-line);
}
/* 일주 칸. 테는 border 가 아니라 안쪽 그림자다 — border-collapse 에서 같은 굵기끼리 부딪히면
   어느 쪽이 그려질지가 표 기하에 달려 있어, 이웃 칸이 금빛 변을 반쯤 먹는 일이 생긴다. */
.page--home .quick-board .qb-eight td.is-day {
  background: color-mix(in srgb, var(--board-gold) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--board-gold) 50%, transparent);
}
.page--home .quick-board .qb-eight .han {
  font-family: var(--display-serif); font-size: 34px; line-height: 1.05; color: var(--home-ink);
}
.page--home .quick-board .qb-eight .is-day .han { color: var(--r-gold); }
.page--home .quick-board .qb-eight .is-unknown .han { color: var(--home-muted); }
.page--home .quick-board .qb-eight .rd { display: block; font-size: 10px; color: var(--home-muted); margin: 6px 0 0; }
.page--home .quick-board .qb-eight .tg { display: block; font-size: 10.5px; color: var(--home-muted); margin: 3px 0 0; }
/* 시각 모름 고지. 표 아래 여백을 먹고 들어와 한 덩이로 읽히게 한다. */
.page--home .quick-board .qb-note { font-size: 11.5px; color: var(--home-muted); margin: -12px 0 18px; }
/* 도형과 「지금 든 운」은 한 줄에 나란히. 컬럼이 좁아지면 wrap 으로 두 줄이 된다. */
.page--home .quick-board .qb-blocks {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin: 0 0 18px;
}
.page--home .quick-board .qb-fig { flex: 0 0 158px; }
.page--home .quick-board .qb-fig svg { display: block; }
.page--home .quick-board .qb-now { flex: 1 1 auto; padding: 4px 0 0; }
.page--home .quick-board .qb-h3 {
  font-size: 10px; letter-spacing: .18em; font-weight: 600; color: var(--home-muted); margin: 0 0 8px;
}
.page--home .quick-board .qb-run { font-size: 12px; color: var(--home-muted); line-height: 1.9; margin: 0; }
.page--home .quick-board .qb-run b {
  font-family: var(--display-serif); font-size: 14px; font-weight: 400; color: var(--r-gold);
}
/* 오행 도형 — 마크업이 판의 것 그대로라 클래스 이름도 같다. 색만 홈 토큰으로 바꿔 칠한다. */
.page--home .quick-board .wx-ring { fill: none; stroke: var(--home-line); stroke-width: 1; }
.page--home .quick-board .wx-ring--mid { stroke-dasharray: 2 3; }
.page--home .quick-board .wx-spoke { stroke: var(--home-line); stroke-width: 1; }
.page--home .quick-board .wx-val {
  fill: color-mix(in srgb, var(--board-gold) 16%, transparent);
  stroke: var(--r-gold); stroke-width: 1.5; stroke-linejoin: round;
}
.page--home .quick-board .wx-lb { font-size: 11px; fill: var(--home-muted); font-variant-numeric: tabular-nums; }
/* 0 인 축도 라벨 색은 안 깎는다 — 11px <text> 는 큰 글자 예외가 없어 알파를 먹이면 근흑 위에서
   AA(4.5:1) 밑으로 떨어진다. 0 은 속 빈 점(.wx-pt.is-zero)과 라벨의 「0」 글자 둘로 이미 갈린다. */
.page--home .quick-board .wx-p-wood { fill: var(--wx-wood); }
.page--home .quick-board .wx-p-fire { fill: var(--wx-fire); }
.page--home .quick-board .wx-p-earth { fill: var(--wx-earth); }
.page--home .quick-board .wx-p-metal { fill: var(--wx-metal); }
.page--home .quick-board .wx-p-water { fill: var(--wx-water); }
/* 클래스 넷(0,4,0)이라 색 규칙 셋(0,3,0)을 특정도로 이긴다 — 판과 같은 처방·같은 이유(순서에 기대지 않는다). */
.page--home .quick-board .wx-pt.is-zero { fill: none; stroke: var(--home-line); stroke-width: 1; }
/* 신살은 전량·전폭이다(S1) — 개수 제한도 접기도 없어서 칩이 다섯 줄까지 간다(실측 162px). */
.page--home .quick-board .chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.page--home .quick-board .chip {
  font-size: 11.5px; padding: 3px 8px; border: 1px solid var(--home-line);
  border-radius: 2px; color: var(--home-ink);
}
/* 전역 `.chip-sub` 는 종이색(--ink-soft)이라 근흑 위에서 2.4:1 이다 — 홈 값으로 덮는다. */
.page--home .quick-board .chip-sub { margin-left: 5px; font-size: 10px; color: var(--home-muted); }

/* 대기 연출 — /first 의 .wait 를 홈 폭에 맞춰 줄인 것. @keyframes wait-blot 은 그것을 그대로 쓴다
   (주기가 갈리면 두 화면이 다른 물건이 된다). 얼굴 사진은 두지 않는다 — 홈에는 그 자리가 없다. */
/* 폼이 있던 자리에서 그대로 이어지게 위 여백은 리드가 준 것만 쓴다 — 여기서 한 번 더 주면
   폼이 대기로 바뀔 때 글이 아래로 26px 내려앉는다. 아래 여백은 방울이 번질 자리다. */
.page--home .quick-wait { position: relative; padding: 0 0 44px; }
.page--home .quick-wait .wait-say { position: relative; z-index: 1; }
.page--home .quick-wait .wait-ink { font-family: var(--display-serif); font-size: 16.5px; margin: 0 0 6px; }
.page--home .quick-wait .wait-sub { font-size: 13px; color: var(--home-muted); margin: 0; }
.page--home .quick-wait .wait-blot {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 30%;
  top: 58%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 73, 46, .42) 0%, rgba(184, 73, 46, .13) 45%, transparent 70%);
  filter: blur(14px);
  opacity: 0;
  transform: scale(.1);
  animation: wait-blot 5.4s ease-in-out infinite;
}
.page--home .quick-wait .wait-blot--2 { left: 74%; top: 38%; animation-delay: -2.7s; }
/* 번지는 얼룩이 얼어붙으면 「아무 일 없음」이 된다 — 정지 자세를 못박는다(.page--reading 과 같은 계약).
   위쪽 전역 규칙이 animation 을 !important 로 끄므로 여기서는 opacity·transform 만 준다. */
@media (prefers-reduced-motion: reduce) {
  .page--home .quick-wait .wait-blot { opacity: 1; transform: scale(.72); }
  .page--home .quick-wait .wait-blot--2 { display: none; }
}

/* 결과. 제목 자리에는 손님이 넣은 값 한 줄이 온다 — 서버 title 은 종목 이름이라 늘 「간단 사주풀이」고,
   바로 위 섹션 제목과 같은 글자가 두 번 나온다(스펙 2026-09-06 §3-3). 라벨 캡션과 같은 결로 적는다. */
.page--home .quick-out { padding: 0; }
/* 이 상자와 머리(.quick-kicker)는 quick.js 가 초점을 옮겨 주는 자리다 — 링은 위 전역
   [tabindex="-1"]:focus 가 지운다. 여기서 다시 세우면 그 규칙을 특정성으로 이긴다. */
.page--home .quick-kicker {
  font-size: 11px; letter-spacing: .22em; font-weight: 600;
  color: var(--home-accent-lit); margin: 0 0 18px;
}
/* 값이 비면 kicker 를 그리지 않는다 — 빈 h3 는 18px 여백과 빈 제목 노드로 남는다. */
.page--home .quick-kicker:empty { display: none; }
/* 놀이 표기(§9-2) — 본문 위 한 줄. 폼 밑 힌트(.quick-form .f-note)와 같은 결로 물러서 있다:
   결과를 읽기 전에 눈에는 닿되 본문을 밀어내지는 않는다. 이름 궁합 말고는 비므로 접는다. */
.page--home .quick-note { font-size: 12px; color: var(--home-muted); margin: 0 0 18px; }
.page--home .quick-note:empty { display: none; }
/* 본문 조판 — 풀이 화면 .ch-body 와 같은 명조. 상자가 없어진 만큼 행간은 조금 더 넓다. */
.page--home .quick-body { font-family: var(--display-serif); font-size: 15.5px; line-height: 2.05; }
.page--home .quick-body p { margin: 0 0 20px; }
.page--home .quick-body p:last-child { margin-bottom: 0; }
/* 더 깊이 보고 싶다면(§6, 2026-09-27 개정 — 시안 「마」). 유료 한 장만 거는 카드다. 금액은 없다(잠금 8).
   새 색은 없다 — 홈 토큰만 쓴다. 괘선 하나(왼쪽 3px 주홍)가 「여기부터는 다른 풀이」를 말한다. */
.page--home .quick-more { margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid var(--home-line); }
.page--home .quick-more-k {
  font-size: 11px; letter-spacing: .22em; font-weight: 600;
  color: var(--home-accent-lit); margin: 0 0 10px;
}
.page--home .quick-more h3 { font: 700 22px/1.35 var(--display-serif); margin: 0; color: var(--home-ink); }
.page--home .quick-paid {
  margin: 18px 0 0; padding: 18px 16px 16px;
  border: 1px solid var(--home-line); border-left: 3px solid var(--home-accent);
}
.page--home .quick-paid h4 { font: 700 18px/1.35 var(--display-serif); margin: 0; color: var(--home-ink); }
/* 간격은 뒤 요소의 위 여백만 쓴다 — 한 줄·장·「그리고 … 더」 중 무엇이 빠져도 사이가 안 벌어진다. */
.page--home .quick-paid-h { font-size: 13px; color: var(--home-muted); margin: 6px 0 0; }
/* 표식은 li::before 의 글자다 — 비어 있지 않은 content 라 Safari 가 list-style:none 이어도 목록으로
   읽는다(a11y.test.ts known 맵). 시안은 빈 content 에 1px 막대였는데 그러면 그 다리가 끊긴다. */
.page--home .quick-paid ul { margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--home-ink); }
.page--home .quick-paid li { position: relative; padding: 5px 0 5px 14px; }
.page--home .quick-paid li::before { content: '–'; position: absolute; left: 0; color: var(--home-muted); }
/* 목록의 한 줄처럼 들여 선다(시안은 li 였다). 목록 밖 p 라 스크린 리더가 넷째 항목으로 세지 않는다. */
.page--home .quick-paid-rest { font-size: 13px; color: var(--home-muted); margin: 0; padding: 5px 0 5px 14px; }
/* 유료 상세로 가는 유일한 문. 전폭·모서리 2px 는 그대로(2026-09-06 사용자 결정), 테두리 버튼에서 채운 버튼으로. */
.page--home .quick-paid .cta {
  display: block; width: 100%; min-height: 44px; padding: 14px 20px; border-radius: 2px;
  background: var(--home-accent); color: var(--chip-on-ink);
  font-size: 14.5px; font-weight: 600; margin: 16px 0 0;
}
/* 「확인할 수 있는 내용」(2026-09-28 오늘의 운세, 2026-09-29 `/unse` 무료 면 전부. 시안 2026-09-28-today-seo-2 「2」).
   /tti 할매 한 줄의 문법 — 먹 5% 면 + 왼쪽 주홍 획 — 을 여덟 번. 모서리·그림자 없이 평면으로만.
   좌우는 .sec--quick 과 같은 --home-pad 안쪽이라 글자 왼쪽 선이 폼과 맞는다. 새 색 없이 홈 토큰만. */
.page--home .today-guide {
  margin: 34px var(--home-pad) 0;
  padding: 30px 0 34px;
  border-top: 1px solid var(--home-line);
}
.page--home .today-guide h2 { font: 700 20px/1.4 var(--display-serif); color: var(--home-ink); margin: 0; }
.page--home .today-guide .tg-items { display: grid; gap: 8px; margin-top: 18px; }
.page--home .today-guide .tg-item {
  position: relative;
  background: color-mix(in srgb, var(--home-ink) 5%, var(--home-void));
  padding: 14px 16px 14px 18px;
}
.page--home .today-guide .tg-item::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--home-accent);
}
.page--home .today-guide h3 { font: 600 15.5px/1.4 var(--display-serif); color: var(--home-ink); margin: 0; }
.page--home .today-guide p { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--home-muted); }
/* 2026-09-29 에 붙은 것들: h2 아래 소개 문단(원문 <br> 는 \n 이라 pre-line), 한 칸 안의 여러 문단·굵은 머리,
   띠궁합표, 점성 프롬프트. 400px 에서 가로 스크롤이 없어야 한다 — 표는 폭 100%·고정 배치, pre 는 접는다.
   화면 전체가 keep-all 이라 공백 없는 「호랑이띠·토끼띠·양띠」가 칸을 밀지 않게 anywhere 로 접는다. */
.page--home .today-guide .tg-intro { margin: 10px 0 0; font-size: 14px; line-height: 1.75; white-space: pre-line; }
.page--home .today-guide p + p { margin-top: 10px; }
.page--home .today-guide strong { color: var(--home-ink); font-weight: 600; }
.page--home .today-guide table {
  width: 100%; table-layout: fixed; border-collapse: collapse; margin: 10px 0;
  font-size: 12.5px; line-height: 1.55;
}
.page--home .today-guide th,
.page--home .today-guide td {
  padding: 7px 6px; border-bottom: 1px solid var(--home-line);
  text-align: left; vertical-align: top; overflow-wrap: anywhere;
}
.page--home .today-guide th { color: var(--home-ink); font-weight: 600; }
.page--home .today-guide th:first-child { width: 24%; }
.page--home .today-guide td { color: var(--home-muted); }
.page--home .today-guide pre {
  margin: 10px 0 0; padding: 12px; border: 1px solid var(--home-line);
  font-family: inherit; font-size: 12.5px; line-height: 1.7; color: var(--home-muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.page--home .today-guide code { font: inherit; }

.page--home .site-footer {
  padding: 26px var(--home-pad) 32px;
  border-top: 0;
  color: var(--home-muted);
  font-size: 11px;
  line-height: 1.7;
}
/* 다시 보기. 콜로폰과 같은 급으로 낮췄으니(2026-09-07 시안 A) 링크인 것은 밑줄이 혼자 말한다.
   --home-muted 는 근흑 위 7.3:1 이라 11px 에서도 본문 대비 기준을 넘는다. */
.page--home .footer-lookup { margin: 0 0 12px; }
.page--home .footer-lookup a {
  color: var(--home-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* 홈에서 /replay 로 가는 유일한 문이라 손가락 자리를 11px 줄 상자보다 넓게 준다.
     인라인 요소의 세로 패딩은 줄 상자를 밀지 않으므로 아래 콜로폰과의 12px 간격은 그대로다. */
  padding: 6px 0;
}

@media (min-width: 640px) {
  .page--home .doc { padding: 0 0 8px; }
  .page--home .sec-title { font-size: 22px; }
  .page--home .cta { width: 100%; }
}

/* ── 종목 상세 흙먹. .page--fortune 안에서만. 값은 목업 fortune.html(?s=c) 이식. */
.page--fortune {
  background: #101012;
  color: #f4eadb;
}
.page--fortune .fortune-col {
  --f-void: #0e0c0c;
  --f-ink: #f4eadb;
  --f-muted: #b39a82;
  /* 부가 텍스트(차례의 장 소제목). 리딩 --r-muted-2 와 같은 값·같은 역할이고 스코프만 다르다 */
  --f-muted-2: #9a8776;
  --f-line: #262020;
  --f-accent: #b8492e;
  /* 다크 위 주홍 '글자·표식'(십자 같은 의미 있는 선)용 7.47:1. --f-accent 는 3.74:1 이라
     면·테두리·장식 획(한마디·답머리 획)에만 — 리딩 --r-accent/--r-accent-lit 와 같은 값·같은 역할 */
  --f-accent-lit: #e08a70;
  /* 접기 summary 포커스 링. 전역 --gold 는 흙먹 위에서 탁하다(리딩 --r-gold 와 같은 값) */
  --f-gold: #c8a35a;
  --f-pad: 18px;
  --f-edge: rgba(244, 234, 219, .35);
  --f-field: rgba(16, 12, 9, .4);
  /* clip 이어야 한다 — hidden 이면 스크롤 컨테이너가 되어 sticky 헤더가 죽는다. */
  overflow: clip;
  color: var(--f-ink);
  background: var(--f-void);
}
.page--fortune .skip { z-index: 10; } /* 상세 헤더(9) 위 — 포커스된 스킵 링크가 헤더 띠 안에 뜬다 */
/* .doc 은 뺀다 — main 이 쌓임 맥락이 되면 그 안의 스텝 시트(7)·CTA 바(8)가 푸터(2)·그레인(6) 밑에 갇힌다
   (맨 아래로 스크롤하면 푸터가 바 클릭을 가로챘다). */
.page--fortune .site-footer { position: relative; z-index: 2; }
/* 상세 헤더 — 사진 위에 얹고 sticky. 사진 위에서는 투명+위쪽 그늘, 스크롤이 시작되면(is-solid) 반투명 검정.
   z 9: 시트(7)·CTA 바(8) 위에 있어야 시트가 열려도 꺾새가 눌린다. 스펙 2026-09-03 */
.page--fortune .site-header--over {
  position: sticky;
  top: 0;
  z-index: 9;
  margin-bottom: -52px;
  /* 기본 .site-header 의 밝은 아래선을 지운다 — 사진 위에 투명하게 얹히는 쪽만 필요하다.
     결과 화면은 .page--reading .site-header 의 어두운 선을 그대로 쓴다. */
  border: 0;
}
.page--fortune .site-header--over::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(8, 5, 4, .6), transparent);
}
.page--fortune .site-header--over.is-solid::before {
  background: rgba(11, 11, 12, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* is-solid 전환 기준점 — 히어로 바로 앞의 1px. 스크롤이 시작되는 즉시 켜진다(시안 B 그대로) */
.page--fortune .f-top { position: absolute; top: 0; width: 1px; height: 1px; }
.page--fortune .doc { max-width: none; margin: 0; padding: 0; }
.page--fortune .site-footer {
  padding: 28px var(--f-pad) 96px;
  margin-top: 26px;
  border-top: 1px solid var(--f-line);
  color: var(--f-muted);
  font-size: 11px;
  line-height: 1.7;
}

/* 히어로 */
.page--fortune .f-hero { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.page--fortune .f-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page--fortune .f-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 5, 4, .55) 0%, transparent 40%);
}
.page--fortune .f-head { padding: 20px var(--f-pad) 4px; }
.page--fortune .f-kicker {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--f-accent);
  margin: 0 0 6px;
}
.page--fortune .f-title {
  font-family: var(--display-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--f-ink);
}
.page--fortune .f-one { font-size: 13px; color: var(--f-muted); margin: 0 0 12px; }
/* 한마디 — 한 줄과 소개 사이. 답머리 획(.ask-a::before)과 같은 22px 주홍 획을 위에 둔다 */
.page--fortune .f-say {
  margin: 18px 0 16px;
  font-family: var(--display-serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--f-ink);
}
.page--fortune .f-say::before { content: ''; display: block; width: 22px; height: 1px; background: var(--f-accent); margin: 0 0 14px; }
.page--fortune .f-intro { font-size: 15px; margin: 0; white-space: pre-line; }

/* 후킹 문구 — 히어로와 FAQ 사이 카드. 번호는 마크업이 아니라 카운터다(decimal-leading-zero = 01·02…).
   .f-veil 은 맛보기 카드 .is-veiled 와 같은 그림이지만 스코프가 달라 선언을 복사한다. */
.page--fortune .f-hooks {
  margin: 38px var(--f-pad) 0;
  padding: 20px 18px;
  border: 1px solid var(--f-line);
  border-radius: 12px;
  background: var(--f-field);
}
.page--fortune .f-hooks ol { list-style: none; margin: 0; padding: 0; counter-reset: hook; }
.page--fortune .f-hooks li {
  counter-increment: hook;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--f-ink);
}
.page--fortune .f-hooks li + li { margin-top: 16px; }
.page--fortune .f-hooks li::before {
  content: counter(hook, decimal-leading-zero);
  font-family: var(--display-serif);
  font-size: 14px;
  color: var(--f-accent-lit);
  padding-top: 2px;
}
/* 인라인이라 blur 가 양옆 선명한 글자로 번진다 — .is-veiled 는 블록 <dd> 였다. 좌우 여백으로 떼어 놓는다.
   -webkit- 접두는 Safari 17 미만용(기존 .is-veiled 에는 없는 구멍이다). */
.page--fortune .f-veil {
  filter: blur(5px);
  padding: 0 .15em;
  user-select: none;
  -webkit-user-select: none;
  color: var(--f-muted);
}

/* FAQ */
/* 섹션 사이 46 — 장 목록 행 사이(11+11+1)와 구별되는 유일한 값이라야 섹션이 끊겨 보인다.
   26 이던 시절엔 행 사이와 거의 같아 차례·후기·문답이 한 덩어리로 읽혔다(2026-09-12 시안 C). */
.page--fortune .f-sec { margin: 0; padding: 46px var(--f-pad) 0; }
.page--fortune .f-sec-title {
  font-family: var(--display-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 16px;
  color: var(--f-ink);
}
/* 섹션 머리 먹 방울(개정 2026-09-12, 시안 2) — 22px 직선 획을 대신한다. 한마디(.f-say)·답머리
   (.qa > p)의 획은 그대로 두고 섹션 머리만 바꿨다: 풀이를 기다릴 때 번지는 그 방울(.wait-blot)이
   사이트의 유일한 장식 모티프이고, 상세도 같은 먹을 쓴다. 값은 그 방울과 같은 그라디언트다.
   absolute 라 제목을 아래로 밀지 않는다 — 글자 뒤로 스미는 얼룩이지 글머리 표식이 아니다.
   이 클래스는 **보이는 제목에만** 붙는다 — 폼의 시각 숨김 제목은 `.sr-only` 만 단다(그래서
   여기 `:not(.sr-only)` 예외가 필요 없다. 숨김 유틸과 장식 규칙이 특이도를 다투면 둘 다 약해진다).

   **글자 뒤로 보내는 데 두 줄이 든다.** `z-index: -1` 만 주면 방울이 `.fortune-col` 의 바탕
   (`background: var(--f-void)`) 뒤로 빠져 통째로 사라진다 — 그 컬럼은 쌓임 맥락이 아니다.
   제목 자신이 `isolation: isolate` 로 맥락을 만들고, 그 안에서 방울이 -1 로 내려가야 한다
   (판 `.board { position: relative; z-index: 1 }` 과 같은 처방). 이걸 빠뜨리면 방울이 첫 글자
   **위**에 칠해져 글자가 물든다 — 원본 `.wait-blot` 이 `z-index: -1` 인 것과 같은 이유다.

   forced-colors 에서는 이 방울이 사라진다. 다만 **획과 견줄 일이 아니다** — 한마디·답머리의
   22px 획도 `background: var(--f-accent)`(background-color)라 같은 모드에서 함께 지워진다.
   사실은 「이 화면에는 고대비를 견디는 표식이 원래 없었다」이고, 정말 남기려면 접기 여는 줄
   (`.fold > summary::before`)처럼 `border-top` 으로 그려야 한다. */
.page--fortune .f-sec-title { position: relative; isolation: isolate; }
.page--fortune .f-sec-title::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -20px;
  top: -24px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 73, 46, .42) 0%, rgba(184, 73, 46, .13) 45%, transparent 70%);
}
/* 차례 — 장 목록. `.page--reading .next` 와 같은 그림(제N장 잔글씨 + 제목)이지만 스코프가 달라 선언을 복사한다. */
.page--fortune .f-toc { list-style: none; margin: 0; padding: 0; }
/* 바깥 목록만 겨냥한다 — `.f-toc li` 로 두면 안쪽 소제목 항목마다 밑줄·11px 패딩이 붙는다. */
.page--fortune .f-toc > li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--f-line);
  font-size: 15px;
}
/* 「제N장」·장 제목은 명조다(개정 2026-09-12, 시안 3) — 고서 차례의 결. 소제목만 산세로 남긴다. */
.page--fortune .f-toc .no { color: var(--f-accent-lit); font-family: var(--display-serif); font-size: 12.5px; letter-spacing: .04em; flex: 0 0 auto; }
.page--fortune .f-toc .t { font-family: var(--display-serif); font-size: 16px; }
/* 장 소제목 — 맛보기 목차(`.page--reading .next .sub`)와 같은 그림이고 스코프만 다르다.
   항목 앞의 '·' 가 접근성 구제 다리라 안쪽 목록에는 role="list" 를 안 단다(a11y.test.ts known 맵). */
.page--fortune .f-toc .sub { list-style: none; margin: 6px 0 0; padding: 0; }
.page--fortune .f-toc .sub li {
  /* 본문 산세 스택을 여기서 한 번 더 적는다 — 위 .t 가 명조라 그냥 두면 소제목까지 명조를 물려받는다.
     (전역 스택은 body 에만 있고 토큰이 없다. 토큰을 만들면 body 선언까지 건드려야 해서 여기서 끊는다.) */
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  position: relative;
  padding-left: 11px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--f-muted-2);
  overflow-wrap: anywhere;
}
.page--fortune .f-toc .sub li::before { content: '·'; position: absolute; left: 1px; }

/* FAQ — 십자 토글. 리딩 `.board-help > summary` 와 같은 그림(닫힘 ＋ / 펼침 －)이지만 스코프가 달라 선언을 복사한다.
   십자 top 은 px 로 못박는다(위 패딩 14 + 줄 높이 22 의 절반 = 25). 50% 로 두면 두 줄 질문에서 십자가 내려앉는다.
   획 폭은 홀수(9)여야 한다 — 회전 중심이 x=4.5 라 세로 획이 픽셀 열 하나(4~5)에 앉는다. 10 이면 두 열에 반씩 걸쳐 1x 에서 흐리다.
   원본과 다른 값: 들여쓰기 24(질문이 명조 16 이라 19 보다 넓게), 포커스 --f-gold(= --r-gold 같은 값, 스코프만 다름). 나머지는 같다. */
.page--fortune .qa { border-bottom: 1px solid var(--f-line); padding: 0; }
.page--fortune .qa summary {
  position: relative;
  list-style: none;
  padding: 14px 0 14px 24px;
  line-height: 22px;
  font-family: var(--display-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--f-ink);
  cursor: pointer;
}
.page--fortune .qa summary::-webkit-details-marker { display: none; }
.page--fortune .qa summary::before,
.page--fortune .qa summary::after {
  content: '';
  position: absolute;
  left: 0;
  top: 25px;
  width: 9px;
  border-top: 1px solid var(--f-accent-lit);
}
.page--fortune .qa summary::after { transform: rotate(90deg); }
.page--fortune .qa[open] summary::after { display: none; }
.page--fortune .qa summary:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 2px; }
.page--fortune .qa > p {
  margin: 0 0 18px;
  padding-left: 24px;
  color: var(--f-muted);
  font-size: 14px;
  line-height: 1.8;
}
/* 답머리 획은 첫 문단에만 — 답이 두 문단이 되어도 획은 하나 */
.page--fortune .qa > p:first-of-type::before { content: ''; display: block; width: 22px; height: 1px; background: var(--f-accent); margin: 0 0 10px; }

/* 대표 후기 — FAQ 와 같은 .f-sec 틀 안에 줄 목록. .f-sec 의 padding-bottom 이 0 이라 아래 여백은 목록이 진다.
   별은 --f-gold(#c8a35a, 8.2:1) 다 — --f-accent 는 3.74:1 이라 글자에 못 쓴다(위 토큰 주석). */
.page--fortune .f-rv { list-style: none; margin: 0; padding: 0; }
.page--fortune .f-rv-i { padding: 14px 0; border-bottom: 1px solid var(--f-line); }
.page--fortune .f-rv-s { font-size: 13px; letter-spacing: .1em; color: var(--f-gold); }
/* 손님 말은 「」 안에 명조로 앉힌다(개정 2026-09-12, 시안 4) — 한마디(.f-say)와 같은 옷이고,
   따옴표는 CSS 가 아니라 템플릿이 찍는다(복사·스타일 없는 화면에서도 남의 말인 것이 남는다). */
.page--fortune .f-rv-b { margin: 8px 0 0; font-family: var(--display-serif); font-size: 15px; line-height: 1.8; color: var(--f-ink); }
/* 서명은 낙관이다 — 맛보기 카드 인장(chart.css .block-seal)과 같은 그림, 각도만 얕다(-3°).
   테두리는 먹주홍(--f-accent, 3.74:1 — 글자가 아닌 선이라 쓴다), 글자는 --f-accent-lit(7.47:1). */
.page--fortune .f-rv-g {
  display: inline-grid;
  place-items: center;
  margin: 12px 0 0;
  padding: 3px 8px;
  border: 1px solid var(--f-accent);
  border-radius: 3px;
  color: var(--f-accent-lit);
  font-family: var(--display-serif);
  font-size: 11.5px;
  transform: rotate(-3deg);
}

/* 하단 고정 액션 바 — 상세와 스텝이 같은 자리를 공유한다 */
.page--fortune .cta-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  z-index: 8; /* 스텝 시트(7) 위 */
  padding: 24px var(--f-pad, 18px) 16px;
  display: flex;
  gap: 10px;
  background: linear-gradient(to top, rgba(16, 16, 18, .96) 55%, transparent);
}
/* 「이전」 — 위저드가 열려 있을 때만 선다(fortune-steps.js 가 만들고 hidden 을 토글한다).
   채우지 않은 먹 버튼이다: 주홍(#b8492e)은 이 화면에서 **앞으로 가는 한 가지 색**이라
   되돌아가는 버튼에 빌려 주지 않는다. 테두리는 시트 안 입력칸과 같은 --f-edge —
   먹판 위 미색 실선이라는 같은 말을 쓴다(.f-form .selbox select 와 같은 값).
   높이를 안 적는 건 일부러다: .cta-bar 가 flex 라 「다음」에 맞춰 늘어난다. 「다음」은
   line-height 를 안 적어 body 의 1.7 을 상속하므로 실측 **59px** 이다(52 가 아니다 —
   52 는 이 버튼의 **폭**이고, 탭 타깃 기준 44px 을 넘긴다).
   그래서 세로 padding 으로 글리프를 가운데 두지 않는다: 높이를 stretch 가 정하는 상자에서
   padding 은 기준이 못 되고, 남는 몫이 한쪽으로 쏠린다(실측 0.25px 치우침).
   grid 로 가운데 둔다 — 헤더 꺾새(.site-header--over .site-back)가 쓰는 것과 같은 관용구다. */
.page--fortune .cta-back {
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--f-edge);
  border-radius: 4px;
  background: transparent;
  color: var(--f-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.page--fortune .cta-main {
  flex: 1;
  text-align: center;
  padding: 15px 20px;
  border: 0;
  border-radius: 4px;
  background: #b8492e;
  color: #fff4ea;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
}

/* no-JS 기본 폼: 다크 위 일반 폼 */
.page--fortune .f-form { padding: 26px var(--f-pad) 0; scroll-margin-top: 52px; } /* no-JS 앵커(#birth-form)가 헤더 아래로 안 들어가게 */
.page--fortune .f-form-card { border: 0; padding: 0; background: transparent; }
.page--fortune .f-form legend { color: var(--f-ink); }
.page--fortune .f-form .selbox select,
.page--fortune .f-form .text-input {
  border-color: var(--f-edge);
  background: var(--f-field);
  color: var(--f-ink);
}
.page--fortune .f-form .radio,
.page--fortune .f-form .check { color: var(--f-ink); }
.page--fortune .f-form input[type="radio"],
.page--fortune .f-form input[type="checkbox"] { accent-color: #f4eadb; }
/* 궁합 폼의 사람 표시 — 열 칸이 한 번에 펼쳐지는 no-JS 자리에서 누구 칸인지 가르는 유일한 표식이다.
   스텝 시트에서는 질문 자체가 「상대분 …」이라 겹치므로 감춘다(감출 뿐 지우지 않는다). */
.page--fortune .f-form .form-who {
  margin: 22px 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--f-ink);
}
.page--fortune .f-form-card > .form-who:first-child { margin-top: 0; }
.page--fortune .f-form.is-steps .form-who { display: none; }
.page--fortune .f-form .f-hint { color: rgba(244, 234, 219, .55); }
.page--fortune .f-form .f-err { color: #e79c85; }
.page--fortune .f-form .cta { background: var(--f-accent); color: #fff4ea; }

/* 스텝 시트(JS 가 is-steps 를 붙인다) — 상세 위에 스크림을 깔고 먹판(점·질문·입력)이 바닥에서 올라온다.
   z-index 는 루트 맥락(.doc 이 z-index:auto)에서 비교된다: 푸터 2 < 그레인 6 < 시트 7 < CTA 바 8 < 상세 헤더 9.
   뒤 문서 스크롤은 html:has 로 잠그고 긴 스텝은 시트 안에서 스크롤. */
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(100%); opacity: 0; } }
@keyframes rise-step { from { transform: translateY(18px); opacity: 0; } }
html:has(.f-form.is-steps) { overflow: hidden; }
.page--fortune .f-form.is-steps {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  padding: 52px 0 0; /* 헤더(9)가 시트 위에 있어 긴 스텝의 먹판 머리가 헤더 밑으로 들어가지 않게 */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(6, 4, 3, .6);
  animation: fade .3s both;
}
.page--fortune .wz-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 0 14px;
}
.page--fortune .wz-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(244, 234, 219, .32);
}
.page--fortune .wz-dots i.on { background: #f4eadb; }
.page--fortune .wz-panel {
  width: 100%;
  max-width: 400px;
  margin: auto auto 0; /* 바닥에 붙인다. 넘치면 top auto 가 0 이 되어 위부터 스크롤된다 */
  padding: 18px var(--f-pad) 100px; /* 아래 100px 은 고정 CTA 바 자리 */
  border: 1px solid rgba(244, 234, 219, .22);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(14, 12, 12, .96);
  animation: rise .35s cubic-bezier(.2, .8, .2, 1) both;
}
.page--fortune .wz-per {
  font-style: italic;
  font-size: 14px;
  color: var(--f-muted);
  margin: 0 0 6px;
}
.page--fortune .wz-q {
  font-family: var(--display-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 16px;
  color: var(--f-ink);
}
/* 스텝이 바뀔 때마다 fortune-steps.js 가 이 제목에 초점을 준다 — 화면 전환을 스크린리더에 알리는
   초점이지 사람이 Tab 으로 닿는 자리가 아니다(tabindex="-1"). 그래서 링이 필요 없는데, 스크립트가
   옮긴 초점도 모달리티가 키보드면 :focus-visible 이 붙고(엔진 공통), WebKit 은 손가락으로 눌러도
   붙어서 UA 파란 사각형이 남는다. :focus 에서 통째로 지운다.
   위 전역 [tabindex="-1"]:focus 가 이미 같은 일을 하지만 이 줄을 남긴다 — 이 화면의 계약(2026-09-18)이
   전역 규칙 하나에만 매달리지 않게 하고, 아래 no-ring 과 한 쌍으로 읽히게 하려는 것이다. */
.page--fortune .wz-q:focus { outline: none; }
/* 시트를 닫으면 fortune-steps.js 가 이 CTA 로 초점을 되돌린다. 그 복귀 초점의 링을 지운다 —
   「Tab 으로 닿느냐」가 기준이 아니라, 이 화면의 복귀 링을 원치 않는다는 결정이다(2026-09-18).
   결제 시트(pay-sheet.js)의 opener 복귀는 그대로 둔다. no-ring 은 복귀에만 붙고 blur 에서
   떨어지므로, 사람이 Tab 으로 직접 짚은 금색 링은 그대로다. */
.page--fortune [data-action].no-ring:focus { outline: none; }
/* 스텝을 넘길 때마다 새 스텝의 입력칸이 떠오른다 — hidden 해제(display 복귀)로 재생 */
.page--fortune .f-form.is-steps .field { margin: 0; animation: rise-step .28s ease-out both; }
.page--fortune .f-form.is-steps .field + .field { margin-top: 16px; }
.page--fortune .f-form.is-steps legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.page--fortune .f-form.is-steps .field--time .f-hint { display: none; }
.page--fortune .f-form.is-steps .selbox select,
.page--fortune .f-form.is-steps .city-combobox__input {
  min-height: 42px;
  padding: 7px 10px;
  font-size: 14px;
}
/* 「지금 사정」 칸은 그 축소에서 뺀다. 위 규칙이 42px·14px 로 줄이는 것은 **생년월일·시각 셋이
   한 줄에 서라고** 생긴 것이고, 이 칸은 스텝에 혼자 선다. 16px 미만이면 iOS 가 탭할 때 화면을
   확대하는데 이 사이트는 maximum-scale 을 안 걸어 **확대된 채로 남는다** — 전역 .selbox select 가
   16px 인 이유가 그것이다. */
.page--fortune .f-form.is-steps .field--situation .selbox select {
  min-height: 48px;
  padding: 10px 12px;
  font-size: 16px;
}
/* 자유서술 칸(사주 재회운 헤어진 이유) — .text-input 상자를 그대로 쓰고, textarea 가 UA 에서 못 받는
   글꼴 상속과 세로 늘이기만 준다(꿈 칸 `.quick-form textarea` 와 같은 사정). */
.page--fortune .f-form textarea.text-input { font-family: inherit; line-height: 1.5; resize: vertical; }
/* 네이티브 점은 접근성 트리에 두고 그리지 않는다. opacity 는 outline 까지 지우므로 링은 라벨에 둔다. */
.page--fortune .f-form.is-steps .radio,
.page--fortune .f-form.is-steps .check { position: relative; cursor: pointer; }
.page--fortune .f-form.is-steps .radio input,
.page--fortune .f-form.is-steps .check input {
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.page--fortune .f-form.is-steps .radio:has(input:focus-visible),
.page--fortune .f-form.is-steps .check:has(input:focus-visible) {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.page--fortune .f-form.is-steps .field--radio { display: flex; flex-wrap: wrap; gap: 8px; }
.page--fortune .f-form.is-steps .field--radio .radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--f-edge);
  border-radius: 4px;
  background: rgba(16, 12, 9, .35);
  color: var(--f-muted);
  font-size: 15px;
  letter-spacing: .12em;
  transition: background .15s, color .15s, border-color .15s;
}
.page--fortune .f-form.is-steps .field--radio .radio:has(input:checked) {
  background: #f4eadb;
  border-color: #f4eadb;
  color: #0e0c0c;
  font-family: var(--display-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
}
.page--fortune .f-form.is-steps .check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  min-height: 44px;
  color: var(--f-muted);
  font-size: 15px;
}
/* 네모 + 획이다. 마름모였을 때는 「체크할 칸」으로 읽히지 않았고, 켜짐을 색면 하나로만 알렸다
   (2026-09-09 시안 A). 획은 미색 — 주홍 면 위 4.38:1 로 흙먹(3.74:1)보다 높고, 채운 면에 밝은
   획은 iOS·머티리얼·윈도우가 다 같이 쓰는 모양이다. 모른다는 지적에서 나온 변경이라 관습을 따른다. */
.page--fortune .f-form.is-steps .check::before {
  content: '';
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid var(--f-edge);
  border-radius: 3px;
}
.page--fortune .f-form.is-steps .check::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 10px;
  height: 5px;
  margin-top: -4px;
  border-left: 2px solid var(--f-ink);
  border-bottom: 2px solid var(--f-ink);
  transform: rotate(-45deg);
  opacity: 0;
}
.page--fortune .f-form.is-steps .check:has(input:checked) { color: var(--f-ink); }
.page--fortune .f-form.is-steps .check:has(input:checked)::before {
  background: var(--f-accent);
  border-color: var(--f-accent);
}
.page--fortune .f-form.is-steps .check:has(input:checked)::after { opacity: 1; }
.page--fortune .f-form.is-steps .field--radio .check { flex: 1 0 100%; margin: 0; }
@media (forced-colors: active) {
  .page--fortune .f-form.is-steps .radio input,
  .page--fortune .f-form.is-steps .check input {
    appearance: auto;
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
  }
  .page--fortune .f-form.is-steps .check::before,
  .page--fortune .f-form.is-steps .check::after { content: none; }
}
.page--fortune .f-form.is-steps .field[data-step$="name"] .text-input {
  border: 0;
  border-bottom: 1px solid rgba(244, 234, 219, .55);
  border-radius: 0;
  background: transparent;
  font-size: 22px;
  padding: 4px 2px 8px;
  min-height: 0;
}
.page--fortune .f-form.is-steps .field[data-step$="name"] .text-input::placeholder {
  color: rgba(244, 234, 219, .3);
}
/* .field/.check 의 display 가 UA 의 [hidden] 을 이긴다 — 위저드가 hidden 으로 스텝을 감춘다. */
.page--fortune [hidden] { display: none !important; }

/* 점성 출생지 콤보 — 다크 변형(계약은 그대로, 색만 재정의) */
.page--fortune .city-combobox__input,
.page--fortune .city-combobox__list {
  background: rgba(16, 12, 9, .92);
  color: #f4eadb;
  border-color: rgba(244, 234, 219, .35);
}
.page--fortune .city-combobox__opt.is-active,
.page--fortune .city-combobox__opt:hover {
  background: rgba(184, 73, 46, .28);
}
/* 스텝 화면의 먹판은 하단 고정 CTA 바에 붙어 있다 — 목록을 위로 편다. */
.page--fortune .f-form.is-steps .city-combobox__list {
  top: auto;
  bottom: 100%;
  margin: 0 0 4px;
  max-height: 200px;
}

/* ── 첫 풀이 · 전체 풀이 흙먹. .page--reading 안에서만. 값은 시안 reading-pay.html 이식. */
.page--reading {
  background: #101012;
  color: #f4eadb;
}
.page--reading .reading-col {
  --r-void: #0e0c0c;
  --r-ink: #f4eadb;
  --r-muted: #b39a82;
  /* 부가 텍스트(12신·궁 라벨·공궁 배지·화기 채움). 궁 셀 #110e0e 위 AA 5.58:1 */
  --r-muted-2: #9a8776;
  --r-line: #262020;
  --r-accent: #b8492e;
  /* 다크 위 주홍 '텍스트'용 7.35:1. --r-accent 는 3.69:1 이라 테두리·면에만 쓴다 */
  --r-accent-lit: #e08a70;
  /* 신궁 배지 8.09:1. :root 의 --gold(#a8832c)는 다크 위에서 너무 어둡다 */
  --r-gold: #c8a35a;
  --r-jade: #8fb3a4;
  --r-malefic: #d4795c;
  --r-cell: #110e0e;
  --r-cell-2: #0a0909;
  --r-pad: 18px;
  /* 사주·자미 판은 공통 토큰만 쓴다. 점성 블록(chart.css)은 흙먹 전용 값을 가지므로
     .page--reading 밖에서 렌더하지 않는다. */
  --ink: var(--r-ink);
  --ink-soft: var(--r-muted);
  --line: var(--r-line);
  --accent: var(--r-accent);
  --accent-soft: rgba(184, 73, 46, .22);
  /* clip 이어야 한다 — hidden 이면 스크롤 컨테이너가 되어 안쪽 .chnav 의 position:sticky 가 죽는다. */
  overflow: clip;
  color: var(--r-ink);
  background: var(--r-void);
}
.page--reading .skip { z-index: 8; }
/* .doc 은 뺀다 — main 이 쌓임 맥락이 되면 결제 시트(.sheet-wrap, 9)가 푸터(2)·그레인(6) 밑에 갇힌다. */
.page--reading .site-header,
.page--reading .site-footer { position: relative; z-index: 2; }
.page--reading .site-header {
  display: flex;
  align-items: center;
  padding: 16px var(--r-pad) 12px;
  background: #0b0b0c;
  border-bottom: 1px solid var(--r-line);
}
.page--reading .site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--r-ink);
  font-size: inherit;
  font-weight: inherit;
}
/* 꺾새 + 중앙 로고 헤더의 공통 틀(상세·결과) — 3열 그리드, 꺾새 44×44, 로고 34px 중앙.
   위치는 페이지별 규칙이 맡는다: 상세만 사진 위에 얹히고(sticky), 결과 화면 둘은 상단 밴드 사진을
   뺀 뒤로(2026-09-11) 얹지 않는다 — 검정 바(.page--reading .site-header) 자리 그대로다. */
.page--fortune .site-header--over,
.page--reading .site-header--over {
  height: 52px;
  padding: 0 6px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}
.site-header--over .site-back {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}
.site-header--over .site-logo { display: block; justify-self: center; }
.site-header--over .site-brand { height: 34px; }
.page--reading .doc { max-width: none; margin: 0; padding: 0; }
.page--reading .site-footer {
  padding: 28px var(--r-pad) 32px;
  margin-top: 26px;
  border-top: 1px solid var(--r-line);
  color: var(--r-muted);
  font-size: 11px;
  line-height: 1.7;
}

/* 페이지 머리 */
/* 머리 한 행 — 얼굴 + (키커·제목)(board-first §2-1). 얼굴이 왼쪽 고정 폭이라 flex 하나면 된다. */
.page--reading .p-who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px var(--r-pad) 0;
}
/* mug 는 기준 컷에서 얼굴만 잘라 둔 정사각(300×300)이다 — 원에 그대로 담기므로
   확대·이동이 없다. 사진을 갈아도 이 규칙은 그대로다(스펙 2026-09-06 §4-4). */
.page--reading .p-mug {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--r-line);
}
.page--reading .p-mug img { width: 100%; height: 100%; object-fit: cover; }
.page--reading .kicker {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--r-accent);
  margin: 0 0 6px;
}
/* 얼굴이 왼쪽 64px 을 먹으므로 24px 이면 두 줄로 접힌다 — 22px 이 한 행에 드는 크기다. */
.page--reading .p-title {
  font-family: var(--display-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.page--reading .notice {
  margin: 14px var(--r-pad) 0;
  padding: 12px 14px;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  background: rgba(184, 73, 46, .14);
  font-size: 13px;
}
/* 판 밖 고지가 여기로 올라온다(자미 입력 되읽기, 점성 계산 제외 항목·하우스 폴백. 접힘 시절의 자리이고 판이 펼쳐진 지금도 표보다 먼저다).
   여럿일 수 있으므로 서로 붙지 않게 요소 간격 하나를 준다. */
.page--reading .notice + .notice { margin-top: 9px; }

/* 넣으신 값 되읽기 — 제목 바로 아래 **한 줄 배지**다(board-first §2-1). 라벨(dt)은 sr-only 라
   화면엔 값만 선다: 「양력 1990년 5월 15일 · 10시 30분 · 남성 · 말띠」. 3~4행 상자였을 때는
   판이 접혀 있던 시절의 유일한 되읽기라 세로로 폈지만, 판이 늘 펼쳐지는 지금은 한 줄로 족하다.
   `dl` 자체가 배지다 — 감싸개를 한 겹 더 두면 flex 를 얹을 곳이 두 군데가 된다. */
.page--reading .p-line {
  display: flex;
  flex-wrap: wrap;
  margin: 12px var(--r-pad) 0;
  padding: 8px 12px;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  background: rgba(244, 234, 219, .035);
  font-size: 12.5px;
}
.page--reading .p-line dd { margin: 0; }
/* 구분자는 CSS 가 찍는다 — 마크업에 두면 접근 가능 이름에 「·」가 섞여 읽힌다.
   `dd + dd` 가 아니다: dd 사이마다 sr-only dt 가 끼어 있어 인접 형제 선택자는 한 번도 안 맞는다. ::before 가 아니라
   ::after 인 이유: 줄이 접힐 때(점성 출생지가 길다) 점이 새 줄 머리가 아니라 앞줄 끝에 남는다
   (실측 2026-09-11 — 「양력 1988년 2월 3일0시 0분남성토끼띠」로 붙어 나왔다). */
.page--reading .p-line dd:not(:last-of-type)::after {
  content: '·';
  margin: 0 6px;
  color: var(--r-muted-2);
}
/* 궁합에서만 뜨는 사람 표시. 줄 둘을 가르는 것이 일이라 줄에 붙여 두고, 두 번째 것만 사이를 띄운다. */
.page--reading .p-facts-who {
  margin: 14px var(--r-pad) -8px;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--r-accent-lit);
}
.page--reading .p-line + .p-facts-who { margin-top: 16px; }

/* 기준 시점 한 줄 — 제목과 판 사이(스펙 2026-09-14 §6-1). 되읽기 배지(.p-line)와 달리 테두리가
   없다: 이것은 손님이 넣은 값이 아니라 시스템이 계산한 시점이라 같은 옷을 입으면 안 된다.
   **인쇄에 남는다** — 이 규칙이 쥔 --r-muted-2 를 파일 끝 인쇄 블록이 종이값으로 내린다. */
.page--reading .p-basis {
  margin: 10px var(--r-pad) 0;
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--r-muted-2);
}

/* 계산 판 — chart.css 파셜을 그대로 쓰고 하드코딩된 밝은 면만 덮는다.
   position·z-index 는 아래 「생성 중」 블록의 먹 번짐(.wait-blot)을 판 글자 뒤로 보내려는 것이다 —
   배경이 투명해 빛은 그대로 비치고 글자만 앞에 선다(스펙 2026-09-01-wait-copy §2-4).
   .board 안에만 쌓임 맥락이 생긴다 — 결제 시트(.sheet-wrap, 9)는 .board 바깥 형제라
   이 파일 위쪽 주석이 경고한 「main 을 쌓임 맥락으로 만들어 시트를 가두는」 사고와는 다른 경우다.
   그레인(.reading-grain, 6)도 여전히 판 위에 얹힌다.

   패딩은 간격 세 단계 — 섹션 34 / 블록 20 / 요소 9(2026-09-01 위계 개편). 값이 제각각이면
   「같은 간격 = 같은 층위」 신호가 없어 무엇이 결론이고 무엇이 근거인지 화면이 말해 주지 않는다.
   세 도메인·두 화면 공용이다. */
.page--reading .board { padding: 34px var(--r-pad) 0; position: relative; z-index: 1; }
/* 절 제목 공용 — 판머리뿐 아니라 전체 풀이의 문답(`.ask`)·후기(`.rv`) h2 도 이 클래스를 쓴다.
   판 밖 사용처가 있으므로 이 규칙은 남는다. 판머리는 아래에서 **얹는다**(바꿔치기가 아니다). */
.page--reading .board-title {
  font-family: var(--display-serif);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
}
/* 판머리는 2026-09-11~2026-09-18 동안 펼친 접기의 옷(들여쓰기 19px + 주홍 빼기 표)을 **흉내만**
   냈다 — 눌러도 아무 일이 없는 표식이었다. 이제 판이 진짜 `.fold` 라 그 흉내 규칙(선언 복사 한 벌과
   ::before 한 획)은 지웠다. 판머리 모양은 아래 `.fold > summary` 한 문법이 낸다. */
.page--reading .saju-table th[scope="row"],
.page--reading .run-table th[scope="row"],
.page--reading .astro-table th[scope="row"] { background: transparent; }
/* 사주 .is-day / .is-unknown 배경을 여기서 덮던 두 줄은 지웠다 — 종이 토큰 시절 규칙이라
   chart.css 의 `.page--reading .saju-board .saju-table .is-day { background: none }`(0,4,0)에
   무조건 밀려 다시는 먹지 않는다. 자미 셀(.palace / .ziwei-center / .sahwa--ji)도 같은 이유로 지웠다 —
   chart.css 자미 블록이 --r-cell·--r-cell-2 로 직접 다크 값을 갖는다. */

/* 판 읽는 법 — 판 아래 접힌 용어 설명 */
.page--reading .board-help {
  margin: 20px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--r-line);
  font-size: 13px;
}
/* summary 는 십자 토글 — 닫힘 ＋, 펼침 －. 모바일이 주라 hover 에 기대지 않고 닫힌 채로
   「더 있음」이 보여야 한다. 1px 실선 두 획을 의사 요소 「테두리」로 긋는다 — 그라디언트면
   forced-colors 에서 지워진다. 세로 획은 가로 획을 90° 돌린 것 — 9×1 을 중심 회전하면 축 정렬 그대로라
   픽셀에 앉는다. 단 summary 높이가 정수라야 top:50% 가 정수다: 상속 line-height 1.7 이면 13px 글자가
   22.1px 줄이 되어(높이 38.1, 50% = 19.05) 가로 획이 두 픽셀 행에 반씩 걸쳐 흐리다. 그래서 line-height 를
   px 로 못박는다(22 → 높이 38 → 획 y 19, 세로 획 15..24).
   펼친 －는 답머리 획(.ask-a::before)과 같은 그림. 포커스 링은 57행 전역 --gold 가 흙먹 판에서
   탁해 --r-gold 로 세운다(.ask-q 와 같은 이유). 시안 비교(마름모·눈금·밑줄·칩 등)는 2026-08-30 —
   눈금(○)은 판 안의 표식과 겹쳐 탈락, 밑줄은 나가는 링크로 읽혀 탈락.
   .chart-alt > summary(chart.css)도 같은 옷 — 파일이 갈리는 건 로딩 조건(needsChartCss) 때문이니 같이 고친다. */
.page--reading .board-help > summary {
  position: relative;
  list-style: none;
  padding: 8px 0 8px 19px;
  line-height: 22px;
  cursor: pointer;
  color: var(--r-muted);
}
.page--reading .board-help > summary::-webkit-details-marker { display: none; }
.page--reading .board-help > summary::before,
.page--reading .board-help > summary::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  border-top: 1px solid var(--r-accent-lit);
}
.page--reading .board-help > summary::after { transform: rotate(90deg); }
.page--reading .board-help[open] > summary { color: var(--r-ink); }
.page--reading .board-help[open] > summary::after { display: none; }
.page--reading .board-help > summary:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 2px; }
.page--reading .board-help dl { margin: 12px 0 0; }
.page--reading .board-help dt {
  color: var(--r-ink);
  font-weight: 700;
  margin: 12px 0 3px;
}
.page--reading .board-help dt:first-child { margin-top: 0; }
.page--reading .board-help dd {
  color: var(--r-muted);
  margin: 0;
  line-height: 1.75;
}

/* ── 접기 — 닫힌 채로 눌러 보여야 하는 한 줄
   (reading-pay §2-10 개정 2026-09-01, 시안 2026-09-01-first-hierarchy.html).
   쓰는 곳 둘: 차례(기본 접힘)와 판(기본 펼침, 2026-09-18 복귀). 기본값만 다르고 옷은 한 벌이다 —
   2026-09-11~09-18 사이 판머리가 이 옷을 **복사해 흉내만** 내던 시절엔 눌러도 아무 일이 없었다.

   십자 문법은 위 `.board-help` 와 같은 그림이지만 **선언을 복사한다**. 콤마로 합치지 않는 이유 둘:
   ① chart.css 인쇄의 `.chart-alt, .board-help { display: none }` 은 무스코프라, 클래스를 물려받으면
      접기가 종이에서 통째로 사라진다 — 그 규칙이 지우려는 것은 용어 설명이다.
   ② `.board-help` 의 `font-size: 13px` 이 상속 기준이 된다.
   닫힌 줄에만 면과 테두리를 준다 — 「더 있음」이 hover 없이 엄지에 보여야 한다(모바일이 주). */
.page--reading .fold { margin: 0; }
.page--reading .fold > summary {
  position: relative;
  list-style: none;
  /* 세로 패딩 합 26 + 줄 높이 22 = 48 → top:50% 가 정수 24. `.board-help` 와 같은 이유로 px 로 못박는다. */
  padding: 13px 14px 13px 33px;
  line-height: 22px;
  cursor: pointer;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  background: rgba(244, 234, 219, .035);
}
.page--reading .fold > summary::-webkit-details-marker { display: none; }
/* top 은 **첫 줄 중심**에 px 로 못박는다 — 50% 로 두면 부제가 두 줄로 넘칠 때(점성 출생지가
   「제주특별자치도 서귀포시 · …」처럼 길다) 십자가 상자 한가운데로 13px 내려앉아 제목에서 떨어진다.
   닫힘은 위 패딩 13 + 줄 높이 22 의 절반 = 24, 펼침은 패딩이 0 이라 11 이다. */
.page--reading .fold > summary::before,
.page--reading .fold > summary::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 24px;
  width: 9px;
  border-top: 1px solid var(--r-accent-lit);
}
.page--reading .fold > summary::after { transform: rotate(90deg); }
.page--reading .fold[open] > summary::after { display: none; }
/* 면과 테두리는 **닫힌 줄에만** 있다. 펼치면 상자를 벗어 판의 제목이 된다 —
   그대로 두면 여는 줄만 상자이고 판 내용이 그 밖으로 흘러 「열린 상자」로 안 읽힌다.
   벗은 뒤 왼쪽 여백은 `.board-help` 와 같은 19px 라 십자 두 문법이 같은 자리에 선다. */
.page--reading .fold[open] > summary {
  padding: 0 0 0 19px;
  border: 0;
  background: none;
  margin-bottom: 14px;
}
.page--reading .fold[open] > summary::before { left: 0; top: 11px; }
.page--reading .fold > summary:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 2px; }
/* 제목은 여는 줄 안에 산다 — 밖에 두면 같은 말이 두 번(랜드마크 이름 + 버튼 이름) 읽힌다.
   차례는 span(`.toc-k`), 판은 h2(`.board-title`)다. 둘을 콤마로 **합친다** — 위 `.board-help` 와
   달리 여기는 같은 부모(`.fold > summary`) 안 같은 층이라, 갈라 두면 판머리만 다른 값으로
   흐르는 길이 하나 더 생긴다. 공용 `.board-title`(17px·margin 0 0 10px)을 여기서 덮는다. */
.page--reading .fold > summary .toc-k,
.page--reading .fold > summary .board-title {
  display: inline;
  margin: 0;
  font-family: var(--display-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--r-ink);
}
/* 부제는 판에 무엇이 몇 개 있는지 세어 준다(차례엔 .cnt 가 없다). 본문 산세리프를 **문자 그대로**
   복사한다 — 뒤 세 항목을 자르면 Pretendard 가 없는 기기에서 중국어 자형으로 떨어진다(chart.css 와 같은 이유). */
.page--reading .board .cnt {
  /* 마크업에 공백 한 칸이 있으므로(접근 가능 이름용) 여백은 그만큼 뺀다. */
  margin-left: 3px;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--r-muted-2);
}

/* 장(챕터) — 좌측 장머리 + 명조 본문 */
.page--reading .chapter {
  margin: 0;
  padding: 26px var(--r-pad) 0;
  border-bottom: 0;
}
.page--reading .ch-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.page--reading .ch-no { color: var(--r-muted); font-size: 13px; }
.page--reading .ch-title {
  font-family: var(--display-serif);
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}
.page--reading .ch-body {
  font-family: var(--display-serif);
  font-size: 15.5px;
  line-height: 1.95;
}
.page--reading .ch-body p { margin: 0 0 16px; }
.page--reading .ch-note { color: var(--r-muted); font-size: 14px; font-style: italic; }
.page--reading .ch-retry { padding: 8px 0 0; }

/* 방금 도착한 장은 문단이 하나씩 떠오른다 — 시안 D(docs/superpowers/mockups/2026-09-07-typing-compare.html).
   클래스와 지연은 views/_reveal.ejs 인라인이 붙인다. 서버는 평범한 <p> 를 그대로 내므로
   JS 가 없거나 늦으면 본문이 처음부터 다 보인다 — 그것이 기본값이다.
   시안의 transition 이 아니라 **animation** 인 것이 핵심이다: 위 전역 reduce 규칙이 animation 을
   !important 로 끄면 문단이 곧바로 초기값(= 보임)이 된다. 감춤이 keyframe 안에만 살아서
   「animation 을 걷은 자세 = 완성 자세」가 되고, reduce·인쇄·건너뛰기 셋이 각각 한 줄로 닫힌다.
   그래서 이 규칙에 opacity·display 를 절대 쓰지 않는다(tests/web/chapterReveal.test.ts 가 문다) —
   쓰면 reduce 와 종이에서 본문이 영영 안 뜬다. `both` 가 지연 동안 from 자세를 붙든다. */
@keyframes tw-para { from { opacity: 0; transform: translateY(9px); } }
.page--reading .tw-para { animation: tw-para .62s cubic-bezier(.2, .7, .3, 1) both; }
/* 건너뛰기(WCAG 2.2.2) — animation 을 걷은 자세가 곧 완성 자세다. */
.page--reading .tw-skip .tw-para { animation: none; }

/* 풀이 중 장 — 다음에 도착할 장 하나만 문구와 방울을 진다(스펙 2026-09-01-wait-copy §11-1).
   쌓임 맥락은 **article** 에 둔다: .ch-body 에 두면 앞 형제인 장머리(제N장·제목) 글자 위로
   방울이 뜬다(§11-1-4). 자르지 않는다 — 이 맥락이 앞 장 본문 위에 그려지지만, 보이는 원은 그라디언트
   70% 지점(반지름 63px × 배율)이라 최대 배율 1.5 에 blur 10 을 더해도 105px — 방울 중심에서 위 장 마지막
   줄까지 118px 에 못 미친다. */
.page--reading .chapter.is-wait { position: relative; z-index: 0; }
/* 한글 이탤릭은 합성 기울임이다 — .ch-note 의 italic 은 실패 문구 몫으로 두고 여기서만 되돌린다.
   position 은 방울의 기준점이다: ::before 의 기준 상자가 article 이 아니라 **문구 상자**여야
   §11-1-3 의 left 48px / top 50% 가 문구 줄 옆에 온다. */
.page--reading .ch-wait { font-style: normal; position: relative; }
/* /first 방울(320px)을 줄인 하나. @keyframes wait-blot 은 그대로 쓴다 — 주기가 갈리면 두 화면이
   다른 물건이 된다. 120px 는 실측에서 기호로 안 읽혀 180px 로 올렸다(§11-1-3). */
.page--reading .ch-wait::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 48px;
  top: 50%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 73, 46, .42) 0%, rgba(184, 73, 46, .13) 45%, transparent 70%);
  filter: blur(10px);
  opacity: 0;
  transform: scale(.1);
  animation: wait-blot 5.4s ease-in-out infinite;
  /* 폴링 리로드마다 방울이 0 에서 다시 자란다 — 장을 집는(pending → generating) 리로드에선 화면이 그대로인데
     방울만 꺼졌다 켜진다. 주기의 20%(가장 진한 순간)에서 시작해 리로드가 방울을 끊지 않게 한다(§11-1-3). */
  animation-delay: -1.08s;
}
/* 잘림 표현은 **페이드 + 그 아래 자물쇠 줄**이다(스펙 §2-6 개정 2026-09-20 — 옛 값은 「표시선·안내
   문구 없음」이었고, 이 주석도 그 문장이었다). 여기는 페이드 몫이고 획·문구는 아래
   `.cut-rule`/`.cut-note` 가 진다. 이 줄을 옛 문장으로 읽고 그 둘을 「조항 위반」으로 걷어내지 말 것. */
.page--reading .fade-tail p {
  margin: 0;
  /* 상단 35%는 온전히 읽힌다 — 절단본이 문단 하나뿐이어도 본문 전체가 흐려지지 않는다. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 92%);
}

/* 절단부 자물쇠 — 페이드가 끝난 자리를 좌우 먹선이 닫는다(스펙 §2-6 개정 2026-09-20).
   새 색이 없다: 선은 목록 구분선과 같은 --r-line, 자물쇠는 --r-accent-lit 다.
   --r-accent 는 3.69:1 이라 글자·기호에 못 쓴다(토큰 주석·첫인상 카드 잠금 판과 같은 규칙).
   마크업이 `.ch-body` 밖이라 본문 여백을 물려받지 않는다 — 위 간격은 이 14px 이 **전부**다.
   자물쇠는 잘린 장에서만 나오고, 그때 마지막 문단은 언제나 `.fade-tail` 안이라 아래 여백이 0 이다
   (`.page--reading .fade-tail p { margin: 0 }` 가 `.ch-body p` 의 16px 과 같은 특정도로 뒤에 와서
   이긴다). 「본문 문단 16px 이 더 붙는다」로 읽고 이 값을 줄이면 간격이 소리 없이 절반이 된다. */
.page--reading .cut-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  color: var(--r-accent-lit);
}
/* 획은 **면이 아니라 테두리**로 긋는다 — 배경은 종이에서 사라진다(브라우저 「배경 그래픽」 기본 꺼짐,
   chart.css 의 `.wx-val { fill: none }` 이 같은 이유로 면을 끈 자리다). 배경으로 그으면 인쇄에서
   자물쇠만 덩그러니 남고 이 안의 요점인 「본문의 끝을 닫는 획」이 통째로 없어진다.
   화면 그림은 같다 — `.next > ol > li` 도 구분선을 border 로 긋는다. */
.page--reading .cut-rule::before,
.page--reading .cut-rule::after { content: ""; flex: 1 1 auto; height: 0; border-top: 1px solid var(--r-line); }
.page--reading .cut-rule svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* 본문 상자 밖이라 명조를 물려받지 못한다 — 여기서 다시 준다. 크기·색은 「이어지는 이야기」
   부제(.next-sub)와 같은 급이다: 본문이 아니라 화면이 손님에게 거는 말이라는 표시다. */
/* 아래 14px 은 여기서 준다 — 「이어지는 이야기」 쪽(`.page--reading .next`)의 padding-top 30px 은
   후기 섹션(`.rv-sec`)과 한 규칙을 나눠 쓰므로 그걸 늘리면 남의 화면 간격까지 따라 바뀐다.
   장 상자(.chapter)는 padding-bottom 이 0 이라 이 마진이 상자 밖으로 합쳐져 그대로 간격이 된다. */
.page--reading .cut-note {
  margin: 8px 0 14px;
  text-align: center;
  font-family: var(--display-serif);
  font-size: 13px;
  color: var(--r-muted);
}

/* 생성 중 — 장머리 아래 문구 한 덩이(board-first §2-4). 얼굴이 머리로 간 뒤 문구만 남아
   가운데 선다 — 왼쪽에 붙이면 빈 왼편이 사라진 얼굴 자리처럼 읽힌다.
   overflow 를 두지 않는다: 320px 방울이 156px 블록에서 잘리면 「이 구간만 빛난다」로 읽힌다(§2-4). */
.page--reading .wait {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 좌우 0 — 바깥 .chapter 가 이미 var(--r-pad) 를 준다. 겹치면 문구 폭이 장머리보다 36px 좁다. */
  padding: 8px 0 30px;
  text-align: center;
}
/* 번짐이 판 글자 위로 올라오지 않게 .board 를 올려 두었다 — 선언은 위쪽 「계산 판」 블록에 있다. */
.page--reading .wait-say { position: relative; z-index: 1; }
.page--reading .wait-ink { font-family: var(--display-serif); font-size: 16.5px; margin: 0 0 6px; }
.page--reading .wait-sub { font-size: 13px; color: var(--r-muted); margin: 0; }
/* 소요 시간 각주 — 부제보다 한 치수 작고 옅게, 맨 밑에 붙는다(2026-09-29 시안 사). */
.page--reading .wait-eta { font-size: 12px; color: var(--r-muted-2); margin: 10px 0 0; }
.page--reading .wait-blot {
  position: absolute;
  /* -1 이다 — article.chapter.is-wait 가 쌓임 맥락(z-index 0)이라 0 이면 비배치 장머리(제1장·제목) 글자
     위로 뜬다. 전체 풀이의 .ch-wait::before 와 같은 처방(§11-1-4). 판(.board, z-index 1)보다 뒤인 것은 그대로다. */
  z-index: -1;
  pointer-events: none;
  left: 30%;
  top: 58%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 73, 46, .42) 0%, rgba(184, 73, 46, .13) 45%, transparent 70%);
  filter: blur(14px);
  opacity: 0;
  transform: scale(.1);
  animation: wait-blot 5.4s ease-in-out infinite;
}
/* 둘째 방울은 주기의 반을 앞당겨 같은 그림이 두 번 나오지 않게 한다. */
.page--reading .wait-blot--2 { left: 74%; top: 38%; animation-delay: -2.7s; }
@keyframes wait-blot {
  0% { transform: scale(.08); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* 번지는 중인 얼룩은 얼어붙으면 「아무 일 없음」이 된다 — 정지 자세를 따로 못박는다(스펙 §2-6).
   149행 전역 규칙이 animation 을 !important 로 끄므로, 여기서는 opacity·transform 만 준다.
   이 블록은 그 규칙보다 뒤에 있어야 이긴다. */
@media (prefers-reduced-motion: reduce) {
  .page--reading .wait-blot { opacity: 1; transform: scale(.72); }
  .page--reading .wait-blot--2 { display: none; }
  .page--reading .ch-wait::before { opacity: 1; transform: scale(.72); }
}

/* 이어지는 이야기(장 목록) · CTA. 맨 밑 후기 섹션(.rv-sec)이 틀을 같이 쓴다 — 같은 화면·같은 토큰이라
   선언을 복사하지 않고 묶는다(스코프가 갈리는 `.page--fortune .f-rv*` 복사와는 사정이 다르다). */
.page--reading .next,
.page--reading .rv-sec { padding: 30px var(--r-pad) 0; }
.page--reading .next-title,
.page--reading .rv-title,
/* 첫인상 카드의 밖 표제(chart.css `.blk-lead`, 시안 2026-09-19 B)도 같은 화면·같은 급이라
   선언을 복사하지 않고 여기 묶는다 — 후기 섹션(.rv-title)을 묶어 둔 것과 같은 이유다. */
.page--reading .blk-lead-t {
  font-family: var(--display-serif);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 4px;
}
.page--reading .next-sub { font-size: 13px; color: var(--r-muted); margin: 0 0 10px; }
.page--reading .next ol { list-style: none; margin: 0; padding: 0; }
.page--reading .next > ol > li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--r-line);
  font-size: 15px;
}
/* 「제N장」·장 제목은 명조다 — 상세 차례(`.page--fortune .f-toc`)와 **같은 그림**이라는 계약을 지킨다.
   상세만 명조로 올리면 같은 손님이 5분 간격으로 같은 목록을 다른 물건으로 본다(적대 리뷰 지적 4). */
.page--reading .next .no { color: var(--r-accent-lit); font-family: var(--display-serif); font-size: 12.5px; letter-spacing: .04em; flex: 0 0 auto; }
.page--reading .next .t { font-family: var(--display-serif); font-size: 16px; }
.page--reading .next .rest { margin-left: auto; font-size: 12px; color: var(--r-accent); flex: 0 0 auto; }
/* 장 소제목(스펙 2026-09-09, 시안 C). 항목마다 한 줄, 앞에 작은 점.
   그 점이 접근성 구제 다리라 role="list" 를 안 단다(a11y.test.ts known 맵의 `.chart-notes ul` 과 같은 이유).
   색은 이 컬럼의 부가 텍스트 토큰을 그대로 쓴다 — 새 색을 만들지 않는다. */
.page--reading .next .sub { list-style: none; margin: 6px 0 0; padding: 0; }
.page--reading .next .sub li,
.page--reading .next-ask .when {
  /* 상세 차례와 같은 이유로 본문 산세 스택을 다시 적는다 — 위 .t 가 명조라 그냥 두면 물려받는다.
     문답 행의 `.when` 도 `.t` 안에 있어 같은 처지다(#86 이 이 규칙을 함께 쓰기로 한 이유 그대로). */
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  position: relative;
  padding-left: 11px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--r-muted-2);
  /* 화면 전체가 word-break: keep-all 이라 공백 없는 긴 항목은 접히지 않고 옆으로 넘친다.
     한도(30자)는 저장에서 막지만, 그 한도 안에서도 12.5px × 30자면 폭을 넘는다. */
  overflow-wrap: anywhere;
}
.page--reading .next .sub li::before,
.page--reading .next-ask .when::before { content: '·'; position: absolute; left: 1px; }
/* 문답 행(2026-09-12, 시안 B′). 장이 아니라 장 **다음**에 오는 것이라 ol 밖에 서고, 그림만 목록의 두 칸을
   빌린다 — 왼쪽 잔글씨(.no)와 오른쪽 배지 자리. 아래 선을 안 다는 것이 「목록 밖」이라는 표시다.
   배지 색이 `.rest`(「나머지」)와 다른 것은 실수가 아니다: .rest 가 쓰는 --r-accent 는 이 바탕에서
   3.69:1 이라 12px 글자로 AA 미달이고, 같은 파일 --r-accent 주석도 「테두리·면에만」이라 못박아 뒀다.
   새 줄에 그 빚을 옮기지 않는다. */
.page--reading .next-ask {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 11px 0;
  font-size: 15px;
}
/* 횟수 배지(2026-09-22, 시안 나). 테를 두르고 금빛으로 세운다 — 「추가 질문권」이 사기 전에 보이는
   **딸려 오는 물건**이라 그 수량이 목록의 잔글씨와 같은 급이면 안 된다.
   색이 --r-accent-lit(같은 줄의 「혜택」)이 아니라 --r-gold 인 것은 위 `.rest` 주석과 같은 사정이다:
   한 줄에 주홍이 둘이면 어느 쪽이 값인지 안 갈린다. --r-gold 는 판이 이미 쓰는 배지색(다크 8.09:1)이라
   새 색을 만들지 않는다.
   🚨 테는 **테두리**로 긋는다. 면(background)으로 그으면 인쇄에서 배경 그래픽이 꺼져 통째로 사라진다
   — `.cut-rule` 이 같은 이유로 border 를 쓴다. 종이값은 아래 인쇄 블록이 --r-gold 로 내린다. */
.page--reading .next-ask .cnt {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 2px 7px 3px;
  border: 1px solid color-mix(in srgb, var(--r-gold) 42%, transparent);
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--r-gold);
}
/* 여는 조건 한 줄. 크기·색·점 표식은 장 소제목 규칙에 **합류해서** 받는다(위 선택자 목록) —
   선언을 베껴 두면 소제목을 고치는 날 이 줄만 옛 값으로 남아 「목록의 결이 안 깨진다」가 거짓이 된다.
   여기 남는 둘은 소제목과 실제로 다른 것뿐이다: span 이라 줄을 띄워야 하고(display), 위 간격을
   `.sub`(ul)가 아니라 스스로 진다(margin). */
.page--reading .next-ask .when { display: block; margin: 6px 0 0; }
.page--reading .cta-wrap { padding: 26px var(--r-pad) 0; }
.page--reading .cta {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: 4px;
  background: var(--r-accent);
  color: #fff4ea;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  font-family: inherit;
}
.page--reading .cta--ghost {
  background: transparent;
  color: var(--r-ink);
  border: 1px solid var(--r-accent);
  font-size: 15px;
}
.page--reading .pay-note { color: var(--r-muted); font-size: 13px; margin: 0; }

/* 하단 등장 바 — 제1장을 읽어 내려가면 떠오르고, 문서 안 진짜 CTA 에 이르면 도로 숨는다
   (시안 2026-09-20 B). 켜는 것은 pay-sheet.js 의 `.is-on` 한 클래스뿐이다.

   z-index 8 은 상세 화면의 하단 바(.page--fortune .cta-bar)와 같은 층이다 — 그레인(6) 위,
   결제 시트(9) 아래. 시트를 열면 바가 스크림 밑으로 들어가야 하므로 이 순서가 뒤집히면 안 된다.
   .doc 이 쌓임 맥락을 안 만드는 덕에 이 fixed 가 푸터(2) 위로 선다(.sheet-wrap 과 같은 사정).

   **fixed 인 것은 자리를 안 만들기 위해서다.** 문서 어디에 두든 sticky 는 숨은 동안에도 제 높이만큼
   흐름을 먹는다 — 문서 끝에 두면 후기 밑에 빈 칸이 남고, 목차 앞에 두면 목차와 첫인상 카드 사이가
   벌어진다. 반대로 fixed 의 고질병(문서 밑바닥을 영영 가림)은 여기서 안 생긴다: 진짜 CTA 가
   가려지지 않는 자리에 오면 바가 비킨다(「영영 숨는다」가 아니다 — 위로 되감으면 돌아온다).

   🚨 폭은 **진짜 버튼과 같아야 한다**. 흐름 밖이라 컬럼을 상속받지 못하므로 컬럼의 max-width 를
   여기서 다시 적는다(.doc 은 리딩에서 패딩도 max-width 도 없다 — 좌우 여백은 .cta-wrap 의
   --r-pad 혼자 낸다). 컬럼 폭을 고치는 날 이 줄도 같이 고쳐야 한다 — 둘이 한 화면에 같이 보이는
   순간이 없어서 어긋나도 눈으로는 못 잡는다. first.test.ts 가 두 값을 맞대어 본다. */
.page--reading .paybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  margin: 0 auto;
  max-width: 400px; /* = .reading-col */
  padding: 26px var(--r-pad) 16px;
  /* 선을 긋지 않고 글이 아래에서 녹는다 — .page--fortune .cta-bar 와 같은 관용구다.
     바탕은 컬럼 색(--r-void)이라 body(#101012)가 아니라 이 판 위에서 이어져 보인다. */
  background: linear-gradient(to top, var(--r-void) 62%, rgba(14, 12, 12, 0));
  opacity: 0;
  /* visibility 도 같이 끈다 — opacity 0 만으로는 안 보이는 버튼이 낭독 트리와 탭 순서에 남아,
     화면 안 진짜 CTA 와 같은 이름이 두 번 읽힌다. */
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease-out, transform .2s ease-out, visibility .2s;
}
.page--reading .paybar.is-on { opacity: 1; visibility: visible; transform: none; }

/* 맛보기 맨 밑 대표 후기. 카드(.f-rv*)는 `.page--fortune .f-rv*` 와 같은 그림이지만 스코프가 달라
   선언을 복사한다 — 색 토큰이 --f-* / --r- 로 갈려 한 선언이 양쪽을 못 덮는다. 별은 --r-gold(#c8a35a, 8.2:1).
   섹션 틀(.rv-sec·.rv-title)은 복사가 아니라 위 차례(.next)에 **묶었다** — 같은 스코프·같은 토큰이라
   복사할 이유가 없다(컬럼 껍데기를 한 자리로 뺀 것과 같은 이유). */
.page--reading .f-rv { list-style: none; margin: 0; padding: 0; }
.page--reading .f-rv-i { padding: 14px 0; border-bottom: 1px solid var(--r-line); }
/* 마지막 줄의 밑줄은 뺀다 — 상세는 뒤에 FAQ 가 와서 구분선이 되지만 여기는 문서의 맨 밑이라
   26px 아래 푸터 윗선과 나란히 헤어라인 둘이 남는다. */
.page--reading .f-rv-i:last-child { border-bottom: 0; }
.page--reading .f-rv-s { font-size: 13px; letter-spacing: .1em; color: var(--r-gold); }
.page--reading .f-rv-b { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--r-ink); }
.page--reading .f-rv-g { margin: 6px 0 0; font-size: 12px; color: var(--r-muted); }

/* 결제 시트 — 스크림 + 하단 시트. JS 가 [hidden] 만 토글한다.
   no-JS 는 first.ejs 의 <noscript> 스타일이 같은 마크업을 인라인 카드로 펼친다. */
.page--reading .sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* display 를 준 요소는 [hidden] 의 UA 규칙을 이겨 버린다 — 닫힘 상태를 여기서 다시 못박는다. */
.page--reading .sheet-wrap[hidden] { display: none; }
.page--reading .sheet-veil { position: absolute; inset: 0; background: rgba(6, 4, 3, .6); }
.page--reading .sheet {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 18px var(--r-pad) 26px;
  border-top: 1px solid rgba(244, 234, 219, .22);
  border-radius: 10px 10px 0 0;
  background: rgba(14, 12, 12, .96);
  backdrop-filter: blur(6px);
  max-height: 100%;
  overflow-y: auto;
}
.page--reading .sheet-head { display: flex; align-items: center; margin: 0 0 14px; }
.page--reading .sheet-title {
  font-family: var(--display-serif);
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.page--reading .sheet-close {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--r-muted);
  font-size: 16px;
  cursor: pointer;
}
.page--reading .sheet-sum {
  display: flex;
  align-items: baseline;
  padding: 12px 14px;
  margin: 0 0 14px;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  background: rgba(16, 12, 9, .5);
}
.page--reading .sheet-sum .k { font-size: 13px; color: var(--r-muted); }
.page--reading .sheet-sum .v {
  margin-left: auto;
  font-family: var(--display-serif);
  font-size: 20px;
  font-weight: 700;
}
.page--reading .sheet-sum .v small { font-size: 13px; font-weight: 400; color: var(--r-muted); margin-left: 2px; }
/* 시트 안의 같은 문자열. 품목 줄 아래에 붙는다 — 별도 행으로 빼면 시트 높이가 한 줄 늘어난다. */
.page--reading .sheet-sum .k .basis { display: block; margin-top: 4px; color: var(--r-muted-2); }
/* 정가(할인가가 있을 때만). 붉은 선은 세일 딱지가 아니라 붓으로 그어 지운 자국이다 —
   그래서 퍼센트도 배지도 없고, 색은 인주 주홍(--r-accent-lit) 하나뿐이다. 시안 A, 2026-09-07
   선 자체는 <s> 의 UA 기본값이다 — 여기서는 색·굵기만 손댄다. 마크업을 span 으로 바꾸면 선이 사라진다. */
.page--reading .sheet-sum .was {
  margin-right: 9px;
  font-size: 14px;
  font-weight: 400;
  color: var(--r-muted);
  text-decoration-color: var(--r-accent-lit);
  text-decoration-thickness: 1.5px;
}
.page--reading .sheet-key { margin: 0 0 14px; }
.page--reading .sheet-key label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.page--reading .sheet-key input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  background: rgba(16, 12, 9, .4);
  color: var(--r-ink);
  font-size: 16px;
  font-family: inherit;
}
.page--reading .sheet-key .hint { font-size: 12px; color: var(--r-muted); margin: 6px 0 0; }
/* 결제 직전 동의 체크(2026-09-27). 네이티브 네모에 미색 accent-color 만 준다 — 다른 다크 폼
   (.page--fortune, .page--lookup)과 같은 처방이고, 고대비·:has 폴백을 따로 챙길 게 없다.
   44px 은 폼 체크 칸과 같은 터치 타겟. 링크만 --r-ink 로 올려 누를 곳을 드러낸다(본문 링크 관례). */
.page--reading .sheet-consent {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 12px;
  font-size: 13px; line-height: 1.5; color: var(--r-muted); cursor: pointer;
}
.page--reading .sheet-consent input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: #f4eadb; }
.page--reading .sheet-consent:has(input:checked) { color: var(--r-ink); }
.page--reading .sheet-consent a { color: var(--r-ink); text-decoration: underline; text-underline-offset: 2px; }
.page--reading .methods { display: flex; flex-direction: column; gap: 8px; }
.page--reading .method {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  background: rgba(16, 12, 9, .3);
  color: var(--r-ink);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.page--reading .method .chev { margin-left: auto; color: var(--r-muted); }

/* 결제 중간 화면(시작·확인 중·실패) — 흙먹 크롬 위 짧은 본문(스펙 §2-12) */
.page--reading .mid { padding: 40px var(--r-pad) 8px; }
.page--reading .mid-title {
  font-family: var(--display-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 12px;
}
.page--reading .mid p { font-size: 15px; margin: 0 0 10px; }
.page--reading .mid .order { font-size: 13px; color: var(--r-muted); }
.page--reading .mid .notice { margin: 0 0 16px; font-size: 14px; }

/* 장 이동 스티키 칩 바(전체 풀이) — 라벨은 풀 목차라 가로로 흐른다(스펙 §2-10) */
.page--reading .chnav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px var(--r-pad);
  background: rgba(16, 12, 9, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--r-line);
  scrollbar-width: none;
}
.page--reading .chnav::-webkit-scrollbar { display: none; }
.page--reading .chnav a {
  flex: 0 0 auto;
  font-family: var(--display-serif);
  font-size: 13px;
  line-height: 1;
  color: var(--r-muted);
  text-decoration: none;
  padding: 6px 11px;
  border: 1px solid var(--r-line);
  border-radius: 999px;
  white-space: nowrap;
}
.page--reading .chnav a.on {
  color: #fff4ea;
  border-color: var(--r-accent);
  background: rgba(184, 73, 46, .22);
}
.page--reading .chnav a.dim { opacity: .45; }

/* 차례 — 세로 괘선 + 진행 점(도착 녹 · 풀이 중 주홍 · 대기 흐림).
   `.toc-k` 자체 규칙은 없다 — 제목이 항상 접기 여는 줄 안에 살아 `.fold > summary .toc-k` 가
   글꼴·크기·색·여백을 전부 덮는다(2026-09-01). */
.page--reading .tocC { padding: 34px var(--r-pad) 0; }
.page--reading .tocC ol { list-style: none; margin: 0; padding: 0 0 0 2px; border-left: 1px solid var(--r-line); }
.page--reading .tocC li { position: relative; padding: 9px 0 9px 18px; }
.page--reading .tocC li::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--r-line);
}
.page--reading .tocC li.on::before { background: #9fbb8f; }
.page--reading .tocC li.now::before { background: var(--r-accent); }
.page--reading .tocC .no { font-size: 12px; color: var(--r-muted); margin-right: 8px; }
.page--reading .tocC .t { font-family: var(--display-serif); font-size: 15px; color: var(--r-ink); text-decoration: none; }
.page--reading .tocC .st { margin-left: 8px; font-size: 12px; color: var(--r-muted); }
.page--reading .tocC .st.on { color: #9fbb8f; }
.page--reading .tocC .st.now { color: var(--r-accent); }
.page--reading .tocC li.dim .t { opacity: .45; }

/* 추가 질문하기(스펙 2026-08-21-followup §6·§6-1) — 서찰. 흙먹 톤 상속, 홈 토큰 새지 않게
   .page--reading 범위. 물음은 손에 든 쪽지라 면과 테두리에 담기고, 답은 담지 않은 채 명조로 흐른다.
   쪽지가 <summary> 라 접기가 곧 은유다 — 접힌 쪽지를 열면 답신이 나온다. */
.page--reading .ask {
  position: relative;
  margin-top: 34px;
  padding: 24px var(--r-pad) 0;
  border-top: 1px solid var(--r-line);
}
/* 이음매의 인주 한 획 */
.page--reading .ask::before {
  content: '';
  position: absolute;
  left: var(--r-pad);
  top: -1px;
  width: 26px;
  height: 1px;
  background: var(--r-accent);
}
.page--reading .ask-list { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: ask; }
/* 게이트 화면에는 문답이 없다 — 빈 ol 이 margin 만 남기지 않게.
   :empty 는 못 쓴다 — EJS 가 남기는 공백 텍스트 노드 때문에 절대 매치되지 않는다. */
.page--reading .ask-list:not(:has(li)) { display: none; }
/* 닫힌 쪽지는 서로 붙여 쌓고(문답 목차), 펼친 한 통만 앞뒤로 숨을 준다. */
.page--reading .ask-item { margin: 0 0 9px; counter-increment: ask; }
.page--reading .ask-item:has([open]) { margin: 20px 0 26px; }
/* li(.ask-item)는 답변 도착 때 JS 가 초점을 옮기는 자리라 링을 안 세운다 — 위 전역
   [tabindex="-1"]:focus 가 지운다. summary 는 Tab 으로 닿으니 링이 있어야 하고, 전역 열거의
   홈 토큰(--gold)은 흙먹 판에서 탁해 흙먹 금으로 다시 세운다.
   알고 치르는 값: 남은 질문이 있으면 폼이 화면에 남는데(followup.js 가 카드로 초점을 옮긴 뒤
   textarea 를 비운다) 키보드 손님은 초점이 어디 갔는지 표시가 없다. Tab 두 번(.ask-q → textarea)이면
   입력칸으로 돌아오므로 덫은 아니다. 표시를 되살리는 대신 초점을 textarea 에 두는 쪽이 옳다면
   그건 followup.js 쪽 결정이지 이 규칙이 아니다. */
.page--reading .ask-q:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 2px; }
.page--reading .ask-item details { position: relative; }
/* 질문은 「나」의 말, 답변은 본문과 같은 .ch-body — 스펙 2026-08-21-followup §6 */
/* 「질문: 」 라벨은 CSS content 가 아니라 마크업(.ask-who) — 복사·CSS 미적용 맥락에서도 남게. */
/* 문답 번호 — ol 인데 마커를 껐으므로 닫힌 열 줄이 전부 「질문: 」로 시작한다. 카운터로
   조용히 되돌린다(마크업 추가 없음, JS 로 붙는 카드도 자동으로 이어진다).
   flex 라야 번호와 클램프 상자가 같은 줄에 선다 — 인라인이면 -webkit-box 인 .ask-qt 가
   블록이라 번호만 윗줄에 남는다. */
.page--reading .ask-q::before {
  content: counter(ask);
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--r-muted-2);
  font-variant-numeric: tabular-nums;
}
.page--reading .ask-qt { min-width: 0; }
.page--reading .ask-q {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: baseline;
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.72;
  /* 공백 없는 장문(URL·연속 문자)이 카드를 뚫고 나가 인쇄에서 1,799px 까지 번졌다. */
  overflow-wrap: anywhere;
  color: var(--r-ink);
  background: rgba(244, 234, 219, .035);
  border: 1px solid var(--r-line);
  border-radius: 3px 0 3px 3px;
}
.page--reading .ask-q::-webkit-details-marker { display: none; }
.page--reading .ask-q:hover { border-color: var(--r-accent); background: rgba(184, 73, 46, .1); }
.page--reading .ask-who { color: var(--r-accent-lit); font-weight: 400; font-size: 12.5px; letter-spacing: .08em; }
/* 접힌 쪽지는 두 줄까지만 — 300자 질문 열 건이면 「목차」가 아니라 벽이 된다. 펼치면 전문이 나온다.
   클램프를 summary 가 아니라 안쪽 .ask-qt 에 건다: overflow: hidden 은 「패딩 박스」에서 자르므로
   summary 에 걸면 세 번째 줄이 하단 패딩 안에 그려져 잘린 글자가 삐져나온다(헤드리스로 확인).
   패딩이 없는 안쪽 상자는 딱 두 줄에서 끝난다. 「질문: 」 라벨도 같은 상자 안이라 줄에 붙어 흐른다. */
.page--reading details:not([open]) .ask-qt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* 접힌 모서리 = 접힌 답. 우상단을 삼각형으로 잘라 내고(::after) 잘려 나간 조각이 카드 위로
   접혀 내린 것을 밝은 삼각형(::before)으로 그린다 — 두 겹이라야 「잘림」이 아니라 「접힘」으로
   읽히고, 눌러 볼 것이 있다는 신호가 된다. 펼치면 둘 다 사라진다.
   상태 표시가 곧 은유라 별도 화살표를 두지 않는다(네이티브 마커는 위에서 끈다).
   pointer-events: none — 카드 위에 z-index 로 얹혀 있어 그냥 두면 모서리 15px 가
   summary 클릭을 먹는 죽은 구역이 된다. */
.page--reading .ask-item details:not([open])::after,
.page--reading .ask-item details:not([open])::before { pointer-events: none; }
.page--reading .ask-item details:not([open])::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 15px 0;
  border-color: transparent var(--r-void) transparent transparent;
  filter: drop-shadow(-1px 1px 0 var(--r-line));
}
.page--reading .ask-item details:not([open])::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  background: rgba(244, 234, 219, .13);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.page--reading [open] .ask-q { border-radius: 3px; margin-bottom: 15px; background: rgba(244, 234, 219, .05); }
.page--reading .ask-a { font-size: 15px; line-height: 1.9; }
.page--reading .ask-a::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: var(--r-accent);
  margin: 0 0 12px;
}
.page--reading .ask-a p { margin: 0 0 13px; }
.page--reading .ask-a p:last-child { margin-bottom: 0; }
/* 남은 횟수는 우측 정렬 장부 한 줄. 말을 거는 상태(대기·오류·게이트)는 자리를 옮긴다. */
.page--reading .ask-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--r-muted-2);
  margin: 14px 0 9px;
}
.page--reading .ask-form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 14px;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  background: var(--r-cell-2);
}
.page--reading .ask-form textarea {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  padding: 2px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--r-line);
  border-radius: 0;
  background: transparent;
  color: var(--r-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.75;
  resize: vertical;
}
.page--reading .ask-form textarea:focus { outline: none; border-bottom-color: var(--r-accent); }
/* 밑줄만으로는 --r-accent 가 3.53:1 이라 링 역할을 못 한다 — li·summary 와 같은 금빛 링을 세운다. */
.page--reading .ask-form textarea:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 2px; }
.page--reading .ask-form textarea::placeholder { color: var(--r-muted-2); opacity: .8; }
.page--reading .ask-form textarea:disabled { color: var(--r-muted); }
.page--reading .ask-form .cta {
  width: auto;
  margin-top: 12px;
  padding: 9px 22px;
  font-size: 14px;
  border-radius: 999px;
}
/* 잠긴 폼은 게이트든 제출 중이든 같은 얼굴 — 둘 다 「지금은 쓸 수 없다」가 사실이고,
   차이는 role="status" 한 줄이 진다. */
/* :read-only 는 disabled(게이트) 와 readonly(제출 중) 를 한 번에 잡는다 — 둘 다 「지금은 쓸 수 없다」. */
.page--reading .ask-form:has(textarea:read-only) { opacity: .6; }
.page--reading .ask-form .cta:disabled { background: var(--r-line); color: var(--r-muted); }
/* 후기 폼 — 상자·textarea·버튼·@media print 숨김은 위 .ask-form 규칙을 그대로 물려받는다.
   --r-ink 는 .page--reading .reading-col 에서 정의되므로 이 선택자에서 살아 있다.
   .field·legend·.radio 는 위(app.css 폼 전역)의 색 없는 규칙이라 흙먹 색을 그대로 상속한다. */
.page--reading .ask-form .field { align-self: stretch; margin: 0 0 12px; }
.page--reading .ask-form .radio { accent-color: var(--r-ink); }
.page--reading .ask-form .rv-note { align-self: flex-start; margin: 10px 0 0; font-size: 12px; color: var(--r-muted-2); }
/* 부모 color 는 상속일 뿐이라 UA 의 a:link(#0000EE, 근흑 위 2.08:1)를 못 이긴다 — 명시 선언이 항상
   상속을 이긴다. 다크 화면 링크는 이 저장소가 늘 색을 명시해 왔다(.footer-legal a, .pv p a). */
.page--reading .ask-form .rv-note a { color: inherit; text-underline-offset: 3px; }
/* 게이트 — 제출 중에는 textarea 가 readonly 라 여기 안 걸린다(disabled 는 게이트뿐). */
.page--reading .ask:has(.ask-form textarea:disabled) .ask-status {
  justify-content: flex-start;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--r-muted);
}
/* 대기 — 밑줄에 먹이 번졌다 잦아든다. 이 순간만 문구가 가운데로 나선다. */
.page--reading .ask-status.is-busy {
  display: block;
  position: relative;
  text-align: center;
  padding-bottom: 11px;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--r-ink);
}
.page--reading .ask-status.is-busy::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 130px;
  height: 1px;
  background: var(--r-accent);
  transform: translateX(-50%);
  animation: ask-bleed 2.4s ease-in-out infinite alternate;
}
@keyframes ask-bleed {
  from { transform: translateX(-50%) scaleX(.12); }
  to { transform: translateX(-50%) scaleX(1); }
}
/* 오류 — 쪽지가 되돌아온 자리. .notice 와 같은 주홍 틴트. */
.page--reading .ask-status.is-err {
  justify-content: flex-start;
  color: var(--r-accent-lit);
  font-size: 13px;
  letter-spacing: 0;
  background: rgba(184, 73, 46, .14);
  border-left: 2px solid var(--r-accent);
  padding: 9px 12px;
  border-radius: 0 3px 3px 0;
  margin-bottom: 12px;
}
/* 소진 — 폼이 사라진 DOM 을 :has() 로 잡는다(상태 클래스 훅이 필요 없다). 마감은 전폭 괘선이다:
   상자로 닫으면 바로 아래 다시보기 안내(.keep)와 겹쳐 읽히고, 22px 주홍 획으로 닫으면 바로 위
   마지막 답변의 획과 똑같아 「답이 하나 더 있나」로 읽힌다. 셋 다 다른 표시여야 한다. */
.page--reading .ask:not(:has(.ask-form)) .ask-status {
  display: block;
  font-family: var(--display-serif);
  font-size: 14.5px;
  letter-spacing: 0;
  color: var(--r-muted);
  margin: 24px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--r-line);
}

/* 보관 안내 한 줄 — 등록 폼 없음(스펙 §2-5) */
.page--reading .keep { padding: 30px var(--r-pad) 0; }
.page--reading .keep p {
  font-size: 13px;
  color: var(--r-muted);
  margin: 0;
  padding: 14px;
  border: 1px solid var(--r-line);
  border-radius: 4px;
}

@media (min-width: 640px) {
  .page--reading .cta { width: 100%; }
}

/* ── 곁 화면 흙먹(찾기 폼 · 목록 · 오류 · 처리방침). 껍데기 하나를 넷이 나눠 쓴다 —
   화면마다 컬럼 클래스를 따로 두면 같은 규칙이 네 벌이 되고, 넷 다 사진도 판도 없는 한 장이라
   나뉠 이유가 없다. 값은 `.page--reading .reading-col` 에서 그대로 옮겼다(같은 사이트의 같은 흙먹).

   🚨 **곁 화면을 하나 늘리려면 세 자리를 같이 고쳐야 한다** — 여기(배경), `_layout.ejs` 의 isSide
   (.side-col 껍데기), `src/web/render.ts` 의 DARK_CHROME(헤더 로고·푸터 콜로폰). 하나만 빠지면
   조용히 어긋난다: 배경만 빼면 흰 종이에 미색 글자(1.1:1), isSide 만 빼면 컬럼 없이 전폭,
   DARK_CHROME 만 빼면 검은 바탕에 검은 로고와 종이용 콜로폰이 남는다. 아래 인쇄 블록도 짝이다. */
.page--terms,
.page--lookup,
.page--lookup-list,
.page--error,
.page--privacy {
  background: #101012;
  color: #f4eadb;
}
.side-col {
  --s-void: #0e0c0c;
  --s-ink: #f4eadb;
  --s-muted: #b39a82;
  --s-muted-2: #9a8776;
  --s-line: #262020;
  /* 주홍은 면·테두리용 3.69:1 이라 '글자'에는 -lit(7.35:1)를 쓴다 — 흙먹의 오랜 규약. */
  --s-accent: #b8492e;
  --s-accent-lit: #e08a70;
  /* :root 의 --gold(#a8832c)는 근흑 위에서 너무 어둡다 — 포커스 링이 이 값을 쓴다. */
  --s-gold: #c8a35a;
  --s-jade: #9fbb8f;
  /* 면 없는 1px 선(상자 테두리·칩·체크 네모)이 유일한 경계 단서라 .42(3.6:1) 밑으로 내리지 않는다. */
  --s-edge: rgba(244, 234, 219, .42);
  --s-pad: 18px;
  overflow: clip;
  color: var(--s-ink);
  background: var(--s-void);
}
/* 그레인(6) 위로 올라와야 건너뛰기 링크가 보인다. */
.side-col .skip { z-index: 8; }
.side-col .site-header,
.side-col .site-footer { position: relative; z-index: 2; }
.side-col .site-header {
  display: flex;
  align-items: center;
  padding: 16px var(--s-pad) 12px;
  background: #0b0b0c;
  border-bottom: 1px solid var(--s-line);
}
.side-col .site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--s-ink);
  font-size: inherit;
  font-weight: inherit;
}
.side-col .doc { max-width: none; margin: 0; padding: 22px var(--s-pad) 30px; }
.side-col .site-footer {
  padding: 16px var(--s-pad) 20px;
  margin-top: 26px;
  border-top: 1px solid var(--s-line);
  color: var(--s-muted-2);
  font-size: 11.5px;
  line-height: 1.8;
}
/* 포커스 링은 근흑 위에서 보이는 금색으로(접근성 기준 유지). */
.side-col :focus-visible { outline: 3px solid var(--s-gold); outline-offset: 2px; }

/* ── 찾기 폼(G-1 「상자 조판」 · PR #154 홈과 같은 옷, 2026-09-22 사용자 결정 B: 칩 고정 폭).
   조판은 `.page--home .quick-form` 을 옮긴 것이다 — 손님이 홈에서 이미 써 본 폼이라야
   같은 집으로 읽힌다. 토큰만 --home-* → --s-* 로 갈아탄다(두 팔레트는 값이 같다). 홈과 다른 것:
   포커스 링은 근흑 위 --s-gold(이 화면 관례) · **2열 격자 없음**(성별이 감춰져 오른쪽이 빈다) ·
   칩은 `flex: 1` 이 아니라 고정 폭(아래 `.radio` 주석) · 칸 아래 여백 26/시각 칸 14(이 화면의 원래
   리듬, 홈은 22) · `.f-err` 13px(전역 14). JS 를 안 싣는 화면이라 `[hidden]` 처방도 없다. */
.page--lookup .h1,
.page--lookup-list .h1,
.page--terms .h1,
.page--privacy .h1 {
  font-family: var(--display-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  color: var(--s-ink);
}
.page--lookup .lead,
.page--lookup-list .lead { font-size: 13px; color: var(--s-muted); margin: 0 0 26px; }
.page--lookup .sec,
.page--lookup-list .sec,
.page--privacy .sec,
.page--terms .sec,
.page--error .sec { margin: 0; }

/* ── 처리방침·이용약관(시안 A1 「서찰」, 2026-09-14 · 약관 2026-09-22).
   두 화면이 **같은 조판을 공유한다** — 선택자마다 두 스코프를 나란히 적는다. 스코프를 떼고
   `.pv-h` 한 벌로 두면 tests/web/a11y.test.ts 의 「곁 화면 규칙은 전부 스코프 안에」가 빨개진다:
   짧은 이름이 감싸개 없이 새는 것을 막는 검사라, 새 화면은 스코프를 늘리는 쪽으로 붙인다.
   폼도 목록도 없는 읽는 화면이라 조판이 셋뿐이다:
   명조 소제목 · 고딕 본문 · 가는 줄. 목록 화면의 `.t`(명조 제목) / `.m`(고딕 부연) 대비를
   그대로 문단 크기로 옮긴 것이고, 새 토큰은 만들지 않았다.
   본문을 --s-muted(7.30:1)로 두고 강조만 --s-ink(16.38:1)로 올린다 — 긴 글이라 전부 --s-ink 면
   눈이 쉴 곳이 없고, --s-muted-2(5.67:1)는 14px 본문을 길게 읽기엔 묽다. */
.page--privacy .lead,
.page--terms .lead { font-size: 13px; color: var(--s-muted); margin: 0 0 6px; }
.page--privacy .pv-date,
.page--terms .pv-date {
  display: block; font-size: 11.5px; letter-spacing: .1em; color: var(--s-muted-2); margin: 0 0 22px;
}
.page--privacy .pv-h,
.page--terms .pv-h {
  font-family: var(--display-serif);
  font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em;
  color: var(--s-ink); margin: 28px 0 8px;
}
.page--privacy .pv-h:first-of-type,
.page--terms .pv-h:first-of-type { margin-top: 0; }
.page--privacy .pv p,
.page--terms .pv p { margin: 0 0 12px; font-size: 14px; line-height: 1.85; color: var(--s-muted); }
.page--privacy .pv p strong,
.page--terms .pv p strong { color: var(--s-ink); font-weight: 600; }
/* 본문 안 링크(다시보기)는 밑줄로만 가른다 — 주홍을 쓰면 강조(strong)와 겨룬다.
   44px 타깃은 문장 중간 링크라 적용하지 않는다(줄 높이를 깨뜨린다) — 같은 곳으로 가는
   푸터·헤더 링크가 손가락 자리를 이미 갖고 있다. */
.page--privacy .pv p a,
.page--terms .pv p a { color: var(--s-ink); text-decoration: underline; text-underline-offset: 3px; }
.page--privacy .pv-rule,
.page--terms .pv-rule { border: 0; border-top: 1px solid var(--s-line); margin: 26px 0; }
/* 제9조 AI 수탁업체 표(2026-09-28). 세 칸이라 360px 폭에서도 들어가지만, 업체명이 길어지면
   표만 가로로 밀리고 화면은 안 밀리게 감싸개가 스크롤을 먹는다. 색은 본문 토큰을 그대로 쓴다. */
.page--privacy .pv-table-wrap { overflow-x: auto; margin: 0 0 12px; }
.page--privacy .pv-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.6; color: var(--s-muted); }
.page--privacy .pv-table th,
.page--privacy .pv-table td { border: 1px solid var(--s-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.page--privacy .pv-table th { color: var(--s-ink); font-weight: 600; }
.page--privacy .pv-table td + td,
.page--privacy .pv-table th + th { white-space: nowrap; }
.page--lookup .lk-form { margin: 0; }
/* 조회키는 sha256(생년월일|시각|비번|pepper) 라 성별이 안 들어간다 — 안 쓰는 것을 묻지 않는다.
   파셜은 못 고치므로(스펙 잠금 1) CSS 로만 감춘다. `emptyLookupValues()` 가 gender:'M' 을
   넣어 두어 required 라디오가 이미 checked 라, 감춰도 제출이 막히지 않는다.
   `.field` 를 붙여 특이도를 (0,4,0)으로 올린다 — 아래 `.field--radio { display: flex }` 가 (0,3,0)이라
   맨 `[data-step]` 으로 두면 이기는 근거가 소스 순서뿐이고, 규칙이 자리를 옮기는 날 성별 칸이 조용히
   되살아난다. 감출 fieldset 은 `.field` 를 늘 함께 갖는다(_birth-form). */
.page--lookup .lk-form .field[data-step="gender"] { display: none; }
.page--lookup .lk-form .field { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.page--lookup .lk-form .field--time { margin-bottom: 14px; }
/* 라디오 칸 안쪽은 flex 다 — 알약 칩 둘이 왼쪽에 나란히 서고 gap 이 사이를 띄운다.
   align-items 를 flex-start 로 붙드는 이유: 한 줄에 키 큰 것이 끼어도 칩이 줄 높이만큼 늘어나지 않는다.
   홈의 align-content 는 안 가져온다 — 2열 격자에서 두 칸의 키를 맞추려던 것이고 여기엔 짝이 없다. */
.page--lookup .lk-form .field--radio {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
}
/* 오류·윤달은 칩 옆에 끼지 않고 제 줄을 통째로 쓴다. `.f-err` 를 빼면 오류가 난 칸에서 주홍 한 줄이
   칩 사이를 비집고 들어간다. legend 는 여기 없다 — fieldset 의 legend 는 flex 항목이 되지 않고
   (HTML 렌더링 규칙) UA 가 제 줄에 둔다. */
.page--lookup .lk-form .field--radio .f-err,
.page--lookup .lk-form .field--radio .check { flex: 1 0 100%; }
/* 캡션 — 11px 주홍 자간 캡션에서 미색 13px 로(G-1). 칸 이름이 장식 키커가 아니라 읽는 글이 된다.
   파셜의 legend 와 휴대폰 번호의 .cap 이 한 규칙을 나눠 써야 두 칸이 같은 결로 읽힌다. */
.page--lookup .lk-form legend,
.page--lookup .lk-form .cap {
  display: block; width: 100%; padding: 0; margin: 0 0 8px;
  font-size: 13px; letter-spacing: .01em; font-weight: 600;
  color: var(--s-ink);
}
/* 셀렉트 — 밑줄 하나에서 8px 상자로. 네이티브 화살표를 지우고 쉐브론을 따로 얹는다.
   세 칸 사이는 전역 `.dob { gap: 8px }` 가 그대로 준다(홈과 같은 값) — 아래 안여백이 그 8px 을
   전제로 한 실측 계약이라 여기서 다시 벌리지 않는다. */
.page--lookup .lk-form .selbox { position: relative; display: block; }
/* 파이어폭스는 셀렉트 기본 폭을 가장 긴 옵션에 맞춘다 — min-width 를 풀어야 세 칸이 줄을 안 넘긴다. */
.page--lookup .lk-form .dob .selbox { min-width: 0; }
/* ▾ 글자는 10px 로도 작고 삼각형 모양이 글꼴마다 다르다 — 1.5px 획 두 줄을 45도 돌려 직접 그린다.
   5px 정사각형이라 대각선으로 보이는 폭은 약 7px 다(G-1). translateY 가 -50% 가 아니라 -70% 인 것은
   회전한 정사각형의 시각 중심이 기하 중심보다 아래에 있기 때문이다. right 9 는 셀렉트 오른쪽
   안여백 22 안에 든다. */
.page--lookup .lk-form .selbox::after {
  content: ''; position: absolute; right: 9px; top: 50%;
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--s-ink); border-bottom: 1.5px solid var(--s-ink);
  transform: translateY(-70%) rotate(45deg); opacity: .8; pointer-events: none;
}
.page--lookup .lk-form .selbox select,
.page--lookup .lk-form .text-input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 46px;
  border: 1px solid var(--s-edge); border-radius: 8px;
  background: transparent; color: var(--s-ink);
  /* 16px 아래로 내리면 iOS 사파리가 탭할 때마다 화면을 확대한다(전역 규칙이 16px 인 이유). */
  font-size: 16px;
  /* 안드로이드 크롬에게 펼침 목록·스크롤바까지 어둡게 그리라고 말한다. */
  color-scheme: dark;
}
/* 실제 키는 전역 `.selbox select, .text-input` 의 min-height: 48px 이 잡는다 — 위 height 는 그 밑으로
   못 내려간다. line-height 가 46px 인 이유가 그것이다: 48 에서 위아래 테두리 2px 을 뺀 안쪽을 딱 채운다.
   안여백은 320px 실측으로 정했다(홈 적대 리뷰 2026-09-22): 셀렉트 폭 87px 에서 「1996년」이 49px 인데
   30+14 를 빼면 43px 이라 잘렸다. 22+10 이면 55px 이 남는다. */
.page--lookup .lk-form .selbox select { padding: 0 22px 0 10px; line-height: 46px; }
/* 번호는 고르는 것이 아니라 치는 것이라 input 이다 — 쉐브론이 없으니 좌우 안여백이 같다.
   네 자리 시절의 letter-spacing:.35em 은 없앴다. 열한 자리에 같은 자간을 주면 칸을 넘는다. */
.page--lookup .lk-form .text-input { padding: 0 10px; line-height: 1.5; }
/* 투명한 셀렉트의 펼침 목록은 시스템 기본색으로 뜬다 — 근흑·미색으로 되돌린다. */
.page--lookup .lk-form .selbox select option { background: var(--s-void); color: var(--s-ink); }
/* 라디오 — 알약 아웃라인 칩이다. 마름모는 표식이 작고 뜻이 없어 라디오로 안 읽혔다(2026-09-22
   사용자 판정, 홈 G-1 과 같은 근거). **폭만 홈과 다르다**: 홈은 2열 격자 한 칸을 칩 둘이 반씩 나눠
   `flex: 1` 인데, 이 폼은 격자가 없어 같은 처방을 쓰면 알약 둘이 전폭을 가로지른다. 사용자 결정 B
   (2026-09-22): 고정 폭으로 왼쪽에 선다 — min-width 120px 이 글자 수와 무관하게 두 칩의 폭을 맞춘다.
   가장 좁은 흔한 폰 320px 에서도 컬럼 안쪽이 320 − 18×2 = 284px 이고 120×2 + gap 8 = 248px 이라
   줄을 안 넘는다. 왼쪽 정렬은 flex 의 기본값이라 justify-content 를 따로 적지 않는다(칩 **안**의
   center 는 글자를 알약 가운데 두는 것으로, 서로 다른 축이다). */
.page--lookup .lk-form .field--radio .radio {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  flex: 0 0 auto; min-width: 120px; min-height: 44px; margin: 0; padding: 0 20px;
  border: 1px solid var(--s-edge); border-radius: 999px;
  font-size: 15px; letter-spacing: .06em; color: var(--s-muted); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
/* 점을 지우는 것은 :has 를 쓸 수 있을 때뿐이다. 조건을 긍정으로 건다 — 부정(`not (selector(...))`)으로
   걸면 selector() 자체를 모르는 엔진이 블록을 통째로 버려, 폴백이 필요한 바로 그 엔진에서
   「점도 없고 강조도 없는」 폼이 남는다. 폴백 그림은 이렇다: 네이티브 점·네모가 칩과 라벨 안에
   그대로 보인다(아래 accent-color 가 미색이다). */
@supports selector(:has(*)) {
  .page--lookup .lk-form .field--radio .radio input[type="radio"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
  }
  /* 켜짐을 색 하나로 알리지 않는다 — 테두리·면·글자색·굵기가 함께 바뀐다. 면은 주홍 16% 라
     근흑 위에서 아주 옅고, 글자는 4.5:1 을 넘는 -lit 쪽이다. */
  .page--lookup .lk-form .field--radio .radio:has(input:checked) {
    border-color: var(--s-accent-lit); background: rgba(184, 73, 46, .16);
    color: var(--s-accent-lit); font-weight: 700;
  }
  /* 체크박스(윤달·시각 모름)는 네모 + 획이다 — 알약 칩과 모양이 갈려야 라디오와 체크가 구분된다.
     입력을 숨기는 일이라 라디오와 같은 게이트 안이다 — :has 를 모르는 엔진에는 네이티브 네모가 남는다.
     셀렉터에 [type] 을 붙이는 이유: 아래 accent-color 규칙(`.lk-form input[type="checkbox"]`)과
     특이도가 같으면 뒤엣것이 이겨 15px 이 남는다 — opacity 0 이라 안 보일 뿐 죽은 선언이다. */
  .page--lookup .lk-form .check input[type="checkbox"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
  }
  .page--lookup .lk-form .check::before {
    content: ''; width: 18px; height: 18px; flex: 0 0 auto;
    border: 1px solid var(--s-edge); border-radius: 3px;
  }
  .page--lookup .lk-form .check::after {
    content: ''; position: absolute; left: 4px; top: 50%;
    width: 10px; height: 5px; margin-top: -4px;
    border-left: 2px solid var(--s-ink); border-bottom: 2px solid var(--s-ink);
    transform: rotate(-45deg); opacity: 0;
  }
  .page--lookup .lk-form .check:has(input:checked)::before { border-color: var(--s-ink); }
  .page--lookup .lk-form .check:has(input:checked)::after { opacity: 1; }
  /* 입력이 숨어 있어 전역 링이 안 보인다 — 라벨이 대신 받는다(offset 은 전역과 같은 2px).
     칩과 체크가 한 규칙을 나눠 쓴다: 둘 다 입력을 숨기므로 한쪽만 받으면 나머지가 링을 잃는다. */
  .page--lookup .lk-form .field--radio .radio:has(input:focus-visible),
  .page--lookup .lk-form .check:has(input:focus-visible) {
    outline: 3px solid var(--s-gold); outline-offset: 2px;
  }
}
/* 고대비 모드는 color 를 시스템 색으로 덮지만 opacity 는 안 건드린다 — 입력은 숨은 채 색 구분만
   사라져 굵기 하나로 골라야 한다. 위 @supports 블록보다 뒤에 와야 이긴다(특이성이 같다). */
@media (forced-colors: active) {
  .page--lookup .lk-form .field--radio .radio input[type="radio"],
  .page--lookup .lk-form .check input[type="checkbox"] {
    appearance: auto;
    position: static; width: auto; height: auto; opacity: 1; margin: 0 6px 0 0;
  }
  /* 네이티브 네모가 돌아왔으니 그린 네모·획은 지운다 — 안 지우면 표식이 둘이다.
     고대비 모드는 author 의 background·border-color 를 시스템 색으로 덮어 「빈/참」 구분도 지운다. */
  .page--lookup .lk-form .check::before,
  .page--lookup .lk-form .check::after { content: none; }
  /* 칩 기하는 게이트 밖(글자만 담는 크기)이라 점이 돌아오면 알약 안에 점+글자가 함께 끼어
     자간·안여백이 어긋난다. 점이 보이는 순간 칩은 할 일이 없다 — 인라인 컨트롤로 되돌린다. */
  .page--lookup .lk-form .field--radio .radio {
    flex: none; min-width: auto; padding: 0; border: 0; border-radius: 0;
    letter-spacing: 0; justify-content: flex-start;
  }
}
/* 전역 .check 가 display:flex 인 것은 「윤달」이 라디오 옆에 붙지 않게 하려는 것이다 — 그대로 둔다.
   position:relative 는 위 ::after 획의 기준점이다. */
.page--lookup .lk-form .check {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  /* 44px: 같은 블록의 칩과 같은 터치 타겟이다. */
  min-height: 44px; margin: 4px 0 0;
  font-size: 14px; color: var(--s-muted); cursor: pointer;
}
.page--lookup .lk-form .check:has(input:checked) { color: var(--s-ink); }
/* 윤달 칸은 음력일 때만 있어야 한다(스펙 §3-1). 홈에서는 quick.js 의 syncLeap 이 hidden 을 붙이지만
   이 화면은 스크립트를 한 줄도 싣지 않으므로(잠금 4) :has 로 대신한다 — 양력이 골라져 있으면 접는다.
   달력 묶음에만 걸린다: 「시각 모름」 칸이 든 묶음에는 value="solar" 인 입력이 없다.
   **켜져 있는 칸은 감추지 않는다**(`:not(:has(input:checked))`). 감춘 체크박스도 successful control 이라
   음력 → 윤달 체크 → 양력 → 제출 이면 `leap=1&calendar=solar` 가 나가 400 이 되는데, 그때 끌 컨트롤이
   화면에 없으면 손님이 빠져나올 수 없다. 켜진 칸을 남겨 두면 오류 문구 옆에 끌 것이 같이 보인다.
   :has 를 모르는 엔진에서는 늘 보인다 — 빈 줄 하나가 남지만 그쪽이 함정이 없어 더 안전하다. */
.page--lookup .lk-form .field--radio:has(input[value="solar"]:checked) .check:not(:has(input:checked))
  { display: none; }
/* 폴백·고대비에서 점이 도로 나오면 브라우저 기본 파랑이 근흑 위에 뜬다 — 미색으로. */
.page--lookup .lk-form input[type="radio"],
.page--lookup .lk-form input[type="checkbox"] { width: 15px; height: 15px; accent-color: #f4eadb; }
.page--lookup .lk-form .f-err { color: var(--s-accent-lit); font-size: 13px; margin: 6px 0 0; }
/* 폼 맨 위 오류 요약(lookup.ejs, autofocus) — 캡션이 미색 13px 굵기 600 이 되면서 요약 줄과
   「달력」 라벨이 색만 다른 두 줄로 맞닿는다. 홈의 .quick-say 처럼 아래 여백과 주홍 세로선을 준다. */
.page--lookup .lk-form > .f-err:first-child { margin: 0 0 18px; padding: 0 0 0 12px; border-left: 2px solid var(--s-accent); }
/* 버튼은 전폭이다 — 모서리는 셀렉트 상자와 같은 8px 로, 글자는 칩과 같은 15px 로. */
.page--lookup .lk-form .cta {
  display: block; width: 100%; margin: 14px 0 0;
  min-height: 48px; padding: 14px 20px; border-radius: 8px;
  background: var(--s-accent); color: #fff4ea;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
/* ── 목록(시안 B2 「서가」). 한 줄은 두 줄만 산다 — 제목·상태가 첫 줄, 날짜·기한이 둘째 줄.
   상태와 지우기를 각자 줄에 두면 글이 사진(62px)보다 길어져 줄이 헐거워진다(2026-09-07 지적).
   상태는 배지가 아니라 글자 색이 진다 — badge--complete/failed/generating 에 CSS 가 없어
   세 상태가 전부 같은 주홍 배지로 나왔다. 색만으로 가르지 않으므로 글자는 그대로 남는다. */
.page--lookup-list .shelf { list-style: none; margin: 0; padding: 0; }
.page--lookup-list .shelf li {
  display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--s-line);
}
.page--lookup-list .shelf li:first-child { padding-top: 0; }
.page--lookup-list .shelf .ph {
  flex: none; width: 62px; height: 62px; border-radius: 2px; overflow: hidden;
  position: relative; background: #1a1414;
}
.page--lookup-list .shelf .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 사진 아래를 어둡게 깔아 미색 글자와 붙어도 사진이 뜨지 않게 한다. */
.page--lookup-list .shelf .ph::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 12, 12, .55), transparent 60%);
}
.page--lookup-list .shelf .txt {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 8px;
}
.page--lookup-list .shelf .ln { flex: 1 1 auto; min-width: 0; }
.page--lookup-list .shelf .t {
  /* 패딩 없는 한 줄 링크는 15.5px×1.4 = 22px 라 매번 누르는 주 동작이 삭제 버튼(44px)의 절반이었다.
     스펙 §2-6 이 스스로 건 44px 을 여기서도 지킨다 — 패딩으로 43.7px 까지 가고 min-height 가 나머지를
     닫는다. 음수 여백이 그 22px 을 도로 흡수하므로 줄 위치와 사진 높이는 그대로다(.x 와 같은 관례). */
  display: block; min-height: 44px; padding: 11px 0; margin: -11px 0;
  font: 400 15.5px/1.4 var(--display-serif); color: var(--s-ink); text-decoration: none;
}
.page--lookup-list .shelf .m {
  display: block; font-size: 11.5px; line-height: 1.5; color: var(--s-muted-2); margin-top: 4px;
}
.page--lookup-list .shelf .s {
  flex: none; font-size: 11px; letter-spacing: .14em; font-weight: 600; padding-top: 4px;
}
/* 세 상태에 색 셋. 진행 중은 손님이 할 일이 없으니 조용한 뮤트로, 주홍은 할 일이 있는
   「확인 필요」에만 준다 — 셋을 두 색으로 칠하면 배지를 버린 이유(진행과 실패가 같아 보임)가 되살아난다. */
.page--lookup-list .shelf .s--ok { color: var(--s-jade); }
.page--lookup-list .shelf .s--run { color: var(--s-muted); }
.page--lookup-list .shelf .s--bad { color: var(--s-accent-lit); }
.page--lookup-list .shelf .del { flex: none; margin: 0; }
/* 지우기는 되돌릴 수 없는 것이라 44px 타깃을 지킨다 — 글자 링크(「삭제」)는 29px 밖에 안 나왔다.
   음수 여백은 타깃만 키우고 글자 줄은 제자리에 두려는 것이다. */
.page--lookup-list .shelf .x {
  display: block; width: 44px; height: 44px; margin: -6px -13px 0 0; padding: 0;
  border: 0; background: none;
  color: var(--s-muted-2); font-size: 15px; cursor: pointer; font-family: inherit;
}
/* 「다시 찾기」 한 줄. 고지 바로 위에 서므로 강조는 걷어내되 손가락 자리는 준다. */
.page--lookup-list .lk-again { margin: 22px 0 0; font-size: 13px; }
.page--lookup-list .lk-again a {
  display: inline-block; padding: 8px 0; min-height: 44px; line-height: 28px;
  color: var(--s-muted); text-decoration: underline; text-underline-offset: 3px;
}
/* 삭제 알림. 전역 규칙이 `.flash, .notice` 한 줄이라 아래 `.notice` 보정만으로는 flash 가 그대로
   밝은 베이지 상자로 뜬다 — 글자는 --s-ink 를 상속해 #f4eadb on #f0e2dc, 1.05:1 로 안 보인다.
   .flash 가 공개 화면에 나온 적이 없어(그전엔 어드민 전용) 이 함정이 여기서 처음 밟혔다.
   컬럼 전체에 걸어 둔다 — 곁 화면 셋 중 어디에 flash 가 붙어도 같은 조판이라야 한다. */
.side-col .flash {
  background: none; padding: 0; border-radius: 0;
  color: var(--s-ink); font-size: 13px; line-height: 1.8;
}
/* 빈 목록 두 줄. 전역 `.notice` 는 :root 의 --accent-soft(#f0e2dc) 면과 10px 모서리를 쥐고 있어
   .side-col 이 --s-* 만 정의한 이 컬럼에서는 근흑 위 밝은 베이지 상자로 뜬다(글자 2.11:1).
   면을 벗기고 글자만 남긴다 — 상자가 없는 것이 이 조판의 문법이다. */
.page--lookup-list .notice {
  background: none; padding: 0; border-radius: 0;
  color: var(--s-muted); font-size: 13px; line-height: 1.8;
}
/* 전역 `.cta` 가 width:100% 라 inline-block 만으로는 전폭이 된다 — 빈 목록의 「다시 찾기」는
   문장 옆에 서는 버튼이므로 폭을 글자에 맞춘다. */
.page--lookup-list .cta--ghost {
  display: inline-block; width: auto; min-height: 44px; padding: 13px 20px; border-radius: 2px;
  background: transparent; color: var(--s-ink); border: 1px solid var(--s-edge);
  font-size: 14px; font-weight: 700;
}

/* ── 오류(시안 C1 「먹 방울」). 사이트에 장식 모티프가 하나뿐이라 — 풀이를 기다릴 때 번지는
   먹 방울 — 그것을 빈 화면에 옮겨 놓는다. 다만 `@keyframes wait-blot` 은 참조하지 않는다:
   막다른 길에서 계속 번지는 얼룩은 「아직 무언가 되는 중」으로 읽히고, 여기엔 될 일이 없다.
   `.page--reading` 이 prefers-reduced-motion 때 쓰는 그 정지 자세만 값으로 가져온다 —
   애초에 애니메이션이 없으므로 reduce 를 켜도 그림이 같고 모션 예산도 안 쓴다(스펙 §2-7). */
.page--error .blot-wrap { position: relative; padding: 64px 0 72px; text-align: center; }
.page--error .blot {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 44%; width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 73, 46, .42) 0%, rgba(184, 73, 46, .13) 45%, transparent 70%);
  filter: blur(14px);
  opacity: 1; transform: scale(.72);
}
/* 둘째 방울은 작고 옅게 어긋놓아 하나짜리 대칭 원으로 안 읽히게 한다. */
.page--error .blot--2 {
  left: 68%; top: 64%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  transform: scale(.6); opacity: .7;
}
.page--error .blot-say { position: relative; z-index: 1; }
.page--error .blot-say .m1 {
  font: 400 19px/1.6 var(--display-serif); color: var(--s-ink); margin: 0 0 8px;
}
.page--error .blot-say .m2 { font-size: 13px; color: var(--s-muted); margin: 0; }
.page--error .blot-say .m2--help { margin-top: 10px; }
/* 얼룩이 절대배치라 CTA 를 띄워 두지 않으면 방울 밑으로 깔린다. */
.page--error .c-acts { position: relative; z-index: 1; margin: 34px 0 0; }
.page--error .c-acts .cta {
  display: block; width: 100%; min-height: 48px; padding: 14px 20px; border-radius: 2px;
  background: var(--s-accent); color: #fff4ea;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.page--error .c-acts .cta--ghost {
  background: transparent; color: var(--s-ink); border: 1px solid var(--s-edge);
}
.page--error .c-acts .cta + .cta { margin-top: 10px; }
.page--error .code {
  margin: 26px 0 0; text-align: center;
  font-size: 11px; letter-spacing: .22em; color: var(--s-muted-2);
}

/* ── 풀이 화면 인쇄. **파일 끝에 둔다** — @media print 는 우선순위를 안 올리고 순서만 따지므로,
   위쪽(파일 머리)의 인쇄 블록에 두면 뒤에 오는 `.page--reading .reading-col`(같은 0,2,0)에 밀려
   한 줄도 안 먹는다(실제로 그랬다. 헤드리스로 계산색을 재서 확인).
   chart.css 가 아니라 여기 있어야 하는 이유: 이 규칙들은 app.css 가 만든 문제를 닫고
   (.page--reading 의 #101012·#f4eadb, .reading-col 의 라디얼), chart.css 는 needsChartCss
   일 때만 실리는데 결제 화면 셋(payment-start/return/failed)은 pageClass 가 'reading' 이면서
   그 플래그가 없다 — 거기 두면 영수증·실패 화면이 계속 흰 종이에 흰 글씨로 인쇄된다.
   배경만 끄고 글자색을 안 내리면 장 본문·차례가 흰 글씨로 남는다(.ch-body 등은 color 를
   선언하지 않고 상속한다). 판 제목 h2 는 파셜·.saju-board 밖이라 감싸개로 못 닿아 여기서 색을 준다.
   자미·점성 격자 안쪽은 chart.css 인쇄 블록이 흙먹 글자색으로 되돌린다 — 그쪽은 어두운 면을
   그대로 찍기 때문이다. */
@media print {
  .page--reading, .page--reading .reading-col { background: none; box-shadow: none; color: #1b1a19; }
  /* 곁 화면 셋은 인쇄 대상이 아니지만, 위쪽 인쇄 블록이 배경만 흰 종이로 되돌리고 글자색은
     안 내리므로 그대로 두면 흰 종이에 크림 글씨가 된다. 한 줄로 닫는다. */
  /* 색을 하나씩 덮지 않고 **토큰을 종이값으로 내린다** — 이 블록의 color 선언 대부분이
     var(--s-*) 를 직접 쥐고 있어 상속 한 줄로는 안 닿는다(제목·종목 이름이 백지에 1.19:1 로 찍혔다).
     아래 .page--reading .ask·.tocC 가 이미 쓰는 관례와 같다. */
  .page--terms, .page--lookup, .page--lookup-list, .page--error, .page--privacy, .side-col {
    --s-ink: #1b1a19;
    --s-muted: #5b5754;
    --s-muted-2: #5b5754;
    --s-line: #ded6c9;
    /* 화면값은 미색 42% 라 흰 종이에서 1.1:1 로 사라진다 — 칸의 밑줄과 빈 마름모가 그 토큰을 쥔다
       (마름모는 2026-09-16 에 붙었고, 밑줄은 그 전부터 종이에서 안 보였다). 3.65:1 로 내린다. */
    --s-edge: #8c857c;
    --s-accent-lit: #7a2f2f;
    --s-jade: #3f6b3a;
    background: none;
    box-shadow: none;
    color: #1b1a19;
    /* 100vh 는 종이에서 빈 장을 한 번 더 만든다. clip 은 화면에서 그레인을 가두려는 것이라
       종이에서는 풀어 준다(.reading-col 이 아래에서 같은 이유로 하는 것과 같다). */
    min-height: 0;
    overflow: visible;
  }
  /* 위쪽 인쇄 블록은 `.wait-blot` 만 숨긴다 — 오류 화면 얼룩은 이름이 달라 종이에 주홍으로 찍힌다. */
  .page--error .blot { display: none; }
  /* 문답·후기 제목까지 덮는 공용 한 줄. 판머리는 이제 `.fold > summary` 안이라 아래 접기 블록이
     함께 맡는다 — 여는 줄 토큰 재선언(`--r-ink: #1b1a19`)이 `.fold > summary .board-title`(0,4,0)의
     `color: var(--r-ink)` 로 내려가고, 빼기 표·패딩도 그 블록이 지운다. */
  .page--reading .board-title { color: #1b1a19; }
  /* 장 문구(대기·실패)는 --r-muted 를 쥔다 — 안 내리면 흰 종이에 #b39a82(2.2:1)로 찍힌다. */
  .page--reading .ch-note { color: #5b5754; }
  /* 목차(「이어지는 이야기」)는 이 블록이 한 번도 다룬 적이 없다 — 부제(.next-sub)가 --r-muted(2.7:1),
     장 소제목이 --r-muted-2(3.4:1)로 흰 종이에 찍힌다. 소제목만 내리면 같은 줄에서 번호만
     흐린 채 남으므로 둘을 함께 내린다. 관례는 .p-line·.tocC 와 같은 「토큰을 종이값으로」다. */
  /* --r-accent-lit 은 `.next .no` **전체**가 쥔다(app.css 위쪽 한 규칙) — 장 목록의 「제1장」…「제N장」과
     문답 행의 「혜택」이 같은 선택자다. 안 내리면 흰 종이에 #e08a70(2.6:1)로 찍혀 번호 칸이 통째로
     흐려진다.
     tests/web/a11y.test.ts 가 판(.saju-board)에 대해 같은 값을 잠그는 그 구멍이다.
     --r-gold 는 그 줄의 **횟수 배지**(.next-ask .cnt, 2026-09-22 시안 나)가 글자와 테두리 양쪽으로
     쥔다. 백지에서 #c8a35a 는 2.37:1 이라 정작 사려는 이유인 횟수가 흐려진다 — 판이 인쇄에서
     --r-gold 를 먹으로 내리는 관례(chart.css `.saju-board { --r-gold: #1b1a19 }`)를 그대로 쓴다.
     테두리는 border 라 배경 그래픽이 꺼져도 찍힌다. */
  .page--reading .next {
    --r-muted: #5b5754;
    --r-muted-2: #5b5754;
    --r-accent-lit: #7a2f2f;
    --r-gold: #1b1a19;
  }
  /* 문답 행은 **한 덩이다**. 아랫줄이 두 문장(「딸려 온다」+ 여는 조건)이 되면서 쪽 경계가 그 사이에
     떨어질 수 있게 됐는데(실측: A4 4쪽 끝에 이름·배지, 5쪽 머리에 여는 조건), 그러면 종이에서
     「지금 물을 수 있다」로 읽힌다 — 화면에서 아랫줄이 지는 §2-4 게이트가 종이에서만 사라진다.
     저장소에서 break-inside 를 쓰는 첫 자리다. 장 목록 항목(`li`)에는 안 붙인다 — 소제목이 딸린
     항목은 2026-09-09 개정 이후 여러 줄이라 저 경계에서 똑같이 쪼개질 수 있지만, 그쪽은 쪼개져도
     잃는 것이 제목과 소제목의 붙임성뿐이고 **거짓으로 읽히는 문장이 없다**. 여기만 붙이는 이유가
     그것이다: 이 행은 앞 문장(「드립니다」)만 남으면 뒤 문장이 지던 게이트가 사라진다. */
  .page--reading .next-ask { break-inside: avoid; }
  /* 절단부 자물쇠도 같은 관례로 내린다 — 문구가 --r-muted(2.7:1), 자물쇠가 --r-accent-lit(2.6:1)이라
     안 내리면 흰 종이에서 둘 다 흐려진다. 토큰을 **요소 자신에** 다시 선언하는 형태라 그 요소의
     color 선언이 바로 새 값을 읽는다(위 .next 는 자손에게 내려 주는 쪽이다).
     선(--r-line)은 목록 구분선과 같은 값을 쥔다 — 그쪽이 종이에서 어떤 값인지는 이 변경이 정할 일이 아니다. */
  .page--reading .cut-rule,
  .page--reading .cut-note {
    --r-muted: #5b5754;
    --r-accent-lit: #7a2f2f;
  }
  /* 연출은 지연 동안 opacity 0 이다 — 재생 중 인쇄하면 아직 안 뜬 문단이 백지로 찍힌다.
     기본 규칙과 같은 특정도(0,2,0)이고 **파일 끝**이라 순서로 이긴다. 파일 앞쪽 인쇄 블록에 두면
     뒤에 오는 `.page--reading .tw-para` 에 밀려 한 줄도 안 먹는다 — 이 블록 여는 주석의 실측 실패와 같은 함정이다. */
  .page--reading .tw-para { animation: none; }
  /* 접힌 접기(차례·판)는 `public/js/fold.js` 의 인쇄 훅이 편다 — `details.fold[id]` 를 전부 문다.
     그 파일이 판 파셜 밖에 있어 판 없는 풀이에서도 차례가 종이에서 사라지지 않는다.
     종이에는 누를 것이 없으므로 여는 줄을 원래 제목으로 되돌린다 —
     면·테두리·십자·커서를 뺀다. 색은 `.ask` 와 같은 관례로 토큰만 갈아 전부 따라오게 한다. */
  /* 종이 토큰은 **여는 줄과 차례 본문에만** 준다. `.fold` 전체에 주면 그 종이 먹이 접기 안까지
     내려가는데, 어두운 면을 print-color-adjust 로 그대로 찍는 영역이 그것을 상속하면
     검은 면에 검은 글씨가 된다(실측 1.06:1). 그때마다 되돌림 규칙을 손으로 추가하는 구조가 되고,
     빠뜨리면 조용히 안 보인다 — 애초에 안 내려보내는 편이 낫다.
     여는 줄에 필요한 이유: `.fold > summary .toc-k` 가 var(--r-ink) 를 직접 쥐어(0,4,0) 덮이지 않는다. */
  .page--reading .fold > summary {
    --r-ink: #1b1a19;
    --r-muted-2: #5b5754;
    --r-accent-lit: #7a2f2f;
    color: #1b1a19;
  }
  .page--reading .tocC {
    --r-ink: #1b1a19;
    --r-muted: #5b5754;
    --r-line: #ded6c9;
    color: #1b1a19;
  }
  /* 차례 진행 배지는 토큰이 아니라 리터럴 녹색이라 위 재선언이 안 닿는다 — 종이용으로 한 번 더 내린다. */
  .page--reading .tocC .st.on { color: #3f6b3a; }
  /* 인쇄에서는 열린 채이므로 `[open]`(0,3,1)이 이긴다 — 미디어 쿼리는 명시도를 안 올린다.
     둘 다 적어야 JS 가 살아 편 경우와 죽어 닫힌 경우가 같은 모양으로 찍힌다. */
  .page--reading .fold[open] > summary,
  .page--reading .fold > summary {
    padding: 0;
    border: 0;
    background: none;
    cursor: auto;
    margin-bottom: 10px;
  }
  .page--reading .fold > summary::before,
  .page--reading .fold > summary::after { display: none; }
  /* 되읽기 한 줄도 종이 토큰을 쥔다. 이 블록이 실제로 소비하는 토큰만 내린다:
     값 사이 가운뎃점(dd:not(:last-of-type)::after)의 --r-muted-2, 테두리의 --r-line.
     라벨(dt)은 sr-only 라 종이에도 안 찍히므로 그 몫은 이제 가운뎃점 하나다.
     dd 는 색을 상속하므로 color 직접 지정 하나로 덮는다 — --r-ink 는 여기 소비자가 없어 내리지 않는다. */
  .page--reading .p-line {
    --r-muted-2: #5b5754;
    --r-line: #ded6c9;
    background: none;
    color: #1b1a19;
  }
  /* 기준 줄은 --r-muted-2 를 쥔다 — 안 내리면 백지에 #9a8776(3.1:1)으로 찍혀 근거가 사라진다.
     .p-line 과 같은 관례다(색을 하나씩 덮지 않고 토큰을 종이값으로 내린다). */
  .page--reading .p-basis { --r-muted-2: #5b5754; }
  /* 그레인은 z-index 6 의 전면 오버레이라 배경을 켠 인쇄에서 글자 위에 얼룩으로 덮인다. */
  .page--reading .reading-grain { display: none; }
  /* 종이에는 스크롤이 없다. 자르면 대운 10칸 중 화면 밖 칸이 그대로 사라져 「정보 삭제 없음」이
     깨진다 — 실제로 인쇄물에서 6칸이 없었다. 기둥과 레일 둘 다 안 자른다(레일은 기둥이 clip 인
     한 자기만 visible 로 둬 봐야 소용없다). clip 은 안쪽 .chnav 의 sticky 를 살리려는 것인데
     그 칩 바는 위에서 display: none 이라 인쇄에서는 풀어도 잃는 것이 없다. */
  .page--reading .reading-col { overflow: visible; min-height: 0; }
  .page--reading .scroll-x { overflow: visible; }
  /* 접힌 문답을 여는 것은 followup.js 의 beforeprint 다(§6-1) — 닫힌 details 안쪽은 UA 가
     접는 것이라 일반 CSS 로는 못 편다. 아래 줄은 JS 부재 시 크로뮴만 건지는 보조. */
  .page--reading .ask-item > details::details-content { content-visibility: visible; block-size: auto; }
  /* .ask-q 는 자기 color 를 직접 선언한다 — 토큰을 안 갈면 흰 종이에 크림 글씨(1.05:1)로 찍힌다.
     블록 전체가 var() 로 짜여 있으므로 .ask 에서 토큰만 종이값으로 갈면 전부 따라온다. */
  .page--reading .ask {
    --r-ink: #1b1a19;
    --r-muted-2: #5b5754;
    --r-line: #ded6c9;
    --r-accent: #7a2f2f;
    --r-accent-lit: #7a2f2f;
    color: #1b1a19;
  }
  .page--reading .ask-q,
  .page--reading [open] .ask-q { background: none; }
  /* 종이에는 누를 것이 없고, 접힌 문답도 beforeprint 가 이미 폈다 — 모서리·커서·줄 제한을 뺀다. */
  .page--reading .ask-q { cursor: auto; }
  .page--reading details:not([open]) .ask-qt { display: inline; overflow: visible; }
  .page--reading .ask-item details::after,
  .page--reading .ask-item details::before { display: none; }
}