/* 야구 매직 넘버 계산기 전용 CSS (2026-10-22). 답 띠·매직 공·승률 사다리·경우의 수 4칸 bmc-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 bmcw(350~908px) — 700 이상 팀 줄 한 줄 [우리 | 팀 | 승 | 패 | 무 | 승률 | 가능 승률 막대 | 매직·탈락 | ×],
   600~699 [우리 | 팀 | 승 | 패 | 무 | 승률 | 매직·탈락 | ×] 아래 전폭 막대, 600 미만 [우리 | 팀 | 승 | 패 | 무 | ×] / [승률 | 막대 | 매직·탈락](.bmc-viz 격자).
   아래 [경우의 수 | 읽기 줄]은 600 이상 두 열 */
.bmc-work{container:bmcw / inline-size}
.bmc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 18px 4px}
.bmc-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bmc-ex .v2-label{margin-right:2px}
.bmc-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);cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.bmc-chip:hover{background:var(--btn)}
.bmc-chip[aria-pressed="true"]{border-color:var(--ink);background:var(--btn)}
.bmc-chip:disabled{opacity:.45;cursor:default}
.bmc-chip .i{width:13px;height:13px}
.bmc-hint{margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

/* 답 띠: [매직넘버 | 문장·공] / [자력 1위 | 탈락 넘버 | 게임차] */
.bmc-ans{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;align-items:center;padding:12px 18px 14px}
.bmc-mn{display:flex;flex-direction:column;align-items:flex-start;min-width:96px}
.bmc-big{display:block;font-family:var(--sans);font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;margin:6px 0 4px}
.bmc-big.is-empty{color:var(--muted);opacity:.6}
.bmc-big.is-long{font-size:34px;margin:12px 0 8px}
.bmc-vs{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink)}
.bmc-mid{display:flex;flex-direction:column;gap:8px;min-width:0}
.bmc-say{margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.55;color:var(--ink)}
.bmc-balls{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:18px}
.bmc-balls.is-none{display:none}
.bmc-ball{position:relative;flex:0 0 auto;width:17px;height:17px;border:1.5px solid var(--line);border-radius:50%;box-sizing:border-box;overflow:hidden;background:var(--paper);font-style:normal}
.bmc-ball::before,.bmc-ball::after{content:"";position:absolute;top:1px;bottom:1px;width:9px;border:1.5px solid var(--accent);border-radius:50%;box-sizing:border-box}
.bmc-ball::before{left:-6px;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent}
.bmc-ball::after{right:-6px;border-right-color:transparent;border-top-color:transparent;border-bottom-color:transparent}
.bmc-ball.is-in{animation:bmcIn .38s cubic-bezier(.2,.8,.3,1.2) both}
.bmc-ball.is-out{animation:bmcOut .5s cubic-bezier(.4,0,.7,.2) forwards}
@keyframes bmcIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bmcOut{to{transform:translate(26px,-30px) rotate(200deg) scale(.6);opacity:0}}
.bmc-more{font-family:var(--sans);font-size:12px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.bmc-more:empty{display:none}
.bmc-kpi{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--soft)}
.bmc-kpi li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px 0 0}
.bmc-kpi li+li{padding-left:12px;border-left:1px solid var(--soft)}
.bmc-kpi span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.bmc-kpi b{font-family:var(--sans);font-size:19px;font-weight:800;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}
.bmc-kpi small{font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}

/* 승률 사다리 */
.bmc-lad{margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.bmc-hd,.bmc-row{display:grid;grid-template-columns:26px minmax(90px,1fr) 46px 46px 42px 56px minmax(140px,2fr) 66px 22px;grid-template-areas:"me nm w l t st tr tg del";column-gap:6px;align-items:center}
.bmc-viz{display:contents}
.bmc-hd{min-height:26px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}
.bmc-hd>span{text-align:center;white-space:nowrap}
.bmc-hd .bmc-hme{grid-area:me}.bmc-hd .bmc-hn{grid-area:nm;text-align:left}.bmc-hd .bmc-hw{grid-area:w}.bmc-hd .bmc-hl{grid-area:l}.bmc-hd .bmc-htt{grid-area:t}.bmc-hd .bmc-hs{grid-area:st;text-align:right}.bmc-hd .bmc-ht{grid-area:tg;text-align:right}
.bmc-axis{grid-area:tr;position:relative;height:26px}
.bmc-axis span{position:absolute;bottom:4px;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.bmc-axis span:first-child{transform:none}.bmc-axis span:last-child{transform:translateX(-100%)} /* 양 끝 눈금은 축 안쪽으로 */
.bmc-rows{display:flex;flex-direction:column}
.bmc-row{padding:4px 0;border-top:1px solid var(--soft)}
.bmc-row:first-child{border-top:0}
.bmc-me{grid-area:me;position:relative;display:grid;place-items:center;width:26px;height:26px;cursor:pointer}
.bmc-me input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.bmc-me i{width:16px;height:16px;border:1.5px solid var(--line);border-radius:50%;box-sizing:border-box;transition:border-color var(--ease),background var(--ease)}
.bmc-me input:checked+i{border:5px solid var(--accent)}
.bmc-me input:focus-visible+i{outline:2px solid var(--ink);outline-offset:2px}
.bmc-fn{grid-area:nm}.bmc-fw{grid-area:w}.bmc-fl{grid-area:l}.bmc-ft{grid-area:t}
.bmc-row .v2-input input{padding:0 7px;font-size:15px}
.bmc-fn .v2-input input{text-align:left;font-weight:650}
.bmc-row.is-me .bmc-fn .v2-input{border-color:var(--accent)}
.bmc-st{grid-area:st;display:flex;flex-direction:column;align-items:flex-end;min-width:0;font-family:var(--sans);line-height:1.25;font-variant-numeric:tabular-nums}
.bmc-st .bmc-rank{display:none}
.bmc-pct{font-size:14px;font-weight:750;color:var(--ink)}
.bmc-rem{font-size:11px;color:var(--muted);white-space:nowrap}
/* 가능 승률 막대: 최저(남은 경기 전패) ~ 최고(전승), 점 = 지금 승률, 점선 = 우리 팀 최저·최고 */
.bmc-track{grid-area:tr;position:relative;height:20px;margin:0 2px}
.bmc-track::before,.bmc-track::after{content:"";position:absolute;top:-7px;bottom:-7px;width:0;border-left:1px dashed var(--accent);opacity:.75;transition:left .5s cubic-bezier(.2,.7,.2,1)}
.bmc-track::before{left:var(--f,0)}.bmc-track::after{left:var(--h,0)}
.bmc-rg{position:absolute;top:4px;bottom:4px;left:var(--l,0);width:var(--w,0);border:1px solid color-mix(in srgb, var(--ink) 55%, transparent);border-radius:6px;box-sizing:border-box;background:color-mix(in srgb, var(--ink) 16%, transparent);transition:left .5s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1),background var(--ease)}
.bmc-dot{position:absolute;top:50%;left:var(--c,0);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ink);transition:left .5s cubic-bezier(.2,.7,.2,1)}
.bmc-row.is-me .bmc-rg{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 28%, transparent)}
.bmc-row.is-me .bmc-dot{background:var(--accent)}
.bmc-row.is-done .bmc-rg,.bmc-row.is-done .bmc-dot{opacity:.38}
.bmc-row.is-over .bmc-rg{background:color-mix(in srgb, var(--ink) 55%, transparent)}
.bmc-track.is-off{visibility:hidden}
.bmc-tag{grid-area:tg;display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0;font-family:var(--sans);font-size:11.5px;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.bmc-tag span+span{color:var(--muted)}
.bmc-tag b{font-weight:750}
.bmc-tag b.is-done{color:var(--muted)}
.bmc-tag b.is-over{color:var(--accent)}
.bmc-row.is-me .bmc-tag b{color:var(--accent)}
.bmc-del{grid-area:del;width:22px;height:26px;padding:0;border:0;background:none;font-size:17px;line-height:1;color:var(--muted);cursor:pointer;border-radius:var(--radius)}
.bmc-del:hover{color:var(--ink);background:var(--btn)}
.bmc-rows:has(.bmc-row:nth-child(2):last-child) .bmc-del{visibility:hidden}
.bmc-row.is-skip .bmc-st,.bmc-row.is-skip .bmc-tag{visibility:hidden}
.bmc-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin-top:12px}
.bmc-foot #bmcAdd{height:var(--v2-ctl,42px)}
.bmc-g{width:96px}
.bmc-tie{display:flex;flex-direction:column;gap:5px;flex:1 1 280px;min-width:0}
.bmc-tie .v2-seg button{font-size:12.5px}
.bmc-lad>.v2-status{display:block;margin-top:8px}
.bmc-lad>.v2-status:empty{display:none}

/* 아래: 경우의 수 4칸 | 읽기 줄 */
.bmc-lower{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.bmc-what{display:flex;flex-direction:column;gap:8px;padding:12px 18px 14px}
.bmc-wh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:0}
.bmc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.bmc-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);text-align:left;color:var(--ink);cursor:pointer;transition:border-color var(--ease),background var(--ease),transform .15s ease}
.bmc-grid button:hover:not(:disabled){border-color:var(--ink)}
.bmc-grid button:active:not(:disabled){transform:scale(.98)}
.bmc-grid button:disabled{cursor:default;opacity:.55}
.bmc-grid button.is-best{border-color:var(--accent)}
.bmc-grid span{font-size:11.5px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.bmc-grid b{font-size:17px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.bmc-grid button.is-best b{color:var(--accent)}
.bmc-grid small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bmc-read{padding:6px 18px 10px}
.bmc-read li span{flex:0 1 auto;min-width:0}
.bmc-read li b{min-width:0;white-space:normal;text-align:right} /* 동률 처리처럼 긴 값은 오른쪽 정렬로 줄바꿈(es·en 360~768 넘침) */
.bmc-formula{margin:0;padding:10px 18px 0;white-space:pre-line;overflow-wrap:anywhere;border-top:1px solid var(--soft)}
.bmc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 16px}

@container bmcw (min-width:820px){ /* 넓으면 답 띠 한 줄: [매직넘버 | 문장·공 | 자력·탈락·게임차] */
  .bmc-ans{grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr)}
  .bmc-kpi{grid-column:auto;align-self:stretch;border-top:0;border-left:1px solid var(--soft)}
  .bmc-kpi li{padding:2px 10px 0 14px}
  .bmc-kpi li+li{padding-left:12px}
}
@container bmcw (min-width:600px){
  .bmc-lower{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bmc-read{padding:10px 18px 12px;border-left:1px solid var(--soft)}
}
/* 600~699: 칸 줄 아래 전폭 막대 */
@container bmcw (max-width:699px){
  .bmc-hd,.bmc-row{grid-template-columns:26px minmax(80px,1fr) 46px 46px 42px 56px 66px 22px;grid-template-areas:"me nm w l t st tg del" ". tr tr tr tr tr tr .";row-gap:3px}
  .bmc-row{padding:6px 0 8px}
  .bmc-track{margin:0}
}
/* 600 미만: [칸] / [승률 | 막대 | 매직·탈락] */
@container bmcw (max-width:599px){
  .bmc-hd,.bmc-row{grid-template-columns:24px minmax(70px,1fr) 46px 46px 40px 20px;grid-template-areas:"me nm w l t del" "vz vz vz vz vz vz";column-gap:5px}
  .bmc-hd{grid-template-areas:"me nm w l t del" "tr tr tr tr tr tr"}
  .bmc-hd .bmc-hs,.bmc-hd .bmc-ht{display:none}
  .bmc-axis{margin:0 72px 0 62px}
  .bmc-viz{grid-area:vz;display:grid;grid-template-columns:56px minmax(0,1fr) 66px;column-gap:6px;align-items:center}
  .bmc-viz>*{grid-area:auto}
  .bmc-st{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:5px}
  .bmc-st .bmc-rem{display:none}
  .bmc-st .bmc-rank{display:inline;font-size:11px;font-weight:600;color:var(--muted)}
  .bmc-st .bmc-rank::after{content:"."}
  .bmc-me{width:24px}
  .bmc-del{width:20px}
}
@container bmcw (max-width:419px){
  .bmc-ans{grid-template-columns:minmax(0,1fr)}
  .bmc-mn{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
  .bmc-big{margin:0}
  .bmc-kpi{grid-template-columns:minmax(0,1fr)}
  .bmc-kpi li{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:8px 0 0}
  .bmc-kpi li+li{padding-left:0;border-left:0;border-top:1px solid var(--soft);margin-top:8px}
  .bmc-kpi span{flex:1 0 100%}
}
@media (prefers-reduced-motion: reduce){
  .bmc-rg,.bmc-dot,.bmc-track::before,.bmc-track::after{transition:none}
  .bmc-ball.is-in,.bmc-ball.is-out{animation:none}
}