/* 야구 장타율 계산기 전용 CSS (2026-10-23). 머리 줄·결과 띠·루타 장부·순위 사다리·읽기 줄 slg-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 slgw — 600 이상 결과 띠 [큰 값 | 지표 2×2], 760 이상 [장부 | 사다리] 두 열, 780 이상 읽기 줄 두 단. 장부 줄 배치는 폼 자신의 컨테이너 slgl(480 미만이면 막대가 둘째 줄). */
.slg-work{container:slgw / inline-size;--slg-s1:color-mix(in srgb, var(--muted) 52%, var(--paper));--slg-b2:color-mix(in srgb, var(--accent) 36%, var(--paper));--slg-b3:color-mix(in srgb, var(--accent) 64%, var(--paper));--slg-hr:var(--accent)}
.slg-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:14px 18px 6px}
.slg-lgf{flex:0 0 auto;min-width:0}
.slg-lgf>.v2-label,.slg-pickf>.v2-label{display:block;margin:0 0 5px}
.slg-lgf .v2-seg{flex-wrap:nowrap}
.slg-lgf .v2-seg button{height:var(--v2-ctl,42px);padding:0 14px;font-size:13px}
.slg-pickf{flex:1 1 230px;min-width:0;max-width:440px}
.slg-pick{display:block;width:100%;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-overflow:ellipsis}
.slg-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background var(--ease)}
.slg-chip:hover{background:var(--btn)}
.slg-chip .i{width:13px;height:13px}
.slg-hint{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

/* 결과 띠: 큰 장타율 · 순위 배지 · 리그 평균 대비 | 지표 2×2 · 판정 문장 */
.slg-res{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hd" "kpi" "say";gap:10px 24px;margin-top:8px;padding:14px 18px 14px;border-top:1px solid var(--soft)}
.slg-hd{grid-area:hd;display:flex;flex-direction:column;gap:4px;min-width:0}
.slg-resh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0}
.slg-ctx{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.slg-bigrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.slg-big{display:block;font-family:var(--sans);font-size:60px;font-weight:800;line-height:1.02;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.slg-big.is-empty{color:var(--muted);opacity:.55}
.slg-rk{font-family:var(--sans);font-size:13px;font-weight:750;padding:3px 9px;border-radius:var(--radius);background:var(--soft);color:var(--ink)}
.slg-rk:empty{display:none}
.slg-rk.is-top{background:var(--accent);color:var(--on-fill,#fff)}
.slg-vs{margin:0;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.slg-vs:empty{display:none}
.slg-kpi{grid-area:kpi;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;align-self:center}
.slg-kpi>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.slg-kpi dt{font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted)}
.slg-kpi dd{margin:0;font-family:var(--sans);font-size:19px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.slg-say{grid-area:say;margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink)}
.slg-say:empty{display:none}

.slg-main{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.slg-ph{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:0 0 8px}

/* 루타 장부: [종류 | 개수 | × 배수 | 루타 | 막대(눈금 = 같은 타수의 리그 평균 타자) | 차이] */
.slg-led{container:slgl / inline-size;display:flex;flex-direction:column;min-width:0;margin:0;padding:12px 18px 14px;--slg-c:minmax(4.8em,6.6em) 92px 2.4em 3.4em minmax(0,1fr) 3.6em}
.slg-base{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 10px}
.slg-base .v2-label i,.slg-k em{margin-left:5px;font-family:var(--mono);font-size:10.5px;font-style:normal;font-weight:600;opacity:.75}
.slg-work .v2-f input{padding:0 9px}
.slg-cols,.slg-row{display:grid;grid-template-columns:var(--slg-c);column-gap:8px;align-items:center}
.slg-cols{margin:0;padding:0 0 4px;font-family:var(--sans);font-size:10.5px;font-weight:650;color:var(--muted)}
.slg-cols span:nth-child(4),.slg-cols span:nth-child(6){text-align:right}
.slg-row{padding:5px 0;border-top:1px solid var(--soft)}
.slg-k{display:block;min-width:0;font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.35;color:var(--ink)} /* 표식·이름은 한 덩어리, 약자만 다음 줄로 넘어감(es 'Sencillos') */
.slg-k em{display:inline-block}
.slg-k>i{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:2px;vertical-align:0;background:var(--slg-s1)}
.slg-row[data-k="b2"] .slg-k>i,.slg-row[data-k="b2"] .slg-fill{background:var(--slg-b2)}
.slg-row[data-k="b3"] .slg-k>i,.slg-row[data-k="b3"] .slg-fill{background:var(--slg-b3)}
.slg-row[data-k="hr"] .slg-k>i,.slg-row[data-k="hr"] .slg-fill{background:var(--slg-hr)}
.slg-auto{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;height:var(--v2-ctl,42px);padding:0 9px;border:1px dashed var(--line);border-radius:var(--radius);box-sizing:border-box;align-items:center}
.slg-auto{font-size:15.5px}
.slg-auto b{font-family:var(--sans);font-size:1em;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.slg-auto small{order:-1;font-family:var(--sans);font-size:.68em;color:var(--muted)}
.slg-x{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.slg-b{font-family:var(--sans);font-size:15px;font-weight:750;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums lining-nums}
.slg-bar{position:relative;display:block;height:12px;border-radius:2px;background:var(--wash)}
.slg-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--slg-s1);transition:width .55s cubic-bezier(.2,.7,.2,1)}
.slg-tick{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px solid var(--ink);margin-left:-1px;opacity:0;transition:left .55s cubic-bezier(.2,.7,.2,1),opacity .3s}
.slg-dx{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.slg-dx.is-up{color:var(--accent)}
.slg-tot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;padding:10px 0 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:13px;font-weight:650;color:var(--muted)}
.slg-tot b{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.slg-op{font-family:var(--mono);color:var(--muted)}
.slg-totv b{font-size:20px;color:var(--accent)}
.slg-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.slg-leg span{display:inline-flex;align-items:center;gap:6px}
.slg-lf{display:inline-block;width:16px;height:8px;border-radius:2px;background:linear-gradient(90deg,var(--slg-s1) 0 25%,var(--slg-b2) 25% 50%,var(--slg-b3) 50% 75%,var(--slg-hr) 75%)}
.slg-lt{display:inline-block;width:0;height:12px;border-left:2px solid var(--ink)}
.slg-led>.v2-status{margin-top:6px}
.slg-led>.v2-status:empty{display:none}
@container slgl (max-width:479px){ /* 컨테이너(폼) 자신에는 쿼리가 안 걸리므로 열 정의는 줄에 직접 */
  .slg-cols{display:none}
  .slg-row{grid-template-columns:minmax(0,1fr) 88px 2.2em 3em 3.4em;grid-template-areas:"k n x b d" "bar bar bar bar bar";row-gap:6px;padding:6px 0 8px}
  .slg-row>.slg-k{grid-area:k}
  .slg-k>i{display:none} /* 좁으면 둘째 줄 막대가 같은 색을 보여 준다(es 'Sencillos' 위에 표식만 남던 줄바꿈) */
  .slg-row>.v2-f,.slg-row>.slg-auto{grid-area:n}
  .slg-row>.slg-x{grid-area:x}
  .slg-row>.slg-b{grid-area:b}
  .slg-row>.slg-bar{grid-area:bar}
  .slg-row>.slg-dx{grid-area:d}
}

/* 순위 사다리: 점 띠(규정타석 전원) + [순위 | 이름 | 장타율 구성 막대 | 값]. 막대 길이 = 장타율, 눈금선 .100마다(--gx) */
.slg-lad{display:flex;flex-direction:column;min-width:0;margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.slg-lrs{display:grid;grid-template-columns:auto fit-content(40%) minmax(0,1fr) auto;column-gap:10px;margin:0;padding:0;list-style:none;--gx:12.5%}
.slg-lr{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;min-height:28px;padding:3px 0;border-top:1px solid var(--soft)}
.slg-r{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;min-width:1.6em}
.slg-n{min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:650;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.slg-n small{font-size:11px;font-weight:500;color:var(--muted)}
.slg-st{position:relative;display:flex;height:14px;background-image:repeating-linear-gradient(to right,var(--soft) 0 1px,transparent 1px var(--gx))}
.slg-st i{display:block;flex:none;height:100%}
.slg-st .slg-s1{background:var(--slg-s1)}
.slg-st .slg-b2{background:var(--slg-b2)}
.slg-st .slg-b3{background:var(--slg-b3)}
.slg-st .slg-hr{background:var(--slg-hr)}
.slg-v{font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums lining-nums}
.slg-lr.is-me{background:var(--accent-wash);border-top-color:transparent;box-shadow:inset 3px 0 0 var(--accent)}
.slg-lr.is-me .slg-r,.slg-lr.is-me .slg-v{color:var(--accent)}
.slg-lr.is-me .slg-n{font-weight:800}
.slg-lr.is-me+.slg-lr{border-top-color:transparent}
.slg-lr.is-grow .slg-st{animation:slg-grow .7s cubic-bezier(.2,.7,.2,1)}
@keyframes slg-grow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.slg-lr.is-avg .slg-n{font-weight:600;color:var(--muted)}
.slg-lr.is-avg .slg-st i{opacity:.5}
.slg-lr.is-avg .slg-v{color:var(--muted)}
.slg-lr.is-gap{min-height:0;padding:1px 0}
.slg-gl{grid-column:2/-1;font-family:var(--sans);font-size:11px;color:var(--muted);letter-spacing:.02em}
.slg-lr.is-strip{border-top:0;padding:0 0 6px;align-items:end}
.slg-sn{font-size:11px;font-weight:600;color:var(--muted)}
.slg-strip{position:relative;display:block;height:60px}
.slg-strip::before{content:"";position:absolute;left:0;right:0;bottom:14px;border-top:1px solid var(--line)}
.slg-ax{position:absolute;bottom:0;transform:translateX(-50%);font-family:var(--mono);font-size:10px;line-height:1;color:var(--muted);white-space:nowrap}
.slg-ax:first-child{transform:none}
.slg-ax.is-end{transform:translateX(-100%)}
.slg-dot{position:absolute;width:6px;height:6px;margin-left:-3px;border-radius:50%;box-sizing:border-box;background:var(--muted);opacity:.55}
.slg-dot.is-hi{background:var(--ink);opacity:.85}
.slg-dot.is-lo{background:var(--card);border:1px solid var(--muted);opacity:1}
.slg-dot.is-eq{background:var(--card);border:1.5px solid var(--accent);opacity:1}
.slg-dot.is-self{display:none}
.slg-avgl{position:absolute;top:8px;bottom:14px;width:0;border-left:1.5px dashed var(--ink);opacity:.55}
.slg-mk{position:absolute;top:0;bottom:14px;width:0;transition:left .55s cubic-bezier(.2,.7,.2,1)}
.slg-mk[hidden]{display:none}
.slg-mk::before{content:"";position:absolute;left:-1px;top:8px;bottom:0;border-left:2px solid var(--accent)}
.slg-mk i{position:absolute;left:-5px;top:0;width:10px;height:10px;transform:rotate(45deg);background:var(--accent);box-shadow:0 0 0 2px var(--card)}
.slg-mk.is-out i{background:var(--card);border:2px solid var(--accent);box-sizing:border-box} /* 눈금 끝(1.200)을 넘는 기록 */
.slg-lr.is-over .slg-st::after{content:"";position:absolute;right:-9px;top:50%;border:5px solid transparent;border-left-color:var(--accent);transform:translateY(-50%)}
.slg-sw{display:flex;flex-wrap:wrap;gap:4px 14px;margin:auto 0 0;padding:10px 0 0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.slg-sw li{display:inline-flex;align-items:center;gap:5px}
.slg-sw i{width:10px;height:10px;border-radius:2px;background:var(--slg-s1)}
.slg-sw [data-k="b2"] i{background:var(--slg-b2)}
.slg-sw [data-k="b3"] i{background:var(--slg-b3)}
.slg-sw [data-k="hr"] i{background:var(--slg-hr)}
.slg-sw [data-k="dot"] i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.85}

/* 읽기 줄 · 식 · 복사 */
.slg-rows{padding:0 18px;border-top:1px solid var(--soft)}
.slg-rows li:first-child{border-top:0}
.slg-rows li span{flex:0 0 auto;max-width:50%}
.slg-rows li b{flex:1 1 auto;min-width:0;white-space:normal;text-align:right}
:lang(ko) .slg-rows li b{word-break:keep-all}
.slg-formula{margin:10px 18px 0;white-space:pre-line;overflow-wrap:anywhere}
.slg-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 slgw (min-width:600px){
  .slg-res{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"hd kpi" "say say"}
}
@container slgw (min-width:760px){
  .slg-main{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
  .slg-led{border-right:1px solid var(--soft)}
  .slg-lad{border-top:0}
}
@container slgw (min-width:780px){
  .slg-rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px}
  .slg-rows li:nth-child(2){border-top:0}
}
@container slgw (max-width:439px){
  .slg-big{font-size:52px}
  .slg-lrs{grid-template-columns:auto fit-content(32%) minmax(0,1fr) auto;column-gap:8px} /* 긴 이름(Pete Crow-Armstrong)이 막대 칸을 누르지 않게 */
  .slg-n{font-size:12px}
  .slg-res,.slg-led,.slg-lad,.slg-top{padding-left:14px;padding-right:14px}
  .slg-rows{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){.slg-fill,.slg-tick,.slg-mk{transition:none}.slg-lr.is-grow .slg-st{animation:none}}