/* 야구 RC 계산기 전용 CSS (2026-10-23). 머리 줄·결과(RC·RC/27·A·B·C 계산서)·기록지(5칸 × 3줄)·식 고르기·출루 × 진루 평면·'이 타자 9명' 막대·읽기 줄 rcr-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 rcrw — 700 이상 [기록지 | 결과] → 식 고르기(전체 폭) → [평면 | 막대] 두 열. 그 아래는 한 열(결과 → 기록지 → 식 → 평면 → 막대). 읽기 줄은 값이 길어 늘 한 단.
   기록지 폭(v2in = .rcr-side, 폼의 부모): 440 이상 5칸, 그 아래 3칸(13칸 + 자동 2칸 = 15칸이라 두 경우 모두 빈칸 없음). */
.rcr-work{container:rcrw / inline-size}
.rcr-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 14px;padding:14px 18px 6px}
.rcr-fl{flex:0 0 auto;min-width:0}
.rcr-fl>.v2-label{display:block;margin:0 0 5px}
.rcr-fl .v2-seg{flex-wrap:nowrap}
.rcr-fl .v2-seg button{height:var(--v2-ctl,42px);padding:0 16px;font-size:13px}
.rcr-ex{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-end;gap:6px;flex:1 1 330px;min-width:0}
.rcr-ex .v2-label{margin-right:2px}
.rcr-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)}
.rcr-chip:hover{background:var(--btn)}
.rcr-chip[hidden]{display:none}
.rcr-chip .i{width:13px;height:13px}
.rcr-hint{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

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

/* 결과: 큰 RC · RC/27 · 같은 기회의 리그 평균 대비 · A·B·C 계산서 · 판정 */
.rcr-res{grid-area:res;display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 18px 14px}
.rcr-resh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0}
.rcr-resh .v2-label{font-family:var(--mono);font-weight:700}
.rcr-ctx{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.rcr-nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px}
.rcr-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}
.rcr-big.is-empty{color:var(--muted);opacity:.55}
.rcr-k27{display:flex;align-items:baseline;gap:7px;margin:0;white-space:nowrap}
.rcr-k27 span{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted)}
.rcr-k27 b{font-family:var(--sans);font-size:32px;font-weight:800;line-height:1.05;color:var(--accent);font-variant-numeric:tabular-nums lining-nums}
.rcr-vs{margin:0;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rcr-vs:empty{display:none}
.rcr-abc{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;column-gap:8px;margin:10px 0 0;padding:0;list-style:none}
.rcr-abc li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;padding:6px 0;border-top:1px solid var(--soft)}
.rcr-abc li:first-child{border-top:0}
.rcr-tag{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--wash);font-family:var(--mono);font-size:11px;font-weight:800;color:var(--ink);align-self:center}
.rcr-nm{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.rcr-x{min-width:0;font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
:lang(ko) .rcr-x,:lang(ko) .rcr-fm button i,:lang(ko) .rcr-rows li b{word-break:keep-all}
.rcr-abc b{font-family:var(--sans);font-size:14.5px;font-weight:750;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rcr-eq{border-top:1px solid var(--line)!important}
.rcr-eq .rcr-tag{background:var(--fill);color:var(--on-fill)}
.rcr-eq b{font-size:17px;font-weight:800}
.rcr-say{margin:6px 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink)}
.rcr-say:empty{display:none}

/* 기록지: 라벨(이름 + 약자) 위, 입력 아래. 5칸 × 3줄, 마지막 두 칸은 자동 계산(타석·아웃) */
.rcr-side{grid-area:side;min-width:0;border-top:1px solid var(--soft)}
.rcr-form{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:12px 18px 14px}
.rcr-fh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0}
.rcr-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 8px}
.rcr-f>.v2-label{display:block;margin:0 0 5px;line-height:1.3}
.rcr-f>.v2-label i{margin-left:4px;font-family:var(--mono);font-size:10px;font-style:normal;font-weight:600;color:var(--muted);opacity:.85}
.rcr-f .v2-input input{padding:0 8px}
.rcr-av{display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;height:var(--v2-ctl,42px);margin:0;padding:0 8px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--wash);font-family:var(--sans);font-size:15.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:hidden}
.rcr-form>.v2-status:empty{display:none}
/* 식 고르기: 세 식의 값을 함께 보이고 누르면 그 식으로 계산한다 */
.rcr-fms{grid-area:fms;display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.rcr-fm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rcr-fm button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "c v";align-items:center;column-gap:8px;row-gap:1px;min-width:0;padding:8px 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;color:var(--ink);transition:background var(--ease),border-color var(--ease)}
.rcr-fm button:hover{background:var(--btn)}
.rcr-fm button span{grid-area:n;font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.3}
.rcr-fm button b{grid-area:v;font-family:var(--sans);font-size:21px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rcr-fm button i{grid-area:c;min-width:0;font-family:var(--sans);font-size:10.5px;font-style:normal;line-height:1.35;color:var(--muted)}
.rcr-fm button[aria-pressed="true"]{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.rcr-fm button[aria-pressed="true"] i{color:inherit;opacity:.75}

/* 출루 × 진루 평면 · '이 타자 9명' 막대 */
.rcr-viz{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.rcr-plane,.rcr-lad{min-width:0;margin:0;padding:12px 18px 14px}
.rcr-lad{border-top:1px solid var(--soft)}
.rcr-ph{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:6px}
.rcr-svgbox{position:relative;width:100%;height:280px}
.rcr-svgbox svg{position:absolute;top:0;left:0;display:block;overflow:visible}
.rcr-ax line{stroke:var(--soft);stroke-width:1}
.rcr-ax line.rcr-base0{stroke:var(--muted)}
.rcr-ax text{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.rcr-ax text.rcr-axl{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--ink)}
.rcr-iso path{fill:none;stroke:var(--muted);stroke-width:1;stroke-opacity:.45}
.rcr-isol{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.rcr-avg{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 3}
.rcr-avgd{fill:var(--ink)}
.rcr-me{fill:var(--accent);fill-opacity:.13;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.rcr-mecv{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:5 4}
.rcr-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}
.rcr-dots circle.is-hi{fill:var(--ink);fill-opacity:1;stroke:var(--ink)}
.rcr-dots circle.is-lo{fill:var(--card);fill-opacity:1}
.rcr-dots circle.is-eq{fill:var(--accent);fill-opacity:1;stroke:var(--accent)}
.rcr-mk{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.rcr-mk circle{fill:var(--accent);stroke:var(--card);stroke-width:2.5}
.rcr-mk.is-out circle{fill:var(--card);stroke:var(--accent);stroke-width:2}
.rcr-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}
.rcr-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)}
.rcr-leg li{display:inline-flex;align-items:center;gap:5px}
.rcr-leg i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;box-sizing:border-box}
.rcr-leg [data-k="me"] i{width:12px;height:10px;border-radius:2px;border:1.4px solid var(--accent);background:color-mix(in srgb, var(--accent) 16%, transparent)}
.rcr-leg [data-k="avg"] i{width:12px;height:10px;border-radius:0;border:1.2px dashed var(--ink)}
.rcr-leg [data-k="hi"] i{background:var(--ink)}
.rcr-leg [data-k="lo"] i{border:1.2px solid var(--muted);background:var(--card)}
.rcr-note{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.rcr-note:empty{display:none}
/* 막대: 줄마다 [팀 | 막대 | 값], 위치는 transform(순위가 바뀌면 미끄러짐), 리그 평균은 막대마다 같은 자리의 눈금 */
.rcr-bars{--rh:24px;--avg:50%;position:relative;margin:4px 0 0;padding:0;list-style:none}
.rcr-bars li{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:var(--nw,4.6em) minmax(0,1fr) 3.4em;align-items:center;column-gap:8px;height:var(--rh);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rcr-bars li[hidden]{display:none}
.rcr-bars .n{display:block;min-width:0;overflow:hidden;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.rcr-bars .b{position:relative;display:block;height:calc(var(--rh) - 9px);border-radius:3px;background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.rcr-bars .b b{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:3px;background:var(--muted);opacity:.55;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.rcr-bars .b::after{content:"";position:absolute;top:-2px;bottom:-2px;left:var(--avg);width:0;border-left:1.2px dashed var(--ink);opacity:.7}
.rcr-bars .v{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rcr-bars li.is-me{z-index:1}
.rcr-bars li.is-me .n,.rcr-bars li.is-me .v{color:var(--accent);font-weight:800}
.rcr-bars li.is-me .b b{background:var(--accent);opacity:1}
.rcr-bars li.is-me.is-over .b b{border-radius:3px 0 0 3px;background:repeating-linear-gradient(90deg,var(--accent) 0 calc(100% - 10px),transparent calc(100% - 10px) calc(100% - 7px),var(--accent) calc(100% - 7px))}
.rcr-bars.is-dense li{grid-template-columns:var(--nw,3.6em) minmax(0,1fr) 2.9em;column-gap:6px}
.rcr-bars.is-dense .n,.rcr-bars.is-dense .v{font-family:var(--mono);font-size:9.5px;line-height:1}
.rcr-bars.is-dense .b{height:calc(var(--rh) - 4px);border-radius:2px}
.rcr-bars.is-dense li.is-me .n,.rcr-bars.is-dense li.is-me .v{font-family:var(--sans);font-size:10.5px}

/* 읽기 줄 · 식 · 복사 */
.rcr-rows{padding:0 18px;border-top:1px solid var(--soft)}
.rcr-rows li:first-child{border-top:0}
.rcr-rows li span{flex:0 1 auto;min-width:0}
.rcr-rows li b{white-space:normal;text-align:right}
.rcr-formula{margin:10px 18px 0;white-space:pre-line;overflow-wrap:anywhere}
.rcr-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 rcrw (min-width:700px){
  .rcr-ex{justify-content:flex-end}
  .rcr-main{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"side res" "fms fms"}
  .rcr-side{border-top:0;border-right:1px solid var(--soft)}
  .rcr-viz{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
  .rcr-lad{border-top:0;border-left:1px solid var(--soft)}
}
@container rcrw (max-width:439px){
  .rcr-big{font-size:50px}
  .rcr-k27 b{font-size:28px}
}
@container v2in (max-width:439px){
  .rcr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container rcrw (max-width:519px){
  .rcr-fm button{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "v" "c";align-items:start}
}
@media (prefers-reduced-motion:reduce){.rcr-me,.rcr-mk,.rcr-dots circle,.rcr-bars li,.rcr-bars .b b{transition:none}}
