/* 야구 ISO 계산기 전용 CSS (2026-10-23). 머리 줄·결과·기록·ISO 다이아몬드·타율 × ISO 지도·읽기 줄 ic-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 icw — 640 이상 [결과 위·기록 아래 | 다이아몬드], 지도는 늘 전체 폭, 780 이상 읽기 줄 두 단. 그 아래는 한 열(결과 → 기록 → 다이아몬드 → 지도). */
.ic-work{container:icw / inline-size}
.ic-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 14px;padding:14px 18px 6px}
.ic-fl{flex:0 0 auto;min-width:0}
.ic-fl>.v2-label{display:block;margin:0 0 5px}
.ic-fl .v2-seg{flex-wrap:nowrap}
.ic-fl .v2-seg button{height:var(--v2-ctl,42px);padding:0 14px;font-size:13px}
.ic-ex{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-end;gap:6px;flex:1 1 300px;min-width:0}
.ic-ex .v2-label{margin-right:2px}
.ic-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)}
.ic-chip:hover{background:var(--btn)}
.ic-chip[hidden]{display:none}
.ic-chip .i{width:13px;height:13px}
.ic-hint{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

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

/* 결과: 큰 ISO · 등급 · 리그 평균 대비 · 타율·장타율·추가 루타 · 판정 */
.ic-res{grid-area:res;display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 18px 12px}
.ic-resh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0}
.ic-resh .v2-label{font-family:var(--mono);font-weight:700}
.ic-ctx{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.ic-bigrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.ic-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}
.ic-big.is-empty{color:var(--muted);opacity:.55}
.ic-tier{font-family:var(--sans);font-size:13px;font-weight:750;padding:3px 9px;border-radius:var(--radius);background:var(--soft);color:var(--ink);white-space:nowrap}
.ic-tier:empty{display:none}
.ic-tier.t-excellent,.ic-tier.t-great{background:var(--accent);color:var(--on-fill,#fff)}
.ic-tier.t-above{background:var(--accent-wash);color:var(--ink)}
.ic-vs{margin:0;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ic-vs:empty{display:none}
.ic-kpi{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.ic-kpi>div{display:flex;align-items:baseline;gap:7px;padding:6px 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.ic-kpi dt{font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted)}
.ic-kpi dd{margin:0;font-family:var(--sans);font-size:17px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.ic-kpi dd small{margin-left:3px;font-size:11.5px;font-weight:500;color:var(--muted)}
.ic-say{margin:4px 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink)}
.ic-say:empty{display:none}

/* 기록: [타수 | 안타] / [2루타 | 3루타 | 홈런] — 위 줄은 타율, 아래 줄은 ISO를 만드는 칸 */
.ic-form{grid-area:form;display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.ic-fh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0}
.ic-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ic-f[data-g="pair"]{grid-column:span 3}
.ic-f[data-g="xb"]{grid-column:span 2}
.ic-f>.v2-label i{margin-left:5px;font-family:var(--mono);font-size:10.5px;font-style:normal;font-weight:600;opacity:.8}
.ic-f[data-g="xb"] .v2-input{border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.ic-f input{padding:0 9px}
.ic-form>.v2-status:empty{display:none}

/* ISO 다이아몬드: 회색 = 홈 → 1루(안타, 타율), 주황 = 뒤 세 구간(추가 루타, ISO). 굵기 = 타수당 비율 */
.ic-dia{grid-area:dia;min-width:0;margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.ic-ph{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:6px}
.ic-svgbox{position:relative;width:100%;height:260px}
.ic-svgbox svg{position:absolute;top:0;left:0;display:block;overflow:visible}
.ic-field{fill:color-mix(in srgb, var(--wash) 60%, var(--paper));stroke:none}
.ic-track{stroke:var(--soft);stroke-width:2;stroke-linecap:round}
.ic-seg{stroke:var(--accent);stroke-linecap:round;stroke-width:0;transition:stroke-width .5s cubic-bezier(.2,.7,.2,1)}
.ic-seg.ic-s1{stroke:color-mix(in srgb, var(--muted) 62%, var(--paper))}
.ic-base{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.ic-bl{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--muted)}
.ic-sl{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:3px}
.ic-sl1{fill:var(--ink)}
.ic-cl{font-family:var(--mono);font-size:10.5px;font-weight:700;fill:var(--muted)}
.ic-cv{font-family:var(--sans);font-size:24px;font-weight:800;fill:var(--accent);font-variant-numeric:tabular-nums lining-nums}
.ic-cs{font-family:var(--sans);font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.ic-segs{list-style:none;margin:6px 0 0;padding:0;font-family:var(--sans);font-size:12.5px}
.ic-segs li{display:grid;grid-template-columns:12px minmax(0,1fr) auto 3.4em;align-items:baseline;column-gap:8px;padding:3px 0}
.ic-segs i{width:12px;height:4px;border-radius:2px;background:var(--accent);align-self:center}
.ic-segs li[data-s="1"] i{background:color-mix(in srgb, var(--muted) 62%, var(--paper))}
.ic-segs span{min-width:0;color:var(--muted)}
.ic-segs b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.ic-segs em{font-style:normal;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.ic-segs li:not([data-s="1"]):not(.ic-segsum) em{color:var(--accent)}
.ic-segsum{margin-top:3px;padding-top:6px!important;border-top:1px solid var(--soft)}
.ic-segsum i{visibility:hidden}
.ic-segsum span{color:var(--ink);font-weight:700}
.ic-segsum em{font-size:14px;color:var(--accent)}

/* 타율 × ISO 지도 */
.ic-map{grid-area:map;min-width:0;margin:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.ic-ax line{stroke:var(--soft);stroke-width:1}
.ic-ax line.ic-base0{stroke:var(--muted)}
.ic-ax text{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.ic-ax text.ic-axl{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--ink)}
.ic-slg line{stroke:var(--muted);stroke-width:1.1;stroke-dasharray:5 4;opacity:.75}
.ic-slgl{font-family:var(--sans);font-size:10px;fill:var(--muted);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3px}
.ic-avg{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:2 3}
.ic-avgl{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3px}
.ic-q text{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--muted);letter-spacing:.02em;paint-order:stroke;stroke:var(--card);stroke-width:3px}
.ic-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}
.ic-dots circle.is-hi{fill:var(--ink);fill-opacity:1;stroke:var(--ink)}
.ic-dots circle.is-lo{fill:var(--card);fill-opacity:1}
.ic-dots circle.is-eq{fill:var(--card);fill-opacity:1;stroke:var(--accent);stroke-width:1.8} /* 같은 ISO의 다른 타자: 속 빈 강조 고리(이 기록 점과 구분) */
.ic-mk{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ic-mk circle{fill:var(--accent);stroke:var(--card);stroke-width:2.5}
.ic-mk.is-out circle{fill:var(--card);stroke:var(--accent);stroke-width:2}
.ic-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}
.ic-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)}
.ic-leg li{display:inline-flex;align-items:center;gap:5px}
.ic-leg i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;box-sizing:border-box}
.ic-leg [data-k="me"] i{width:11px;height:11px;background:var(--accent)}
.ic-leg [data-k="hi"] i{background:var(--ink)}
.ic-leg [data-k="lo"] i{border:1.2px solid var(--muted);background:var(--card)}
.ic-leg [data-k="slg"] i{width:14px;height:0;border-radius:0;border-top:1.2px dashed var(--muted)}
.ic-leg [data-k="avg"] i{width:14px;height:0;border-radius:0;border-top:1.2px dotted var(--ink)}
.ic-near{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.ic-near:empty{display:none}

/* 읽기 줄 · 식 · 복사 */
.ic-rows{padding:0 18px;border-top:1px solid var(--soft)}
.ic-rows li:first-child{border-top:0}
.ic-rows li span{flex:0 0 auto;max-width:52%}
.ic-rows li b{flex:1 1 auto;min-width:0}
.ic-rows li b{white-space:normal;text-align:right}
:lang(ko) .ic-rows li b{word-break:keep-all}
.ic-formula{margin:10px 18px 0;white-space:pre-line;overflow-wrap:anywhere}
.ic-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 icw (min-width:640px){
  .ic-ex{justify-content:flex-end}
  .ic-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"res dia" "form dia" "map map";grid-template-rows:auto 1fr auto}
  .ic-form{border-top:1px solid var(--soft)}
  .ic-res,.ic-form{border-right:1px solid var(--soft)}
  .ic-dia{border-top:0}
}
@container icw (min-width:780px){
  .ic-rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px}
  .ic-rows li:nth-child(2){border-top:0}
}
@container icw (max-width:439px){
  .ic-big{font-size:50px}
}
@media (prefers-reduced-motion:reduce){.ic-mk,.ic-seg,.ic-dots circle{transition:none}}