/* 손실 원금 복구 계산기 전용 CSS (2026-10-12). 모드 막대·입력(원금·평가액·손실률 / 날짜·종가 줄·붙여넣기)·결과·곡선·종가 차트·회복 기간 막대·표 rv-*. 공용 부품은 assets/v2.css */
.rv-work{container:rv / inline-size} /* 두 열 여부는 툴 폭으로 */
.rv-modebar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.rv-modebar .rv-help{flex:1 1 100%}
.rv-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.rv-set{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.rv-set .v2-status:empty{display:none}
.rv-pane{display:flex;flex-direction:column;gap:10px;min-width:0}
.rv-pane[hidden]{display:none}
.rv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}
.rv-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.rv-chips button{height:28px;padding:0 10px;font-size:12px}
.rv-days-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rv-link{border:0;background:none;padding:2px 0;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);text-decoration:underline;cursor:pointer}
.rv-link[hidden]{display:none}
.rv-cols,.rv-days li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px;gap:6px;align-items:center}
.rv-cols{margin-bottom:-4px;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.rv-days{list-style:none;margin:0;padding:0 2px 0 0;display:grid;gap:6px;max-height:340px;overflow-y:auto}
.rv-date{height:var(--v2-ctl,42px);min-width:0;width:100%;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.rv-date:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rv-days .v2-input input{padding:0 8px;font-size:14.5px}
.rv-days li.is-invalid .v2-input{border-color:var(--accent)}
.rv-del{height:var(--v2-ctl,42px);border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-size:16px;color:var(--muted);cursor:pointer}
.rv-del:hover{background:var(--btn);color:var(--ink)}
.rv-del:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rv-paste summary,.rv-opts summary{cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink)}
.rv-paste[open] summary,.rv-opts[open] summary{margin-bottom:10px}
.rv-paste .v2-label{display:block;margin-bottom:5px}
.rv-paste textarea{display:block;box-sizing:border-box;width:100%;min-height:96px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:12.5px;line-height:1.5;resize:vertical}
.rv-paste textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rv-paste-go{display:flex;align-items:flex-start;gap:10px;margin-top:8px}
.rv-paste-go .v2-btn{flex:0 0 auto}
.rv-opts .rv-help{margin-top:8px}
.rv-btns{display:flex;flex-wrap:wrap;gap:6px}
.rv-head{padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.rv-head>.v2-label{display:block;margin-bottom:8px}
.rv-big{font-size:44px;overflow-wrap:anywhere}
.rv-big.is-above{font-size:30px}
.rv-head .v2-sub{margin-bottom:12px}
.rv-rows li b{text-align:right}
.rv-rows li b.neg{color:var(--ink)}
.rv-box{padding:14px 18px 16px;min-width:0;border-bottom:1px solid var(--soft)}
.rv-box:last-of-type{border-bottom:0}
.rv-box[hidden]{display:none}
.rv-box>.v2-label{display:block;margin-bottom:10px}
.rv-box>.rv-help{margin-top:8px}
/* 차트: 360px에서 줄여 그리지 않고 가로 스크롤(R14) */
.rv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rv-chart svg{display:block;width:100%;min-width:640px;height:auto;overflow:visible}
.rv-narrow{display:none}
.rv-chart .ax line{stroke:var(--soft);stroke-width:1}
.rv-chart text{font-family:var(--sans);font-size:11.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.rv-chart .cap{font-size:11px;font-weight:650}
.rv-chart .gap{fill:var(--accent-wash);opacity:.75}
.rv-chart .same{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:5 4;fill:none}
.rv-chart .same-t{font-size:11px}
.rv-chart .cv{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}
.rv-chart .ref circle{fill:var(--ink)}
.rv-chart .ref text{fill:var(--ink);font-weight:600;transition:opacity .15s ease-in-out}
.rv-chart .ref.is-near text{opacity:0}
.rv-chart .mk{transition:transform .5s cubic-bezier(.22,1,.36,1)} /* 위치 변화: transitions.dev --ease-smooth-out. 테마 --ease(120ms ease)는 시간이 들어 있어 지연으로 읽히므로 쓰지 않음 */
.rv-chart .mk.is-off{opacity:0}
.rv-chart .mk circle{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.rv-chart .mk line{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 3}
.rv-chart .mk rect{fill:var(--paper);stroke:var(--accent);stroke-width:1}
.rv-chart .mk text{fill:var(--ink);font-size:12.5px;font-weight:700}
.rv-chart .entry{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:6 4}
.rv-chart .entry-t{fill:var(--ink);font-weight:650}
.rv-chart .peak{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:2 3}
.rv-chart .uw{fill:var(--accent-wash);stroke:var(--accent);stroke-width:1.4}
.rv-chart .px{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.rv-chart .px.draw{animation:rvDraw 1s cubic-bezier(.22,1,.36,1) both}
.rv-chart .pt{fill:var(--ink)}
.rv-chart .low{fill:var(--accent);stroke:var(--paper);stroke-width:1.5}
.rv-chart .low-t{fill:var(--accent);font-weight:700}
@keyframes rvDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
/* 회복 기간 막대: 한 번 만들고 너비만 바뀜(R45) */
.rv-years{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.rv-years li{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) minmax(92px,auto);gap:10px;align-items:center;font-family:var(--sans);font-size:12.5px;color:var(--ink)}
.rv-years li[hidden]{display:none}
.rv-years .trk{height:12px;border-radius:6px;background:var(--soft);overflow:hidden}
.rv-years .trk b{display:block;height:100%;width:0;border-radius:6px;background:var(--line);transition:width .5s cubic-bezier(.22,1,.36,1)}
.rv-years li.is-user .trk b{background:var(--accent)}
.rv-years li.is-user .nm,.rv-years li.is-user .v{font-weight:750}
.rv-years .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.rv-years.is-empty{opacity:.5}
.rv-tbl{overflow:auto;-webkit-overflow-scrolling:touch;max-width:100%;max-height:440px}
.rv-tbl table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.rv-tbl th,.rv-tbl td{padding:6px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.rv-tbl th{position:sticky;top:0;z-index:1;font-size:11.5px;font-weight:700;color:var(--muted);border-top:0;background:var(--card)}
.rv-tbl .n{text-align:right}
.rv-tbl tr.is-low td{color:var(--accent);font-weight:700}
@container rv (max-width:779px){
  .rv-top{grid-template-columns:minmax(0,1fr)}
  .rv-head{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
  .rv-narrow{display:block}
}
@container rv (max-width:420px){
  .rv-row{grid-template-columns:minmax(0,1fr)}
  .rv-big{font-size:38px}
  .rv-years li{grid-template-columns:minmax(52px,auto) minmax(0,1fr) minmax(84px,auto);gap:8px}
}
@media (prefers-reduced-motion:reduce){ .rv-chart .mk,.rv-years .trk b{transition:none} .rv-chart .px.draw{animation:none;stroke-dashoffset:0} }