/* BABIP 계산기 전용 CSS (2026-10-21). 박스스코어 한 줄·타구 나누기·운의 깔때기·평균과 비교·비교 목록 bab-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 babw — 700 이상 [칸 | = BABIP]·[깔때기 | 비교], 440~699 결과가 칸 위·깔때기 아래 비교, 440 미만 칸 3개씩 */
.bab-work{container:babw / inline-size}
.bab-score{padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.bab-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:12px}
.bab-who,.bab-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bab-ex .v2-label{margin-right:2px}
.bab-chip{display:inline-flex;align-items:center;gap:5px;height:30px;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:600;color:var(--ink);transition:background var(--ease)}
.bab-chip:hover{background:var(--btn)}
.bab-chip .i{width:13px;height:13px}

/* 박스스코어 한 줄: 칸 5개(투수 6개) = BABIP */
.bab-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,190px);gap:12px 16px;align-items:end}
.bab-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 8px}
.bab-work[data-role="p"] .bab-fields{grid-template-columns:repeat(6,minmax(0,1fr))}
.bab-f .v2-label b{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink)}
.bab-res{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding-left:16px;border-left:1px solid var(--line)}
.bab-res>.v2-label{display:block;margin-bottom:4px}
.bab-big{display:block;font-family:var(--sans);font-size:44px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.bab-diff{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.bab-diff b{font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.bab-status{display:block;margin-top:8px}
.bab-status:empty{display:none}

/* 타구 나누기 막대: 분모·분자 괄호 + 평균이면 안타 표식 */
.bab-split{margin-top:14px}
.bab-split>.v2-label{display:block;margin-bottom:6px}
.bab-work.is-empty .bab-split{display:none}
.bab-br{position:relative;height:34px}
.bab-br span{position:absolute;left:0;height:15px;min-width:0;border:1px solid var(--muted);border-bottom:0;padding:0 6px;font-family:var(--sans);font-size:10.5px;font-weight:650;line-height:14px;color:var(--muted);white-space:nowrap;box-sizing:border-box} /* 좁은 괄호면 글자가 괄호 오른쪽으로 이어진다(아랫줄은 비어 있음) */
.bab-br .bab-br-den{top:0}
.bab-br .bab-br-num{top:17px;border-color:var(--ink);color:var(--ink)}
.bab-br span.is-wide{border-right-color:transparent}
.bab-segs{position:relative;display:flex;height:32px;margin-bottom:22px;background:var(--soft)}
.bab-segs i{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;font-style:normal}
.bab-segs i+i{box-shadow:inset 1px 0 0 var(--paper)}
.bab-segs i span{padding:0 4px;font-family:var(--sans);font-size:11px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.bab-segs .s-hit{background:var(--fill);color:var(--on-fill)}
.bab-segs .s-out{background:color-mix(in srgb,var(--fill) 20%,var(--paper));color:var(--ink)}
.bab-segs .s-hr,.bab-segs .s-so,.bab-segs .s-bb{background:repeating-linear-gradient(135deg,var(--soft) 0 4px,var(--paper) 4px 8px);color:var(--muted)}
.bab-exp{position:absolute;top:calc(100% - 8px);bottom:-5px;width:2px;margin-left:-1px;background:var(--ink);box-shadow:0 0 0 1px var(--paper)} /* 막대 아랫단 눈금만: 막대 글자를 가로지르지 않게 */
.bab-exp span{position:absolute;top:100%;left:0;margin-top:3px;font-family:var(--sans);font-size:10.5px;font-weight:650;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.bab-exp.is-end span{left:auto;right:0}
.bab-note{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.bab-split .v2-formula{margin-top:8px;white-space:normal;overflow-wrap:anywhere}

/* 깔때기 | 평균과 비교 */
.bab-mid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.bab-fun{display:flex;flex-direction:column;min-width:0;margin:0;padding:14px 18px}
.bab-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 8px}
.bab-hint{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.bab-funbox{position:relative;flex:1 1 auto;min-height:270px}
.bab-funbox svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.bab-plot{fill:var(--paper)}
.bab-grid{stroke:var(--soft);stroke-width:1}
.bab-tick{stroke:var(--line)}
.bab-ax{font-family:var(--sans);font-size:10px;fill:var(--muted);font-variant-numeric:tabular-nums}
.bab-axt{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--ink)}
.bab-b95{fill:color-mix(in srgb,var(--fill) 11%,transparent)}
.bab-b68{fill:color-mix(in srgb,var(--fill) 19%,transparent)}
.bab-avg{stroke:var(--ink);stroke-width:1.25}
.bab-stab{stroke:var(--muted);stroke-width:1.25;stroke-dasharray:4 4}
.bab-avgl,.bab-stabl{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.bab-dot circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.bab-dot text{font-family:var(--mono);font-size:10px;font-weight:700;fill:var(--ink)}
.bab-me circle{fill:var(--accent);stroke:var(--paper);stroke-width:2.5}
.bab-me text{font-family:var(--sans);font-size:12.5px;font-weight:800;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3.5px;stroke-linejoin:round;font-variant-numeric:tabular-nums}
.bab-me.is-out circle{fill:var(--paper);stroke:var(--accent);stroke-width:3}
.bab-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;padding:0;list-style:none}
.bab-leg li{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.bab-leg i{flex:none;display:block}
.bab-leg [data-k="95"] i{width:14px;height:10px;background:color-mix(in srgb,var(--fill) 11%,var(--paper));border:1px solid var(--soft)}
.bab-leg [data-k="68"] i{width:14px;height:10px;background:color-mix(in srgb,var(--fill) 28%,var(--paper));border:1px solid var(--soft)}
.bab-leg [data-k="avg"] i{width:16px;border-top:1.5px solid var(--ink)}
.bab-leg [data-k="stab"] i{width:0;height:12px;border-left:1.5px dashed var(--muted)}
.bab-leg [data-k="me"] i{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.bab-read{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 18px 16px;border-left:1px solid var(--soft)}
.bab-readl{display:block}
.bab-base{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bab-base select{display:block;width:100%;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)}
.bab-base .v2-input input{text-align:left}
.bab-bnote{margin:-4px 0 0}
.bab-say{margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.65;color:var(--ink)}
.bab-rows li{flex-wrap:wrap}
.bab-rows li b{margin-left:auto;text-align:right}
.bab-rows li[hidden]{display:none}
.bab-prog{display:inline-block;width:64px;height:6px;margin-right:8px;vertical-align:middle;background:var(--soft);border-radius:3px;overflow:hidden}
.bab-prog i{display:block;width:0;height:100%;background:var(--fill)}
.bab-rows em{font-style:normal}

/* 비교 목록·복사 */
.bab-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:end;padding:14px 18px 16px;border-top:1px solid var(--soft)}
.bab-items{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.bab-items li{display:flex}
.bab-item{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 4px;border:1px solid var(--soft);border-right:0;border-radius:var(--radius) 0 0 var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;color:var(--ink);transition:background var(--ease)}
.bab-item:hover,.bab-x:hover{background:var(--btn)}
.bab-item b{display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;font-family:var(--mono);font-size:10.5px;font-weight:700}
.bab-item strong{font-weight:750;font-variant-numeric:tabular-nums}
.bab-item small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bab-x{width:28px;height:32px;border:1px solid var(--soft);border-radius:0 var(--radius) var(--radius) 0;background:var(--paper);font-size:15px;line-height:1;color:var(--muted)}
.bab-items .bab-none{display:block;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.bab-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.bab-acts .v2-status{flex-basis:100%;text-align:right}
.bab-acts .v2-status:empty{display:none}

/* 움직임: 값이 바뀌면 점이 미끄러지고 막대·괄호가 늘고 줄어든다(R45). 첫 그림·크기 바뀜·동작 줄이기에서는 끔(is-anim 없음) */
.bab-work.is-anim .bab-me{transition:transform .55s cubic-bezier(.3,.7,.3,1),opacity .2s}
.bab-work.is-anim .bab-segs i{transition:flex-grow .45s ease}
.bab-work.is-anim .bab-exp{transition:left .45s ease}
.bab-work.is-anim .bab-br span{transition:width .45s ease}
.bab-work.is-anim .bab-prog i{transition:width .45s ease}

@container babw (max-width:699px){
  .bab-line{grid-template-columns:minmax(0,1fr)}
  .bab-res{order:-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:2px 12px;padding:0 0 12px;border-left:0;border-bottom:1px solid var(--line)}
  .bab-res>.v2-label{flex-basis:100%;margin:0}
  .bab-diff{margin:0}
  .bab-mid{grid-template-columns:minmax(0,1fr)}
  .bab-funbox{flex:none;height:280px;min-height:0}
  .bab-read{border-left:0;border-top:1px solid var(--soft)}
  .bab-foot{grid-template-columns:minmax(0,1fr)}
  .bab-acts{justify-content:flex-start}
  .bab-acts .v2-status{text-align:left}
}
@container babw (max-width:439px){
  .bab-score,.bab-fun,.bab-read,.bab-foot{padding-left:12px;padding-right:12px}
  .bab-fields,.bab-work[data-role="p"] .bab-fields{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bab-fields .bab-f{grid-column:span 2}
  .bab-work[data-role="b"] .bab-f[data-f="so"],.bab-work[data-role="b"] .bab-f[data-f="sf"]{grid-column:span 3}
  .bab-big{font-size:38px}
  .bab-funbox{height:250px}
}