/* 운담 공통 디자인 토큰과 컴포넌트 스타일 (index.html, report.html) */
/* KB금융 본문체 — scripts/subset-fonts.py 로 만든 서브셋 */
@font-face { font-family: "KBText"; src: url("/fonts/KBText-Light.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "KBText"; src: url("/fonts/KBText-Medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "KBText"; src: url("/fonts/KBText-Bold.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
/* Layout: 좌측 고정 입력 패널 + 우측 결과 지면. 원국은 시·일·월·년 네 기둥을 세로 띠로 세운다. */
:root {
  --paper: #eceee9;      /* 청자빛 한지 */
  --surface: #f7f8f5;
  --ink: #1b2026;        /* 먹 */
  --muted: #5b6570;
  --line: #d3d8d0;
  --accent: #2c3d8c;     /* 쪽빛 */
  --seal: #b0382c;       /* 주사 인장 — 일간 표시에만 사용 */
  --wood: #2d7a58; --fire: #c43f2d; --earth: #a97a1f; --metal: #7d838d; --water: #1f3a66;
  --good: #2d7a58; --caution: #b0382c; --neutral: #5b6570;
  --font-hanja: "Song Myung", "Nanum Myeongjo", "AppleMyungjo", serif;   /* 천간·지지 글자 */
  --font-display: "KBText", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-sans: "KBText", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1216; --surface: #171b21; --ink: #e4e7eb; --muted: #9aa3ad; --line: #2a3139;
    --accent: #9eabf2; --seal: #e27562;
    --wood: #5cbf8e; --fire: #f07863; --earth: #deb259; --metal: #c3c8d0; --water: #82a8e2;
    --good: #5cbf8e; --caution: #e27562; --neutral: #9aa3ad;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1216; --surface: #171b21; --ink: #e4e7eb; --muted: #9aa3ad; --line: #2a3139;
  --accent: #9eabf2; --seal: #e27562;
  --wood: #5cbf8e; --fire: #f07863; --earth: #deb259; --metal: #c3c8d0; --water: #82a8e2;
  --good: #5cbf8e; --caution: #e27562; --neutral: #9aa3ad;
  color-scheme: dark;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.65; }
h1, h2, h3 { text-wrap: balance; }
.font-display { font-weight: 700; letter-spacing: -0.015em; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.el-0 { --el: var(--wood); } .el-1 { --el: var(--fire); } .el-2 { --el: var(--earth); } .el-3 { --el: var(--metal); } .el-4 { --el: var(--water); }
.glyph { font-family: var(--font-hanja); color: var(--el); background: color-mix(in srgb, var(--el) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--el) 30%, transparent); }
.dot { background: var(--el); }
.field { width: 100%; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; color: var(--ink); font: inherit; }
.field:focus-visible, .seg input:focus-visible + span, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; text-align: center; padding: 7px 4px; cursor: pointer; color: var(--muted); }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.tone-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 9%, transparent); }
.tone-caution { color: var(--caution); border-color: color-mix(in srgb, var(--caution) 40%, transparent); background: color-mix(in srgb, var(--caution) 8%, transparent); }
.tone-neutral { color: var(--muted); border-color: var(--line); background: transparent; }
.seal { font-family: var(--font-hanja); color: var(--seal); border: 1.5px solid var(--seal); }
.skeleton { display: block; background: color-mix(in srgb, var(--muted) 18%, transparent); }
dialog.sheet { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
dialog.sheet::backdrop { background: rgb(0 0 0 / .5); }
.reveal { animation: rise .5s ease both; }
@keyframes rise { from { transform: translateY(6px); opacity: .001; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

/* 인연 지도: 관계 갈래 글자색 (밝은 화면은 진하게, 어두운 화면은 천문도와 같은 색) */
.cat-yongsin { --cat: #2d7a58; } .cat-hap { --cat: #b23a52; } .cat-insung { --cat: #8a5d00; }
.cat-bigup { --cat: #2c3d8c; } .cat-make { --cat: #a4561c; } .cat-gwan { --cat: #6b4bb0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat-yongsin { --cat: #7fd1a8; } :root:not([data-theme="light"]) .cat-hap { --cat: #f0a3b5; }
  :root:not([data-theme="light"]) .cat-insung { --cat: #f2cf7a; } :root:not([data-theme="light"]) .cat-bigup { --cat: #9fb8f0; }
  :root:not([data-theme="light"]) .cat-make { --cat: #e6a46e; } :root:not([data-theme="light"]) .cat-gwan { --cat: #c3a6f0; }
}
:root[data-theme="dark"] .cat-yongsin { --cat: #7fd1a8; } :root[data-theme="dark"] .cat-hap { --cat: #f0a3b5; }
:root[data-theme="dark"] .cat-insung { --cat: #f2cf7a; } :root[data-theme="dark"] .cat-bigup { --cat: #9fb8f0; }
:root[data-theme="dark"] .cat-make { --cat: #e6a46e; } :root[data-theme="dark"] .cat-gwan { --cat: #c3a6f0; }
.sky-panel { border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: #0b101f; }
.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 60% { box-shadow: inset 0 0 0 2px var(--accent); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* 용어 사전: 점선 밑줄 용어와 설명 말풍선 */
button.term { all: unset; cursor: pointer; border-bottom: 1.5px dotted color-mix(in srgb, var(--accent) 65%, transparent); padding-bottom: 1px; }
button.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.term-pop { position: fixed; z-index: 60; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font-size: 13px; line-height: 1.6; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.term-pop b { font-size: 13.5px; }
/* 운담이 마스코트 */
.mascot { display: block; }
.mascot .mk-l { fill: none; stroke: #1b2026; stroke-width: 2.6; stroke-linecap: round; }
.mascot g { transform-origin: 50% 60%; animation: bob 3.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .mascot g { animation: none; } }

/* 격국·조후 설명: 쉽게 보기(기본) ↔ 원문 근거 */
.gj[data-mode="easy"] .gj-ex { display: none; }
.gj[data-mode="expert"] .gj-ez { display: none; }