/* =========================================================
   할부 계산기 시안 A — 영수증·명세서형
   base.css 토큰 위에 얹는 레이아웃 전용. 접두사는 전부 sa-.

   컨셉 : "금융사에서 받아 든 상환 명세서".
     보조금 시안 A(정산서)와 같은 종이·같은 문법을 쓴다 —
     톱니 가장자리 / 점선 리더 / 구분선 3종(점선·실선·이중선) / 형광펜 / 절취선 / 바코드.
     그래야 두 화면을 나란히 놓았을 때 한 사람이 만든 것으로 읽힌다.

   다른 것은 '시간'이다. 보조금은 한 번에 빠지는 돈이라 뺄셈 한 번으로 끝나지만
   할부는 매달 나가는 돈이라 명세가 네 번 꺾인다(+ − = ÷). 그래서 이 종이에만 있는 게 둘 —
       (1) 회차 콤 : 기간을 옮기면 눈금 수가 통째로 바뀐다. 숫자보다 먼저 '몇 번'이 보인다.
       (2) 구성 막대 : 총 상환액이 왜 원금보다 큰지. 색 없이 채운 면(원금) vs 빗금(이자).
   금액 3단 위계는 그대로 계승 : 세부 15px → 피연산자 19px → 결과 42px+.
   ========================================================= */

.sa-page{
  /* 종이는 넓어지지 않는다. 명세서가 1280px에서 가로로 늘어나면 그건 더 이상 명세서가 아니다.
     넓은 화면에서는 대신 여백이 넓어지고, 종이가 책상 위 물건처럼 홀로 선다. */
  padding: clamp(1.5rem, 4vw, 3.25rem) 1rem clamp(3rem, 8vw, 5rem);
}
.sa-doc{
  --sa-gut: clamp(1.1rem, 4.6vw, 1.75rem);   /* 종이 좌우 여백 = 전면 출혈 요소의 음수 마진 기준값 */
  max-width: 31rem;
  margin: 0 auto;
  /* box-shadow 는 톱니 가장자리를 무시하고 사각형 그림자를 만든다.
     drop-shadow 는 실제 알파 모양을 따라가므로 뜯어낸 반원까지 그대로 그린다. */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.05)) drop-shadow(0 14px 26px rgba(0,0,0,.10));
}

/* ---------- 톱니 가장자리 ---------- */
/* 반원을 뜯어낸 8px 띠. mask 가 아니라 background 라서 안쪽 포커스 링을 자르지 않는다. */
.sa-edge{ height:8px; }
.sa-edge--top{
  background: radial-gradient(circle at 8px 0, rgba(0,0,0,0) 7px, var(--surface) 7.5px) repeat-x 0 0 / 16px 8px;
}
.sa-edge--bot{
  background: radial-gradient(circle at 8px 8px, rgba(0,0,0,0) 7px, var(--surface) 7.5px) repeat-x 0 0 / 16px 8px;
}

.sa-paper{
  background: var(--surface);
  padding: 0 var(--sa-gut);
}

/* ---------- 머리말 ---------- */
.sa-head{ padding: 1.4rem 0 1.15rem; }
.sa-title{
  font-size: clamp(1.35rem, 5.4vw, 1.6rem);
  font-weight:700; line-height:1.15; letter-spacing:-.028em;
}

/* ---------- 구역 제목 ---------- */
.sa-sec{ padding: 1.15rem 0; border-top:1px solid var(--line); }
.sa-sec__title{
  /* 한글은 자간을 크게 벌리면 어절 사이가 두 칸처럼 보인다 — 라틴 캡션보다 덜 벌린다 */
  font-size:.6875rem; font-weight:700; letter-spacing:.09em;
  color: var(--muted);
  margin-bottom:.85rem;
}

/* ---------- 행 : [연산자][라벨 …점선…][금액 원] ---------- */
/* 금액은 항상 오른쪽 끝, tabular-nums 라 자릿수가 바뀌어도 열이 흔들리지 않는다. */
.sa-row{
  display:grid;
  grid-template-columns: 1rem minmax(0,1fr) auto;
  align-items: baseline;
  column-gap:.4rem;
  padding:.42rem 0;
}
.sa-op{
  font-size:.8125rem; font-weight:600; color:var(--muted);
  text-align:center; font-variant-numeric:tabular-nums;
}
.sa-label{ display:flex; align-items:baseline; gap:.4rem; min-width:0; }
/* 라벨이 줄바꿈되면 점선 리더가 끊겨 영수증 문법이 깨진다. 대신 점선이 먼저 줄어들게 둔다. */
.sa-label__text{ font-size:.875rem; font-weight:500; white-space:nowrap; }
.sa-dots{
  flex:1 1 auto; min-width:.5rem; height:0;
  border-bottom:1px dotted var(--line);
  transform: translateY(2px);      /* 베이스라인 바로 아래에 눕힌다 */
}
.sa-val{ white-space:nowrap; }
.sa-amt{ font-size:.9375rem; font-weight:500; letter-spacing:-.01em; }
.sa-won{ font-size:.75rem; color:var(--muted); margin-left:.18em; }

/* 원금·이자·총 상환액 = 마지막 나눗셈까지 가는 뼈대. 같은 무게로 한 단 올린다. */
.sa-row--sub{ padding:.55rem 0; }
.sa-row--sub .sa-label__text{ font-size:.9375rem; font-weight:700; }
.sa-row--sub .sa-amt{ font-size:1.1875rem; font-weight:700; letter-spacing:-.02em; }
.sa-row--sub .sa-op{ color:var(--text); }
.sa-row--sub .sa-won{ font-size:.8125rem; }

/* 선택하지 않은 옵션 행. 숨기면 레이아웃이 튀고, 그대로 두면 0원이 시끄럽다 — 잉크만 옅게 뺀다. */
.sa-row.is-off{ opacity:.42; }

.sa-chip{
  font-size:.6875rem; font-weight:700; color:var(--text);
  padding:.08em .38em; border:1px solid var(--line); border-radius:5px;
  white-space:nowrap;
}
/* 보조금 반영 해제 — 칩과 같은 모양이되 누를 수 있다는 걸 커서·호버로 알린다.
   금액 옆이 아니라 라벨 옆에 둔 이유: 오른쪽 금액 열은 숫자만 서는 자리라 버튼이 끼면 자릿수가 흔들린다. */
.sa-chip--x{
  background:transparent; cursor:pointer;
  font-size:.625rem; font-weight:700; color:var(--muted);
  padding:.1em .4em; border:1px solid var(--line); border-radius:5px;
  white-space:nowrap;
  transition:color .18s var(--ease-spring), border-color .18s var(--ease-spring);
}
@media (hover:hover) and (pointer:fine){
  .sa-chip--x:hover{ color:var(--text); border-color:var(--text); }
}

/* 보조금+선수금이 차량가를 넘어 갚을 원금이 없을 때. 0 원을 찍는 대신 말로 알린다. */
.sa-none{
  margin:.9rem 0 0; padding:.7rem .85rem;
  border:1px dashed var(--line); border-radius:8px;
  font-size:.75rem; line-height:1.6; color:var(--muted);
}

/* 빵부스러기는 종이 위에 얹힌다 — 종이와 같은 폭으로 묶어야 왼쪽 끝이 맞는다. */
.sa-crumb{ max-width:31rem; margin:0 auto .85rem; }

/* ---------- 구분선 어휘 ---------- */
.sa-rule{ margin:.45rem 0; }
.sa-rule--dot{ border-top:1px dotted var(--line); }
/* 이중선 = 부기의 총계 밑줄. 이 아래로는 결과밖에 없다는 신호. */
.sa-rule--double{
  height:3px; border-top:1px solid var(--text); border-bottom:1px solid var(--text);
  margin:1.15rem 0 .95rem;
}

/* ---------- 월 납입금 ---------- */
/* 이름(+산식)은 왼쪽 기둥, 결과는 오른쪽. 좁아지면 wrap 이 결과를 아랫줄로 내려보낸다 —
   미디어 쿼리 없이 폭이 스스로 판단하게 둔다. 좁은 화면에서도 금액은 늘 오른쪽 끝에 선다. */
.sa-net{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; column-gap:1rem; row-gap:.1rem;
}
.sa-net__head{ display:flex; flex-direction:column; align-items:flex-start; gap:.05rem; }
.sa-net__title{ font-size:1rem; font-weight:700; letter-spacing:-.02em; }
.sa-net__formula{ font-size:.6875rem; color:var(--muted); white-space:nowrap; }
.sa-net__val{ flex:1 1 auto; text-align:right; }
/* 오너 지시(2026-09-07): 월 납입금은 원금과 같은 크기로 내리고, 그 자리(히어로 크기)를 이자에 준다.
   형광펜은 그대로 월 납입금에 남긴다 — 크기를 내줬어도 '실제로 내는 돈'은 여기이고,
   노랑을 이자로 옮기면 이 시안이 지키는 '노랑은 한 곳' 규칙 안에서 그 사실을 가리킬 수단이 사라진다. */
.sa-net__amt{
  font-size:.9375rem; font-weight:700; line-height:1.4; letter-spacing:-.01em;
}
.sa-won--lg{ font-size:.75rem; color:var(--muted); }
/* 형광펜 자국 — 글자 밑동 46%만 덮는다. 면을 채우는 게 아니라 표시하는 것.
   --bus 위 글자는 --text 로 둬야 대비가 산다(14.44:1). 그래서 원 글자색도 --text 로 올린다. */
.sa-mark{
  background: linear-gradient(to top, var(--bus) 0 46%, rgba(0,0,0,0) 46%);
  padding:0 .1em; margin:0 -.1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- 월 납입금의 원금 / 이자 ---------- */
/* 오너 지시(2026-09-07): 이자가 각인되도록 원금보다 더 티나게.
   위계를 색으로 만들지 않는다(노랑은 위 형광펜 한 곳뿐) — 크기와 반전으로 만든다.
     원금 = 작은 회색 한 줄 (조용히 있되 숨기지는 않는다)
     이자 = 한 단 크게 + 검정 면 반전. 영수증에서 도장이 찍힌 자리처럼 읽힌다. */
.sa-split{ margin-top:.7rem; padding-left:1.4rem; }
.sa-split__row{
  display:flex; align-items:baseline; column-gap:.4rem;
  padding:.2rem 0;
}
.sa-split__lab{
  display:flex; align-items:baseline; gap:.3rem;
  font-size:.8125rem; color:var(--muted); white-space:nowrap;
}
.sa-split__dots{
  flex:1 1 auto; min-width:.5rem; height:0;
  border-bottom:1px dotted var(--line);
  transform: translateY(2px);
}
.sa-split__val{ white-space:nowrap; font-size:.9375rem; color:var(--muted); }

/* 이자 줄 — 라벨까지 검정으로 올리고 금액은 반전 면에 얹는다 */
.sa-split__row--int{ padding-top:.35rem; }
.sa-split__row--int .sa-split__lab{ font-size:.875rem; font-weight:700; color:var(--text); }
/* 좁아지면 큰 숫자를 아랫줄로 내려보낸다 — .sa-net 이 이미 쓰는 방식 그대로다.
   미디어 쿼리로 글자를 줄이지 않는 이유: 오너가 지정한 크기(옛 월 납입금 크기)를
   넓은 화면에서는 그대로 지켜야 하고, 360px 에서만 줄이면 같은 화면이 두 크기를 갖게 된다. */
.sa-split__row--int{ align-items:center; flex-wrap:wrap; row-gap:.15rem; }
.sa-split__row--int .sa-split__lab{ flex:0 1 auto; min-width:0; }
.sa-split__row--int .sa-split__val{
  flex:1 1 auto; text-align:right;
  font-size: clamp(2.1rem, 9vw, 2.75rem);
  font-weight:700; line-height:1.1; letter-spacing:-.035em; color:var(--text);
}
/* 오너 지시(2026-09-07): 검은 반전 면은 이 종이에 어울리지 않는다 — 걷어냈다.
   위계는 크기로만 만든다: 이자 32~44px vs 원금 15px 이면 면을 깔지 않아도 먼저 읽힌다.
   (영수증은 잉크와 선으로만 말하는 지면이라, 채운 면은 늘 이물감으로 남는다) */
.sa-won--int{ font-size:1rem; }
.sa-split__note{
  margin-top:.4rem; font-size:.6875rem; line-height:1.5; color:var(--muted);
}

/* ---------- 회차 콤 = 회차별 이자 ---------- */
/* 눈금 하나 = 납입 1회. 폭은 고정(2px)이고 간격만 벌어지므로
   12회는 성기게, 60회는 빽빽하게 — 기간을 옮기는 순간 '몇 번'이 숫자보다 먼저 온다.
   여기에 높이를 얹었다: 그 회차 이자 ÷ 1회차 이자 를 --h 로 받아 사면을 만든다.
   1회차가 늘 가장 높으므로 --h 는 1 에서 시작해 0 으로 떨어진다. */
/* 바닥선을 긋지 않는다 — 바로 밑에 게이지 트랙이 있어서, 선을 하나 더 그으면 줄이 겹쳐 보인다. */
.sa-comb{
  display:flex; justify-content:space-between; align-items:flex-end;
  height:34px; margin:.15rem 0 .4rem;
}
.sa-comb span{
  width:2px; border-radius:1px 1px 0 0; background:var(--text);
  opacity:.3;                    /* 사면 전체는 배경, 고른 회차만 앞으로 나온다 */
  /* 최소 2px — 마지막 회차 이자는 1회차의 3% 수준이라 그냥 두면 사라진다.
     사라진 눈금은 '이자가 0'이 아니라 '눈금이 없다'로 읽혀 회차 수를 잘못 세게 만든다. */
  height: calc(2px + var(--h, 0) * 32px);
  transition: opacity .12s linear;
}
.sa-comb span.is-on{ opacity:1; width:3px; }
.sa-gauge__sub{ font-size:.6875rem; font-weight:500; color:var(--muted); margin-left:.35em; }
/* 회차 게이지는 위 콤과 한 덩어리라 아래 여백만 남긴다 */
.sa-field--nth{ margin-top:1.1rem; margin-bottom:.2rem; }

/* ---------- 조건(입력) ---------- */
.sa-field{ margin-bottom:1.05rem; }
.sa-field:last-child{ margin-bottom:0; }
.sa-flabel{ display:block; font-size:.75rem; font-weight:600; color:var(--muted); margin-bottom:.45rem; }

/* 모델 : 세그먼트. 선택은 도장을 찍은 검정 면 — 노랑을 쓰지 않고도 가장 강하다. */
.sa-seg{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.sa-seg__btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:.6rem .7rem; min-width:0;
  background:var(--surface); color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-field);
  text-align:left;
  transition: transform .1s ease-out, background .18s var(--ease-spring),
              color .18s var(--ease-spring), border-color .18s var(--ease-spring);
}
.sa-seg__btn:active{ transform:scale(.98); }        /* base §1 : 피드백은 누르는 순간 */
.sa-seg__name{ font-size:.8125rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.sa-seg__price{ font-size:.75rem; opacity:.8; }
.sa-seg__btn[aria-pressed="true"]{
  background:var(--text); color:var(--surface); border-color:var(--text);
}
@media (hover:hover) and (pointer:fine){
  .sa-seg__btn[aria-pressed="false"]:hover{ border-color:var(--text); color:var(--text); }
}

/* 옵션 : 명세의 한 행과 똑같은 문법(라벨 … 점선 … 금액)으로 둔다.
   입력이 결과와 같은 모양을 하고 있으면, 무엇을 켜면 어디가 바뀌는지 설명이 필요 없다. */
.sa-opt{ display:flex; align-items:baseline; gap:.55rem; cursor:pointer; padding:.15rem 0; }
.sa-check{ position:absolute; width:1.2rem; height:1.2rem; opacity:0; margin:0; cursor:pointer; }
.sa-box{
  flex:none; width:1.2rem; height:1.2rem; align-self:center;
  display:grid; place-items:center;
  border:1.5px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--surface);
  transition: background .16s var(--ease-spring), border-color .16s var(--ease-spring);
}
.sa-box svg{ width:.8rem; height:.8rem; opacity:0; transition:opacity .12s ease-out; }
.sa-check:checked + .sa-box{ background:var(--text); border-color:var(--text); }
.sa-check:checked + .sa-box svg{ opacity:1; }
.sa-check:focus-visible + .sa-box{ outline:2px solid var(--text); outline-offset:3px; }
.sa-opt__name{ font-size:.875rem; font-weight:500; white-space:nowrap; }
.sa-opt__price{ font-size:.8125rem; font-weight:500; }

/* 게이지 두 개(선수금·기간)는 같은 부품을 쓴다. 채워진 트랙도 검정 — 색은 결과에만 쓴다. */
.sa-gauge__top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.sa-gauge__top .sa-flabel{ margin-bottom:.45rem; }
.sa-gauge__val{
  font-size:.9375rem; font-weight:700; letter-spacing:-.01em;
  /* 정정 도장(반전)이 켜질 때 자리가 밀리지 않도록 여백을 미리 확보해 둔다 */
  padding:.05em .3em; margin:0 -.3em; border-radius:5px;
}
.sa-range{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:1.4rem; margin:0; padding:0;
  background:transparent; cursor:pointer;
}
.sa-range::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background: linear-gradient(to right, var(--text) 0 var(--sa-fill,0%), var(--line) var(--sa-fill,0%) 100%);
}
.sa-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; margin-top:-9px;
  border-radius:50%; background:var(--surface); border:1.5px solid var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition: transform .1s ease-out;
}
.sa-range:active::-webkit-slider-thumb{ transform:scale(.93); }
.sa-range::-moz-range-track{ height:4px; border-radius:2px; background:var(--line); }
.sa-range::-moz-range-progress{ height:4px; border-radius:2px; background:var(--text); }
.sa-range::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--text); box-shadow:0 1px 3px rgba(0,0,0,.22);
}
/* 눈금은 엄지 반지름(11px)만큼 안쪽으로 물려야 손잡이 자리와 맞는다. */
.sa-ticks{ display:flex; justify-content:space-between; padding:0 11px; margin-top:-.15rem; }
.sa-ticks span{ width:1px; height:4px; background:var(--line); }
.sa-gauge__ends{
  display:flex; justify-content:space-between; gap:.5rem;
  margin-top:.3rem; font-size:.6875rem; color:var(--muted);
}

/* ---------- 선수금 정정 도장 ---------- */
/* 모델을 바꿔 상한을 넘으면 값이 잘린다. 잘린 걸 말해주지 않으면 사용자는 자기가 넣은 숫자를 잃는다. */
.sa-adjust{
  display:flex; align-items:baseline; gap:.4rem;
  margin-top:.45rem; font-size:.6875rem; line-height:1.5; color:var(--text);
  word-break:keep-all;      /* 한글은 기본값이면 어절 한가운데서 끊긴다 */
}
.sa-stampchip{
  flex:none; font-size:.625rem; font-weight:700; letter-spacing:.06em;
  padding:.1em .4em; border-radius:4px;
  background:var(--text); color:var(--surface);
}
@keyframes sa-stamp{
  from{ background:var(--text); color:var(--surface); }
  to  { background:rgba(0,0,0,0); color:var(--text); }
}
.sa-gauge__val.is-stamped{ animation: sa-stamp 1.1s var(--ease-spring) both; }

/* ---------- 고지 ---------- */
/* 약관은 어절 단위로 끊는다(keep-all). 한 문단이 길수록 어절 중간 끊김이 눈에 밟힌다.
   한글 어절은 길어야 대여섯 자라 360px 에서도 넘칠 일이 없다. */
.sa-fine{
  font-size:.75rem; line-height:1.62; color:var(--muted); letter-spacing:-.005em;
  word-break:keep-all;
}

/* ---------- 절취선 + 떼어 가는 쪽 ---------- */
.sa-perf{
  position:relative; height:0;
  border-top:1px dashed var(--line);
  margin: 0 calc(var(--sa-gut) * -1);
}
/* 좌우 반원 노치 — 종이에 구멍을 낸 것처럼 지면색이 파고든다 */
.sa-perf::before,.sa-perf::after{
  content:""; position:absolute; top:-9px;
  width:18px; height:18px; border-radius:50%; background:var(--paper);
}
.sa-perf::before{ left:-9px; }
.sa-perf::after{ right:-9px; }

.sa-stub{ padding:1.35rem 0 1.25rem; display:grid; gap:.6rem; }
/* 브랜드 버튼(.pill)은 base.css 를 그대로 쓴다 — 명세(흑백)와 행동(노랑)을
   절취선으로 갈라 두었으므로 두 노랑이 한 덩어리로 읽히지 않는다.
   첫 CTA 는 문구가 길어 360px 에서 두 줄이 된다 — 자르지 말고 접히게 둔다. */
.sa-btn{
  display:flex; width:100%; justify-content:center; align-items:center;
  flex-wrap:wrap; text-align:center; line-height:1.3;
}
.sa-btn__go{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.sa-barcode{
  height:30px; margin-top:.6rem; opacity:.42;   /* 질감이지 초점이 아니다 */
  background: repeating-linear-gradient(to right,
    var(--text) 0 1px, rgba(0,0,0,0) 1px 3px,
    var(--text) 3px 5px, rgba(0,0,0,0) 5px 6px,
    var(--text) 6px 7px, rgba(0,0,0,0) 7px 10px,
    var(--text) 10px 13px, rgba(0,0,0,0) 13px 14px);
}

/* ---------- 접근성 ---------- */
@media (prefers-reduced-motion:reduce){
  /* base.css 가 전역 transition 을 끄지만 @keyframes 는 못 막는다 — 여기서 명시적으로 못박는다.
     도장 애니메이션이 꺼져도 '정정' 칩과 문구는 그대로 남으므로 변경 사실은 여전히 보인다. */
  .sa-gauge__val.is-stamped{ animation:none; }
  .sa-seg__btn:active,
  .sa-range:active::-webkit-slider-thumb{ transform:none; }
}
@media (prefers-contrast:more){
  .sa-dots,.sa-rule--dot{ border-color:var(--muted); }
  .sa-won,.sa-fine,.sa-gauge__ends,.sa-split__lab,.sa-split__val,.sa-split__note{ color:#4B4B50; }
  .sa-split__row--int .sa-split__lab,.sa-split__row--int .sa-split__val{ color:var(--text); }
  .sa-comb span{ opacity:.55; }
  .sa-comb span.is-on{ opacity:1; }
  .sa-row.is-off{ opacity:.62; }
  .sa-barcode{ opacity:.9; }
}