/* 야구 출루율 계산기 전용 CSS (2026-10-23). 분수 입력판·100타석 출루판·줄 세우기·읽기 줄 ob-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 obw — 560 이상 [분수 입력판 | = 출루율](분자·분모 같은 4열이라 볼넷·사구가 위아래로 맞음), 620 이상 [100타석 판 | 판정·목표·읽기 줄].
   그 아래는 결과 → 분자 3칸 → 분모 [타수 + 볼넷 + 사구 + 희생플라이](비친 값은 좁은 칸) → 판 → 판정 한 열 */
.ob-work{container:obw / inline-size}
.ob-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 18px 4px}
.ob-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ob-ex .v2-label{margin-right:2px}
.ob-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);white-space:nowrap;transition:background var(--ease)}
.ob-chip:hover{background:var(--btn)}
.ob-chip .i{width:13px;height:13px}

/* 분수 입력판 — 좁은 화면: 출루율(결과)이 위 */
.ob-frac{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"res" "eq" "hint";gap:10px;padding:10px 18px 0}
.ob-res{grid-area:res;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.ob-res .v2-label{flex:0 0 auto}
.ob-big{font-family:var(--sans);font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.ob-big.is-empty{color:var(--muted);opacity:.6}
.ob-per{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ob-who{flex-basis:100%;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--accent)}
.ob-who:empty{display:none}
.ob-eq{grid-area:eq;min-width:0}
.ob-num,.ob-den{display:grid;align-items:end;min-width:0}
.ob-num{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr)}
.ob-den{grid-template-columns:minmax(0,1fr) 16px max-content 16px max-content 16px minmax(0,1fr)}
.ob-op{display:flex;align-items:center;justify-content:center;height:var(--v2-ctl,42px);font-family:var(--sans);font-size:15px;font-weight:700;color:var(--muted)}
.ob-note{display:none;margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.ob-bar{height:0;margin:10px 0 9px;border-top:2px solid var(--ink)}
.ob-echo .v2-label{white-space:nowrap}
.ob-ev{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:46px;height:var(--v2-ctl,42px);padding:0 10px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--soft));border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 6%,var(--paper));font-family:var(--sans);font-size:15px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-ev.is-bad{color:var(--accent)}
.ob-frac .v2-f.is-invalid .v2-input,.ob-goal .v2-f.is-invalid .v2-input{border-color:var(--accent)}
.ob-hint{grid-area:hint;margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.ob-work>.v2-status{display:block;margin:8px 18px 0}
.ob-work>.v2-status:empty{display:none}

/* 본판: 좁으면 한 열 */
.ob-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:14px;padding:14px 18px;border-top:1px solid var(--soft)}
.ob-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0 0 8px}
.ob-sub{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.ob-pa{margin:0;min-width:0}
.ob-pabox svg{display:block;width:100%;max-width:400px;height:auto;margin:0 auto}
.ob-pabox rect{fill:var(--paper);stroke:var(--soft);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .32s ease,stroke .32s ease;transition-delay:var(--d,0ms)}
.ob-pabox rect.is-h{fill:var(--accent);stroke:var(--accent)}
.ob-pabox rect.is-bb{fill:color-mix(in srgb,var(--accent) 52%,var(--paper));stroke:color-mix(in srgb,var(--accent) 52%,var(--paper))}
.ob-pabox rect.is-hbp{fill:color-mix(in srgb,var(--accent) 22%,var(--paper));stroke:var(--accent)}
.ob-pabox rect.is-sf{stroke:var(--muted);stroke-dasharray:2 2}
.ob-pabox rect.is-none{opacity:.55}
.ob-avgline{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.ob-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.ob-leg li{display:inline-flex;align-items:center;gap:5px;min-width:0}
.ob-leg b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ob-leg i{flex:0 0 auto;width:10px;height:10px;border-radius:2px;box-sizing:border-box}
.ob-pa .ob-leg{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:3px 12px}
.ob-pa .ob-leg li{display:grid;grid-template-columns:10px minmax(0,1fr) max-content;column-gap:6px}
.ob-pa .ob-leg [data-k="h"] i{background:var(--accent)}
.ob-pa .ob-leg [data-k="bb"] i{background:color-mix(in srgb,var(--accent) 52%,var(--paper))}
.ob-pa .ob-leg [data-k="hbp"] i{background:color-mix(in srgb,var(--accent) 22%,var(--paper));border:1px solid var(--accent)}
.ob-pa .ob-leg [data-k="out"] i{background:var(--paper);border:1px solid color-mix(in srgb,var(--muted) 60%,var(--soft))} /* 다크에서도 보이게 */
.ob-pa .ob-leg [data-k="sf"] i{background:var(--paper);border:1px dashed var(--muted)}
.ob-pa .ob-leg [data-k="avg"] i{background:none;border:1.6px dashed var(--ink)}

.ob-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.ob-say{margin:0;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink)}
.ob-say:empty{display:none}
.ob-say b{font-weight:750}
.ob-warn{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--muted)}
.ob-goal{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);align-items:end;gap:6px 14px;padding:12px 14px;border-radius:var(--radius)}
.ob-gout{margin:0;padding-bottom:3px;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.ob-rows{margin:0;padding:0}
.ob-rows li span{flex:0 1 auto;min-width:0}
.ob-rows li b{white-space:normal;text-align:right}
:lang(ja) .ob-rows li b{padding-right:4px} /* 전각 닫는 괄호가 칸 밖으로 나오지 않게 */
:lang(ko) .ob-rows li,:lang(ko) .ob-near,:lang(ko) .ob-say,:lang(ko) .ob-gout,:lang(ko) .ob-hint,:lang(ko) .ob-note{word-break:keep-all}
.ob-rows li span,.ob-rows li b,.ob-say,.ob-gout,.ob-per{text-wrap:pretty} /* 줄 끝에 한두 글자만 남지 않게(ja '出/塁'·en 'per 100 / PA') */ /* '사/이'·'최형/우'처럼 낱말 가운데서 끊기지 않게 */
.ob-rows li:first-child{border-top:0}

/* 규정타석 타자 줄 세우기 */
.ob-strip{margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.ob-stbox{width:100%;overflow:hidden}
.ob-stbox svg{display:block;max-width:100%;height:auto}
.ob-ax line{stroke:var(--soft);stroke-width:1}
.ob-ax text{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.ob-stavg{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 3}
.ob-dots circle{fill:var(--card);stroke:var(--muted);stroke-width:1.1;transition:fill .3s ease,stroke .3s ease}
.ob-dots circle.is-hi{fill:var(--ink);stroke:var(--ink)}
.ob-dots circle.is-eq{fill:var(--accent);stroke:var(--accent)}
.ob-me{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ob-me line{stroke:var(--accent);stroke-width:2}
.ob-me path{fill:var(--accent)}
.ob-me text{font-family:var(--sans);font-size:11.5px;font-weight:800;fill:var(--accent);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3px}
.ob-sleg [data-k="me"] i{width:3px;height:12px;border-radius:0;background:var(--accent)}
.ob-sleg [data-k="hi"] i{border-radius:50%;background:var(--ink)}
.ob-sleg [data-k="lo"] i{border-radius:50%;border:1.1px solid var(--muted);background:var(--card)}
.ob-sleg [data-k="avg"] i{width:0;height:12px;border-radius:0;border-left:1.4px dashed var(--ink)}
.ob-near{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.ob-near:empty{display:none}

/* 식 · 복사 */
.ob-foot{padding:4px 18px 16px;border-top:1px solid var(--soft)}
.ob-foot .v2-formula{margin-top:10px;white-space:normal;overflow-wrap:anywhere}
.ob-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

/* 분수 한 줄: [분자 / 분모 4열 | = 출루율] — 볼넷·사구가 분자와 분모에서 같은 열 */
@container obw (min-width:560px){
  .ob-frac{grid-template-columns:minmax(0,1fr) fit-content(30%);grid-template-areas:"eq res" "hint hint";column-gap:20px;align-items:center;padding-top:12px}
  .ob-res{flex-direction:column;align-items:flex-end;gap:4px;padding:6px 0 6px 18px;border-left:1px solid var(--soft)}
  .ob-big{font-size:44px}.ob-big.is-long{font-size:38px}
  .ob-per,.ob-who{text-align:right} /* 결과 열은 30%까지, 긴 언어의 100타석 문구는 줄바꿈(분수 칸이 눌리지 않게) */
  .ob-who{flex-basis:auto}
  .ob-num,.ob-den{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr)}
  .ob-num .ob-note{display:block;grid-column:7;align-self:center;padding-left:4px}
  .ob-ev{width:100%}
}
/* 본판 두 열: [100타석 판 | 판정·목표·읽기 줄] */
@container obw (min-width:620px){
  .ob-main{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:start}
}
@container obw (min-width:800px){.ob-main{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}} /* 넓으면 판이 너무 커져 오른쪽 아래가 비지 않게 */
@media (hover:none){.ob-strip .ob-hov{display:none}} /* 마우스가 없는 기기에는 '올리면 이름' 안내를 숨김 */
@media (prefers-reduced-motion:reduce){.ob-pabox rect,.ob-me,.ob-dots circle{transition:none}}