/* 부채 상환 계획 계산기 전용 CSS (2026-10-16). 2패널 계산형(왼쪽 빚 카드 목록·순서·추가액, 오른쪽 결과) + 아래 전략 비교·매달 더 갚으면·잔액 차트·상환 순서 타임라인·월별 표. 공용 부품은 assets/v2.css. 접두 drp-
   빚 색 10개는 라이트·다크에서 따로 둔다(카드 왼쪽 선·차트 영역·타임라인 막대가 같은 색). 움직임(R45): 큰 숫자 트윈, 원금·이자·비교 막대 너비 전환, 잔액 선 그리기·영역 페이드, 타임라인 막대가 왼쪽부터 자람. 동작 줄이기면 모두 끈다. */
.drp{--drp-c0:#c2410c;--drp-c1:#2b7fb5;--drp-c2:#2f9a5b;--drp-c3:#7b5bc4;--drp-c4:#b8860b;--drp-c5:#d14b7d;--drp-c6:#1f8f8f;--drp-c7:#8a6a45;--drp-c8:#5d7a1f;--drp-c9:#55606e}
html[data-theme="dark"] .drp{--drp-c0:#ef8a4a;--drp-c1:#5aa8dd;--drp-c2:#5cc484;--drp-c3:#a68be0;--drp-c4:#d9a93b;--drp-c5:#ea7aa3;--drp-c6:#4fb8b8;--drp-c7:#b89470;--drp-c8:#9bbd5a;--drp-c9:#9aa4b3}
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .drp{--drp-c0:#ef8a4a;--drp-c1:#5aa8dd;--drp-c2:#5cc484;--drp-c3:#a68be0;--drp-c4:#d9a93b;--drp-c5:#ea7aa3;--drp-c6:#4fb8b8;--drp-c7:#b89470;--drp-c8:#9bbd5a;--drp-c9:#9aa4b3} }
.drp [data-c="0"],.drp .c0{--drp-c:var(--drp-c0)} .drp [data-c="1"],.drp .c1{--drp-c:var(--drp-c1)} .drp [data-c="2"],.drp .c2{--drp-c:var(--drp-c2)} .drp [data-c="3"],.drp .c3{--drp-c:var(--drp-c3)} .drp [data-c="4"],.drp .c4{--drp-c:var(--drp-c4)}
.drp [data-c="5"],.drp .c5{--drp-c:var(--drp-c5)} .drp [data-c="6"],.drp .c6{--drp-c:var(--drp-c6)} .drp [data-c="7"],.drp .c7{--drp-c:var(--drp-c7)} .drp [data-c="8"],.drp .c8{--drp-c:var(--drp-c8)} .drp [data-c="9"],.drp .c9{--drp-c:var(--drp-c9)}
.drp-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.drp-in{padding:16px 18px 18px;min-width:0}
.drp-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.drp-fields .full{grid-column:1 / -1;min-width:0}
.drp-blabel{display:block;margin:0 0 6px}
/* 빚 카드: 1줄 이름·이동·지우기, 2줄 잔액·금리·최소 상환(좁으면 잔액만 한 줄) */
.drp-debts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.drp-debt{min-width:0;padding:9px 10px 10px;border:1px solid var(--soft);border-left:3px solid var(--drp-c,var(--line));border-radius:var(--radius);background:var(--paper)}
.drp-dh{display:flex;gap:6px;align-items:center}
.drp-no{flex:0 0 auto;min-width:18px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--drp-c,var(--muted));text-align:center}
.drp-name{flex:1 1 auto;min-width:0}
.drp-name input{text-align:left;font-size:14.5px}
.drp-mvs{display:none;flex:0 0 auto;gap:4px}
.drp-debts.is-cu .drp-mvs{display:flex}
.drp-ib{flex:0 0 auto;width:34px;height:var(--v2-ctl,42px);padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-family:var(--sans);font-size:16px;line-height:1;cursor:pointer;transition:color var(--ease),border-color var(--ease)}
.drp-ib:hover:not(:disabled){color:var(--ink);border-color:var(--ink)}
.drp-ib:disabled{opacity:.35;cursor:default}
.drp-ib:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drp-dg{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr) minmax(0,1.1fr);gap:8px;margin-top:8px}
.drp-dg .v2-label{font-size:11.5px}
.drp-dnote{margin:7px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.drp-list-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.drp-list-acts [hidden]{display:none}
/* 갚는 순서: 버튼 안 두 줄(방식 이름 · 설명) */
.drp-seg{display:flex;flex-wrap:nowrap;width:100%}
.drp-seg button{flex:1 1 0;min-width:0;height:auto;min-height:var(--v2-ctl,42px);padding:5px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.25;text-align:center}
.drp-seg button b{font-size:13px;font-weight:700}
.drp-seg button small{font-size:11px;font-weight:600;opacity:.85;overflow-wrap:anywhere}
.v2-input.drp-pre b{border-left:0;border-right:1px solid var(--soft)}
.drp-more summary{cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.drp-more-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:10px}
.drp-date 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:14px;font-weight:600;color:var(--ink);transition:border-color var(--ease),box-shadow var(--ease)}
.drp-date input[type="date"]:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.v2-f.is-invalid .drp-date input{border-color:var(--accent)}
.drp-hint{display:block;margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.drp-hint:empty{display:none}
.drp-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.drp-debt .v2-input:has(input[aria-invalid="true"]){border-color:var(--accent)}
/* 결과 */
.drp-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.drp-out > .v2-label{display:block;margin-bottom:6px}
.drp-out .v2-big:not(.is-empty) span{white-space:nowrap}
.drp-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.drp-bar{margin:12px 0 0}
.drp-bar i{display:flex;height:8px;background:var(--soft);border-radius:4px;overflow:hidden}
.drp-bar i b{display:block;height:100%;width:0;transition:width 420ms cubic-bezier(.3,.7,.3,1)}
.drp-bar i .is-paid{background:var(--ink);opacity:.3}
.drp-bar i .is-int{background:var(--accent)}
.drp-bar span{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.drp-rows{margin-top:14px}
.drp-rows li span em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.drp-rows li b{text-align:right}
.drp-rows li.is-order b{white-space:normal;word-break:keep-all;overflow-wrap:anywhere} /* 금액은 공용 nowrap, 갚는 순서만 화살표 사이에서 줄바꿈 */
.drp-rows li.is-miss b{color:var(--accent)}
.drp-alerts{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.drp-alerts[hidden]{display:none}
.drp-alerts li{padding:7px 9px;border-left:2px solid var(--accent);background:var(--accent-wash);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.drp-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.drp-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.drp-caveat + .drp-foot{margin-top:14px}
.drp-foot .v2-status{margin-left:auto}
/* 아래 절 공통 */
.drp-sec{padding:14px 18px 16px;border-top:1px solid var(--soft);min-width:0;container:drpsec / inline-size}
.drp-sec[hidden]{display:none}
/* 전략 비교: 줄마다 이름·태그 / 개월·첫 완납 / 이자 막대·값 */
.drp-cmp{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.drp-crow{display:grid;width:100%;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.35fr);grid-template-areas:"cn cm cbar" "tag cf cv";gap:3px 14px;align-items:center;padding:9px 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);text-align:left;color:var(--ink)}
button.drp-crow{cursor:pointer;transition:border-color var(--ease),background var(--ease)}
button.drp-crow:hover{border-color:var(--line);background:var(--wash)}
button.drp-crow[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
button.drp-crow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.is-base .drp-crow{background:var(--wash)}
.drp-cn{grid-area:cn;font-size:13.5px;font-weight:700;min-width:0}
.drp-cm{grid-area:cm;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.drp-cf{grid-area:cf;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.drp-cbar{grid-area:cbar;display:block;height:8px;background:var(--soft);border-radius:4px;overflow:hidden}
.drp-cbar b{display:block;height:100%;width:0;background:var(--accent);transition:width 420ms cubic-bezier(.3,.7,.3,1)}
.is-base .drp-cbar b{background:var(--muted)}
.drp-cv{grid-area:cv;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.drp-tag{grid-area:tag;font-size:11.5px;font-weight:700;color:var(--muted)}
.is-best .drp-tag{color:var(--accent)}
.drp-cmp .drp-crow span{overflow-wrap:anywhere}
@container drpsec (max-width:540px){ .drp-crow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cn tag" "cm cm" "cf cf" "cbar cbar" "cv cv"} .drp-tag{text-align:right} }
/* 매달 더 갚으면: 카드(누르면 그 금액으로) */
.drp-xs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,148px),1fr));gap:6px}
.drp-xs button{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:0;padding:9px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);text-align:left;color:var(--ink);cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.drp-xs button:hover{border-color:var(--line);background:var(--wash)}
.drp-xs button[aria-pressed="true"]{border-color:var(--ink);background:var(--wash);box-shadow:inset 0 3px 0 var(--ink)}
.drp-xs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drp-xt{font-size:12px;font-weight:700;color:var(--muted);overflow-wrap:anywhere}
.drp-xm{font-size:18px;font-weight:750;font-variant-numeric:tabular-nums}
.drp-xi,.drp-xd{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.drp-xd{color:var(--accent);font-weight:650}
.drp-xd:empty{display:none}
/* 잔액 차트 */
.drp-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:8px}
.drp-keys{display:flex;gap:14px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:12px;color:var(--muted)}
.drp-keys li i{display:inline-block;width:18px;height:0;margin-right:6px;vertical-align:middle}
.drp-keys .k-cur i{border-top:2.5px solid var(--ink)}
.drp-keys .k-base i{border-top:2px dashed var(--muted)}
.drp-chart{position:relative;width:100%;min-width:0;border-radius:var(--radius);outline:0;touch-action:pan-y}
.drp-chart:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.drp-chart svg{display:block;width:100%;height:auto;font-family:var(--sans);overflow:visible}
.drp-chart .gr{stroke:var(--soft);stroke-width:1}
.drp-chart .ax{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.drp-chart .axt{fill:var(--muted);font-size:10.5px}
.drp-chart .ar{fill:var(--drp-c);opacity:.5}
.drp-chart.is-in .ar{animation:drpFade 600ms ease both}
@keyframes drpFade{from{opacity:0}to{opacity:.5}}
.drp-chart .s-base{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4;fill:none}
.drp-chart .s-cur{stroke:var(--ink);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.drp-chart .s-cur.draw{animation:drpDraw 1s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes drpDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.drp-chart .mark{fill:var(--paper);stroke:var(--accent);stroke-width:2.5}
.drp-chart .markt{fill:var(--ink);font-size:12px;font-weight:700;paint-order:stroke;stroke:var(--card,var(--paper));stroke-width:4px;stroke-linejoin:round}
.drp-chart .xh{stroke:var(--ink);stroke-width:1;opacity:.5}
.drp-chart .xp{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.drp-tip{position:absolute;top:8px;z-index:2;min-width:160px;max-width:min(260px,calc(100% - 8px));padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:0 4px 14px rgba(0,0,0,.12);font-family:var(--sans);font-size:12px;color:var(--muted);pointer-events:none}
.drp-tip b{display:block;margin-bottom:4px;color:var(--ink);font-size:11.5px}
.drp-tip span{display:block;line-height:1.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drp-tip strong{color:var(--ink);font-variant-numeric:tabular-nums}
.drp-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 상환 순서 타임라인 */
.drp-tl{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.drp-tl li{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) minmax(0,11em);grid-template-areas:"tn tt tv";gap:4px 12px;align-items:center;font-family:var(--sans)}
.drp-tn{grid-area:tn;min-width:0;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.drp-tn i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;background:var(--drp-c)}
.drp-tt{grid-area:tt;position:relative;height:14px;border-radius:2px;background-color:var(--wash);background-image:linear-gradient(90deg,var(--soft) 1px,transparent 1px);background-size:var(--yr,100%) 100%;background-position:-1px 0}
.drp-tw{position:absolute;left:0;top:0;bottom:0;border-radius:2px;transform-origin:left center}
.drp-tw::before{content:"";position:absolute;inset:0;border-radius:2px;background:var(--drp-c);opacity:.28}
.drp-tf{position:absolute;top:0;bottom:0;right:0;border-radius:0 2px 2px 0;background:var(--drp-c)}
.drp-tl.is-grow .drp-tw{animation:drpGrow 700ms cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--r,0) * 90ms)}
@keyframes drpGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.drp-tv{grid-area:tv;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}
.drp-tv em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted)}
@container drpsec (max-width:540px){ .drp-tl li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tn tv" "tt tt"} .drp-tv{text-align:right} }
/* 월별 상환표 */
.drp-tbl-det summary{cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.drp-tbl-det .tbl{margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;max-height:520px;overflow-y:auto}
.drp-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.drp-table th,.drp-table td{padding:7px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.drp-table thead th{position:sticky;top:0;z-index:1;background:var(--paper);font-size:11.5px;font-weight:700;color:var(--muted);border-top:0}
.drp-table tbody th{font-weight:600}
.drp-table .n{text-align:right}
.drp-table tr.is-cur th,.drp-table tr.is-cur td{background:var(--accent-wash)}
.drp-xlsx{margin-top:10px}
@media (max-width:720px){
  .drp-grid{grid-template-columns:minmax(0,1fr)}
  .drp-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .drp-in,.drp-out,.drp-sec{padding-left:12px;padding-right:12px}
  .drp-table th,.drp-table td{padding:7px 5px}
}
@media (prefers-reduced-motion:reduce){ .drp-chart .s-cur.draw,.drp-chart.is-in .ar,.drp-tl.is-grow .drp-tw{animation:none} .drp-chart .s-cur{stroke-dasharray:none} .drp-bar i b,.drp-cbar b{transition:none} }
@container v2in (max-width:360px){ .drp-dg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .drp-fb{grid-column:1 / -1} }
@container v2in (max-width:330px){ .drp-seg{flex-direction:column} .drp-seg button{flex:0 0 auto} }
@container v2in (max-width:300px){ .drp-dg,.drp-more-in{grid-template-columns:minmax(0,1fr)} }
@container v2in (max-width:330px){ .drp-debts.is-cu .drp-dh{flex-wrap:wrap} .drp-debts.is-cu .drp-name{flex:1 0 calc(100% - 30px)} .drp-debts.is-cu .drp-mvs{margin-left:24px} .drp-debts.is-cu .drp-del{margin-left:auto} } /* 직접 순서의 ↑↓ 버튼이 좁은 칸에서 이름을 덮지 않게 아래 줄로 */