/* 전기차 충전 비용 계산기 전용 CSS (2026-10-17). 2패널 계산형 evc-*. 공용 부품은 assets/v2.css. 시각 요소(R45): 배터리 게이지 충전 차오름(첫 표시 1s, 값 변경 때 새 폭으로 500ms), 한 달 충전비 막대 폭 전환.
   움직임: transitions.dev --ease-smooth-out 계열 cubic-bezier(.22,1,.36,1), reduced-motion이면 끔. 두 열 ↔ 한 열 전환은 화면 폭이 아니라 툴 폭(container evc). */
.evc-work{container:evc / inline-size}
.evc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.evc-in{padding:16px 18px 18px;min-width:0}
.evc-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
.evc-fields .v2-f{min-width:0}
.evc-fields .v2-f[hidden]{display:none}
.evc-fields .v2-f.full{grid-column:1 / -1}
.evc-fields .v2-f>.v2-label{display:block}
.evc-seg{margin-top:5px;flex-wrap:wrap}
#evBy{display:flex;flex-wrap:nowrap;width:100%}
#evBy button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 6px;font-family:var(--sans);font-size:13.5px;font-weight:700;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
.evc-chips{margin-top:8px;flex-wrap:wrap}
.evc-chips button{height:28px;padding:0 10px;font-family:var(--sans);font-size:12px;font-weight:600}
.evc-fields .v2-f.full>.evc-chips:first-child{margin-top:-4px}
.evc-hint{display:block;margin-top:4px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.evc-fields .v2-f.full>.evc-hint:first-child{margin-top:-6px}
.evc-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.evc-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.evc-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.evc-out .v2-label{display:block;margin-bottom:6px}
.evc-out .v2-big{flex-wrap:wrap;row-gap:6px;font-size:40px}
.evc-out .v2-big>span{min-width:0;overflow-wrap:anywhere}
.evc-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)}
.evc-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.evc-rows{margin-top:14px;flex:1}
.evc-rows li span{min-width:0;flex:1 1 auto}
.evc-rows li span em{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:1;max-width:100%;overflow-wrap:anywhere}
.evc-rows li b{flex:0 0 auto;text-align:right}
.evc-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.evc-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.evc-foot .v2-status{margin-left:auto}
.evc-box{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.evc-box[hidden]{display:none}
.evc-box>.v2-label{display:block;margin-bottom:10px}
.evc-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.evc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px}
/* 배터리 게이지: 바탕 = 지금 잔량, 강조 = 이번에 채우는 몫. 왼쪽에서 오른쪽으로 차오름 */
.evc-bat{display:flex;align-items:center;max-width:560px}
.evc-bat-body{position:relative;flex:1 1 auto;min-width:0;height:52px;border:2px solid color-mix(in srgb,var(--ink) 45%,var(--paper));border-radius:10px;background:var(--paper);overflow:hidden}
.evc-bat-base,.evc-bat-add{position:absolute;top:0;bottom:0;left:0;width:0;display:block}
.evc-bat-base{background:color-mix(in srgb,var(--ink) 20%,var(--paper));transition:width 500ms cubic-bezier(.22,1,.36,1)}
.evc-bat-add{background:var(--accent);transition:left 500ms cubic-bezier(.22,1,.36,1),width 500ms cubic-bezier(.22,1,.36,1)}
.evc-bat.is-first .evc-bat-add{transition-duration:1000ms}
.evc-bat.is-over .evc-bat-add{background:repeating-linear-gradient(135deg,var(--accent) 0 8px,color-mix(in srgb,var(--accent) 70%,var(--paper)) 8px 16px)}
.evc-bat-ticks{position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0 calc(10% - 1px),color-mix(in srgb,var(--paper) 75%,transparent) calc(10% - 1px) 10%)}
.evc-bat-cap{flex:0 0 auto;width:7px;height:22px;margin-left:2px;border-radius:0 4px 4px 0;background:color-mix(in srgb,var(--ink) 45%,var(--paper))}
.evc-bat-scale{display:flex;justify-content:space-between;max-width:560px;padding-right:9px;margin-top:4px;font-family:var(--sans);font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
/* 한 달 충전비 막대 */
.evc-bars{display:grid;gap:7px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.evc-bars li{display:grid;grid-template-columns:minmax(92px,auto) minmax(0,1fr) auto minmax(72px,auto);align-items:center;gap:10px}
.evc-bars li[hidden]{display:none}
.evc-bl{color:var(--muted);font-weight:600;white-space:nowrap}
.evc-bt{position:relative;height:14px;border-radius:4px;background:var(--wash);overflow:hidden}
.evc-bt i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:color-mix(in srgb,var(--ink) 55%,var(--paper));transition:width 400ms cubic-bezier(.22,1,.36,1)}
.evc-bars b{font-weight:700;color:var(--ink);white-space:nowrap;text-align:right}
.evc-bars em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;text-align:right}
.evc-bars li.is-cur .evc-bl{color:var(--ink)}
.evc-bars li.is-cur .evc-bt i{background:var(--accent)}
.evc-bars li.is-gas .evc-bt i{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 35%,var(--paper)) 0 4px,color-mix(in srgb,var(--ink) 15%,var(--paper)) 4px 8px)}
/* 한 달 주행거리별 표 */
.evc-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.evc-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.evc-table th,.evc-table td{padding:6px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.evc-table th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0}
.evc-table .n{text-align:right}
.evc-table td small{font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--ink);margin-left:4px}
.evc-table tr.is-cur td{background:var(--accent-wash);color:var(--ink)}
.evc-table:empty{display:none}
@media (prefers-reduced-motion:reduce){ .evc-bat-base,.evc-bat-add,.evc-bt i{transition:none} }
@container evc (max-width:719px){
  .evc-grid{grid-template-columns:minmax(0,1fr)}
  .evc-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@container evc (max-width:440px){
  .evc-in,.evc-out,.evc-box{padding-left:12px;padding-right:12px}
  .evc-bars li{grid-template-columns:minmax(78px,auto) minmax(0,1fr) auto;gap:2px 8px}
  .evc-bars em{grid-column:3;font-size:11px}
  .evc-out .v2-big{font-size:34px}
}
@container v2in (max-width:375px){ .evc-fields{grid-template-columns:minmax(0,1fr)} } /* 768px 화면(입력 367px)에서 id 단가 Rp/kWh 칸이 잘림 → 한 열 */