/* ==========================================================================
   멀티보드 관리자 — board-settings.css (환경설정 화면)
   ========================================================================== */

/* --------------------------------------------------------------------------
   settings-overlay — 전체화면 레이어
   -------------------------------------------------------------------------- */
.settings-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 577px; z-index: 500; display: flex; background: #0D1117; overflow: hidden; box-shadow: -4px 0 24px #00000099; }
.settings-overlay[hidden] { display: none; }

/* --------------------------------------------------------------------------
   settings-sidebar — 좌측 고정 메뉴
   -------------------------------------------------------------------------- */
.settings-sidebar { flex: 0 0 220px; display: flex; flex-direction: column; background: #0D1117; border-right: 1px solid #1E2833; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2A3440 transparent; }
.settings-sidebar::-webkit-scrollbar { width: 4px; }
.settings-sidebar::-webkit-scrollbar-thumb { background: #2A3440; border-radius: 999px; }
.settings-sidebar::-webkit-scrollbar-track { background: transparent; }

.settings-brand { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 20px; border-bottom: 1px solid #1E2833; margin-bottom: 12px; flex-shrink: 0; }
.settings-brand-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--mb-accent); flex-shrink: 0; }
.settings-brand-icon svg { width: 18px; height: 18px; fill: #FFFFFF; }
.settings-brand-name { font-size: 1.5rem; font-weight: 700; color: #FFFFFF; line-height: 1.2; }
.settings-brand-sub { font-size: 1.2rem; font-weight: 400; color: #6B7580; margin-top: 2px; }

.settings-nav-label { padding: 10px 20px 4px; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #4B5866; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }

.settings-nav-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #8B949E; font-size: 1.4rem; font-weight: 500; line-height: 1; cursor: pointer; text-align: left; transition: background 0.1s ease, color 0.1s ease; white-space: nowrap; width: 100%; }
.settings-nav-item:hover { background: #161D26; color: #CDD6E0; }
.settings-nav-item.active { background: #182030; color: #FFFFFF; font-weight: 600; }
.settings-nav-item svg,
.settings-nav-item img { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.6; }
.settings-nav-item.active svg,
.settings-nav-item.active img { opacity: 1; }

/* --------------------------------------------------------------------------
   settings-content — 우측 본문
   -------------------------------------------------------------------------- */
.settings-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.settings-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 60px; padding: 0 32px; border-bottom: 1px solid #1E2833; background: #0D1117; }
.settings-header-title { font-size: 1.7rem; font-weight: 700; color: #FFFFFF; }

.settings-close-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #2A3440; border-radius: 6px; background: transparent; color: #8B949E; cursor: pointer; transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease; }
.settings-close-btn:hover { background: #1A2330; border-color: #3A4652; color: #FFFFFF; }
.settings-close-btn svg { width: 16px; height: 16px; }

.settings-body { flex: 1; overflow-y: auto; padding: 28px 32px 48px; scrollbar-width: thin; scrollbar-color: #2A3440 transparent; min-height: 0; }

/* 단축키 저장 footer */
.settings-shortcuts-footer { flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; padding: 14px 32px; border-top: 1px solid #1E2833; background: #0D1117; }
.settings-shortcuts-footer[hidden] { display: none; }
.settings-save-btn { height: 38px; padding: 0 24px; border-radius: 7px; background: var(--mb-accent); border-color: var(--mb-accent); color: #FFFFFF; font-size: 1.4rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease; }
.settings-save-btn:hover { background: #10AD88; border-color: #10AD88; }

/* 시간 인풋 (시 : 분 분리) */
.setting-time { display: flex; align-items: center; gap: 6px; }
.setting-time-input { width: 58px; text-align: center; padding: 0 8px !important; }
.setting-time-sep { font-size: 1.6rem; font-weight: 700; color: #6B7580; line-height: 1; }

/* 경기 결과 버튼 */
.game-result-btn { height: 34px; padding: 0 14px; border-radius: 20px; border: 1px solid #2A3644; background: #141C26; color: #8B949E; font-size: 1.3rem; font-weight: 600; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.game-result-btn:hover { border-color: #3A4A5A; color: #CDD6E0; }
.game-result-btn.active { background: #0B2A2F; border-color: #0D9B7A; color: #0DDFEE; }

/* 경기 결과 팀 선택 모달 — settings overlay(z:500) 위에 표시 */
#gameResultModal { z-index: 600; }

/* 경기수 포함 여부 — 비활성(경기 결과 미선택) 상태 */
.game-count-row { transition: opacity 0.18s ease; }
.game-count-row.disabled { opacity: 0.28; pointer-events: none; }

/* 팀별 블록 래퍼 — 두 행을 세로로 쌓음 */
.game-count-block { display: flex; flex-direction: column; gap: 6px; }

/* 한 팀 행: 레이블 + 라디오 옵션들 */
.game-count-team { display: flex; align-items: center; gap: 12px; }
.game-count-label { flex-shrink: 0; font-size: 1.2rem; font-weight: 600; color: #6B7580; white-space: nowrap; width: 36px; text-align: right; }

/* 라디오 옵션 묶음 */
.game-count-options { display: flex; align-items: center; gap: 4px; background: #0A0F18; border: 1px solid #1E2833; border-radius: 6px; padding: 3px; }

/* 라디오 레이블 — 토글 버튼처럼 */
.game-count-radio { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; padding: 4px 10px; border-radius: 4px; transition: background 0.12s ease; }
.game-count-radio:hover { background: rgba(255,255,255,0.05); }
.game-count-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* 커스텀 라디오 마크 */
.game-count-radio-mark { flex-shrink: 0; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #2A3644; background: transparent; transition: border-color 0.12s ease, background 0.12s ease; position: relative; }
.game-count-radio-mark::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: #0D9B7A; opacity: 0; transform: scale(0.3); transition: opacity 0.12s ease, transform 0.14s ease; }
.game-count-radio input[type="radio"]:checked + .game-count-radio-mark { border-color: #0D9B7A; }
.game-count-radio input[type="radio"]:checked + .game-count-radio-mark::after { opacity: 1; transform: scale(1); }

/* 선택 상태 텍스트 강조 */
.game-count-radio-text { font-size: 1.2rem; font-weight: 500; color: #6B7580; white-space: nowrap; transition: color 0.12s ease; }
.game-count-radio input[type="radio"]:checked ~ .game-count-radio-text { color: #CDD6E0; font-weight: 600; }
.settings-body::-webkit-scrollbar { width: 6px; }
.settings-body::-webkit-scrollbar-thumb { background: #2A3440; border-radius: 999px; }
.settings-body::-webkit-scrollbar-track { background: transparent; }

.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: block; }

/* --------------------------------------------------------------------------
   settings-section — 카드 단위 섹션
   -------------------------------------------------------------------------- */
.settings-section { background: #111820; border: 1px solid #1E2833; border-radius: 10px; overflow: hidden; margin-bottom: 36px; padding: 0 20px; }
.settings-section-title { padding: 0 0 12px 0; font-size: 1.5rem; font-weight: 700; color: #CDD6E0; line-height: 1.3; }

/* --------------------------------------------------------------------------
   settings-row — 개별 설정 항목
   -------------------------------------------------------------------------- */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 16px 0; border-bottom: 1px solid #1A2330; }
.settings-row:last-child { border-bottom: 0; }
.settings-row-main { flex: 1; min-width: 0; }
.settings-row-title { font-size: 1.5rem; font-weight: 600; color: #FFFFFF; line-height: 1.4; }
.settings-row-desc { margin-top: 5px; font-size: 1.3rem; font-weight: 600; color: #6B7580; line-height: 1.5; }
.settings-row-control { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* 종속 row — 상위 항목과 연관된 하위 설정 */
.settings-row-sub { padding-top: 12px; padding-bottom: 12px; padding-left: 16px; background: transparent; border-left: 2px solid #2A3644; }
.settings-row-sub .settings-row-title { font-size: 1.3rem; font-weight: 500; color: #8B949E; }

/* --------------------------------------------------------------------------
   컨트롤 컴포넌트
   -------------------------------------------------------------------------- */

/* toggle */
.setting-toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.setting-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.setting-toggle-track { position: absolute; inset: 0; background: #2A3440; border-radius: 999px; transition: background 0.18s ease; border: 1px solid #3A4652; }
.setting-toggle input:checked + .setting-toggle-track { background: var(--mb-accent); border-color: var(--mb-accent); }
.setting-toggle-thumb { position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; transition: transform 0.18s ease; box-shadow: 0 1px 3px #00000066; }
.setting-toggle input:checked ~ .setting-toggle-thumb { transform: translateX(18px); }

/* input */
.setting-input { height: 38px; padding: 0 16px !important; border: 1px solid #2A3644; border-radius: 7px; background: #0A0F18; color: #E8EDF2; font-size: 1.4rem; font-weight: 400; outline: none; transition: border-color 0.15s ease, background 0.15s ease; min-width: 0; }
.setting-input:hover { border-color: #3A4A5A; background: #0D1520; }
.setting-input:focus { border-color: var(--mb-accent); background: #0F1D2A; box-shadow: 0 0 0 2px #0D9B7A26; }
.setting-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); }
.setting-input::placeholder { color: #576470; font-weight: 400; }
.setting-input-wide { width: 280px; }
.setting-input-narrow { width: 100px; }
.setting-input-number { width: 72px; text-align: right; border-radius: 7px 0 0 7px !important; border-right: 0 !important; }

/* 커스텀 스피너 */
.setting-spinner { display: flex; align-items: stretch; }
.setting-spinner-btns { display: flex; flex-direction: column; }
.setting-spinner-btn { display: flex; align-items: center; justify-content: center; width: 22px; flex: 1; padding: 0; border: 1px solid #2A3644; background: #141C26; color: #6B7580; font-size: 0.8rem; line-height: 1; cursor: pointer; transition: background 0.1s ease, color 0.1s ease; }
.setting-spinner-btn:first-child { border-radius: 0 7px 0 0; border-bottom: 0; }
.setting-spinner-btn:last-child { border-radius: 0 0 7px 0; }
.setting-spinner-btn:hover { background: #1A2330; color: #FFFFFF; }

/* select */
.setting-select-wrap { position: relative; }
.setting-select { height: 34px; padding: 0 30px 0 10px; border: 1px solid #2A3440; border-radius: 6px; background: #0D1117; color: #FFFFFF; font-size: 1.35rem; font-weight: 400; appearance: none; outline: none; cursor: pointer; transition: border-color 0.15s ease; }
.setting-select:focus { border-color: var(--mb-accent); }
.setting-select: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); }
.setting-select-wrap::after { content: ''; position: absolute; right: 10px; top: 50%; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #6B7580; transform: translateY(-50%); pointer-events: none; }

/* button */
.setting-button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid #2A3440; border-radius: 6px; background: #141C26; color: #CDD6E0; font-size: 1.3rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.setting-button:hover { background: #1A2330; border-color: #3A4652; color: #FFFFFF; }
.setting-button: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); }
.setting-button svg { width: 14px; height: 14px; opacity: 0.7; }

/* color input row */
.setting-color-group { display: flex; align-items: center; gap: 8px; }
.setting-color-swatch { position: relative; width: 38px; height: 38px; border-radius: 7px; border: 1px solid #2A3644; background: #FFFFFF; padding: 0; cursor: pointer; overflow: hidden; flex-shrink: 0; }
.setting-color-swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; opacity: 0; }
.setting-color-swatch-inner { display: block; width: 100%; height: 100%; border-radius: 5px; }

/* --------------------------------------------------------------------------
   테마 선택 카드 그룹
   -------------------------------------------------------------------------- */
.settings-overlay .theme-option-group { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-overlay .theme-option { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px 8px; border: 1px solid #2A3440; border-radius: 8px; background: #0D1117; cursor: pointer; transition: border-color 0.15s ease, background 0.12s ease; min-width: 88px; }
.settings-overlay .theme-option:hover { border-color: #3A4652; background: var(--mb-surface-2); }
.settings-overlay .theme-option.active { border-color: var(--mb-accent); background: #0B2A2F; }
.settings-overlay .theme-option: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); }
.settings-overlay .theme-option-chips { display: flex; gap: 3px; }
.settings-overlay .theme-chip { width: 18px; height: 18px; border-radius: 4px; border: 1px solid #FFFFFF1A; }
.settings-overlay .theme-option-name { font-size: 1.2rem; font-weight: 600; color: #8B949E; text-align: center; line-height: 1.2; }
.settings-overlay .theme-option-type { font-size: 1.0rem; font-weight: 400; color: #4B5866; }
.settings-overlay .theme-option.active .theme-option-name { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   위치 버튼 그룹 (중계보드 위치)
   -------------------------------------------------------------------------- */
.position-option-group { display: flex; gap: 4px; }
.position-option { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #2A3440; border-radius: 6px; background: #0D1117; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.position-option:hover { border-color: #3A4652; background: var(--mb-surface-2); }
.position-option.active { border-color: var(--mb-accent); background: #0B2A2F; }
.position-option: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); }
.position-option svg,
.position-option img { width: 20px; height: 20px; opacity: 0.5; }
.position-option.active svg,
.position-option.active img { opacity: 1; }
.position-option.active svg { fill: var(--mb-accent); }

/* --------------------------------------------------------------------------
   파일 업로드 + 이미지 미리보기
   -------------------------------------------------------------------------- */
.setting-file-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid #2A3440; border-radius: 6px; background: #141C26; color: #CDD6E0; font-size: 1.3rem; font-weight: 500; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; white-space: nowrap; }
.setting-file-btn:hover { background: #1A2330; border-color: #3A4652; color: #FFFFFF; }

/* 파일명 인풋 */
.setting-input-filename { width: 220px; color: #8B949E !important; font-style: italic; cursor: default; }
.setting-input-filename:not([value=""]):not([value]) { color: #CDD6E0 !important; font-style: normal; }

/* 삭제 버튼 */
.setting-delete-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid #3A2020; border-radius: 6px; background: #1E1212; color: #E05555; font-size: 1.3rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.12s ease, border-color 0.12s ease; }
.setting-delete-btn:hover { background: #2A1414; border-color: #E05555; color: #FF7070; }

/* 이미지 미리보기 박스 */
.setting-img-preview { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #2A3440; border-radius: 6px; background: #0D1117; cursor: default; flex-shrink: 0; overflow: visible; }

/* 빈 상태 — 아이콘 자리 */
.setting-img-preview-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.setting-img-preview-empty img { width: 18px; height: 18px; opacity: 0.45; }

/* 썸네일 상태 */
.setting-img-preview-thumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.setting-img-preview-thumb[hidden] { display: none; }
.setting-img-preview-thumb img { width: 26px; height: 26px; object-fit: contain; border-radius: 3px; }
.setting-img-preview[hidden] { display: none; }

/* 호버 팝업 — 이미지 등록 시 */
.setting-img-preview-popup { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 600; width: 140px; height: 100px; background: #0D1117; border: 1px solid #2A3440; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.6); pointer-events: none; }
.setting-img-preview-popup img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.setting-img-preview.has-image { border-color: #3A4652; cursor: pointer; }
.setting-img-preview.has-image:hover .setting-img-preview-popup { display: block; }
.setting-img-preview.has-image:hover { border-color: #0D9B7A; }

/* --------------------------------------------------------------------------
   단축키 안내 카드
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   테마 선택
   -------------------------------------------------------------------------- */
.settings-theme-wrap { padding: 0 0 20px; }

.settings-theme-selector { display: flex; flex-direction: row; gap: 8px; width: 100%; flex-wrap: wrap; }

.settings-theme-tile { position: relative; flex: 1; min-width: 0; min-height: 86px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 12px 10px 14px; border-radius: 8px; background: #0F1720; border: 2px solid transparent; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.settings-theme-tile:hover { background: #182030; border-color: rgba(255, 255, 255, 0.1); }
.settings-theme-tile.is-active { border-color: #0D9B7A; background: #0B2A2F; }

.settings-theme-swatch { display: inline-flex; gap: 5px; align-items: center; justify-content: center; margin-bottom: 10px; flex-shrink: 0; }
.settings-swatch { display: block; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.12); }

.settings-theme-meta { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; min-width: 0; }
.settings-theme-name { font-size: 1.3rem; font-weight: 700; color: #CDD6E0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.settings-theme-desc { font-size: 1.2rem; color: #5F6872; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.settings-theme-tile.is-active .settings-theme-name { color: #FFFFFF; }
.settings-theme-tile.is-active .settings-theme-desc { color: #0D9B7A; }

/* --------------------------------------------------------------------------
   단축키 안내 카드
   -------------------------------------------------------------------------- */
.shortcut-guide-card { margin: 0; padding: 14px 16px; background: #0D1117; border: 1px solid #1E2833; border-radius: 8px; display: flex; flex-direction: column; gap: 5px; }
.shortcut-guide-card p { margin: 0; font-size: 1.3rem; font-weight: 400; color: #6B7580; line-height: 1.6; }
.shortcut-guide-card p::before { content: '※ '; color: #4B5866; }

/* 단축키 안내 (리뉴얼) */
.shortcut-guide { display: flex; flex-direction: column; gap: 0; padding: 4px 0; }
.shortcut-guide-item { position: relative; margin: 0; padding: 11px 20px 11px 44px; font-size: 1.3rem; font-weight: 500; color: #7A8899; line-height: 1.7; border-bottom: 1px solid #1A2330; }
.shortcut-guide-item:last-child { border-bottom: 0; }
.shortcut-guide-item::before { content: '※'; position: absolute; left: 20px; top: 11px; font-size: 1.3rem; color: #4B5866; line-height: 1.7; }
.shortcut-guide-item strong { font-weight: 700; color: #CDD6E0; }
.shortcut-guide-keys { font-weight: 700; color: #5B9BD5; letter-spacing: 0.05em; }
.shortcut-guide-item em { font-style: normal; font-weight: 700; color: #E8A83A; }

/* --------------------------------------------------------------------------
   단축키 테이블
   -------------------------------------------------------------------------- */
.shortcut-table-wrap { overflow-x: auto; }
.shortcut-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.shortcut-table th { height: 38px; padding: 0 12px; background: #0D1117; border-bottom: 1px solid #1E2833; font-size: 1.25rem; font-weight: 700; color: #A8B4C0; text-align: center; white-space: nowrap; }
.shortcut-table td { height: 44px; padding: 0 12px; border-bottom: 1px solid #1A2330; border-right: 1px solid #1A2330; font-size: 1.3rem; font-weight: 500; color: #dfe3e6; vertical-align: middle; }
.shortcut-table td:last-child { border-right: 0; }
.shortcut-table th:last-child { border-right: 0; }
.shortcut-table tr:last-child td { border-bottom: 0; }
.shortcut-table tbody tr:hover td { background: #FFFFFF08; }
.shortcut-table td.col-group { color: #dfe3e6; font-weight: 600; vertical-align: middle; text-align: center; }
.shortcut-table td.col-sub { color: #dfe3e6; font-size: 1.2rem; text-align: center; }
.shortcut-col-group { width: 110px; }
.shortcut-col-sub { width: 60px; }
.shortcut-col-key { width: auto; }

.key-box-list { display: flex; align-items: center; gap: 4px; }
.key-box { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 26px; padding: 0 8px; border: 1px solid #2A3440; border-radius: 5px; background: #0D1117; font-size: 1.2rem; font-weight: 600; color: #CDD6E0; white-space: nowrap; box-shadow: 0 1px 0 #1A2330; }
.key-box.empty { opacity: 0; pointer-events: none; }

/* 단축키 입력 인풋 */
.key-box-input { display: block; width: 100%; height: 32px; padding: 0 8px !important; border: 1px solid #2A3440; border-radius: 5px; background: #0A0F18; color: #dfe3e6; font-size: 1.2rem; font-weight: 600; text-align: center; outline: none; box-shadow: 0 1px 0 #1A2330; transition: border-color 0.15s ease, background 0.15s ease; }
.key-box-input:hover { border-color: #3A4A5A; background: #0D1520; }
.key-box-input:focus { border-color: var(--mb-accent); background: #0F1D2A; box-shadow: 0 0 0 2px #0D9B7A26; }
.key-box-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); }

/* group-merge 는 rowspan으로 대체되어 더 이상 사용하지 않음 */