/* 야구 FIP 계산기 전용 CSS (2026-10-23). 머리 줄·결과 띠(큰 FIP | 세 칸)·기록 칸 8자리·'ERA → FIP' 그림(이동선 + 줄다리기)·항목 셋·읽기 줄 fip-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 fipw — 560 이상 결과 띠 [FIP | 세 칸]·기록 칸 4열·항목 셋 3열, 700 이상 읽기 줄 두 단. 그 아래는 결과 → 세 칸 → 기록 칸 2열 → 그림 → 항목 한 열 */
.fip-work{container:fipw / inline-size}
.fip-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:14px 18px 6px}
.fip-fl{display:flex;flex-direction:column;gap:6px}
.fip-fl .v2-seg{flex-wrap:nowrap}
.fip-fl .v2-seg button{height:var(--v2-ctl,42px);padding:0 14px;font-size:13px}
.fip-pk{flex:1 1 220px;min-width:0;max-width:340px}
.fip-work select{display:block;width:100%;height:var(--v2-ctl,42px);padding:0 8px;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}
.fip-chip{display:inline-flex;align-items:center;gap:5px;height:var(--v2-ctl,42px);margin-left:auto;padding:0 12px;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)}
.fip-chip:hover{background:var(--btn)}
.fip-chip .i{width:13px;height:13px}

/* 결과 띠 — 좁으면 [FIP] → [세 칸] → 문장 */
.fip-sum{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:8px;padding:12px 18px 14px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.fip-res{min-width:0}
.fip-resh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 4px}
.fip-resh .v2-label{font-family:var(--mono);font-weight:700;letter-spacing:.04em}
.fip-ctx{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.fip-big{display:block;font-family:var(--sans);font-size:46px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.fip-big.is-empty{color:var(--muted);opacity:.6}
.fip-big.is-long{font-size:36px}.fip-big.is-xlong{font-size:26px}
.fip-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.fip-kpi>div{display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-width:0;padding:9px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.fip-kpi dt{font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.35;color:var(--muted)}
.fip-kpi dd{overflow-wrap:anywhere;margin:0;font-family:var(--sans);font-size:19px;font-weight:800;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.fip-kpi dd small{display:block;margin-top:3px;font-size:12px;font-weight:700;line-height:1.3;color:var(--muted)} /* 리그 평균 아래 줄(긴 언어는 줄바꿈) */
.fip-say{margin:0;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink)}
.fip-say:empty{display:none}
.fip-say b{font-weight:750}
.fip-gap{display:block;margin-top:4px;font-size:13.5px;color:var(--ink)}
.fip-gap:empty{display:none}

/* 기록 칸 8자리: 좁으면 2열 [이닝 삼진][볼넷 사구][피홈런 평균자책점][상수 안내] */
.fip-line{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;padding:14px 18px 2px}
.fip-line .v2-label{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.fip-w{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:0}
.fip-line .v2-f.is-invalid .v2-input{border-color:var(--accent)}
.fip-chint{align-self:end;margin:0;padding-bottom:2px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.fip-clink{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fip-work>.v2-status{display:block;margin:8px 18px 0}
.fip-work>.v2-status:empty{display:none}

/* 'ERA → FIP' 그림 */
.fip-fig{margin:14px 0 0;padding:12px 18px 4px;border-top:1px solid var(--soft)}
.fip-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0 0 6px}
.fip-hint{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.fip-svgbox{width:100%;overflow:hidden}
.fip-svgbox svg{display:block;max-width:100%;height:auto}
.fip-ax text{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.fip-ax .fip-grid{stroke:var(--soft);stroke-width:1}
.fip-ax .fip-axl{stroke:var(--line);stroke-width:1.2}
.fip-ax text.fip-axn{font-family:var(--mono);font-size:11px;font-weight:700;fill:var(--ink)}
.fip-ax text.fip-tugn{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--muted)}
.fip-lines line{stroke-width:1.3}
.fip-lines circle{stroke:none}
.fip-lines .is-up line{stroke:var(--ink);stroke-opacity:.5}
.fip-lines .is-up circle{fill:var(--ink);fill-opacity:.65}
.fip-lines .is-down line,.fip-lines .is-eq line{stroke:var(--muted);stroke-opacity:.6;stroke-dasharray:3 2}
.fip-lines .is-down circle,.fip-lines .is-eq circle{fill:var(--muted);fill-opacity:.6}
.fip-avg line{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.fip-avg path{fill:var(--card);stroke:var(--ink);stroke-width:1.6}
.fip-me line{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
.fip-me line.fip-link{stroke-width:1.2;stroke-dasharray:2 2}
.fip-me circle{fill:var(--accent);stroke:var(--card);stroke-width:2}
.fip-me circle.is-era{fill:var(--card);stroke:var(--accent);stroke-width:2.2}
.fip-me text{font-family:var(--sans);font-size:11.5px;font-weight:800;fill:var(--accent);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3.5px;stroke-linejoin:round}
.fip-tug rect{stroke:var(--card);stroke-width:1} /* 칸 사이 경계(대비 3:1은 칸마다 배경 대비로) */
.fip-tug .is-c{stroke:var(--ink);stroke-width:1.4}
.fip-cl{font-family:var(--mono);font-size:9.5px;font-weight:700;fill:var(--muted);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.fip-tug .is-cut{fill:var(--ink)}
.fip-tug .is-k{fill:var(--ink)}
.fip-tug .is-bb{fill:var(--muted)}
.fip-tug .is-hr{fill:var(--accent)} /* 세 칸 모두 배경 대비 3:1 이상(라이트 ink·muted 8.2·accent 4.7, 다크 muted 9.0·accent 5.9), 리그 줄도 같은 색으로 범례 하나 */
.fip-tug.is-me .is-flag{fill:var(--accent);stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.fip-tug.is-lg .is-flag{fill:var(--ink);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.fip-tug.is-lg .is-c{opacity:.6}
.fip-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)}
.fip-leg li{display:inline-flex;align-items:center;gap:5px}
.fip-leg i{flex:0 0 auto;display:inline-block;box-sizing:border-box}
.fip-leg [data-k="me"] i{width:16px;height:0;border-top:2.6px solid var(--accent)}
.fip-leg [data-k="up"] i{width:16px;height:0;border-top:1.4px solid color-mix(in srgb,var(--ink) 55%,transparent)}
.fip-leg [data-k="down"] i{width:16px;height:0;border-top:1.4px dashed var(--muted)}
.fip-leg [data-k="avg"] i{width:8px;height:8px;border:1.6px solid var(--ink);background:var(--card);transform:rotate(45deg)}
.fip-leg [data-k="k"] i,.fip-leg [data-k="bb"] i,.fip-leg [data-k="hr"] i,.fip-parts i{width:10px;height:10px;border-radius:2px}
.fip-leg [data-k="k"] i,.fip-parts [data-k="k"] i{background:var(--ink)}
.fip-leg [data-k="bb"] i,.fip-parts [data-k="bb"] i{background:var(--muted)}
.fip-leg [data-k="hr"] i,.fip-parts [data-k="hr"] i{background:var(--accent)}

/* 항목 셋: [색 · 이름 | 값] / 계산 / 리그 평균 투수 */
.fip-parts{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:8px 18px 0;padding:0;list-style:none;border-top:1px solid var(--soft)}
.fip-parts li{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:baseline;gap:2px 10px;padding:9px 0;border-bottom:1px solid var(--soft)}
.fip-pn{display:inline-flex;align-items:center;gap:6px;min-width:0;font-family:var(--sans);font-size:13px;color:var(--ink);word-break:keep-all}
.fip-pn b{font-weight:700}
.fip-pv{font-family:var(--sans);font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;text-align:right}
.fip-pc,.fip-pl{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.fip-pl{text-align:right}
.fip-pc:empty,.fip-pl:empty{display:none}

/* 읽기 줄 · 식 · 복사 */
.fip-rows{padding:2px 18px 4px;margin-top:8px}
.fip-rows li span{flex:0 1 auto;min-width:0}
.fip-rows li b{white-space:normal;text-align:right}
:lang(ja) .fip-rows li b{padding-right:4px} /* 전각 닫는 괄호가 칸 밖으로 나오지 않게 */
.fip-rows li:first-child{border-top:0}
.fip-foot{padding:4px 18px 16px;border-top:1px solid var(--soft)}
.fip-foot .v2-formula{margin-top:10px;white-space:normal;overflow-wrap:anywhere}
.fip-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

@container fipw (max-width:379px){
  .fip-kpi{gap:6px}
  .fip-kpi>div{padding:8px 8px}
  .fip-kpi dd{font-size:16px}
  .fip-chip{margin-left:0}
}
@container fipw (min-width:560px){
  .fip-sum{grid-template-columns:max-content minmax(0,1fr);column-gap:22px;align-items:stretch}
  .fip-res{display:flex;flex-direction:column;justify-content:center;padding-right:22px;border-right:1px solid var(--soft)}
  .fip-say{grid-column:1/-1}
  .fip-line{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fip-parts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;border-top:0}
  .fip-parts li{grid-template-columns:minmax(0,1fr);align-content:start;gap:3px;border-top:1px solid var(--soft)} /* 세 열: 이름 → 값 → 계산 → 리그 평균 투수 */
  .fip-pv,.fip-pl{text-align:left}
}
@container fipw (min-width:700px){
  .fip-rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px}
  .fip-rows li:nth-child(2){border-top:0}
}
@media (hover:none){.fip-head .fip-hint{display:none}} /* 마우스가 없는 기기에는 '선에 올리면 이름' 안내를 숨김 */