/* 야구 수비율 계산기 전용 CSS (2026-10-22). 수비 지도·기록 식·100번의 기회 격자·수비 평면·목표·읽기 줄 fld-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 fldw — 600 이상 [수비 지도 | 기록], 760 이상 [수비 평면 | 목표·읽기 줄](평면은 옆 칸 높이만큼 늘어남), 560~759는 평면 아래 [목표 | 읽기 줄] */
.fld-work{container:fldw / inline-size}
.fld-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 18px 4px}
.fld-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fld-ex .v2-label{margin-right:2px}
.fld-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);font-variant-numeric:tabular-nums;transition:background var(--ease)}
.fld-chip:hover{background:var(--btn)}
.fld-chip[hidden]{display:none}
.fld-chip .i{width:13px;height:13px}
.fld-hint{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

.fld-main{display:grid;grid-template-columns:minmax(0,1fr)}
/* 수비 지도: 그림(viewBox 320 × 260)과 같은 비율의 상자 위에 포지션 단추를 % 좌표로 얹는다 */
.fld-map{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:12px 18px 14px}
.fld-field{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:320/260}
.fld-fsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fld-of{fill:color-mix(in srgb, var(--wash) 80%, var(--paper));stroke:var(--soft);stroke-width:1}
.fld-dirt{fill:color-mix(in srgb, var(--soft) 55%, var(--card))}
.fld-in{fill:color-mix(in srgb, var(--wash) 80%, var(--paper))}
.fld-foul{fill:none;stroke:var(--line);stroke-width:1.2}
.fld-mound{fill:color-mix(in srgb, var(--soft) 80%, var(--card));stroke:var(--line);stroke-width:1}
.fld-base rect,.fld-base path{fill:var(--card);stroke:var(--line);stroke-width:1}
.fld-pos button{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:46px;padding:3px 6px 4px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);transform:translate(-50%,-50%);font-family:var(--sans);line-height:1.15;color:var(--ink);box-shadow:0 1px 0 var(--soft);transition:background var(--ease),color var(--ease),border-color var(--ease),transform .25s cubic-bezier(.2,.7,.2,1)}
.fld-pos button:hover{background:var(--btn)}
.fld-pos button[hidden]{display:none}
.fld-pos button b{font-size:11.5px;font-weight:700;white-space:nowrap}
.fld-pos button span{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.fld-pos button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill);z-index:1}
.fld-pos button[aria-pressed="true"] span{color:var(--on-fill);opacity:.85}
.fld-pnote{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}

/* 기록: [풋아웃] + [어시스트] + [실책] → 수비율 · 100번의 기회 */
.fld-rec{display:flex;flex-direction:column;gap:12px;min-width:0;margin:0;padding:12px 18px 16px;border-top:1px solid var(--soft)}
.fld-rech{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0}
.fld-rech b{font-family:var(--sans);font-size:15px;font-weight:750;color:var(--ink)}
.fld-eq{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:end;column-gap:6px}
.fld-op{display:grid;place-items:center;height:var(--v2-ctl,42px);font-family:var(--sans);font-size:17px;font-weight:600;color:var(--muted)}
.fld-out{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px 16px}
.fld-res{display:flex;flex-direction:column;min-width:0}
.fld-res .v2-label{margin-bottom:2px}
.fld-big{display:block;font-family:var(--sans);font-size:46px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.fld-big.is-empty{color:var(--muted);opacity:.6}
.fld-sub{margin-top:4px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.fld-waf{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld-cells{display:grid;grid-template-columns:repeat(10,13px);grid-auto-rows:13px;gap:2px}
.fld-cells i{position:relative;display:block;border-radius:2px;background:var(--soft);transition:background-color .3s ease calc(var(--i) * 4ms),box-shadow .3s ease}
.fld-cells i.is-po{background:var(--fill)}
.fld-cells i.is-a{background:color-mix(in srgb, var(--muted) 50%, var(--card))}
.fld-cells i.is-e{background:var(--accent)}
.fld-cells i.is-part{background:linear-gradient(90deg,var(--accent) var(--f,50%),var(--soft) var(--f,50%))}
.fld-cells i.is-lg::after{content:"";position:absolute;inset:-2px;border:1.2px dashed var(--ink);border-radius:3px;opacity:.75}
.fld-cells.is-still i{transition:none}
.fld-wafl{display:flex;flex-direction:column;gap:1px;margin:8px 0 0;font-family:var(--sans);font-size:11px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.fld-wafl:empty{display:none}
.fld-wafl span:first-child{color:var(--ink);font-weight:600}
.fld-rec>.v2-status:empty{display:none}
.fld-verdict{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.fld-verdict:has(.fld-say:empty){display:none}
.fld-say{margin:0;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink)}
.fld-say:empty{display:none}
.fld-say b{font-weight:750}
.fld-warn{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.fld-verdict .v2-formula{margin:0;white-space:pre-line;overflow-wrap:anywhere}

/* 수비 평면 */
.fld-lower{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.fld-plane{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:14px 18px}
.fld-opt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin:0}
.fld-opt>.fld-hint{grid-column:1/-1;margin:0}
.fld-opt>.v2-status{grid-column:1/-1}
.fld-opt>.v2-status:empty{display:none}
.fld-planel{margin:4px 0 -4px}
.fld-svgbox{position:relative;width:100%;aspect-ratio:16/10;min-height:230px;max-height:360px}
.fld-svgbox svg{position:absolute;top:0;left:0;display:block}
.fld-ax line{stroke:var(--muted);stroke-width:1}
.fld-ax line.fld-grid{stroke:var(--soft)}
.fld-ax text{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.fld-ax text.fld-axt{font-family:var(--sans);font-size:11px;font-weight:600}
.fld-avg line{stroke:var(--ink);stroke-width:1.1;stroke-dasharray:4 3}
.fld-avg text{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3px}
.fld-dots circle{fill:var(--muted);fill-opacity:.45;stroke:var(--muted);stroke-width:1.2;transition:fill .3s ease,fill-opacity .3s ease}
.fld-dots circle.is-hi{fill:var(--ink);fill-opacity:1;stroke:var(--ink)}
.fld-dots circle.is-lo{fill:var(--card);fill-opacity:1}
.fld-dots circle.is-eq{fill:var(--accent);fill-opacity:1;stroke:var(--accent)}
.fld-meline,.fld-mept,.fld-melab{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.fld-meline line{stroke:var(--accent);stroke-width:2}
.fld-mept{fill:var(--accent);stroke:var(--card);stroke-width:2}
.fld-mept.is-out{fill:var(--card);stroke:var(--accent)}
.fld-melab{font-family:var(--sans);font-size:12px;font-weight:750;fill:var(--accent);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3px}
.fld-meline.is-off,.fld-mept.is-off,.fld-melab.is-off{opacity:0}
.fld-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.fld-leg li{display:inline-flex;align-items:center;gap:5px}
.fld-leg li[hidden]{display:none}
.fld-leg i{position:relative;flex:0 0 auto;width:9px;height:9px;border-radius:50%;box-sizing:border-box}
.fld-leg [data-k="me"] i{background:var(--accent)}
.fld-leg [data-k="hi"] i{background:var(--ink)}
.fld-leg [data-k="lo"] i{border:1.2px solid var(--muted);background:var(--card)}
.fld-leg [data-k="avg"] i{width:16px;height:0;border-radius:0;border-top:1.2px dashed var(--ink)}
.fld-near{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.fld-near:empty{display:none}

/* 목표 · 읽기 줄 */
.fld-side{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;min-width:0;padding:14px 18px;border-top:1px solid var(--soft)}
.fld-tg{display:flex;flex-direction:column;gap:10px;margin:0;padding:12px 14px;border-radius:var(--radius)}
.fld-tgr{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.fld-tgc{display:flex;flex-wrap:wrap;gap:6px}
.fld-tgo{margin:0;font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.55;color:var(--ink)}
.fld-tgo:empty{display:none}
.fld-rows li{flex-wrap:wrap;row-gap:2px}
.fld-rows li span{flex:0 1 auto;min-width:0}
.fld-rows li b{margin-left:auto;white-space:nowrap;text-align:right} /* 값은 한 덩어리: 자리가 모자라면 통째로 다음 줄 오른쪽 */
.fld-rows li:first-child{border-top:0}
.fld-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--soft)}

@container fldw (max-width:399px){
  .fld-big{font-size:40px}
}
@container fldw (min-width:560px) and (max-width:759px){
  .fld-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* [수비 지도 | 기록] */
@container fldw (min-width:600px){
  .fld-main{grid-template-columns:minmax(240px,300px) minmax(0,1fr)}
  .fld-map{border-right:1px solid var(--soft)}
  .fld-rec{border-top:0;padding-top:14px}
  .fld-verdict{grid-column:1/-1}
}
/* [수비 평면 | 목표·읽기 줄]: 평면 그림은 옆 칸 높이만큼 늘어남(SVG는 칸 크기로 다시 그림) */
@container fldw (min-width:760px){
  .fld-lower{grid-template-columns:minmax(0,1fr) minmax(260px,300px)}
  .fld-side{border-top:0;border-left:1px solid var(--soft)}
  .fld-plane{padding-top:26px} /* 수비 이닝 칸 윗변 = 옆 목표 카드 칸 윗변(옆 칸 여백 14 + 카드 안쪽 12) */
  .fld-svgbox{flex:1 1 auto;aspect-ratio:auto;min-height:250px;max-height:none}
}
@media (prefers-reduced-motion:reduce){.fld-cells i,.fld-pos button,.fld-meline,.fld-mept,.fld-melab,.fld-dots circle{transition:none}}