/* 야구 스플릿 계산기 전용 CSS (2026-10-22). 기록 상자·좌우 거울판·판정·회귀·스플릿 평면·비교 목록 bps-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 bpsw — 560 이상 기록 상자는 가로 표(좌투 줄·우투 줄 × 8열), 그 아래는 세로 거울(좌투 | 항목 | 우투)이고 거울판이 기록 상자 위(결과 먼저).
   560 이상 [판정·회귀 | 평면] 두 열. 움직임(R45): 막대·타석 몫·회귀 막대 폭과 평면 점이 미끄러짐, 동작 줄이기면 끔 */
.bps-work{container:bpsw / inline-size}
.bps-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 18px 4px}
.bps-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bps-ex .v2-label{margin-right:2px}
.bps-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)}
.bps-chip:hover{background:var(--btn)}
.bps-chip .i{width:13px;height:13px}
.bps-chip[hidden]{display:none}
.bps-hint,.bps-note,.bps-sayt{word-break:keep-all;overflow-wrap:break-word}
.bps-hint,.bps-note{margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

.bps-main{display:flex;flex-direction:column}
/* 기록 상자: 좁으면 세로 거울 [좌투 | 항목 | 우투], 560 이상이면 가로 표 [상대 투수 | 8열]. 칸 폭이 50px 안팎이라 긴 값은 JS fit()이 글자를 줄인다. 탭 순서는 늘 좌투 8칸 → 우투 8칸(DOM 순서) */
.bps-box{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.bps-box .v2-status:empty{display:none}
.bps-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px 8px;align-items:center}
.bps-corner{grid-row:1;grid-column:2;text-align:center}
.bps-sh{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.bps-sh i{display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--fill);color:var(--on-fill);font-family:var(--mono);font-size:10.5px;font-style:normal;font-weight:700}
.bps-sh.is-r i{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);box-sizing:border-box}
.bps-sh.is-l{grid-row:1;grid-column:1}.bps-sh.is-r{grid-row:1;grid-column:3}
.bps-ch{grid-column:2;grid-row:calc(var(--i) + 2);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);text-align:center;line-height:1.2}
.bps-ch em{display:block;font-style:normal;font-size:10.5px;font-weight:400}
.bps-c.is-l{grid-column:1;grid-row:calc(var(--i) + 2)}.bps-c.is-r{grid-column:3;grid-row:calc(var(--i) + 2)}
@container bpsw (min-width:560px){
  .bps-grid{grid-template-columns:min-content repeat(8,minmax(0,1fr));gap:6px} /* 첫 열은 가장 긴 낱말 폭: '좌투수 상대'·'vs diestros'는 두 줄 */
  .bps-corner{grid-row:1;grid-column:1;text-align:left;line-height:1.25}
  .bps-sh{justify-content:flex-start;padding-right:4px;white-space:normal;line-height:1.2;word-break:keep-all}
  .bps-sh.is-l{grid-row:2;grid-column:1}.bps-sh.is-r{grid-row:3;grid-column:1}
  .bps-ch{grid-row:1;grid-column:calc(var(--i) + 2);align-self:end;font-size:12px}
  .bps-c.is-l{grid-row:2;grid-column:calc(var(--i) + 2)}.bps-c.is-r{grid-row:3;grid-column:calc(var(--i) + 2)}
  .bps-grid .v2-input input{padding:0 4px}
}

/* 좌우 거울판: [좌 값 | 좌 막대(가운데에서 왼쪽으로) | 항목·차이 | 우 막대(오른쪽으로) | 우 값] */
.bps-mir{margin:0;padding:14px 18px 14px;border-top:1px solid var(--soft);min-width:0}
.bps-mh{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px;margin-bottom:6px}
.bps-mh>.v2-label{text-align:center}
.bps-mside{display:flex;flex-direction:column;gap:1px;min-width:0;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.bps-mside b{font-size:13px;font-weight:700;color:var(--ink)}
.bps-mside.is-r{align-items:flex-end;text-align:right}
.bps-share{display:flex;height:18px;margin:0 0 6px;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.bps-share i{display:flex;align-items:center;min-width:0;overflow:hidden;height:100%;padding:0 6px;box-sizing:border-box;font-family:var(--sans);font-size:10.5px;font-style:normal;font-weight:700;white-space:nowrap;transition:width .5s cubic-bezier(.3,.7,.3,1)}
.bps-share i.is-l{background:var(--fill);color:var(--on-fill)}
.bps-share i.is-r{justify-content:flex-end;background:color-mix(in srgb, var(--ink) 16%, var(--paper));color:var(--ink)}
.bps-row{display:grid;grid-template-columns:52px minmax(0,1fr) 96px minmax(0,1fr) 52px;align-items:center;column-gap:8px;padding:8px 0;border-top:1px solid var(--soft)}
.bps-row:first-of-type{border-top:0}
.bps-v{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.bps-v.is-l{text-align:right}
.bps-tr{position:relative;height:14px;border-radius:3px;background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.bps-tr i{position:absolute;top:0;bottom:0;width:0;border-radius:3px;background:color-mix(in srgb, var(--ink) 30%, var(--paper));transition:width .5s cubic-bezier(.3,.7,.3,1),background .25s ease}
.bps-tr.is-l i{right:0}.bps-tr.is-r i{left:0}
.bps-tr.is-hi i{background:var(--ink)}
.bps-tr u{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dotted var(--ink);transition:left .5s ease,right .5s ease}
.bps-tr.is-l u{right:var(--t,0%);margin-right:-1px}.bps-tr.is-r u{left:var(--t,0%);margin-left:-1px}
.bps-tr.is-over::after{position:absolute;top:50%;transform:translateY(-50%);font-size:9px;line-height:1;color:var(--ink)}
.bps-tr.is-l.is-over::after{content:"◂";left:-9px}.bps-tr.is-r.is-over::after{content:"▸";right:-9px}
.bps-d{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;text-align:center}
.bps-k{font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted)}
.bps-d b{font-family:var(--sans);font-size:14px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bps-d.to-l b::before{content:"◀ ";font-size:.7em;vertical-align:.1em}.bps-d.to-r b::after{content:" ▶";font-size:.7em;vertical-align:.1em}
.bps-row.is-key .bps-v{font-size:18px;font-weight:800}
.bps-row.is-key .bps-k{color:var(--ink)}
.bps-row.is-key .bps-d b{font-size:19px;font-weight:800;color:var(--accent)}
.bps-leg{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.bps-leg li{display:inline-flex;align-items:center;gap:6px}
.bps-leg i{display:inline-block;width:16px;height:10px;border-radius:2px;background:var(--ink)}
.bps-leg [data-k="lg"] i{width:0;height:14px;border-radius:0;background:none;border-left:2px dotted var(--ink)}
@container bpsw (max-width:559px){
  .bps-mir{order:-1;border-top:0}
  .bps-row{grid-template-columns:46px minmax(0,1fr) 70px minmax(0,1fr) 46px;column-gap:6px}
  .bps-v{font-size:14px}.bps-row.is-key .bps-v{font-size:15.5px}.bps-row.is-key .bps-d b{font-size:16px}
}

/* 판정·합계·표본 회귀 | 스플릿 평면 */
.bps-read{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.bps-say{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 18px 16px}
.bps-sayt{margin:0;font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1.6;color:var(--ink)}
.bps-tot{margin:0;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bps-tot:empty{display:none}
.bps-reg{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--soft)}
.bps-regh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin:0}
.bps-regv{font-family:var(--sans);font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bps-regv.is-empty{color:var(--muted);opacity:.6}
.bps-regb{height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.bps-regb i{display:block;width:0;height:100%;background:var(--ink);transition:width .5s cubic-bezier(.3,.7,.3,1)}
.bps-reg .v2-formula{margin:0;white-space:normal;overflow-wrap:anywhere}
.bps-plane{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:14px 18px 12px;border-top:1px solid var(--soft)}
.bps-plane svg{display:block;width:100%;max-width:400px;height:auto;margin:0 auto}
@container bpsw (min-width:560px){
  .bps-read{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .bps-plane{border-top:0;border-left:1px solid var(--soft)}
}
.bps-bg{fill:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.bps-gl{stroke:var(--soft);stroke-width:1}
.bps-ax{font-family:var(--sans);font-size:10px;fill:var(--muted);font-variant-numeric:tabular-nums}
.bps-axt{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--ink)}
.bps-diag{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 4}
.bps-zone{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--muted)}
.bps-lgp path{stroke:var(--muted);stroke-width:1.6;fill:none}
.bps-lgp text{font-family:var(--sans);font-size:9.5px;font-weight:600;fill:var(--muted)}
.bps-lgp.is-cur path{stroke:var(--ink);stroke-width:2.2}
.bps-lgp.is-cur text{fill:var(--ink);font-weight:750}
.bps-lst circle{fill:var(--paper);stroke:var(--muted);stroke-width:1.4}
.bps-lst text{font-family:var(--sans);font-size:9px;font-weight:750;fill:var(--ink)}
.bps-me{transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.bps-me circle{fill:var(--ink);stroke:var(--paper);stroke-width:2}
.bps-me.is-out circle{stroke:var(--accent)}
.bps-est{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:2.5 2;transition:cx .5s cubic-bezier(.3,.7,.3,1),cy .5s cubic-bezier(.3,.7,.3,1)}
.bps-arw{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:3 3}
.bps-arwh{fill:var(--muted)}
#bpsSvg.is-none .bps-me,#bpsSvg.is-none .bps-est,#bpsSvg.is-none .bps-arw{display:none}
.bps-pleg{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.bps-pleg li{display:inline-flex;align-items:center;gap:6px}
.bps-pleg i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.bps-pleg [data-k="est"] i{background:none;border:1.6px dashed var(--ink);box-sizing:border-box}
.bps-pleg [data-k="lg"] i{position:relative;border-radius:0;background:none;width:10px;height:10px}
.bps-pleg [data-k="lg"] i::before,.bps-pleg [data-k="lg"] i::after{content:"";position:absolute;left:4px;top:-1px;width:2px;height:12px;background:var(--muted);transform:rotate(45deg)}
.bps-pleg [data-k="lg"] i::after{transform:rotate(-45deg)}

/* 비교 목록: [번호 | 이름·손·타석 | 좌투 OPS | 우투 OPS | 차이·추정 | ×], 좁으면 값 줄을 아래로 */
.bps-list{display:flex;flex-direction:column;gap:8px;padding:14px 18px 14px;border-top:1px solid var(--soft)}
.bps-lh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px}
.bps-lh>.v2-label{align-self:center;font-size:12.5px;color:var(--ink);font-weight:700}
.bps-add{display:flex;align-items:flex-end;gap:8px;flex:1 1 280px;max-width:420px}
.bps-add .v2-f{flex:1 1 auto}
.bps-add .v2-btn{flex:0 0 auto;white-space:nowrap}
.bps-add .v2-input input{text-align:left}
.bps-ul{list-style:none;margin:0;padding:0}
.bps-ul li{display:grid;grid-template-columns:22px minmax(0,1.5fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,1.3fr) 30px;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px solid var(--soft);font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.bps-ul small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.bps-ul em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted)}
.bps-ln{display:grid;place-items:center;width:20px;height:20px;border:1.4px solid var(--muted);border-radius:50%;box-sizing:border-box;font-size:10px;font-weight:750}
.bps-nm{min-width:0}.bps-nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bps-x{width:28px;height:28px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-size:15px;line-height:1;color:var(--muted)}
.bps-x:hover{background:var(--btn);color:var(--ink)}
.bps-list>.bps-chip{align-self:flex-start}
@container bpsw (max-width:519px){
  .bps-ul li{grid-template-columns:22px repeat(3,minmax(0,1fr)) 30px;grid-template-areas:"n nm nm nm x" ". l r d d"}
  .bps-ln{grid-area:n}.bps-nm{grid-area:nm}.bps-x{grid-area:x}
  .bps-ul li>.bps-lv:nth-child(3){grid-area:l}.bps-ul li>.bps-lv:nth-child(4){grid-area:r}.bps-ld{grid-area:d}
}
.bps-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--soft)}
@media (prefers-reduced-motion:reduce){
  .bps-tr i,.bps-tr u,.bps-share i,.bps-regb i,.bps-me,.bps-est{transition:none}
}