/* ==========================================================================
   멀티보드 관리자 — board-field.css (스마트 필드뷰)
   ========================================================================== */

/* --------------------------------------------------------------------------
   스마트 필드뷰
   -------------------------------------------------------------------------- */
.zone-field.field-panel { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; gap: 0; }
.zone-field.field-panel:has(.field-node-wrap.open) { overflow: visible; }
.field-view-body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.field-view-content { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.field-view-body.mode-select .field-view-content { display: none; }
.field-view-body.mode-select .player-select-panel { display: flex; }
.field-view-body.mode-history .field-view-content { display: none; }
.field-view-body.mode-history .pitcher-history-panel { display: flex; }
.field-stage { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 8px 12px; overflow: hidden; box-sizing: border-box; }
.field-stage:has(.field-node-wrap.open) { overflow: visible; }
.field-ground { position: relative; width: 100%; max-width: 100%; aspect-ratio: 680 / 320; overflow: visible; }
.field-ground img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.field-node-wrap { position: absolute; z-index: 5; transform: translate(-50%, -50%); }
.field-node-wrap.open { z-index: 30; }
/* .field-node-wrap 안의 .field-btn은 .field-btn 기본 규칙(position:absolute, translate)을 position:relative + transform:none으로 재정의해서 node-wrap이 직접 absolute 위치를 담당하게 함 */
.field-node-wrap .field-btn { position: relative; transform: none; }
.field-node-wrap .field-btn:active { transform: scale(0.94); }
.field-node-wrap.open .field-btn,
.field-btn[data-role="fielder"][data-state="focused"] { background: #147D89; color: #FFFFFF; }
.field-node-wrap[data-position="cf"] { left: 50%; top: 10%; }
.field-node-wrap[data-position="lf"] { left: 27%; top: 22%; }
.field-node-wrap[data-position="rf"] { left: 73%; top: 22%; }
.field-node-wrap[data-position="ss"] { left: 36%; top: 36%; }
.field-node-wrap[data-position="2b"] { left: 64%; top: 36%; }
.field-node-wrap[data-position="3b"] { left: 22%; top: 50%; }
.field-node-wrap[data-position="1b"] { left: 78%; top: 50%; }
.field-node-wrap[data-position="p"] { left: 50%; top: 66%; }
.field-node-wrap[data-position="c"] { left: 50%; top: 95%; z-index: 2; }
.field-action-menu { position: absolute; top: calc(100% + 6px); left: 50%; z-index: 40; width: 128px; padding: 4px; border: 1px solid #05C7D8; border-radius: 4px; background: #020B16; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); transform: translateX(-50%); overflow: visible; box-sizing: border-box; }
/* [hidden] 속성의 기본 브라우저 동작(display:none)과 동일 — 명시적 선언으로 의도 전달 */
.field-action-menu[hidden] { display: none; }
.field-action-menu::before { content: ""; position: absolute; top: -6px; right: 18px; left: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid #05C7D8; transform: none; }
.field-action-menu::after { content: ""; position: absolute; top: -4px; right: 19px; left: auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid #020B16; transform: none; }
.field-action-item { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 2px; background: transparent; color: #FFFFFF; font-size: 1.2rem; font-weight: 600; line-height: 1; white-space: nowrap; text-align: left; cursor: pointer; box-sizing: border-box; }
.field-action-item + .field-action-item { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.field-action-item.active { background: #03949E; color: #FFFFFF; }
.field-action-item:hover:not(.active) { background: rgba(17, 174, 187, 0.28); }
.field-action-item:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.field-action-item.active:focus-visible { background: #11AEBB; }
.field-btn { position: absolute; z-index: 2; transform: translate(-50%, -50%); min-width: 0; height: auto; margin: 0; padding: 6px 12px; border: none; border-radius: 999px; font-size: 1.3rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: opacity 0.12s ease, box-shadow 0.08s ease, filter 0.08s ease, transform 0.08s ease; }
.field-btn:hover { filter: brightness(1.08); }
.field-btn:active { transform: translate(-50%, -50%) scale(0.94); filter: brightness(0.92); box-shadow: inset 0 1px 2px #000000; transition-duration: 0.05s; }
.field-btn:focus { outline: none; }
.field-btn:focus-visible { box-shadow: 0 0 0 1px rgba(255,255,255,0.85), 0 0 0 3px rgba(255,255,255,0.1); }
.field-btn[data-role="fielder"] { background: #080C12; color: #FFFFFF; }
.field-btn[data-role="runner"] { background: #E8ECF0; color: #111820; }
.field-btn[data-role="runner"][data-state="focused"] { background: #3A8D99; color: #FFFFFF; }
.field-btn[data-position="r2b"] { left: 50%; top: 40%; z-index: 3; }
.field-btn[data-position="r3b"] { left: 28%; top: 65%; z-index: 3; }
.field-btn[data-position="r1b"] { left: 72%; top: 65%; z-index: 3; }
.field-btn[data-position="home"] { left: 50%; top: 85%; z-index: 4; }

/* 현재투수 정보 영역 */
.field-view-footer { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 10px; border-top: 1px solid #404B57; background: #0E1319; box-sizing: border-box; }
.field-pitcher-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.field-pitcher-main { justify-content: space-between; min-height: 28px; padding-bottom: 6px; border-bottom: 1px solid #1E2833; }
.field-pitcher-info { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.pitcher-badge { flex-shrink: 0; padding: 4px 8px; border-radius: 3px; background: #0d6bff40; font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: #1E74FA; white-space: nowrap; }
.pitcher-indicator { flex-shrink: 0; width: 10px; height: 10px; background: #EF4444; border-radius: 1px; }
.pitcher-name { flex: 0 1 auto; min-width: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.pitcher-history-btn { flex-shrink: 0; height: 28px; min-width: 48px; padding: 0 12px; border-radius: 4px; background: transparent; color: #BFC7CE; font-size: 1.2rem; font-weight: 600; }
.btn.pitcher-history-btn:hover { background: #151920; border-color: var(--mb-line-strong); color: #FFFFFF; }
.field-pitcher-stats { justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; }
.pitcher-stat-list { display: flex; flex: 1; align-items: center; min-width: 0; font-size: 1.3rem; font-weight: 500; line-height: 1.3; color: #8B949E; }
.pitcher-stat-list > span { flex: 1 1 0; min-width: 0; padding: 0 8px; border-right: 1px solid #404B57; font-size: 1.3rem; text-align: center; white-space: nowrap; }
.pitcher-stat-list > span:first-child { padding-left: 0; }
.pitcher-stat-list > span:last-child { padding-right: 0; border-right: none; }
.pitcher-stat-list .stat-val { font-style: normal; font-size: 1.4rem; font-weight: 700; color: #C0C8D2; }
.pitcher-stat-list .stat-lbl { font-style: normal; font-weight: 500; font-size: 1.2rem; color: #6B7580; margin-left: 2px; }
.pitcher-count-input { flex-shrink: 0; width: 40px; height: 28px; margin: 0; padding: 0 4px; background: #1A2430; border: 1px solid #5F6872; border-radius: 3px; font-size: 1.3rem; font-weight: 700; line-height: 1; color: #FFFFFF; text-align: center; transition: border-color 0.15s ease, box-shadow 0.15s ease; -moz-appearance: textfield; appearance: textfield; }
.pitcher-count-input:focus,
.pitcher-count-input:focus-visible { outline: none; border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 0 0 2px rgba(255,255,255,0.1); }
.pitcher-count-input::-webkit-inner-spin-button,
.pitcher-count-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* 선수 선택 패널 (공통) */
/* [hidden] 속성 추가/제거로 패널 노출 제어. JS에서는 hidden attribute + .mode-select 클래스를 함께 사용 */
/* .player-select-panel[hidden] { display: none; } 은 기본 display:none과 동일하므로 불필요 */
.player-select-panel { display: none; flex-direction: column; flex: 1; min-height: 0; padding: 14px 18px 16px; background: #101820; box-sizing: border-box; }
.player-select-head { flex: 0 0 auto; }
.player-select-title { margin: 0 0 6px; font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: #FFFFFF; }
.player-select-desc { margin: 0 0 10px; font-size: 1.3rem; font-weight: 500; line-height: 1.4; color: #DCE3EA; }
.player-select-target { color: #00D4E0; font-weight: 700; }
.player-select-panel .player-select-search { position: relative; width: 100%; flex: 0 0 auto; margin-bottom: 12px; }
.player-select-panel .player-select-search-icon { display: block; position: absolute; left: 12px; top: 50%; z-index: 2; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; opacity: 0.8; }
.player-select-panel .player-select-search-input { display: block; width: 100%; height: 36px; margin: 0; padding: 0 12px 0 38px; border: 1px solid #3A4652; border-radius: 2px; background: #070D14; color: #FFFFFF; font-size: 1.3rem; font-weight: 500; line-height: 36px; box-sizing: border-box; outline: none; appearance: none; -webkit-appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.player-select-panel .player-select-search-input::placeholder,
.player-select-panel .player-select-search-input::-webkit-input-placeholder { color: #7E8994; opacity: 1; font-size: 1.3rem; font-weight: 500; }
.player-select-panel .player-select-search-input:focus,
.player-select-panel .player-select-search-input:focus-visible { outline: none; border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }
.player-select-table-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.player-select-table-wrap::-webkit-scrollbar { width: 3px; }
.player-select-table-wrap::-webkit-scrollbar-thumb { background: rgba(60, 70, 82, 0.65); border-radius: 999px; }
.player-select-table-wrap::-webkit-scrollbar-track { background: transparent; }
.player-select-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.player-select-table th,
.player-select-table td { height: 36px; padding: 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); color: #FFFFFF; font-size: 1.4rem; font-weight: 500; text-align: left; }
.player-select-table th { position: sticky; top: 0; z-index: 1; background: #101820; color: #8E98A3; font-weight: 700; }
.player-select-table tbody tr { cursor: pointer; transition: background 0.12s ease; }
.player-select-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.player-select-table tbody tr.selected { background: rgba(0, 195, 205, 0.12); outline: 1px solid #00C3CD; outline-offset: -1px; }
.player-select-table th:nth-child(1),
.player-select-table td:nth-child(1) { width: 12%; text-align: center; }
.player-select-table th:nth-child(2),
.player-select-table td:nth-child(2) { width: 44%; text-align: left; padding-left: 10px; }
.player-select-table th:nth-child(3),
.player-select-table td:nth-child(3) { width: 18%; text-align: center; }
.player-select-table th:nth-child(4),
.player-select-table td:nth-child(4) { width: 26%; text-align: center; }
.player-select-panel .player-select-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 8px; padding-top: 10px; }
.player-select-panel .btn.player-select-submit { min-width: 72px; height: 30px; padding: 0 14px; border-radius: 3px; background: #007B69; border-color: #007B69; color: #FFFFFF; font-size: 1.3rem; font-weight: 700; }
.player-select-panel .btn.player-select-submit:hover { background: #008C7A; border-color: #008C7A; }
.player-select-panel .btn.player-select-cancel { min-width: 52px; height: 30px; padding: 0 14px; border-radius: 3px; background: #0B1118; border: 1px solid #3D4854; color: #FFFFFF; font-size: 1.3rem; font-weight: 600; }
.player-select-panel .btn.player-select-cancel:hover { background: #151D26; border-color: #5F6872; }

/* 투수 이력 확인 패널 */
/* [hidden] 속성 추가/제거로 패널 노출 제어. JS에서는 hidden attribute + .mode-history 클래스를 함께 사용 */
/* .pitcher-history-panel[hidden] { display: none; } 은 기본 display:none과 동일하므로 불필요 */
.pitcher-history-panel { display: none; flex-direction: column; flex: 1; min-height: 0; padding: 14px 18px 16px; background: #101820; box-sizing: border-box; }
.pitcher-history-head { flex: 0 0 auto; }
.pitcher-history-title { margin: 0 0 12px; color: #FFFFFF; font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.pitcher-history-current { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.pitcher-history-label { flex-shrink: 0; color: #00D4E0; font-size: 1.4rem; font-weight: 700; white-space: nowrap; }
.pitcher-history-chip { display: inline-block; flex-shrink: 0; width: 14px; height: 14px; border-radius: 1px; }
.pitcher-history-chip.current { background: #F08A00; }
.pitcher-history-chip.previous { background: #E60000; }
.pitcher-history-name { flex-shrink: 0; color: #FFFFFF; font-size: 1.4rem; font-weight: 700; white-space: nowrap; }
.pitcher-history-stat { flex: 1; min-width: 0; }
.pitcher-history-section { display: flex; flex: 1; flex-direction: column; min-height: 0; padding-top: 12px; }
.pitcher-history-section-title { display: block; flex: 0 0 auto; margin-bottom: 8px; color: #8B949E; font-size: 1.3rem; font-weight: 600; }
.pitcher-history-list { flex: 1; min-height: 0; overflow-y: auto; }
.pitcher-history-list::-webkit-scrollbar { width: 3px; }
.pitcher-history-list::-webkit-scrollbar-thumb { background: rgba(60, 70, 82, 0.65); border-radius: 999px; }
.pitcher-history-list::-webkit-scrollbar-track { background: transparent; }
.pitcher-history-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; background: #0B121A; box-sizing: border-box; }
.pitcher-history-player { flex-shrink: 0; color: #FFFFFF; font-size: 1.4rem; font-weight: 600; white-space: nowrap; }
.pitcher-history-row-stat { flex: 1; min-width: 0; }
/* 투수이력 패널 내 stat-list — border 구분선 제거하고 gap으로 처리 */
.pitcher-history-empty { display: flex; align-items: center; justify-content: center; height: 48px; color: #5F6872; font-size: 1.3rem; font-weight: 500; }
.pitcher-history-panel .pitcher-stat-list > span { border-right: none; padding: 0; }
.pitcher-history-panel .pitcher-stat-list > span + span::before { content: "/"; margin-right: 6px; color: #3A4652; }
.pitcher-history-panel .pitcher-stat-list { gap: 6px; flex-wrap: nowrap; }
.pitcher-history-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.pitcher-history-panel .btn.pitcher-history-close { min-width: 72px; height: 30px; padding: 0 14px; border: 1px solid #3D4854; border-radius: 4px; background: #0B1118; color: #FFFFFF; font-size: 1.3rem; font-weight: 700; }
.pitcher-history-panel .btn.pitcher-history-close:hover { background: #151D26; border-color: #5F6872; }