/* =========================================================
   보조금/할부 계산기 — 공용 스타일 (calc.css)
   허브(calc.html) · 보조금 계산기(calc-subsidy.html) · 할부 계산기(calc-installment.html) 셋이 함께 쓴다.
   base.css(토큰·.pill·.topbar) · site-foot.css 위에 얹는다. 그 둘은 수정하지 않는다.

   원칙
   - 새 색을 만들지 않는다. 전부 base.css 의 var(). 노랑(--bus)은 한 페이지에 딱 세 자리 —
     ① 게이지의 채워진 트랙 ② 결과 카드의 머리 면(주인공 숫자) ③ 주 CTA 알약(.pill).
   - 모든 클래스는 calc- 접두사. rsv-(예약 모달)·sbs-(견적 모달)·landing.css 의 클래스와 겹치지 않는다.
   - 움직이는 것은 transform·opacity 뿐. 숫자는 즉시 바뀐다(카운트업 없음 — 손가락을 따라와야 한다).
   - 호버는 (hover:hover) and (pointer:fine) 안에서만. reduced-motion / contrast:more 대응. 다크모드 없음.
   - 아정당에서 가져온 것: 흰 카드 + 은은한 그림자, 숫자가 주인공(굵고 크게 + 작은 한글 단위),
     질문형 제목, 넉넉한 여백, 화면 아래 고정 요약 바. 아정당의 파랑은 가져오지 않는다.
   ========================================================= */

/* ---------- 0. 토큰 (base.css 위에 얹는 계산기 전용 값) ---------- */
.calc-page{
  --calc-max:64rem;            /* 2열 그리드 최대 폭 */
  --calc-narrow:40rem;         /* 허브·좁은 기둥 */
  --calc-gap:1rem;
  --calc-pad:clamp(1.1rem,4vw,1.5rem);                                   /* 카드 안쪽 여백 */
  --calc-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.05);   /* landing .card 와 같은 값 */
  --calc-track:.5rem;          /* 게이지 트랙 8px */
  --calc-thumb:1.75rem;        /* 게이지 손잡이 28px — input 높이가 곧 탭 타깃 */
  --calc-hero:clamp(2.25rem,8vw,3.25rem);                                /* 주인공 숫자 */
  --calc-top:3.25rem;          /* .topbar 높이 — sticky 결과 카드 기준 */
  --calc-bar-h:4.25rem;        /* 좁은 화면 고정 바 높이 초기값(JS 가 실측해 --foot-clear 에 넣는다) */
  display:block;
  padding:clamp(1.5rem,5vw,3rem) var(--pad-page) clamp(3rem,8vw,5rem);
  word-break:keep-all;overflow-wrap:break-word;
}
.calc-wrap{max-width:var(--calc-max);margin-inline:auto;}
.calc-wrap.is-narrow{max-width:var(--calc-narrow);}

/* 스크린리더 전용(landing.css 의 .vh 와 같은 값 — 그 파일을 싣지 않으므로 여기 다시 둔다) */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---------- 1. 상단바 보강 (landing.css 가 없으므로) ---------- */
.topbar .calc-brand{font-weight:700;color:var(--text);}
.topbar .telnum{display:inline-flex;align-items:center;gap:.3em;min-height:2.75rem;font-weight:600;color:var(--text);}

/* ---------- 2. 머리 ---------- */
.calc-crumb{margin-bottom:1rem;font-size:.8125rem;color:var(--muted);letter-spacing:0;}
.calc-crumb a{font-weight:600;}
.calc-crumb [aria-current]{color:var(--text);font-weight:600;}
.calc-head{margin-bottom:clamp(1.25rem,4vw,2rem);}
.calc-head .eyebrow{color:var(--bus-ink);}
.calc-head .title{margin-top:.5rem;max-width:20ch;}
.calc-head .lead{margin-top:.75rem;max-width:44ch;}

/* ---------- 3. 그리드: 입력 / 결과 ---------- */
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--calc-gap);align-items:start;}
@media (min-width:52rem){
  .calc-grid{grid-template-columns:minmax(0,1fr) minmax(20rem,24rem);gap:1.5rem;}
  .calc-result{position:sticky;top:calc(var(--calc-top) + 1rem);}
}

/* ---------- 4. 카드 ---------- */
.calc-card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--calc-shadow);padding:var(--calc-pad);}

/* ---------- 5. 입력 항목 ---------- */
/* fieldset 은 브라우저 기본 margin-inline:2px / padding:0.35em 0.75em 0.625em / border:2px groove 를 달고 태어난다. 먼저 걷어낸다. */
.calc-field{margin:0;padding:0;border:0;min-width:0;}

/* 입력 카드 안의 항목은 1px 선으로 나눈다(.sbs-total 과 같은 문법). 숨긴 칩 뒤의 첫 항목에는 선을 긋지 않는다.
   ★ 이 두 줄은 반드시 위 .calc-field 리셋보다 **뒤에** 있어야 한다 — 둘 다 명시도 (0,1,0) 이라
   순서가 승부를 가른다. 위로 올리면 .calc-field 인 항목만 간격이 0 이 되어 앞 항목에 달라붙는다. */
.calc-form>*+*{margin-top:1.1rem;padding-top:1.1rem;box-shadow:0 -1px 0 var(--line);}
.calc-form>[hidden]+*{margin-top:0;padding-top:0;box-shadow:none;}
.calc-field legend{padding:0;}
.calc-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
.calc-field-lab{display:block;font-size:.9375rem;font-weight:700;letter-spacing:-0.01em;}
.calc-field-sub{font-size:.75rem;font-weight:500;color:var(--muted);margin-left:.35em;letter-spacing:0;}
.calc-field-val{font-size:1.0625rem;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.calc-field-hint{margin-top:.5rem;font-size:.8125rem;line-height:1.6;color:var(--muted);letter-spacing:0;}

/* 세그먼트 — 라이브 견적 모달(.sbs-seg)과 같은 언어: paper 트랙 위에서 고른 것만 흰 알약으로 떠오른다. */
.calc-seg{margin-top:.6rem;display:flex;gap:.25rem;padding:.25rem;border-radius:var(--r-pill);background:var(--paper);}
.calc-segbtn{
  flex:1 1 0;min-width:0;appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:.7rem .75rem;min-height:2.75rem;border-radius:var(--r-pill);
  background:transparent;color:var(--muted);
  font:inherit;font-size:.9375rem;font-weight:600;letter-spacing:-0.01em;
  transition:transform .1s ease-out, background .22s var(--ease-spring), color .22s var(--ease-spring);
}
.calc-segbtn.is-on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);}
.calc-segbtn:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){ .calc-segbtn:not(.is-on):hover{color:var(--text);} }

/* 체크 한 줄 — 네이티브 체크박스. 색은 행동에만 쓴다는 규칙상 노랑이 아니라 검정 */
.calc-check{display:flex;align-items:center;gap:.75rem;cursor:pointer;}
.calc-check input{width:1.25rem;height:1.25rem;margin:0;flex:none;accent-color:var(--text);}
.calc-check-lab{font-size:.9375rem;font-weight:600;letter-spacing:-0.01em;}
.calc-check-val{margin-left:auto;font-size:.9375rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
/* 선택옵션 구성 (2026-10-14) — 체크박스 아래 설명. 들여쓰기는 체크박스 폭(1.25rem)+간격(.75rem) */
.calc-opts{margin:.6rem 0 0 2rem;display:grid;gap:.45rem;font-size:.8125rem;line-height:1.55;letter-spacing:0;}
.calc-opts dt{font-weight:700;color:var(--text);}
.calc-opts dd{margin:0;color:var(--muted);}

/* ---------- 6. 게이지(range) ----------
   채움은 --fill(%) 하나로 그린다. JS 가 (value-min)/(max-min) 을 넣는다.
   WebKit 은 트랙 배경의 그라디언트로, Firefox 는 ::-moz-range-progress 로 같은 그림을 낸다. */
.calc-range{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:var(--calc-thumb);margin:.4rem 0 0;
  background:transparent;cursor:pointer;
  --fill:0%;
}
.calc-range::-webkit-slider-runnable-track{
  height:var(--calc-track);border-radius:var(--r-pill);
  background:linear-gradient(to right, var(--bus) 0 var(--fill), var(--line) var(--fill) 100%);
}
.calc-range::-moz-range-track{height:var(--calc-track);border-radius:var(--r-pill);background:var(--line);}
.calc-range::-moz-range-progress{height:var(--calc-track);border-radius:var(--r-pill);background:var(--bus);}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:var(--calc-thumb);height:var(--calc-thumb);
  margin-top:calc((var(--calc-track) - var(--calc-thumb)) / 2);
  border:0;border-radius:50%;background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.14);
  transition:transform .1s ease-out;
}
.calc-range::-moz-range-thumb{
  width:var(--calc-thumb);height:var(--calc-thumb);
  border:0;border-radius:50%;background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.14);
  transition:transform .1s ease-out;
}
.calc-range:active::-webkit-slider-thumb{transform:scale(1.08);}
.calc-range:active::-moz-range-thumb{transform:scale(1.08);}
/* 포커스 링은 base.css :focus-visible(검정 2px)이 input 상자에 그대로 걸린다 — 따로 끄지 않는다 */
.calc-range:focus-visible{border-radius:var(--r-pill);}
.calc-range-ends{display:flex;justify-content:space-between;gap:1rem;margin-top:.15rem;font-size:.75rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:0;}

/* 기간 눈금 — 게이지 아래 5개. 누르면 그 값으로 간다. */
.calc-ticks{display:flex;justify-content:space-between;margin-top:.35rem;}
.calc-tick{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:.35rem .4rem;min-width:2.75rem;min-height:2rem;border-radius:var(--r-pill);
  font:inherit;font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:0;font-variant-numeric:tabular-nums;
  transition:background .18s var(--ease-spring), color .18s var(--ease-spring);
}
.calc-tick-u{font-size:.6875rem;font-weight:500;margin-left:.1em;}
.calc-tick.is-on{background:var(--paper);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);}
@media (hover:hover) and (pointer:fine){ .calc-tick:not(.is-on):hover{color:var(--text);} }

/* ---------- 7. 결과 카드 ---------- */
.calc-result-hero{padding:var(--calc-pad);background:var(--bus);color:var(--text);border-radius:calc(var(--r-card) - .4rem);}
.calc-result-lab{font-size:.875rem;font-weight:700;letter-spacing:-0.01em;}
.calc-result-sub{font-weight:500;opacity:.7;}
.calc-hero{
  margin-top:.35rem;display:flex;align-items:baseline;gap:.15em;white-space:nowrap;
  font-size:var(--calc-hero);font-weight:700;line-height:1.05;letter-spacing:-0.032em;
}
.calc-hero-unit{font-size:.42em;font-weight:600;letter-spacing:-0.01em;}
.calc-result-cond{margin-top:.6rem;font-size:.8125rem;font-weight:500;line-height:1.5;opacity:.8;letter-spacing:0;}

.calc-rows{margin:1rem 0 0;padding:0 .25rem;}
.calc-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.6rem 0;}
.calc-row+.calc-row{box-shadow:0 -1px 0 var(--line);}
.calc-row dt{font-size:.875rem;font-weight:600;color:var(--muted);letter-spacing:-0.01em;}
.calc-row-sub{display:block;margin-top:.1rem;font-size:.75rem;font-weight:500;color:var(--muted);letter-spacing:0;}
.calc-row dd{margin:0;flex:none;font-size:1rem;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;}
.calc-row.is-total dt{color:var(--text);font-weight:700;}
.calc-row.is-total dd{font-size:1.2rem;letter-spacing:-0.024em;}
.calc-row.is-sub dd{color:var(--muted);}

/* 원금이 0 이하일 때 — 숫자 자리는 남기고 흐리게, 설명은 아래 .calc-empty 가 한다 */
.calc-result.is-empty .calc-hero{opacity:.35;}
.calc-empty{margin-top:.85rem;font-size:.875rem;line-height:1.6;color:var(--text);}

/* 고지 — 라이브 견적 모달 .sbs-note 와 같은 값. 접거나 흐리지 않는다. 색 대신 면과 선으로 세운다. */
.calc-note{
  margin-top:1rem;padding:.85rem .9rem;border-radius:var(--r-field);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  font-size:.8125rem;font-weight:500;line-height:1.6;letter-spacing:0;color:var(--text);
}
noscript.calc-note{display:block;}

.calc-cta{margin-top:1rem;display:grid;gap:.5rem;}
.calc-cta .pill{justify-content:center;min-height:2.75rem;text-align:center;}
@media (min-width:26rem){ .calc-cta{grid-template-columns:1fr 1fr;} }
/* 위 26rem 은 '화면' 폭이지 '이 버튼이 놓인 자리'의 폭이 아니다. 52rem 부터 결과 카드는 20~24rem 짜리
   옆기둥으로 좁아지는데, 화면만 보고 2열로 쪼개면 한 칸이 11rem 밖에 안 남아 `전화상담 1666-5944` 가 두 줄로 접힌다.
   옆기둥이 되는 구간에서만 1열로 되돌린다(허브 calc.html 의 .calc-cta 는 결과 카드 밖이라 영향 없음). */
@media (min-width:52rem){ .calc-result .calc-cta{grid-template-columns:minmax(0,1fr);} }
.calc-link{margin-top:.85rem;text-align:center;font-size:.8125rem;color:var(--muted);letter-spacing:0;}
.calc-link a{font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:.2em;}

/* 보조금 반영 칩(할부 페이지, URL 파라미터가 있을 때만) */
.calc-chip{
  display:inline-flex;align-items:center;gap:.4rem;margin:0;
  padding:.35rem .5rem .35rem .85rem;border-radius:var(--r-pill);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  font-size:.8125rem;font-weight:600;letter-spacing:0;
}
.calc-chip-x{
  appearance:none;border:0;cursor:pointer;
  width:1.75rem;height:1.75rem;border-radius:50%;
  display:inline-grid;place-items:center;
  background:rgba(0,0,0,.05);color:var(--muted);font:inherit;font-size:.8125rem;
  transition:background .18s var(--ease-spring), color .18s var(--ease-spring);
}
@media (hover:hover) and (pointer:fine){ .calc-chip-x:hover{background:rgba(0,0,0,.09);color:var(--text);} }

/* ---------- 8. 좁은 화면 고정 요약 바 ----------
   결과 카드가 입력 아래로 내려가므로, 손가락이 게이지 위에 있는 동안 숫자를 여기서 보여 준다.
   층은 도크와 같은 60(이 페이지에 도크는 없다). 예약 모달(100) 아래. */
.calc-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:.75rem;
  min-height:var(--calc-bar-h);
  padding:.65rem var(--pad-page) calc(.65rem + env(safe-area-inset-bottom,0px));
  background:rgba(245,245,247,.88);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 -1px 0 var(--line);
}
.calc-bar-lab{font-size:.75rem;font-weight:600;color:var(--muted);letter-spacing:0;white-space:nowrap;}
.calc-bar-val{margin-right:auto;font-size:1.25rem;font-weight:700;letter-spacing:-0.024em;white-space:nowrap;}
.calc-bar-cta{padding:.6rem 1.1rem;font-size:.875rem;white-space:nowrap;}
@media (min-width:52rem){ .calc-bar{display:none;} }

/* ---------- 9. 허브 카드 ---------- */
.calc-hub{margin-top:.5rem;display:grid;gap:var(--calc-gap);grid-template-columns:1fr;}
@media (min-width:40rem){ .calc-hub{grid-template-columns:1fr 1fr;} }
.calc-hub-card{
  display:flex;flex-direction:column;gap:.5rem;
  padding:var(--calc-pad);background:var(--surface);border-radius:var(--r-card);box-shadow:var(--calc-shadow);
  color:inherit;
  transition:transform .1s ease-out, box-shadow .18s var(--ease-spring);
}
.calc-hub-card .cap{color:var(--bus-ink);}
.calc-hub-card h2{font-size:1.25rem;font-weight:700;letter-spacing:-0.02em;line-height:1.3;}
.calc-hub-card p:not(.cap){font-size:.9375rem;line-height:1.6;color:var(--muted);}
.calc-hub-go{margin-top:auto;padding-top:.5rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.9375rem;font-weight:600;}
.calc-hub-card:active{transform:scale(.985);}
@media (hover:hover) and (pointer:fine){
  .calc-hub-card:hover{box-shadow:0 1px 2px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.09);}
  .calc-hub-card:hover .chev{transform:translateX(3px);}
}

/* ---------- 10. 상태: 값이 바뀌었다는 한 번의 튕김 ---------- */
@keyframes calc-bump{0%{transform:scale(1);}40%{transform:scale(1.06);}100%{transform:scale(1);}}
.is-bump{animation:calc-bump .32s var(--ease-spring);display:inline-block;}

/* ---------- 11. 접근성 대응 ---------- */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .is-bump{animation:none;}
  html:not(.force-motion) .calc-range:active::-webkit-slider-thumb,
  html:not(.force-motion) .calc-range:active::-moz-range-thumb,
  html:not(.force-motion) .calc-segbtn:active,
  html:not(.force-motion) .calc-hub-card:active{transform:none;}
}
@media (prefers-reduced-transparency:reduce){
  .calc-bar{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media (prefers-contrast:more){
  .calc-card,.calc-hub-card{box-shadow:none;outline:1px solid var(--line);outline-offset:-1px;}
  .calc-seg{box-shadow:inset 0 0 0 1px var(--line);}
  .calc-segbtn.is-on{box-shadow:inset 0 0 0 2px var(--text);}
  .calc-range::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--text) 0 var(--fill), var(--line) var(--fill) 100%);}
  .calc-range::-moz-range-progress{background:var(--text);}
  .calc-range::-webkit-slider-thumb,.calc-range::-moz-range-thumb{box-shadow:inset 0 0 0 2px var(--text);}
  .calc-result-hero{box-shadow:inset 0 0 0 2px var(--text);}
  .calc-note{box-shadow:inset 0 0 0 2px var(--line);}
  .calc-bar{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -2px 0 var(--line);}
}
@media print{
  .calc-bar{display:none;}
  .calc-result{position:static;}
}