/* 주택용 전기요금 계산기 전용 CSS (2026-10-23). 계량기 | 청구서 · 가전 목록(subgrid) · 누진 계단 곡선 · 달마다 막대 · 구간 몫 막대 elb-*. 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 기준(막대 폭·높이 400ms cubic-bezier(.22,1,.36,1), 곡선 위 점은 tool.js가 380ms ease-out으로 곡선을 따라 옮김) — 테마 --ease는 120ms 지연을 품고 있어 쓰지 않음 */
.elb-work{container:elb / inline-size}
.elb-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.elb-in{display:flex;flex-direction:column;gap:14px;padding:16px 18px;min-width:0}
.elb-fields{margin:0}
.elb-kbox,.elb-abox{display:flex;flex-direction:column;gap:10px}
.elb-kbox[hidden],.elb-abox[hidden]{display:none}
.elb-hint{display:block;margin-top:5px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.elb-chips{display:flex;flex-wrap:wrap;gap:4px}
.elb-chips button{height:28px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease}
.elb-chips button:hover{background:var(--btn);color:var(--ink)}
.elb-chips button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.elb-chips button::after{content:" kWh";font-weight:500;font-size:11px}
.elb-asum{margin:0;font-family:var(--sans);font-size:13px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.elb-asum:empty{display:none}
.elb-set{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 14px;align-items:center;padding-top:12px;border-top:1px solid var(--soft)}
.elb-set>.v2-label{margin:0}
.elb-permore{grid-column:2;min-width:0;margin-top:-2px}
.elb-mon[hidden],.elb-range[hidden]{display:none}
.elb-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.elb-strip button{position:relative;height:32px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;transition:background-color 150ms ease,color 150ms ease}
.elb-strip button:hover{background:var(--btn);color:var(--ink)}
.elb-strip button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.elb-strip button.is-sum::after,.elb-strip button.is-win::after,.elb-strip-key i{content:"";position:absolute;left:50%;bottom:3px;width:10px;height:3px;margin-left:-5px;border-radius:2px}
.elb-strip button.is-sum::after,.elb-strip-key .k-sum i{background:#d9822b}
.elb-strip button.is-win::after,.elb-strip-key .k-win i{background:#4a7fb5}
.elb-strip-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.elb-strip-key span{display:inline-flex;align-items:center;gap:6px}
.elb-strip-key i{position:static;margin:0;display:inline-block}
.elb-range{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px}
.elb-range .elb-hint{grid-column:1/-1;margin-top:0}
.elb-ctl{display:block;width:100%;min-width:0;height:var(--v2-ctl);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);font-variant-numeric:tabular-nums}
.elb-ctl:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.v2-f.is-invalid .elb-ctl,.elb-ctl[aria-invalid="true"]{border-color:var(--accent)}
.v2-f.is-invalid .v2-input,.elb-cell.is-invalid{border-color:var(--accent)}
.elb-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.elb-exl{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.elb-exl svg{width:14px;height:14px}
.elb-acts .v2-btn{margin-left:auto}
.elb-out{padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.elb-out>.v2-label{display:block;margin-bottom:8px}
.elb-big{font-size:44px;overflow-wrap:anywhere}
.elb-out .v2-sub{margin-bottom:12px}
.elb-rows li{flex-wrap:wrap;gap:2px 12px}
.elb-rows li span{flex:1 1 auto;min-width:0}
.elb-rows li span em{display:inline-block;font-size:11.5px;color:var(--muted);opacity:1;overflow-wrap:anywhere}
.elb-rows li b{margin-left:auto;text-align:right}
.elb-rows li.elb-billrow b{font-size:16px}
.elb-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.elb-foot .v2-status:empty{display:none}
/* 가전 목록: 줄마다 subgrid로 세로선 맞춤 */
.elb-apps{padding:14px 18px 16px;border-bottom:1px solid var(--soft);min-width:0}
.elb-apps[hidden]{display:none}
.elb-ahead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:10px}
.elb-add{display:flex;flex-wrap:wrap;gap:5px}
.elb-add .v2-btn{height:30px;padding:0 10px;font-size:12px}
.elb-alist{display:grid;grid-template-columns:minmax(118px,1.25fr) minmax(96px,1fr) minmax(88px,.9fr) minmax(72px,.75fr) minmax(76px,.8fr) minmax(76px,.8fr) 34px;gap:8px 8px;align-items:center}
.elb-arow{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}
.elb-ahd span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.elb-ahd span:nth-child(n+5){text-align:right}
.elb-cell input{font-size:14.5px;padding:0 8px}
.elb-cell b{min-width:0;padding:0 8px}
.elb-ak,.elb-aw{font-family:var(--sans);font-size:13.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.elb-ak{color:var(--muted)}
.elb-adel{width:34px;height:34px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-size:18px;line-height:1;color:var(--muted)}
.elb-adel:hover{background:var(--btn);color:var(--ink)}
.elb-note{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.elb-note:empty{display:none}
/* 누진 계단 곡선 */
.elb-vis[hidden]{display:none}
.elb-curve{padding:14px 18px 16px;border-bottom:1px solid var(--soft);min-width:0}
.elb-chead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:6px}
.elb-chint{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.elb-chart{position:relative;min-width:0;cursor:crosshair;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.elb-chart svg{display:block;font-family:var(--sans);overflow:visible}
.elb-chart .band{fill:var(--wash);opacity:.55}
.elb-chart .band.b2{opacity:.9}
.elb-chart .band.sup{fill:var(--accent-wash);opacity:.5}
.elb-chart .band.on{fill:var(--accent-wash);opacity:1}
.elb-chart .edge{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.elb-chart .gr{stroke:var(--soft);stroke-width:1}
.elb-chart .ax{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.elb-chart .bl{fill:var(--muted);font-size:11px;font-weight:650;font-variant-numeric:tabular-nums}
.elb-chart .bl.on{fill:var(--ink);font-weight:800}
.elb-chart .cur{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.elb-chart .alt{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4;opacity:.8}
.elb-chart .add{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.elb-chart .bm circle{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.elb-chart .pt circle{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.elb-chart .pt .gv,.elb-chart .pt .gh{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.45}
.elb-chart .pl{fill:var(--ink);font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.elb-keys{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.elb-keys li{display:inline-flex;align-items:center;gap:6px}
.elb-keys li[hidden]{display:none}
.elb-keys i{flex:0 0 auto;display:inline-block}
.elb-keys .k-now{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.elb-keys .k-alt{width:16px;height:0;border-top:1.5px dashed var(--muted)}
.elb-keys .k-base{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);box-sizing:border-box}
.elb-keys .k-band{width:12px;height:12px;border-radius:2px;background:var(--accent-wash)}
/* 달마다 막대 · 구간 몫 */
.elb-cards{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.elb-card{padding:14px 18px 16px;min-width:0}
.elb-card+.elb-card{border-left:1px solid var(--soft)}
.elb-card>.v2-label{display:block;margin-bottom:10px}
.elb-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin:0;padding:0;list-style:none}
.elb-months button{display:flex;flex-direction:column;align-items:stretch;width:100%;height:150px;padding:0;border:0;background:none;color:var(--muted);font-family:var(--sans)}
.elb-mbv{min-height:15px;font-size:10.5px;font-weight:750;color:var(--ink);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.elb-mbb{flex:1 1 auto;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line)}
.elb-mbb i{display:block;width:72%;max-width:22px;border-radius:3px 3px 0 0;background:var(--line);transition:height 400ms cubic-bezier(.22,1,.36,1),background-color 150ms ease}
.elb-months button.is-sum .elb-mbb i{background:color-mix(in srgb,#d9822b 45%,var(--line))}
.elb-months button.is-win .elb-mbb i{background:color-mix(in srgb,#4a7fb5 40%,var(--line))}
.elb-months button[aria-pressed="true"] .elb-mbb i{background:var(--fill)}
.elb-months button.is-cover .elb-mbb i{box-shadow:inset 0 0 0 2px var(--accent)}
.elb-months button:hover .elb-mbb i{background:var(--fill-hover)}
.elb-mbl{min-height:var(--v2-tap,24px);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums}
.elb-months button[aria-pressed="true"] .elb-mbl{color:var(--ink);font-weight:800}
.elb-months button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}
.elb-share{display:flex;flex-direction:column;gap:8px}
.elb-sbar{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px}
.elb-sbl{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.elb-sbt{display:flex;height:20px;border-radius:4px;overflow:hidden;background:var(--soft)}
.elb-sbt i{display:block;height:100%;transition:width 400ms cubic-bezier(.22,1,.36,1)}
.elb-share .s0{background:color-mix(in srgb,var(--ink) 16%,var(--paper))}
.elb-share .s1{background:color-mix(in srgb,var(--ink) 38%,var(--paper))}
.elb-share .s2{background:color-mix(in srgb,var(--ink) 64%,var(--paper))}
.elb-share .s3{background:var(--ink)}
.elb-slist{display:flex;flex-direction:column;margin:6px 0 0;padding:0;list-style:none}
.elb-slist li{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12.5px}
.elb-slist li i{flex:0 0 auto;width:10px;height:10px;border-radius:2px}
.elb-slist li span{color:var(--muted)}
.elb-slist li b{margin-left:auto;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
@container elb (max-width:779px){
  .elb-top{grid-template-columns:minmax(0,1fr)}
  .elb-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
  .elb-cards{grid-template-columns:minmax(0,1fr)}
  .elb-card+.elb-card{border-left:0;border-top:1px solid var(--soft)}
}
@container elb (min-width:521px) and (max-width:779px){ .elb-strip{grid-template-columns:repeat(12,minmax(0,1fr))} } /* 한 열로 쌓여 계량기 칸이 넓으면 달 띠 한 줄 */
@container elb (max-width:639px){
  .elb-alist{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 34px;gap:6px}
  .elb-ahd{display:none}
  .elb-arow{grid-template-columns:subgrid;row-gap:6px;padding:8px 0;border-top:1px solid var(--soft)}
  .elb-arow>select{grid-column:1/4}
  .elb-arow>.elb-adel{grid-column:4;grid-row:1}
  .elb-arow>.elb-cell{grid-row:2}
  .elb-arow>.elb-ak{grid-column:1/3;grid-row:3;text-align:left}
  .elb-arow>.elb-aw{grid-column:3/5;grid-row:3}
}
@container elb (max-width:520px){
  .elb-big{font-size:36px}
  .elb-in,.elb-out,.elb-apps,.elb-curve,.elb-card{padding-left:12px;padding-right:12px}
  .elb-set{grid-template-columns:minmax(0,1fr);gap:6px}
  .elb-permore{grid-column:auto;margin-top:0}
  .elb-set>.v2-seg,.elb-set>.elb-ctl{margin-bottom:6px}
  .elb-months button{height:130px}
  .elb-mbv{font-size:9.5px}
}
@container elb (max-width:400px){
  .elb-range{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ .elb-mbb i,.elb-sbt i{transition:none} }