/* 배당금계산기 전용 CSS (2026-10-15). 2패널 계산형(단순 복리 계산기와 같은 골격) + 아래 목표별 필요 투자금 막대·재투자 시뮬레이션(비교표·연도별 막대 차트·연도별 표). 공용 부품은 assets/v2.css. 접두 dvc- */
.dvc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.dvc-in{padding:16px 18px 18px;min-width:0}
.dvc-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.dvc-fields .full{grid-column:1 / -1}
.dvc-seglabel{display:block;margin:0 0 5px}
.dvc-seg{display:flex;flex-wrap:nowrap}
.dvc-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 5px;font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.15;white-space:normal} /* 좁은 폭·긴 로케일 라벨은 버튼 안에서 두 줄(넘침 0) */
.v2-input.dvc-pre b{border-left:0;border-right:1px solid var(--soft)}
.dvc-fxrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.dvc-fxrow[hidden]{display:none}
.dvc-chips{display:flex;flex-wrap:wrap;gap:6px}
.dvc-chips button{height:30px;padding:0 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.dvc-chips button:hover{background:var(--btn);color:var(--ink);border-color:var(--line)}
.dvc-hint{display:block;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.dvc-hint:empty{display:none}
.dvc-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.dvc-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.dvc-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column;container:dvcout / inline-size}
.dvc-out > .v2-label{display:block;margin-bottom:6px}
.dvc-out .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(18px, calc(100cqi / (var(--dvc-len, 8) * .62)), 1em)}
.dvc-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)}
.dvc-bar{margin:12px 0 0}
.dvc-bar i{display:flex;height:8px;background:var(--soft);border-radius:4px;overflow:hidden}
.dvc-bar i b{display:block;height:100%;width:0;transition:width 420ms cubic-bezier(.3,.7,.3,1)} /* 값이 바뀌면 막대가 새 비율로 이동(R45) */
.dvc-bar i .is-net{background:var(--accent)}
.dvc-bar i .is-tax{background:var(--ink);opacity:.3}
.dvc-bar span{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dvc-rows{margin-top:14px}
.dvc-rows li span em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.dvc-rows li b{text-align:right;overflow-wrap:anywhere;white-space:normal}
.dvc-rows li.is-warn b{color:var(--accent)}
.dvc-goal{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.dvc-goal > .v2-label{display:block;margin-bottom:8px;color:var(--ink)}
.dvc-prog{height:10px;background:var(--soft);border-radius:5px;overflow:hidden}
.dvc-prog b{display:block;height:100%;width:0;background:var(--accent);border-radius:5px;transition:width 520ms cubic-bezier(.3,.7,.3,1)}
.dvc-goal.is-done .dvc-prog b{background:var(--fill)}
.dvc-goal .dvc-rows{margin-top:8px}
.dvc-note{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink)}
.dvc-note:empty{display:none}
.dvc-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.dvc-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.dvc-caveat + .dvc-foot{margin-top:14px}
.dvc-foot .v2-status{margin-left:auto}
/* 아래 상자 공통 */
.dvc-box{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.dvc-box > .v2-label{display:block;margin-bottom:10px}
/* 목표 월 배당별 필요 투자금 막대 */
.dvc-goals{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dvc-goals li{display:grid;grid-template-columns:minmax(96px,auto) minmax(60px,1fr) auto;align-items:center;gap:10px;font-family:var(--sans);font-size:13px}
.dvc-goals li .g{color:var(--muted);white-space:nowrap}
.dvc-goals li .tag{display:inline-block;margin-left:6px;font-style:normal;font-size:11px;font-weight:700;color:var(--accent)}
.dvc-goals li i{display:block;height:10px;background:var(--soft);border-radius:5px;overflow:hidden}
.dvc-goals li i b{display:block;height:100%;background:var(--ink);opacity:.35;border-radius:5px;transition:width 520ms cubic-bezier(.3,.7,.3,1)}
.dvc-goals li .v{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dvc-goals li.is-cur .g{color:var(--ink);font-weight:700}
.dvc-goals li.is-cur i b{background:var(--accent);opacity:1}
.dvc-goals + .dvc-hint{margin-top:10px}
/* 재투자 시뮬레이션 */
.dvc-sim-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;margin-bottom:10px}
.dvc-sim-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dvc-sim-msg{margin:12px 0 0;font-family:var(--sans);font-size:13px;color:var(--muted)}
.dvc-sim .v2-status:empty{display:none}
.dvc-sim > .v2-status{display:block;margin-top:8px}
.dvc-cmp-wrap{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.dvc-cmp,.dvc-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.dvc-cmp th,.dvc-cmp td,.dvc-table th,.dvc-table td{padding:7px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.dvc-cmp thead th,.dvc-table thead th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0}
.dvc-cmp td{text-align:right;font-weight:700;color:var(--ink)}
.dvc-cmp thead th:not(:first-child){text-align:right}
.dvc-cmp tbody th{font-weight:500;color:var(--muted);white-space:normal}
.dvc-cmp tr.is-key td{font-size:15px}
.dvc-cmp tr.is-key td:nth-child(2),.dvc-cmp thead th:nth-child(2){color:var(--accent)}
.dvc-cmp tr.is-sum th,.dvc-cmp tr.is-sum td{border-top:1px solid var(--line)}
.dvc-cmp tr.is-reach td{font-weight:700}
.dvc-cmp .vh,.dvc-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dvc-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:16px 0 8px}
.dvc-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)}
.dvc-keys li[hidden]{display:none}
.dvc-keys li i{display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:middle;border-radius:2px}
.dvc-keys .k-re i{background:var(--accent)}
.dvc-keys .k-cash i{height:0;border-top:2px dashed var(--ink);border-radius:0;width:18px}
.dvc-keys .k-tg i{height:0;border-top:2px dotted var(--muted);border-radius:0;width:18px}
.dvc-chart{position:relative;width:100%;min-width:0;border-radius:var(--radius);outline:0;touch-action:pan-y}
.dvc-chart:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.dvc-chart svg{display:block;width:100%;height:auto;font-family:var(--sans);overflow:visible}
.dvc-chart .gr{stroke:var(--soft);stroke-width:1}
.dvc-chart .ax{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.dvc-chart .bar{fill:var(--accent);opacity:.55}
.dvc-chart .bar.hit{opacity:1}
.dvc-chart svg.grow .bar{transform-box:fill-box;transform-origin:50% 100%;animation:dvcGrow 640ms cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--i) * 18ms)} /* 값이 바뀌면 막대가 아래에서 자란다(R45) */
@keyframes dvcGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.dvc-chart .cash{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 4;opacity:.75}
.dvc-chart .cash-dot{fill:var(--paper);stroke:var(--ink);stroke-width:1.4;opacity:.8}
.dvc-chart .tg{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:2 3}
.dvc-chart .markt{fill:var(--ink);font-size:12px;font-weight:700}
.dvc-chart .xh{stroke:var(--ink);stroke-width:1;opacity:.45}
.dvc-tip{position:absolute;top:8px;z-index:2;min-width:150px;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}
.dvc-tip b{display:block;margin-bottom:4px;color:var(--ink);font-size:11.5px}
.dvc-tip span{display:block;white-space:nowrap;line-height:1.7}
.dvc-tip strong{color:var(--ink);font-variant-numeric:tabular-nums;margin-right:2px}
.dvc-years{margin-top:12px}
.dvc-years summary{cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.dvc-years .tbl{margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.dvc-table .n{text-align:right}
.dvc-table tbody th{font-weight:600}
.dvc-table tr.is-cur th,.dvc-table tr.is-cur td{background:var(--accent-wash)}
@media (prefers-reduced-motion: reduce){.dvc-bar i b,.dvc-prog b,.dvc-goals li i b{transition:none}.dvc-chart svg.grow .bar{animation:none}}
@container v2in (max-width:720px){.dvc-sim-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .dvc-grid{grid-template-columns:minmax(0,1fr)}
  .dvc-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:560px){ .dvc-goals li{grid-template-columns:minmax(0,1fr) auto} .dvc-goals li i{grid-column:1 / -1;grid-row:2} }
@media (max-width:420px){
  .dvc-in,.dvc-out,.dvc-box{padding-left:12px;padding-right:12px}
  .dvc-table th,.dvc-table td,.dvc-cmp th,.dvc-cmp td{padding:7px 5px}
}
@container v2in (max-width:380px){ .dvc-seg button{font-size:12px;padding:0 3px} }
@container v2in (max-width:300px){ .dvc-fields,.dvc-fxrow,.dvc-sim-fields{grid-template-columns:minmax(0,1fr)} }