/* 사이트 전체 공통 스타일입니다. 기본은 따뜻한 밝은 색, 머리말 버튼으로 다크 모드를 켜고 끕니다. 외부 글꼴 없이 기기 글꼴을 씁니다. */
/* 화면 원칙: 3초 테스트 — 첫 화면에 제목·입력·결과만, 설명은 접는 칸으로. */
:root {
  --bg: #faf7f2;
  --surface: #fffdf9;
  --soft: #f3eee6;
  --ink: #23201b;
  --muted: #6b655b;
  --line: #e7e0d5;
  --accent: #1f5f7a;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0f0;
  --good: #1d6b45;
  --warn: #9a5a00;
  --bad: #a3312a;
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  color-scheme: light;
}
/* 다크 모드: 버튼으로 켰을 때만 적용합니다(기기 설정을 따라 자동으로 바뀌지 않음). */
:root[data-theme="dark"] {
  --bg: #16181c;
  --surface: #1e2126;
  --soft: #262a30;
  --ink: #e8e5df;
  --muted: #a7a299;
  --line: #34383f;
  --accent: #80bfd6;
  --accent-ink: #10181d;
  --accent-soft: #1f2c33;
  --good: #6fcf9b;
  --warn: #f0b45a;
  --bad: #f08a80;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; word-break: keep-all; }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 머리말·꼬리말 */
.site-header { border-bottom: 1px solid var(--line); padding: 10px 16px; background: var(--surface); }
.site-header .inner, main, .site-footer .inner { max-width: 40rem; margin: 0 auto; }
.site-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* 다크 모드 켜기/끄기 버튼 */
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .82rem; color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.theme-toggle .track { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.theme-toggle .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.theme-toggle[aria-pressed="true"] .track { background: var(--accent); }
.theme-toggle[aria-pressed="true"] .knob { transform: translateX(14px); background: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .theme-toggle .track, .theme-toggle .knob { transition: none; } }
.brand { display: grid; line-height: 1.25; color: var(--ink); text-decoration: none; min-width: 0; }
.brand-name { font-weight: 700; }
.brand-tag { font-size: .72rem; font-weight: 500; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; padding: 18px 16px 32px; }
.site-footer .inner { display: grid; gap: 4px; }
.site-footer p { margin: 0; }

main { padding: 18px 16px 40px; display: grid; gap: 16px; }
section { display: grid; gap: 10px; min-width: 0; }
section > *, .calc > *, .result > * { min-width: 0; }
h1, h2, h3 { line-height: 1.35; margin: 0; text-wrap: balance; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.lead, .sub { color: var(--muted); }
.sub b { color: var(--ink); }
.hint, .updated { font-size: .82rem; color: var(--muted); }

/* 1초: 무엇인가 */
.hero { display: grid; gap: 4px; }
.badge { justify-self: start; font-size: .78rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; }

/* 2초: 입력 */
.calc { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 12px; background: var(--surface); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f { display: grid; gap: 4px; min-width: 0; }
.f label, .f .lbl { font-size: .85rem; font-weight: 600; color: var(--muted); }
.f input { font: inherit; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--ink); }
.money { position: relative; }
.money input { padding-right: 2.2em; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.money span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { text-align: center; padding: 8px 6px; font-size: .9rem; cursor: pointer; color: var(--muted); background: var(--soft); }
.seg input:checked + label { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.tip { font-size: .8rem; color: var(--muted); }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg.four { grid-template-columns: 1fr 1fr; }
.seg.four label:nth-of-type(n+3) { border-top: 1px solid var(--line); }
.result .big.likely { color: var(--good); }
.result .big.check { color: var(--warn); }
.result .big.no { color: var(--bad); }
.result ul { margin-top: 6px; }
.cta { justify-self: start; display: inline-block; margin-top: 8px; font-weight: 700; padding: 8px 16px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; }
details.more summary { cursor: pointer; font-size: .88rem; color: var(--accent); font-weight: 600; }
details.more .body { display: grid; gap: 10px; padding-top: 10px; }

/* 3초: 결과 */
.result { background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; }
.result .k { font-size: .85rem; color: var(--muted); }
.result .big { font-size: 2.1rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.result .formula { font-variant-numeric: tabular-nums; }
.chip { justify-self: start; margin-top: 6px; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface); }
.chip.likely { color: var(--good); } .chip.check { color: var(--warn); } .chip.unlikely { color: var(--bad); }
.err { color: var(--bad); font-weight: 600; }

/* 핵심 숫자 카드 */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fact { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; display: grid; gap: 2px; }
.fact b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fact span { font-size: .78rem; color: var(--muted); }

/* 접는 설명 */
.acc { display: grid; gap: 8px; }
.acc details { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.acc summary { cursor: pointer; padding: 12px 14px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--muted); font-weight: 400; }
.acc details[open] summary::after { content: "−"; }
.acc summary h2 { font-size: 1rem; margin: 0; }
.acc .body { padding: 0 14px 14px; display: grid; gap: 8px; font-size: .93rem; }

/* 목록 카드(첫 화면 계산기 목록) */
.cards { display: grid; gap: 8px; }
.card { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.card b { font-size: 1.05rem; }
.card span { font-size: .88rem; color: var(--muted); }
.card:hover { border-color: var(--accent); }

/* 표 */
.table-box, .tbl { overflow-x: auto; }
.table-box { border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { background: var(--soft); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.n, th.n, td.num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }