/* 가을야구 매직넘버 계산기 전용 CSS (2026-10-22). 답 띠·가을야구 계단·판도표(순위 확률 칸)·경우의 수 3칸 fbc-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 fbcw — 700 이상 답 띠 [매직·확률·문장 | 계단] / [숫자 칸 4], 640 이상 팀 줄 한 줄
   [우리 | 순위 | 팀 | 승 | 패 | 무 | 승률 | 최종 순위 확률 10칸 | 가을야구], 640 미만 [우리 | 순위 | 팀 | 승 | 패 | 무] / [승률 | 확률 칸 | 가을야구].
   아래 [경우의 수 | 읽기 줄]은 600 이상 두 열 */
.fbc-work{container:fbcw / inline-size}
.fbc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 18px 6px}
.fbc-ex,.fbc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fbc-ex .v2-label{margin-right:2px}
.fbc-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;white-space:nowrap;transition:background var(--ease),border-color var(--ease)}
.fbc-chip:hover{background:var(--btn)}
.fbc-chip[aria-pressed="true"],.fbc-chip[aria-expanded="true"]{border-color:var(--ink);background:var(--btn)}
.fbc-chip:disabled{opacity:.45;cursor:default}
.fbc-chip .i{width:13px;height:13px}
.fbc-hint{margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

/* 순위표 붙여 넣기 */
.fbc-paste{display:flex;flex-direction:column;gap:8px;margin:6px 18px 8px;padding:12px 14px;border:1px solid var(--soft);border-radius:var(--radius)}
.fbc-paste[hidden]{display:none}
.fbc-paste textarea{box-sizing:border-box;width:100%;min-height:92px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink);resize:vertical}
.fbc-paste textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.fbc-pact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.fbc-pact a{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 답 띠: [매직넘버 | 확률] / 문장, 계단, 숫자 칸 */
.fbc-ans{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "steps" "kpi";gap:14px 24px;padding:10px 18px 14px}
.fbc-head{grid-area:head;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-areas:"mn pr" "say say";gap:8px 22px;align-content:start;min-width:0}
.fbc-mn{grid-area:mn;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.fbc-pr{grid-area:pr;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.fbc-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 5px}
.fbc-big.is-empty{color:var(--muted);opacity:.6}
.fbc-big.is-long{font-size:40px;margin:10px 0 7px}
.fbc-big--p{font-size:40px;margin:10px 0 9px;color:var(--ink)}
.fbc-vs{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);white-space:nowrap}
.fbc-meter{position:relative;display:block;width:100%;min-width:96px;height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.fbc-meter i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);border-radius:inherit;background:var(--accent);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.fbc-say{grid-area:say;margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--ink)}
/* 가을야구 계단: 왼쪽 5위 안 → 오른쪽 1위. 단 높이는 순위가 오를수록 높고, 안쪽 채움 = 그 순위 안에 들 확률(R45 차오름) */
.fbc-steps{grid-area:steps;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto;column-gap:6px;margin:0;padding:0;list-style:none;align-self:end}
.fbc-step{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:5px;min-width:0}
.fbc-col{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-width:0}
.fbc-sv{font-family:var(--sans);font-size:12px;font-weight:750;line-height:1.2;text-align:center;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.fbc-sw{position:relative;display:block;height:var(--h,60px);border:1px solid var(--line);border-radius:7px 7px 2px 2px;background:var(--paper);overflow:hidden}
.fbc-step[data-k="5"] .fbc-sw{--h:50px}.fbc-step[data-k="4"] .fbc-sw{--h:68px}.fbc-step[data-k="3"] .fbc-sw{--h:86px}.fbc-step[data-k="2"] .fbc-sw{--h:104px}.fbc-step[data-k="1"] .fbc-sw{--h:122px}
.fbc-sw i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p,0) * 100%);border-top:2px solid var(--accent);background:color-mix(in srgb, var(--accent) 24%, var(--paper));transition:height .7s cubic-bezier(.2,.7,.2,1)}
.fbc-sw i[style*="--p: 0;"],.fbc-sw[style*="--p: 0;"] i{border-top-width:0}
.fbc-sp{position:absolute;left:0;right:0;top:5px;font-family:var(--sans);font-size:12.5px;font-weight:800;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
.fbc-sl{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;text-align:center;line-height:1.25}
.fbc-sl b{font-family:var(--sans);font-size:12px;font-weight:750;color:var(--ink);white-space:nowrap}
.fbc-sl small{font-family:var(--sans);font-size:10.5px;color:var(--muted);overflow-wrap:anywhere;word-break:keep-all}
.fbc-step.is-done .fbc-sv{color:var(--accent)}
.fbc-step.is-done .fbc-sw{border-color:var(--accent)}
.fbc-step.is-out .fbc-sv{color:var(--muted)}
.fbc-step.is-out .fbc-sw{background:repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--ink) 9%, transparent) 5px 6px)}
.fbc-step.is-now .fbc-sl b{color:var(--accent)}
.fbc-step.is-now .fbc-sl b::before{content:"";display:inline-block;width:6px;height:6px;margin:0 4px 1px 0;border-radius:50%;background:var(--accent);vertical-align:middle}
.fbc-kpi{grid-area:kpi;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--soft)}
.fbc-kpi li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px 0 0}
.fbc-kpi li+li{padding-left:12px;border-left:1px solid var(--soft)}
.fbc-kpi span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.fbc-kpi b{font-family:var(--sans);font-size:18px;font-weight:800;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}
.fbc-kpi small{font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}

/* 판도표 */
.fbc-board{margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.fbc-hd,.fbc-row{display:grid;grid-template-columns:26px 22px minmax(64px,.8fr) 46px 46px 40px 54px minmax(170px,2fr) 92px;grid-template-areas:"me rk nm w l t st hm ps";column-gap:6px;align-items:center}
.fbc-hd{min-height:24px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}
.fbc-hd>span{text-align:center;white-space:nowrap}
.fbc-hd .fbc-hme{grid-area:me}.fbc-hd .fbc-hrk{grid-area:rk;font-size:10.5px}.fbc-hd .fbc-hn{grid-area:nm;text-align:left}.fbc-hd .fbc-hw{grid-area:w}.fbc-hd .fbc-hl{grid-area:l}.fbc-hd .fbc-htt{grid-area:t}.fbc-hd .fbc-hs{grid-area:st;text-align:right}.fbc-hd .fbc-hps{grid-area:ps;text-align:right}
.fbc-axis,.fbc-heat{grid-area:hm;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 4px repeat(5,minmax(0,1fr));column-gap:2px}
.fbc-axis span{font-family:var(--mono);font-size:10px;text-align:center}
.fbc-axis span:nth-child(6),.fbc-heat i:nth-child(6){grid-column:7}
.fbc-axis span:nth-child(-n+5){color:var(--accent)}
.fbc-rows{display:flex;flex-direction:column}
.fbc-row{position:relative;padding:4px 0;border-top:1px solid var(--soft);background:var(--card)}
.fbc-row:first-child{border-top:0}
.fbc-row.is-cut{border-bottom:2px solid var(--accent)} /* 5강 선: 줄이 승률 순일 때만 다섯 번째 줄 아래(검토 N2) */
.fbc-row.is-cut+.fbc-row{border-top:0}
.fbc-row.is-me{background:color-mix(in srgb, var(--accent) 6%, var(--card))}
.fbc-me{grid-area:me;position:relative;display:grid;place-items:center;width:26px;height:26px;cursor:pointer}
.fbc-me input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.fbc-me i{width:16px;height:16px;border:1.5px solid var(--line);border-radius:50%;box-sizing:border-box;transition:border-color var(--ease)}
.fbc-me input:checked+i{border:5px solid var(--accent)}
.fbc-me input:focus-visible+i{outline:2px solid var(--ink);outline-offset:2px}
.fbc-rank{grid-area:rk;font-family:var(--sans);font-size:12px;font-weight:700;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.fbc-row.is-me .fbc-rank{color:var(--accent)}
.fbc-fn{grid-area:nm}.fbc-fw{grid-area:w}.fbc-fl{grid-area:l}.fbc-ft{grid-area:t}
.fbc-row .v2-input input{padding:0 7px;font-size:15px}
.fbc-fn .v2-input input{text-align:left;font-weight:650}
.fbc-row.is-me .fbc-fn .v2-input{border-color:var(--accent)}
.fbc-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}
.fbc-pct{font-size:14px;font-weight:750;color:var(--ink)}
.fbc-rem{font-size:11px;color:var(--muted);white-space:nowrap}
.fbc-heat{height:22px}
.fbc-heat::after{content:"";grid-column:6;grid-row:1;justify-self:center;width:0;border-left:1.5px dashed var(--accent)}
.fbc-heat i{position:relative;grid-row:1;border-radius:3px;background:var(--wash)}
.fbc-heat i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:var(--a,0);transition:opacity .5s ease}
.fbc-heat i:nth-child(n+6)::before{background:var(--ink)}
.fbc-heat i.is-x{background:none;box-shadow:inset 0 0 0 1px var(--soft)}
.fbc-heat i.is-now{outline:1.5px solid var(--ink);outline-offset:-1.5px}
.fbc-heat i.is-none{visibility:hidden}
.fbc-heat.is-off{visibility:hidden}
.fbc-psc{grid-area:ps;display:flex;flex-direction:column;align-items:flex-end;min-width:0;text-align:right;font-family:var(--sans);line-height:1.25;font-variant-numeric:tabular-nums}
.fbc-ps{font-size:14.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.fbc-tag{font-size:11px;color:var(--muted);white-space:nowrap}
.fbc-row.is-done .fbc-tag{color:var(--accent);font-weight:700}
.fbc-row.is-out .fbc-ps,.fbc-row.is-out .fbc-pct{color:var(--muted)}
.fbc-row.is-me .fbc-ps{color:var(--accent)}
.fbc-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin-top:12px}
.fbc-g{width:96px}
.fbc-md{display:flex;flex-direction:column;gap:5px}
.fbc-legend{display:flex;flex-wrap:wrap;gap:4px 12px;flex:1 1 220px;align-self:center}
.fbc-lg{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fbc-lg i{width:12px;height:12px;border-radius:3px;background:color-mix(in srgb, var(--accent) 60%, var(--wash))}
.fbc-lg.is-x i{background:none;box-shadow:inset 0 0 0 1px var(--soft)}
.fbc-lg.is-now i{background:var(--wash);outline:1.5px solid var(--ink);outline-offset:-1.5px}
.fbc-board>.v2-status{display:block;margin-top:8px}
.fbc-board>.v2-status:empty{display:none}

/* 아래: 경우의 수 3칸 | 읽기 줄 */
.fbc-lower{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.fbc-what-box{display:flex;flex-direction:column;gap:8px;padding:12px 18px 14px}
.fbc-wh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:0}
.fbc-what{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fbc-what 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}
.fbc-what button:hover:not(:disabled){border-color:var(--ink)}
.fbc-what button:active:not(:disabled){transform:scale(.98)}
.fbc-what button:disabled{cursor:default;opacity:.55}
.fbc-what button.is-best{border-color:var(--accent)}
.fbc-what span{font-size:11.5px;font-weight:600;color:var(--muted)}
.fbc-what b{font-size:17px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap}
.fbc-what button.is-best b{color:var(--accent)}
.fbc-what button.is-worst b{color:var(--muted)}
.fbc-what small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fbc-read{padding:6px 18px 10px}
.fbc-read li span{flex:0 1 auto;min-width:0}
.fbc-read li b{min-width:0;white-space:normal;text-align:right}
.fbc-formula{margin:0;padding:10px 18px 0;white-space:pre-line;overflow-wrap:anywhere;border-top:1px solid var(--soft)}
.fbc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 16px}

@container fbcw (min-width:700px){
  .fbc-ans{grid-template-columns:minmax(0,1fr) minmax(300px,1fr);grid-template-areas:"head steps" "kpi kpi"}
}
@container fbcw (min-width:600px){
  .fbc-lower{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fbc-read{padding:10px 18px 12px;border-left:1px solid var(--soft)}
}
/* 640 미만: [칸] / [승률 | 순위 확률 | 가을야구] */
@container fbcw (max-width:639px){
  .fbc-hd,.fbc-row{grid-template-columns:24px 22px minmax(0,1fr) 44px 44px 38px;grid-template-areas:"me rk nm w l t" "st st hm hm ps ps";column-gap:5px;row-gap:4px}
  .fbc-row{padding:6px 0 7px}
  .fbc-me{width:24px}
  .fbc-st{flex-direction:column;align-items:flex-start}
  .fbc-pct{font-size:13px}
  .fbc-heat{height:18px}
}
@container fbcw (max-width:519px){
  .fbc-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fbc-kpi li:nth-child(3){padding-left:0;border-left:0}
  .fbc-kpi li:nth-child(n+3){margin-top:8px;border-top:1px solid var(--soft)}
  .fbc-big{font-size:46px}
  .fbc-big--p,.fbc-big.is-long{font-size:34px;margin:10px 0 9px}
  .fbc-what button{padding:7px 8px}
  .fbc-what b{font-size:15px}
}
@media (prefers-reduced-motion: reduce){
  .fbc-meter i,.fbc-sw i,.fbc-heat i::before{transition:none}
}