/* 현장 기록 화면 (index.html) 전용 스타일 — 공용은 app.css. 2026-10-19 index.html 에서 나눔 */
/* PC: 왼쪽(구속·투구) / 오른쪽(경기·방송·저장·설정) 열이 각자 쌓인다. 폰: 한 줄로 풀어서 중요한 순서대로 */
.layout { display: grid; gap: 12px; align-items: start; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.col { display: grid; gap: 12px; }
.col > .card { margin: 0; scroll-margin-top: 72px; } /* 위 고정 바에 가리지 않게 (목록 → 태그판 이동 등) */
@media (max-width: 860px) {
  .layout { display: flex; flex-direction: column; align-items: stretch; }
  .col { display: contents; }
  .o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; } .o5 { order: 5; } .o6 { order: 6; } .o7 { order: 7; }
}
/* 지금 할 일: 1 연결 → 2 던지기 → 3 확인 (처음 쓰는 사람도 순서를 바로 알게) */
.guide { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px 16px; border-radius: 18px;
         background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.steps3 li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2);
             color: var(--dim); font-weight: 700; font-size: 15px; min-width: 0; }
.steps3 li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps3 li b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--dim); font-size: 15px; }
.steps3 li.now { background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 0 0 2px var(--accent); }
.steps3 li.now b { background: var(--accent); color: var(--accent-fg); }
.steps3 li.done { color: var(--ok); }
.steps3 li.done b { background: var(--ok); color: #fff; font-size: 0; }
.steps3 li.done b::after { content: "✓"; font-size: 16px; }
.guide-text { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.guide-text small { display: block; font-size: 14px; font-weight: 500; color: var(--dim); margin-top: 2px; }
@media (max-width: 640px) {
  .guide { padding: 12px; }
  .steps3 li { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 13px; text-align: center; }
  .guide-text { font-size: 16px; }
}
.scoreboard { text-align: center; padding: 20px 18px 18px; }
.sb-label { font-size: 15px; font-weight: 700; color: var(--dim); margin-top: 12px; }
.sb-actions { justify-content: center; margin-top: 4px; }
.sb-actions button { min-height: 56px; font-size: 17px; padding: 10px 22px; border-radius: 14px; }
@media (max-width: 640px) { .sb-actions button { flex: 1 1 100%; } }
.sb-help { margin-top: 12px; font-size: 14px; color: var(--dim); }
.sb-pills { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sb-pills .pill { white-space: normal; text-align: left; max-width: 100%; } /* 상태 글이 길어도 폰 화면 밖으로 안 나가게 */
.speed-wrap { margin: 4px 0 0; line-height: 1; }
.speed { font-size: clamp(96px, 24vw, 200px); font-weight: 900; color: var(--accent-ink); letter-spacing: -4px; }
.speed.none { font-size: clamp(64px, 14vw, 104px); letter-spacing: 0; opacity: .22; filter: grayscale(1); } /* 아직 투구 없음: 흐린 야구공 */
.speed.none + .unit { display: none; }
/* 연결된 뒤에는 '연결 끊기'만 크게. 예비 연결(하나가 끊겨도 이어서 기록)은 '+ 예비 연결'을 눌러야 보인다 */
.sb-actions.collapsed .extra { display: none !important; }
.sb-actions #moreConn { min-height: 44px; font-size: 15px; flex: 0 0 auto; }
.unit { font-size: clamp(20px, 4vw, 30px); color: var(--dim); margin-left: 6px; }
.sb-meta { color: var(--dim); margin: 8px 0 14px; }
.sb-meta b { color: var(--fg); }
#live::before { content: " · "; }
#live.below { color: var(--warn); }
.min-hint { margin: -6px 0 12px; font-size: 13px; color: var(--warn); }
.lost { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
        background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.gap-info { margin: 8px 0 0; font-size: 13px; color: var(--warn); }
.tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--dim); margin-left: 4px; }
.sess-sep { font-size: 13px; color: var(--dim); margin: 6px 0 -2px; }
/* 이 투구: 전광판(상황) → 투구 결과(큰 버튼) → 타석 결과(+아웃·득점) → 구종. 야구 기록 앱처럼 공마다 한두 번 누르면 끝나게 */
:root { --ball: #3b8bff; --strike: #f5b041; --outc: #ff5d5d; }
.tag-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tag-head h2 { margin: 0 0 2px; }
.tag-head p { margin: 0; }
.auto-note { margin: 6px 0 10px; font-size: 12px; color: var(--dim); }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 12px;
         background: #0b0d12; border: 1px solid #262b35; color: #e9edf3; }
.stp { display: grid; gap: 3px; justify-items: stretch; text-align: center; padding: 2px 3px; min-width: 0; }
.stp + .stp { border-left: 1px solid #1f2430; }
.stp-k { font-weight: 800; font-size: 13px; color: #9aa3b2; letter-spacing: .5px; }
.stp button { min-height: 34px; padding: 0; border-radius: 8px; background: #1b2029; border-color: #2c3340; color: #e9edf3; font-size: 12px; }
.stp button:disabled { opacity: .3; }
.stp b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lamps { display: flex; gap: 4px; justify-content: center; min-height: 11px; }
.lamps i { width: 11px; height: 11px; border-radius: 50%; background: #272d38; }
.stp[data-k="b"] .lamps i.on { background: var(--ball); }
.stp[data-k="s"] .lamps i.on { background: var(--strike); }
.stp[data-k="o"] .lamps i.on { background: var(--outc); }
@media (max-width: 520px) { .col-who { display: none; } } /* 폰 목록: 투수·타자·메모는 태그 창에서 */
.tg { margin-top: 12px; }
.tg-k { font-size: 12px; color: var(--dim); margin-bottom: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 38px; padding: 6px 12px; border-radius: 999px; font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 700; }
/* 투구 결과: 공마다 누르는 큰 버튼. 색 = 전광판 불빛 (볼 파랑 · 스트라이크 노랑 · 인플레이 초록) */
.tg-res .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } /* 8개 = 4 × 2 */
.tg-res .chip { min-height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; padding: 6px 4px; border-bottom: 4px solid var(--c); white-space: normal; line-height: 1.15; }
.tg-res .chip[aria-pressed="true"] { background: var(--c); color: #0b0d12; border-color: var(--c); }
.chip.c-ball { --c: var(--ball); }
.chip.c-strike { --c: var(--strike); }
.chip.c-play { --c: var(--ok); }
/* 타석이 끝난 투구: 이 플레이로 난 아웃·득점 고르기 (기본값이 미리 골라져 있음) */
.play { margin-top: 10px; padding: 10px 12px; border-radius: 12px; display: grid; gap: 8px;
        border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.play-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.play-row > span { min-width: 34px; font-size: 13px; color: var(--dim); }
.play-row > b { margin-right: 4px; }
.play button { min-height: 40px; min-width: 48px; padding: 4px 10px; border-radius: 10px; }
.play button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 700; }
.next-info { margin: 12px 0 0; font-size: 13px; color: var(--dim); }
.next-info b { color: var(--fg); }
.ctx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
@media (max-width: 520px) { .ctx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ctx .wide { grid-column: 1 / -1; } }
.tagcard.blank .tg, .tagcard.blank .play { opacity: .45; pointer-events: none; }
/* 학교·투수·타자: 누르면 고르기 창 (목록 + 자동 검색) */
.pick { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 1px; text-align: left;
        min-height: 54px; padding: 6px 30px 6px 12px; min-width: 0; }
.pick-k { font-size: 12px; color: var(--dim); }
.pick-v { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-v.unset { color: var(--dim); font-weight: 400; } /* 공통 .empty(빈 목록 안내)와 이름이 겹치지 않게 */
.pick::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--dim); }
dialog.picker { width: min(440px, calc(100vw - 32px)); }
@media (max-width: 860px) { dialog.picker { margin: 0 auto auto; width: 100%; max-width: 100%; border-radius: 0 0 18px 18px; border-top: 0; } }
.pick-list { display: grid; gap: 4px; max-height: min(52vh, 420px); overflow: auto; }
.pick-opt { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; min-height: 46px; padding: 8px 12px; border-radius: 10px; }
.pick-opt small { color: var(--dim); font-weight: 400; }
.pick-opt.on { border-color: var(--accent); font-weight: 700; }
.pick-opt.new { border-style: dashed; color: var(--accent-ink); }
.tag-foot { margin-top: 10px; }
.tag-foot input { flex: 1; min-width: 140px; }
.check { display: flex; gap: 8px; align-items: center; margin-top: 8px; color: var(--dim); }
.check input { width: 18px; height: 18px; flex: none; }
.res-tag { font-size: 12px; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); white-space: nowrap; }
.res-tag.play-tag { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.res-tag.on-tag { background: color-mix(in srgb, #3b8bff 18%, transparent); }
tbody tr.sel { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.trash-link { margin-left: auto; font-size: 13px; color: var(--dim); background: none; border: 0; min-height: 0; padding: 2px 4px; text-decoration: underline; }
.card h2 .trash-link { font-weight: 400; }
.tagcard.flash { animation: flash .7s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
/* 폰: 태그판 대신 한 줄 요약. 투구가 끝나면 아래에서 태그 창이 올라온다 (새 화면처럼) */
#tagMini { display: none; }
.tm { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; min-height: 58px; border: 0; background: none; border-radius: var(--radius); }
.tm-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tm-title { font-weight: 800; font-size: 16px; }
.tm-sub { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-go { font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
@media (max-width: 860px) {
  .col > #tagCard { display: none; }
  #tagMini { display: block; padding: 0; }
}
dialog.sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90dvh; border-radius: 18px 18px 0 0; border-bottom: 0;
               overflow: auto; overscroll-behavior: contain; animation: sheet-in .18s ease-out; }
@keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }
dialog.sheet #tagCard { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
dialog.sheet .sheet-foot { position: sticky; bottom: 0; background: var(--surface); justify-content: space-between; align-items: center;
                           padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
dialog.sheet .sheet-foot .check { margin: 0; }
.sheet-only { display: none; }
/* 폰 태그 창 맨 위: 방금 잰 구속을 크게 (창이 화면을 덮어도 구속이 보이게) + 지금 재는 값 */
.sheet-speed { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line);
               padding: 10px 16px 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.sheet-speed .sh-num { font-size: clamp(44px, 14vw, 64px); font-weight: 800; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.sheet-speed .sh-unit { font-size: 18px; font-weight: 700; color: var(--dim); margin-left: 6px; }
.sheet-speed .sh-meta { text-align: right; font-size: 13px; color: var(--dim); display: grid; gap: 2px; min-width: 0; }
.sheet-speed .sh-meta b { color: var(--fg); }
.sheet-speed .sh-live.below { color: var(--warn); }
dialog.sheet #tgTitle { display: none; } /* 위의 큰 구속과 겹쳐서 */
dialog.sheet .sheet-only { display: inline-flex; }
/* 경기 · 연습 모드 */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; min-height: 40px; font-weight: 700; color: var(--dim); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
#tagCard[data-mode="practice"] .game-only, #tagCard:not([data-mode="practice"]) .practice-only { display: none !important; }
.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } /* 측정 종류 8개 = 4칸 × 2줄 */
.kinds .chip { min-height: 56px; border-radius: 12px; font-size: 16px; font-weight: 700; padding: 6px 4px; white-space: normal; }
.lt-dist { margin-top: 8px; }
.lt-dist .kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lt-dist .kinds .chip { min-height: 44px; font-size: 15px; }
/* 여러 개 고치기 (PC 에서 단체로): 줄마다 선택 칸 + 위에 바꾸기 막대 */
.ck { display: none; width: 30px; }
.bulk-on .ck { display: table-cell; }
.ck input { width: 18px; height: 18px; pointer-events: none; }
tbody tr.picked { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.bulk { display: grid; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; border: 1px dashed var(--accent-ink);
        background: color-mix(in srgb, var(--accent) 6%, transparent); }
.bulk select, .bulk input { width: auto; min-width: 120px; flex: 1; }
.bulk p { margin: 0; }
.toast.show.has-action { pointer-events: auto; } /* 보일 때만 누를 수 있게 (사라진 알림이 그 자리를 막지 않게) */
.toast button { margin-left: 10px; }
.sb-actions { justify-content: center; }
.sb-help { margin-top: 10px; font-size: 13px; }
.stack { display: grid; gap: 10px; }
.list-foot { justify-content: space-between; margin-top: 8px; }
.list-foot p { margin: 0; }
.sess-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.sess-item.current { border-color: var(--accent); }
.sess-item .title { font-weight: 700; }
/* 크로마키 방송 화면: 방송 프로그램에서 창 캡처 + 크로마 키(초록)로 합성. 자막 상자는 불투명해야 키가 먹지 않는다 */
#broadcast { display: none; position: fixed; inset: 0; z-index: 50; background: #00b140; align-items: flex-end; justify-content: center; padding-bottom: 8vh; cursor: pointer; }
body.broadcast #broadcast { display: flex; }
#bcBox { opacity: 0; transform: translateY(16px); transition: opacity .25s, transform .25s; background: #0d1016; color: #fff; border-radius: 18px; padding: 14px 34px; text-align: center; border-left: 8px solid #ff9f1a; }
#bcBox.show { opacity: 1; transform: none; }
#bcLabel { font-size: clamp(18px, 3.5vw, 34px); color: #ffd18a; font-weight: 700; }
#bcWho { color: #fff; margin-left: .4em; }
#bcSpeed { font-size: clamp(72px, 16vw, 180px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
#bcSpeed.hot { color: #ff3030; }
#bcUnit { font-size: clamp(22px, 4.5vw, 48px); margin-left: 8px; }

/* QR */
.qr-box { display: grid; place-items: center; }
.qr-box svg { width: min(300px, 72vw); height: auto; background: #fff; border-radius: 14px; }
.qr-url { margin: 0; text-align: center; font-size: 13px; color: var(--dim); word-break: break-all; }
/* 목록 페이지 (10구씩) */
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 12px 0 4px; }
.pager button { min-width: 40px; }
.pg-gap { color: var(--dim); padding: 0 2px; }
.pg-info { color: var(--dim); font-size: 14px; margin-left: 6px; }
/* 목록: 고른 결과와 상황(카운트·아웃)이 안 맞는 투구가 있으면 한 번에 맞추기 */
.fix-count { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
             background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); font-size: 15px; font-weight: 600; }
.fix-count span { flex: 1 1 220px; }
.fix-count span::before { content: "⚠️ "; }
.fix-count.done span::before { content: "✅ "; }
/* ===== 전광판 6칸 (이닝 초·말 · B · S · O · 원정 · 홈) + 주자 다이아몬드 ===== */
.board { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.stp .half { min-height: 26px !important; margin: 2px auto 0; padding: 0 10px !important; border-radius: 99px !important; font-size: 13px !important;
             font-weight: 800; background: #2a3240 !important; color: #ffd18a !important; }
.stp.sc .stp-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.stp.sc.bat .stp-k { color: #ffd18a; }
.stp.sc.bat .stp-k::before { content: "▶ "; font-size: 9px; }
.diamond-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.diamond { position: relative; width: 104px; height: 104px; flex: none; }
.diamond::before { content: ""; position: absolute; inset: 30px; transform: rotate(45deg); border: 2px solid var(--line); border-radius: 4px; }
.diamond .bs { position: absolute; width: 34px; height: 34px; min-height: 0; padding: 0; transform: rotate(45deg); border-radius: 6px;
               background: var(--surface); border: 2px solid var(--dim); font-size: 0; }
.diamond .bs::after { content: attr(data-n); }
.diamond .bs.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
.diamond .b2 { left: 35px; top: 4px; } .diamond .b3 { left: 4px; top: 35px; } .diamond .b1 { left: 66px; top: 35px; }
.diamond .home { position: absolute; left: 42px; top: 76px; width: 20px; height: 20px; transform: rotate(45deg); background: var(--surface-2); border: 2px solid var(--line); border-radius: 3px; }
.dm-info { display: grid; gap: 3px; min-width: 0; }
.dm-info b { font-size: 17px; }
.dm-info small { color: var(--dim); font-size: 13px; line-height: 1.45; }
/* ===== 투구 태그판 새 디자인 (2026-10-14) ===== */
.board-label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--dim); }
.board-label .bl-tag { padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
.board-label.after .bl-tag { background: var(--accent); color: var(--accent-fg); }
.board-label small { font-weight: 600; }
.stp.bump b { animation: bump .5s ease-out; }
.stp.bump .lamps i.on { animation: glow .6s ease-out; }
@keyframes bump { 0% { transform: scale(1.35); color: var(--accent); } 100% { transform: none; } }
@keyframes glow { 0% { transform: scale(1.5); } 100% { transform: none; } }
.tagcard .tag-head h2 { font-size: 20px; }
.tagcard .auto-note { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 14px; padding: 6px 12px; border-radius: 999px;
                      background: var(--surface-2); color: var(--dim); font-size: 13px; font-weight: 600; }
.tagcard .auto-note::before { content: "💡"; }
/* 전광판: 진짜 야구장 전광판처럼 — 값은 크게, ▲▼ 는 작게, 불빛은 켜지면 빛나게 */
.board { background: linear-gradient(180deg, #161b24, #0a0d12); border: 0; border-radius: 16px; padding: 10px 6px 12px; gap: 2px;
         box-shadow: inset 0 0 0 1px #232a36, 0 6px 18px rgba(10, 14, 20, .18); }
.stp { gap: 2px; }
.stp + .stp { border-left: 1px solid #1c222c; }
.stp-k { font-size: 12px; color: #8a94a6; letter-spacing: 1px; }
.stp b { font-size: 30px; font-weight: 800; color: #fff; }
.stp button { min-height: 28px; background: transparent; border: 0; color: #6b7587; font-size: 12px; border-radius: 8px; }
.stp button:hover:not(:disabled) { background: #1d2430; color: #fff; }
.lamps { gap: 5px; min-height: 13px; margin-top: 2px; }
.lamps i { width: 13px; height: 13px; background: #1f2530; box-shadow: inset 0 0 0 1px #2b3340; }
.stp[data-k="b"] .lamps i.on { box-shadow: 0 0 10px var(--ball); }
.stp[data-k="s"] .lamps i.on { box-shadow: 0 0 10px var(--strike); }
.stp[data-k="o"] .lamps i.on { box-shadow: 0 0 10px var(--outc); }
/* 묶음 제목: ① 공 결과 · ② 타석 결과 · ③ 구종 */
.tagcard .tg { margin-top: 18px; }
.tagcard .tg-k { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 16px; font-weight: 800; color: var(--fg); }
.tagcard .tg-k small { font-size: 13px; font-weight: 600; color: var(--dim); }
/* ① 공 결과: 색이 은은하게 칠해진 큰 버튼 (볼 파랑 · 스트라이크 노랑 · 인플레이 초록), 고르면 진하게 */
.tg-res .chip { min-height: 58px; font-size: 17px; font-weight: 800; border-radius: 14px; color: var(--fg);
                background: color-mix(in srgb, var(--c) 13%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--c) 40%, transparent); }
.tg-res .chip:hover:not(:disabled) { border-color: var(--c); }
.tg-res .chip[aria-pressed="true"] { background: var(--c); color: #0b0d12; border-color: var(--c);
                                     box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 45%, transparent); }
/* ② 타석 결과 · ③ 구종: 고르기 쉬운 알약 버튼 */
.tagcard .tg-pa .chip, .tagcard .tg-type .chip { min-height: 42px; padding: 6px 14px; font-size: 15px; font-weight: 600;
                                               background: var(--surface); border: 1.5px solid var(--line); }
.tagcard .tg-pa .chip[aria-pressed="true"], .tagcard .tg-type .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 800; }
.pa-sub { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 6px 8px; align-items: start; }
.tg-pa .chip.c-ball { --c: initial; } /* 출루 줄의 사구는 일반 알약 모양 */
.pa-sub + .pa-sub { margin-top: 8px; }
.pa-sub > em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--dim); padding-top: 11px; line-height: 1.2; word-break: keep-all; }
.pa-sub.hit > em { color: var(--ok); } .pa-sub.out > em { color: var(--bad); } .pa-sub.on > em { color: #3b8bff; }
/* 아웃·득점 고르기 */
.play { border-radius: 14px; padding: 12px 14px; }
.play button { min-height: 44px; min-width: 52px; font-weight: 700; }
/* 학교·투수·타자: 비어 있으면 점선 '+ 고르기', 고르면 실선 */
.pick { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; min-height: 60px; }
.pick:has(.pick-v.unset) { border-style: dashed; }
.pick-k { font-size: 13px; font-weight: 700; }
.pick-v { font-size: 16px; }
.pick-v.unset { color: var(--accent-ink); font-weight: 700; }
.tag-foot input { min-height: 48px; }
.tagcard > .check { font-size: 14px; margin-top: 12px; }
.tagcard.blank .tg, .tagcard.blank .play { opacity: .5; }