/* 카푸어 계산기 전용 CSS (2026-10-11). 2패널 계산형 kp-*, 구역 머리(차와 할부·소득·유지비), 비율 게이지(바늘·채움 호 이동), 월 실수령액 나눠 보기 막대(너비 이동·기준선), 기준 점검 목록, 할부 기간별 표(작은 막대). 공용 부품은 assets/v2.css */
.kp-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} /* 입력 쪽을 넓혀 1440px에서 금액 칸 두 열(반쪽 칸 189px)이 되게 함 */
.kp-in{padding:16px 18px 18px;min-width:0}
.kp-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
.kp-fields .full{grid-column:1 / -1}
.kp-fields .v2-f{min-width:0}
.kp-fields .v2-f>.v2-label{display:block}
.kp-fields .v2-f>span.v2-label{margin-bottom:5px}
.kp-fields [hidden]{display:none}
.kp-head{margin-top:6px;padding-top:12px;border-top:1px solid var(--soft)}
.kp-head:first-child{margin-top:0;padding-top:0;border-top:0}
.kp-sublabel{display:block;color:var(--ink);font-weight:700}
.kp-seg{flex-wrap:wrap}
.kp-seg button{min-height:var(--v2-ctl,42px);height:auto;padding:4px 12px;font-family:var(--sans);font-size:12.5px;font-weight:700}
.kp-chips{margin-top:8px;flex-wrap:wrap}
.kp-chips button{height:28px;padding:0 10px;font-family:var(--sans);font-size:12px;font-weight:600}
.kp-hint{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.kp-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.kp-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.kp-out>.v2-label{display:block;margin-bottom:6px}
.kp-out .v2-big{flex-wrap:wrap;row-gap:6px;font-size:40px}
.kp-out .v2-big>span{min-width:0;overflow-wrap:anywhere}
.kp-out .v2-big.b-risk>span,.kp-out .v2-big.b-deficit>span{color:var(--accent)}
.kp-out .v2-big small{flex-basis:100%;display:block;margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.5}
.kp-out .v2-big small b{color:var(--ink);font-weight:800;margin-right:2px}
.kp-out .v2-big.b-risk small b,.kp-out .v2-big.b-deficit small b{color:var(--accent)}
.v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
/* 비율 게이지 */
.kp-gauge{position:relative;margin:10px 0 0;max-width:300px}
.kp-gauge[hidden]{display:none}
.kp-gauge svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
.kp-gauge .arc{fill:none;stroke:var(--soft);stroke-width:12}
.kp-gauge .arc-fill{fill:none;stroke:var(--accent);stroke-width:12;transition:stroke-dashoffset .6s cubic-bezier(.3,.7,.3,1)}
.kp-gauge .tick{stroke:var(--line);stroke-width:1.5}
.kp-gauge .tickt{fill:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums;text-anchor:middle}
.kp-gauge .mark{stroke:var(--muted);stroke-width:2;stroke-dasharray:3 3}
.kp-gauge .mark-line{stroke:var(--ink)}
.kp-gauge .needle{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;transform-origin:120px 118px;transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.kp-gauge .hub{fill:var(--ink)}
.kp-rows{margin-top:12px}
.kp-rows li span{min-width:0;flex:1 1 auto}
.kp-rows li span em{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:1;max-width:100%;overflow-wrap:anywhere}
.kp-rows li b{flex:0 0 auto}
.kp-rows li.neg b{color:var(--accent)}
.kp-rows li.max b{color:var(--accent)}
.kp-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.kp-foot .v2-status{margin-left:auto}
/* 월 실수령액 나눠 보기 */
.kp-barbox{margin:14px 0 12px;padding-top:12px;border-top:1px solid var(--soft)}
.kp-barbox[hidden]{display:none}
.kp-barbox>.v2-label{display:block;margin-bottom:8px}
.kp-bar{position:relative;display:flex;height:18px;border-radius:var(--radius);background:var(--soft);margin-top:6px}
.kp-bar>i{display:block;height:100%;min-width:0;transition:width .6s cubic-bezier(.3,.7,.3,1)}
.kp-bar>i:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.kp-bar .c-pay{background:var(--accent)}
.kp-bar .c-run{background:color-mix(in srgb, var(--accent) 55%, var(--paper))}
.kp-bar .c-other{background:var(--ink)}
.kp-bar .c-left{background:color-mix(in srgb, var(--muted) 30%, var(--paper))}
.kp-bar .c-short{position:absolute;top:0;bottom:0;border-radius:0 var(--radius) var(--radius) 0;background:repeating-linear-gradient(135deg, var(--accent) 0 4px, var(--paper) 4px 7px);transition:width .6s cubic-bezier(.3,.7,.3,1),left .6s cubic-bezier(.3,.7,.3,1)} /* 적자: 소득선 뒤에 겹침(흐름 칸 넷의 합이 100%) */
.kp-mk{position:absolute;top:-5px;bottom:-5px;width:0;border-left:2px dashed var(--muted);transition:left .6s cubic-bezier(.3,.7,.3,1)}
.kp-mk.is-line{border-left-color:var(--ink)}
.kp-mk.is-inc{border-left:2px solid var(--ink)}
.kp-mk[hidden]{display:none}
.kp-keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.kp-keys li::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;vertical-align:-1px;background:var(--accent)}
.kp-keys .k-run::before{background:color-mix(in srgb, var(--accent) 55%, var(--paper))}
.kp-keys .k-other::before{background:var(--ink)}
.kp-keys .k-left::before{background:color-mix(in srgb, var(--muted) 30%, var(--paper))}
.kp-keys .k-short::before{background:repeating-linear-gradient(135deg, var(--accent) 0 3px, var(--paper) 3px 5px)}
.kp-keys .k-mk::before{width:0;height:12px;border-radius:0;border-left:2px dashed var(--muted);background:none}
.kp-keys b{color:var(--ink);font-variant-numeric:tabular-nums}
.kp-note{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
/* 기준 점검 목록 */
.kp-cmp{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.kp-cmp>.v2-label{display:block;margin-bottom:8px}
.kp-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px 18px;margin:0;padding:0;list-style:none;font-family:var(--sans)}
.kp-checks li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--soft);font-size:13px;color:var(--ink)}
.kp-checks li>b{font-size:11.5px;font-weight:800;white-space:nowrap}
.kp-checks li>b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;vertical-align:0;background:var(--muted)}
.kp-checks li.is-ok>b::before{background:var(--ink)}
.kp-checks li.is-no>b{color:var(--accent)}
.kp-checks li.is-no>b::before{background:var(--accent)}
.kp-checks li.is-na{color:var(--muted)}
.kp-checks li>span{min-width:0;overflow-wrap:anywhere}
.kp-checks li>span em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--muted)}
.kp-checks li>i{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.kp-checks li.is-no>i{color:var(--accent)}
.kp-checks li.is-na>i{font-weight:600}
/* 할부 기간별 표 */
.kp-cmp .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.kp-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.kp-table th,.kp-table td{padding:7px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.kp-table th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0}
.kp-table .n{text-align:right}
.kp-table small{font-size:11px;font-weight:700;color:var(--muted)}
.kp-table tr.b-risk small,.kp-table tr.b-deficit small{color:var(--accent)}
.kp-table tr.is-cur td{background:var(--accent-wash);color:var(--ink)}
.kp-mini{position:relative;display:inline-block;width:72px;height:8px;margin-right:8px;border-radius:4px;background:var(--soft);vertical-align:0}
.kp-mini>i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:color-mix(in srgb, var(--accent) 55%, var(--paper));transition:width .6s cubic-bezier(.3,.7,.3,1)}
.kp-table tr.b-risk .kp-mini>i,.kp-table tr.b-deficit .kp-mini>i{background:var(--accent)}
.kp-mini>s{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px solid var(--ink)}
@container v2in (max-width:379px){ .kp-fields{grid-template-columns:minmax(0,1fr)} } /* 좁은 입력 폭에서 9자리 금액이 잘리지 않게 한 열로 */
@media (prefers-reduced-motion:reduce){ .kp-gauge .needle,.kp-gauge .arc-fill,.kp-bar>i,.kp-mk,.kp-mini>i{transition:none} }
@media (max-width:720px){
  .kp-grid{grid-template-columns:minmax(0,1fr)}
  .kp-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .kp-in,.kp-out,.kp-cmp{padding-left:12px;padding-right:12px}
  .kp-fields{grid-template-columns:minmax(0,1fr)}
  .kp-out .v2-big{font-size:34px}
}