/* 야구 컨택트 분석기 전용 CSS (2026-10-23). 박스스코어 줄·100타석 그림·컨택 평면·투구 기록 bct-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 bctw — 560 이상 [입력 3×2 | 컨택트율], 760 이상 입력 6칸 한 줄, 620 이상 [100타석 그림 | 판정·읽기 줄]·[투구 표 | 존 그림]. 그 아래는 결과 → 입력 → 그림 → 평면 한 열 */
.bct-work{container:bctw / inline-size}
.bct-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 18px 4px}
.bct-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bct-ex .v2-label{margin-right:2px}
.bct-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)}
.bct-chip:hover{background:var(--btn)}
.bct-chip .i{width:13px;height:13px}

/* 박스스코어 줄 — 좁은 화면: 컨택트율(결과)이 위, 입력 6칸이 아래 */
.bct-line{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"res" "fs" "hint";gap:8px;padding:10px 18px 0}
.bct-res{grid-area:res;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.bct-big{font-family:var(--sans);font-size:38px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.bct-big.is-empty{color:var(--muted);opacity:.6}
.bct-big.is-long{font-size:32px}
.bct-per{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bct-fs{grid-area:fs;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bct-fs .v2-f.is-invalid .v2-input,.bct-ptab .v2-f.is-invalid .v2-input{border-color:var(--accent)}
.bct-hint{grid-area:hint;margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.bct-work>.v2-status{display:block;margin:8px 18px 0}
.bct-work>.v2-status:empty{display:none}

/* 본판: 100타석 그림 | 판정·읽기 줄 */
.bct-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:14px;padding:14px 18px;border-top:1px solid var(--soft)}
.bct-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0 0 8px}
.bct-note{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.bct-pa{margin:0;min-width:0}
.bct-wafs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;max-width:390px}
.bct-waf{min-width:0}
.bct-wt{margin:0 0 5px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bct-waf[data-k="lg"] .bct-wt{color:var(--muted)}
.bct-cells{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;aspect-ratio:1}
.bct-cells i{display:block;border-radius:2px;background:color-mix(in srgb,var(--ink) 6%,var(--paper));transition:background-color .35s ease var(--d,0ms),box-shadow .35s ease var(--d,0ms)}
.bct-cells i[data-c="so"],.bct-key [data-c="so"] i{background:var(--accent)}
.bct-cells i[data-c="bb"],.bct-key [data-c="bb"] i{background:var(--paper);box-shadow:inset 0 0 0 1.3px color-mix(in srgb,var(--ink) 45%,var(--paper))}
.bct-cells i[data-c="out"],.bct-key [data-c="out"] i{background:color-mix(in srgb,var(--ink) 18%,var(--paper))}
.bct-cells i[data-c="hit"],.bct-key [data-c="hit"] i{background:color-mix(in srgb,var(--ink) 60%,var(--paper))}
.bct-cells i[data-c="hr"],.bct-key [data-c="hr"] i{background:var(--ink)}
.bct-key{width:100%;max-width:390px;margin-top:10px;border-collapse:collapse;font-family:var(--sans);font-size:12.5px;font-variant-numeric:tabular-nums}
.bct-key th,.bct-key td{padding:4px 0;border-top:1px solid var(--soft);text-align:right;font-weight:600;color:var(--ink)}
.bct-key thead th{border-top:0;padding-top:0;font-size:11.5px;color:var(--muted)}
.bct-key tbody th{text-align:left;font-weight:500;color:var(--ink)}
.bct-key tbody th i{display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:2px;vertical-align:-1px}
.bct-key td:last-child{color:var(--muted);padding-left:14px}
.bct-key th:nth-child(2),.bct-key td:nth-child(2){padding-left:12px}
.bct-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.bct-say{margin:0;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink)}
.bct-say:empty{display:none}
.bct-say b{font-weight:750}
:lang(ko) .bct-say,:lang(ko) .bct-rows li,:lang(ko) .bct-prows li,:lang(ko) .bct-near{word-break:keep-all} /* 한국어는 어절 단위로 줄바꿈 */
.bct-warn{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--muted)}
.bct-rows li span,.bct-prows li span{flex:0 1 auto;min-width:min(8em,38%)} /* 값이 길어도 이름 칸이 한 글자 폭으로 눌리지 않게 */
.bct-rows li b,.bct-prows li b{white-space:normal;text-align:right}
:lang(ja) .bct-rows li b,:lang(ja) .bct-prows li b{padding-right:4px} /* 전각 닫는 괄호가 칸 밖으로 나오지 않게 */
.bct-rows li:first-child{border-top:0}

/* 컨택 평면 */
.bct-plane{margin:0;padding:14px 18px;border-top:1px solid var(--soft);min-width:0}
.bct-svgbox{width:100%;overflow:hidden}
.bct-svgbox svg{display:block;max-width:100%;height:auto}
.bct-ax rect{fill:var(--paper);stroke:var(--soft)}
.bct-ax text{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.bct-ax text.bct-axt{font-family:var(--sans);font-size:10.5px;font-weight:600}
.bct-ax text.bct-axt,.bct-ax text.bct-q,.bct-iso text{paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round} /* 곡선·점선이 글자를 가르지 않게 */
.bct-ax text.bct-q{font-family:var(--sans);font-size:10.5px;fill:var(--muted);opacity:.8}
.bct-mid{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.bct-iso path{fill:none;stroke:var(--soft);stroke-width:1}
.bct-iso text{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.bct-isome{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-dasharray:4 3;opacity:.85}
.bct-avg{fill:var(--card);stroke:var(--ink);stroke-width:1.6}
.bct-dots circle{fill:var(--muted);fill-opacity:.45;stroke:var(--muted);stroke-width:1.2;transition:fill .3s ease,fill-opacity .3s ease}
.bct-dots circle.is-hi{fill:var(--ink);fill-opacity:1;stroke:var(--ink)}
.bct-dots circle.is-lo{fill:var(--card);fill-opacity:1}
.bct-dots circle.is-eq{fill:var(--accent);fill-opacity:1;stroke:var(--accent)}
.bct-me{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bct-me circle{fill:var(--accent);fill-opacity:.18;stroke:var(--accent);stroke-width:2.2}
.bct-me.is-out circle{stroke-dasharray:3 2}
.bct-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:3px}
.bct-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)}
.bct-leg li{display:inline-flex;align-items:center;gap:5px}
.bct-leg i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;box-sizing:border-box}
.bct-leg [data-k="me"] i{width:11px;height:11px;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--card))}
.bct-leg [data-k="hi"] i{background:var(--ink)}
.bct-leg [data-k="lo"] i{border:1.2px solid var(--muted);background:var(--card)}
.bct-leg [data-k="eq"] i{background:var(--accent)}
.bct-leg [data-k="avg"] i{width:8px;height:8px;border-radius:0;border:1.6px solid var(--ink);background:var(--card);transform:rotate(45deg)}
.bct-leg [data-k="iso"] i{width:14px;height:0;border-radius:0;border-top:1.4px dashed var(--accent)}
.bct-near{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.bct-near:empty{display:none}

/* 투구 기록(선택) */
.bct-more{border-top:1px solid var(--soft)}
.bct-more>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:13px 18px 13px 40px;position:relative;cursor:pointer;list-style:none}
.bct-more>summary::-webkit-details-marker{display:none}
.bct-more>summary::before{content:"";position:absolute;left:20px;top:18px;width:7px;height:7px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg);transition:transform var(--ease)}
.bct-more[open]>summary::before{transform:rotate(45deg);top:16px}
.bct-more>summary:hover{background:color-mix(in srgb,var(--wash) 50%,transparent)}
.bct-sumt{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink)}
.bct-sums{font-family:var(--sans);font-size:12px;color:var(--muted)}
.bct-pbody{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:2px 18px 16px}
.bct-pleft{display:flex;flex-direction:column;gap:8px;min-width:0}
.bct-ptab{display:grid;grid-template-columns:max-content repeat(3,minmax(0,1fr));align-items:center;gap:6px 8px}
.bct-pc{align-self:end;min-width:0;text-align:right;padding-right:2px;overflow-wrap:anywhere} /* 긴 언어의 열 머리가 옆 칸으로 넘지 않게 */
.bct-pr{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);padding-right:4px}
.bct-po{display:flex;align-items:center;justify-content:flex-end;height:var(--v2-ctl,42px);box-sizing:border-box;padding:0 11px;border:1px dashed var(--soft);border-radius:var(--radius);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bct-pleft>.v2-status:empty{display:none}
.bct-prows li:first-child{border-top:0}
.bct-zone{margin:0;min-width:0}
.bct-zone svg{display:block;width:100%;max-width:360px;height:auto;margin:0 auto}
.bct-zo{fill:var(--paper);stroke:var(--soft)}
.bct-zi{fill:var(--card);stroke:var(--ink);stroke-width:1.6}
.bct-zg{stroke:var(--soft);stroke-width:1;stroke-dasharray:2 3}
.bct-zh{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--ink)}
.bct-zl{font-family:var(--sans);font-size:11px;fill:var(--muted)}
.bct-zv{font-family:var(--sans);font-size:12px;font-weight:750;fill:var(--accent);font-variant-numeric:tabular-nums}
.bct-zv.is-avg{font-weight:600;fill:var(--muted)}
.bct-zt{fill:color-mix(in srgb,var(--ink) 8%,var(--paper))}
.bct-zf{fill:var(--accent)}
.bct-zm{stroke:var(--ink);stroke-width:1.6}
.bct-plate{fill:var(--paper);stroke:var(--muted);stroke-width:1.2}

/* 식 · 복사 */
.bct-foot{padding:4px 18px 16px;border-top:1px solid var(--soft)}
.bct-foot .v2-formula{margin-top:10px;white-space:normal;overflow-wrap:anywhere}
.bct-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

@container bctw (max-width:359px){
  .bct-fs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bct-ptab{grid-template-columns:max-content repeat(3,minmax(0,1fr));gap:5px 5px}
  .bct-po{padding:0 7px;font-size:14px}
}
/* 박스스코어 줄: [입력 3×2 | 컨택트율] */
@container bctw (min-width:560px){
  .bct-line{grid-template-columns:minmax(0,1fr) minmax(150px,max-content);grid-template-areas:"fs res" "hint hint";column-gap:20px;align-items:end;padding-top:12px}
  .bct-res{flex-direction:column;align-items:flex-end;gap:3px;padding-left:18px;border-left:1px solid var(--soft)}
  .bct-big{font-size:42px}.bct-big.is-long{font-size:34px}
  .bct-per{flex:none;text-align:right}
}
@container bctw (min-width:760px){
  .bct-fs{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@container bctw (min-width:620px){
  .bct-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
  .bct-pbody{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
}
@media (hover:none){.bct-plane .bct-hover{display:none}} /* 마우스가 없는 기기에는 '올리면 이름' 안내를 숨김 */
@media (prefers-reduced-motion:reduce){.bct-cells i,.bct-me,.bct-dots circle{transition:none}}