@charset "utf-8";

/* =========================================================================
   계산모아 — 디자인 토큰
   장부(ledger) 편집 디자인: 종이 바탕 + 잉크 한 색 + 강조색 하나.
   구조는 카드가 아니라 헤어라인 괘선으로 만든다.
   ========================================================================= */

:root {
  /* 표면 — 차가운 회색 대신 따뜻한 종이 톤 */
  --paper: #fcfaf6;
  --surface: #ffffff;
  --surface-2: #f5f1e9;

  /* 잉크 (본문 → 보조 → 흐림). 순검정이 아니라 온기가 도는 먹색 */
  --ink: #1a1714;
  --ink-2: #514b44;
  /* 푸터(--surface-2) 위에서도 AA를 넘기는 가장 밝은 값 */
  --ink-3: #635c53;

  /* 괘선 */
  --rule: rgba(26, 23, 20, 0.12);
  --rule-strong: rgba(26, 23, 20, 0.25);

  /* 강조 — 카테고리별로 갈리되 채도·명도를 맞춰 한 가족으로 묶는다.
     빨강(--negative)은 차감·오류 전용이라 강조색으로 쓰지 않는다. */
  --cat-work: #0e7c5a;   /* 급여·노동 */
  --cat-money: #1e63a8;  /* 대출·예금 */
  --cat-home: #b0562a;   /* 부동산 */
  --cat-biz: #864772;    /* 사업·세금 */

  --accent: var(--cat-work);
  --accent-soft: #e4f2ea;
  --negative: #a4331f;

  --shadow: 0 1px 2px rgba(26, 23, 20, 0.04), 0 6px 20px rgba(26, 23, 20, 0.06);

  /* 타이포 */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  --serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, "Apple SD Gothic Neo", serif;

  /* 간격 — 4px 배수 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;

  /* 폭 */
  --wrap: 1080px;
  --measure: 68ch;

  /* 모서리 — 살짝 부드럽게. 전부 알약 모양으로 만들지는 않는다. */
  --r-sm: 8px;
  --r: 12px;
}

/* 페이지마다 소속 카테고리 색이 강조색이 된다.
   결과 눈금선·라벨·링크가 이 값을 따라가므로 섹션별 정체성이 생긴다. */
[data-cat="work"]  { --accent: var(--cat-work); }
[data-cat="money"] { --accent: var(--cat-money); }
[data-cat="home"]  { --accent: var(--cat-home); }
[data-cat="biz"]   { --accent: var(--cat-biz); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17150f;
    --surface: #1e1b15;
    --surface-2: #24201a;
    --ink: #f0ece4;
    --ink-2: #b4ada1;
    --ink-3: #8d8578;
    --rule: rgba(240, 236, 228, 0.13);
    --rule-strong: rgba(240, 236, 228, 0.27);

    --cat-work: #4fc79b;
    --cat-money: #74aeea;
    --cat-home: #e6935f;
    --cat-biz: #d093bd;

    --accent: var(--cat-work);
    --accent-soft: #16332a;
    --negative: #f0907a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.3);
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  font-feature-settings: "tnum" 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* 한국어 조판: 단어 단위 줄바꿈 + 고아 단어 방지 */
h1, h2, h3, .lede, .result-value { text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--s4); }

@media (min-width: 720px) { .wrap { padding-inline: var(--s5); } }

/* ---------- 공통 프리미티브 ---------- */

.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; inset: var(--s2) auto auto var(--s2); z-index: 100;
  width: auto; height: auto; padding: 10px 16px;
  background: var(--accent); color: var(--paper); border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600;
}

a { color: var(--accent); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.muted { color: var(--ink-3); }

/* 눈썹 라벨 — 절제된 위계의 최상단 */
.eyebrow {
  margin: 0 0 var(--s2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.display {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.24;
}

/* 숫자 조판 — 자릿수 비교가 되어야 하는 모든 곳 */
.tnum, .result-value, .ledger td, .schedule-table td, .schedule-table th,
.article td, .bar-value, .meta-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 헤더 ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 58px;
}

.brand {
  display: inline-flex; align-items: baseline; gap: 7px;
  text-decoration: none; color: var(--ink);
}
.brand-mark {
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  color: var(--accent); line-height: 1;
}
.brand-text {
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  letter-spacing: -0.02em;
}
.brand:hover .brand-text { color: var(--accent); }

/* 계산기 목록 디스클로저 — 모든 화면 폭에서 동일하게 동작한다 */
.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 38px; padding: 0 var(--s3);
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); background: none; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  transition: color .15s, border-color .15s, background-color .15s;
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
.nav-toggle:active { background: var(--accent-soft); }
.nav-toggle .chev {
  width: 9px; height: 9px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-2px, -2px); }

.nav-panel {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.nav-panel.open { display: block; }
.nav-panel .wrap { padding-block: var(--s5) var(--s6); }
.nav-groups { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .nav-groups { grid-template-columns: repeat(3, 1fr); } }

.nav-group-title {
  margin: 0 0 var(--s2); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-3);
}
.nav-panel a {
  display: block; padding: 9px 0;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color .15s, padding-left .15s;
}
.nav-panel a:hover { color: var(--accent); padding-left: 5px; }
.nav-panel a[aria-current="page"] { color: var(--accent); font-weight: 700; }

/* ---------- 본문 뼈대 ---------- */

main { display: block; padding-block: var(--s6) var(--s8); }

.breadcrumb { margin: 0 0 var(--s3); font-size: 13px; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

.page-head { margin-bottom: var(--s6); }
.page-head h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(25px, 3.6vw, 34px); letter-spacing: -0.028em;
  line-height: 1.26; margin: 0 0 var(--s3);
}
.lede {
  margin: 0; max-width: 60ch;
  font-size: 15.5px; line-height: 1.7; color: var(--ink-2);
}

/* =========================================================================
   계산기 작업면 — 입력과 결과
   ========================================================================= */

.workbench { display: grid; gap: var(--s6); align-items: start; }

@media (min-width: 900px) {
  .workbench {
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 0;
  }
  .pane-input { padding-right: var(--s7); }
  .pane-output {
    padding-left: var(--s7);
    border-left: 1px solid var(--rule);
    position: sticky; top: 78px;
  }
}

@media (max-width: 899px) {
  .pane-output { padding-top: var(--s5); border-top: 1px solid var(--rule); }
}

.pane-title {
  margin: 0 0 var(--s5); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-3);
}

/* ---------- 입력 ---------- */

.field { margin-bottom: var(--s5); border: 0; padding: 0; min-width: 0; }
.field:last-child { margin-bottom: 0; }

.field > label, .field .label, .field > legend {
  display: block; padding: 0; float: none;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  margin-bottom: var(--s2);
}

.hint {
  display: block; margin-top: var(--s2);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
/* 입력 묶음 위에 붙는 안내문 (필드 라벨이 아니라 그룹 전체 설명) */
.field-note { margin: calc(-1 * var(--s3)) 0 var(--s5); }

.input-wrap { display: flex; align-items: stretch; }

input[type="text"], input[type="number"], input[type="date"], select {
  width: 100%; min-width: 0; padding: 11px 13px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  appearance: none; -moz-appearance: textfield;
  transition: border-color .15s, box-shadow .15s;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input:hover, select:hover { border-color: var(--ink-3); }
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input[data-comma] {
  text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

.input-wrap input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-wrap input:only-child { border-radius: var(--r-sm); }
.input-wrap .suffix {
  display: grid; place-items: center; flex: none; padding-inline: var(--s3);
  font-size: 14px; color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--rule-strong); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.input-wrap:focus-within .suffix { border-color: var(--accent); }

/* 빠른 증감 버튼 */
.steps { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.steps button {
  min-height: 34px; padding: 0 12px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .12s, border-color .12s, background-color .12s, transform .06s;
}
.steps button:hover { color: var(--accent); border-color: var(--accent); }
.steps button:active { background: var(--accent-soft); transform: translateY(1px); }

/* 분절 선택 (라디오) */
.seg {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.seg label { flex: 1 1 0; margin: 0; min-width: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; padding: 8px 6px; border-radius: 4px; cursor: pointer;
  text-align: center; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  transition: color .12s, background-color .12s;
}
.seg label:hover span { color: var(--ink); }
.seg input:checked + span {
  background: var(--surface); color: var(--accent); font-weight: 700;
  box-shadow: 0 1px 2px rgba(22, 24, 28, 0.07);
}
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 359px) { .grid-2 { grid-template-columns: 1fr; } }

.checkline {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 34px; font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.checkline input {
  flex: none; width: 19px; height: 19px; margin: 0;
  accent-color: var(--accent); cursor: pointer;
}

/* =========================================================================
   결과 — 이 제품의 주인공. 표면은 여기에만 쓴다.
   ========================================================================= */

.result-headline {
  position: relative;
  padding-top: var(--s3);
  border-top: 2px solid var(--accent);
  margin-bottom: var(--s5);
}
.result-label {
  margin: 0 0 var(--s1);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent);
}
.result-value {
  margin: 0;
  font-size: clamp(30px, 6vw, 42px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.12; color: var(--ink);
}

/* 결과 복사. 값 옆이 아니라 헤드라인 우상단에 둬서 숫자를 가리지 않는다. */
.copy-btn {
  position: absolute; top: var(--s3); right: 0;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 30px; padding: 0 10px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-3); background: transparent;
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s, transform .08s;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.copy-btn:active { transform: translateY(1px); }
.copy-btn.is-done {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
}
.copy-btn.is-fail { color: var(--negative); border-color: var(--negative); }
.result-note {
  margin: var(--s2) 0 0;
  font-size: 13px; line-height: 1.6; color: var(--ink-3);
}

/* 장부식 내역 표 */
.ledger { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ledger th, .ledger td {
  padding: 9px 0; text-align: left; vertical-align: baseline;
  border-bottom: 1px solid var(--rule);
}
.ledger th { font-weight: 500; color: var(--ink-2); }
.ledger td {
  text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap;
  padding-left: var(--s3);
}
.ledger tr:last-child th, .ledger tr:last-child td { border-bottom: 0; }

.ledger tr.sub th { padding-left: var(--s3); font-size: 13.5px; color: var(--ink-3); }
.ledger tr.sub td { font-weight: 500; color: var(--ink-2); }

/* 공제·차감. 빨강과 함께 − 기호를 쓰므로 색에만 의존하지 않는다. */
.ledger tr.minus td { color: var(--negative); }

.ledger tr.total th, .ledger tr.total td {
  border-top: 1.5px solid var(--rule-strong); border-bottom: 0;
  padding-top: var(--s3); font-size: 16px;
}
.ledger tr.total th { color: var(--ink); font-weight: 600; }
.ledger tr.total td { font-weight: 700; }
.ledger tr.total.minus td { color: var(--negative); }

/* 보조 지표 — 알약 배지 대신 정의 목록 */
.meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s4); margin: var(--s5) 0 0;
  padding-top: var(--s4); border-top: 1px solid var(--rule);
}
.meta div { min-width: 0; }
.meta dt { font-size: 12px; color: var(--ink-3); margin-bottom: 1px; }
.meta dd {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis;
}

.result-caveat {
  margin: var(--s4) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: 12.5px; line-height: 1.65; color: var(--ink-3);
}

/* 오류 — 색 외에 기호와 굵기로도 구분된다 */
.error {
  display: flex; gap: var(--s2); align-items: flex-start;
  margin: 0; font-size: 14px; font-weight: 500; color: var(--negative);
}
.error::before { content: "!"; flex: none; font-weight: 700; }

/* 상환 스케줄 */
details.schedule { margin-top: var(--s5); }
details.schedule > summary {
  cursor: pointer; padding: var(--s2) 0;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  list-style: none;
}
details.schedule > summary::-webkit-details-marker { display: none; }
details.schedule > summary::before {
  content: "+ "; font-weight: 400;
}
details.schedule[open] > summary::before { content: "− "; }
details.schedule > summary:hover { text-decoration: underline; }

.schedule-scroll {
  max-height: 320px; overflow: auto; margin-top: var(--s2);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  overscroll-behavior: contain;
}
.schedule-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.schedule-table th, .schedule-table td {
  padding: 7px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
.schedule-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--ink-3); font-weight: 600;
}
.schedule-table td:first-child, .schedule-table th:first-child { text-align: left; }
.schedule-table tbody tr:last-child td { border-bottom: 0; }

/* 모바일 결과 고정 바 */
.result-bar { display: none; }
@media (max-width: 899px) {
  .result-bar {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s3);
    padding: 11px var(--s4) calc(11px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: saturate(150%) blur(12px);
    border-top: 2px solid var(--accent);
    transition: transform .2s ease, opacity .2s ease;
  }
  .result-bar[hidden] { display: none; }
  .result-bar.bar-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .bar-label { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
  .bar-value {
    font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body:has(.result-bar:not([hidden])) .site-footer { padding-bottom: 76px; }
}

/* =========================================================================
   홈 — 마스트헤드 + 색인
   ========================================================================= */

.masthead {
  display: grid; gap: var(--s5);
  padding-bottom: var(--s6); margin-bottom: var(--s6);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .masthead { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s7); align-items: center; }
}
.masthead h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(29px, 4.6vw, 42px); letter-spacing: -0.032em;
  line-height: 1.2; margin: 0 0 var(--s4);
}
.masthead .lede { font-size: 16px; max-width: 46ch; }

.masthead-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin: var(--s5) 0 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--ink-3);
}
.masthead-meta li { display: flex; align-items: baseline; gap: 6px; }
.masthead-meta b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 히어로 미디어 — 보조적인 분위기 요소. 계산기보다 주목받지 않는다. */
.hero-media {
  position: relative; overflow: hidden;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface-2);
}
@media (min-width: 860px) { .hero-media { aspect-ratio: 16 / 9; } }

.hero-media svg, .hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.hero-media video { z-index: 1; }


.hero-pause {
  position: absolute; z-index: 2; right: var(--s2); bottom: var(--s2);
  min-height: 30px; padding: 0 10px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink); background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.hero-media:hover .hero-pause,
.hero-pause:focus-visible { opacity: 1; }

/* 색인 목록 — 카드 그리드 대신 편집형 목차 */
.index-group + .index-group { margin-top: var(--s7); }

.group-title {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s2); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-strong);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-2);
}
/* 분류마다 색이 다른 작은 표식. 제목 전체를 물들이지 않아 과하지 않다. */
.group-title::before {
  content: ""; flex: none;
  width: 9px; height: 9px; border-radius: 3px;
  background: var(--accent);
}
.group-count { font-size: 12px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.index-list { margin: 0; padding: 0; list-style: none; }
.index-list li { border-bottom: 1px solid var(--rule); }

.index-list a {
  position: relative; isolation: isolate;
  display: grid; gap: 2px var(--s5); align-items: baseline;
  padding: var(--s4) var(--s3); margin-inline: calc(-1 * var(--s3));
  text-decoration: none; color: inherit;
  transition: transform .18s ease;
}
@media (min-width: 720px) {
  .index-list a { grid-template-columns: 230px minmax(0, 1fr); padding-block: var(--s3); }
}

/* 커서를 따라오는 부드러운 조명. --mx/--my 가 없으면 아무것도 그리지 않는다. */
.index-list a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-sm);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    var(--accent-soft), transparent 68%
  );
  opacity: 0; transition: opacity .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .index-list a:hover::before { opacity: 1; }
  .index-list a:hover { transform: translateX(var(--s1)); }
}
.index-list a:focus-visible::before { opacity: 1; }

.index-title {
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  transition: color .15s;
}
.index-list a:hover .index-title { color: var(--accent); }
.index-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

/* =========================================================================
   본문 글
   ========================================================================= */

.article { max-width: var(--measure); margin-top: var(--s8); }
.article > *:first-child { margin-top: 0; }

.article h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: 21px; letter-spacing: -0.022em; line-height: 1.4;
  margin: var(--s7) 0 var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.article h3 {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  margin: var(--s5) 0 var(--s2);
}
.article p { margin: 0 0 var(--s4); }
.article ul, .article ol { margin: 0 0 var(--s4); padding-left: 1.25em; }
.article li { margin-bottom: var(--s2); }
.article li::marker { color: var(--ink-3); }
.article strong { font-weight: 700; }
.article .muted { font-size: 13px; }

.table-scroll {
  margin: 0 0 var(--s5); overflow-x: auto; overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--rule);
}
.article table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.article th, .article td {
  padding: 9px var(--s3) 9px 0; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
.article thead th {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3);
  border-bottom: 1.5px solid var(--rule-strong);
}
.article td:not(:first-child), .article th:not(:first-child) { text-align: right; }
.article tbody tr:last-child td { border-bottom: 0; }
.article table th[colspan] { text-align: left; white-space: normal; }

.callout {
  margin: 0 0 var(--s5); padding: var(--s4) 0 var(--s4) var(--s4);
  border-left: 2px solid var(--accent);
  font-size: 14.5px; line-height: 1.7; color: var(--ink-2);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* FAQ — 카드 없이 괘선만 */
.faq-section { max-width: var(--measure); margin-top: var(--s8); }
.faq-section > h2 {
  font-family: var(--serif); font-weight: 600; font-size: 21px;
  letter-spacing: -0.022em; margin: 0 0 var(--s4);
  padding-top: var(--s4); border-top: 1px solid var(--rule);
}
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative; cursor: pointer;
  padding: var(--s4) var(--s6) var(--s4) 0;
  font-size: 15.5px; font-weight: 600; line-height: 1.55;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ""; position: absolute; right: var(--s2); top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .answer { padding: 0 0 var(--s4); font-size: 14.5px; color: var(--ink-2); }
.faq .answer p { margin: 0 0 var(--s3); }
.faq .answer p:last-child { margin-bottom: 0; }

/* 관련 계산기 */
.related { max-width: var(--measure); margin-top: var(--s8); }
.related h2 {
  margin: 0 0 var(--s2); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-strong);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-2);
}
.related-list { margin: 0; padding: 0; list-style: none; }
.related-list li { border-bottom: 1px solid var(--rule); }
.related-list a {
  display: block; padding: var(--s3) 0;
  font-size: 14.5px; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: color .15s, padding-left .18s ease;
}
.related-list a:hover { color: var(--accent); padding-left: var(--s2); }

/* 법적 고지 페이지 */
.legal { max-width: var(--measure); }
.legal h2 {
  font-family: var(--serif); font-weight: 600; font-size: 19px;
  letter-spacing: -0.02em; margin: var(--s6) 0 var(--s3);
  padding-top: var(--s4); border-top: 1px solid var(--rule);
}
.legal h3 { font-size: 15.5px; font-weight: 700; margin: var(--s5) 0 var(--s2); }
.legal p, .legal li { font-size: 14.5px; }
.legal ul { padding-left: 1.25em; }

/* 404 */
.notfound { padding: var(--s8) 0; border-bottom: 1px solid var(--rule); margin-bottom: var(--s6); }
.notfound h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.028em; margin: 0 0 var(--s3);
}

/* ---------- 광고 ---------- */

.ad-slot {
  margin: var(--s7) 0; padding-block: var(--s3);
  text-align: center; min-height: 100px;
  border-block: 1px solid var(--rule);
}
.ad-label {
  display: block; margin-bottom: var(--s2);
  font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3);
}

/* ---------- 푸터 ---------- */

.site-footer {
  margin-top: var(--s9); padding: var(--s7) 0 var(--s6);
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: 14px;
}
.footer-cols {
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: var(--s6);
}
.footer-brand {
  margin: 0 0 var(--s1);
  font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: -0.02em;
}
.footer-head {
  margin: 0 0 var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-3);
}
.site-footer nav a {
  display: block; padding: 4px 0;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  transition: color .15s;
}
.site-footer nav a:hover { color: var(--accent); }
.site-footer .muted { font-size: 13.5px; }

.disclaimer {
  margin: 0 0 var(--s3); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: 12.5px; line-height: 1.75; color: var(--ink-3);
  max-width: 88ch;
}
.disclaimer strong { color: var(--ink-2); }
.copyright { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* =========================================================================
   모션 — 보조 콘텐츠의 진입에만. 핵심 입력·결과는 처음부터 보인다.
   JS가 .is-armed를 붙이기 전까지 모든 콘텐츠는 보이는 상태다.
   ========================================================================= */

/* 기본값은 "보임". JS가 .is-armed 를 붙였다 떼는 방식이라,
   스크립트가 실패해도 콘텐츠가 사라지지 않는다. */
.reveal {
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-armed { opacity: 0; transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal.is-armed { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .ad-slot, .result-bar, .hero-media, .steps { display: none; }
  body { background: #fff; color: #000; }
}