/* =====================================================================
   공통 스타일 — 모바일 우선.
   부동산 검색 트래픽은 모바일이 압도적이므로 좁은 화면을 기준으로 짜고
   넓은 화면에서 열을 늘립니다.
   ===================================================================== */

:root{
  --bg:#f5f6f8;
  --card:#ffffff;
  --ink:#16181d;
  --ink2:#454a54;
  --mut:#767c8a;
  --line:#e3e6ec;
  --line2:#eef0f4;
  --brand:#1f4fd8;
  --brand-d:#173db0;
  --brand-l:#eaf0ff;
  --ok:#0d8a5f;
  --ok-l:#e6f6ef;
  --warn:#a86800;
  --warn-l:#fdf4e3;
  --bad:#c0362c;
  --bad-l:#fdeceb;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,20,30,.06), 0 6px 20px rgba(16,20,30,.05);
  --maxw:820px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* Pretendard 를 쓰되, 로드 전/실패 시에도 레이아웃이 깨지지 않도록
   시스템 한글 폰트를 뒤에 그대로 남겨 둡니다. */
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
              "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "맑은 고딕",
              Roboto, sans-serif;
  font-size:16px; line-height:1.62;
  letter-spacing:-.005em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* 금액은 자리수가 흔들리면 읽기 어려우니 고정폭 숫자를 씁니다. */
.num, .v, .amt, .readback, table td.num, table td.mini{ font-variant-numeric:tabular-nums; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- 레이아웃 ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; }

header.site{
  background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
header.site .wrap{ display:flex; align-items:center; gap:12px; height:56px; }
.logo{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); font-size:16px; letter-spacing:-.02em; }
/* 심볼은 인라인 SVG입니다. 배경 사각형이 SVG 안에 들어 있으므로
   여기서는 크기만 잡습니다. 용량이 사실상 0이고 어느 배율에서도 선명합니다. */
.logo .mk{ width:28px; height:28px; flex:none; display:block; }
nav.top{ margin-left:auto; display:flex; gap:4px; }
nav.top a{
  color:var(--ink2); font-size:14px; font-weight:600; padding:7px 10px;
  border-radius:8px; white-space:nowrap;
}
nav.top a:hover{ background:var(--line2); text-decoration:none; }
nav.top a[aria-current="page"]{ color:var(--brand); background:var(--brand-l); }

/* 메뉴가 5개가 되면서 375px 화면에서 19px이 모자랐습니다.
   앵커 텍스트를 줄이면 홈페이지로 가는 내부 링크의 검색 관련성이 약해지므로,
   글자는 그대로 두고 좌우 여백만 좁혔습니다. */
@media (max-width:430px){
  nav.top{ gap:0; }
  nav.top a{ padding:7px 6px; }
}

/* ---------- 히어로 ---------- */
.hero{ padding:28px 0 8px; }
.hero h1{
  margin:0 0 10px; font-size:26px; line-height:1.32; letter-spacing:-.03em; font-weight:800;
}
.hero p{ margin:0; color:var(--ink2); font-size:15px; }
.hero .badge{
  display:inline-block; margin-bottom:12px; font-size:12px; font-weight:700;
  color:var(--brand); background:var(--brand-l); padding:5px 10px; border-radius:999px;
}

/* ---------- 카드 ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; margin:16px 0; box-shadow:var(--shadow);
}
.card > h2{ margin:0 0 4px; font-size:18px; letter-spacing:-.02em; font-weight:750; }
.card > h2 + .desc{ margin:0 0 16px; }
.desc{ color:var(--mut); font-size:14px; margin:0 0 14px; }
h3{ margin:22px 0 10px; font-size:15px; font-weight:750; letter-spacing:-.02em; }
h3:first-child{ margin-top:0; }

/* ---------- 정책 변경 이력 ----------
   각 항목은 「세 줄 요약」 상자로 시작합니다. 시간 없는 방문자는 세 줄만 보고
   나가고, 필요한 분만 아래 해설을 읽습니다. 요약을 네 줄로 늘리지 마십시오 —
   한눈에 안 들어오면 이 장치의 의미가 없어집니다. */
.tl{ border-top:1px solid var(--line2); padding:20px 0 4px; }
.tl:first-of-type{ border-top:0; padding-top:4px; }
.tl-date{ font-size:12px; font-weight:800; color:var(--brand); letter-spacing:.01em; }
.tl > h3{ margin:5px 0 12px; font-size:17px; letter-spacing:-.025em; }
.tl-sum{
  margin:0 0 14px; padding:13px 16px 13px 32px;
  background:var(--brand-l); border-radius:12px; list-style:disc;
}
.tl-sum li{ font-size:14.5px; font-weight:650; color:var(--ink); margin:4px 0; line-height:1.55; }
.tl .mini{ color:var(--mut); font-size:12.5px; margin:14px 0 0; }

/* 변경 이력 항목의 「자세히 보기」.
   ★ 세 줄 요약(.tl-sum)은 접지 마십시오. 날짜·제목·세 줄이 항상 보여야
      훑어보는 용도로 쓸 수 있고, 그게 이 페이지의 설계 의도입니다.
      접는 것은 그 아래 해설·표·근거뿐입니다. */
.tl-more{ border-top:1px solid var(--line2); margin-top:14px; }
.tl-more > summary{
  display:flex; align-items:center; gap:7px;
  padding:12px 0 6px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:750; color:var(--brand); letter-spacing:-.01em;
}
.tl-more > summary::-webkit-details-marker{ display:none; }
.tl-more > summary::after{
  content:""; flex:none; width:7px; height:7px; margin-top:-4px;
  border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(45deg); transition:transform .18s ease;
}
.tl-more[open] > summary::after{ transform:rotate(-135deg); margin-top:2px; }
.tl-more > summary:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }
.tl-more > summary:hover{ text-decoration:underline; }
/* 여는 말과 접는 말을 바꿔 끼웁니다 */
.tl-more > summary .open-label{ display:none; }
.tl-more[open] > summary .closed-label{ display:none; }
.tl-more[open] > summary .open-label{ display:inline; }
@media (prefers-reduced-motion: reduce){ .tl-more > summary::after{ transition:none; } }

/* ---------- 접이식 FAQ ----------
   <details>/<summary> 는 브라우저 기본 기능이라 자바스크립트가 필요 없습니다.
   스크립트가 죽어도 열리고, 키보드(Tab→Enter)와 화면낭독기에서도 동작하며,
   구글은 접힌 내용도 펼친 것과 동일하게 색인합니다.
   펼친 상태를 기본으로 두지 마십시오 — 질문 4개가 한눈에 보이는 것이
   이 방식의 목적입니다. */
.faq{ border-top:1px solid var(--line2); }
.faq:first-of-type{ border-top:0; }
.faq > summary{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 0; cursor:pointer;
  font-size:15px; font-weight:750; letter-spacing:-.02em; color:var(--ink);
  list-style:none;            /* 기본 삼각형 제거 (Firefox) */
}
.faq > summary::-webkit-details-marker{ display:none; }   /* Safari */
/* 오른쪽 꺾쇠. 닫힘 = 아래쪽, 열림 = 위쪽 */
.faq > summary::after{
  content:""; flex:none; margin:6px 2px 0 auto;
  width:8px; height:8px;
  border-right:2px solid var(--mut); border-bottom:2px solid var(--mut);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .18s ease;
}
.faq[open] > summary{ color:var(--brand); }
.faq[open] > summary::after{ transform:rotate(-135deg); margin-top:9px; border-color:var(--brand); }
.faq > summary:hover{ color:var(--brand); }
.faq > summary:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:8px; }
.faq > .desc{ margin:0 0 14px; }
.faq > .desc:last-child{ margin-bottom:18px; }
@media (prefers-reduced-motion: reduce){
  .faq > summary::after{ transition:none; }
}

/* ---------- 폼 ---------- */
.step{ padding:16px 0; border-top:1px solid var(--line2); }
.step:first-of-type{ border-top:0; padding-top:4px; }
.step > label.q,
.qlabel{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:15px; font-weight:700; margin-bottom:4px; letter-spacing:-.02em;
}
.qnum{
  width:20px; height:20px; border-radius:6px; background:var(--ink); color:#fff;
  font-size:11px; font-weight:800; display:grid; place-items:center; flex:none;
}
.hint{ color:var(--mut); font-size:13px; margin:0 0 10px; }

input[type=number], input[type=text], select{
  width:100%; height:48px; padding:0 12px; font-size:16px; /* 16px 미만이면 iOS가 확대합니다 */
  border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  font-family:inherit; font-weight:600;
}
input[type=number]{ text-align:right; }
input:focus, select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-l); }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }
select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23767c8a' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }

/* 금액 입력 — 한 칸으로 받되 콤마를 자동으로 넣습니다.
   30000 은 잘못 읽기 쉽지만 30,000 은 세 자리씩 끊겨 자릿수 사고를 막아 줍니다.
   칸을 억/만원으로 나누는 대신 이 방식을 씁니다. */
.money{ display:flex; gap:8px; align-items:stretch; }
.money .unit{ position:relative; flex:1; }
.money .unit input{ padding-right:44px; }
.money .unit .u{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--mut); font-size:14px; font-weight:700; pointer-events:none;
}
/* 접미사를 절대위치로 띄우면 "만원 / 월"처럼 긴 단위에서 입력값과 겹칩니다.
   테두리를 바깥 상자가 갖고 접미사를 flex 항목으로 두면 겹칠 수가 없습니다. */
.amount{
  display:flex; align-items:center; height:56px; padding:0 15px 0 14px;
  border:1.5px solid var(--line); border-radius:10px; background:#fff;
}
.amount:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-l); }
.amount input{
  flex:1; min-width:0; height:100%; padding:0; border:0; background:none; border-radius:0;
  font-size:20px; font-weight:780; text-align:right; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.amount input:focus{ outline:none; box-shadow:none; border:0; }
.amount .u{
  flex:none; margin-left:9px; white-space:nowrap;
  color:var(--mut); font-size:15px; font-weight:700; pointer-events:none;
}
.amount input::placeholder{ color:#c2c7d2; font-weight:600; font-size:16px; }
.readback{ font-size:15px; }
.readback b{ font-weight:800; }
.readback{
  margin-top:7px; font-size:14px; font-weight:700; color:var(--brand);
  min-height:22px;
}
.readback.zero{ color:var(--mut); font-weight:600; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.chip{
  border:1px solid var(--line); background:#fff; color:var(--ink2);
  border-radius:999px; padding:6px 12px; font-size:13px; font-weight:650;
  cursor:pointer; font-family:inherit;
}
.chip:hover{ border-color:var(--brand); color:var(--brand); }
.chip:active{ transform:translateY(1px); }
/* 「지우기」는 금액 칩이 아니라 되돌리기 버튼이므로 눈에 덜 띄게 둡니다.
   더하기 칩과 같은 무게로 보이면 금액인 줄 알고 누릅니다. */
.chip.zero{ color:var(--mut); border-style:dashed; }
.chip.zero:hover{ color:var(--bad); border-color:var(--bad); border-style:solid; }

.grid2{ display:grid; grid-template-columns:1fr; gap:12px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--ink2); margin-bottom:6px; }

/* 라디오를 버튼처럼 */
.seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.seg.two{ grid-template-columns:repeat(2,1fr); }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label{
  display:block; text-align:center; padding:12px 4px; border:1.5px solid var(--line);
  border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; background:#fff;
  color:var(--ink2); line-height:1.3;
}
.seg input:checked + label{ border-color:var(--brand); background:var(--brand-l); color:var(--brand-d); }
.seg input:focus-visible + label{ box-shadow:0 0 0 3px var(--brand-l); }

.check{ display:flex; gap:10px; align-items:flex-start; padding:12px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; background:#fff; }
.check input{ width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--brand); }
.check .t{ font-size:14px; font-weight:700; }
.check .s{ font-size:12.5px; color:var(--mut); font-weight:500; line-height:1.5; }
.check:has(input:checked){ border-color:var(--brand); background:var(--brand-l); }

/* 접기 */
details.adv{ margin-top:16px; border:1px solid var(--line); border-radius:10px; background:#fbfcfd; }
details.adv > summary{
  cursor:pointer; padding:13px 15px; font-size:14px; font-weight:700; color:var(--ink2);
  list-style:none; display:flex; align-items:center; gap:7px;
}
details.adv > summary::-webkit-details-marker{ display:none; }
details.adv > summary::before{ content:"＋"; color:var(--brand); font-weight:800; }
details.adv[open] > summary::before{ content:"−"; }
details.adv .body{ padding:0 15px 15px; display:grid; gap:12px; }

/* 버튼 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:52px; padding:0 22px; border-radius:11px; border:1.5px solid transparent;
  font-size:16px; font-weight:750; cursor:pointer; font-family:inherit;
  background:var(--brand); color:#fff; width:100%;
}
.btn:hover{ background:var(--brand-d); }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:#fff; color:var(--ink2); border-color:var(--line); }
.btn.ghost:hover{ background:var(--line2); }
.btn.sm{ height:42px; font-size:14px; padding:0 15px; width:auto; }
.btnrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.btnrow .btn{ width:auto; flex:1; min-width:130px; }

/* ---------- 결과 ---------- */
#result{ scroll-margin-top:70px; }
.headline{
  background:linear-gradient(140deg,#1f4fd8,#2f6ae8); color:#fff;
  border-radius:var(--radius); padding:24px 20px; text-align:center; margin-bottom:14px;
}
.headline .k{ font-size:13.5px; opacity:.86; font-weight:600; }
.headline .v{ font-size:34px; font-weight:800; letter-spacing:-.035em; margin:5px 0 3px; line-height:1.15; }
.headline .s{ font-size:13px; opacity:.86; }

.kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.kpi{ background:#fbfcfd; border:1px solid var(--line); border-radius:11px; padding:13px 12px; }
.kpi .k{ font-size:12.5px; color:var(--mut); font-weight:650; }
.kpi .v{ font-size:18px; font-weight:780; letter-spacing:-.025em; margin-top:2px; }
.kpi .s{ font-size:11.5px; color:var(--mut); margin-top:2px; line-height:1.45; }

/* 월 상환액 조절 — 결과 안에서 바로 되묻는 칸입니다.
   notice 처럼 보이면 "읽고 넘길 안내문"이 되어 아무도 손대지 않습니다.
   그래서 입력 상자임이 드러나게 테두리와 여백을 줍니다. */
.tune{
  margin-top:14px; padding:14px; border:1.5px solid var(--brand-l);
  border-radius:12px; background:#fbfcff;
}
.tune .t{ font-size:15px; font-weight:750; letter-spacing:-.01em; }
.tune .s{ margin:6px 0 0; font-size:13px; color:var(--ink2); line-height:1.6; }
.tune .s.fine{ margin-top:10px; font-size:12px; color:var(--mut); }
.tunerow{ display:flex; gap:8px; align-items:center; margin-top:11px; }
.tunerow .amount{ flex:1; min-width:0; }
.tunerow .btn{ flex:none; }
.amount.sm{ height:46px; padding:0 13px 0 12px; }
.amount.sm input{ font-size:17px; }
.amount.sm .u{ font-size:13.5px; margin-left:7px; }
.amount.sm input::placeholder{ font-size:14px; }
.tune .chips{ margin-top:9px; }

/* 한도 비교 막대 — 세 한도 중 무엇에 걸렸는지 한눈에 */
.bars{ display:grid; gap:11px; }
.bar .top{ display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; margin-bottom:5px; gap:8px; }
.bar .top b{ font-weight:750; }
.bar .top .amt{ font-weight:750; font-variant-numeric:tabular-nums; }
.bar .track{ height:11px; background:var(--line2); border-radius:99px; overflow:hidden; }
.bar .fill{ height:100%; border-radius:99px; background:#c3cad8; }
.bar.bind .fill{ background:var(--brand); }
.bar.bind .top b{ color:var(--brand-d); }
.bar .note{ font-size:12px; color:var(--mut); margin-top:4px; }
.tag{ display:inline-block; font-size:11px; font-weight:750; padding:2px 7px; border-radius:999px; background:var(--brand); color:#fff; vertical-align:1px; }

table{ width:100%; border-collapse:collapse; font-size:14px; }
table td, table th{ padding:10px 4px; border-bottom:1px solid var(--line2); text-align:left; vertical-align:top; }
table td.num{ text-align:right; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
table td.mini{ font-size:12px; color:var(--mut); text-align:right; white-space:nowrap; }
table tr.total td{ font-weight:800; border-bottom:0; border-top:1.5px solid var(--line); }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* 알림 */
.notice{ display:flex; gap:10px; padding:13px 14px; border-radius:11px; font-size:13.5px; line-height:1.6; margin-top:11px; }
.notice .ic{ flex:none; font-weight:800; }
.notice.info{ background:var(--brand-l); color:#17307a; }
.notice.ok  { background:var(--ok-l);   color:#0a5c40; }
.notice.warn{ background:var(--warn-l); color:#7a4c00; }
.notice.bad { background:var(--bad-l);  color:#8f271f; }
.notice b{ font-weight:750; }

.pill{ display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.pill.reg{ background:var(--bad-l); color:var(--bad); }
.pill.free{ background:var(--ok-l); color:var(--ok); }

/* ---------- 면책 · 푸터 ---------- */
.disclaimer{
  margin:22px 0; padding:15px 16px; border:1px dashed var(--line);
  border-radius:11px; background:#fff; font-size:12.5px; color:var(--mut); line-height:1.7;
}
.disclaimer b{ color:var(--ink2); font-weight:750; }
footer.site{ border-top:1px solid var(--line); background:#fff; margin-top:34px; padding:24px 0 40px; }
footer.site .links{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13.5px; font-weight:650; margin-bottom:12px; }
footer.site .fine{ font-size:12.5px; color:var(--mut); line-height:1.7; }

/* ---------- 광고 슬롯 ----------
   승인 전에도 자리를 잡아둡니다. 나중에 광고를 넣을 때 레이아웃이 밀리면
   Core Web Vitals(CLS)가 나빠지고 검색 순위에 손해를 봅니다. */
.ad{ margin:18px 0; min-height:100px; display:grid; place-items:center; }
.ad:empty{ display:none; }

/* ---------- 모바일 하단 고정 바 ----------
   입력이 6단계라 계산 버튼이 스크롤 아래에 묻힙니다.
   모바일에서는 버튼이 화면 밖에 있을 때만 하단에 띄웁니다. */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -4px 18px rgba(16,20,30,.08);
  transform:translateY(110%); transition:transform .18s ease-out;
}
.stickybar.show{ transform:translateY(0); }
.stickybar .in{ max-width:var(--maxw); margin:0 auto; display:flex; gap:11px; align-items:center; }
.stickybar .sum{ flex:1; min-width:0; font-size:12px; color:var(--mut); line-height:1.4; }
.stickybar .sum b{ display:block; color:var(--ink); font-size:13.5px; font-weight:750; letter-spacing:-.02em; }
.stickybar .btn{ width:auto; flex:none; height:46px; padding:0 20px; font-size:15px; }
body.has-sticky{ padding-bottom:78px; }
@media (min-width:600px){
  .stickybar{ display:none !important; }
  body.has-sticky{ padding-bottom:0; }
}

/* ---------- 결과 접기 ----------
   부대비용 명세와 자금 흐름은 표가 길어 첫 화면을 압도합니다.
   합계만 제목에 남기고 표는 접어 둡니다. */
details.foldcard{ margin-top:2px; }
details.foldcard > summary{
  cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:9px;
  font-size:17px; font-weight:750; letter-spacing:-.02em; padding:2px 0;
}
details.foldcard > summary::-webkit-details-marker{ display:none; }
details.foldcard > summary::after{
  content:"펼치기"; margin-left:auto; font-size:12.5px; font-weight:650;
  color:var(--brand); flex:none; align-self:center;
}
details.foldcard[open] > summary::after{ content:"접기"; color:var(--mut); }
details.foldcard > summary .tot{
  font-size:15px; font-weight:800; color:var(--brand-d); font-variant-numeric:tabular-nums;
}
details.foldcard > summary:hover::after{ text-decoration:underline; }
details.foldcard .fbody{ padding-top:14px; }

/* ---------- 부대비용 카드 ----------
   이 사이트의 차별점인데 다른 카드와 똑같이 생겨서 그냥 지나치던 문제를 고친 것입니다.
   ★ 색깔 알림상자(.notice)를 하나 더 늘리는 방식은 쓰지 마십시오 —
     결과에 이미 색깔 상자가 여덟 개라 아홉 번째는 묻힙니다.
     그래서 알림이 아니라 **다른 종류의 생김새**(왼쪽 굵은 선 + 큰 숫자)로 구분합니다. */
.cashneed{ border-left:4px solid var(--warn); }
.cashneed > .k{ font-size:13px; font-weight:750; color:var(--warn); letter-spacing:-.01em; }
.cashneed > .v{
  font-size:30px; font-weight:850; letter-spacing:-.035em; margin:3px 0 7px;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.cashneed > .s{ font-size:13.5px; color:var(--ink2); line-height:1.62; }
.cashneed details.foldcard{
  margin-top:15px; border-top:1px solid var(--line2); padding-top:11px;
}
.cashneed details.foldcard > summary{ font-size:14px; font-weight:700; color:var(--brand); }

/* ---------- 결과 끝의 「다음 계산기」 ----------
   전에는 작은 회색 라벨 + 외곽선 칩이라 각주처럼 보여 그냥 지나쳤습니다.
   ★ 색깔 알림상자(.notice)를 아홉 번째로 늘리는 방식은 쓰지 마십시오.
     대신 타일 격자로 만들어 「형태」로 구분하고, 각 타일이 무엇을 바꿔 볼 수
     있는지 직접 말하게 했습니다. 링크 이름만 있는 칩은 누를 이유를 안 줍니다. */
.nextcalc{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line2); }
.nextcalc > .k{ font-size:16px; font-weight:800; letter-spacing:-.02em; margin-bottom:3px; }
.nextcalc > .s{ font-size:13px; color:var(--mut); margin-bottom:11px; }
.ncgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:8px; }
.ncgrid a{
  display:block; text-decoration:none; padding:11px 13px;
  border:1px solid var(--line); border-radius:11px; background:#fff;
  transition:border-color .15s ease, background .15s ease;
}
.ncgrid a b{ display:block; font-size:14.5px; font-weight:750; color:var(--ink); letter-spacing:-.02em; }
.ncgrid a span{ display:block; font-size:12px; color:var(--mut); margin-top:2px; line-height:1.45; }
.ncgrid a:hover{ border-color:var(--brand); background:var(--brand-l); }
.ncgrid a:hover b{ color:var(--brand-d); }

/* ---------- 유틸 ---------- */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hidden{ display:none !important; }
.mut{ color:var(--mut); }
.nowrap{ white-space:nowrap; }

/* ---------- 넓은 화면 ---------- */
@media (min-width:600px){
  .hero h1{ font-size:32px; }
  .card{ padding:24px 22px; }
  .grid2{ grid-template-columns:1fr 1fr; gap:14px; }
  .kpis{ grid-template-columns:repeat(4,1fr); }
  .headline .v{ font-size:42px; }
  .btnrow .btn{ flex:0 1 auto; }
}
@media (max-width:380px){
  .seg{ grid-template-columns:1fr 1fr; }
  .headline .v{ font-size:29px; }
}

/* ---------- 인쇄 (상담 자료로 뽑을 수 있게) ---------- */
@media print{
  /* .tune 은 눌러야 뜻이 있는 칸이라 종이에서는 의미가 없습니다.
     월 상환액을 묶으셨다면 그 사실은 아래 한도 막대에 남습니다. */
  header.site, nav.top, .btnrow, .ad, form#calc, .tune{ display:none !important; }
  body{ background:#fff; }
  .card{ box-shadow:none; break-inside:avoid; }
  .headline{ background:#1f4fd8 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* 404 안내 — kpi 상자를 링크로 씁니다. 눌리는 것임이 드러나야 합니다. */
a.kpi{ transition:border-color .12s, background .12s; }
a.kpi:hover{ border-color:var(--brand); background:var(--brand-l); text-decoration:none; }

/* 현장 사례 — 계산이 아니라 20년 중개 경험에서 나온 내용임을 표시합니다.
   경고 4색(info·ok·warn·bad)에 다섯 번째 색을 더하지 않으려고
   배경색 대신 왼쪽 선과 라벨로만 구분합니다. 가이드 전편에서 재사용합니다. */
.fromfield{ margin-top:20px; padding:1px 0 1px 16px; border-left:3px solid var(--brand); }
.fromfield > .lb{ display:block; font-size:12px; font-weight:800; letter-spacing:.04em;
  color:var(--brand); margin-bottom:8px; }
.fromfield p{ font-size:14.5px; line-height:1.78; color:var(--ink2); margin:0 0 12px; }
.fromfield p:last-child{ margin-bottom:0; }
.fromfield b{ font-weight:750; color:var(--ink); }