/* 나무 정통사주 운세 — 모바일 우선 스타일
 *
 * ★ 주 사용자층에 중장년이 포함된다 (설계 v2.0 §3.3 · §21).
 *   기본 폰트 17px · 대비 4.5:1 이상 · 터치 타깃 44px 이상 · 확대 허용.
 * ★ 이모지를 쓰지 않는다. 아이콘이 필요하면 인라인 SVG.
 * ★ 색상: 헬퍼비 브라우저 팔레트가 아니라 이 제품의 독립 브랜드다.
 *   금지된 tailwind 계열 파랑(#3b82f6 · #7dd3fc · #60a5fa · #93c5fd)은 쓰지 않는다.
 */

:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-2: #f3efe7;
  --line: #ddd5c7;
  --line-strong: #c4b8a3;

  --ink: #23201b;
  --ink-2: #4a453c;
  --ink-3: #6f6759;

  --accent: #2f5d4a;          /* 나무 · 깊은 녹 */
  --accent-hover: #24483a;
  --accent-soft: #e6efe9;
  --accent-ink: #ffffff;

  --wood: #8a6a3d;
  --wood-soft: #f2e9dc;

  --wd-wood: #4f7a4a;
  --wd-fire: #a4443c;
  --wd-earth: #9a7b3a;
  --wd-metal: #6b7076;
  --wd-water: #3a5a78;

  --grade-1: #e8e2d6;
  --grade-2: #d6cfbe;
  --grade-3: #b9c9b6;
  --grade-4: #8fb08c;
  --grade-5: #5e9160;

  /* ★ 2026-08-30 — 토큰 밖에 흩어져 있던 색 리터럴을 여기로 모은다.
     ★ 이 값들이 토큰 밖에 있으면 팔레트를 바꿀 때 ★ 정확히 이 자리들만 안 따라온다. */
  --accent-line: #cfe0d6;
  --wood-line: #e2d3ba;
  --wood-ink: #5c4726;
  --err-bg: #fbeceb;
  --err-line: #e8c6c3;
  --err-ink: #8b3a34;
  --grade-5-ink: #ffffff;
  --bg-blur: rgba(250, 247, 242, .96);
  /* ★ 오행 원판의 글자색. `fill: #fff` 로 박혀 있던 ★ 유일한 토큰 밖 색이었다.
     어두운 모드에서는 조각색이 밝아지므로 이 값이 ★ 반대로 뒤집혀야 한다. */
  --on-el: #ffffff;

  /* ★★ 화살표 두 개 — 데이터 URI 안에 색이 ★ `%23` 로 인코딩돼 있어
     `#` 를 찾는 grep 에 ★ 한 번도 안 걸렸다. 토큰 밖 색을 셀 때 이 표기를 함께 세라.
     ★ 안 옮겼으면 어두운 모드에서 생년월일 드롭다운 화살표가 ★ 안 보였다. */
  --sel-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236f6759' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  --why-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232f5d4a' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");

  --radius: 12px;
  --pad: 16px;
  --maxw: 720px;
  --shadow: 0 1px 3px rgba(35, 32, 27, .08), 0 4px 16px rgba(35, 32, 27, .05);

  /* ★★ 브라우저가 그리는 것들(select 목록·스크롤바·기본 폼)까지 함께 따라오게 한다.
     이 한 줄이 없으면 ★ 배경만 어두워지고 생년월일 드롭다운은 흰 목록으로 뜬다. */
  color-scheme: light dark;
}

/* ══════════════════════════════════════════════════════════════
   어두운 모드 (2026-08-31)

   ★★★ 토큰만 뒤집는다. 규칙(선택자)은 ★ 한 줄도 늘리지 않는다 —
     규칙을 늘리면 밝은 모드와 어두운 모드가 ★ 두 벌의 레이아웃이 되고,
     한쪽만 고쳐지는 순간부터 조용히 갈라진다.

   ★★ 그래서 색 리터럴이 토큰 밖에 있으면 안 된다. 착수 전 실측:
     app.css 안 토큰 밖 색 = `.el-wheel .ew-ko { fill:#fff }` ★ 하나뿐 → 토큰(--on-el)으로 옮겼다.
     app.js 안 색 리터럴 = ★ 0건 (SVG 도 전부 CSS 로 칠한다).

   ★ 사용자가 고르는 스위치는 두지 않는다. 기기 설정을 따른다 —
     스위치를 두면 저장할 자리가 생기고, 그 자리는 기기마다 갈린다.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    /* 종이 대신 ★ 따뜻한 먹빛. 순검정을 쓰지 않는다 — 나무·종이 브랜드가 사라진다 */
    --bg: #14130f;
    --surface: #1e1c17;
    --surface-2: #262319;
    --line: #3a352b;
    --line-strong: #554e40;

    /* ★ 중장년 사용자 기준 대비 4.5:1 이상 (설계 §21) */
    --ink: #f0ece3;
    --ink-2: #cfc8ba;
    --ink-3: #a89f8e;

    /* ★ 강조는 ★ 반대로 밝아진다. 어두운 바탕에서 #2f5d4a 는 글자로 못 읽는다 */
    --accent: #7fbfa2;
    --accent-hover: #9ad3b8;
    --accent-soft: #1f3830;
    --accent-ink: #10201a;        /* ★ 강조 위 글자 — 밝은 녹 위이므로 ★ 어두워야 한다 */
    --accent-line: #35564a;

    --wood: #c9a06a;
    --wood-soft: #2b2318;
    --wood-line: #4a3c28;
    --wood-ink: #e0c79c;

    --wd-wood: #7fbf77;
    --wd-fire: #e2756c;
    --wd-earth: #d7ab5c;
    --wd-metal: #a9b2ba;
    --wd-water: #74a4d4;

    --grade-1: #2a2721;
    --grade-2: #35342a;
    --grade-3: #3c5340;
    --grade-4: #4d7a52;
    --grade-5: #6ba871;
    --grade-5-ink: #0f1a10;

    --err-bg: #35201e;
    --err-line: #5c322e;
    --err-ink: #f0a9a2;

    --bg-blur: rgba(20, 19, 15, .94);
    --on-el: #14130f;             /* ★ 조각색이 밝아졌으므로 글자는 어둡게 */

    /* ★ 화살표도 함께 뒤집는다 — 안 뒤집으면 어두운 바탕에 어두운 화살표가 남는다 */
    --sel-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a89f8e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    --why-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237fbfa2' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");

    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .34);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
               "Noto Sans KR", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ── 헤더 ── */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-blur);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
header.site .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 700; }
.brand svg { flex: none; }
.brand .name { font-size: 18px; letter-spacing: -.02em; }
.brand .sub { font-size: 12px; color: var(--ink-3); font-weight: 500; }
header.site nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 17px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ── 카드 ── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin: 16px 0;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; }
.card h3 { margin: 20px 0 8px; font-size: 17px; color: var(--ink-2); }
.card > p:first-of-type { margin-top: 4px; }

.muted { color: var(--ink-3); font-size: 15px; }
.tiny { font-size: 14px; color: var(--ink-3); }

/* ── 히어로 ── */
.hero { padding: 32px 0 8px; text-align: center; }
.hero h1 { margin: 0 0 12px; font-size: 30px; line-height: 1.35; letter-spacing: -.03em; }
.hero p { margin: 0 auto 20px; max-width: 480px; color: var(--ink-2); }
.hero .btn { min-width: 240px; }

/* ── 폼 ── */
.field { margin: 18px 0; }
.field > label, .field > .label {
  display: block; margin-bottom: 8px; font-weight: 600; font-size: 16px;
}
.field .hint { font-weight: 400; color: var(--ink-3); font-size: 14px; margin-left: 6px; }

select, input[type="text"], input[type="number"], input[type="email"], textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font-size: 17px; font-family: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px;
}
select { appearance: none; background-image: var(--sel-arrow); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

.row { display: flex; gap: 8px; }
.row > * { flex: 1; min-width: 0; }

.seg { display: flex; gap: 0; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.seg button {
  flex: 1; min-height: 48px; padding: 0 8px; border: 0; border-right: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2); font-size: 16px; font-family: inherit; cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

details.more { margin: 16px 0; border-top: 1px solid var(--line); padding-top: 12px; }
details.more > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; }

/* ── 명식 ── */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.pillar { text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 4px; background: var(--surface-2); }
.pillar .pos { font-size: 13px; color: var(--ink-3); }
.pillar .gz { font-size: 30px; line-height: 1.25; font-weight: 600; margin: 4px 0 2px; }
.pillar .ko { font-size: 13px; color: var(--ink-3); }
.pillar.unknown .gz { color: var(--ink-3); font-size: 22px; }

.el-wood { color: var(--wd-wood); } .el-fire { color: var(--wd-fire); }
.el-earth { color: var(--wd-earth); } .el-metal { color: var(--wd-metal); }
.el-water { color: var(--wd-water); }

.bars { margin: 12px 0; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.bar-row .nm { width: 42px; font-size: 15px; flex: none; }
.bar-row .track { flex: 1; height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 6px; }
.bar-row .val { width: 52px; text-align: right; font-size: 14px; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }

/* ★ 라벨이 "나 자신 (일간)" 처럼 길어져 92px 로는 줄바꿈된다 (2026-08-25 실측).
 *   모바일에서는 아예 위아래로 쌓는다. */
.kv { display: grid; grid-template-columns: 1fr; gap: 2px 12px; margin: 12px 0; font-size: 16px; }
.kv dt { color: var(--ink-3); font-size: 14px; }
.kv dd { margin: 0 0 10px; }
@media (min-width: 520px) {
  .kv { grid-template-columns: 190px 1fr; gap: 8px 12px; }
  .kv dt { font-size: 16px; }
  .kv dd { margin: 0; }
}

.chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 600;
  border: 1px solid var(--accent-line);
}
.chip.warn { background: var(--wood-soft); color: var(--wood); border-color: var(--wood-line); }
/* ★ 원어 병기 — 평이한 이름이 주(主), 원어는 보조. 크기·굵기·색으로 위계를 만든다 */
.chip .rd { margin-left: 6px; font-size: 12px; font-weight: 400; opacity: .72; }

.notice {
  background: var(--wood-soft); border: 1px solid var(--wood-line); border-left: 4px solid var(--wood);
  border-radius: 8px; padding: 12px 14px; margin: 14px 0; font-size: 15px; color: var(--wood-ink);
}
.disclaimer {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; margin: 14px 0; font-size: 15px; color: var(--ink-2);
}

/* ── 리포트 ── */
.sec { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.sec > h3 { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.item { margin: 14px 0 18px; }
.item .seed { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.item .guid { margin: 0 0 6px; color: var(--ink-2); }
.item .caut { margin: 6px 0 0; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; font-size: 15px; color: var(--ink-2); }
/* ── 근거 열기 ──
 * ★ 이 서비스의 차별점이 "근거를 함께 낸다"는 것인데, 회색 텍스트로 두면 눌러볼 생각을 못 한다.
 *   테두리 + 배경 + 화살표로 "누를 수 있는 것"임을 분명히 한다. 터치 타깃 48px.
 */
.item .why { margin-top: 10px; font-size: 15px; }
.item .why > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface-2); color: var(--accent);
  font-weight: 600; cursor: pointer;
  list-style: none;
  transition: background .12s ease;
}
.item .why > summary::-webkit-details-marker { display: none; }
.item .why > summary::marker { content: ""; }
.item .why > summary::after {
  content: ""; margin-left: auto; width: 12px; height: 8px; flex: none;
  background: var(--why-caret) no-repeat center;
  transition: transform .15s ease;
}
.item .why > summary:hover { background: var(--accent-soft); }
.item .why[open] > summary { border-radius: 10px 10px 0 0; background: var(--accent-soft); }
.item .why[open] > summary::after { transform: rotate(180deg); }
.item .why .why-body {
  border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 10px 10px;
  padding: 12px 14px; background: var(--surface);
}
.item .why .why-fact { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.item .why ol { margin: 0; padding-left: 20px; color: var(--ink-3); font-size: 14px; }
.item .why ol li { margin: 3px 0; }
.item .acts { display: flex; gap: 6px; margin-top: 8px; }
.item .acts button { min-height: 36px; padding: 0 10px; font-size: 14px; background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink-3); cursor: pointer; font-family: inherit; }
.item .acts button:hover { background: var(--surface-2); }
.empty { color: var(--ink-3); font-size: 15px; padding: 8px 0; }

/* ── 캘린더 ── */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 12px 0; }
.cal .dow { text-align: center; font-size: 13px; color: var(--ink-3); padding: 4px 0; }
.cal .day {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; background: var(--surface); position: relative;
}
.cal .day.g1 { background: var(--grade-1); } .cal .day.g2 { background: var(--grade-2); }
.cal .day.g3 { background: var(--grade-3); } .cal .day.g4 { background: var(--grade-4); }
.cal .day.g5 { background: var(--grade-5); color: var(--grade-5-ink); }
.cal .day.blank { border: 0; background: transparent; cursor: default; }
.cal .day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
/* ★ 절기 경계선 자체가 콘텐츠다. 경쟁 서비스는 이걸 뭉갠다 (§17.3) */
.cal .day.term::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 0; height: 3px;
  background: var(--wood); border-radius: 2px;
}
.cal .day .t { font-size: 10px; color: var(--wood); position: absolute; bottom: 2px; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-3); margin: 8px 0; align-items: center; }
.legend .sw { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); vertical-align: -3px; margin-right: 4px; }

.timeline { display: flex; flex-wrap: wrap; gap: 3px; margin: 12px 0; }
.timeline .yr {
  width: calc(10% - 3px); aspect-ratio: 1.1; border-radius: 6px; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer;
}
.timeline .yr.g1 { background: var(--grade-1); } .timeline .yr.g2 { background: var(--grade-2); }
.timeline .yr.g3 { background: var(--grade-3); } .timeline .yr.g4 { background: var(--grade-4); }
.timeline .yr.g5 { background: var(--grade-5); color: var(--grade-5-ink); }
.timeline .yr.now { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── 궁합 4축 ── */
.axes { margin: 16px 0; }
.axis-row { margin: 10px 0; }
.axis-row .top { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 4px; }
.axis-row .track { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.axis-row .fill { height: 100%; background: var(--accent); border-radius: 7px; }
.axis-row.friction .fill { background: var(--wood); }
.pair-label { text-align: center; font-size: 24px; font-weight: 700; margin: 12px 0; color: var(--accent); }

/* ── 표 ── */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { color: var(--ink-3); font-weight: 600; font-size: 14px; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 상태 ── */
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.err { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-ink); border-radius: 8px; padding: 12px 14px; margin: 14px 0; font-size: 15px; }
.ok-msg { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); border-radius: 8px; padding: 12px 14px; margin: 14px 0; font-size: 15px; }

/* ── 푸터 ── */
footer.site { border-top: 1px solid var(--line); margin-top: 40px; padding: 24px 0 40px; font-size: 14px; color: var(--ink-3); }
footer.site a { color: var(--ink-2); }
footer.site .links { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
footer.site .links a { min-height: 32px; display: inline-flex; align-items: center; }

.hidden { display: none !important; }

/* ── 문서 페이지 ── */
.doc h1 { font-size: 26px; margin: 24px 0 8px; }
.doc h2 { font-size: 19px; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul, .doc ol { padding-left: 22px; }

@media (min-width: 600px) {
  .hero h1 { font-size: 36px; }
  .pillar .gz { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 용어 풀이 행 (설계 §26.2) ──
 * [평이한 이름 (원어)] + 값 + 아래 한 줄 설명.
 * ★ 설명을 접어두지 않는다. 접으면 안 펴본다.
 */
.card-note {
  margin: 4px 0 16px; padding: 10px 12px;
  background: var(--surface-2); border-radius: 8px;
  font-size: 15px; color: var(--ink-2); line-height: 1.65;
}
.ex-row { padding: 14px 0; border-top: 1px solid var(--line); }
.ex-row:first-of-type { border-top: 0; padding-top: 4px; }
.ex-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ex-label { font-size: 16px; font-weight: 700; color: var(--ink); }
.ex-term { font-size: 14px; color: var(--ink-3); }
.ex-value { margin: 4px 0 6px; font-size: 19px; font-weight: 600; color: var(--accent); letter-spacing: -.01em; }
.ex-desc { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.ex-row .notice { margin: 8px 0 0; }


/* ── v2.3 — 일주 카드 · 십이운성 · 신살/귀인 · 주제 · 잠금카드 · 질문 ── */

.dp-card { border:1px solid var(--line); border-radius:12px; padding:18px 16px; margin:0 0 16px; background:var(--card2); }
.dp-gz { font-size:2rem; font-weight:700; letter-spacing:.06em; margin:0 0 4px; }
.dp-gz .rd { font-size:1rem; font-weight:400; color:var(--muted); margin-left:6px; }
.dp-head { font-size:1.05rem; margin:0 0 12px; }
.dp-axes { margin:0; }
.dp-axes .ax { display:grid; grid-template-columns:1fr; gap:2px; padding:10px 0; border-top:1px solid var(--line); }
.dp-axes .ax .t { font-size:.85rem; color:var(--muted); }
.dp-axes .ax .v { font-weight:600; }
.dp-axes .ax .n { font-size:.9rem; color:var(--muted); }

.stage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:8px 0 4px; }
.stage-cell { border:1px solid var(--line); border-radius:10px; padding:10px 6px; text-align:center; }
.stage-cell .pos { font-size:.75rem; color:var(--muted); display:block; }
.stage-cell .band { font-weight:700; font-size:.95rem; display:block; margin:4px 0 2px; }
.stage-cell .han { font-size:.75rem; color:var(--muted); }
.stage-cell[data-band="peak"] { border-color:var(--accent); }

.axis-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0; }
.axis-row .axis-name { font-size:.85rem; color:var(--muted); min-width:6.5em; }

.gwiin-list { margin:6px 0 0; }
.gwiin-list .g { padding:8px 0; border-top:1px solid var(--line); }
.gwiin-list .g .nm { font-weight:600; }
.gwiin-list .g .rd { color:var(--muted); font-size:.85rem; margin-left:4px; }
.gwiin-list .g .pl { color:var(--muted); font-size:.9rem; }

.topic-nav { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.topic-nav button { border:1px solid var(--line); background:transparent; border-radius:999px; padding:6px 12px; font:inherit; cursor:pointer; }
.topic-nav button[aria-pressed="true"] { border-color:currentColor; font-weight:700; }
.topic-state { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 10px; font-size:.9rem; color:var(--muted); }

.locked { border:1px dashed var(--line); border-radius:10px; padding:12px 14px; margin:10px 0; }
.locked .lk-h { font-weight:600; margin:0 0 4px; }
.locked .lk-b { color:var(--muted); font-size:.92rem; margin:0; }

.med-notice { border:1px solid var(--warn-line); border-radius:8px; padding:10px 12px; margin:0 0 12px; font-size:.92rem; }

.ask-form textarea { width:100%; min-height:88px; font:inherit; padding:10px; border:1px solid var(--line); border-radius:10px; background:transparent; color:inherit; box-sizing:border-box; }
.ask-verdict { margin:10px 0; font-size:.92rem; }
.ask-alt { margin:8px 0 0; padding-left:18px; }
.ask-alt li { margin:4px 0; }
.ask-answer p { margin:8px 0; }

@media (max-width:520px) { .stage-grid { grid-template-columns:repeat(2,1fr); } }

/* ── 상담 대화 (설계 v2.7 §35.4) ──
 * ★ 중장년 가독성 기준을 그대로 상속한다. 말풍선 글자도 17px 밑으로 내리지 않는다.
 */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.consult-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin: 8px 0 12px;
}
.consult-head h2 { margin: 0 0 2px; }
.consult-head .tiny { margin: 0; }

.chat {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 12px;
  /* 화면 높이에 맞춰 늘린다. 모바일에서 입력창이 가려지지 않게 여유를 둔다 */
  min-height: 46vh;
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.msg { display: flex; margin: 0 0 12px; }
.msg-bot { justify-content: flex-start; }
.msg-me { justify-content: flex-end; }

.msg .bubble {
  max-width: 85%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-bot .bubble {
  background: var(--surface-2);
  color: var(--ink);
  border-top-left-radius: 4px;
}
.msg-me .bubble {
  background: var(--accent);
  color: var(--accent-ink);
  border-top-right-radius: 4px;
}
.msg .bubble.typing { color: var(--ink-3); }

/* ── 타이핑 표시 ──
 * ★ 점 세 개가 차례로 오르내린다. 채팅창의 관습이라 설명이 필요 없다.
 *   첫 문장까지 10~20초가 걸리는데, 그동안 정지해 보이면 사용자는 고장으로 읽는다.
 * ★ 문장이 도착한 뒤에도 글자 뒤에 남겨 "계속 쓰는 중"을 보인다. done 에서 걷어낸다.
 */
.dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 1em;
  vertical-align: baseline;
}
.dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: dotBounce 1.25s ease-in-out infinite;
}
.dots .dot:nth-child(2) { animation-delay: .18s; }
.dots .dot:nth-child(3) { animation-delay: .36s; }

@keyframes dotBounce {
  0%, 62%, 100% { transform: translateY(0);     opacity: .30; }
  28%           { transform: translateY(-5px);  opacity: .95; }
}

/* ★ 모션을 줄이도록 설정한 사용자에게는 튀지 않게 한다.
   그래도 "쓰는 중" 은 알아야 하므로 밝기만 번갈아 바꾼다 (§21 접근성). */
@media (prefers-reduced-motion: reduce) {
  /* ★★ animation 단축 속성은 animation-delay 를 0 으로 ★ 되돌린다.
     그래서 위에서 준 .18s / .36s 가 사라지고 세 점이 ★ 동시에 깜빡였다 —
     순차 효과가 없으니 "쓰는 중" 으로 안 읽히고 멈춘 것처럼 보인다 (실측 2026-08-26).
     ★ 여기서 delay 를 다시 준다. */
  .dots .dot { animation: dotFade 1.4s ease-in-out infinite; }
  .dots .dot:nth-child(2) { animation-delay: .22s; }
  .dots .dot:nth-child(3) { animation-delay: .44s; }
  @keyframes dotFade {
    0%, 100% { opacity: .18; }
    50%      { opacity: 1; }
  }
}

/* 말풍선에 접어 붙는 근거 */
.msg .why-inline { margin: 6px 0 0 4px; font-size: 14px; }
.why-inline summary { color: var(--ink-3); cursor: pointer; padding: 4px 0; }
.why-inline .why-body { margin: 4px 0 0; padding-left: 18px; color: var(--ink-2); }
.why-inline .why-body li { margin: 3px 0; line-height: 1.6; }
.msg-bot { flex-direction: column; align-items: flex-start; }

.alts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.alts .alt {
  font: inherit; font-size: 15px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  border-radius: 999px; padding: 10px 14px; min-height: 44px; text-align: left;
}

.chat-input { display: flex; gap: 8px; margin: 12px 0 0; align-items: flex-end; }
.chat-input textarea {
  flex: 1; font: inherit; font-size: 17px; line-height: 1.6;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: inherit; box-sizing: border-box; resize: vertical;
}
.chat-input .btn { min-height: 48px; white-space: nowrap; }

.chat-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 24px;
}
.chat-actions .tiny { margin: 0; }

/* ── 상세 풀이 · 사실 원장 (§35.2) ── */

.narrative-body, .detail-body {
  font-size: 17px; line-height: 1.85; color: var(--ink); margin: 8px 0 0;
}
/* ★ 절의 머리 문장 — 읽기 시작하는 자리를 만든다 (2026-09-02).
   ★ 문단을 나누기만 하면 어디부터 읽을지가 없다. 첫 문장이 그 자리다. */
.detail-lead {
  font-size: 17.5px; line-height: 1.8; color: var(--ink);
  margin: 10px 0 0; font-weight: 600;
}
.detail-body + .detail-body { margin-top: 12px; }

/* ★ 아래까지 읽고 나면 다음으로 갈 자리 (2026-09-02) */
.tab-foot {
  display: flex; gap: 8px; margin: 22px 0 0;
}
.tab-foot .btn { flex: 1; }
.tab-foot-rest {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
}
.linkish {
  font: inherit; font-size: inherit; background: none; border: 0; padding: 0;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}

.facts-card > summary {
  cursor: pointer; font-weight: 700; padding: 6px 0; min-height: 44px;
  display: flex; align-items: center;
}
.facts-group { margin: 0 0 10px; }
.facts-row {
  display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.6;
}
.facts-label { flex: 0 0 42%; color: var(--ink-3); }
.facts-value { flex: 1; color: var(--ink); word-break: break-word; }

/* ── 선택 입력 칩 · 동의 ── */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  font: inherit; font-size: 16px; cursor: pointer; min-height: 44px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  border-radius: 999px; padding: 8px 16px;
}
.chips button[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent); font-weight: 700;
}

.consent .check {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer; font-size: 16px;
}
.consent .check input { width: 20px; height: 20px; }
.consent .tiny { margin: 6px 0 0; }

/* 개인정보 동의 문안 (§39.2)
 * ★ 줄바꿈이 의미를 갖는 문서다. 접거나 줄이지 않는다 — 동의는 읽고 하는 것이다. */
.consent-text {
  white-space: pre-wrap;
  word-break: keep-all;
  font: inherit;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0 0;
  max-height: 46vh;
  overflow-y: auto;
}

/* 상담 기록 — 지난 대화 열어보기 (2026-08-27)
   ★ 서버에 GET /consult/:id 가 있었는데 화면이 부른 적이 없었다. */
.consult-replay {
  margin-top: 10px;
  padding: 10px;
  border-left: 3px solid var(--line);
  background: var(--surface-2);
  border-radius: 6px;
  max-height: 420px;
  overflow-y: auto;
}
.consult-replay .msg { margin: 4px 0; }
.consult-replay .bubble { font-size: 0.92rem; }

/* 텔레그램 1일 운세 알림 (2026-08-28) */
.tg-howto {
  margin-top: 12px; padding: 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2);
}
.tg-howto p { margin: 4px 0; }
.tg-howto .btn { display: inline-block; margin: 8px 8px 4px 0; text-decoration: none; }
#telegramBox .row { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
#telegramBox select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }

/* ── 십신 분포 (2026-08-28 신설) ─────────────────────────
   ★ 계산은 처음부터 있었는데 화면이 안 그렸다. */
.sipsin-legend { margin-top: 10px; display: grid; gap: 6px; }
.sipsin-legend .sl { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; }
.sipsin-legend .k { font-weight: 600; color: var(--accent); font-size: 14px; }
.sipsin-legend .d { color: var(--muted); font-size: 13px; line-height: 1.5; }

.sipsin-grid {
  margin-top: 8px; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.sipsin-grid .sc {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
/* ★ 없는 성분도 지우지 않고 흐리게 남긴다 — 없는 것도 정보다 */
.sipsin-grid .sc[data-empty="yes"] { opacity: .5; border-style: dashed; }
.sipsin-grid .nm { font-weight: 600; font-size: 13px; }
.sipsin-grid .vl { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.sipsin-grid .dm {
  font-size: 11px; color: var(--wood); background: var(--wood-soft);
  border-radius: 4px; padding: 1px 5px;
}

.palace-grid {
  margin-top: 8px; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.palace-grid .pc {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.palace-grid .ps { font-weight: 700; font-size: 13px; color: var(--accent); }
.palace-grid .st, .palace-grid .br { font-size: 13px; }
.palace-grid .gm { font-size: 11px; color: var(--muted); }

/* ── 상품 · 결제 (2026-08-28 신설) ───────────────────── */
.card.product .desc { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin: 10px 0 14px; }
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.price-row .list { color: var(--ink-3); text-decoration: line-through; font-size: 15px; }
.price-row .off { color: var(--wd-fire); font-weight: 700; font-size: 15px; }
.price-row .now { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.price-row .per { color: var(--ink-3); font-size: 15px; }

.paymethods { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.paymethods .lb { color: var(--ink-3); font-size: 14px; margin-right: 4px; }
/* ★ 심사가 "결제수단 내 신용카드 확인" 을 본다 — 라벨을 그림으로 감추지 않는다.
   헬퍼비에서 text-indent:-9999px + ::before 아이콘 때문에 글자가 안 보여 문제가 됐다. */
.pay-opt {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer;
}
.pay-opt input { width: 18px; height: 18px; }
.pay-opt .pm-name { font-size: 16px; font-weight: 600; text-indent: 0; }

/* ★ 하단 사업자정보 — 심사 항목 ① */
.biz-footer { line-height: 1.8; color: var(--ink-3); }
.biz-footer a { color: inherit; }

/* ── 당사주 원어 (2026-08-28) ─────────────────────────
   ★ 옛 이름의 글자 뜻과 옛 책의 분류를 밝힌다.
   숨기는 것처럼 보이는 것이 숨기는 것보다 나쁘다. */
.dang-origin {
  margin: -4px 0 14px; padding: 8px 12px;
  border-left: 2px solid var(--line-strong);
  background: var(--surface-2); border-radius: 0 8px 8px 0;
  font-size: 14px; color: var(--ink-3); line-height: 1.6;
}
.dang-origin .ok {
  display: inline-block; margin-right: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); text-transform: none;
}
/* ★ 옛 판정은 ★ 우리 판정이 아니다 — 색으로 강조하지 않는다.
   길흉을 색으로 칠하면 우리가 그 판정을 채택한 것처럼 읽힌다. */
.dang-origin .vd {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 11px; color: var(--ink-3);
}

/* ══════════════════════════════════════════════════════════════
   2026-08-30 — 세 줄 요약 · 한 장면 · 흐름 · FAQ · 궁합 퍼센트 · 오늘 보탤 것
   ══════════════════════════════════════════════════════════════ */

/* ★★ 먼저 — 정의 없이 쓰이던 토큰 3개를 채운다.
   CSS 는 값이 없으면 ★ 에러 없이 그 선언을 버리고, color 는 상속 속성이라
   ★ 부모 색을 그대로 물려받는다. 실측(2026-08-30): 13곳이 --ink-3 회색 대신
   본문색(#23201b)으로 렌더되고 있었다 — 원어 병기의 위계가 통째로 죽어 있었다. */
:root {
  --muted: var(--ink-3);
  --card2: var(--surface);
  --warn-line: var(--wood);
}

/* ── 먼저 읽는 세 줄 ── */
.summary3 ol.three { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.summary3 ol.three li {
  counter-increment: t; display: grid; grid-template-columns: auto 1fr;
  gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--line);
}
.summary3 ol.three li:first-child { border-top: 0; }
.summary3 ol.three li::before {
  content: counter(t); grid-row: span 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}
.summary3 .chip { justify-self: start; }
.summary3 .body { font-size: 15px; line-height: 1.65; }

/* ── 한 장면 ── */
.imagery .pic {
  font-size: 19px; font-weight: 700; line-height: 1.5;
  margin: 0 0 14px; color: var(--accent);
}
.img-two { display: grid; gap: 10px; }
@media (min-width: 560px) { .img-two { grid-template-columns: 1fr 1fr; } }
.img-cell {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 3px;
}
.img-cell .t { font-size: 12px; color: var(--muted); }
.img-cell strong { font-size: 18px; }
.img-cell .n { font-size: 13px; color: var(--muted); }
.img-cell .q { font-size: 13px; font-style: italic; color: var(--wood); margin-top: 2px; }
.img-pillars { margin-top: 12px; }
.img-pillars .ax {
  display: grid; grid-template-columns: minmax(7em, auto) auto 1fr; gap: 4px 10px;
  padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.img-pillars .ax .t { font-size: 13px; color: var(--muted); }
.img-pillars .ax .v { font-weight: 700; }
.img-pillars .ax .n { font-size: 13px; color: var(--muted); }

/* ── 인생의 큰 흐름 ── */
.flow-list { margin-top: 6px; }
.flow-row {
  /* ★ 간지 칸은 '癸亥(계해)' 가 한 줄에 들어가야 한다 — 실측에서 줄바꿈됐다 */
  display: grid; grid-template-columns: 5.5em 7.5em 1fr auto; gap: 4px 10px;
  padding: 9px 8px; border-top: 1px solid var(--line);
  align-items: baseline; border-radius: 8px;
}
.flow-row.now { background: var(--accent-soft); border-top-color: var(--accent); }
.flow-row .age { font-variant-numeric: tabular-nums; font-size: 14px; }
.flow-row .gz { font-weight: 700; }
.flow-row .pic { font-size: 13px; color: var(--muted); }
.flow-row .role { font-size: 13px; color: var(--ink-2); }
.chip.now { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (max-width: 559px) {
  .flow-row { grid-template-columns: 5.5em 1fr; }
  .flow-row .pic, .flow-row .role { grid-column: 1 / -1; }
}

/* ── FAQ ── */
.faq-item { border-top: 1px solid var(--line); padding: 4px 0; }
.faq-item summary {
  cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 15px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: 'Q. '; color: var(--accent); font-weight: 700; }
.faq-item p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }

/* ── 궁합 퍼센트 ── */
.pair-dial { text-align: center; margin: 6px 0 18px; }
.pair-dial .num {
  font-size: 46px; font-weight: 800; line-height: 1.05;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.pair-dial .lab { font-size: 16px; font-weight: 600; margin-top: 2px; }
.axes .axis-row .top { display: flex; align-items: baseline; gap: 8px; }
.axes .axis-row .top .pct {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700;
}
.match-box {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin: 14px 0; background: var(--surface-2);
}
.match-box h3 { margin: 0 0 6px; font-size: 15px; }
.match-box p { margin: 0 0 6px; font-size: 14px; line-height: 1.7; }

/* ── 오늘 보탤 것 ── */
.boost-box {
  border: 1px solid var(--accent-line); border-radius: 10px;
  padding: 12px 14px; margin: 14px 0; background: var(--accent-soft);
}
.boost-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.boost-head .t { font-size: 12px; color: var(--ink-2); }
.boost-head strong { font-size: 16px; color: var(--accent); }
.boost-grid { display: grid; gap: 8px; margin: 10px 0 6px; }
@media (min-width: 560px) { .boost-grid { grid-template-columns: 1fr 1fr; } }
.boost-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; display: flex; flex-direction: column; gap: 2px;
}
.boost-cell .t { font-size: 12px; color: var(--muted); }
.boost-cell .v { font-size: 14px; line-height: 1.6; }
/* ★ "미뤄도 되는 것" 은 금지가 아니다. 빨강을 쓰지 않는다 — 경고로 읽힌다 */
.boost-cell.later { background: var(--wood-soft); border-color: var(--wood-line); }

/* ── 절 앞 칩 ── */
.sec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }

/* ══════════════════════════════════════════════════════════════
   이야기 형식 · 그림 · 상담자  (2026-08-31)
   ══════════════════════════════════════════════════════════════ */

/* ── 제목(훅) ── ★ 이야기의 머리. 세 줄 요약보다 앞에 온다 */
.story-head { background: var(--surface-2); border-color: var(--line-strong); }
.story-title {
  margin: 0 0 8px; font-size: 22px; line-height: 1.4; letter-spacing: -.01em;
  color: var(--ink);
}
.story-sub { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
@media (min-width: 560px) { .story-title { font-size: 25px; } }

/* ── 흐름 서술 ── 표 앞에 놓이는 문장 */
.flow-story { margin: 0 0 14px; }
.flow-story p {
  margin: 0 0 8px; font-size: 15px; line-height: 1.75; color: var(--ink-2);
}
.flow-story p:last-child {
  color: var(--ink-3); font-size: 14px;
  border-left: 3px solid var(--line); padding-left: 10px;
}

/* ══ 그림 ══════════════════════════════════════════════════════
   ★ 장식이 아니다. 같은 내용을 글·막대로 이미 볼 수 있고, 그림은 한눈에 보이게만 한다.
   ★ 가로로 넘치면 그림 안에서 스크롤한다 — 본문이 가로로 밀리면 안 된다. */
.fig { margin: 16px 0 6px; overflow-x: auto; }
.fig svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.fig-cap {
  margin: 8px auto 0; max-width: 420px; text-align: center;
  font-size: 13px; line-height: 1.7; color: var(--ink-3);
}

/* 오행 배경색 — SVG 노드 채움. 글자색(.el-*)과 짝을 이룬다 */
.el-bg-wood { fill: var(--wd-wood); } .el-bg-fire { fill: var(--wd-fire); }
.el-bg-earth { fill: var(--wd-earth); } .el-bg-metal { fill: var(--wd-metal); }
.el-bg-water { fill: var(--wd-water); }

/* ① 명식 별자리 */
.star-map .sm-pos { font-size: 13px; fill: var(--ink-3); }
.star-map .sm-dot { opacity: .16; }
.star-map .sm-dot.sm-empty { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 3; opacity: 1; }
.star-map .sm-ch { font-size: 24px; font-weight: 600; }
.star-map .sm-ch.el-wood { fill: var(--wd-wood); } .star-map .sm-ch.el-fire { fill: var(--wd-fire); }
.star-map .sm-ch.el-earth { fill: var(--wd-earth); } .star-map .sm-ch.el-metal { fill: var(--wd-metal); }
.star-map .sm-ch.el-water { fill: var(--wd-water); }
.star-map .sm-unknown { fill: var(--ink-3); font-size: 20px; }
.star-map .sm-pillar { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.star-map .sm-link { stroke: var(--accent); stroke-width: 2; opacity: .55; stroke-linecap: round; }

/* ② 오행 도해 */
.el-wheel .ew-feed { stroke: var(--line-strong); stroke-width: 1.5; }
.el-wheel .ew-tame { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 5; opacity: .5; }
.el-wheel .ew-node { opacity: .82; }
.el-wheel .ew-node.ew-empty { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 3; opacity: 1; }
.el-wheel .ew-ko { font-size: 15px; font-weight: 700; fill: var(--on-el); }
.el-wheel .ew-ko.ew-none { fill: var(--ink-3); }
.el-wheel .ew-pct { font-size: 12px; fill: var(--ink-3); }

/* ③ 궁합 레이더 */
.pair-radar .pr-grid { stroke: var(--line); stroke-width: 1; }
.pair-radar .pr-grid.pr-outer { stroke: var(--line-strong); }
.pair-radar .pr-spoke { stroke: var(--line); stroke-width: 1; }
.pair-radar .pr-area { fill: var(--accent); fill-opacity: .18; stroke: var(--accent); stroke-width: 2; }
.pair-radar .pr-label { font-size: 13px; fill: var(--ink-2); font-weight: 600; }
.pair-radar .pr-val { font-size: 12px; fill: var(--ink-3); }

/* ══ 상담자 고르기 ═══════════════════════════════════════════
   ★ 갈리는 것은 말투뿐이다. 화면 문구가 그 사실을 직접 말한다. */
.persona-pick { margin: 14px 0 4px; }
.persona-pick h3 { margin: 0 0 4px; font-size: 15px; }
.persona-pick > .tiny { margin: 0 0 10px; }
.persona-row { display: grid; gap: 8px; }
@media (min-width: 560px) { .persona-row { grid-template-columns: 1fr 1fr; } }
.persona-card {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  min-height: 44px; padding: 11px 13px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; color: var(--ink-2);
}
.persona-card .nm { font-size: 16px; font-weight: 700; color: var(--ink); }
.persona-card .tg { font-size: 14px; }
.persona-card .nt { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.persona-card.on {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.persona-card.on .nm { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   진입점 — ★ 사용자의 말로 묻는다 (2026-08-31)

   ★★ 근거: 경쟁 10곳 실측에서 내용 상위 3곳은 ★ 예외 없이 상품명을
     사용자의 물음으로 쓴다 ("우리, 잘 맞을까요?").
     우리 탭 이름(사주·풀이·상세·영역별)은 ★ 우리가 쓰는 말이지 사용자의 말이 아니다.

   ★ 탭 이름은 ★ 건드리지 않는다 — 일곱 개가 한 줄에 들어가야 해서 짧아야 하고,
     이미 돌아가는 것을 이름만 바꾸면 얻는 것 없이 위험만 진다.
     바꾸는 것은 ★ 처음 들어오는 자리 하나다.
   ══════════════════════════════════════════════════════════════ */
.asks { display: grid; gap: 10px; margin: 0 0 16px; }
@media (min-width: 620px) { .asks { grid-template-columns: 1fr 1fr; } }

.ask {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  font-family: inherit; cursor: pointer;
  min-height: 44px; padding: 16px 16px 15px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.ask .q { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.ask .a { font-size: 14px; line-height: 1.65; color: var(--ink-3); }
.ask:hover { border-color: var(--line-strong); border-left-color: var(--accent-hover); }
.ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
   하단 탭바 — ★ 모바일 전용 (2026-08-31)

   ★★ 경쟁 10곳 전부가 갖고 있고 우리만 없었다. 손이 닿는 자리가 화면 아래다.
   ★ 이모지를 쓰지 않는다 (정책). 한자 글리프 + ★ 한글 라벨을 ★ 함께 둔다 —
     글리프만 두면 무슨 뜻인지 사용자가 알 방법이 없다.
     曆 만세력 · 日 오늘 · 談 상담 · 函 보관(내 정보)
   ★ 인계 메모의 후보는 日曆函神 이었으나 ★ 神(십신·귀신)은 상담을 가리키지 않아 談 으로 바꿨다.

   ★★★ 넓은 화면에서는 띄우지 않는다. 본문 컬럼이 560~720px 인데 화면 폭 전체를
     가로지르는 고정 막대를 두면 ★ 본문과 아무 관계 없는 띠가 된다.
   ══════════════════════════════════════════════════════════════ */
.tabbar { display: none; }

@media (max-width: 780px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--bg-blur);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 56px; padding: 7px 2px 8px;
    font-family: inherit; cursor: pointer;
    background: transparent; border: 0; color: var(--ink-3);
  }
  /* ★★ 아이콘은 인라인 SVG 다 (정책). 한자 글리프를 쓰면 글꼴에 따라 모양이 갈리고
     폰트가 없는 기기에서는 ★ 두부(□)가 된다. */
  .tabbar svg {
    width: 23px; height: 23px; display: block;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .tabbar .lb { font-size: 11.5px; line-height: 1.2; letter-spacing: -.02em; }
  .tabbar button[aria-current="page"] { color: var(--accent); }
  .tabbar button[aria-current="page"] svg { stroke-width: 2; }
  .tabbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  /* ★ 막대가 본문 마지막 줄을 가리지 않게 자리를 비운다.
     ★ 이 값이 없으면 하단 링크(약관·처리방침)가 ★ 영영 안 눌린다. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* ★★ 법정·결제 페이지(terms.html …)에는 ★ 막대가 없다 — 같은 app.css 를 쓸 뿐이다.
     그 페이지에서 이 여백은 ★ 아무것도 없는 빈 자리가 된다.

     ★★★ 방향을 ★ 일부러 이렇게 잡았다: 기본을 "여백 있음" 으로 두고 ★ 빼는 쪽을 :has 로 한다.
       :has 를 모르는 브라우저는 이 규칙 전체를 ★ 버리므로 → 여백이 ★ 남는다(= 빈 자리).
       반대로 짰으면(기본 0, 있을 때만 더하기) 같은 브라우저에서 ★ 막대가 본문을 덮는다.
       ★ 못 알아들었을 때 어느 쪽으로 틀릴지를 ★ 먼저 정한다. */
  body:not(:has(.tabbar)) { padding-bottom: 0; }

  /* ★ 동의 화면에서는 막대를 감춘다 — 동의를 묻는 화면이 빠져나갈 길을 넷이나 내밀면 안 된다 */
  body.no-tabbar .tabbar { display: none; }
  body.no-tabbar { padding-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════
   당사주 12천성 도상 (2026-08-31)

   ★★★ 손으로 짠 선화 SVG 다. AI 일러스트는 못 만들고 이모지는 금지다 —
     ★ 차선이 아니라 우리에게 맞는 선택이다(Co-Star 가 그림 0장으로 최고 평가).
     선화는 통일감이 높고 용량이 KB 단위이며 currentColor 로 테마를 그대로 따라온다.

   ★★ 도상은 ★ 씨앗(기질)을 그린다. 옛 이름(天厄·天破·天孤·天刃)을 그리지 않는다 —
     그리면 §9.3 톤 정책을 ★ 그림으로 어기는 셈이다.
   ══════════════════════════════════════════════════════════════ */

/* ★ 모든 인라인 도상 공통. `fill` 이 필요한 자리는 클래스로만 지정한다 */
svg .fillcur { fill: currentColor; stroke: none; }

.dang-figs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 16px 0 8px; padding: 14px 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.dang-fig { text-align: center; min-width: 0; }
.dang-fig .dg {
  width: 38px; height: 38px; margin: 0 auto 6px; display: block;
  fill: none; stroke: var(--accent);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.dang-fig .dg-none {
  width: 38px; height: 38px; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 20px;
  border: 1px dashed var(--line-strong); border-radius: 10px;
}
.dang-fig .dg-lb { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.dang-fig .dg-st { margin: 1px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.dang-fig .dg-sd { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

@media (max-width: 400px) {
  .dang-fig .dg, .dang-fig .dg-none { width: 32px; height: 32px; }
  .dang-fig .dg-sd { font-size: 11px; }
}

/* ★ 누를 수 있는 표 행 (2026-09-02) — 월 운세 표에서 그 달을 연다.
   ★ 누를 수 있다는 것이 보여야 한다. 전에는 핸들러도 표시도 없었다. */
.tbl tbody tr.rowlink { cursor: pointer; }
.tbl tbody tr.rowlink:hover { background: var(--surface-2); }
.tbl tbody tr.rowlink:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ★ 잠금 안내 (2026-09-03) — 오류 상자가 아니라 ★ 안내 카드다 */
.lock-card { text-align: left; padding: 18px 16px; }
.lock-card h3 { margin: 0 0 10px; font-size: 1.05rem; }
.lock-pillars {
  margin: 0 0 12px; font-size: 1.1rem; letter-spacing: .04em;
  word-break: keep-all;
}
.lock-body { margin: 0 0 10px; line-height: 1.65; word-break: keep-all; }
.lock-price { margin: 0 0 14px; font-weight: 600; }
.lock-actions { margin: 0 0 8px; }

/* ★ 잠금 안내 상자 — `.err`(빨강)를 쓰지 않는다. 잠긴 것은 고장이 아니다 */
.lock-wrap {
  margin-top: 14px; border: 1px solid var(--line, #d8dce6); border-radius: 10px;
  background: var(--card, #fff);
}
.lock-wrap .lock-pillars { color: var(--ink, #26324a); font-weight: 600; }