/* 야구 RBI 효율성 계산기 전용 CSS (2026-10-23). 머리 줄·결과 띠(타점 효율 | 타점 흐름 계단)·주자 상황판(8칸, 칸 안 줄은 subgrid)·기회 × 타격 평면·읽기 줄 rbe-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 rbew — 680 이상 결과 띠 두 단, 760 이상 [평면 | 읽기 줄], 680 아래 머리 줄 두 줄. 상황판 열 수는 폼 부모 컨테이너 v2in(테마)으로 640 이상 4열, 그 아래 2열. */
.rbe-work{container:rbew / inline-size}
.rbe-top{display:grid;grid-template-columns:auto minmax(92px,auto) minmax(0,1fr) auto;align-items:end;gap:10px 12px;padding:14px 18px 12px}
.rbe-fl{min-width:0}
.rbe-fl>.v2-label{display:block;margin:0 0 5px}
.rbe-fl .v2-seg{flex-wrap:nowrap}
.rbe-fl .v2-seg button{height:var(--v2-ctl,42px);padding:0 14px;font-size:13px}
.rbe-top select{display:block;width:100%;height:var(--v2-ctl,42px);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;text-overflow:ellipsis}
.rbe-pl{min-width:0}
.rbe-rs .v2-btn{white-space:nowrap}
.rbe-rs .v2-btn .i{width:14px;height:14px}
.rbe-hint{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

/* 결과 띠: 큰 타점 효율 · 실제/기대/차이 · 주자 타점률 · 누상 주자 · 판정 | 타점 흐름 계단 */
.rbe-res{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"sum" "say" "flow";border-top:1px solid var(--soft)}
.rbe-sum{grid-area:sum;display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 18px 12px}
.rbe-resh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0}
.rbe-ctx{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.rbe-big{display:block;font-family:var(--sans);font-size:58px;font-weight:800;line-height:1.02;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rbe-big.is-empty{color:var(--muted);opacity:.55}
.rbe-vs{margin:0;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rbe-vs:empty{display:none}
.rbe-kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 0}
.rbe-kpi>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:7px 11px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.rbe-kpi dt{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted)}
.rbe-kpi dd{margin:0;font-family:var(--sans);font-size:17px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.rbe-kpi dd small{display:block;margin-top:1px;font-size:11.5px;font-weight:500;line-height:1.35;color:var(--muted)}
.rbe-say{grid-area:say;margin:0;padding:0 18px 12px;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink)}
.rbe-say:empty{display:none}
.rbe-flow{grid-area:flow;min-width:0;margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.rbe-fh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin-bottom:10px}
.rbe-wf{display:grid;grid-template-columns:fit-content(9.5em) minmax(0,1fr) auto;column-gap:10px;row-gap:10px;margin:0;padding:0;list-style:none}
.rbe-wf li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}
.rbe-wl{min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.rbe-wt{position:relative;display:block;height:16px;border-radius:3px;background:var(--wash)}
.rbe-wt b{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:3px;background:var(--ink);transition:left .5s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1)}
.rbe-wf [data-k="base"] .rbe-wt b{background:var(--muted)}
.rbe-wf li.is-neg .rbe-wt b{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--muted)}
.rbe-wf [data-k="rbi"]{padding-top:10px;border-top:1px solid var(--soft)}
.rbe-wf [data-k="rbi"] .rbe-wt b{background:var(--accent)}
.rbe-wv{min-width:3.4em;font-family:var(--sans);font-size:14px;font-weight:750;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* 주자 상황판: 칸 = 다이아몬드·이름 / 타석·타점 / 타석당 타점 막대(가운데 눈금 = 리그) / 리그·기대·차이. 칸 안 네 줄은 subgrid라 이웃 칸과 높이가 맞는다 */
.rbe-bw{border-top:1px solid var(--soft)}
.rbe-board{display:flex;flex-direction:column;gap:10px;margin:0;padding:12px 18px 14px}
.rbe-bh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0}
:lang(ko) .rbe-bh .rbe-hint{word-break:keep-all}
.rbe-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
.rbe-t{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:7px;min-width:0;margin:0 0 10px;padding:10px 10px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.rbe-th{display:flex;align-items:center;gap:7px;min-width:0;margin:0;font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.25;color:var(--ink)}
.rbe-dia{flex:0 0 auto;width:22px;height:22px}
.rbe-dia path{fill:none;stroke:var(--muted);stroke-width:1.1}
.rbe-dia rect{fill:var(--card);stroke:var(--muted);stroke-width:1.2}
.rbe-dia rect.on{fill:var(--ink);stroke:var(--ink)}
.rbe-dia rect.hp{fill:var(--muted);stroke:none}
.rbe-ti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.rbe-ti .v2-input input{padding:0 9px}
.rbe-tb{display:flex;align-items:center;gap:8px;min-width:0}
.rbe-bar{position:relative;flex:1 1 auto;height:8px;border-radius:4px;background:var(--wash)}
.rbe-bar b{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:4px;background:var(--muted);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.rbe-t.is-up .rbe-bar b{background:var(--ink)}
.rbe-bar u{position:absolute;top:-3px;bottom:-3px;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);opacity:.75}
.rbe-rt{flex:0 0 auto;min-width:3em;font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums lining-nums}
.rbe-tx{margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.rbe-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px}
.rbe-tot{flex:1 1 240px;min-width:0;margin:0 0 11px;font-family:var(--sans);font-size:13px;font-weight:650;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}
.rbe-hr{flex:0 0 170px}
.rbe-hr em{margin-left:6px;font-style:normal;font-weight:400;color:var(--muted)}
.rbe-board>.v2-status:empty{display:none}
@container v2in (min-width:640px){
  .rbe-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* 기회 효과 × 타격 효과 평면 | 읽기 줄 */
.rbe-low{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.rbe-plane{min-width:0;margin:0;padding:12px 18px 14px}
.rbe-ph{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:6px}
.rbe-svgbox{position:relative;width:100%;height:280px}
.rbe-svgbox svg{position:absolute;top:0;left:0;display:block;overflow:visible}
.rbe-ax line{stroke:var(--soft);stroke-width:1}
.rbe-ax line.rbe-zero{stroke:var(--muted);stroke-width:1.3}
.rbe-ax text{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.rbe-ax text.rbe-axl,.rbe-axl{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3px}
.rbe-q text{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:var(--muted)}
.rbe-dots circle{fill:var(--muted);fill-opacity:.42;stroke:var(--muted);stroke-width:1.1}
.rbe-dots circle.is-me{fill:var(--card);fill-opacity:1;stroke:var(--accent)}
.rbe-mk{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.rbe-mk circle{fill:var(--accent);stroke:var(--card);stroke-width:2.5}
.rbe-mk.is-out circle{fill:var(--card);stroke:var(--accent);stroke-width:2}
.rbe-mkl{font-family:var(--sans);font-size:12.5px;font-weight:750;fill:var(--accent);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3.5px}
.rbe-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.rbe-leg li{display:inline-flex;align-items:center;gap:5px}
.rbe-leg i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;box-sizing:border-box}
.rbe-leg [data-k="me"] i{width:11px;height:11px;background:var(--accent)}
.rbe-leg [data-k="p"] i{border:1.1px solid var(--muted);background:color-mix(in srgb,var(--muted) 42%,transparent)}
.rbe-leg [data-k="z"] i{width:14px;height:0;border-radius:0;border-top:1.3px solid var(--muted)}
.rbe-rows{padding:0 18px 4px;border-top:1px solid var(--soft)}
.rbe-rows li:first-child{border-top:0}
.rbe-rows li span{flex:0 0 auto;max-width:42%}
.rbe-rows li b{min-width:0;white-space:normal;text-align:right}
.rbe-formula{margin:10px 18px 0;white-space:pre-line;overflow-wrap:anywhere}
.rbe-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:12px 18px 16px;border-top:1px solid var(--soft)}

@container rbew (min-width:680px){
  .rbe-res{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"sum flow" "say say"}
  .rbe-flow{padding-top:14px;border-top:0;border-left:1px solid var(--soft)}
  .rbe-say{padding:11px 18px 13px;border-top:1px solid var(--soft)}
}
@container rbew (min-width:760px){
  .rbe-low{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .rbe-rows{padding:6px 18px 8px;border-top:0;border-left:1px solid var(--soft)}
  .rbe-rows li{flex-direction:column;align-items:flex-start;gap:3px}
  .rbe-rows li span{max-width:none}
  .rbe-rows li b{text-align:left}
}
/* 좁으면 [리그 | 시즌 | 비우기] 위, 선수 불러오기는 아래 한 줄 전체(id 'Choi Hyoung Woo (Samsung) · 106 RBI'가 143px 칸에서 잘림, 검토 R3) */
@container rbew (max-width:679px){
  .rbe-top{grid-template-columns:auto minmax(0,1fr) auto}
  .rbe-yr select{max-width:170px}
  .rbe-pl{grid-column:1/-1;grid-row:2}
}
@container rbew (max-width:439px){
  .rbe-big{font-size:50px}
  .rbe-rows li{flex-direction:column;align-items:flex-start;gap:3px}
  .rbe-rows li span{max-width:none}
  .rbe-rows li b{text-align:left}
}
@media (prefers-reduced-motion:reduce){.rbe-mk,.rbe-bar b,.rbe-wt b{transition:none}}