/* 갤런 배럴 변환기 전용 CSS (2026-10-20). 답 띠 → 계량 칸 6개 → 배럴 종류 줄 → 크기 사다리 → 유가 환산, 띠마다 전체 폭.
   움직임(R45): 배럴 그림의 액체 높이(translateY), 사다리 표식(translateX), 비중 막대 폭. 동작 줄이기면 바로. 폭 판단은 작업면 컨테이너 gb. 공용 부품 assets/v2.css */
.gb-work{container:gb / inline-size}
.gb-work .v2-status:empty{display:none}
.gb-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 8px}
.gb-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.gb-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:13.5px;font-weight:600;text-overflow:ellipsis}
.gb-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gb-note{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.gb-note:empty{display:none}
.gb-note.is-error{color:var(--accent);font-weight:600}

/* 답 띠 */
.gb-ans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;gap:10px 24px;padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.gb-ansl{min-width:0;container:gbans / inline-size}
.gb-ansl > .v2-label{display:block;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gb-ans .v2-big{flex-wrap:wrap;transition:opacity var(--ease)}
.gb-ans .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(22px, calc(100cqi / (var(--gb-len, 6) * .62)), 1em)}
.gb-ans .v2-big.is-empty span{font-size:16px;font-weight:600;line-height:1.4;color:var(--muted);white-space:normal}
.gb-ans .v2-sub{transition:opacity var(--ease)}
.gb-ans.is-pend .v2-big,.gb-ans.is-pend .v2-sub,.gb-price.is-pend .gb-pt,.gb-price.is-pend .gb-share{opacity:.45}
.gb-pt,.gb-share{transition:opacity var(--ease)}
.gb-ansr{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0;max-width:390px}
.gb-ansr .v2-formula{margin:0;text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.gb-ansr .v2-formula:empty{display:none}
.gb-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}

/* 계량 칸: 친 칸은 진한 테두리, 반올림한 칸은 라벨 끝에 ≈ */
.gb-meter{padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.gb-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
.gb-cell > label{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.gb-cl{min-width:0;overflow-wrap:anywhere}
.gb-ap{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;font-style:normal;font-weight:700;color:var(--muted)}
.gb-cell .v2-input input{font-size:16.5px;font-weight:700}
.gb-cell.is-src .v2-input{border-color:var(--ink)}
.gb-cell .v2-input b{min-width:0;padding:0 8px;white-space:nowrap}
.gb-opts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;margin-top:12px}
.gb-ctl{display:grid;gap:5px;min-width:0}
.gb-ctl .gb-select{width:auto;min-width:12.5em}

/* 배럴 종류 줄: 같은 폭, 높이 = 부피(드럼 100) */
.gb-kinds{padding:14px 18px 14px;border-bottom:1px solid var(--soft)}
.gb-cans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gb-can{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:end;gap:4px 10px;min-width:0;padding:10px 10px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.gb-can:hover{background:var(--btn)}
.gb-can:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gb-can[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}
.gb-can svg{grid-row:1 / 3;align-self:end;display:block;width:44px;height:94px;overflow:visible}
.gb-can .bd{fill:var(--card)}
.gb-can .lq{fill:color-mix(in srgb, var(--ink) 62%, var(--card));transition:transform .7s cubic-bezier(.2,.75,.25,1)}
.gb-can[aria-pressed="true"] .lq{fill:color-mix(in srgb, var(--ink) 82%, var(--card))}
.gb-can .hp{fill:none;stroke:var(--line);stroke-width:1}
.gb-can .ed,.gb-can .rim{fill:none;stroke:var(--muted);stroke-width:1.2}
.gb-cn{display:flex;flex-direction:column;gap:2px;min-width:0;align-self:start}
.gb-cn b{font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.gb-cn small{font-family:var(--sans);font-size:11.5px;line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gb-cn em{align-self:flex-start;margin-top:2px;font-family:var(--sans);font-size:10.5px;font-style:normal;font-weight:700;color:var(--muted)}
.gb-cc{min-width:0;font-family:var(--sans);font-size:19px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere} /* 말줄임 금지: '100만 bbl'에서 개수 앞자리만 보였다(독립 검토 B1) */

/* 크기 사다리 */
.gb-scale{padding:14px 18px 14px;border-bottom:1px solid var(--soft)}
.gb-axis{min-width:0}
.gb-axis svg{display:block;width:100%;height:96px;overflow:visible}
.gb-axis .ax line{stroke:var(--line);stroke-width:1.4}
.gb-axis .ax .tk{stroke:var(--muted);stroke-width:1}
.gb-axis .ld{stroke:var(--soft);stroke-width:1}
.gb-axis .lb{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--muted)}
.gb-axis .lb.is-near{fill:var(--ink);font-weight:750}
.gb-axis .rf{fill:var(--card);stroke:var(--muted);stroke-width:1.2}
.gb-axis .rf.is-near{fill:var(--ink);stroke:var(--ink)}
.gb-axis .mk{transition:transform .6s cubic-bezier(.2,.75,.25,1)}
.gb-axis .mk line{stroke:var(--accent);stroke-width:2}
.gb-axis .mk circle{fill:var(--accent);stroke:var(--card);stroke-width:2}
.gb-near{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0;padding:0;list-style:none}
.gb-near li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.gb-near span{min-width:0;font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.gb-near b{font-family:var(--sans);font-size:18px;font-weight:800;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.gb-near li.is-off b{color:var(--muted)}

/* 유가 환산 */
.gb-price{padding:14px 18px 16px}
.gb-pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
.gb-pf:has(> .v2-f:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} /* en: 환율 칸 없음 */
.gb-pt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}
.gb-pt li{min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.gb-pt span{display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.gb-pt b{display:block;margin-top:3px;font-family:var(--sans);font-size:17px;font-weight:800;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.gb-share{margin-top:12px}
.gb-share[hidden]{display:none}
.gb-sbar{position:relative;height:14px;border-radius:999px;background:var(--soft);overflow:hidden}
.gb-scr{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:inherit;background:color-mix(in srgb, var(--ink) 70%, var(--card));transition:width .6s cubic-bezier(.2,.75,.25,1)}
.gb-slab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;margin:6px 0 0;font-family:var(--sans);font-size:12.5px;font-weight:650;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}
.gb-sb{color:var(--muted)}
.gb-share.is-over .gb-sb{color:var(--accent)}

@media (prefers-reduced-motion: reduce){ .gb-can .lq,.gb-axis .mk,.gb-scr{transition:none} }

/* 폭: 760 미만 = 칸·종류·단가 두 열, 답 띠 한 열 / 440 미만 = 비교 카드·가격 칸 한 열 */
@container gb (max-width:759px){
  .gb-ans{grid-template-columns:minmax(0,1fr);align-items:start}
  .gb-ansr{align-items:flex-start;max-width:none}
  .gb-ansr .v2-formula{text-align:left}
  .gb-acts{justify-content:flex-start}
  .gb-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gb-cans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gb-pt{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container gb (max-width:599px){ /* 유가 세 칸은 두 칸 + 주유소 칸 한 줄 전체(1181px ja에서 오른쪽 절반이 비었다) */
  .gb-pf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gb-pf > .v2-f:nth-child(3){grid-column:1 / -1}
}
@container gb (max-width:439px){ /* 칸은 '라벨 | 입력' 한 줄 목록: 두 열 반쪽 칸에 큰 값(158,987,294.9)이 잘렸다(align-check long·squeeze) */
  .gb-cells{grid-template-columns:minmax(0,1fr);gap:8px}
  .gb-cell{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr);align-items:center;gap:0 10px}
  .gb-cell .v2-input input{font-size:15px;padding:0 8px} /* 상한 근처 15자리 값(252,000,000,000)이 왼쪽으로 잘렸다(독립 검토 R4) */
  .gb-cell > label{margin:0}
  .gb-near{grid-template-columns:minmax(0,1fr)}
  .gb-pf,.gb-pf:has(> .v2-f:nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}
  .gb-ans,.gb-meter,.gb-kinds,.gb-scale,.gb-price{padding-left:14px;padding-right:14px}
  .gb-can{grid-template-columns:36px minmax(0,1fr);gap:4px 8px;padding:9px 8px 8px}
  .gb-can svg{width:36px;height:77px}
  .gb-cc{font-size:17px}
}