/* 월세 vs 전세 비교 계산기 전용 CSS (2026-10-17). 2패널 계산형 rv-* + 그림(총비용 구성 막대 2줄·폭 미끄러짐, 전환율 눈금·표식 미끄러짐, 누적 비용 선 차트·선 그려짐, R45) + 금리 표. 공용 부품은 assets/v2.css */
.rv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.rv-in{padding:16px 18px 18px;min-width:0}
.rv-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.rv-fields .full{grid-column:1 / -1}
.rv-fields [hidden]{display:none}
.rv-fields .v2-f{min-width:0}
.rv-fields .v2-f>.v2-label{display:block;margin:0 0 5px}
.rv-fields .v2-input.is-bad{border-color:var(--accent)}
.rv-sec{margin:4px 0 -6px;padding-top:12px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--muted)}
.rv-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.rv-sec-j::before,.rv-sec-m::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;vertical-align:0;background:var(--ink)}
.rv-sec-m::before{background:var(--accent)}
.rv-select{display:block;width:100%;height:var(--v2-ctl,42px);padding:0 34px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper) no-repeat right 10px center/10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");color:var(--ink);font-family:var(--sans);font-size:14px;appearance:none;-webkit-appearance:none;text-overflow:ellipsis}
.rv-select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.rv-words{display:block;min-height:18px;margin-top:4px;font-family:var(--sans);font-size:12px;font-weight:600;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.rv-words:empty{min-height:0;margin-top:0}
.rv-words.is-error{color:var(--accent)}
.rv-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:-6px}
.rv-chips .v2-btn{height:30px;padding:0 11px;font-size:12.5px}
.rv-chips .v2-btn[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.rv-swline{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.rv-hint{display:block;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.rv-hint:empty{display:none}
.rv-more{padding-top:12px;border-top:1px solid var(--soft)}
.rv-more summary{cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.rv-more-in{display:grid;gap:12px;margin-top:12px}
.rv-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rv-pair[hidden]{display:none}
.rv-pair .full{grid-column:1 / -1}
.rv-pair .v2-f>.v2-label{display:block;margin:0 0 5px}
.rv-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.rv-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.rv-exl{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.rv-ex{flex-wrap:wrap}
.rv-ex button{height:32px;padding:0 10px;font-family:var(--sans);font-size:12.5px;font-weight:600;white-space:nowrap}
/* 결과 패널 */
.rv-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column;container-type:inline-size}
.rv-out>.v2-label{display:block;margin-bottom:6px}
.rv-out .v2-big{flex-wrap:wrap;row-gap:6px;font-size:min(34px,9.5cqi)}
.rv-out .v2-big>span{min-width:0;overflow-wrap:anywhere}
.rv-out .v2-big>span.is-m{color:var(--accent)}
.rv-out .v2-big>.rv-who{flex-basis:100%;font-family:var(--sans);font-size:17px;font-weight:800;letter-spacing:0;line-height:1.3}
.rv-out .v2-big>.rv-amt{white-space:nowrap;font-variant-numeric:tabular-nums}
.rv-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;line-height:1.45;color:var(--muted)}
.rv-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.rv-out .v2-big.is-off>span{font-size:18px;line-height:1.45;color:var(--accent)}
.rv-rows{margin-top:12px}
.rv-rows li span{min-width:0;flex:1 1 auto}
.rv-rows li span em{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:1;max-width:100%;overflow-wrap:anywhere}
.rv-rows li b{flex:0 0 auto;white-space:nowrap}
.rv-rows li.is-sum span{color:var(--ink);font-weight:700}
.rv-rows li.is-sum b{color:var(--accent)}
.rv-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.rv-warn{margin:10px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.rv-warn:empty{display:none}
.rv-warn li{padding:6px 10px;border-left:3px solid var(--accent);background:var(--accent-wash);border-radius:0 var(--radius) var(--radius) 0}
.rv-warn li+li{margin-top:6px}
.rv-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.rv-out .rv-foot{margin-top:14px}
.rv-foot .v2-status{margin-left:auto}
.rv-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.rv-keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 6px;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.rv-keys li::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;border-radius:2px}
.rv-keys [hidden]{display:none}
/* 값이 바뀌면 막대 폭·표식이 새 값으로 미끄러짐 — transitions-dev 01 card resize 스니펫(.t-resize) */
:root{--resize-dur:300ms;--resize-ease:cubic-bezier(0.22, 1, 0.36, 1)}
.rv-grid .t-resize,.rv-vis .t-resize{transition:width var(--resize-dur) var(--resize-ease)}
.rv-vis .t-move{transition:left var(--resize-dur) var(--resize-ease)}
/* 총비용 구성 막대: 두 줄 같은 눈금, 돌려받는 몫은 끝을 빗금으로 덮음 */
.rv-barbox{margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.rv-barbox[hidden]{display:none}
.rv-barbox>.v2-label{display:block;margin-bottom:8px}
.rv-bars{display:grid;gap:8px}
.rv-bar{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;font-family:var(--sans);font-size:12px;color:var(--muted)}
.rv-bar>b{color:var(--ink);font-size:12.5px}
.rv-track{position:relative;display:flex;height:18px;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.rv-track>i{display:block;flex:0 0 auto;height:100%;min-width:0}
.rv-track>em{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,var(--paper) 0 3px,transparent 3px 6px);border-left:1px solid var(--paper);transition:left var(--resize-dur) var(--resize-ease),width var(--resize-dur) var(--resize-ease)}
.rv-bar>span{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;white-space:nowrap}
.rv-bar .c-rent,.rv-barkeys .k-rent::before{background:var(--accent)}
.rv-bar .c-loan,.rv-barkeys .k-loan::before{background:var(--ink)}
.rv-bar .c-opp,.rv-barkeys .k-opp::before{background:color-mix(in srgb,var(--ink) 50%,var(--paper))}
.rv-bar .c-fee,.rv-barkeys .k-fee::before{background:color-mix(in srgb,var(--ink) 25%,var(--paper))}
.rv-bar .c-brok,.rv-barkeys .k-brok::before{background:color-mix(in srgb,var(--accent) 55%,var(--paper))}
.rv-bar .c-hug,.rv-barkeys .k-hug::before{background:var(--muted)}
.rv-barkeys .k-back::before{background:repeating-linear-gradient(135deg,var(--ink) 0 2px,var(--paper) 2px 4px);border:1px solid var(--line);box-sizing:border-box}
/* 그림 두 칸 */
.rv-vis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--soft)}
.rv-vis[hidden],.rv-cmp[hidden]{display:none}
.rv-vcard{min-width:0;padding:14px 18px 16px}
.rv-vcard+.rv-vcard{border-left:1px solid var(--soft)}
.rv-vcard>.v2-label{display:block;margin-bottom:12px}
/* 전환율 눈금(0~10%): 손익분기까지 빗금 구역, 법정 상한 점선, 시장 평균 작은 눈금, 지금(위)·손익분기(아래) 표식 */
.rv-gauge{position:relative;margin:34px 6px 46px}
.rv-gbar{position:relative;height:22px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,var(--paper))}
.rv-zone{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 45%,var(--paper)) 0 4px,var(--accent-wash) 4px 8px);border-right:1px solid var(--accent)}
.rv-mkt{position:absolute;left:0;right:0;top:0;height:24px;pointer-events:none}
.rv-mkt i{position:absolute;bottom:-5px;width:0;height:7px;border-left:2px solid var(--muted);transform:translateX(-1px)}
.rv-cap{position:absolute;top:-6px;height:36px;width:0;border-left:2px dashed var(--ink);pointer-events:none}
.rv-ticks{position:absolute;left:0;right:0;top:calc(100% + 4px);height:14px;pointer-events:none}
.rv-ticks em{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.rv-ticks em:first-child{transform:none}
.rv-ticks em:last-child{transform:translateX(-100%)}
.rv-be,.rv-me{position:absolute;width:0;pointer-events:none}
.rv-be[hidden],.rv-me[hidden]{display:none}
.rv-me{bottom:-5px;height:32px;border-left:2px solid var(--ink)}
.rv-me em{position:absolute;bottom:calc(100% + 3px);left:0;transform:translateX(calc(var(--p,0) * -1%));padding:2px 7px;border-radius:var(--radius);background:var(--ink);color:var(--paper);font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.rv-be{top:-5px;height:50px;border-left:2px solid var(--accent)}
.rv-be em{position:absolute;top:100%;left:0;transform:translateX(calc(var(--p,0) * -1%));padding-top:2px;font-style:normal;font-family:var(--sans);font-size:11px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} /* 선은 accent, 11px 글자는 대비 위해 ink */
.rv-glist{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--ink)}
.rv-glist li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:start}
.rv-glist li i{width:16px;height:12px;margin-top:3px;border:1px solid var(--line);border-radius:2px;box-sizing:border-box}
.rv-glist li span{min-width:0;overflow-wrap:anywhere}
.rv-glist .z-m i{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 45%,var(--paper)) 0 3px,var(--accent-wash) 3px 6px)}
.rv-glist .z-j i{background:color-mix(in srgb,var(--ink) 7%,var(--paper))}
.rv-glist .z-cap i{border:0;border-left:2px dashed var(--ink);border-radius:0;width:2px;margin-left:7px}
.rv-glist .z-mkt i{border:0;border-left:2px solid var(--muted);border-radius:0;width:2px;height:8px;margin:5px 0 0 7px}
.rv-vcard.is-na .rv-gauge{opacity:.35}
/* 누적 비용 선 차트 */
.rv-keys .k-j::before{height:0;border-top:3px solid var(--ink);vertical-align:3px;border-radius:0}
.rv-keys .k-m::before{height:0;border-top:3px solid var(--accent);vertical-align:3px;border-radius:0}
.rv-keys .k-x::before{width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--accent);vertical-align:0;box-sizing:border-box}
.rv-chart{position:relative;min-width:0;border-radius:var(--radius);outline:none;touch-action:pan-y}
.rv-chart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rv-chart svg{display:block;overflow:visible;font-family:var(--sans)}
.rv-chart .gr{stroke:var(--soft);stroke-width:1}
.rv-chart .base{stroke:var(--line);stroke-width:1}
.rv-chart .ax{fill:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
.rv-chart .s-j{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.rv-chart .s-m{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.rv-chart .draw{animation:rvDraw .9s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes rvDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.rv-chart .be{fill:var(--paper);stroke:var(--accent);stroke-width:2.5}
.rv-chart .bet{fill:var(--ink);font-size:11px;font-weight:700}
.rv-chart .pt{fill:var(--paper);stroke-width:2}
.rv-chart .pt.j{stroke:var(--ink)}
.rv-chart .pt.m{stroke:var(--accent)}
.rv-chart .xh{stroke:var(--ink);stroke-width:1;opacity:.5}
.rv-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}
.rv-tip b{display:block;margin-bottom:4px;color:var(--ink);font-size:11.5px}
.rv-tip span{display:block;white-space:nowrap;line-height:1.7}
.rv-tip strong{color:var(--ink);font-variant-numeric:tabular-nums}
.rv-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 금리 표 */
.rv-cmp{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.rv-cmp>.v2-label{display:block;margin-bottom:8px}
.rv-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.rv-tbl table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;background:var(--card,var(--paper));border:1px solid var(--soft)}
.rv-tbl thead th{background:var(--wash,var(--paper));font-size:11px;font-weight:600;color:var(--muted);text-align:right;padding:8px 10px;border-bottom:1px solid var(--line)}
.rv-tbl thead th:first-child,.rv-tbl tbody th{text-align:left}
.rv-tbl tbody th,.rv-tbl td{padding:8px 10px;border-bottom:1px solid var(--soft);font-weight:600;color:var(--ink)}
.rv-tbl td{text-align:right}
.rv-tbl td,.rv-tbl th{white-space:nowrap;font-variant-numeric:tabular-nums}
.rv-tbl tr.is-cur th,.rv-tbl tr.is-cur td{font-weight:800;background:var(--accent-wash)}
@container v2in (max-width:330px){ .rv-fields,.rv-pair{grid-template-columns:minmax(0,1fr)} } /* 좁은 입력 폭에서 금액이 잘리지 않게 한 열로 */
@container v2in (max-width:560px){ .rv-fields > .rv-big{grid-column:1 / -1} } /* 반쪽 칸에는 전세 보증금·대출의 9자리 금액(300,000,000)이 안 들어감(align-check long) */
@media (prefers-reduced-motion:reduce){ .rv-chart .draw{animation:none;stroke-dashoffset:0} .rv-grid .t-resize,.rv-vis .t-resize,.rv-vis .t-move,.rv-track>em{transition:none} }
@media (max-width:900px){
  .rv-vis{grid-template-columns:minmax(0,1fr)}
  .rv-vcard+.rv-vcard{border-left:0;border-top:1px solid var(--soft)}
}
@media (max-width:720px){
  .rv-grid{grid-template-columns:minmax(0,1fr)}
  .rv-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .rv-in,.rv-out,.rv-cmp,.rv-vcard{padding-left:12px;padding-right:12px}
  .rv-fields,.rv-pair{grid-template-columns:minmax(0,1fr)}
}