/* 자동차 할부 계산기 전용 CSS (2026-10-17). 2패널 계산형 cic-* + 지출 구성 막대(A·B 같은 눈금, R45: 값이 바뀌면 폭이 부드럽게 이동) + A·B 비교 두 막대
   + 남은 할부 잔액 그림(A 선이 그려짐·달 막대로 점이 미끄러짐) + 조건 바꿔 보기 표 + 회차표. 공용 부품은 assets/v2.css */
.cic-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.cic-in{padding:16px 18px 18px;min-width:0}
.cic-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.cic-fields .full{grid-column:1 / -1}
.cic-fields .v2-f{min-width:0}
.cic-fields .v2-f>.v2-label{display:block}
.cic-fields .v2-input input{min-width:0}
.cic-fields [hidden]{display:none}
.cic-rt .v2-label{display:block;margin-bottom:6px}
.cic-chips{margin-top:8px;flex-wrap:wrap}
.cic-chips[hidden]{display:none}
.cic-chips button,.cic-ex button{height:30px;padding:0 9px;font-family:var(--sans);font-size:12.5px;font-weight:600;white-space:nowrap}
.cic-words{display:block;min-height:18px;margin-top:4px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.cic-words:empty{min-height:0;margin-top:0}
.cic-hint{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.cic-hint:empty{display:none}
.cic-fields>.cic-hint{margin-top:-6px}
.cic-cmpsw{padding-top:12px;border-top:1px dashed var(--line)}
.cic-b{margin:0;padding:0;border:0;min-width:0}
.cic-sub{padding:0;margin:0 0 2px;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.cic-bhint{margin:0 0 10px}
.cic-bgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.cic-bgrid .v2-input input::placeholder{opacity:.45}
.cic-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.cic-exl{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.cic-ex{flex-wrap:wrap}
/* 결과 패널 */
.cic-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.cic-out .v2-label{display:block;margin-bottom:6px}
.cic-out .v2-big{flex-wrap:wrap;row-gap:6px}
.cic-out .v2-big>span{min-width:0;overflow-wrap:anywhere}
.cic-out .v2-big small{flex-basis:100%;display:block;margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--muted)}
.v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.cic-rows{margin-top:14px}
.cic-rows li span{min-width:0;flex:1 1 auto}
.cic-rows li span em{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:1;max-width:100%;overflow-wrap:anywhere}
.cic-rows li b{flex:0 0 auto}
.cic-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.cic-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.cic-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.cic-foot .v2-status{margin-left:auto}
/* 값이 바뀌면 막대 폭이 부드럽게 이동 — transitions-dev 01 card resize 스니펫(.t-resize) */
.cic-grid,.cic-cmp,.cic-vis{--resize-dur:300ms;--resize-ease:cubic-bezier(0.22, 1, 0.36, 1)}
.t-resize{transition:width var(--resize-dur) var(--resize-ease),height var(--resize-dur) var(--resize-ease);will-change:width,height}
/* 지출 구성: 선수금(옅은 잉크)·나눠 갚는 원금(진한 잉크)·유예금(빗금)·이자(강조색) */
.cic-mix{margin-top:14px}
.cic-mix[hidden]{display:none}
.cic-mixbars{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.cic-mixbars li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;font-family:var(--sans)}
.cic-mixbars li[hidden]{display:none}
.cic-mixbars li>span{font-size:11.5px;font-weight:800;color:var(--muted);min-width:12px}
.cic-mixbars li>b{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cic-mixbar{display:flex;height:14px;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.cic-mixbar i{display:block;flex:0 0 auto;width:0;height:100%}
.cic-mixbar i+i{box-shadow:inset 1px 0 0 var(--paper)}
.cic-mixbar .s-down,.cic-keys .k-down::before{background:color-mix(in srgb,var(--ink) 22%,var(--paper))}
.cic-mixbar .s-split,.cic-keys .k-split::before{background:color-mix(in srgb,var(--ink) 55%,var(--paper))}
.cic-mixbar .s-bal,.cic-keys .k-bal::before{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 55%,var(--paper)) 0 2px,color-mix(in srgb,var(--ink) 12%,var(--paper)) 2px 5px)}
.cic-mixbar .s-int,.cic-keys .k-int::before{background:var(--accent)}
.cic-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)}
.cic-keys li{white-space:nowrap}
.cic-keys li::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;vertical-align:-1px}
.cic-keys .k-la::before{height:0;width:14px;border-top:2.5px solid var(--accent);border-radius:0;vertical-align:3px}
.cic-keys .k-lb::before{height:0;width:14px;border-top:2px dashed var(--ink);border-radius:0;vertical-align:3px}
/* A·B 비교 */
.cic-cmp,.cic-vis,.cic-tbl{padding:16px 18px 18px;border-top:1px solid var(--soft)}
.cic-cmp[hidden],.cic-vis[hidden],.cic-tbl[hidden]{display:none}
.cic-cmp>.v2-label,.cic-vis>.v2-label{display:block;margin-bottom:8px}
.cic-verdict{margin:0 0 12px;font-family:var(--sans);font-size:14.5px;font-weight:700;line-height:1.55;color:var(--ink)}
.cic-verdict.is-pick::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:2px}
.cic-vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px 22px;margin:0;padding:0;list-style:none}
.cic-vs li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:5px;align-items:baseline;font-family:var(--sans);min-width:0}
.cic-vs .c-name{font-size:13px;font-weight:700;color:var(--ink)}
.cic-vs small{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.c-pair{grid-column:1 / -1;display:grid;gap:4px}
.c-bar{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:8px}
.c-bar em{font-style:normal;font-size:11px;font-weight:800;color:var(--muted)}
.c-bar b{font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-bar.is-low b{font-weight:800;color:var(--ink)}
.c-track{height:9px;border-radius:var(--radius);background:var(--soft);overflow:hidden}
.c-track i{display:block;height:100%;width:0}
.c-a .c-track i{background:color-mix(in srgb,var(--ink) 55%,var(--paper))}
.c-b .c-track i{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 60%,var(--paper)) 0 3px,color-mix(in srgb,var(--ink) 25%,var(--paper)) 3px 6px)}
.cic-note{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.cic-note:empty{display:none}
/* 남은 할부 잔액 그림 */
.cic-ckeys{margin:0 0 8px}
.cic-chartbox{width:100%;overflow:hidden}
.cic-chart{display:block;max-width:100%;height:auto;font-family:var(--sans)}
.cic-chart .g-base{stroke:var(--line);stroke-width:1}
.cic-chart .g-area{fill:var(--accent);fill-opacity:.1}
.cic-chart .g-la{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.cic-chart .g-lb{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 4;stroke-linejoin:round}
.cic-chart .g-t{fill:var(--muted);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.cic-chart .g-cliff{fill:var(--ink);font-weight:700;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.cic-chart .g-pin{transition:transform 220ms var(--resize-ease)}
.cic-chart .g-pinl{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.cic-chart .g-dota{fill:var(--paper);stroke:var(--accent);stroke-width:3}
.cic-chart .g-dotb{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.cic-slide{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;margin-top:10px}
.cic-slidel{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.cic-slide input[type=range]{width:100%;margin:0;accent-color:var(--accent)}
.cic-slidev{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cic-readout{display:grid;gap:3px;margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.cic-readout .r-when{display:none}
.cic-readout b{display:inline-block;min-width:14px;font-weight:800;color:var(--muted)}
.cic-readout i{font-style:normal;white-space:nowrap}
@media (prefers-reduced-motion:reduce){ .t-resize,.cic-chart .g-pin{transition:none !important} }
/* 표 */
.cic-tblhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:8px}
.cic-tbl .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.cic-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums lining-nums}
.cic-table th,.cic-table td{padding:7px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.cic-table thead th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0}
.cic-table tbody th{font-weight:700;color:var(--ink)}
.cic-table th small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.cic-table th small.c-now{color:var(--ink)}
.cic-table .n{text-align:right}
.cic-table tr.is-cur th,.cic-table tr.is-cur td{background:var(--accent-wash);color:var(--ink)}
.cic-sched{margin-top:14px;border-top:1px solid var(--soft);padding-top:10px}
.cic-sched summary{cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.cic-sched summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cic-schedab{margin:10px 0 6px}
.cic-schedab[hidden]{display:none}
.cic-sched .tbl{max-height:420px;overflow:auto;margin-top:6px}
@media (max-width:720px){
  .cic-grid{grid-template-columns:minmax(0,1fr)}
  .cic-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .cic-in,.cic-out,.cic-cmp,.cic-vis,.cic-tbl{padding-left:12px;padding-right:12px}
  .cic-slide{grid-template-columns:minmax(0,1fr) auto}
  .cic-slide input[type=range]{grid-column:1 / -1;grid-row:2}
}
/* 입력 패널이 좁으면 두 칸 줄을 한 열로(값 잘림 방지, align-check) */
@container v2in (max-width:330px){
  .cic-fields,.cic-bgrid{grid-template-columns:minmax(0,1fr)}
}