/*
  남은 두 달 카드 계산기 · 서비스 스타일 v4 (P-001, 구현 T-0044 임가온, 시안 v3 T-0043 강보름)
  - 공통 /assets/common/v2/base.css 위에 덧입힌다. 공통 파일은 고치지 않는다.
  - COO 결정 ②(R-20261026-0005): v3 토큰은 이 파일에서 덮어쓴다. common v3 승격은 2주기 회고에서 판단.
    base v2 토큰(--paper, --ink-*, --rule-ui, --accent, --warn, --focus)도 v3 값으로 다시 묶는다.
    대비 실측(디자인 노트 v3 4-1, WCAG 2 상대휘도): --ink 바탕 16.05·면 17.44 / --ink-2 7.41·8.05 /
    --brand 면 6.25·옅은 바탕 5.37 / --on-brand 6.25 / --line-ui 3.75(비텍스트) — 어둡게는 노트 표 참고.
  - 색: 바탕(밝은 중립) + 브랜드 초록 1개(명도 단계만) + 글자 2단계. 경고 갈색 없음(주의는 아이콘 + 굵은 본문색).
  - 간격 8px 단위, 960px 이상 12칸 격자(본문 1120px). 글자 최소 14px. 그림자 없음(1px 선으로 구분).
  - 움직임: 결과 카드가 나타날 때 8px 떠오르기 하나. prefers-reduced-motion이면 끈다.
  - 디자인 시스템 부품(.btn .tag .card .box .chip .seg .tip .fold .badge)은 클래스만으로 다른 서비스에서도 쓸 수 있게
    서비스 고유 선택자와 분리해 앞쪽에 모았다(common v3 후보).
  - v5(해설 글): 해설 페이지(guide 아래 글마다 index.html)도 이 파일 하나를 쓴다. 새 색·새 글자 크기 단계 없이
    기존 토큰과 부품(.nav .card .tag .badge .btn .fold .legal table.rows)만 조합한다. 12절 참고.
*/

/* ================= 1. 토큰 ================= */
:root {
  --bg: #f4f6f3;
  --surface: #ffffff;
  --brand: #0b6e4f;
  --brand-hover: #0a5c42;
  --brand-press: #084a35;
  --brand-tint: #e3f1ea;
  --on-brand: #ffffff;
  --on-brand-track: #3c8b70;
  --ink: #161b18;
  --ink-2: #4a524e;
  --line: #e0e4e0;
  --line-ui: #7d8682;
  --disabled-bg: #e9ece9;
  --sunk: #eaeeea; /* v4: '아직 안 열림' 안내 줄 바탕만 */

  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;
  --r-tag: 6px; --r-sm: 8px; --r-md: 12px;
  --f-display: 30px; --f-h2: 24px; --f-h3: 18px; --f-body: 16px; --f-sm: 15px; --f-min: 14px;
  --f-figure: 64px;
  --gutter: 16px;
  --nav-h: 56px;

  /* common v2 토큰을 v3 값으로 */
  --paper: var(--bg);
  --paper-2: var(--bg);
  --ink-3: var(--ink-2);
  --rule-ui: var(--line-ui);
  --accent: var(--brand);
  --accent-ink: var(--on-brand);
  --warn: var(--ink);
  --focus: var(--brand);
  --font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111412; --surface: #191d1b; --brand: #5cc596; --brand-hover: #7ad3ab; --brand-press: #9adfbf;
    --brand-tint: #1d3329; --on-brand: #0b1a13; --on-brand-track: #3e8f6c;
    --ink: #e8ece9; --ink-2: #b3bbb6; --line: #2c322f; --line-ui: #7f8883; --disabled-bg: #262b28; --sunk: #202523;
    --paper: var(--bg); --paper-2: var(--bg); --ink-3: var(--ink-2); --rule-ui: var(--line-ui);
    --accent: var(--brand); --accent-ink: var(--on-brand); --warn: var(--ink); --focus: var(--brand);
    color-scheme: dark;
  }
}
@media (min-width: 960px) {
  :root { --f-display: 56px; --f-h2: 32px; --f-h3: 18px; --f-figure: 88px; --gutter: 24px; --nav-h: 64px; }
}

/* ================= 2. 기본(base v2 덮어쓰기) ================= */
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); }
body { background: var(--bg); color: var(--ink); font: 400 var(--f-body)/1.6 var(--font); letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
a:hover { color: inherit; }
b, strong { font-weight: 700; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { display: block; width: 20px; height: 20px; flex: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 20; padding: 8px 16px; background: var(--surface); border: 1.5px solid var(--brand); border-radius: var(--r-sm); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1168px; margin: 0 auto; padding: 0 var(--gutter); }

.grid { display: grid; gap: var(--sp-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3); }
  .c-12 { grid-column: span 12; } .c-7 { grid-column: span 7; } .c-6 { grid-column: span 6; }
  .c-5 { grid-column: span 5; } .c-4 { grid-column: span 4; }
}

/* ================= 3. 디자인 시스템 부품 ================= */
/* 버튼: 기본·마우스 올림·누름·비활성 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 48px; padding: 0 var(--sp-3); border-radius: var(--r-sm); border: 1.5px solid transparent; font: 700 var(--f-body)/1 var(--font); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; filter: none; }
.btn:hover { filter: none; }
.btn-primary, .btn-primary:hover, .btn-primary:active { color: var(--on-brand); }
.btn-primary { background: var(--brand); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { background: var(--brand-press); }
.btn-secondary { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.btn-secondary:hover { background: var(--brand-tint); color: var(--brand); }
.btn-secondary:active { background: var(--brand-tint); border-color: var(--brand-press); color: var(--brand-press); }
.btn-text { background: none; border: 0; padding: 0 var(--sp-1); min-height: 40px; color: var(--brand); }
.btn-text:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--disabled-bg); color: var(--ink-2); border-color: transparent; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 var(--sp-2); font-size: var(--f-sm); }
.btn .ic { width: 18px; height: 18px; }

/* 태그 */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 var(--sp-1); border-radius: var(--r-tag); font-size: var(--f-min); font-weight: 700; line-height: 1; white-space: nowrap; background: var(--brand-tint); color: var(--brand); }
.tag-line { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-ui); }
.tag-on-brand { background: var(--on-brand); color: var(--brand); }

/* 카드: 꼬리표 · 제목 · 한 줄 · 행동 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2); }
@media (min-width: 960px) { .card { padding: var(--sp-3); } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); flex-wrap: wrap; }
.card-title { font-size: var(--f-h3); font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; }
.card-line { font-size: var(--f-sm); color: var(--ink-2); line-height: 1.5; }
.card-act { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-2); font-size: var(--f-sm); font-weight: 700; color: var(--brand); text-decoration: none; }
.card-act .ic { width: 18px; height: 18px; }
.card-act:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.badge { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); flex: none; }

/* 입력칸 */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; margin: 0; }
.field > label, .field > .label { margin: 0; }
.fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.label-row { position: relative; display: flex; align-items: center; gap: 4px; min-height: 22px; }
.label { display: block; font-size: var(--f-sm); font-weight: 700; line-height: 1.4; }
.opt { font-weight: 400; color: var(--ink-2); }
.box { display: flex; align-items: center; height: 48px; padding: 0 12px; background: var(--surface); border: 1.5px solid var(--line-ui); border-radius: var(--r-sm); transition: border-color .12s; }
.box:hover { border-color: var(--ink-2); }
.box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.box[data-state="error"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.box input, .box select { flex: 1; width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--ink); font: 600 18px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.box select { font-size: var(--f-body); appearance: none; -webkit-appearance: none; cursor: pointer; }
.box select option { color: #161b18; background: #ffffff; }
.box input::placeholder { color: var(--ink-2); font-weight: 400; opacity: 1; }
.box input[type="date"] { font-size: 17px; }
.box .unit { font-size: var(--f-sm); font-weight: 600; color: var(--ink-2); padding-left: 4px; flex: none; }
.box .ic { color: var(--ink-2); width: 18px; height: 18px; pointer-events: none; }
.help { font-size: var(--f-min); line-height: 1.5; color: var(--ink-2); }
.reading { font-size: var(--f-min); line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.reading:empty { display: none; }
.err { display: flex; gap: 4px; align-items: flex-start; font-size: var(--f-min); line-height: 1.5; font-weight: 700; color: var(--ink); }
.err .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--ink); }
/* 두 칸 줄: 라벨 길이가 달라도 입력칸 높이를 맞춘다(subgrid: 라벨·칸·읽기·오류 4줄) */
.row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: start; }
.row-2 > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.row-2 > .field > * + * { margin-top: 6px; }
.row-2 > .field:nth-child(n+3) { margin-top: var(--sp-2); }
.row-2 > .field > .label { align-self: end; }
@media (max-width: 599px) {
  .row-2.stack-m { grid-template-columns: minmax(0, 1fr); }
  .row-2.stack-m > .field:nth-child(n+2) { margin-top: var(--sp-2); }
}

/* 도움말 (i): 닫힌 상태에서는 글이 화면에 없다 */
.tip { position: static; }
.tip > summary { list-style: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -3px 0; border-radius: 50%; color: var(--ink-2); cursor: pointer; }
.tip > summary::-webkit-details-marker { display: none; }
.tip > summary:hover { color: var(--brand); background: var(--brand-tint); }
.tip > summary .ic { width: 18px; height: 18px; }
.tip[open] > summary { color: var(--brand); }
.tip-body { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; font-size: var(--f-min); line-height: 1.5; font-weight: 400; color: var(--ink); background: var(--surface); border: 1.5px solid var(--brand); border-radius: var(--r-sm); padding: 12px; }
.tipwrap { position: relative; }
.tipwrap .tip-body { position: static; margin-top: 6px; }
.tip > summary.tip-text { width: auto; height: auto; min-height: 32px; margin: 0; border-radius: 6px; padding: 0 4px; gap: 4px; display: inline-flex; align-items: center; font-size: var(--f-min); font-weight: 600; }

/* 선택 알약(라디오) */
.chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-2); border-radius: var(--r-sm); border: 1.5px solid var(--line-ui); font-size: var(--f-sm); font-weight: 600; background: var(--surface); }
.chip input:hover + span { border-color: var(--ink-2); }
.chip input:checked + span { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 방법 카드(v4 신규, 라디오 카드): 아이콘 · 이름 · 하는 일 · 이럴 때 · 정확도 막대 3칸
   고른 카드 모양은 :has() 대신 app.js가 다는 .is-on 클래스로 그린다(Safari 15.4 미만 대체). 아이콘 반전은 형제 선택자 */
.method { border: 0; padding: 0; margin: 0; min-width: 0; }
.q { display: block; padding: 0; margin-bottom: 12px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; }
.q small { display: block; margin-top: 2px; font-size: var(--f-min); font-weight: 400; letter-spacing: 0; color: var(--ink-2); line-height: 1.5; }
.m-list { display: grid; gap: var(--sp-1); }
.m-opt { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-ui); cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.m-opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.m-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.m-opt.is-on { background: var(--brand-tint); box-shadow: inset 0 0 0 2px var(--brand); }
.m-opt.is-focus { outline: 2px solid var(--brand); outline-offset: 2px; }
@supports selector(:has(*)) { .m-opt.is-focus { outline: 0; } .m-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; } }
.m-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); }
.m-ic .ic { width: 18px; height: 18px; }
.m-opt input:checked ~ .m-ic { background: var(--brand); color: var(--on-brand); }
.m-body { display: grid; gap: 2px; min-width: 0; }
.m-name { display: flex; align-items: center; min-height: 32px; padding-right: 64px; font-size: var(--f-body); font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; }
.m-line { font-size: var(--f-min); line-height: 1.5; color: var(--ink); }
.m-when { font-size: var(--f-min); line-height: 1.5; color: var(--ink-2); }
.m-line, .m-when { text-wrap: pretty; } /* T-0077: '정확히 볼 / 때'처럼 마지막 줄에 한 어절만 남는 줄바꿈 방지(미지원 브라우저는 기존 줄바꿈) */
.m-when b { font-weight: 700; margin-right: 4px; color: var(--ink); }
.m-when .tag { height: 22px; margin-left: 2px; vertical-align: 1px; }
.acc { position: absolute; top: 14px; right: 14px; display: grid; justify-items: end; gap: 4px; pointer-events: none; }
.acc-dots { display: flex; gap: 3px; }
.acc-dots i { width: 14px; height: 6px; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-ui); }
.acc-dots i.on { background: var(--brand); box-shadow: none; }
.acc-k { font-size: var(--f-min); line-height: 1; color: var(--ink-2); white-space: nowrap; }
@media (min-width: 960px) {
  .m-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .m-opt { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: var(--sp-2); }
  .m-ic { width: 40px; height: 40px; } .m-ic .ic { width: 20px; height: 20px; }
  .acc { top: 18px; right: 16px; }
  .m-name { min-height: 0; padding-right: 0; }
  .m-body { gap: 4px; }
}

/* 접기 */
.fold > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-size: var(--f-sm); font-weight: 700; color: var(--brand); cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .ic { width: 18px; height: 18px; transition: transform .15s; }
.fold[open] > summary .ic { transform: rotate(180deg); }
.fold-body { display: grid; gap: var(--sp-2); padding-top: var(--sp-1); }

/* 결과 막대 공통 */
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none; }
.sw.used { background: var(--ink-2); } .sw.fill { background: var(--brand); }
.sw.gap { background: repeating-linear-gradient(135deg, var(--ink-2) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--ink-2); }

/* ================= 4. 상단 내비게이션 ================= */
.nav { position: sticky; top: 0; z-index: 10; background: var(--bg); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); }
.nav .wrap { height: var(--nav-h); display: flex; align-items: center; gap: var(--sp-2); }
.logo { display: inline-flex; align-items: center; gap: var(--sp-1); text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.logo svg { width: 28px; height: 28px; }
.nav-service { display: none; font-size: var(--f-sm); color: var(--ink-2); padding-left: var(--sp-2); border-left: 1px solid var(--line); text-decoration: none; }
a.nav-service:hover { color: var(--ink); }
.nav-menu { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); }
.nav-menu a { font-size: var(--f-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; padding: var(--sp-1); border-radius: var(--r-sm); }
.nav-menu a:hover { color: var(--ink); background: var(--surface); }
.nav-menu .nav-cta { display: none; }
.nav-menu a.btn-primary, .nav-menu a.btn-primary:hover { color: var(--on-brand); }
.nav-menu a.btn-primary:hover { background: var(--brand-hover); }
/* F11: color-mix를 모르는 브라우저(Safari 16.2 미만)는 위의 불투명 바탕을 쓴다. var()가 든 값은 구문 단계에서 버려지지 않아 '대체값 앞줄' 방식이 통하지 않으므로 @supports로 나눈다 */
@supports (background: color-mix(in srgb, #000 50%, transparent)) {
  .nav { background: color-mix(in srgb, var(--bg) 92%, transparent); }
}
@media (min-width: 960px) {
  .nav-service { display: inline; }
  .nav-menu a { padding: var(--sp-1) 12px; }
  .nav-menu .nav-cta { display: inline-flex; margin-left: var(--sp-1); }
}

/* 4-1. 모바일 상단 메뉴(T-0106, 대표 지시 10/26): 959px 이하에서 [로고] … [계산하기] [메뉴] + 펼침 패널.
   - 줄 높이는 --nav-h 56px 그대로, 누르는 영역은 모두 44px 이상(계산하기 44, 메뉴 버튼 44×44, 패널 행 56·44).
   - 스크립트(/assets/common/v2/nav.js)가 .nav 에 is-js 를 붙였을 때만 바뀐다. 스크립트가 없으면 위의 글자 메뉴 그대로.
   - 데스크톱(960px 이상)은 버튼·패널을 숨기고 4절 모양을 그대로 쓴다.
   - 움직임: 패널이 4px 내려오며 나타나기 하나(.16s). prefers-reduced-motion이면 끈다(13절). */
.nav-toggle, .nav-panel { display: none; }
@media (max-width: 959px) {
  .nav-menu a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav .logo { min-height: 44px; }
  .nav.is-js .nav-menu a:not(.btn) { display: none; }
  .nav.is-js .nav-menu a.btn { display: inline-flex; min-height: 44px; padding: 0 var(--sp-2); }
  .nav.is-js .wrap { gap: var(--sp-1); }
  .nav-toggle { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -6px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .12s, color .12s; }
  .nav-toggle:hover { background: var(--surface); }
  .nav-toggle[aria-expanded="true"] { background: var(--brand-tint); color: var(--brand); }
  .nav-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
  .nav-toggle .i-close, .nav-toggle[aria-expanded="true"] .i-open { display: none; }
  .nav-toggle[aria-expanded="true"] .i-close { display: block; }
  .nav.is-open { background: var(--bg); }
  /* 패널 아래 어두운 막: 내용과 메뉴를 나눈다. 누르면 닫힌다(nav.js). .nav 의 backdrop-filter 가 fixed 기준을 바꾸므로 absolute 로 둔다 */
  .nav.is-open::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgb(17 20 18 / .32); z-index: -1; animation: nav-fade .16s ease-out both; }
  .nav-panel { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; animation: nav-in .16s cubic-bezier(.2, .7, .3, 1) both; }
  .nav .nav-panel .wrap { display: block; height: auto; padding-top: var(--sp-1); padding-bottom: var(--sp-3); }
  .np-label { display: flex; align-items: center; min-height: 44px; font-size: var(--f-min); font-weight: 600; color: var(--ink-2); text-decoration: none; }
  a.np-label:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
  .np-list, .np-sub { list-style: none; margin: 0; padding: 0; }
  .np-list > li { border-top: 1px solid var(--line); }
  .np-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 56px; font-size: var(--f-h3); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
  .np-item .ic { color: var(--ink-2); }
  .np-item:hover { color: var(--brand); }
  .np-item:hover .ic { color: var(--brand); }
  .np-sub { margin: -4px 0 var(--sp-2); display: grid; }
  .np-sub a { display: flex; align-items: center; min-height: 44px; padding-left: var(--sp-2); border-left: 2px solid var(--line); font-size: var(--f-sm); color: var(--ink-2); text-decoration: none; }
  .np-sub a:hover { color: var(--ink); border-left-color: var(--line-ui); }
  .np-sub a[aria-current="page"] { color: var(--brand); font-weight: 700; border-left-color: var(--brand); }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-color-scheme: dark) { .nav.is-open::after { background: rgb(0 0 0 / .55); } }

/* ================= 5. 첫 화면 ================= */
.hero { padding: var(--sp-3) 0 var(--sp-5); }
.hero .grid { row-gap: var(--sp-3); }
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); font-size: var(--f-min); font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.hero h1 { margin: 12px 0 0; font-size: var(--f-display); line-height: 1.22; font-weight: 800; letter-spacing: -0.04em; }
.hero .sub { margin-top: var(--sp-1); font-size: var(--f-body); line-height: 1.55; color: var(--ink-2); max-width: 24em; }
.br-d { display: none; }
.count { display: none; margin-top: var(--sp-4); }
.count-n { display: flex; align-items: baseline; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.count-n b { font-size: 88px; line-height: .9; font-weight: 800; color: var(--brand); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.count-n span { font-size: 22px; font-weight: 700; }
.count-n em { margin-left: 4px; font-style: normal; font-size: var(--f-body); color: var(--ink-2); }
.strip svg { display: block; width: 100%; height: 56px; }
.strip-scale { position: relative; height: 22px; margin-top: var(--sp-1); font-size: var(--f-min); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.strip-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.strip-scale .s { left: 0; transform: none; }
.strip-scale .e { right: 0; left: auto; transform: none; }
.privacy { display: none; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); font-size: var(--f-min); color: var(--ink-2); }
.privacy .ic { color: var(--brand); }
.status-card { font-size: var(--f-sm); line-height: 1.5; }
@media (min-width: 960px) {
  .hero { padding: var(--sp-5) 0 var(--sp-6); }
  .hero .grid { align-items: stretch; } /* T-0077: 왼쪽 단을 입력 카드 높이에 맞춰 늘린다 */
  .hero-text { grid-column: 1 / span 4; display: flex; flex-direction: column; padding: var(--sp-4) 0; } /* 위아래 32 = 입력 카드 안쪽 여백 → 제목 윗선·개인정보 줄이 카드의 질문 윗선·맞벌이 줄과 맞는다 */
  .hero-card { grid-column: 5 / span 8; }
  .hero h1 { margin-top: var(--sp-2); }
  .hero h1 { line-height: 1.12; font-size: clamp(36px, 3.5vw, 46px); word-break: keep-all; } /* 대표 제목 지시(10/26) '한도 꽉 채워 받기'가 왼쪽 4칸에서 두 줄로 끝나게 */
  .hero .sub { margin-top: var(--sp-2); font-size: 18px; max-width: 26em; }
  .br-d { display: inline; }
  .eyebrow #days-tag { display: none; } /* 데스크톱은 큰 숫자 67이 같은 정보를 보여 준다 */
  .count { display: block; }
  .hero-text .count { margin-top: auto; padding-top: var(--sp-5); } /* T-0077: 남은 날 그림을 카드 아래쪽(입력·버튼 높이)으로 내린다 */
  .count[hidden] { display: none; }
  .strip svg { height: 80px; }
  .privacy { display: flex; }
  .count[hidden] + .privacy { margin-top: auto; }
}

/* 계산 카드 */
.calc { display: grid; gap: var(--sp-3); padding: 20px var(--sp-2); }
.calc .panel { display: grid; gap: var(--sp-2); }
.common { display: grid; gap: var(--sp-2); }
@media (min-width: 960px) { .common { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.grp { display: grid; gap: var(--sp-1); }
.grp-k { padding: 0; font-size: var(--f-sm); font-weight: 700; line-height: 1.4; }
.grp .label { font-size: var(--f-min); font-weight: 600; color: var(--ink-2); }
.grp-wrap { display: grid; gap: 6px; }
.b1-help { align-items: flex-start; }
.b1-help .help { flex: 1; }
.submit-row { display: grid; gap: 12px; }
.after-note { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--f-min); color: var(--ink-2); line-height: 1.5; }
.after-note .ic { width: 18px; height: 18px; color: var(--brand); }
/* T-0077 모바일 아래 고정 계산 버튼: 입력 카드가 화면에 있고 진짜 버튼이 안 보일 때만 나타난다(app.js 맨 끝 T-0077 블록) */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
.dock[hidden] { display: none; }
@media (min-width: 960px) { .dock, .dock[hidden] { display: none; } }
.months { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--sp-1); font-size: var(--f-min); color: var(--ink-2); min-height: 40px; }
.months > span { display: inline-flex; align-items: center; gap: 6px; }
.months .fold > summary { white-space: nowrap; }
.months .ic { width: 18px; height: 18px; color: var(--brand); }
.months .fold[open] { flex-basis: 100%; }
.months .fold[open] > summary { margin-left: auto; display: flex; width: max-content; }
.months .fold-body { color: var(--ink); font-size: var(--f-body); }
.status { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--sunk); color: var(--ink); font-size: var(--f-sm); line-height: 1.5; }
.status .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--ink-2); }
.status a { color: var(--brand); font-weight: 700; }
.carry { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-1); }
.tip-body p + p { margin-top: 0; }
.carry .tag { font-weight: 600; }
.b1-lines { display: grid; gap: var(--sp-1); }
.b1-line { display: grid; grid-template-columns: 124px minmax(0, 1fr) 40px; gap: var(--sp-1); align-items: center; }
.b1-line .cash-hint, .b1-line .reading { grid-column: 1 / -1; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--bg); color: var(--ink); }
.add-line { justify-self: start; }
.mini-split { display: grid; gap: 6px; }
.mini-split .track { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.mini-split .track i { display: block; }
.mini-split .legend { display: flex; justify-content: space-between; gap: var(--sp-1); flex-wrap: wrap; font-size: var(--f-min); color: var(--ink-2); }
.mini-split .legend b { color: var(--ink); }
@media (min-width: 960px) { .calc { padding: var(--sp-4); gap: var(--sp-3); } .calc .panel { gap: var(--sp-3); } }

/* ================= 6. 기능 소개 ================= */
.features { padding-bottom: var(--sp-6); }
.feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: 4px; align-content: start; }
.feature .badge { grid-row: span 4; }
.feature .tag { justify-self: start; margin-bottom: 4px; }
.feature .card-title { margin: 0; }
.feature .card-act { margin-top: var(--sp-1); grid-column: 2; justify-self: start; }
@media (min-width: 960px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .badge { grid-row: auto; margin-bottom: var(--sp-2); }
  .feature .card-act { grid-column: 1; }
  .features { padding-bottom: var(--sp-7); }
}

/* ================= 7. 구획 머리 ================= */
.section { padding: var(--sp-6) 0; border-top: 1px solid var(--line); }
@media (min-width: 960px) { .section { padding: var(--sp-7) 0; } }
.sec-head { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); align-content: start; }
.sec-head h2 { margin: 0; font-size: var(--f-h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.sec-head p { font-size: var(--f-sm); color: var(--ink-2); }
.sec-head .sec-k { font-size: var(--f-min); font-weight: 700; color: var(--brand); } /* 구획 머리 작은 이름: 태그 대신 브랜드 글자(v4) */
@media (min-width: 960px) { .sec-head { margin-bottom: var(--sp-4); } }

/* ================= 8. 결과 ================= */
/* v4: 결과는 입력 카드 바로 아래에 열린다(구분선 없이 여백으로) */
.result { border-top: 0; padding-top: 0; }
.r-head { margin-bottom: var(--sp-1); }
.estimate-line { display: flex; gap: var(--sp-1); align-items: flex-start; flex-wrap: wrap; font-size: var(--f-min) !important; line-height: 1.5; }
.period { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--f-sm); font-weight: 600; color: var(--ink-2); margin-bottom: var(--sp-3); }
.period .ic { color: var(--brand); }

/* 큰 숫자 카드(브랜드색으로 채움). 추가 공제 없음(full)은 흰 카드 */
.figure-card { background: var(--brand); color: var(--on-brand); border: 0; display: grid; gap: var(--sp-2); padding: var(--sp-3) 20px; align-content: start; align-self: start; } /* F5: 옆 달력 높이로 늘어나지 않게 */
@media (min-width: 960px) { .figure-card { padding: var(--sp-4); } }
.figure-card .means { font-size: var(--f-body); font-weight: 700; line-height: 1.5; }
.figure-card .fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; line-height: 1; font-variant-numeric: tabular-nums; }
.figure-card .fig .pre { font-size: 22px; font-weight: 700; }
.figure-card .fig .n { font-size: var(--f-figure); font-weight: 800; letter-spacing: -0.04em; }
.figure-card .fig .u { font-size: 24px; font-weight: 700; }
.figure-card .fig .none-text { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.figure-card .total { font-size: var(--f-body); line-height: 1.55; }
.figure-card .applied, .figure-card .recalc, .figure-card .gap-warn { font-size: var(--f-min); line-height: 1.5; }
.figure-card .recalc { border-top: 1px solid var(--on-brand-track); padding-top: 12px; }
.figure-card .gap-warn { display: flex; gap: var(--sp-1); align-items: flex-start; font-weight: 600; }
.figure-card .gap-warn .ic { width: 18px; height: 18px; margin-top: 2px; }
.figure-card .gap-warn a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.figure-card.is-none { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.figure-card.is-none .recalc { border-color: var(--line); }
.progress { display: grid; gap: 6px; }
.progress .p-head { display: flex; justify-content: space-between; gap: var(--sp-1); font-size: var(--f-min); font-weight: 600; font-variant-numeric: tabular-nums; }
.progress .p-track { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--on-brand-track); }
.progress .p-track i { display: block; }
.progress .p-now { background: var(--on-brand); }
.progress .p-add { background: repeating-linear-gradient(135deg, var(--on-brand) 0 2px, transparent 2px 6px); opacity: .9; }
.is-none .progress .p-track { background: var(--line); }
.is-none .progress .p-now { background: var(--brand); }

/* 달력 */
.cal-card { display: grid; gap: var(--sp-2); align-content: start; }
.cal-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.cal-wrap.one { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
.cal h3 { margin: 0 0 6px; font-size: var(--f-min); font-weight: 700; }
.cal ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal li { aspect-ratio: 1; display: grid; place-items: center; font-size: var(--f-min); font-weight: 600; line-height: 1; border-radius: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; color: var(--ink-2); }
.cal li.wd { aspect-ratio: auto; height: 20px; }
.cal li.d { background: var(--brand-tint); color: var(--brand); }
.cal li.today { background: var(--brand); color: var(--on-brand); }
.cal li.end { box-shadow: inset 0 0 0 2px var(--brand); }
.cal li.past { color: var(--ink-2); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--f-min); color: var(--ink-2); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.cal-legend .k-today { background: var(--brand); }
.cal-legend .k-day { background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-legend .k-end { box-shadow: inset 0 0 0 2px var(--brand); }
.cal-sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; font-size: var(--f-sm); color: var(--ink-2); }
.cal-sum b { font-size: 22px; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.legal { display: flex; gap: var(--sp-1); font-size: var(--f-min); line-height: 1.5; color: var(--ink-2); }
.legal .ic { width: 18px; height: 18px; margin-top: 2px; }

.row-link { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink); }
.row-link .card-title { flex: 1; }
.row-link .ic.go { color: var(--brand); }
.row-link:hover { border-color: var(--brand); color: var(--ink); }

/* 어떤 카드로 쓸까요(v4): 사용액 막대 + 같은 순서의 구간 설명 3칸 + 추가 공제 한 줄 */
.order { display: grid; gap: 20px; }
.order-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap; }
.zones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.zone { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
.zone .sw { width: 16px; height: 16px; border-radius: 4px; margin-top: 3px; grid-row: span 3; }
.zone .k { font-size: var(--f-min); font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.zone .v { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; font-variant-numeric: tabular-nums; }
.zone .l { font-size: var(--f-min); color: var(--ink-2); line-height: 1.5; }
.zone.now .v { color: var(--brand); }
@media (min-width: 960px) { .zones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } }
.sw.after { background: repeating-linear-gradient(135deg, var(--line-ui) 0 2px, var(--surface) 2px 6px); box-shadow: inset 0 0 0 1px var(--line-ui); }
.extra { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-2); align-items: start; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.extra .card-title { font-size: var(--f-body); margin-bottom: 2px; }

/* 결과 보관·보내기(T-0057, T-0015 2-2·2-3). 기존 토큰·부품(.card .badge .btn .chips .box)만 조합 */
.share-row { display: grid; gap: var(--sp-2); }
.share-head { display: grid; gap: 2px; }
.share-head .card-title { margin-bottom: 2px; }
.share-acts { display: grid; gap: var(--sp-1); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .share-acts { grid-template-columns: repeat(2, max-content); } }
.copy-panel { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.copy-text { margin: 0; padding: 12px var(--sp-2); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); font: 400 var(--f-sm)/1.6 var(--font); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; font-variant-numeric: tabular-nums; }
.copy-panel .btn { justify-self: start; }
@media (max-width: 599px) { .copy-panel .btn { justify-self: stretch; } }
.link-box input { font-size: var(--f-sm); font-weight: 600; }
.share-msg { font-size: var(--f-min); font-weight: 700; line-height: 1.5; color: var(--brand); }
.share-msg:empty { display: none; }
.couple-copy { display: grid; gap: 12px; }
.couple-copy .btn { justify-self: start; }
@media (max-width: 599px) { .couple-copy .btn { justify-self: stretch; } }

/* 다시 계산하기 좋은 날: 점 3개 타임라인(모바일 세로, 600px 이상 가로) */
.recheck { display: grid; gap: var(--sp-2); }
.rc-line { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: minmax(0, 1fr); }
.rc-line li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: 2px; align-content: start; }
.rc-line .badge { grid-row: span 3; position: relative; z-index: 1; }
.rc-line li + li::before { content: ""; position: absolute; left: 19px; top: calc(-1 * var(--sp-2)); height: var(--sp-2); border-left: 2px solid var(--line); }
.rc-line .rc-when { font-size: var(--f-body); font-weight: 700; line-height: 1.4; display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.rc-line .past .badge { background: var(--bg); color: var(--ink-2); }
.rc-line .past .rc-when { color: var(--ink-2); }
.subrow { display: grid; gap: var(--sp-2); align-items: start; }
@media (min-width: 960px) { .subrow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-3); } }

/* 사용액 막대 */
.usage { display: grid; gap: var(--sp-1); }
.usage .u-wrap { position: relative; margin: 48px 0 0; }
.usage .u-wrap.has-below { margin-bottom: 56px; }
.usage .u-track { display: flex; height: 28px; border-radius: 6px; overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.usage .u-track i { display: block; }
.usage .u-used { background: var(--ink-2); }
.usage .u-fill { background: var(--brand); }
.usage .u-gap { background: repeating-linear-gradient(135deg, var(--ink-2) 0 2px, transparent 2px 7px); }
.usage .u-rest { background: repeating-linear-gradient(135deg, var(--line-ui) 0 2px, transparent 2px 7px); }
.usage .mark { font-style: normal; position: absolute; top: -48px; bottom: 0; width: 0; border-left: 2px solid var(--ink); }
.usage .mark span { position: absolute; top: 0; left: 6px; font-size: var(--f-min); font-weight: 700; white-space: nowrap; line-height: 1.3; }
.usage .mark.right span { left: auto; right: 6px; text-align: right; }
.usage .mark.below { top: 0; bottom: -48px; }
.usage .mark.below span { top: auto; bottom: 0; }
.usage .mark small { display: block; font-size: var(--f-min); font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.u-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--f-sm); }
.u-legend li { display: flex; align-items: center; gap: var(--sp-1); }
.u-legend li b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 960px) { .u-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } .u-legend li b { margin-left: 4px; } }

/* 생활비 판정 */
.f5 { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-3); }
#f5-fold + #r-basis { border-top: 0; }
.f5-row { display: grid; gap: var(--sp-2); align-items: end; }
@media (min-width: 600px) { .f5-row { grid-template-columns: minmax(0, 1fr) auto; } .f5-row .field { max-width: 420px; } }
.verdict { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.vbars { display: grid; gap: 6px; }
.vbar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px; align-items: center; gap: var(--sp-1); font-size: var(--f-min); }
.vbar .t { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.vbar .t i { display: block; height: 100%; background: var(--brand); }
.vbar .t i.g { background: var(--ink-2); }
.vbar b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sentence { font-size: var(--f-body); font-weight: 700; line-height: 1.55; }

/* 근거 접기 */
.basis-fold { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.basis-fold > summary { width: 100%; justify-content: space-between; min-height: 56px; color: var(--ink); font-size: var(--f-body); }
.basis-fold > summary .ic { color: var(--brand); }
.basis-body { padding-bottom: var(--sp-3); display: grid; gap: var(--sp-2); font-size: var(--f-sm); color: var(--ink-2); }
.basis-body a { color: var(--brand); font-weight: 600; }
.basis-list { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
table.rows { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--f-sm); }
table.rows caption { text-align: left; font-size: var(--f-min); color: var(--ink-2); padding-bottom: var(--sp-1); }
table.rows th, table.rows td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 400; }
table.rows td.num { text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; padding-left: var(--sp-2); }
table.rows th { color: var(--ink-2); }

/* ================= 9. 맞벌이: 결과의 다음 단계(v4) ================= */
.couple { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.couple-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px var(--sp-2); align-items: center; padding: 20px var(--sp-2); }
.couple-head .card-line { margin-top: 2px; }
.couple-head .btn { grid-column: 1 / -1; justify-self: start; }
.couple-toggle .ic { transition: transform .15s; }
.couple-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
@media (min-width: 960px) { .couple-head { grid-template-columns: 40px minmax(0, 1fr) auto; padding: var(--sp-3) 28px; } .couple-head .btn { grid-column: auto; } }
.couple-body { border-top: 1px solid var(--line); padding: 20px var(--sp-2); background: var(--bg); }
@media (min-width: 960px) { .couple-body { padding: 28px; } }
.inherit { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); font-size: var(--f-min); color: var(--ink-2); }
.c-form { display: grid; gap: 20px; align-content: start; }
.c-act .btn { width: 100%; }
@media (min-width: 960px) {
  .c-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-3); align-items: start; }
  .c-span { grid-column: 1 / -1; }
  .c-act { display: flex; justify-content: flex-end; }
  .c-act .btn { width: auto; min-width: 240px; }
}
.c-out { display: grid; gap: var(--sp-3); align-items: start; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.c-out:empty { display: none; }
.c-sum, .c-alloc { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
@media (min-width: 960px) { .c-out { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.err.is-info { font-weight: 400; color: var(--ink-2); }
.err.is-info .ic { color: var(--ink-2); }
.split-bar { display: grid; gap: var(--sp-1); }
.split-bar .s-track { display: flex; height: 36px; border-radius: var(--r-sm); overflow: hidden; background: var(--line); }
.split-bar .s-self { background: var(--ink-2); color: var(--surface); }
.split-bar .s-sp { background: var(--brand); color: var(--on-brand); }
.split-bar .s-track span { display: flex; align-items: center; min-width: 0; overflow: hidden; padding: 0 10px; font-size: var(--f-min); font-weight: 700; white-space: nowrap; }
.split-bar .s-cap { font-size: var(--f-min); color: var(--ink-2); line-height: 1.5; }
.alloc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.alloc li { display: grid; gap: 6px; padding: 12px var(--sp-2) 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.alloc li.best { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.alloc li.best .tag { justify-self: start; }
.alloc .a-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1); flex-wrap: wrap; }
.alloc .a-name { font-size: var(--f-sm); font-weight: 700; }
.alloc .a-save { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.alloc li.best .a-save { color: var(--brand); }
.alloc .a-track { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.alloc .a-track i { display: block; height: 100%; background: var(--ink-2); }
.alloc li.best .a-track i { background: var(--brand); }
.alloc .a-sub { display: flex; gap: var(--sp-2); font-size: var(--f-min); color: var(--ink-2); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.note { font-size: var(--f-min); line-height: 1.5; color: var(--ink-2); margin: 0; }
.warn-line { display: flex; gap: var(--sp-1); align-items: flex-start; font-size: var(--f-min); line-height: 1.5; font-weight: 600; color: var(--ink); }
.warn-line .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-2); }
.c-sum .warn-line { font-weight: 400; color: var(--ink-2); }
.c-sum > .fold .note { padding-bottom: var(--sp-1); }

/* ================= 9-2. 계산하면 알 수 있는 것: 질문-답 행(상자·꼬리표·링크 없음) ================= */
.qa-sec { border-top: 0; padding-top: 0; }
.qa { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.qa li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: 4px; align-content: start; }
.qa li .badge { grid-row: span 2; }
.qa h3 { font-size: 18px; font-weight: 800; line-height: 1.45; letter-spacing: -0.02em; }
.qa p { font-size: var(--f-sm); color: var(--ink-2); line-height: 1.55; }
@media (min-width: 960px) { .qa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .qa li { grid-template-columns: minmax(0, 1fr); } .qa li .badge { grid-row: auto; margin-bottom: 12px; } }

/* ================= 10. 계산 근거 표(흰 띠 구획) ================= */
.band { background: var(--surface); border-bottom: 1px solid var(--line); }
.band + .section { border-top: 0; }
@media (max-width: 959px) {
  .law-table thead { display: none; }
  .law-table tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--line); }
  .law-table th, .law-table td { border: 0 !important; padding: 2px 0 !important; }
  .law-table td[data-k]::before { content: attr(data-k) " · "; color: var(--ink-2); font-weight: 600; }
}
@media (min-width: 960px) { .basis-table { grid-column: 5 / -1; } }
.basis-table { overflow-x: auto; }
.basis-table .note { margin-top: var(--sp-2); }
.basis-table a { color: var(--brand); font-weight: 600; }
.law-table th[scope="row"] { min-width: 7.5em; color: var(--ink); font-weight: 600; padding-right: var(--sp-2); }
.law-table thead th { font-size: var(--f-min); font-weight: 700; color: var(--ink-2); padding-right: var(--sp-1); }
.law-table td { color: var(--ink); padding-right: var(--sp-1); }
.pending { font-weight: 600; color: var(--ink-2); }

/* 공제 안내: 목록 행(제목 + 한 줄 + 화살표, 행 전체가 링크) */
.guide-list { border-top: 1px solid var(--line); }
.guide-list a { display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: var(--sp-2); row-gap: 4px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.guide-list a:hover .g-t { text-decoration: underline; text-underline-offset: 3px; }
.guide-list .g-t { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; }
.guide-list .g-l { grid-column: 1; font-size: var(--f-sm); color: var(--ink-2); line-height: 1.5; }
.guide-list .ic { grid-row: 1 / span 2; grid-column: 2; color: var(--brand); }
@media (min-width: 960px) { .guide-list { grid-column: 5 / -1; } }

/* ================= 11. 푸터 ================= */
.foot { background: var(--surface); border-top: 1px solid var(--line); padding: var(--sp-5) 0 var(--sp-4); font-size: var(--f-min); color: var(--ink-2); line-height: 1.6; }
.foot .grid { row-gap: var(--sp-3); }
.foot-h { font-size: var(--f-min); font-weight: 700; color: var(--ink); margin: 0 0 var(--sp-1); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot .logo { font-size: 18px; margin-bottom: var(--sp-1); }
.foot .copy { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }

/* ================= 12. 해설 글(guide) ================= */
/* 본문 칸: 960px 이상에서 12칸 중 가운데 8칸(3~10). 한 줄 길이를 40자 안팎으로 묶는다 */
.article { padding: var(--sp-3) 0 var(--sp-6); }
.article-col { min-width: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 960px) { .article { padding: var(--sp-5) 0 var(--sp-7); } .article-col { grid-column: 3 / span 8; gap: var(--sp-5); } }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--sp-1); font-size: var(--f-min); color: var(--ink-2); line-height: 1.5; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--line-ui); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.article-head { display: grid; gap: var(--sp-2); }
.article-head h1 { font-size: 26px; line-height: 1.3; font-weight: 800; letter-spacing: -0.035em; word-break: keep-all; }
@media (min-width: 960px) { .article-head h1 { font-size: 40px; line-height: 1.25; } }
.article-meta { display: flex; gap: var(--sp-1); align-items: flex-start; font-size: var(--f-min); line-height: 1.5; color: var(--ink-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.article-meta .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--brand); }
/* 본문: 큰 제목 대비, 작은 본문. 문단 사이 16px, 소제목 위 48px */
.prose { font-size: var(--f-body); line-height: 1.75; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--sp-2); }
.prose > h2 { margin-top: var(--sp-5); font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -0.025em; }
.prose > h2 + * { margin-top: 12px; }
@media (min-width: 960px) { .prose > h2 { font-size: 24px; } }
.prose a { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }
.prose .table-wrap { overflow-x: auto; }
.prose table.rows { font-size: var(--f-sm); }
.prose table.rows th[scope="row"] { color: var(--ink); font-weight: 600; padding-right: var(--sp-2); }
.prose table.rows thead th { font-size: var(--f-min); font-weight: 700; color: var(--ink-2); }
.prose table.rows td { color: var(--ink); padding-right: var(--sp-1); }
.prose table.rows th.num, .prose table.rows td.num { text-align: right; padding-left: var(--sp-1); padding-right: 0; }
.prose table.rows thead th.num { color: var(--ink-2); font-weight: 700; }
/* 공제율 막대: 40% = 칸 전체. 숫자는 글자로 같이 쓴다 */
.rate-table td.rate { min-width: 128px; }
.rate-bar { display: block; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 7px 0 6px; }
.rate-bar i { display: block; width: var(--w); height: 100%; background: var(--brand); }
.rate-table td.rate b { font-variant-numeric: tabular-nums; }
.limit-table td.num { font-weight: 700; }
/* 계산 예시 카드 */
.prose .example { display: grid; gap: var(--sp-2); }
.prose .example > * + * { margin-top: 0; }
.ex-bar { display: grid; gap: var(--sp-1); }
.ex-head { display: flex; justify-content: space-between; gap: var(--sp-1); flex-wrap: wrap; font-size: var(--f-min); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ex-head b { color: var(--ink); }
.ex-track { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); }
.ex-track i { display: block; width: var(--w); }
.ex-track .ex-now { background: var(--brand); }
.ex-track .ex-add { background: repeating-linear-gradient(135deg, var(--brand) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--brand); }
.ex-key { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--f-min); color: var(--ink-2); }
.ex-key span { display: inline-flex; align-items: center; gap: 6px; }
.ex-key i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.ex-key .k-now { background: var(--brand); }
.ex-key .k-add { background: repeating-linear-gradient(135deg, var(--brand) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--brand); }
.ex-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--f-sm); line-height: 1.6; font-variant-numeric: tabular-nums; }
.ex-list li { padding-left: var(--sp-2); position: relative; }
.ex-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
/* 계산기로 가는 카드 */
.cta-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-2); align-items: start; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cta-card .cta-text { display: grid; gap: 4px; }
.cta-card .btn { grid-column: 1 / -1; }
@media (min-width: 600px) { .cta-card .btn { justify-self: start; grid-column: 2; } }
.cta-solo { margin: 0; }
@media (max-width: 599px) { .cta-solo .btn { width: 100%; } }
.sources .basis-list { padding-bottom: var(--sp-3); font-size: var(--f-sm); line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.sources .basis-list a { color: var(--brand); font-weight: 600; }
.more .sec-head h2 { font-size: var(--f-h2); }

/* ================= 13. 움직임: 결과 카드 떠오르기 하나 ================= */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .28s cubic-bezier(.2, .7, .3, 1) both; }
.rise + .rise { animation-delay: .04s; }
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .nav-panel, .nav.is-open::after { animation: none; }
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .fold[open] > summary .ic { transform: none; }
}

/* ================= 14. 광고 자리(T-0018) =================
   승인 전에는 data-ad-state="off"(공통 base.css, display:none)라 화면에 없다. ?adpreview=1 일 때만 점선 상자.
   - 결과 흐름 맨 끝(계산 근거 접기 아래)에 일반 흐름으로만 둔다: 고정·떠 있는 위치 금지(결과 가림 방지).
   - 라벨은 애드센스 허용 문구 '광고'만 쓴다(클릭 유도 문구 금지).
   - '계산 근거 보기' 접기(누르는 요소)와 라벨 포함 56px 이상 띄워 실수 클릭을 줄인다. */
#result .ad-slot[data-ad-state] { position: relative; margin: calc(var(--sp-4) + 24px) 0 0; }
#result .ad-slot[data-ad-state="preview"]::before,
#result .ad-slot[data-ad-state="on"]::before {
  content: "광고"; position: absolute; left: 0; bottom: 100%; padding-bottom: 4px;
  font: 600 var(--f-min)/1.4 var(--font); color: var(--ink-2);
}