/* wOBA 계산기 전용 CSS (2026-10-22). 머리 줄·결과·계산서(입력칸 = 식의 각 줄)·출루율 × wOBA 평면·읽기 줄 wb-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 wbw — 700 이상 [계산서 | 결과 위·평면 아래], 780 이상 읽기 줄 두 단. 그 아래는 한 열(결과 → 계산서 → 평면). */
.wb-work{container:wbw / inline-size}
.wb-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 14px;padding:14px 18px 6px}
.wb-base{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;flex:0 0 auto}
.wb-fl{min-width:0}
.wb-fl>.v2-label{display:block;margin:0 0 5px}
.wb-fl .v2-seg{flex-wrap:nowrap}
.wb-fl .v2-seg button{height:var(--v2-ctl,42px);padding:0 14px;font-size:13px}
.wb-yr select{display:block;width:100%;min-width:96px;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}
.wb-ex{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-end;gap:6px;flex:1 1 330px;min-width:0}
.wb-ex .v2-label{margin-right:2px}
.wb-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)}
.wb-chip:hover{background:var(--btn)}
.wb-chip .i{width:13px;height:13px}
.wb-hint{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

.wb-main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"res" "sheet" "plane";border-top:1px solid var(--soft);margin-top:8px}

/* 결과: 큰 wOBA · 리그 평균 대비 · wRAA·wRC · 판정 */
.wb-res{grid-area:res;display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 18px 12px}
.wb-resh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0}
.wb-resh .v2-label{font-family:var(--mono);font-weight:700}
.wb-ctx{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.wb-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}
.wb-big.is-empty{color:var(--muted);opacity:.55}
.wb-vs{margin:0;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.wb-vs:empty{display:none}
.wb-kpi{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.wb-kpi>div{display:flex;align-items:baseline;gap:7px;padding:6px 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.wb-kpi dt{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted)}
.wb-kpi dd{margin:0;font-family:var(--sans);font-size:17px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.wb-kpi dd small{margin-left:3px;font-size:11.5px;font-weight:500;color:var(--muted)}
.wb-say{margin:4px 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink)}
.wb-say:empty{display:none}

/* 계산서: 라벨 | 입력 | 횟수 × 가중치 = 점수 + 기여 막대. 줄은 subgrid라 세로선이 맞는다 */
.wb-sheet{grid-area:sheet;container:wbs / inline-size;display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.wb-sh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0}
.wb-grid{display:grid;grid-template-columns:fit-content(10.5em) 92px minmax(0,1fr);column-gap:12px}
.wb-r{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;padding:2px 0}
.wb-r[data-k="hbp"]{padding-bottom:6px}
.wb-r[data-k="ab"]{padding-bottom:4px;border-bottom:1px dashed var(--soft);margin-bottom:4px}
.wb-l{min-width:0;font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.25;color:var(--ink)}
.wb-l i{margin-left:5px;font-family:var(--mono);font-size:10.5px;font-style:normal;font-weight:600;color:var(--muted)}
.wb-l em{display:block;font-size:11px;font-style:normal;font-weight:400;color:var(--muted)}
.wb-in input{padding:0 9px}
.wb-r.is-invalid .v2-input{border-color:var(--accent)}
.wb-c{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;row-gap:4px;min-width:0}
.wb-x{min-width:0;font-family:var(--sans);font-size:12px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
.wb-p{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}
.wb-r[data-kind="d"] .wb-p,.wb-r[data-kind="x"] .wb-p,.wb-r[data-kind="p"] .wb-p{font-size:12.5px;font-weight:600;color:var(--muted)}
.wb-bar{grid-column:1/-1;position:relative;display:block;height:5px;border-radius:3px;background:color-mix(in srgb, var(--wash) 70%, var(--paper));box-shadow:inset 0 0 0 1px var(--soft)}
.wb-bar b{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:3px;background:var(--ink);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.wb-r[data-k="bb"] .wb-bar b,.wb-r[data-k="hbp"] .wb-bar b{background:var(--muted)}
.wb-tot{padding:7px 0;border-top:1px solid var(--soft)}
.wb-tot .wb-l{font-weight:700}
.wb-tc{grid-column:2/-1;display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;min-width:0}
.wb-tc .wb-x{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
:lang(ko) .wb-tc .wb-x{word-break:keep-all}
.wb-tc .wb-p{font-size:15px}
.wb-fin{border-top:1px solid var(--line)}
.wb-fin .wb-l{font-family:var(--mono)}
.wb-fin .wb-p{font-size:18px;font-weight:800}
.wb-sheet>.v2-status:empty{display:none}

/* 출루율 × wOBA 평면: 가로 출루율, 세로 wOBA, 점선 대각 = 같은 값, 점 = 2026 규정타석 타자, 주황 = 이 기록 */
.wb-plane{grid-area:plane;min-width:0;margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.wb-ph{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:6px}
.wb-svgbox{position:relative;width:100%;height:280px}
.wb-svgbox svg{position:absolute;top:0;left:0;display:block;overflow:visible}
.wb-ax line{stroke:var(--soft);stroke-width:1}
.wb-ax line.wb-base0{stroke:var(--muted)}
.wb-ax text{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.wb-ax text.wb-axl{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--ink)}
.wb-diag{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:5 4}
.wb-avg{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:2 3}
.wb-avgl{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3px}
.wb-dots circle{fill:var(--muted);fill-opacity:.45;stroke:var(--muted);stroke-width:1.1;transition:fill .3s ease,fill-opacity .3s ease,stroke .3s ease}
.wb-dots circle.is-hi{fill:var(--ink);fill-opacity:1;stroke:var(--ink)}
.wb-dots circle.is-lo{fill:var(--card);fill-opacity:1}
.wb-dots circle.is-eq{fill:var(--accent);fill-opacity:1;stroke:var(--accent)}
.wb-mk{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.wb-mk circle{fill:var(--accent);stroke:var(--card);stroke-width:2.5}
.wb-mk.is-out circle{fill:var(--card);stroke:var(--accent);stroke-width:2}
.wb-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}
.wb-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)}
.wb-leg li{display:inline-flex;align-items:center;gap:5px}
.wb-leg li[hidden]{display:none}
.wb-leg i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;box-sizing:border-box}
.wb-leg [data-k="me"] i{width:11px;height:11px;background:var(--accent)}
.wb-leg [data-k="hi"] i{background:var(--ink)}
.wb-leg [data-k="lo"] i{border:1.2px solid var(--muted);background:var(--card)}
.wb-leg [data-k="eq"] i{width:14px;height:0;border-radius:0;border-top:1.2px dashed var(--muted)}
.wb-leg [data-k="avg"] i{width:14px;height:0;border-radius:0;border-top:1.2px dotted var(--ink)}
.wb-near{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.wb-near:empty{display:none}

/* 읽기 줄 · 식 · 복사 */
.wb-rows{padding:0 18px;border-top:1px solid var(--soft)}
.wb-rows li:first-child{border-top:0}
.wb-rows li span{flex:0 1 auto;min-width:0}
.wb-rows li b{white-space:normal;text-align:right}
:lang(ja) .wb-rows li b{padding-right:4px}
.wb-formula{margin:10px 18px 0;white-space:pre-line;overflow-wrap:anywhere}
.wb-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 16px;margin-top:12px;border-top:1px solid var(--soft)}

@container wbw (min-width:700px){
  .wb-ex{justify-content:flex-end}
  .wb-main{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);grid-template-areas:"sheet res" "sheet plane";grid-template-rows:auto 1fr}
  .wb-sheet{border-top:0;border-right:1px solid var(--soft)}
  .wb-res{padding-top:14px}
}
@container wbw (min-width:780px){
  .wb-rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px}
  .wb-rows li:nth-child(2){border-top:0}
}
@container wbw (max-width:439px){
  .wb-big{font-size:50px}
}
/* 계산서 폭 기준(두 열 배치에서도 계산서가 좁으면): 라벨 칸 상한·입력 폭을 줄여 계산 칸을 남긴다 */
@container wbs (max-width:430px){
  .wb-grid{grid-template-columns:fit-content(7.4em) 72px minmax(0,1fr);column-gap:9px}
  .wb-x{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.wb-mk,.wb-bar b,.wb-dots circle{transition:none}}