/* 연비 계산기 전용 CSS (2026-10-15). 2패널 계산형 fe-* + 주유 기록 줄(subgrid로 세로선 맞춤) + 도로 그림(차가 평균 연비까지 이동, R45)·구간별 막대(평균선). 공용 부품은 assets/v2.css.
   움직임: transitions.dev --ease-smooth-out(cubic-bezier(.22,1,.36,1)), reduced-motion이면 끔. 두 열 ↔ 한 열 전환은 화면 폭이 아니라 툴 폭(container fe). */
.fe-work{container:fe / inline-size}
.fe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fe-in{padding:16px 18px 18px;min-width:0}
.fe-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
.fe-fields .v2-f{min-width:0}
.fe-fields .v2-f.full{grid-column:1 / -1}
.fe-fields .v2-f>.v2-label{display:block}
#feUnit{display:flex;flex-wrap:nowrap;width:100%;margin-top:5px}
#feUnit 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}
/* 주유 기록 줄: 번호 | 주행거리 | 주유량 | 지우기 — 머리글과 모든 줄이 같은 열 */
.fe-tab{display:grid;grid-template-columns:16px minmax(0,1fr) minmax(0,1fr) 34px;column-gap:6px}
.fe-tab.is-amt{grid-template-columns:16px minmax(0,.9fr) minmax(0,1.1fr) 34px} /* 결제 금액 열이 더 김 */
.fe-head,.fe-rows{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}
.fe-head{margin-bottom:5px;align-items:end}
.fe-head .v2-label{display:block;min-width:0}
.fe-rows{list-style:none;margin:0;padding:0;row-gap:6px}
.fe-rows li{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center}
.fe-i{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.fe-rows .v2-input{min-width:0}
.fe-rows .v2-input input{padding:0 7px;font-size:14.5px} /* 결제 금액 9자리(100,000,000)도 두 칸 나란히 안 잘리게 */
.fe-rows .v2-input b{min-width:28px;padding:0 6px}
.fe-rows .v2-input:has(input[aria-invalid="true"]){border-color:var(--accent)}
.fe-x{box-sizing:border-box;width:34px;height:var(--v2-ctl,42px);padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-family:var(--sans);font-size:18px;line-height:1;cursor:pointer}
.fe-x:hover{color:var(--ink);border-color:var(--ink)}
.fe-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fe-add{display:flex;align-items:flex-start;gap:6px 10px;flex-wrap:wrap;margin-top:8px}
.fe-add .v2-btn{flex:0 0 auto}
.fe-add .fe-hint{flex:1 1 200px;margin-top:2px}
.fe-chips{margin:-4px 0 4px;flex-wrap:wrap}
.fe-chips button{height:28px;padding:0 10px;font-family:var(--sans);font-size:12px;font-weight:600;white-space:nowrap}
.fe-hint{display:block;margin-top:4px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.fe-fields .v2-f.full>.fe-hint:first-child{margin-top:-6px}
.fe-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.fe-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.fe-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.fe-out .v2-label{display:block;margin-bottom:6px}
.fe-out .v2-big{flex-wrap:wrap;row-gap:6px;font-size:40px}
.fe-out .v2-big>span{min-width:0;overflow-wrap:anywhere}
.fe-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)}
.fe-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.fe-warn{margin:10px 0 0;padding:8px 10px;border-left:3px solid var(--accent);background:var(--accent-wash);font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink)}
.fe-warn[hidden]{display:none}
.fe-res{margin-top:14px;flex:1}
.fe-res li span{min-width:0;flex:1 1 auto}
.fe-res li span em{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:1;max-width:100%;overflow-wrap:anywhere}
.fe-res li b{flex:0 0 auto}
.fe-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.fe-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.fe-foot .v2-status{margin-left:auto}
.fe-foot a.v2-btn{text-decoration:none}
.fe-box{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.fe-box[hidden]{display:none}
.fe-box>.v2-label{display:block;margin-bottom:10px}
.fe-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
/* 도로: 연료 1단위로 가는 거리. 차·깃발·눈금은 --x(0~100)로 놓고, 양끝 26px은 차·글자 자리 */
.fe-track{--pad:26px;position:relative;height:96px;max-width:640px;font-family:var(--sans);font-variant-numeric:tabular-nums}
.fe-track>span{position:absolute}
.fe-carv,.fe-car,.fe-flag,.fe-ticks span{left:calc(var(--pad) + (100% - 2 * var(--pad)) * var(--x,0) / 100)}
.fe-carv{top:0;transform:translateX(-50%);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;transition:left 900ms cubic-bezier(.22,1,.36,1)}
.fe-car{top:17px;width:48px;height:22px;transform:translateX(-50%);transition:left 900ms cubic-bezier(.22,1,.36,1)}
.fe-car svg{display:block;width:100%;height:100%;fill:var(--accent)}
.fe-car .fe-glass{fill:var(--paper)}
.fe-car circle{fill:var(--ink)}
.fe-car circle.fe-hub{fill:var(--paper)}
.fe-road{top:40px;left:0;right:0;height:14px;border-radius:7px;background:var(--wash);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.fe-road::before{content:'';position:absolute;left:8px;right:8px;top:6px;height:2px;background:repeating-linear-gradient(90deg,var(--muted) 0 10px,transparent 10px 20px);opacity:.45}
.fe-band{position:absolute;top:0;bottom:0;left:calc(var(--pad) + (100% - 2 * var(--pad)) * var(--x,0) / 100);width:calc((100% - 2 * var(--pad)) * var(--w,0) / 100);background:color-mix(in srgb,var(--accent) 28%,transparent);transition:left 500ms cubic-bezier(.22,1,.36,1),width 500ms cubic-bezier(.22,1,.36,1)}
.fe-band[hidden]{display:none}
.fe-ticks{top:58px;left:0;right:0;height:16px;font-size:11px;color:var(--muted)}
.fe-ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.fe-flag{top:34px;width:2px;height:58px;margin-left:-1px}
.fe-flag[hidden]{display:none}
.fe-flag i{position:absolute;left:0;top:0;width:2px;height:26px;background:var(--ink)}
.fe-flag b{position:absolute;top:42px;left:1px;transform:translateX(-50%);font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.fe-carv[data-edge="l"],.fe-ticks span[data-edge="l"]{transform:translateX(calc(-1 * var(--pad)))}
.fe-flag[data-edge="l"] b{transform:translateX(calc(-1 * var(--pad)))}
.fe-carv[data-edge="r"],.fe-ticks span[data-edge="r"]{transform:translateX(calc(-100% + var(--pad)))}
.fe-flag[data-edge="r"] b{transform:translateX(calc(-100% + var(--pad)))}
/* 구간별 막대: 세로선 = 평균 */
.fe-bars{--avg:0;display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:7px 10px;max-width:640px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.fe-bars li{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center}
.fe-bl{color:var(--muted);font-weight:600;white-space:nowrap}
.fe-bt{position:relative;height:14px;border-radius:4px;background:var(--wash)}
.fe-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 500ms cubic-bezier(.22,1,.36,1)}
.fe-bt::after{content:'';position:absolute;top:-4px;bottom:-4px;left:calc(var(--avg) * 1%);width:2px;margin-left:-1px;background:var(--accent)}
.fe-bars b{font-weight:700;color:var(--ink);white-space:nowrap;text-align:right}
.fe-bars li.is-best .fe-bl{color:var(--ink)}
.fe-bars li.is-best .fe-bt i{background:var(--ink)}
@media (prefers-reduced-motion:reduce){ .fe-carv,.fe-car,.fe-band,.fe-bt i{transition:none} }
@container fe (max-width:719px){
  .fe-grid{grid-template-columns:minmax(0,1fr)}
  .fe-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@container fe (max-width:440px){
  .fe-in,.fe-out,.fe-box{padding-left:12px;padding-right:12px}
  .fe-out .v2-big{font-size:34px}
  .fe-bars{gap:7px 8px;font-size:12.5px}
}
@container v2in (max-width:330px){ .fe-fields{grid-template-columns:minmax(0,1fr)} }