/* eSIM 데이터 용량 계산기 전용 CSS (2026-11-08). 작업면 '하루 사용표': [여행 | 결과(큰 수·상품 크기 행·활동 비중 막대·줄이는 방법)] → 사용표(활동 10줄, 열만 공유하는 subgrid)
   → 상품 비교 3줄. 막대는 값이 바뀌면 너비가 미끄러진다(R45, 동작 줄이기면 멈춤). 공용 부품은 assets/v2.css */
.esd{container:esd / inline-size}
/* 넓으면 [여행 / 비중·줄이는 방법 | 결과], 좁으면 여행 → 결과 → 비중(DOM 순서, 비중 칸에는 초점 요소 없음) */
.esd-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"in out" "ins out";grid-template-rows:auto 1fr}
.esd-in,.esd-out{padding:16px 18px 18px;min-width:0}
.esd-in{grid-area:in}
.esd-out{grid-area:out;border-left:1px solid var(--soft)}
.esd-ins{grid-area:ins;min-width:0;padding:0 18px 18px}
.esd-ins>.v2-label{display:block;margin-bottom:6px}
.esd-ins:not(:has(.esd-stack i)){display:none}
@container esd (max-width:699px){
  .esd-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"in" "out" "ins";grid-template-rows:auto}
  .esd-out{border-left:0;border-top:1px solid var(--soft)}
  .esd-ins{padding-top:2px}
}
.esd-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.esd-row .v2-f{min-width:0}
.esd-row .v2-f>.v2-label{display:block;margin:0 0 5px}
@container v2in (max-width:330px){ .esd-row{grid-template-columns:repeat(2,minmax(0,1fr))} .esd-row .v2-f:last-child{grid-column:1 / -1} }
.esd .v2-input.is-bad{border-color:var(--accent)}
.esd .v2-input:has(input:disabled){background:var(--wash)}
.esd .v2-input input:disabled{opacity:.45;cursor:not-allowed}
.esd-select{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);padding:0 6px;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;text-overflow:ellipsis}
.esd-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.esd-msg{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.esd-msg:empty{display:none}
.esd-msg.is-error{color:var(--accent)}
.esd-hint{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.esd-ex{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.esd-exl{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.esd-ex .v2-seg button{height:32px;white-space:nowrap}
/* 결과 */
.esd-out>.v2-label{display:block;margin-bottom:6px}
.esd-out .v2-big span{min-width:0;overflow-wrap:anywhere}
.esd-out .v2-big.is-empty span{font-size:18px;font-weight:600}
.esd-rows{margin-top:14px}
.esd-rows li.esd-pl span{color:var(--ink);font-weight:600}
.esd-rows li b{white-space:normal;text-align:right}
.esd-stack{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--soft)}
.esd-stack i{display:block;height:100%;min-width:0;transition:width .35s var(--ease-out,ease)}
.esd .c0{background:var(--accent)}
.esd .c1{background:var(--ink)}
.esd .c2{background:color-mix(in srgb,var(--ink) 45%,var(--paper))}
.esd .c3{background:var(--line)}
.esd-legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.esd-legend:empty{display:none}
.esd-legend li{display:inline-flex;align-items:center;gap:5px}
.esd-legend i{display:inline-block;width:9px;height:9px;border-radius:2px}
.esd-legend b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.esd-tips{margin:14px 0 0;padding:0 0 0 17px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink)}
.esd-tips:empty{display:none}
.esd-tips li+li{margin-top:4px}
.esd-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.esd-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 사용표: 이름 | 양(+화질) | 하루 MB | 막대 — 줄은 열만 공유(입력칸 세로선 일치) */
.esd-usew,.esd-cmpw{padding:16px 18px 18px;min-width:0;border-top:1px solid var(--soft)}
.esd-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 8px}
.esd-head .esd-hint{margin:0}
.esd-use{container:esdu / inline-size}
.esd-acts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1.15fr) auto minmax(64px,auto) minmax(72px,1fr);column-gap:14px}
.esd-act{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;padding:7px 0;border-bottom:1px solid var(--soft)}
.esd-an{display:flex;flex-direction:column;gap:1px;min-width:0;font-family:var(--sans);cursor:pointer}
.esd-an b{font-size:13.5px;font-weight:700;color:var(--ink)}
.esd-an small{font-size:11.5px;line-height:1.4;color:var(--muted)}
.esd-ctl{display:flex;gap:6px;align-items:center}
.esd-h{flex:0 0 122px;width:122px}
.esd-q{flex:0 0 116px;width:116px}
.esd-mb{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.esd-bar{display:block;height:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.esd-bar i{display:block;width:0;height:100%;background:color-mix(in srgb,var(--ink) 55%,var(--paper));transition:width .35s var(--ease-out,ease)}
.esd-act.is-top .esd-bar i{background:var(--accent)}
.esd-act.is-zero .esd-an b{color:var(--muted)}
@container esdu (max-width:560px){
  .esd-acts{grid-template-columns:auto minmax(0,1fr);row-gap:0}
  .esd-act{row-gap:6px}
  .esd-act .esd-an,.esd-act .esd-bar{grid-column:1 / -1}
}
/* 상품 비교 */
.esd-cmp{container:esdc / inline-size}
.esd-cbar{display:grid;grid-template-columns:minmax(0,200px) auto;gap:12px;align-items:start;justify-content:start}
.esd-cbar .v2-f{min-width:0}
.esd-cbar .v2-f>.v2-label{display:block;margin:0 0 5px}
.esd-prods{list-style:none;margin:10px 0 0;padding:0}
.esd-prod{padding:10px 0 12px;border-bottom:1px solid var(--soft)}
.esd-pno{margin:0 0 6px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.esd-pf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.5fr);grid-template-areas:"t g d p";gap:10px}
.esd-ft{grid-area:t}.esd-fg{grid-area:g}.esd-fd{grid-area:d}.esd-fp{grid-area:p}
.esd-pf .v2-f{min-width:0}
.esd-pf .v2-f>.v2-label{display:block;margin:0 0 5px}
/* 좁으면 형태 / 용량·기간 / 가격(9자리 금액이 들어가게 한 줄 전체) — 화면 순서 = DOM 순서 */
@container esdc (max-width:540px){ .esd-pf{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"t t" "g d" "p p"} }
.esd-pres{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.esd-pres:empty{display:none}
.esd-prod.is-short .esd-pres,.esd-prod.is-tight .esd-pres{color:var(--accent)}
.esd-prod.is-best .esd-pno{color:var(--ink)}
.esd-prod.is-best .esd-pres{font-weight:700}
.esd-cnote{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.esd-cnote:empty{display:none}
@media (prefers-reduced-motion:reduce){ .esd-stack i,.esd-bar i{transition:none} }