/* 야구 득점권 타율 계산기 — 타순표 + 득점권 저울. 넓이는 작업면 rspw·타순표 rspl 컨테이너 쿼리. accent = 득점권 값(저울 ◆·아령 ◆·2·3루 주자) */
.rsp-work{container:rspw / inline-size}
.rsp-work [hidden]{display:none!important} /* display 규칙이 hidden을 덮지 않게 */
.rsp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.rsp-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rsp-ex > .v2-label{margin-right:2px}
.rsp-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)}
.rsp-chip:hover{background:var(--btn)}
.rsp-chip .i{width:13px;height:13px}
.rsp-lgs{display:flex;align-items:center;gap:8px}

/* 판독판 */
.rsp-judge{display:grid;grid-template-columns:132px minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:16px 24px;padding:18px}
.rsp-dia{margin:0;display:grid;justify-items:center;gap:6px;text-align:center}
.rsp-dbox{position:relative;width:118px;height:118px}
.rsp-dbox svg{display:block;width:100%;height:100%}
.rsp-dgrass{fill:color-mix(in srgb, var(--ink) 4%, var(--card))}
.rsp-dline{fill:none;stroke:var(--line);stroke-width:1.5}
.rsp-dhome{fill:var(--card);stroke:var(--muted);stroke-width:1.2}
.rsp-dbase{fill:var(--card);stroke:var(--muted);stroke-width:1.2;transition:fill var(--ease)}
.rsp-dbase[data-b="2"],.rsp-dbase[data-b="3"]{stroke:var(--accent);stroke-width:1.6}
.rsp-dbase.is-on{fill:var(--wash)}
.rsp-drun{fill:var(--ink);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1.3)}
.rsp-drun[data-b="2"],.rsp-drun[data-b="3"]{fill:var(--accent)}
.rsp-drun.is-on{opacity:1;transform:scale(1)}
.rsp-dbtn{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.rsp-dbtn:hover{background:color-mix(in srgb, var(--ink) 7%, transparent)}
.rsp-dbtn:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.rsp-dbtn[data-b="1"]{left:86.67%;top:50%}
.rsp-dbtn[data-b="2"]{left:50%;top:13.33%}
.rsp-dbtn[data-b="3"]{left:13.33%;top:50%}
.rsp-dia figcaption{display:grid;gap:2px;max-width:150px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.rsp-dia figcaption .v2-label{font-size:11px}
.rsp-dia figcaption b{font-size:13px;color:var(--ink)}
.rsp-work:lang(ko) .rsp-dia figcaption,.rsp-work:lang(ko) .rsp-hint,.rsp-work:lang(ko) .rsp-say,.rsp-work:lang(ko) .rsp-verdict,.rsp-work:lang(ko) .rsp-rows li{word-break:keep-all;overflow-wrap:anywhere}
.rsp-dia.is-yes figcaption b{color:var(--accent)}
.rsp-res{display:grid;align-content:center;gap:5px;min-width:0}
.rsp-big{font-family:var(--sans);font-weight:800;font-size:56px;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.rsp-big.is-empty{font-size:28px;color:var(--muted);opacity:.6}
.rsp-hpr{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--muted)}
.rsp-hpr:empty{display:none}
.rsp-cnt{font-family:var(--sans);font-size:13px;color:var(--ink)}
.rsp-vs{display:grid;align-content:center;gap:9px;min-width:0}
.rsp-cmp{list-style:none;margin:0;padding:0}
.rsp-cmp li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:4px 10px;padding:6px 0;border-bottom:1px solid var(--soft)}
.rsp-cmp li span{font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.rsp-cmp li b{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.rsp-cmp li em{font-family:var(--sans);font-size:12px;font-style:normal;color:var(--muted);text-align:right}
.rsp-diff{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0}
.rsp-diff b{font-family:var(--sans);font-size:24px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.rsp-diff span{font-family:var(--sans);font-size:13px;color:var(--ink)}
.rsp-verdict{display:inline-flex;align-items:center;gap:7px;justify-self:start;margin:0;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.rsp-verdict i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted)}
.rsp-verdict[data-v="in95"] i{background:var(--muted)}
.rsp-verdict[data-v="out"]{border-color:var(--ink)}
.rsp-verdict[data-v="out"] i{background:var(--ink);border-color:var(--ink)}
.rsp-status{margin:0;padding:8px 18px;border-top:1px solid var(--soft)}
.rsp-status:empty{display:none}

/* 득점권 저울 */
.rsp-scale{margin:0;padding:14px 18px 4px;border-top:1px solid var(--soft)}
.rsp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:3px 14px;margin:0 0 6px}
.rsp-hint{font-family:var(--sans);font-size:12px;color:var(--muted)}
.rsp-svgbox{width:100%;min-width:0}
.rsp-svgbox svg{display:block;width:100%;height:auto;overflow:visible}
.rsp-svgbox text{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.rsp-b95{fill:color-mix(in srgb, var(--ink) 7%, transparent)}
.rsp-b68{fill:color-mix(in srgb, var(--ink) 14%, transparent)}
.rsp-anim{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.no-anim .rsp-anim{transition:none}
.rsp-c line{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:3 3}
.rsp-c circle{fill:var(--card);stroke:var(--ink);stroke-width:1.7}
.rsp-svgbox .rsp-cl{font-weight:600;fill:var(--ink)}
.rsp-m rect{fill:var(--accent)}
.rsp-svgbox .rsp-ml{font-size:12px;font-weight:700;fill:var(--accent)}
.rsp-tk line{stroke:var(--muted);stroke-width:1}
.rsp-tk line.is-1{stroke:var(--ink)}
.rsp-ax line{stroke:var(--line)}
.rsp-q circle{fill:var(--card);stroke:var(--muted);stroke-width:1}
.rsp-q circle.is-hi{fill:var(--muted)}
.rsp-q circle.is-eq{fill:var(--accent);stroke:var(--accent)}
.rsp-qmed{stroke:var(--muted);stroke-dasharray:2 3}
.rsp-svgbox .rsp-qmedl{font-size:10.5px}
.rsp-guide{stroke:var(--accent);stroke-width:1;stroke-dasharray:2 3;opacity:.75}
.is-empty .rsp-b95,.is-empty .rsp-b68,.is-empty .rsp-c,.is-empty .rsp-m,.is-empty .rsp-guide{visibility:hidden}
.rsp-leg{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:2px 0 0;padding:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.rsp-leg li{display:inline-flex;align-items:center;gap:6px}
.rsp-leg i{display:inline-block;flex:0 0 auto}
.rsp-leg [data-k="b95"] i{width:14px;height:10px;background:color-mix(in srgb, var(--ink) 7%, transparent)}
.rsp-leg [data-k="b68"] i{width:14px;height:10px;background:color-mix(in srgb, var(--ink) 14%, transparent)}
.rsp-leg [data-k="c"] i{width:10px;height:10px;border:1.7px solid var(--ink);border-radius:50%}
.rsp-leg [data-k="r"] i{width:8px;height:8px;margin:0 1px;background:var(--accent);transform:rotate(45deg)}
.rsp-leg [data-k="tk"] i{width:9px;height:8px;border-left:1px solid var(--ink);border-right:1px solid var(--muted)}
.rsp-leg [data-k="q"] i{width:7px;height:7px;border:1px solid var(--muted);border-radius:50%}
.rsp-say{margin:8px 0 10px;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink)}

/* 읽기 줄: 두 열, 홀수면 마지막 줄이 두 칸 */
.rsp-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;padding:0 18px 12px}
.rsp-rows li{align-items:baseline}
.rsp-rows li b{white-space:normal;text-align:right}
.rsp-rows li.is-wide{grid-column:1/-1}

/* 타순표 */
.rsp-lineup{container:rspl / inline-size;padding:14px 18px 16px;border-top:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 45%, var(--card))}
.rsp-lineup > .rsp-head{margin-bottom:8px}
.rsp-grid{display:grid;grid-template-columns:28px minmax(120px,1.6fr) repeat(4,minmax(66px,.72fr)) minmax(56px,64px) minmax(90px,1.2fr) 28px;align-items:center;column-gap:6px;row-gap:6px}
.rsp-cols,.rsp-list,.rsp-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}
.rsp-cols > span{font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.25;color:var(--muted);text-align:right}
.rsp-cols > span:nth-child(1),.rsp-cols > span:nth-child(2){text-align:left}
.rsp-cols > span:nth-child(1){text-align:center}
.rsp-list{list-style:none;margin:0;padding:0;row-gap:6px}
.rsp-row{position:relative;padding:3px 0;border-radius:var(--radius);transition:background var(--ease)}
.rsp-row.is-sel{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.rsp-row .rsp-f > .v2-label{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 넓은 표는 머리 줄이 칸 이름 */
.rsp-row .v2-input input{padding:0 7px;font-size:14.5px}
.rsp-row input.rsp-nm{text-align:left;font-weight:600}
.rsp-row input.is-tight{font-size:12.5px;padding:0 4px}
.rsp-row input.is-tighter{font-size:11px;letter-spacing:-.02em}
.rsp-tv.is-tight{font-size:12.5px}.rsp-tv.is-tighter{font-size:11px}
.rsp-no{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--soft);border-radius:50%;background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);transition:background var(--ease),color var(--ease)}
.rsp-no:hover{background:var(--btn);color:var(--ink)}
.is-sel > .rsp-no,.rsp-no[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.rsp-out{display:grid;justify-items:end;line-height:1.15;font-variant-numeric:tabular-nums lining-nums}
.rsp-out b{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink)}
.rsp-out span{font-family:var(--sans);font-size:12px;color:var(--muted)}
.rsp-bell{position:relative;display:block;height:28px;margin:0 6px}
.rsp-bell::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--soft)}
.rsp-bell i{position:absolute;top:50%}
.rsp-bl{height:3px;margin-top:-1.5px;border-radius:2px;background:var(--muted);transition:left .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1)}
.rsp-bell.is-up .rsp-bl{background:var(--ink)}
.rsp-bo{width:10px;height:10px;margin:-5px 0 0 -5px;border:1.7px solid var(--ink);border-radius:50%;background:var(--card);box-sizing:border-box;transition:left .5s cubic-bezier(.2,.8,.2,1)}
.rsp-br{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--accent);transform:rotate(45deg);transition:left .5s cubic-bezier(.2,.8,.2,1)}
.rsp-bell > b{display:none}
.rsp-bell:not(.is-on) i,.rsp-bell.no-o .rsp-bo,.rsp-bell.no-o .rsp-bl{display:none}
.rsp-del{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;font-size:17px;line-height:1;color:var(--muted)}
.rsp-del:hover{background:var(--btn);color:var(--ink)}
.rsp-bax{position:relative;display:block;height:14px;margin:0 6px}
.rsp-bax i{position:absolute;top:0;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;font-style:normal;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.rsp-bax i.is-l{transform:none}
.rsp-bax i.is-r{transform:translateX(-100%)}
.rsp-axl{display:none}
.rsp-tot{margin-top:4px;padding-top:9px;border-top:1px solid var(--line);border-radius:0}
.rsp-tot.is-sel{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.rsp-tname{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsp-tv{min-width:0;overflow:hidden;white-space:nowrap;padding-right:8px;text-align:right;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.rsp-tv::before{display:none;content:attr(data-l)}
.rsp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.rsp-gap{flex:1 1 0}
.rsp-acts .v2-status:empty{display:none}

/* 넓이별 */
@container rspw (max-width:759px){
  .rsp-judge{grid-template-columns:108px minmax(0,.85fr) minmax(0,1.15fr);gap:14px 18px}
  .rsp-dbox{width:100px;height:100px}
  .rsp-big{font-size:46px}
}
@container rspw (max-width:639px){
  .rsp-judge{grid-template-columns:116px minmax(0,1fr);grid-template-areas:"dia res" "vs vs"}
  .rsp-dia{grid-area:dia}.rsp-res{grid-area:res}.rsp-vs{grid-area:vs}
}
@container rspw (max-width:519px){
  .rsp-top{padding:12px 14px}
  .rsp-judge{grid-template-columns:100px minmax(0,1fr);gap:12px 14px;padding:14px}
  .rsp-dbox{width:96px;height:96px}
  .rsp-dbtn{width:30px;height:30px;margin:-15px 0 0 -15px}
  .rsp-dia figcaption{font-size:11px}
  .rsp-big{font-size:44px}
  .rsp-scale{padding:12px 14px 2px}
  .rsp-rows{grid-template-columns:minmax(0,1fr);padding:0 14px 10px}
  .rsp-status{padding:8px 14px}
  .rsp-lineup{padding:12px 14px 14px}
}
@container rspw (max-width:699px){ .rsp-rows{grid-template-columns:minmax(0,1fr)} .rsp-rows li.is-wide{grid-column:auto} }
/* 타순표 카드: 720px 아래는 줄마다 카드(이름 줄 · 네 칸 + 결과 + 아령), 580px 아래는 네 칸 줄과 결과·아령 줄을 나눈다 */
@container rspl (max-width:719px){
  .rsp-grid{display:block}
  .rsp-cols{display:none}
  .rsp-list{display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px}
  .rsp-row{grid-template-columns:repeat(4,minmax(0,.8fr)) minmax(56px,64px) minmax(0,1.8fr);column-gap:6px;row-gap:8px;padding:10px;border:1px solid var(--soft);background:var(--card)}
  .rsp-row.is-sel{border-color:var(--ink);background:var(--card)}
  .rsp-row > .rsp-no{position:absolute;left:10px;top:17px}
  .rsp-row > .rsp-del{position:absolute;right:8px;top:17px}
  .rsp-row > .rsp-f[data-k="nm"],.rsp-tname{grid-column:1/-1;margin:0 34px}
  .rsp-row:not(.rsp-tot) .rsp-f:not([data-k="nm"]) > .v2-label{position:static;width:auto;height:auto;margin:0 0 5px;overflow:visible;clip:auto;white-space:normal}
  .rsp-out{align-self:end;padding-bottom:6px}
  .rsp-bell{align-self:end;height:30px;margin-bottom:6px}
  .rsp-bell > b{display:block;position:absolute;top:-4px;font-family:var(--sans);font-size:9.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
  .rsp-bell > .rsp-blo{left:0}.rsp-bell > .rsp-bhi{right:0}
  .rsp-tot{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:var(--radius)}
  .rsp-tot > .rsp-no{position:absolute;left:10px;top:8px}
  .rsp-tname{line-height:28px}
  .rsp-tot > span:last-child{display:none}
  .rsp-tv{padding-right:0;text-align:left}
  .rsp-tv::before{display:block;font-size:11px;font-weight:600;color:var(--muted)}
}
@container rspl (max-width:579px){
  .rsp-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rsp-out{grid-column:1;justify-items:start;align-self:center;padding-bottom:0}
  .rsp-bell{grid-column:2/-1;align-self:center;margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){ .rsp-anim,.rsp-bl,.rsp-bo,.rsp-br,.rsp-drun{transition:none} }