/* 선납이연 계산기 전용 CSS (2026-10-16). 2패널 계산형 sni-*(상속세·보유세 계산기와 같은 골격) + 묶음 줄 + 그림 2개(선납·지연 저울, 납입 지도) + 방식 비교표·회차별 표(R45). 공용 부품은 assets/v2.css */
.sni-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.sni-in{padding:16px 18px 18px;min-width:0}
.sni-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.sni-fields .v2-f{min-width:0}
.sni-fields .v2-f>.v2-label{display:block}
.sni-fields [hidden]{display:none}
.sni-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sni-date{margin-top:5px}
.sni-date input[type="date"],.sni-groups input[type="date"]{display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sni-date input[type="date"]:focus,.sni-groups input[type="date"]:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.sni-fields input[aria-invalid="true"]{border-color:var(--accent)}
.v2-input:has(input[aria-invalid="true"]){border-color:var(--accent)}
.sni-chips{margin-top:6px;flex-wrap:wrap}
.sni-chips button{height:26px;padding:0 9px;font-size:12px}
.sni-seg{margin-top:6px;flex-wrap:wrap}
.sni-seg button{height:32px;padding:0 12px;font-family:var(--sans);font-size:12.5px;font-weight:700;white-space:nowrap}
.sni-words{display:block;min-height:18px;margin-top:4px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.sni-words:empty{min-height:0;margin-top:0}
.sni-words.is-error{color:var(--accent)}
.sni-hint{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.sni-hint:empty{display:none}
.sni-trate{margin-top:10px;max-width:180px}
.sni-trate[hidden]{display:none}
.sni-trate .v2-label{display:block;margin-bottom:5px}
/* 납입 묶음: 번호 | 넣는 날 | 회분 | 지우기 — 머리글과 같은 열 격자로 세로선 맞춤 */
.sni-regnote{margin:10px 0 0;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--radius);font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.sni-regnote[hidden]{display:none}
.sni-gbox{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.sni-gbox[hidden]{display:none}
.sni-ghead,.sni-groups li{display:grid;grid-template-columns:18px minmax(0,1fr) 100px 34px;gap:6px;align-items:center}
.sni-ghead{margin-bottom:5px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.sni-groups{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sni-gno{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.sni-gfix{display:flex;align-items:center;height:var(--v2-ctl,42px);padding:0 10px;border:1px dashed var(--line);border-radius:var(--radius);font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden}
.sni-gc{min-width:0}
.sni-gdel{height:var(--v2-ctl,42px);width:34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.sni-gdel:hover:not(:disabled){color:var(--ink);border-color:var(--ink)}
.sni-gdel:disabled{visibility:hidden}
.sni-gdel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sni-gfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
.sni-gfoot .v2-btn{height:30px;padding:0 10px;font-size:12px;white-space:nowrap}
.sni-gfoot [hidden]{display:none}
.sni-gsum{margin-left:auto;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sni-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.sni-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
/* 결과 패널 */
.sni-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.sni-out>.v2-label{display:block;margin-bottom:6px}
.sni-out .v2-big{flex-wrap:wrap;font-size:40px}
.sni-out .v2-big>span{min-width:0;overflow-wrap:anywhere}
.v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.sni-pill{align-self:flex-start;margin:10px 0 0;padding:4px 10px;border:1px solid var(--ink);border-radius:999px;font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.4;color:var(--ink)}
.sni-pill::before{content:"✓ "}
.sni-pill.is-late{border-color:var(--accent);border-style:dashed;color:var(--accent)}
.sni-pill.is-late::before{content:"! "}
.sni-pill[hidden]{display:none}
.sni-rows{margin-top:14px}
.sni-rows li span{min-width:0;flex:1 1 auto}
.sni-rows li span em{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:1;max-width:100%;overflow-wrap:anywhere}
.sni-rows li b{flex:0 0 auto;white-space:nowrap;text-align:right}
.sni-rows li.sum b{font-size:1.05em}
.sni-tip{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--wash);font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.55;color:var(--ink)}
.sni-tip[hidden]{display:none}
.sni-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.sni-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.sni-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.sni-caveat+.sni-foot{margin-top:14px}
.sni-foot .v2-status{margin-left:auto}
/* 그림 2개: 저울 | 납입 지도. 작업면 폭이 좁으면 위아래로 */
.sni-vis{container:snivis / inline-size;border-top:1px solid var(--soft)}
.sni-vis[hidden]{display:none}
.sni-vgrid{display:grid;grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr)}
.sni-vcard{padding:14px 18px 16px;min-width:0}
.sni-vcard+.sni-vcard{border-left:1px solid var(--soft)}
.sni-vcard>.v2-label{display:block;margin-bottom:8px}
.sni-note{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
/* 저울: 빔이 기울고 두 접시가 따라 오르내린다 — transitions-dev 모션 토큰(강조 500ms, --ease-bounce) */
:root{--sni-tilt-dur:500ms;--sni-tilt-ease:cubic-bezier(0.34, 1.36, 0.64, 1);--resize-dur:300ms;--resize-ease:cubic-bezier(0.22, 1, 0.36, 1)}
.sni-scale{display:block;width:100%;max-width:280px;height:auto;margin:0 auto;overflow:visible}
.sni-post{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.sni-beam path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.sni-beam circle{fill:var(--ink)}
.sni-str{fill:none;stroke:var(--muted);stroke-width:1.2}
.sni-dish{stroke-width:1.6}
.sni-dish.is-pre{fill:color-mix(in srgb, var(--ink) 16%, transparent);stroke:var(--ink)}
.sni-dish.is-late{fill:color-mix(in srgb, var(--accent) 18%, transparent);stroke:var(--accent);stroke-dasharray:4 3}
.sni-cap{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--muted);text-anchor:middle}
.sni-val{font-family:var(--sans);font-size:13px;font-weight:800;fill:var(--ink);text-anchor:middle;font-variant-numeric:tabular-nums}
.t-tilt{transform-box:view-box;transition:transform var(--sni-tilt-dur) var(--sni-tilt-ease);will-change:transform}
#sniBeam{transform-origin:120px 40px}
.t-resize{transition:height var(--resize-dur) var(--resize-ease),width var(--resize-dur) var(--resize-ease)}
@media (prefers-reduced-motion:reduce){ .t-tilt,.t-resize{transition:none !important} }
/* 납입 지도: 위 = 넣는 날의 동전 더미, 가운데 = 약정일 점, 아래 = 약정일에서 넣는 날로 옮긴 곡선 */
.sni-mapwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 2px}
.sni-mapwrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sni-map{position:relative;min-width:460px;margin:0 22px}
.sni-stacks{position:relative;height:112px;margin:0;padding:0;list-style:none}
.sni-stacks li{position:absolute;bottom:0;width:0}
.sni-coins{position:absolute;bottom:0;left:-11px;width:22px;border-radius:3px 3px 0 0;background:repeating-linear-gradient(to top,var(--fill) 0 calc(var(--coin) - 1px),var(--card) calc(var(--coin) - 1px) var(--coin))}
.sni-stacks span{position:absolute;left:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;font-family:var(--sans);line-height:1.25}
.sni-stacks .is-r span{transform:translateX(calc(-100% + 11px));align-items:flex-end}
.sni-stacks .is-l span{transform:translateX(-11px);align-items:flex-start}
.sni-stacks b{font-size:12px;font-weight:800;color:var(--ink)}
.sni-stacks small{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.sni-axis{position:relative;height:2px;background:var(--line)}
.sni-due{position:absolute;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--card);border:2px solid var(--muted)}
.sni-due.d-pre{border-color:var(--ink)}
.sni-due.d-late{border-color:var(--accent);border-style:dotted}
.sni-due.d-on{background:var(--muted)}
.sni-flag{position:absolute;bottom:2px;width:2px;height:30px;margin-left:-1px;background:repeating-linear-gradient(to top,var(--muted) 0 4px,transparent 4px 7px)}
.sni-ext{position:absolute;top:-3px;height:8px;background:repeating-linear-gradient(135deg,var(--accent) 0 3px,transparent 3px 6px);opacity:.7}
.sni-arcs{display:block;width:100%;height:46px;overflow:visible}
.sni-arcs path{fill:none;stroke-width:1.6}
.sni-arcs .a-pre{stroke:var(--ink)}
.sni-arcs .a-late{stroke:var(--accent);stroke-dasharray:4 3}
.sni-ends{display:flex;justify-content:space-between;gap:12px;margin:4px 0 0;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sni-keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:12px;color:var(--muted)}
.sni-keys li::before{content:"";display:inline-block;width:16px;height:0;margin-right:6px;vertical-align:middle;border-top:2px solid var(--muted)}
.sni-keys .k-pre::before{border-top-color:var(--ink)}
.sni-keys .k-late::before{border-top:2px dashed var(--accent)}
.sni-keys .k-on::before{width:8px;height:8px;border:0;border-radius:50%;background:var(--muted)}
/* 표 */
.sni-tbl{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.sni-tbl[hidden]{display:none}
.sni-tbl>.v2-label{display:block;margin-bottom:8px}
.sni-tbl .tbl,.sni-rounds .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.sni-tbl .tbl:focus-visible,.sni-rounds .tbl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sni-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.sni-table th,.sni-table td{padding:7px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.sni-table thead th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0}
.sni-table tbody th{font-weight:600}
.sni-table tbody th small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.sni-table .n{text-align:right}
.sni-table td.is-late{color:var(--accent)}
.sni-table tr.is-cur th,.sni-table tr.is-cur td{background:var(--accent-wash);color:var(--ink)}
.sni-rounds{padding:12px 18px 16px;border-top:1px solid var(--soft)}
.sni-rounds[hidden]{display:none}
.sni-rounds summary{cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.sni-rounds summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sni-rounds .tbl{margin-top:8px;max-height:420px;overflow-y:auto}
/* 입력 패널이 좁으면 쌍 칸을 한 열로(11자리 금액이 잘리지 않게, align-check) */
@container v2in (max-width:420px){
  .sni-pair{grid-template-columns:minmax(0,1fr)}
}
@container v2in (max-width:330px){ /* 날짜 칸이 141px 아래로 줄면 값이 잘린다(align-check) → 회분 칸을 아랫줄로 */
  .sni-ghead,.sni-groups li{grid-template-columns:18px minmax(0,1fr) 34px}
  .sni-ghead span:nth-child(3){display:none}
  .sni-groups .sni-gc{grid-column:2}
  .sni-groups .sni-gdel{grid-column:3;grid-row:1}
}
@container snivis (max-width:700px){
  .sni-vgrid{grid-template-columns:minmax(0,1fr)}
  .sni-vcard+.sni-vcard{border-left:0;border-top:1px solid var(--soft)}
}
@media (max-width:720px){
  .sni-grid{grid-template-columns:minmax(0,1fr)}
  .sni-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .sni-in,.sni-out,.sni-vcard,.sni-tbl,.sni-rounds{padding-left:12px;padding-right:12px}
  .sni-out .v2-big{font-size:34px}
}