/*
  2027년생 받을 돈 계산기 · 서비스 스타일 v1 (P-002, 구현 T-0104 임가온, 아트 디렉션 T-0100 강보름)
  - 공통 /assets/common/v2/base.css 위에 덧입힌다. 공통 파일은 고치지 않는다.
  - 부품 규격(.nav .card .btn .tag .box .chip .tip .fold .badge)은 1주기 card-two-months v4와 같고, 브랜드 토큰만 남색으로 바꾼다.
  - 색: 바탕 #f5f7f9 + 브랜드 #1d5b8f 1개(명도 단계) + 글자 2단계. 형태 4가지는 남색 명도 3단계 + 빗금.
    대비(T-0100): 브랜드 흰 면 7.13 · 바탕 6.64 / 글자 16.15 · 7.08 / 입력 테두리 3.41(비텍스트).
  - 간격 8px 단위, 960px 이상 12칸 격자(최대 1168px). 글자 최소 14px.
  - 움직임: 결과 카드가 마우스를 올리면 2px 떠오르는 것 하나(0.2초). prefers-reduced-motion이면 끈다.
*/

/* ================= 1. 토큰 ================= */
:root {
  --bg: #f5f7f9;
  --surface: #ffffff;
  --brand: #1d5b8f;
  --brand-hover: #184e7b;
  --brand-press: #123a5c;
  --brand-tint: #e6eff7;
  --on-brand: #ffffff;
  --ink: #151b21;
  --ink-2: #4a5561;
  --line: #e1e6eb;
  --line-ui: #7b8794;
  --disabled-bg: #e8ecf0;
  /* 받는 형태 4가지(막대·범례) */
  --f-cash: #123a5c;
  --f-gift: #3f7fb8;
  --f-vou: #a9c9e6;
  --f-vou-edge: #3f7fb8;
  --f-tbd: #1d5b8f;
  --f-tbd-bg: #ffffff;

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

  /* common v2 토큰을 이 서비스 값으로 */
  --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: #111519; --surface: #181d22; --brand: #8dbbe6; --brand-hover: #a7cbec; --brand-press: #c1dbf2;
    --brand-tint: #1c2b3a; --on-brand: #0d1a26;
    --ink: #e7ecf0; --ink-2: #b0bac4; --line: #2a323a; --line-ui: #7b8794; --disabled-bg: #252c33;
    --f-cash: #cfe2f4; --f-gift: #6fa3d6; --f-vou: #2b4e70; --f-vou-edge: #6fa3d6; --f-tbd: #8dbbe6; --f-tbd-bg: #181d22;
    --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: 40px; --f-h2: 30px; --f-delta: 56px; --gutter: 24px; --nav-h: 64px; }
}

/* ================= 2. 기본 ================= */
[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, figure { margin: 0; }
a:hover { color: inherit; }
.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. 디자인 시스템 부품(1주기 규격) ================= */
.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:disabled, .btn[aria-disabled="true"] { background: var(--disabled-bg); color: var(--ink-2); border-color: transparent; cursor: not-allowed; }
.btn-block { width: 100%; }
.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-sample { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 800; }

.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-4); } }
.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; }
.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; }
.fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.label-row { display: flex; align-items: center; gap: 4px; min-height: 22px; }
.label { display: block; padding: 0; font-size: var(--f-sm); font-weight: 700; line-height: 1.4; }
fieldset.fs > legend.label { margin-bottom: 6px; }
fieldset.fs .label-row > legend.label { float: left; margin: 0; }
.box { position: relative; 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 17px/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: #151b21; background: #ffffff; }
.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); }
.help.center { text-align: center; }
.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; }

.tipwrap { position: relative; }
.tip > summary { list-style: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -11px -8px; /* D5(T-0140): 보이는 원은 그대로, 누르는 영역만 44px */ 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; color: var(--ink); background: var(--surface); border: 1.5px solid var(--brand); border-radius: var(--r-sm); padding: 12px; }

.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: 44px; 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; }

/* 스위치 */
.switch-row { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-size: var(--f-sm); font-weight: 600; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 40px; height: 24px; margin: 0; cursor: pointer; }
.switch-ui { position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-ui); flex: none; transition: background-color .12s; }
.switch-ui::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--line-ui); transition: transform .12s; }
.switch input:checked + .switch-ui { background: var(--brand); box-shadow: none; }
.switch input:checked + .switch-ui::after { background: var(--on-brand); transform: translateX(16px); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--brand); outline-offset: 2px; }

.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:last-child { transform: rotate(180deg); }
.fold-body { display: grid; gap: var(--sp-1); padding-top: var(--sp-1); }

/* ================= 4. 내비게이션 ================= */
.nav { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
@supports (background: color-mix(in srgb, #000 50%, transparent)) {
  .nav { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
.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); min-height: 44px; 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: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--f-sm); color: var(--ink-2); padding-left: var(--sp-2); border-left: 1px solid var(--line); }
a.nav-service { text-decoration: none; } /* 해설 페이지에서는 계산기로 가는 링크(card-two-months와 같음) */
a.nav-service:hover { color: var(--ink); }
.nav-menu { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); }
.nav-menu a[hidden] { display: none; } /* 계산 뒤에만 보이는 항목(data-after, T-0135 ①) */
.nav-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--f-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; }
.nav-menu a:hover { color: var(--ink); background: var(--surface); }
.nav-menu a.nav-cta { min-height: 40px; padding: 0 var(--sp-2); margin-left: var(--sp-1); font-weight: 700; color: var(--on-brand); }
.nav-menu a.nav-cta:hover { color: var(--on-brand); background: var(--brand-hover); }
.nav-menu a.nav-cta:active { background: var(--brand-press); }

/* 4-1. 모바일 상단 메뉴 — 셈 공통 규격 v1(T-0121). card-two-months 4-1절과 같은 규칙·같은 값.
   - 959px 이하: [로고 | 서비스명] … [메뉴 44×44] + 펼침 패널. 계산기 페이지(.nav-calc)는 행동 버튼을 줄에 두지 않는다
     (입력 카드가 첫 화면에 있으므로). 패널 맨 위 '계산기'가 입력 카드로 돌아가는 길이다.
   - 열고 닫기는 /assets/common/v2/nav.js(.nav 에 is-js). 스크립트가 없으면 서비스명을 숨기고 글자 메뉴를 44px로 보인다.
   - 해설 페이지(guide/*, .nav-calc 없음): 959px 이하 [로고] … [계산하기] [메뉴], 서비스명은 패널 맨 위 이름표(T-0126).
   - 960px 이상: 버튼·패널을 숨기고 [로고 | 서비스명] … [글자 메뉴] [계산하기].
   - 움직임: 패널이 4px 내려오며 나타나기 하나(.16s). prefers-reduced-motion이면 끈다. */
.nav-toggle, .nav-panel { display: none; }
@media (max-width: 959px) {
  .nav .wrap { gap: 12px; }
  .nav .logo { min-height: 44px; }
  .nav-service { font-size: var(--f-min); padding-left: 12px; }
  .nav:not(.is-js) .nav-service { display: none; }
  /* 스크립트가 없을 때 글자 메뉴가 좁은 폭에서 두 줄로 꺾이지 않게: 한 줄 유지, 넘치면 메뉴 안에서만 가로 스크롤(T-0135 ③) */
  .nav:not(.is-js) .nav-menu { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav:not(.is-js) .nav-menu a { flex: none; white-space: nowrap; padding: 0 8px; }
  .nav-calc .nav-menu a.nav-cta { display: none; }
  .nav-calc.is-js .nav-menu { display: none; }
  /* 해설 페이지(.nav-calc 없음, T-0126): [로고] … [계산하기] [메뉴]. 서비스명은 줄에서 빼고 패널 이름표로 둔다 */
  .nav:not(.nav-calc) .nav-service { display: none; }
  .nav:not(.nav-calc).is-js .wrap { gap: var(--sp-1); }
  .nav:not(.nav-calc).is-js .nav-menu a:not(.nav-cta) { display: none; }
  .nav:not(.nav-calc) .nav-menu a.nav-cta { min-height: 44px; margin-left: 0; }
  .nav-toggle { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; 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 .ic { width: 24px; height: 24px; }
  .nav-toggle .i-shut, .nav-toggle[aria-expanded="true"] .i-open { display: none; }
  .nav-toggle[aria-expanded="true"] .i-shut { display: block; }
  .nav.is-open { background: var(--bg); }
  .nav.is-open::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgb(17 21 25 / .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-list { list-style: none; margin: 0; padding: 0; }
  .np-list > li + 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, .np-item:hover .ic { color: var(--brand); }
  .nav:not(.nav-calc) .nav-toggle { margin-left: 0; }
  .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-label + .np-list > li:first-child { border-top: 1px solid var(--line); }
  .np-sub { list-style: none; margin: -4px 0 var(--sp-2); padding: 0; 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); }
}
@media (max-width: 359px) { .nav-service { display: none; } }
@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-2) 0 var(--sp-5); }
.hero .grid { row-gap: var(--sp-3); align-items: start; }
.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 { text-wrap: balance; margin: 12px 0 0; font-size: var(--f-display); line-height: 1.25; 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); }
.calc { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.calc .chip span { height: 44px; } /* D5(T-0140): 터치 영역 44px */
.submit { display: grid; gap: 6px; margin-top: 4px; }
.shared { display: flex; gap: var(--sp-1); align-items: flex-start; padding: 12px; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--ink); font-size: var(--f-min); line-height: 1.5; font-weight: 600; }
.shared .ic { color: var(--brand); width: 18px; height: 18px; margin-top: 1px; }
/* 첫 화면은 글(제목·한 줄·배지)과 입력 카드만 둔다. 예시 결과 카드는 첫 화면 아래에서 시작한다(첫 화면 30단어 이하) */
.hero { padding-bottom: var(--sp-6); }
.result-sec { padding-top: var(--sp-5); }
@media (min-width: 960px) {
  .hero { padding: 0; }
  /* D7(T-0140): 화면 높이만큼 세로 가운데 정렬하던 것을 없애 배지 위 빈 면(약 150px)을 줄인다. 위아래 여백은 64px로 고정 */
  /* 첫 화면 높이는 유지해(아래 결과 카드 범례가 첫 화면에 걸리지 않게, 첫 화면 30단어) 남는 공간은 아래로 보낸다 */
  .hero-top { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); align-items: center !important; padding: var(--sp-6) var(--gutter); column-gap: var(--sp-6) !important; }
  .hero h1 { margin-top: var(--sp-3); font-size: 52px; line-height: 1.18; letter-spacing: -0.045em; }
  .hero .sub { margin-top: var(--sp-2); font-size: 19px; }
  .hero-top { align-content: start; align-items: stretch !important; }
  /* T-0167 3차: 미리보기를 바닥에 붙이던 것(margin-top:auto)을 없애고, 왼쪽 묶음(배지·제목·부제·미리보기)을 입력 카드 높이에 맞춰 세로 가운데 둔다 */
  .hero-left { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-1) 0 0; }
  /* T-0166(R2): '우리 지역 찾기'를 펼치면 입력 카드가 약 640px 길어져, 가운데 정렬된 왼쪽 묶음이 아래로 밀리며 위에 빈 면이 생겼다.
     펼친 동안에는 왼쪽 묶음을 접혔을 때와 같은 자리(위 48px)에 두고, 긴 카드를 내려 읽는 동안 화면에 붙어 있게 한다 */
  .hero-top:has(#region-find:not([hidden])) .hero-left { align-self: start; justify-content: flex-start; position: sticky; top: calc(var(--nav-h) + var(--sp-4)); padding-top: var(--sp-5); }
  .calc { margin-top: 0; padding: var(--sp-4); gap: var(--sp-2); box-shadow: 0 24px 48px -24px rgba(18, 58, 92, .18); }
  .result-sec { padding-top: 0; }
}

/* 5-1. 첫 화면 왼쪽 '결과 미리보기'(T-0121 → T-0167): 글자 없는 막대 3줄이 한눈에 읽히지 않는다는 대표 피드백으로
   두 줄('지금 제도라면'·'새 제도라면')로 줄이고, 줄마다 [이름 ……… 총액(+차액)] 아래 막대 하나를 둔다.
   - 3차: 막대 하나에 한 색(지금 제도 = --ink-2, 새 제도 = --brand). 받는 형태 색 나눔은 범례가 있는 결과 카드에서만.
   - 차액(+○만원)은 결과 카드의 .bar-note.up 과 같은 브랜드 색. 막대 길이는 app.js renderPeek()가 calc 결과로 채운다. 누르면 결과 카드로 이동.
   - 부제목 바로 아래 48px. 959px 이하에서는 두지 않는다(모바일 첫 화면은 입력 카드가 우선). */
.peek { display: none; }
@media (min-width: 960px) {
  .peek { display: block; margin-top: var(--sp-5); max-width: 480px; border-radius: var(--r-sm); color: inherit; text-decoration: none; cursor: pointer; }
  .peek-bars { display: grid; gap: var(--sp-4); }
  /* T-0166(D1 남은 것): 이름·총액 줄과 막대 사이 12px, 총액과 차액 사이 12px로 숨 쉴 틈을 준다 */
  .peek-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--sp-2); row-gap: 12px; }
  .peek-name { font-size: var(--f-sm); font-weight: 700; color: var(--ink-2); letter-spacing: -0.02em; white-space: nowrap; }
  .peek-tw { grid-column: 1 / -1; display: block; }
  .peek-track { display: block; height: 20px; border-radius: 4px; min-width: 4px; }
  .peek-now { background: var(--ink-2); }
  .peek-plan { background: var(--brand); }
  .peek-sum { display: inline-flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .peek-sum b { font-size: var(--f-h3); font-weight: 800; letter-spacing: -0.02em; }
  .peek-diff { font-size: var(--f-sm); font-weight: 800; color: var(--brand); }
  .peek:hover .peek-name { color: var(--ink); }
  /* T-0166 클릭 단서: 미리보기 맨 위 줄 오른쪽에 '아래 결과로' 화살표(글자 없음, 첫 화면 단어 수 그대로). 마우스를 올리면 채운다 */
  .peek-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 32px; margin-bottom: var(--sp-2); }
  .peek-sample[hidden] { display: none; }
  .peek-go { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); transition: background-color .12s, color .12s; }
  .peek-go .ic { width: 18px; height: 18px; transform: rotate(90deg); }
  .peek:hover .peek-go { background: var(--brand); color: var(--on-brand); }
  .peek:active .peek-go { background: var(--brand-press); }
}

/* 5-2. 빈 칸 안내(T-0126): 버튼이 비활성일 때 남은 칸을 T-0101 확정 문구로 한 줄씩. 누르면 그 칸으로 초점을 옮긴다.
   아무 칸도 건드리기 전에는 기존 한 줄('네 칸을 채우면 계산합니다')만 둔다(첫 화면 단어 수 유지). */
.go-need { display: grid; justify-items: center; gap: 0; }
/* 터치 영역 44px 이상(T-0135 ④, 상단 메뉴·패널 항목과 같은 기준). 글자 크기·밑줄은 그대로 */
.need { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-ui); text-underline-offset: 4px; }
.need:hover { color: var(--brand); text-decoration-color: currentColor; }
.need:active { background: var(--brand-tint); color: var(--brand); }

/* 결과 카드 */
.chart { display: grid; gap: var(--sp-3); transition: transform .2s ease, box-shadow .2s ease; }
.chart:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(18, 58, 92, .08); }
.chart:focus { outline: none; }
.chart-head { display: grid; gap: var(--sp-1); }
.chart-title { font-size: var(--f-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; }
/* T-0167 추가: 결과 머리 아래 '왜 1~6월생과 7월생으로 나뉘나요?' 접기(기존 .fold 부품). 본문은 .notes 와 같은 크기·색 */
.why-fold { margin-top: -4px; }
.why-fold[hidden] { display: none; }
.why-body { margin: 0; font-size: var(--f-min); color: var(--ink-2); line-height: 1.55; word-break: keep-all; max-width: 40ch; }
.headline-k { font-size: var(--f-sm); font-weight: 700; color: var(--ink-2); }
.headline-k:empty, .headline-cap:empty { display: none; }
.delta { font-size: var(--f-delta); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--brand); }
.delta small { font-size: calc(var(--f-delta) * .45); font-weight: 800; margin-left: 2px; }
.headline-cap { margin-top: var(--sp-1); font-size: var(--f-min); color: var(--ink-2); line-height: 1.5; }
.notice { display: flex; gap: var(--sp-1); align-items: flex-start; font-size: var(--f-min); line-height: 1.5; color: var(--ink); background: var(--brand-tint); border-radius: var(--r-sm); padding: 12px; }
.notice .ic { color: var(--brand); width: 18px; height: 18px; margin-top: 1px; }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); list-style: none; padding: 0; margin: 0; font-size: var(--f-min); color: var(--ink-2); font-weight: 600; }
.legend li { display: flex; align-items: center; gap: var(--sp-1); }
.sw { display: inline-block; width: 16px; height: 16px; border-radius: 3px; flex: none; }
.f-cash { background: var(--f-cash); }
.f-gift { background: var(--f-gift); }
.f-vou { background: var(--f-vou); box-shadow: inset 0 0 0 1.5px var(--f-vou-edge); }
.f-tbd { background: repeating-linear-gradient(135deg, var(--f-tbd) 0 2px, var(--f-tbd-bg) 2px 6px); box-shadow: inset 0 0 0 1.5px var(--f-tbd); }

.bars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
/* 막대 한 줄: 이름·꼬리표 | 총액 / 한 줄 설명 | 차액 / 막대. 총액·차액은 줄바꿈하지 않는다.
   T-0179(QA T-0116 D-1): 이름 칸(minmax(0,1fr))이 좁으면 꼬리표를 다음 줄로, 그래도 좁으면 이름을 낱말 단위로 2줄까지 내린다.
   금액은 오른쪽 첫 줄 그대로. 넓은 화면(1440)은 한 줄에 다 들어가 배치가 바뀌지 않는다 */
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name sum" "sub note" "track track"; align-items: baseline; gap: 2px var(--sp-2); position: relative; }
.bar-row.is-pick::before { content: ""; position: absolute; left: -12px; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--brand); }
.bar-name { grid-area: name; min-width: 0; display: flex; align-items: center; gap: 4px var(--sp-1); flex-wrap: wrap; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; font-size: var(--f-sm); font-weight: 800; letter-spacing: -0.02em; }
.bar-name > span:first-child { min-width: 0; }
.bar-name .tag { height: 22px; padding: 0 6px; }
.bar-sub { grid-area: sub; display: block; font-size: var(--f-min); font-weight: 400; color: var(--ink-2); line-height: 1.45; }
.bar-sum { grid-area: sum; justify-self: end; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; }
.bar-note { grid-area: note; justify-self: end; align-self: start; font-size: var(--f-min); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.45; }
.bar-note.up { color: var(--brand); font-weight: 700; }
.track { grid-area: track; margin-top: 6px; display: flex; gap: 2px; height: 32px; border-radius: 4px; overflow: hidden; min-width: 4px; }
.track span { display: block; height: 100%; min-width: 2px; }
.same { font-size: var(--f-sm); line-height: 1.5; color: var(--ink); font-weight: 600; }
.same:empty { display: none; }
.foot-note { font-size: var(--f-min); color: var(--ink-2); line-height: 1.5; }
.legend-fold .notes { padding-top: 0; }
@media (max-width: 599px) {
  .track { height: 28px; } .bar-row.is-pick::before { left: -10px; }
  .bar-sum { font-size: 18px; }
  /* 좁은 화면: 한 줄 설명은 한 줄 전체를 쓰고, 차액은 막대 아래 오른쪽으로 내린다 */
  .bar-row { grid-template-areas: "name sum" "sub sub" "track track" "note note"; }
  .bar-note { margin-top: 2px; }
  /* 범례는 2칸 × 2줄로 정돈한다 */
  .legend { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--sp-1) var(--sp-3); }
}
/* 데스크톱 결과 카드: 왼쪽 4칸에 제목·결론 숫자, 오른쪽 8칸에 범례·막대 */
.chart-side, .chart-main { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
@media (min-width: 960px) {
  .chart { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--sp-6); padding: var(--sp-5); }
  .chart-side { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* ================= 6. 결과 아래 섹션 ================= */
.sec { padding: var(--sp-5) 0 0; }
.sec-head { margin-bottom: var(--sp-3); }
.sec-head h2 { margin: 0; font-size: var(--f-h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.sec-sub { margin-top: var(--sp-1); color: var(--ink-2); font-size: var(--f-body); }
@media (min-width: 960px) { .sec { padding-top: var(--sp-6); } }

/* 출생 기간 띠: 세 기간 중 내 기간을 칠한다 */
.periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: var(--sp-3); }
.period { display: grid; gap: 4px; padding: 12px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--f-min); color: var(--ink-2); line-height: 1.4; }
.period b { font-size: var(--f-sm); color: var(--ink); font-weight: 800; }
.period.is-on { background: var(--brand); box-shadow: none; color: var(--on-brand); }
.period.is-on b { color: var(--on-brand); }

.days-grid { row-gap: var(--sp-2); }
.day-card { display: grid; gap: var(--sp-2); }
.day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-1); flex-wrap: wrap; }
.day-pair { display: grid; gap: 12px; }
.day-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: var(--f-min); }
.day-row .d { font-weight: 700; color: var(--ink); }
.day-row .tw { display: block; min-width: 0; }
.day-row .t { display: block; height: 20px; border-radius: 4px; background: var(--f-cash); min-width: 4px; }
.day-row .t.after { background: var(--brand); }
.day-row .v { font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--f-sm); white-space: nowrap; }
.day-diff { font-size: var(--f-sm); color: var(--ink-2); }
.day-diff b { color: var(--brand); font-weight: 800; }
@media (max-width: 599px) { .day-row { grid-template-columns: 80px minmax(0, 1fr) auto; } }

/* 받는 시기: 0~12세 띠 위에 월 금액·일시금 */
.when-grid { row-gap: var(--sp-2); }
.when-card { display: grid; gap: var(--sp-2); }
.when-name { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; font-weight: 800; }
.tl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2px; }
.tl.tl-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); }
.tl-seg.lead { background: var(--brand); }
.tl-seg.lead .k, .tl-seg.lead .m { color: var(--on-brand); }
.tl-seg { display: grid; gap: 4px; padding: 12px; border-radius: 6px; background: var(--brand-tint); min-width: 0; }
.tl-seg .k { font-size: var(--f-min); font-weight: 600; }
.tl-seg .m { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tl-seg .m small { font-size: var(--f-min); font-weight: 700; }
.lump { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 0; font-size: var(--f-sm); }
.lump .dots { grid-row: span 2; }
.lump .sub { grid-column: 2; }
.dots { display: flex; gap: 4px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--f-cash); }
.dots i.vou { background: var(--f-vou); box-shadow: inset 0 0 0 1.5px var(--f-vou-edge); }
.lump b { font-weight: 800; }
.lump .sub { color: var(--ink-2); font-size: var(--f-min); }
.settle { font-size: var(--f-min); font-weight: 700; color: var(--ink); }
.notes { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; gap: 4px; font-size: var(--f-min); color: var(--ink-2); line-height: 1.5; }
.notes li { padding-left: 14px; position: relative; }
.notes li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-2); }
@media (max-width: 599px) { .tl-seg { padding: 8px; } .tl-seg .m { font-size: 18px; } }

/* 공유 */
.share-card { display: flex; gap: var(--sp-2); align-items: flex-start; }
.share-body { display: grid; gap: var(--sp-1); min-width: 0; flex: 1; }
.share-act { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-1); }
.copy-done { font-size: var(--f-min); font-weight: 700; color: var(--brand); min-height: 1.5em; }
.copy-fail { display: grid; gap: 6px; }
.copy-fail .label { font-weight: 600; font-size: var(--f-min); }
.copy-fail input { font-size: var(--f-sm); font-weight: 500; }
@media (max-width: 599px) { .share-card { flex-direction: column; } .share-act .btn { flex: 1 1 100%; } }

/* 계산 근거(접기) */
.basis-sec { padding-bottom: var(--sp-6); }
.basis { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.basis > summary { width: 100%; min-height: 72px; gap: 12px; color: var(--ink); font-size: var(--f-h3); font-weight: 800; }
.basis > summary .badge .ic { width: 20px; height: 20px; transform: none; }
.basis > summary .chev { margin-left: auto; color: var(--brand); }
.basis-body { padding: var(--sp-1) 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.basis-lead { font-size: var(--f-sm); color: var(--ink); max-width: 48em; }
.basis-grid { display: grid; gap: var(--sp-3); }
.basis-grid h3 { margin: 0 0 var(--sp-1); font-size: var(--f-body); font-weight: 800; }
.basis-grid .list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--f-sm); color: var(--ink-2); line-height: 1.55; }
.basis .rows { margin: 0 0 var(--sp-1); font-size: var(--f-sm); }
.basis .rows th, .basis .rows td { padding: 8px 8px 8px 0; }
.basis .rows thead th { color: var(--ink-2); font-size: var(--f-min); }
@media (min-width: 960px) { .basis-grid { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); } }

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

/* ================= 8. 출시 패키지(T-0111) ================= */
/* 국회 결정 뒤: 결정되지 않은 개편 막대는 흐리게 남긴다(글자 대비는 유지하고 막대만 흐림) */
.bar-row.is-dim .track { opacity: .35; }
.bar-row.is-dim .bar-name, .bar-row.is-dim .bar-sum { color: var(--ink-2); }
/* 같은 규칙을 '제도가 바뀌는 날'·'받는 시기' 카드에도(T-0135 ②): 결정되지 않은 개편 경우만의 카드는 그림만 흐리고 글자는 보조 색(대비 유지) */
.day-card.is-dim .t, .when-card.is-dim .dots { opacity: .35; }
.day-card.is-dim .card-title, .day-card.is-dim .day-row .d, .day-card.is-dim .day-row .v, .day-card.is-dim .day-diff b, .when-card.is-dim .card-title, .when-card.is-dim .lump b { color: var(--ink-2); }
.when-card.is-dim .tl-seg, .when-card.is-dim .tl-seg.lead { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.when-card.is-dim .tl-seg .k, .when-card.is-dim .tl-seg .m { color: var(--ink-2); }

/* 공유 카드 안 '다시 확인하기 좋은 때' */
.revisit { margin-top: 0; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.revisit-h { font-size: var(--f-sm); font-weight: 800; margin-bottom: var(--sp-1); }
.revisit ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-1); }
.revisit li { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-1); font-size: var(--f-min); color: var(--ink-2); line-height: 1.5; }
.revisit li .ic { color: var(--brand); width: 18px; height: 18px; }
.revisit li b { color: var(--ink); font-weight: 800; white-space: nowrap; }
@media (max-width: 599px) { .revisit li { grid-template-columns: 20px minmax(0, 1fr); } .revisit li span { grid-column: 2; } }

/* 광고 자리(1주기 T-0018 규칙): off 는 공통 base.css 에서 display:none. preview·on 만 '광고' 라벨.
   결과 흐름 맨 끝, 일반 흐름(고정·떠 있는 위치 금지). 위 공유 버튼·아래 계산 근거 접기와 64px 이상 띄운다. */
.ad-wrap .ad-slot[data-ad-state] { position: relative; margin: calc(var(--sp-6) + 24px) 0 var(--sp-2); }
.ad-slot[data-ad-state="preview"]::before, .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);
}
.article-ad .ad-slot[data-ad-state] { position: relative; margin: calc(var(--sp-6) + 24px) 0 0; }

/* 해설 카드(계산기 아래) */
.guides-sec { padding-top: 0; padding-bottom: var(--sp-6); }
.guide-cards { row-gap: var(--sp-2); }
.guide-card { display: grid; gap: var(--sp-1); justify-items: start; color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.guide-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(18, 58, 92, .08); border-color: var(--line-ui); color: var(--ink); }
.guide-card .badge { margin-bottom: 4px; }

/* 해설 글 (상단은 4절·4-1절 공통 규격 v1의 '해설 페이지'형, T-0126) */
.article { padding: var(--sp-3) 0 var(--sp-5); }
.article-col { max-width: 720px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 var(--sp-2); font-size: var(--f-min); color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--line-ui); }
.crumbs a { color: var(--ink-2); }
.article h1 { margin: 12px 0 var(--sp-1); font-size: var(--f-display); line-height: 1.3; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.article-meta { font-size: var(--f-min); color: var(--ink-2); }
.prose { margin-top: var(--sp-4); font-size: var(--f-body); line-height: 1.75; }
.prose > * + * { margin-top: var(--sp-2); }
.prose h2 { margin-top: var(--sp-5); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; }
.prose .lead { font-size: 18px; color: var(--ink); }
.prose ul { padding-left: 20px; display: grid; gap: 4px; }
.prose .rows { width: 100%; border-collapse: collapse; font-size: var(--f-sm); font-variant-numeric: tabular-nums; }
.prose .rows th, .prose .rows td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose .rows thead th { color: var(--ink-2); font-size: var(--f-min); font-weight: 700; }
.prose .rows td.n, .prose .rows th.n { text-align: right; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.prose .rows .src-k { display: block; white-space: normal; margin-top: 2px; font-size: var(--f-min); font-weight: 400; color: var(--ink-2); }
.prose .rows { overflow-wrap: normal; }
.prose .rows th[scope="row"] { min-width: 5.5em; }
@media (max-width: 599px) { .prose .rows { font-size: var(--f-min); } .prose .rows th, .prose .rows td { padding-right: 12px; } }
.fig { display: grid; gap: var(--sp-2); }
.fig-cap { font-size: var(--f-min); color: var(--ink-2); }
.fig-cap b { color: var(--ink); }
.cta-card { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-5); }
.cta-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.cta-card .btn { flex: none; }
@media (max-width: 599px) { .cta-card { flex-direction: column; } .cta-card .btn { width: 100%; } }
.sources { margin-top: var(--sp-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sources > summary { min-height: 56px; font-weight: 800; color: var(--ink); }
.sources ul { margin: 0 0 var(--sp-2); padding-left: 18px; display: grid; gap: 6px; font-size: var(--f-min); color: var(--ink-2); line-height: 1.55; }
.legal { display: flex; gap: var(--sp-1); align-items: flex-start; margin-top: var(--sp-3); font-size: var(--f-min); color: var(--ink-2); line-height: 1.55; }
.legal .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-2); }

/* ================= 7. A-007 반려 반영(T-0140) =================
   - 상태 점 2가지: 현행(지금 지급 중) = 속 빈 원, 새 제도(정부안) = 브랜드 색 채운 원. 색을 늘리지 않고 모양으로 구분한다.
   - 우리 지역 찾기 패널, 항목별 나눠 보기(총액은 이렇게 나옵니다), 지원제도 카드. 기존 부품(.card .tag .box .badge)만 쓴다. */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-now { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.dot-plan { background: var(--brand); }
.status-tags .tag { gap: 6px; }
.tag-plan { gap: 6px; }
/* 좁은 화면: [현행][기준일] 한 줄 + [새 제도] 한 줄로 두 줄에 담는다(첫 화면 높이 유지) */
@media (max-width: 599px) { .status-tags #hero-badge { order: 3; } }

/* 7-1. 우리 지역 찾기 */
.rf-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; min-height: 44px; margin-top: -11px; margin-bottom: -11px; padding: 0 4px; border: 0; background: none; color: var(--brand); font: inherit; font-size: var(--f-min); font-weight: 700; cursor: pointer; border-radius: var(--r-sm); }
.rf-toggle .ic { width: 16px; height: 16px; }
.rf-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.rf-toggle[aria-expanded="true"] { color: var(--ink); }
.rf { display: grid; gap: 12px; padding: var(--sp-2); border-radius: var(--r-sm); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.rf-rules { display: grid; gap: 6px; margin: 0; font-size: var(--f-min); line-height: 1.5; }
.rf-rules div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; }
.rf-rules dt { font-weight: 800; color: var(--ink); }
.rf-rules dd { margin: 0; color: var(--ink-2); }
.rf-box .ic:first-child { margin-right: 8px; }
.rf-box input[type="search"] { font-size: var(--f-body); }
.rf-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rf-hits:empty, .help:empty { display: none; }
.rf-hit { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line-ui); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--f-sm); font-weight: 700; cursor: pointer; text-align: left; }
.rf-hit:hover { border-color: var(--brand); color: var(--brand); }
.rf-all { display: grid; gap: var(--sp-2); max-height: 260px; overflow-y: auto; padding-right: 4px; padding-bottom: var(--sp-1); border-radius: var(--r-sm); }
.rf-all:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* T-0157 스크롤 단서: 목록 끝이 아니면 아래를 바탕색으로 흐리고, '우대 49곳 보기' 버튼으로 건너뛴다.
   T-0166(R2): 버튼이 목록 위에 떠서 마지막 줄을 가리고 높이가 36px이던 것을 고쳤다. 버튼은 목록 아래 줄로 내려
   글자를 가리지 않고 44px 터치 영역(필터·칩과 같은 높이)을 갖는다. 흐림은 목록 상자 안 아래 32px만 */
.rf-allwrap { position: relative; display: grid; gap: var(--sp-1); }
.rf-allwrap[hidden] { display: none; }
.rf-allwrap::after { content: ""; position: absolute; left: 0; right: 12px; top: calc(260px - 32px); height: 32px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg)); transition: opacity .15s; }
.rf-allwrap.is-end::after { opacity: 0; }
.rf-more { justify-self: center; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 16px; border: 1.5px solid var(--brand); border-radius: 22px; background: var(--surface); color: var(--brand); font: inherit; font-size: var(--f-min); font-weight: 700; white-space: nowrap; cursor: pointer; }
.rf-more:active { background: var(--brand-press); border-color: var(--brand-press); color: var(--on-brand); }
.rf-more .ic { width: 16px; height: 16px; }
.rf-more:hover { background: var(--brand); color: var(--surface); }
.rf-more[hidden] { display: none; }
.rf-same { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .rf-all { scroll-behavior: smooth; } }
.rf-gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 6px; font-size: var(--f-min); }
.rf-gh span { color: var(--ink-2); }
.rf-sido { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--f-min); line-height: 1.5; color: var(--ink-2); }
.rf-sido li { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: 8px; }
.rf-sido b { color: var(--ink); }
.rf-src a { color: var(--brand); }

/* 7-2. 총액은 이렇게 나옵니다(항목별 나눠 보기) */
.split { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.split-head { display: grid; gap: var(--sp-2); align-content: start; }
.split-title { display: grid; gap: 4px; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-sm); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { min-height: 44px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--f-min); font-weight: 700; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.seg button[hidden] { display: none; }
.seg.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* 5차: 두 경우만 보일 때 */
/* T-0167: 경우 이름이 길어져('1~6월생도 받을 때') 좁은 화면에서는 탭 글자를 두 줄까지 접는다(가로 넘침 방지) */
@media (max-width: 599px) {
  .seg { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); }
  .seg button { white-space: normal; word-break: keep-all; line-height: 1.3; padding: 6px 8px; }
}
.split-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.split-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "f f" "track track"; column-gap: var(--sp-2); row-gap: 6px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.split-row:first-child { padding-top: 0; }
.split-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.split-name a { font-size: var(--f-body); font-weight: 800; color: var(--ink); text-decoration: none; }
.split-name a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.split-name .tag { height: 24px; padding: 0 8px; }
.split-amt { grid-area: amt; justify-self: end; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.split-f { grid-area: f; font-size: var(--f-min); line-height: 1.5; color: var(--ink-2); }
.split-form { color: var(--ink); font-weight: 600; }
.split-track { grid-area: track; height: 10px; border-radius: 5px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.split-fill { display: flex; gap: 2px; height: 100%; min-width: 4px; }
.split-fill span { display: block; height: 100%; min-width: 2px; }
.split-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-2); font-weight: 800; }
.split-total span { font-size: var(--f-body); }
.split-total b { font-size: 24px; letter-spacing: -0.02em; color: var(--brand); }
.split-key { display: flex; flex-wrap: wrap; gap: 6px var(--sp-3); font-size: var(--f-min); color: var(--ink-2); line-height: 1.5; }
.split-key > span { display: inline-flex; align-items: baseline; gap: 6px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--sp-6); padding: var(--sp-5); }
  .split-body, .split-key { grid-column: 2; }
}

/* 7-3. 지원제도 */
.programs-sec .prog-group + .prog-group { margin-top: var(--sp-4); }
.prog-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-2); font-size: var(--f-h3); font-weight: 800; letter-spacing: -0.02em; }
.prog-cards { row-gap: var(--sp-2); }
.prog { display: grid; gap: var(--sp-1); align-content: start; }
.prog .badge { margin-bottom: 4px; }
.prog-amt { font-size: var(--f-sm); font-weight: 800; color: var(--ink); line-height: 1.5; }
.prog-amt small { display: block; font-size: var(--f-min); font-weight: 600; color: var(--ink-2); }
.prog-src { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -12px; font-size: var(--f-min); color: var(--ink-2); text-underline-offset: 3px; }
.prog-src:hover { color: var(--brand); }
.prog-note { margin-top: var(--sp-3); }
.prog:target { box-shadow: 0 0 0 2px var(--brand); }
.programs-sec { padding-bottom: var(--sp-6); }
/* T-0166(R3) 크기 차등: 이 계산기가 비교하려는 대상은 새 제도다. 상태 점의 규칙(현행 = 속 빈 원, 새 제도 = 채운 원)을 카드에도 그대로 쓴다.
   - 현행 카드: 흰 면 없이 테두리만, 안쪽 여백·배지·금액을 한 단계 작게(참고용 비교 기준)
   - 새 제도 카드: 흰 면 그대로, 금액을 18px로 키워 카드에서 가장 먼저 읽히게
   새 제도 카드는 같은 크기 3장을 유지한다(세 제도의 순서·비중은 항목별 표와 같고, 금액 크기 차이는 숫자로 이미 읽힌다) */
.prog-now .prog { background: transparent; }
.prog-now .badge { width: 32px; height: 32px; }
.prog-now .badge .ic { width: 18px; height: 18px; }
.prog-now .card-title { font-size: var(--f-body); }
.prog-plan .prog-amt { font-size: var(--f-h3); line-height: 1.4; letter-spacing: -0.02em; margin-top: 4px; }
.prog-plan .prog-amt small { margin-top: 2px; }
@media (min-width: 960px) {
  .prog-now .prog { padding: var(--sp-3); }
  .programs-sec .prog-group + .prog-group { margin-top: var(--sp-5); }
}

/* ================= 8. v1.1(T-0140: QA T-0116 D1·D6·D7) ================= */
/* D1: 스크립트가 꺼진 좁은 화면의 해설 페이지는 글자 메뉴를 숨기고 '계산하기'만 남긴다(잘림 방지).
   계산 근거·다른 해설로 가는 길은 본문 위치 표시줄과 글 끝 '다른 안내'가 맡는다 */
@media (max-width: 479px) {
  .nav:not(.nav-calc):not(.is-js) .nav-menu a:not(.nav-cta) { display: none; }
  .nav:not(.nav-calc):not(.is-js) .nav-menu { margin-left: auto; overflow: visible; }
}
/* D6: 해설 조건 표 — 600px 미만에서 조건을 한 줄 전체로, 금액 세 칸은 아래 줄에 이름표와 함께 */
.nw { white-space: nowrap; }
@media (max-width: 599px) {
  .prose .rows-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose .rows-stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .prose .rows-stack th, .prose .rows-stack td { display: block; padding: 0; border: 0; }
  .prose .rows-stack th[scope="row"] { grid-column: 1 / -1; min-width: 0; margin-bottom: 8px; font-size: var(--f-sm); }
  .prose .rows-stack td.n { text-align: left; font-weight: 700; color: var(--ink); }
  .prose .rows-stack td.n::before { content: attr(data-k); display: block; font-size: var(--f-min); font-weight: 600; color: var(--ink-2); }
}
/* D7: 해설 1440 — 왼쪽 8칸 본문 + 오른쪽 4칸 차례(화면을 따라 붙음). 959px 이하에서는 차례를 두지 않는다 */
.article-aside { display: none; }
@media (min-width: 960px) {
  .article-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--sp-6); align-items: start; }
  .article-aside { display: block; position: sticky; top: calc(var(--nav-h) + var(--sp-4)); margin-top: 128px; }
  .aside-card { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-left: 2px solid var(--line); }
  .aside-h { font-size: var(--f-min); font-weight: 800; color: var(--ink-2); }
  .toc { list-style: none; margin: 0; padding: 0; display: grid; }
  .toc a { display: flex; align-items: center; min-height: 40px; font-size: var(--f-sm); color: var(--ink); text-decoration: none; }
  .toc a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-card { transition: none; }
  .guide-card:hover { transform: none; }
  .chart, .switch-ui, .switch-ui::after, .nav-toggle { transition: none; }
  .nav-panel, .nav.is-open::after { animation: none; }
  .chart:hover { transform: none; }
}
@media print { .nav, .share-card, .skip { display: none !important; } }

/* 대표 지시 10/26: 첫 화면 그래프 밑 주석(모바일은 제목 아래) */
.hero-note { margin-top: var(--sp-2); font-size: var(--f-sm); line-height: 1.55; color: var(--ink-2); }
.hero h1 + .peek + .hero-note, .hero h1 + .hero-note { margin-top: var(--sp-2); }
@media (min-width: 960px) { .hero .hero-note { margin-top: var(--sp-2); font-size: var(--f-sm); max-width: 480px; } }

/* 쿠팡 파트너스 상품 구역(2026-10-26 개편): 사진 + 이름 + 한 줄, 가격은 쓰지 않는다(바뀌므로) */
.shop .shop-head { display: flex; align-items: center; gap: 8px; }
.shop .shop-head h2, .shop .shop-head h3 { margin: 0; }
.shop-tag { flex: none; font-size: 14px; line-height: 1; padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2); }
.shop-lead { margin: 6px 0 0; color: var(--ink-2); font-size: var(--f-sm, 15px); }
.shop-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.shop-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) 20px; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, var(--bg, #fff)); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.shop-item:hover { border-color: var(--ink-2); }
.shop-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.shop-img { width: 72px; height: 72px; border-radius: 8px; background: #fff; overflow: hidden; display: grid; place-items: center; }
.shop-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-txt { display: grid; gap: 2px; min-width: 0; }
.shop-txt b { font-size: 16px; line-height: 1.35; letter-spacing: -0.01em; }
.shop-txt span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.shop-go { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shop-item:hover .shop-go { stroke: var(--brand); }
.shop-note { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
@media (min-width: 720px) {
  .shop-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .shop-item { grid-template-columns: 88px minmax(0, 1fr) 20px; }
  .shop-img { width: 88px; height: 88px; }
}