/* ============================================================
   생활계산기 공용 스타일 — 팔레트 1a "클래식 뱅킹 네이비"
   토큰 출처: Claude Design 리디자인 (docs/design-brief.md)
   수정 시 전 페이지 링크의 ?v=N 을 올릴 것 (docs/deploy-cloudflare.md §3)
   ============================================================ */

:root {
  /* Color — brand */
  --c-navy-900: #0A2540;
  --c-navy-700: #1D3A5C;
  --c-blue-700: #1E4E8C;
  --c-blue-500: #3B6FB6;
  --c-blue-050: #EAF1F9;

  /* Color — point (결과 강조, 1색) */
  --c-point:        #0E9F6E;
  --c-point-bright: #3DDC97;

  /* Color — neutral */
  --c-surface:      #F4F7FA;
  --c-card:         #FFFFFF;
  --c-field:        #F9FBFC;
  --c-border:       #E4E9F0;
  --c-border-soft:  #EDF1F6;
  --c-border-input: #CBD5E1;
  --c-ink:          #101828;
  --c-ink-2:        #344054;
  --c-ink-25:       #475467;   /* 본문 서술 (derived from screens) */
  --c-ink-3:        #667085;
  --c-ink-faint:    #98A2B3;
  --c-on-dark:        #9DB2CC;
  --c-on-dark-strong: #C6D4E4; /* 다크 배경 링크 (derived) */
  --c-on-dark-dim:    #6E85A3;
  --c-navy-chip:      #2C4A6E; /* 히어로 배지 테두리 (derived) */

  /* Typography (시스템 폰트만) */
  --font-sans: -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic",
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --fs-result: 38px;  --fw-result: 700;
  --fs-h1: 27px;      --fs-h2: 18px;
  --fs-body: 15px;    --fs-body-sm: 14px;
  --fs-caption: 12px; --lh-body: 1.7;

  /* Spacing (4px 배수) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-11: 44px;

  /* Radius */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* Shadow */
  --sh-card:  0 1px 2px rgba(16, 24, 40, .04);
  --sh-hover: 0 2px 8px rgba(10, 37, 64, .08);

  /* Layout */
  --w-page: 1040px;
  --w-narrow: 760px;
  --tap-min: 44px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-blue-700); text-decoration: none; }
a:hover { color: var(--c-navy-900); }
h1, h2, h3, p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.page { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- header ---------- */
.site-header { background: var(--c-card); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 10; }
.header-inner {
  max-width: var(--w-page); margin: 0 auto; padding: 8px 20px; min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; color: var(--c-navy-900); white-space: nowrap; }
.logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: var(--c-navy-900); }
.site-nav { display: flex; gap: clamp(10px, 3vw, 18px); font-size: 13px; font-weight: 500; }
.site-nav a { color: var(--c-ink-2); white-space: nowrap; }
.site-nav a:hover { color: var(--c-blue-700); }

/* ---------- hero (허브) ---------- */
.hero { background: var(--c-navy-900); }
.hero-inner { max-width: var(--w-page); margin: 0 auto; padding: 56px 20px 60px; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { font-size: clamp(24px, 4.5vw, 34px); font-weight: 700; color: #fff; line-height: 1.35; text-wrap: pretty; }
.hero p { font-size: var(--fs-body); color: var(--c-on-dark); line-height: var(--lh-body); max-width: 520px; text-wrap: pretty; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-on-dark-strong);
  border: 1px solid var(--c-navy-chip); border-radius: var(--r-pill); padding: 6px 12px;
}

/* ---------- 레이아웃 컨테이너 ---------- */
.main { max-width: var(--w-page); margin: 0 auto; padding: 12px 20px 64px; width: 100%; display: flex; flex-direction: column; gap: 44px; flex: 1; }
.main-narrow { max-width: var(--w-narrow); margin: 0 auto; padding: 24px 20px 64px; width: 100%; display: flex; flex-direction: column; gap: 20px; flex: 1; }

/* ---------- 카테고리 섹션 (허브) ---------- */
.cat-section { display: flex; flex-direction: column; gap: 14px; padding-top: 36px; }
.cat-head { display: flex; align-items: center; gap: 10px; }
.cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--c-blue-050); }
.cat-head h2 { font-size: 19px; font-weight: 700; color: var(--c-ink); }
.cat-count { font-size: 13px; color: var(--c-ink-3); }

/* ---------- 도구 카드 ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tool-card {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: 10px; padding: 18px;
  display: flex; flex-direction: column; gap: 6px; color: inherit;
}
.tool-card:hover { border-color: var(--c-blue-700); box-shadow: var(--sh-hover); color: inherit; }
.tool-card .name { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.tool-card .desc { font-size: 13px; color: var(--c-ink-3); line-height: 1.55; }

/* ---------- 브레드크럼 · 페이지 제목 ---------- */
.breadcrumb { font-size: 13px; color: var(--c-ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.breadcrumb a { color: var(--c-ink-3); }
.breadcrumb a:hover { color: var(--c-blue-700); }
.breadcrumb .current { color: var(--c-ink-2); font-weight: 500; }
.page-head { display: flex; flex-direction: column; gap: 6px; }
.page-head h1 { font-size: clamp(22px, 4vw, var(--fs-h1)); font-weight: 700; color: var(--c-navy-900); }
.page-desc { font-size: var(--fs-body-sm); color: var(--c-ink-25); line-height: 1.65; text-wrap: pretty; }
.page-meta { font-size: 13px; color: var(--c-ink-3); }

/* ---------- 입력 카드 ---------- */
.card {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5); box-shadow: var(--sh-card);
}
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field > label { font-size: var(--fs-body-sm); font-weight: 600; color: var(--c-ink-2); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-5); }
.input-wrap {
  display: flex; align-items: center; gap: 8px; background: var(--c-field);
  border: 1px solid var(--c-border-input); border-radius: var(--r-md); padding: 0 14px;
}
.input-wrap input {
  flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 0;
  font-size: 17px; font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums;
  text-align: right; font-family: inherit;
}
.input-wrap input:focus { outline: none; }
.input-wrap:focus-within { outline: 2px solid var(--c-blue-700); outline-offset: -1px; }
.input-wrap .unit { font-size: var(--fs-body-sm); color: var(--c-ink-3); flex-shrink: 0; }
.hint { font-size: var(--fs-caption); color: var(--c-ink-3); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: var(--fs-caption); padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--c-border-input); background: var(--c-card); color: var(--c-ink-25);
  cursor: pointer; font-family: inherit;
}
.chip:hover { border-color: var(--c-blue-700); color: var(--c-blue-700); }
.chip.active { border-color: var(--c-blue-700); background: var(--c-blue-050); color: var(--c-blue-700); font-weight: 600; }

/* ---------- 세그먼트 컨트롤 ---------- */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--c-border-input); border-radius: var(--r-md); overflow: hidden; }
.segmented button {
  padding: 11px 4px; font-size: 13px; border: none; background: var(--c-card);
  color: var(--c-ink-25); cursor: pointer; font-family: inherit; min-height: var(--tap-min);
}
.segmented button + button { border-left: 1px solid var(--c-border-input); }
.segmented button.active { background: var(--c-navy-900); color: #fff; font-weight: 600; }

/* ---------- 버튼 ---------- */
.btn-primary {
  background: var(--c-blue-700); color: #fff; border: none; border-radius: var(--r-md);
  padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.btn-primary:hover { background: var(--c-navy-900); }
.btn-small {
  font-size: 13px; padding: 6px 12px; border: 1px solid var(--c-border-input); border-radius: var(--r-sm);
  background: var(--c-card); color: var(--c-blue-700); font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-small:hover { background: var(--c-blue-050); border-color: var(--c-blue-700); }

/* ---------- 결과 패널 (다크) ---------- */
.result-panel { background: var(--c-navy-900); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: 18px; }
.result-label { font-size: 13px; color: var(--c-on-dark); }
.result-value {
  font-size: clamp(30px, 7vw, var(--fs-result)); font-weight: var(--fw-result); color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.result-value .unit { font-size: 17px; font-weight: 500; color: var(--c-on-dark); }
.result-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
  border-top: 1px solid var(--c-navy-700); padding-top: 16px;
}
.result-item { display: flex; flex-direction: column; gap: 2px; }
.result-item .label { font-size: var(--fs-caption); color: var(--c-on-dark); }
.result-item .value { font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.result-item .value.point { color: var(--c-point-bright); }
.result-note { font-size: 13px; color: var(--c-on-dark); line-height: 1.6; }

/* ---------- 표 카드 ---------- */
.table-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.table-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--c-border-soft); flex-wrap: wrap; }
.table-card-head h2 { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.table-card-head .sub { font-size: var(--fs-caption); color: var(--c-ink-3); }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 400px; }
.data-table thead tr { background: var(--c-surface); color: var(--c-ink-25); }
.data-table th { padding: 10px 12px; font-weight: 600; text-align: right; }
.data-table th:first-child { text-align: left; padding-left: 20px; }
.data-table th:last-child { padding-right: 20px; }
.data-table tbody { font-variant-numeric: tabular-nums; color: var(--c-ink-2); }
.data-table tbody tr { border-top: 1px solid var(--c-border-soft); }
.data-table td { padding: 10px 12px; text-align: right; }
.data-table td:first-child { text-align: left; padding-left: 20px; }
.data-table td:last-child { padding-right: 20px; }
.data-table .point { color: var(--c-point); font-weight: 600; }

/* ---------- 본문 아티클 ---------- */
.article {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 28px 24px; display: flex; flex-direction: column; gap: var(--sp-8);
}
.article section { display: flex; flex-direction: column; gap: 10px; }
.article h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--c-navy-900); }
.article p { font-size: var(--fs-body-sm); color: var(--c-ink-2); line-height: 1.75; text-wrap: pretty; }
.article ol, .article ul { margin: 0; padding-left: 20px; font-size: var(--fs-body-sm); color: var(--c-ink-2); line-height: 1.8; display: flex; flex-direction: column; gap: 4px; }
.article .fine { font-size: 13px; color: var(--c-ink-3); line-height: var(--lh-body); }
.formula {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--c-navy-900);
  line-height: var(--lh-body); overflow-x: auto;
}
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.faq-item h3 { font-size: var(--fs-body-sm); font-weight: 700; color: var(--c-ink); }
.faq-item p { color: var(--c-ink-25); line-height: var(--lh-body); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.related-card { border: 1px solid var(--c-border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 4px; color: inherit; }
.related-card:hover { border-color: var(--c-blue-700); color: inherit; }
.related-card .name { font-size: var(--fs-body-sm); font-weight: 700; color: var(--c-ink); }
.related-card .desc { font-size: var(--fs-caption); color: var(--c-ink-3); line-height: 1.55; }
.disclaimer {
  padding: 14px 16px; background: var(--c-surface); border-radius: var(--r-md);
  font-size: var(--fs-caption); color: var(--c-ink-3); line-height: var(--lh-body);
}

/* ---------- 목차 (텍스트 페이지) ---------- */
.toc { background: var(--c-surface); border-radius: var(--r-md); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.toc .toc-title { font-size: 13px; font-weight: 700; color: var(--c-ink-2); }
.toc ol { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9; }

/* ---------- 404 ---------- */
.error-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.error-wrap { max-width: 440px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.error-code { font-size: clamp(64px, 16vw, 88px); font-weight: 700; color: var(--c-navy-900); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1; }
.error-wrap h1 { font-size: 20px; font-weight: 700; color: var(--c-ink); }
.error-wrap .desc { font-size: var(--fs-body-sm); color: var(--c-ink-3); line-height: var(--lh-body); text-wrap: pretty; }
.btn-home {
  display: inline-flex; align-items: center; gap: 8px; background: var(--c-blue-700); color: #fff;
  border-radius: var(--r-md); padding: 12px 24px; font-size: var(--fs-body-sm); font-weight: 600;
}
.btn-home:hover { background: var(--c-navy-900); color: #fff; }
.error-list { width: 100%; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.error-list .title { font-size: 13px; font-weight: 700; color: var(--c-ink-2); }
.error-list a { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: var(--fs-body-sm); }
.error-list a + a { border-top: 1px solid var(--c-border-soft); }
.error-list a .arrow { color: var(--c-ink-faint); }

/* ---------- 푸터 ---------- */
.site-footer { background: var(--c-navy-900); margin-top: auto; }
.footer-inner { max-width: var(--w-page); margin: 0 auto; padding: 28px 20px; display: flex; flex-direction: column; gap: 12px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.footer-links a { color: var(--c-on-dark-strong); }
.footer-links a:hover { color: #fff; }
.footer-legal { font-size: var(--fs-caption); color: var(--c-on-dark-dim); line-height: 1.6; }