/* ==================== ⚾ 프리미엄 스포츠 허브 테마 (다크) ====================
   컨셉: 실제 KBO 라이선스 모바일 야구게임 UI 참고
   - 배경: 짙은 네이비/차콜 톤 다크모드 (사용자 요청에 따라 라이트 → 다크로 재전환)
   - 카드/패널: 둥근 모서리(border-radius) + 짙은 그림자(soft box-shadow)
   - 버튼: 둥근 캡슐/라운드 버튼 + 은은한 컬러 그림자
   - 배지: pill(완전 둥근) 형태
   - 포인트 컬러: 선명한 레드(#e51937 계열)
==================================================================== */
:root {
  --bg-dark: #0f1218;
  --bg-panel: #1a1e27;
  --bg-panel-2: #20242f;
  --bg-input: #262b38;
  --chip-bg: #262b38;
  --border-c: #333a48;
  --primary: #e51937;
  --primary-dark: #b3122a;
  --primary-soft: rgba(229,25,55,0.16);
  --accent: #f5a623;
  --accent-bg: #ffb020;
  --grass: #22c55e;
  --green: #22c55e;
  --red: #f87171;
  --text-main: #eef1f6;
  --text-sub: #9aa3b5;
  --grade-normal: #94a3b8;
  --grade-rare: #5b9bf5;
  --grade-hero: #b060f0;
  --grade-legend: #fbbf24;
  --font-display: 'Noto Sans KR', 'Pretendard', sans-serif;
  --font-mono: 'Noto Sans KR', 'Pretendard', sans-serif;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  /* 하위 호환용(과거 clip-path 조형 변수) - 신규 디자인에서는 사용하지 않음 */
  --card-clip: none;
  --card-clip-sm: none;
  --ribbon-clip: none;
  --btn-clip: none;
  --btn-clip-sm: none;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  position: relative;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--primary); color: #fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
::-webkit-scrollbar-thumb { background: var(--border-c); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.hidden { display: none !important; }

/* ==================== 배경: 짙은 네이비/차콜 + 은은한 레드 글로우 ==================== */
.bg-fx {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(229,25,55,0.16), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(229,25,55,0.08), transparent 55%),
    var(--bg-dark);
  opacity: 1;
}
.bg-fx::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(15,18,24,0.55) 100%);
}
.stadium-glow {
  position: absolute; width: 46%; height: 40%;
  background: radial-gradient(ellipse at center, rgba(229,25,55,0.14), transparent 70%);
  filter: blur(6px);
}
.stadium-glow-1 { top: -6%; left: -8%; }
.stadium-glow-2 { top: -6%; right: -8%; background: radial-gradient(ellipse at center, rgba(255,176,32,0.12), transparent 70%); }
.bg-grid { display: none; }

/* ==================== 로그인 화면: 좌우 분할 레이아웃 ==================== */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-frame {
  width: 100%; max-width: 920px;
  display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 24px 60px rgba(31,36,48,0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 560px;
}
.login-visual {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 55%, #4a0510 100%);
  padding: 42px 36px; display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.login-visual-mark { font-size: 44px; margin-bottom: 10px; }
.login-visual-title {
  font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.25;
  color: #fff; letter-spacing: 0.3px; margin: 0 0 14px;
}
.login-visual-sub { color: #fff; font-size: 13px; opacity: 0.92; margin: 0 0 20px; line-height: 1.5; }
.login-visual-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.login-visual-list li { font-size: 12.5px; font-weight: 700; color: #fff; padding-left: 20px; position: relative; }
.login-visual-list li::before { content: '⚾'; position: absolute; left: 0; top: -1px; font-size: 11px; }
.login-visual-foot { font-size: 11px; color: rgba(255,255,255,0.75); border-top: 1px solid rgba(255,255,255,0.25); padding-top: 14px; line-height: 1.6; }
.login-card {
  width: 100%;
  background: var(--bg-panel);
  padding: 30px 0 30px;
  position: relative;
  overflow-y: auto;
}
.login-title {
  text-align: center; font-size: 22px; font-weight: 800; margin: 0 0 6px; font-family: var(--font-display);
  letter-spacing: 0.2px; color: var(--text-main);
}
.login-sub {
  text-align: center; color: var(--text-sub); font-size: 12.5px; margin-bottom: 20px;
  padding: 0 28px;
}
.login-note {
  text-align: center; color: var(--grass); font-size: 11.5px; margin: 20px 28px 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-c);
}
.field-group { margin-bottom: 15px; padding: 0 28px; }
.field-group label {
  display: block; font-size: 12px; color: var(--text-sub); margin-bottom: 6px; font-weight: 700;
  letter-spacing: 0.2px;
}
.field-group input, .field-group select {
  width: 100%; padding: 12px 14px;
  background: var(--bg-input); border: 1px solid var(--border-c);
  color: var(--text-main); font-size: 14px;
  outline: none; transition: border-color .15s, box-shadow .15s;
  border-radius: var(--radius-sm);
}
.field-group input:focus, .field-group select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field-group select option:disabled { color: var(--text-sub); }
.field-group select option { background: var(--bg-input); color: var(--text-main); }

/* ==================== 버튼: 둥근 캡슐 버튼 + 소프트 그림자 ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 22px; border: none;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.1px;
  border-radius: var(--radius-sm);
  transition: transform .08s ease, box-shadow .15s ease, filter .1s ease, background .15s ease;
  position: relative;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: 0 6px 16px rgba(229,25,55,0.28);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { box-shadow: 0 2px 8px rgba(229,25,55,0.28); }
.btn-accent {
  background: var(--accent-bg); color: #241900;
  box-shadow: 0 6px 16px rgba(255,176,32,0.28);
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-accent:active { box-shadow: 0 2px 8px rgba(255,176,32,0.28); }
.btn-outline {
  background: var(--bg-input); border: 1px solid var(--border-c); color: var(--text-main);
  box-shadow: none;
  padding: 11px 20px;
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-outline:active { transform: translateY(1px); }
.btn-danger {
  background: rgba(220,38,38,0.08); color: var(--red); border: 1px solid var(--red);
  box-shadow: none; padding: 11px 20px;
}
.btn-danger:hover { background: rgba(220,38,38,0.15); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none !important; box-shadow: none !important; }
.btn-sm { padding: 8px 14px; font-size: 11.5px; border-radius: var(--radius-sm); box-shadow: none; }
.btn-sm:active { transform: translateY(1px); }

.login-tabs { display: flex; gap: 10px; margin: 0 28px 20px; }
.login-tab {
  flex: 1; text-align: center; padding: 10px; border-radius: var(--radius-sm);
  background: var(--chip-bg); color: var(--text-sub); font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--border-c); letter-spacing: 0.1px;
}
.login-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ==================== 대시보드 레이아웃: 좌측 세로 사이드바 + 우측 HUD/콘텐츠 ==================== */
.app-shell {
  display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; align-items: stretch;
}
.side-nav {
  background: var(--bg-panel); border-right: 1px solid var(--border-c);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 20px 14px;
}
.side-nav-brand {
  display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; font-family: var(--font-display);
  letter-spacing: 0.1px; color: var(--text-main); margin-bottom: 22px; padding: 0 4px;
}
.side-nav-mark {
  font-size: 20px; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: var(--primary); border-radius: var(--radius-sm); flex-shrink: 0;
}
.side-nav-theme-btn {
  margin-top: auto; padding: 11px 14px; background: var(--chip-bg); border: 1px solid var(--border-c);
  border-radius: var(--radius-sm); color: var(--text-sub); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1px; cursor: pointer;
  box-shadow: none; transition: all .15s; margin-bottom: 10px;
}
.side-nav-theme-btn:hover { border-color: var(--accent-bg); color: var(--accent); }
.side-nav-theme-btn:active { transform: translateY(1px); }
.side-nav-logout {
  padding: 11px 14px; background: var(--chip-bg); border: 1px solid var(--border-c);
  border-radius: var(--radius-sm); color: var(--text-sub); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1px; cursor: pointer;
  box-shadow: none; transition: all .15s;
}
.side-nav-logout:hover { border-color: var(--red); color: var(--red); }
.side-nav-logout:active { transform: translateY(1px); }
/* 사용자 요청 대응: 지금 서버에 배포된 Code.gs의 빌드 버전을 사이드바 하단에 작게 표시(재배포 여부 확인용) */
.side-nav-build-version {
  margin-top: 8px; padding: 4px 2px; font-size: 10px; color: var(--text-sub); opacity: 0.65;
  text-align: center; letter-spacing: 0.1px; word-break: break-all; user-select: text;
}

/* ==================== 🎨 팀 컬러 커스터마이징 팝업 ==================== */
.team-color-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 10px; margin-bottom: 16px; }
.team-color-swatch {
  width: 100%; aspect-ratio: 1 / 1; border: 3px solid transparent; cursor: pointer;
  border-radius: var(--radius-sm); position: relative; box-shadow: 0 3px 8px rgba(31,36,48,0.18);
  transition: transform .1s;
}
.team-color-swatch:hover { transform: translateY(-2px); }
.team-color-swatch.active { border-color: #1f2430; }
.team-color-swatch.active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 18px; text-shadow: 0 0 4px rgba(0,0,0,0.5); }
.team-color-custom-row {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-sub);
  padding-top: 14px; border-top: 1px solid var(--border-c);
}
.team-color-custom-row input[type="color"] {
  width: 42px; height: 32px; padding: 0; border: 1px solid var(--border-c); background: none; cursor: pointer; border-radius: 8px;
}
.team-color-custom-row #team-color-picker-hex { font-family: var(--font-mono); color: var(--text-main); font-weight: 700; }

.stat-hud {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 24px; background: var(--bg-panel); position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--border-c); box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.stat-chip {
  background: var(--chip-bg);
  border: 1px solid var(--border-c);
  border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; display: flex; gap: 6px; align-items: center;
  font-weight: 700;
}
.stat-chip b { color: var(--accent); font-weight: 800; font-family: var(--font-mono); letter-spacing: 0.2px; }

.tab-nav {
  display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto;
}
.tab-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-sub); font-size: 13px; font-weight: 700; white-space: nowrap; transition: all .15s;
  letter-spacing: 0.1px; text-align: left; width: 100%;
}
.tab-btn-ico { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.tab-btn:hover { color: var(--text-main); background: var(--chip-bg); }
.tab-btn.active {
  color: #fff; background: var(--primary); border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(229,25,55,0.25);
}

.content-col { min-width: 0; display: flex; flex-direction: column; }
.main-content { padding: 22px; max-width: 1200px; margin: 0 auto; width: 100%; }
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-c); border-radius: var(--radius-lg);
  padding: 22px; margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(31,36,48,0.06);
  position: relative;
}
.panel-title {
  font-size: 16px; font-weight: 800; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font-family: var(--font-display); letter-spacing: 0.1px;
  padding: 0 0 12px;
  position: relative;
}
.panel-title::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  border-bottom: 1px solid var(--border-c);
}
.panel-title::before {
  content: ''; position: absolute; right: 0; top: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
}
.panel-title .sub-action { font-size: 12px; font-weight: 500; color: var(--text-sub); font-family: 'Noto Sans KR', sans-serif; }
/* 패널 제목 옆 인라인 리셋류 버튼(예: 기록 초기화) - 텍스트가 너무 길어 보이지 않도록 짧게 표기하고 pill 스타일 통일 */
.btn-inline-reset {
  cursor: pointer; background: none; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px; padding: 4px 12px; color: inherit; font-size: 11.5px; white-space: nowrap;
}
.btn-inline-reset:hover { border-color: var(--primary); color: var(--primary); }

/* ==================== 📖 접이식 안내(패널 설명) ====================
   사용자 요청(2026-07-10): "선수단/강화/라인업 등 곳곳의 안내 글자가 너무 길어 보기 안 좋다" — 각 탭 상단에
   길게 늘어져 있던 설명 문단을 "한 줄 핵심 요약 + 필요할 때만 펼쳐보는 상세 설명(details/summary)"으로 정리한다.
   기본 상태는 접혀 있어 화면이 훨씬 깔끔해지고, 궁금한 사용자는 눌러서 전체 설명을 볼 수 있다. */
.panel-info {
  margin: -6px 0 16px; background: var(--bg-panel-2); border: 1px solid var(--border-c);
  border-radius: var(--radius-md); overflow: hidden;
}
.panel-info summary {
  cursor: pointer; padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-sub);
  list-style: none; display: flex; align-items: center; gap: 8px; user-select: none;
  transition: color .15s;
}
.panel-info summary::-webkit-details-marker { display: none; }
.panel-info summary::after { content: '더 보기 ▾'; margin-left: auto; font-weight: 600; font-size: 11.5px; color: var(--accent); flex-shrink: 0; white-space: nowrap; }
.panel-info[open] summary::after { content: '접기 ▴'; }
.panel-info summary:hover { color: var(--text-main); }
.panel-info-body {
  padding: 0 14px 14px; font-size: 12.5px; color: var(--text-sub); line-height: 1.75;
  border-top: 1px solid var(--border-c); margin-top: -2px; padding-top: 12px;
}
.panel-info-body b { color: var(--text-main); }
.panel-info-body br + br { display: none; }

/* 카드 그리드 */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.player-card {
  background: var(--bg-panel-2);
  /* 🆕 OVR 기반 테두리 색상(2026-07-13): playerCardHTML이 인라인으로 심어주는 --ovr-border 변수를
     테두리 색으로 사용한다(변수가 없는 예외적인 경우를 대비해 --border-c를 기본값으로 둠). 등급별
     상단 색바(::before)는 그대로 유지되고, 카드 테두리 자체만 오버롤 수치에 따라 달라진다. */
  border: 2px solid var(--ovr-border, var(--border-c)); border-radius: var(--radius-md);
  padding: 16px 16px 14px; position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 4px 14px rgba(31,36,48,0.06), 0 0 0 1px var(--ovr-border, transparent) inset;
}
.player-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(31,36,48,0.12), 0 0 0 1px var(--ovr-border, transparent) inset; border-color: var(--ovr-border, var(--primary)); }
.player-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.player-card.grade-normal::before { background: var(--grade-normal); }
.player-card.grade-rare::before { background: var(--grade-rare); }
.player-card.grade-hero::before { background: var(--grade-hero); }
.player-card.grade-legend::before { background: var(--grade-legend); }
/* ⚠️ 기존에는 전설 등급 카드 테두리를 금색(rgba(245,158,11,0.5))으로 강제 고정했으나, 이제 테두리는
   OVR 색상 체계(--ovr-border)를 항상 따르도록 통일한다(등급 구분은 상단 색바 + 반짝임 효과로 충분). */
/* ✨ 레전드(전설) 등급 카드 홀로그램 반짝임 */
.player-card.grade-legend { position: relative; }
.player-card.grade-legend::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%, transparent 40%,
    rgba(255,255,255,0.7) 48%, rgba(245,158,11,0.55) 52%, rgba(255,255,255,0.7) 56%,
    transparent 62%, transparent 100%);
  background-size: 250% 250%;
  background-position: 130% 130%;
  mix-blend-mode: multiply;
  animation: legend-shine 3.2s ease-in-out infinite;
  z-index: 2;
}
@keyframes legend-shine {
  0% { background-position: 160% 160%; }
  45% { background-position: -20% -20%; }
  100% { background-position: -20% -20%; }
}

.player-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin: 6px 0 10px; gap: 8px; }
.player-card-top > div { min-width: 0; }
/* 이름+배지(⭐강화/부상 등)가 길게 이어져도 카드 폭을 벗어나지 않도록 줄바꿈 허용 */
.player-name { font-size: 15.5px; font-weight: 800; overflow-wrap: break-word; line-height: 1.35; }
.player-pos { font-size: 11.5px; color: var(--text-sub); letter-spacing: 0.1px; overflow-wrap: break-word; }
.player-origin-team { display: inline-block; margin-left: 6px; font-size: 10.5px; color: var(--text-sub); opacity: 0.85; white-space: nowrap; }
.grade-badge {
  font-size: 10.5px; font-weight: 700; padding: 4px 11px; color: #fff;
  border-radius: 999px; letter-spacing: 0.1px;
  /* 🐛 버그 수정(2026-07-13, 사용자 리포트: "영웅 배지가 원형으로 쪼그라들면서 글자가 세로로 겹쳐 보임"):
     한글은 공백 없이도 글자 사이에서 줄바꿈이 가능한 특성이 있어, 이 배지가 flex 아이템으로서 압축
     (shrink)되면 "영웅"처럼 짧은 텍스트도 한 글자씩 세로로 쌓이며 원형 배지처럼 보이는 문제가 있었다.
     nowrap으로 줄바꿈을 막고 flex-shrink:0으로 압축되지 않게 고정해 항상 한 줄, 원래 크기로 표시한다. */
  white-space: nowrap; flex-shrink: 0;
}
.grade-badge.grade-normal { background: var(--grade-normal); }
.grade-badge.grade-rare { background: var(--grade-rare); }
.grade-badge.grade-hero { background: var(--grade-hero); }
.grade-badge.grade-legend { background: var(--grade-legend); color: #241900; }

.stat-bars { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.stat-bar-row { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--text-sub); }
.stat-bar-row .label { width: 32px; flex-shrink: 0; }
.stat-bar-track { flex: 1; height: 6px; background: var(--chip-bg); overflow: hidden; border-radius: 999px; }
.stat-bar-fill { height: 100%; background: var(--primary); border-radius: 999px; }
.stat-bar-row .val {
  width: 32px; flex-shrink: 0; text-align: center; color: var(--accent); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  background: var(--chip-bg); padding: 1px 0; border-radius: 6px;
}

/* 🆕 OVR/가격 표시 행: 겹침 방지를 위해 배지는 줄바꿈되지 않도록 고정, 가격만 필요 시 줄바꿈 */
.player-card-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 10px; flex-wrap: nowrap;
}
.overall-tag {
  display: inline-flex; align-items: baseline; gap: 4px; flex: 0 0 auto; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--accent); font-family: var(--font-mono);
  background: var(--chip-bg); padding: 4px 10px; border-radius: 8px;
  letter-spacing: 0.2px;
}
.overall-tag b { font-size: 17px; font-weight: 800; }
.player-price {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 12px; color: var(--text-sub); overflow-wrap: break-word;
}
.player-card .btn { width: 100%; }
.player-card .card-btn-row { display: flex; gap: 8px; }
.player-card .card-btn-row .btn { flex: 1; padding: 10px 6px; font-size: 11.5px; }
.enhance-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: #241900;
  background: var(--accent-bg); padding: 3px 10px; border-radius: 999px; margin-left: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.enhance-bar-wrap { margin: 10px 0; }
.enhance-bar-track { height: 7px; background: var(--chip-bg); overflow: hidden; border-radius: 999px; }
.enhance-bar-fill { height: 100%; background: var(--grade-hero); border-radius: 999px; }
.enhance-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-sub); margin-top: 4px; }

/* 별 강화(성급) 배지 */
.star-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: #241900;
  background: var(--accent-bg); padding: 3px 10px; border-radius: 999px; margin-left: 6px;
  white-space: nowrap; flex-shrink: 0;
}
/* 라인업/로테이션 등록 배지 */
.lineup-badge-row { margin: -2px 0 8px; }
.lineup-badge {
  display: inline-block; font-size: 10px; font-weight: 700; color: #fff;
  background: var(--primary); padding: 3px 11px; border-radius: 999px;
}
.btn-sell { background: rgba(217,119,6,0.1); color: var(--accent); border: 1px solid var(--accent-bg); box-shadow: none; padding: 11px 20px; }

/* ==================== 선수단/방출 탭 검색·필터·정렬 툴바 ==================== */
.roster-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 14px; padding: 12px 14px; background: var(--bg-panel-2);
  border: 1px solid var(--border-c); border-radius: var(--radius-md);
}
.roster-search-input {
  flex: 1 1 220px; min-width: 160px; padding: 9px 14px; background: var(--bg-input);
  border: 1px solid var(--border-c); color: var(--text-main); font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif; border-radius: var(--radius-sm);
}
.roster-search-input::placeholder { color: var(--text-sub); }
.roster-search-input:focus { outline: none; border-color: var(--primary); }
.roster-filter-select {
  padding: 9px 12px; background: var(--bg-input); border: 1px solid var(--border-c);
  color: var(--text-main); font-size: 12.5px; font-family: 'Noto Sans KR', sans-serif;
  cursor: pointer; border-radius: var(--radius-sm);
}
.roster-filter-select:focus { outline: none; border-color: var(--primary); }

/* ==================== 선수단 탭 내부 서브 탭(타자/투수) ==================== */
.sub-tab-nav { display: flex; gap: 10px; margin: 6px 0 18px; }
.sub-tab-btn {
  padding: 9px 20px; background: var(--bg-panel-2); border: 1px solid var(--border-c);
  border-radius: 999px;
  color: var(--text-sub); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.sub-tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.sub-tab-btn .sub-tab-count { font-size: 11px; font-weight: 700; opacity: 0.85; }

/* ==================== 선수단 다중 선택(방출) ==================== */
.roster-bulk-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.35); border-radius: var(--radius-md);
  padding: 10px 16px; margin-bottom: 16px; font-size: 12.5px; font-weight: 700; color: var(--red);
}
.roster-bulk-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.roster-bulk-bar-actions .btn { padding: 8px 15px; font-size: 12px; }
.card-grid .player-card.select-mode { cursor: pointer; }
.card-grid .player-card.selected { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.player-card-select-row {
  display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-sub);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-c);
}
.player-card-select-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.player-card-select-row label { cursor: pointer; user-select: none; }

/* 선택된 선수들의 예상 치료비/판매환급/방출환급을 보여주는 칩 영역 */
.roster-bulk-cost-row { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; order: 3; }
.roster-bulk-cost-chip {
  display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--chip-bg); border: 1px solid var(--border-c); color: var(--text-main);
}
.roster-bulk-cost-chip.heal { border-color: rgba(22,163,74,0.4); color: var(--green); background: rgba(22,163,74,0.08); }
.roster-bulk-cost-chip.sell { border-color: rgba(217,119,6,0.4); color: var(--accent); background: rgba(217,119,6,0.08); }
.roster-bulk-cost-chip.release { border-color: rgba(220,38,38,0.4); color: var(--red); background: rgba(220,38,38,0.08); }

/* 현재 탭(타자/투수) 전체 선택 체크박스 행 */
.roster-select-all-row {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-sub);
  margin: -4px 0 16px; cursor: pointer; user-select: none; width: fit-content;
}
.roster-select-all-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.roster-select-all-row:hover { color: var(--text-main); }

/* ==================== 강화 결과 배너 ==================== */
.enhance-result-banner {
  text-align: center; font-weight: 700; padding: 12px; border-radius: var(--radius-md); margin: 10px 0; font-size: 13px;
  border: 1px solid;
}
.enhance-result-banner.success { background: rgba(22,163,74,0.08); color: var(--green); border-color: var(--green); }
.enhance-result-banner.fail { background: rgba(220,38,38,0.08); color: var(--red); border-color: var(--red); }

/* ==================== 강화 탭(2단 레이아웃: 목록 + 상세) ====================
   사용자 요청(2026-07-10): "모바일에서 강화 부분이 아래에 위치해 불편하다 → 위로 올려달라"
   → HTML상 DOM 순서는 상세(enhance-detail-col)를 목록(enhance-list-col)보다 먼저 두고,
   데스크톱에서는 order로 원래 배치(목록 왼쪽 → 상세 오른쪽)를 유지한다. */
.enhance-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: start; }
.enhance-list-col { order: 1; }
.enhance-detail-col { order: 2; }
.enhance-list-col .card-grid { max-height: 640px; overflow-y: auto; padding: 4px; }
.enhance-list-col .player-card { cursor: pointer; padding: 12px; }
.enhance-list-col .player-card.selected { border-color: var(--accent-bg); box-shadow: 0 0 0 3px rgba(255,176,32,0.18); }
.enhance-detail-col {
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-lg); padding: 18px;
  position: sticky; top: 90px;
}
.enhance-detail-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-c); }
.enhance-stat-row {
  display: flex; justify-content: space-between; align-items: center; font-size: 13px;
  color: var(--text-sub); padding: 8px 0; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-c);
}
.enhance-stat-row span { overflow-wrap: break-word; min-width: 0; }
.enhance-stat-row b { color: var(--accent); font-size: 13.5px; font-family: var(--font-mono); background: var(--chip-bg); padding: 1px 8px; border-radius: 6px; }
.enhance-boost-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-sub); padding: 10px 0;
}
.enhance-boost-row .btn { padding: 7px 13px; font-size: 11px; white-space: nowrap; }

/* 🔁 연속강화(자동 반복 강화) 입력행 */
.enhance-auto-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-c); font-size: 12px; color: var(--text-sub);
}
.enhance-auto-row input[type="number"] {
  width: 64px; padding: 7px 8px; background: var(--bg-input); border: 1px solid var(--border-c);
  color: var(--text-main); font-weight: 700; font-size: 13px; text-align: center; border-radius: var(--radius-sm);
}
.enhance-auto-row input[type="number"]:focus { border-color: var(--accent-bg); outline: none; }
.enhance-auto-row .btn { padding: 7px 13px; font-size: 11.5px; white-space: nowrap; }

/* 🔁 연속강화 결과를 "한 번에"가 아니라 한 줄씩 순차적으로 재생해서 보여주는 로그 영역
   (사용자 요청 2026-07-09: "자동강화를 30회 누르면 한번에 되는데 하나씩 순차적으로 안되나?").
   중계 로그(.broadcast-line)와 동일한 CSS animation-delay 기법을 사용해, 메인 스레드 지연에도
   재생 순서/타이밍이 밀리지 않도록 한다. */
.enhance-auto-log {
  margin-top: 10px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
}
.enhance-auto-log-line {
  font-size: 12px; padding: 8px 12px; background: var(--bg-input); border-radius: var(--radius-sm);
  border-left: 4px solid var(--border-c); color: var(--text-sub);
  opacity: 0; transform: translateY(6px); animation: enhanceAutoLogIn .28s ease forwards;
}
.enhance-auto-log-line.success { border-left-color: var(--green); color: var(--green); font-weight: 700; background: rgba(34,197,94,0.08); }
.enhance-auto-log-line.starup { border-left-color: var(--accent-bg); color: var(--accent); font-weight: 800; background: rgba(245,158,11,0.1); }
.enhance-auto-log-line.fail { border-left-color: var(--text-sub); color: var(--text-sub); }
.enhance-auto-log-line.downgrade { border-left-color: var(--red); color: var(--red); font-weight: 700; background: rgba(220,38,38,0.08); }
@keyframes enhanceAutoLogIn { to { opacity: 1; transform: translateY(0); } }

/* ==================== 2026-07-09 개편: "1~15강 강화"와 "⭐ 별강화" 완전 분리 섹션 ==================== */
/* 사용자 요청: 두 섹션을 시각적으로도 뚜렷하게 구분해, 어느 섹션이 지금 진행 대상인지 한눈에 보이게 한다. */
.enhance-phase-panel { position: relative; }
.enhance-phase-panel + .enhance-phase-panel { margin-top: 18px; }
.enhance-phase-progress {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--chip-bg); padding: 2px 10px; border-radius: 999px; margin-left: 8px;
}
.enhance-done-banner {
  background: rgba(34,197,94,0.1); border: 1px solid var(--green); color: var(--green);
  padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; margin-top: 6px;
}
#enhance-star-panel .panel-title { color: var(--accent); }

/* ==================== 라인업 화면: 포지션 슬롯 카드 ==================== */
.lineup-grid { display: flex; flex-direction: column; gap: 22px; }
.lineup-section-title {
  font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.1px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-c);
}
.lineup-section-count {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-sub); background: var(--chip-bg);
  padding: 2px 10px; border-radius: 999px;
}
.lineup-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lineup-slot {
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md); padding: 14px;
}
.lineup-slot-label { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.lineup-slot select {
  width: 100%; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border-c);
  color: var(--text-main); font-size: 13px; margin-bottom: 8px; border-radius: var(--radius-sm);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.lineup-slot-player { font-size: 12px; color: var(--text-sub); min-height: 34px; overflow-wrap: break-word; }
.lineup-slot-player .ovr { color: var(--accent); font-weight: 700; font-family: var(--font-mono); background: var(--chip-bg); padding: 1px 6px; border-radius: 6px; }
.lineup-slot.filled { border-color: var(--primary); }
/* 신규: 야수 슬롯 타순(1~9번) 지정 셀렉트 */
.lineup-batting-order-select {
  width: 100%; padding: 8px 10px; margin-top: 8px; background: var(--bg-input); border: 1px solid var(--grass);
  color: var(--grass); font-weight: 700; font-size: 12.5px; border-radius: var(--radius-sm);
}
.lineup-batting-order-select:disabled { border-color: var(--border-c); color: var(--text-sub); opacity: 0.6; }

/* ==================== 난이도 선택 패널 ==================== */
.difficulty-panel {
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px;
}
.difficulty-info-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }
.difficulty-slider-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.difficulty-step-btn { padding: 9px 15px; font-size: 16px; font-weight: 700; flex: none; }
#difficulty-slider {
  flex: 1; height: 8px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--green), var(--accent-bg), var(--primary));
  outline: none; cursor: pointer; border-radius: 999px;
}
#difficulty-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text-main); border: 3px solid var(--primary); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
#difficulty-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--text-main); border: 3px solid var(--primary);
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.difficulty-current-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.difficulty-level-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 50px; padding: 6px 12px;
  background: var(--chip-bg); color: var(--accent); font-weight: 700; font-size: 13px;
  font-family: var(--font-mono); border-radius: 999px; letter-spacing: 0.2px;
}
.difficulty-name-text { font-weight: 700; font-size: 14px; flex: 1; }
.difficulty-detail { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-sub); }
.difficulty-detail .chip { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border-c); background: var(--chip-bg); }
.difficulty-badge-lv1, .difficulty-badge-lv2, .difficulty-badge-lv3 { color: var(--grade-normal); }
.recommend-tag { color: var(--green); font-weight: 700; }

/* 뽑기 화면 */
.gacha-hero {
  text-align: center; padding: 32px 20px; border-radius: var(--radius-lg);
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
}
.gacha-machine { font-size: 56px; margin-bottom: 12px; }
.gacha-hero .panel-title { border: none; }
.gacha-hero .panel-title::after, .gacha-hero .panel-title::before { display: none; }
.gacha-actions { display: flex; gap: 14px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.gacha-prob-list { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; font-size: 12px; }
.prob-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-c); background: var(--chip-bg); }

.gacha-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 20px; }
.gacha-result-card {
  background: var(--bg-panel-2); border-radius: var(--radius-md); padding: 16px; text-align: center;
  border: 1px solid var(--border-c); animation: popIn .3s ease;
  box-shadow: 0 6px 16px rgba(31,36,48,0.08);
}
.gacha-result-card.dup { opacity: 0.65; }
@keyframes popIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 경기 화면: 스코어보드 */
.match-arena {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 26px 10px; text-align: center;
}
.match-side { flex: 1; }
.match-vs {
  font-size: 22px; font-weight: 800; color: var(--accent); font-family: var(--font-display);
}
.match-team-name { font-weight: 800; font-size: 15px; margin-bottom: 8px; letter-spacing: 0.2px; }
.match-score {
  display: inline-block; font-size: 40px; font-weight: 800; font-family: var(--font-mono);
  background: var(--chip-bg); padding: 6px 24px; border-radius: var(--radius-md); color: var(--accent);
}
.match-overall { font-size: 11.5px; color: var(--text-sub); margin-top: 8px; }
.match-result-banner {
  text-align: center; font-size: 19px; font-weight: 800; padding: 12px; margin-top: 14px;
  font-family: var(--font-display); letter-spacing: 0.3px; border: 1px solid; border-radius: var(--radius-md);
}
.match-result-banner.win { background: rgba(22,163,74,0.08); color: var(--green); border-color: var(--green); }
.match-result-banner.lose { background: rgba(220,38,38,0.08); color: var(--red); border-color: var(--red); }
.match-result-banner.draw { background: rgba(148,163,184,0.10); color: var(--text-sub); border-color: var(--border-c); }

/* 🧪 2026-07-11: 정밀 이닝 시뮬레이션 테스트 경기 모드 — 기존 경기 UI와 시각적으로 구분되도록
   점선 테두리 + 옅은 강조색 배경을 사용해 "이건 테스트 전용 영역"임을 한눈에 알 수 있게 한다. */
.precision-test-section {
  border: 1.5px dashed var(--accent); border-radius: var(--radius-lg); background: rgba(245, 158, 11, 0.05);
}
.precision-test-section summary {
  font-weight: 800; color: var(--accent);
}
.precision-test-body { padding-top: 4px; }

/* 테이블 */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-c); white-space: nowrap; }
th { color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.2px; background: var(--primary); }
th:first-child { border-radius: 8px 0 0 0; }
th:last-child { border-radius: 0 8px 0 0; }
tbody tr:hover { background: rgba(31,36,48,0.03); }
tr.me { background: var(--primary-soft); }
.rank-num { font-weight: 700; color: var(--accent); font-family: var(--font-mono); background: var(--chip-bg); padding: 2px 9px; border-radius: 999px; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-sub); }

/* 토스트 */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast {
  background: var(--bg-panel); border: 1px solid var(--border-c); color: var(--text-main);
  border-radius: var(--radius-md);
  padding: 12px 20px; font-size: 13px; opacity: 0; transform: translateX(30px);
  transition: all .3s; box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  /* 강화/연속강화 결과처럼 능력치 증감을 나열하는 긴 메시지도 줄바꿈되어 잘리지 않도록 처리 */
  overflow-wrap: break-word; line-height: 1.5;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-error { border-color: var(--red); color: var(--red); }
.toast-success { border-color: var(--green); color: var(--green); }

/* 로딩 오버레이 */
#loading-overlay {
  position: fixed; inset: 0; background: rgba(15,18,24,0.9); z-index: 1000;
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
#loading-overlay.active { display: flex; }
.spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.12); border-top-color: var(--primary);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== 공용 확인 팝업 ==================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,22,28,0.55); z-index: 1100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: modalFadeIn .18s ease;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  width: 100%; max-width: 420px; background: var(--bg-panel); border: 1px solid var(--border-c);
  border-radius: var(--radius-lg); padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  animation: modalPop .2s ease;
  /* 등급 승급 재료 미리보기처럼 modal-body 내용이 길어지는 경우, 화면(특히 모바일)을 벗어나
     버튼이 안 보이는 문제를 막기 위해 팝업 자체를 세로 스크롤 가능하게 제한한다. */
  max-height: 88vh; overflow-y: auto;
}
@keyframes modalPop { from { transform: translateY(10px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal-title { margin: 0 0 12px; font-family: var(--font-display); font-size: 19px; letter-spacing: 0.2px; color: var(--accent); }
.modal-body { font-size: 13.5px; color: var(--text-main); line-height: 1.7; }
.modal-body .modal-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-c); flex-wrap: wrap; }
.modal-body .modal-row span, .modal-body .modal-row b { overflow-wrap: break-word; min-width: 0; }
.modal-body .modal-row b { color: var(--accent); }
.modal-body .modal-warn { margin-top: 10px; padding: 8px 10px; background: rgba(220,38,38,0.08); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; color: var(--red); font-size: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ==================== 업적(도전과제) 탭 ==================== */
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.achievement-card {
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
  padding: 16px; position: relative; opacity: 0.55; filter: grayscale(0.6);
  transition: opacity .2s ease, filter .2s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px rgba(31,36,48,0.05);
}
.achievement-card.achieved { opacity: 1; filter: none; border-color: rgba(245,158,11,0.5); }
.achievement-card.achieved:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(31,36,48,0.12); }
.achievement-card.claimed { border-color: var(--green); }
.achievement-icon { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.achievement-name { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; overflow-wrap: break-word; }
/* 업적 설명이 길어 카드 높이가 제각각이라 보기 안 좋았던 문제 대응: 최대 3줄까지만 보이고
   그 이상은 말줄임(…) 처리한다. 전체 문장은 title 속성(hover 시 브라우저 기본 툴팁)으로 확인 가능. */
.achievement-desc {
  font-size: 12px; color: var(--text-sub); line-height: 1.5; min-height: 34px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; cursor: help;
}
.achievement-reward { margin-top: 10px; font-size: 12.5px; color: var(--accent); font-weight: 700; }
.achievement-status { margin-top: 4px; font-size: 11px; color: var(--text-sub); }
.achievement-card .btn { width: 100%; margin-top: 10px; }

/* ==================== 컨디션 / 부상 표시 ==================== */
.condition-row { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--text-sub); margin: 8px 0; }
.condition-track { flex: 1; height: 6px; background: var(--chip-bg); overflow: hidden; border-radius: 999px; }
.condition-fill { height: 100%; background: var(--green); border-radius: 999px; }
.condition-fill.low { background: var(--red); }
.injury-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--red); padding: 3px 10px; border-radius: 999px; margin-left: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.btn-heal { background: rgba(22,163,74,0.08); color: var(--green); border: 1px solid var(--green); box-shadow: none; padding: 11px 20px; }

/* ==================== 로테이션 화면: 불펜 순번표 ==================== */
.rotation-current-badge {
  background: rgba(217,119,6,0.08); border: 1px solid var(--accent-bg); color: var(--accent);
  border-radius: var(--radius-md);
  padding: 11px 16px; font-weight: 700; font-size: 13px; margin-bottom: 16px;
}
.rotation-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rotation-item {
  display: flex; align-items: center; gap: 12px; background: var(--bg-panel-2);
  border: 1px solid var(--border-c); border-radius: var(--radius-md); padding: 12px 16px;
}
.rotation-item.current { border-color: var(--accent-bg); }
.rotation-order-num {
  width: 30px; height: 30px; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
  font-family: var(--font-mono); border-radius: 50%;
}
.rotation-item .rot-name { font-weight: 700; flex: 1; }
.rotation-item .rot-ovr { color: var(--accent); font-weight: 700; font-size: 13px; font-family: var(--font-mono); background: var(--chip-bg); padding: 2px 9px; border-radius: 999px; }
.rotation-item .rot-btns { display: flex; gap: 6px; }
.rotation-item .rot-btns button {
  padding: 5px 11px; font-size: 10.5px; background: var(--bg-input);
  border: 1px solid var(--border-c); color: var(--text-main); border-radius: var(--radius-sm);
}
.rotation-item .rot-btns button:hover { border-color: var(--primary); }
.rotation-item.bench { opacity: 0.55; }

/* ==================== 실시간 중계: 아나운스 티커 ==================== */
.broadcast-box { margin-top: 18px; background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-lg); padding: 16px; }
.broadcast-log { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
/* 사용자 리포트(2026-07-10, 모바일 스크린샷): 중계 로그 한 줄의 배경이 흰색(#ffffff)으로 하드코딩되어 있어,
   다크테마의 밝은 글자색(--text-main)과 거의 구분되지 않고 거의 안 보이는 문제. 다크테마 전용 배경/글자색으로 수정. */
.broadcast-line {
  font-size: 12px; padding: 8px 12px; background: var(--bg-input); color: var(--text-main); border-radius: var(--radius-sm);
  border-left: 4px solid var(--border-c); opacity: 0; transform: translateY(6px);
  animation: broadcastIn .3s ease forwards;
}
.broadcast-line.score { border-left-color: var(--accent-bg); color: var(--accent); font-weight: 700; }
.broadcast-line.final { border-left-color: var(--green); color: var(--green); font-weight: 800; }
.broadcast-line.pitching-change { border-left-color: var(--grade-hero); color: var(--grade-hero); font-style: italic; background: rgba(147,51,234,0.06); }
/* 🆕 2026-07-13(11차, PvP 투수교체/대타기용): 정밀모드의 .pitching-change와 동일한 강조를 PvP
   중계 로그의 kind 값(pitchingChange/pinchHit)에도 적용한다. */
.broadcast-line.event-pitchingChange { border-left-color: var(--grade-hero); color: var(--grade-hero); font-style: italic; background: rgba(147,51,234,0.06); }
.broadcast-line.event-pinchHit { border-left-color: var(--grade-hero); color: var(--grade-hero); font-style: italic; background: rgba(147,51,234,0.06); }
@keyframes broadcastIn { to { opacity: 1; transform: translateY(0); } }

/* ==================== 🎯 중계 이벤트 종류(kind)별 강조 스타일 ====================
   요청 반영: 홈런/도루/병살/삼진/볼넷 등 "무슨 일이 있었는지"가 중계 로그에서 한눈에
   구분되도록, 텍스트 색상뿐 아니라 아이콘(::before)까지 함께 붙여 시각적으로 강조한다. */
.broadcast-line.event-homerun {
  border-left-color: var(--primary); color: var(--primary); font-weight: 800;
  background: rgba(229,25,55,0.06);
}
.broadcast-line.event-homerun::before { content: '💥 '; }
.broadcast-line.event-triple,
.broadcast-line.event-double {
  border-left-color: var(--accent-bg); color: var(--accent); font-weight: 700;
}
.broadcast-line.event-single { border-left-color: var(--accent-bg); color: var(--text-main); }
.broadcast-line.event-steal { border-left-color: var(--grass); color: var(--grass); font-weight: 700; }
.broadcast-line.event-steal::before { content: '🏃 '; }
.broadcast-line.event-stealFail { border-left-color: var(--text-sub); color: var(--text-sub); font-style: italic; }
.broadcast-line.event-gdp { border-left-color: var(--red); color: var(--red); font-weight: 700; }
.broadcast-line.event-gdp::before { content: '⚠️ '; }
.broadcast-line.event-strikeout,
.broadcast-line.event-strikeoutPitched { border-left-color: var(--grade-rare); color: var(--grade-rare); font-weight: 700; }
.broadcast-line.event-walk,
.broadcast-line.event-walkAllowed { border-left-color: var(--grade-normal); color: var(--text-sub); }
.broadcast-line.event-adjust { border-left-color: var(--accent-bg); color: var(--accent); }
.broadcast-line.event-sacfly { border-left-color: var(--accent-bg); color: var(--accent); font-weight: 700; }
.broadcast-line.event-sacfly::before { content: '🙌 '; }

/* ==================== 시즌 화면 ==================== */
.season-progress-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.season-progress-row .chip {
  padding: 6px 15px; border-radius: 999px; border: 1px solid var(--border-c); font-size: 12px; font-weight: 700; background: var(--chip-bg);
}
#season-phase-chip { color: var(--accent); border-color: var(--accent-bg); }
.playoff-bracket { display: flex; flex-direction: column; gap: 12px; }
.playoff-round-title { font-size: 12px; color: var(--text-sub); font-weight: 700; margin-bottom: 4px; letter-spacing: 0.1px; }
.playoff-match {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md); padding: 10px 16px; font-size: 13px;
}
.playoff-match > span:first-child { overflow-wrap: break-word; min-width: 0; }
.playoff-match .winner { color: var(--green); font-weight: 800; }
.playoff-match .pending { color: var(--text-sub); }
.champion-banner {
  text-align: center; font-size: 17px; font-weight: 800; padding: 18px; margin-top: 10px;
  font-family: var(--font-display); letter-spacing: 0.3px; border-radius: var(--radius-lg);
  background: rgba(217,119,6,0.08); color: var(--accent); border: 1px solid var(--accent-bg);
}

/* ==================== 트레이드 화면 ==================== */
.trade-compose { background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-lg); padding: 18px; }
.trade-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.trade-columns h4 { font-size: 12.5px; color: var(--text-sub); margin: 0 0 8px; letter-spacing: 0.1px; }
.trade-mini-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); max-height: 340px; overflow-y: auto; padding: 4px; }
.trade-mini-grid .player-card { cursor: pointer; padding: 12px; }
.trade-mini-grid .player-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.trade-card-list { display: flex; flex-direction: column; gap: 12px; }
.trade-card {
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md); padding: 14px;
}
.trade-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 700; gap: 8px; flex-wrap: wrap; }
.trade-card-head > span:first-child { overflow-wrap: break-word; min-width: 0; }
.trade-card-body { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-sub); }
.trade-card-body .side { overflow-wrap: break-word; }
.trade-card-body .side { flex: 1; min-width: 140px; }
.trade-card-body .side b { display: block; color: var(--text-main); margin-bottom: 4px; }
.trade-status-chip { padding: 3px 12px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.trade-status-chip.pending { background: rgba(217,119,6,0.12); color: var(--accent); }
.trade-status-chip.accepted { background: rgba(22,163,74,0.12); color: var(--green); }
.trade-status-chip.rejected, .trade-status-chip.cancelled, .trade-status-chip.invalid { background: rgba(220,38,38,0.12); color: var(--red); }
.trade-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.trade-card-actions .btn { padding: 8px 15px; font-size: 11.5px; }

/* ==================== 💵 FA 시장 전용 컴팩트 그리드 ====================
   사용자 리포트(2026-07-10): FA 시장 탭은 최대 20명까지 매물을 새로고침할 수 있는데, 모바일에서
   `.card-grid`의 공용 반응형 규칙(아래 @media에서 최소폭 280px→420px 이하는 강제 1열)을 그대로 쓰다 보니
   화면 1개에 카드가 딱 1장만 보여서 20명을 확인하려면 스크롤을 지나치게 많이 해야 하는 문제가 있었다.
   → FA 시장 카드만 별도 클래스(.fa-market-grid)로 분리하고, 모바일에서도 최소 2열(좁은 화면에서도)을
   유지하도록 더 좁은 최소폭 + 카드 내부 요소를 축소한 컴팩트 스타일을 적용한다. */
.fa-market-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

/* ==================== 모바일 최적화 ==================== */
@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; }
  .side-nav {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; overflow-x: visible;
    padding: 10px 12px; gap: 8px; border-right: none; border-bottom: 1px solid var(--border-c);
  }
  .side-nav-brand { margin-bottom: 0; font-size: 14px; flex: 1; min-width: 0; }
  .side-nav-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-nav-theme-btn, .side-nav-logout {
    margin-top: 0; margin-bottom: 0; padding: 9px 10px; font-size: 10.5px; white-space: nowrap; flex-shrink: 0;
  }
  /* 사용자 리포트(2026-07-10): 모바일에서 빌드 버전 텍스트가 팀컬러/로그아웃 버튼과 같은 줄에
     끼어 겹쳐 보이는 문제 수정. 버전 텍스트를 별도의 전체 너비 줄로 내리고, 한 줄로 축약 표시한다. */
  .side-nav-build-version {
    flex: 1 0 100%; order: 10; margin-top: 0; padding: 0; font-size: 9.5px; opacity: 0.55;
    text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal;
  }

  /* 📱 하단 고정 탭 바 */
  .tab-nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 3px; background: var(--bg-panel); border-top: 1px solid var(--border-c);
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 18px rgba(0,0,0,0.3);
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn {
    flex: 0 0 auto; width: auto; flex-direction: column; justify-content: center;
    gap: 3px; padding: 7px 10px; min-width: 58px; text-align: center;
  }
  .tab-btn-ico { font-size: 18px; width: auto; }
  .tab-btn-label {
    display: block; font-size: 9.5px; letter-spacing: 0; font-weight: 700;
    white-space: nowrap;
  }

  .stat-hud { padding: 10px 12px; gap: 8px; }
  .stat-chip { padding: 6px 10px; font-size: 11.5px; }

  .login-frame { grid-template-columns: 1fr; min-height: 0; }
  .login-visual { display: none; }

  .main-content { padding: 12px 12px 88px; }
  .panel { padding: 14px; margin-bottom: 14px; }
  .panel-title { font-size: 14px; flex-wrap: wrap; gap: 6px; }
  .panel-title .sub-action { width: 100%; }
  .panel-info { margin: -4px 0 14px; }
  .panel-info summary { padding: 9px 12px; font-size: 12px; }
  .panel-info summary::after { content: '▾'; font-size: 13px; }
  .panel-info[open] summary::after { content: '▴'; }
  .panel-info-body { padding: 0 12px 12px; font-size: 12px; }

  /* 사용자 리포트(2026-07-10): 모바일에서 선수 카드가 2열로 강제 배치되어 폭이 150px 수준까지 좁아지고,
     그 안에 이름/배지/능력치 5줄/OVR/가격이 겹치고 깨져 보이는 문제 수정.
     → 폭이 충분하지 않으면 자동으로 1열(카드 풀 사이즈)로 떨어지도록 최소 폭을 280px로 올린다.
     (조금 더 넓은 태블릿/가로모드에서는 여전히 2열 이상으로 자연스럽게 확장됨) */
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
  .player-card { padding: 14px; }
  .player-name { font-size: 14.5px; }
  .overall-tag { font-size: 12.5px; padding: 3px 9px; }
  .overall-tag b { font-size: 15.5px; }
  .player-card .card-btn-row .btn { padding: 10px 6px; font-size: 11.5px; }
  /* 이름/배지가 많은 카드(⭐강화/부상 등)에서도 자연스럽게 줄바꿈되도록 */
  .player-card-top { flex-wrap: wrap; }
  .player-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .lineup-badge-row, .player-pos { flex-wrap: wrap; }

  /* 💵 FA 시장: 최대 20명까지 새로고침되는 매물을 한 화면에 여러 장 보이도록, 공용 .card-grid보다
     훨씬 좁은 최소폭(150px)을 적용해 좁은 폰에서도 2열(가로모드/큰 폰은 3열 이상)로 유지한다.
     카드 내부는 능력치 막대바를 숨기고 이름/등급/OVR/가격/영입버튼만 남겨 세로 높이를 크게 줄인다. */
  .fa-market-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .fa-market-grid .player-card { padding: 10px 10px 9px; }
  .fa-market-grid .player-card .stat-bars,
  .fa-market-grid .player-card .condition-row { display: none; }
  .fa-market-grid .player-card .player-name { font-size: 12.5px; }
  .fa-market-grid .player-card .player-pos { font-size: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
  /* 사용자 리포트(2026-07-10): 컴팩트 카드에서 원 소속구단 배지를 숨겼더니 정보가 사라져 보임 →
     숨기지 않고 다시 표시하되, 좁은 카드에서도 줄바꿈되어 겹치지 않도록 줄바꿈/여백만 조정한다. */
  .fa-market-grid .player-card .player-origin-team { margin-left: 0; font-size: 9.5px; }
  .fa-market-grid .player-card .grade-badge { font-size: 9.5px; padding: 3px 8px; }
  .fa-market-grid .player-card .player-card-footer { margin-top: 6px; flex-wrap: wrap; gap: 4px; }
  .fa-market-grid .player-card .overall-tag { font-size: 11px; padding: 2px 7px; }
  .fa-market-grid .player-card .overall-tag b { font-size: 13px; }
  .fa-market-grid .player-card .player-price { font-size: 10.5px; text-align: left; width: 100%; }
  .fa-market-grid .player-card .btn { padding: 8px 6px; font-size: 11px; margin-top: 8px; }

  .lineup-grid { gap: 16px; }
  .lineup-section-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .lineup-section-title { font-size: 12px; }
  .lineup-slot { padding: 10px; }

  .trade-columns { grid-template-columns: 1fr; }
  /* 사용자 리포트 후속 점검(2026-07-10): .trade-mini-grid(강화 탭 선수 목록, 트레이드 탭 좌우 선수 목록)도
     동일한 .player-card 컴포넌트를 사용하는데, 데스크톱 기준값(180px)보다 더 좁은 140px로 강제되어
     화면이 큰 폰~작은 태블릿(약 421~720px)에서 이름+⭐강화 배지가 겹쳐 보일 수 있었음.
     → auto-fit + 200px 최소폭으로 변경해 폭이 부족하면 자동으로 1열로 떨어지게 한다. */
  .trade-mini-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-height: 260px; }

  .gacha-result-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .gacha-machine { font-size: 42px; }

  /* 사용자 리포트(2026-07-10, 모바일 스크린샷): 스코어보드가 세로로 완전히 쌓이면서(flex-direction:column)
     팀명+점수+평균전력 한 세트가 화면 세로 공간을 크게 차지해, 스크롤해야 양쪽 팀과 VS가 다 보이는 문제.
     → 데스크톱처럼 좌우로 나란히 배치하되(row 유지), 글자 크기만 줄여서 좁은 화면에도 한눈에 들어오게 한다. */
  .match-arena { gap: 8px; padding: 14px 4px; }
  .match-side { min-width: 0; }
  .match-team-name { font-size: 12px; margin-bottom: 4px; overflow-wrap: break-word; }
  .match-vs { font-size: 13px; flex: 0 0 auto; }
  .match-score { font-size: 22px; padding: 3px 10px; }
  .match-overall { font-size: 10px; margin-top: 4px; }

  .difficulty-panel { padding: 13px; }
  .difficulty-step-btn { padding: 8px 11px; font-size: 14px; }
  .difficulty-name-text { font-size: 12px; }

  table { font-size: 11.5px; }
  th, td { padding: 8px 8px; }
  /* 경기 기록의 "투수 등판 상세" 줄(pitching-line-row)이 좁은 화면에서 열이 서로 겹치던 문제 대응:
     각 항목을 줄바꿈해서 세로로 쌓이게 한다. */
  .pitching-line-row { flex-wrap: wrap; gap: 4px 10px !important; }

  .broadcast-log { max-height: 240px; }
  .broadcast-line { font-size: 11px; padding: 6px 9px; }

  /* 사용자 요청(2026-07-10): "강화 할 때 강화 부분이 아래에 위치해서 불편하다 → 위로 올려달라"
     → 모바일에서는 상세(강화 실행) 영역을 선수 목록보다 위에 배치한다. */
  .enhance-layout { grid-template-columns: 1fr; }
  .enhance-detail-col { position: static; order: 0; }
  .enhance-list-col { order: 1; margin-top: 16px; }
  .enhance-list-col .card-grid { max-height: 320px; }

  .season-progress-row { justify-content: space-between; }
  .playoff-match { flex-direction: column; align-items: flex-start; gap: 4px; }

  .btn { padding: 11px 16px; font-size: 12.5px; }
  .login-card { padding-bottom: 24px; }
  .field-group { padding: 0 18px; }
  .login-sub, .login-note { padding-left: 18px; padding-right: 18px; }
  .login-tabs { margin: 0 18px 18px; }

  .roster-toolbar { flex-direction: column; align-items: stretch; padding: 10px 12px; }
  .roster-search-input, .roster-filter-select { width: 100%; flex: none; }

  .achievement-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .achievement-card { padding: 12px; }
  .achievement-icon { font-size: 20px; }
  .achievement-name { font-size: 13px; }
  .achievement-desc { font-size: 11px; min-height: 0; }

  .modal-box { padding: 18px 16px 14px; max-height: 85vh; }
  .modal-title { font-size: 16px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }

  /* 좁은 화면에서는 토스트가 화면 폭을 거의 가득 채우도록(긴 강화 결과 메시지 가독성 확보) */
  #toast-container { left: 12px; right: 12px; top: 12px; max-width: none; }

  .sub-tab-nav { flex-wrap: wrap; }
  .gacha-hero { padding: 22px 14px; }
  .trade-compose { padding: 14px; }
  .difficulty-current-row { gap: 8px; }
  .difficulty-name-text { min-width: 100%; order: 3; }
}

@media (max-width: 420px) {
  /* 🆕(2026-07-13): stat-hud에 팀가치 칩이 새로 추가되어 순서가 한 칸씩 밀렸으므로(자금/팀가치/전적/
     연승/로스터 순), 아주 좁은 화면에서 숨기던 "연승" 칩 선택자를 nth-child(3)→nth-child(4)로 갱신. */
  .stat-hud .stat-chip:nth-child(4) { display: none; } /* 아주 좁은 화면에서는 연승 칩 숨김 */
  .side-nav-brand span:last-child { display: none; } /* 초소형 화면에서는 구단명 텍스트 숨기고 아이콘만 표시 */
  /* 초소형 화면에서도 카드는 항상 1열 풀폭으로 표시 (2열로 좁아지면 카드 내부 배지/능력치가 겹쳐 보임)
     ※ FA 시장(.fa-market-grid)은 능력치 막대바를 숨긴 컴팩트 카드라 겹침 문제가 없고, 최대 20명을
     한 화면에서 보기 편하도록 초소형 화면에서도 예외적으로 2열을 유지한다. */
  .card-grid:not(.fa-market-grid), .trade-mini-grid { grid-template-columns: 1fr; }
  .fa-market-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
  .rotation-item { flex-wrap: wrap; }
  .rotation-item .rot-btns { width: 100%; justify-content: flex-end; }
  .achievement-grid { grid-template-columns: 1fr 1fr; }
  .roster-search-input, .roster-filter-select { font-size: 12px; padding: 8px 10px; }

  /* 초소형 화면에서는 하단 탭 바 아이콘/라벨/여백을 조금 더 줄여서 한 화면에 최대한 많이 보이게 */
  .tab-btn { min-width: 50px; padding: 6px 7px; }
  .tab-btn-ico { font-size: 16px; }
  .tab-btn-label { font-size: 9px; }
  .side-nav-theme-btn, .side-nav-logout { font-size: 0; padding: 9px; }
  .side-nav-theme-btn::before { content: '🎨'; font-size: 14px; }
  .side-nav-logout::before { content: '🚪'; font-size: 14px; }

  /* 강화 탭: 매우 좁은 화면에서 보정/연속강화 버튼 행이 줄바꿈되며 잘리지 않도록 세로 스택 처리 */
  .enhance-boost-row, .enhance-auto-row { flex-direction: column; align-items: stretch; }
  .enhance-boost-row .btn, .enhance-auto-row .btn { width: 100%; }
  .enhance-auto-row input[type="number"] { width: 100%; }
  .enhance-detail-col { padding: 14px; }

  /* 라인업 탭: 슬롯을 1열로 완전히 세로 스택 */
  .lineup-section-grid { grid-template-columns: 1fr; }

  /* 패널 제목 옆 버튼(매물 새로고침/랭킹 새로고침 등)이 줄바꿈되어도 자연스럽게 */
  .panel-title { gap: 8px; }
  .panel-title button.sub-action { width: 100%; text-align: center; }

  .match-score { font-size: 24px; padding: 4px 12px; }
  .stat-hud { flex-wrap: wrap; }

  /* 초소형 화면 카드: OVR 배지와 가격이 절대 겹치지 않도록 필요 시 세로로 쌓음 */
  .player-card-footer { flex-wrap: wrap; }
  .player-price { text-align: left; width: 100%; }
}

/* ==================== 이닝 단위 실시간 경기 진행 + 투수 직접 선택 ==================== */
.live-match-toggle-row {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px;
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-sub); cursor: pointer;
}
.live-match-toggle-row input[type="checkbox"] { width: 16px; height: 16px; flex: none; cursor: pointer; accent-color: var(--accent-bg); }
.live-match-toggle-row span { flex: 1; }

.live-match-panel {
  margin-top: 16px; padding: 14px 16px; background: var(--bg-panel-2);
  border: 1px solid var(--border-c); border-radius: var(--radius-md);
}
.live-match-scoreboard {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 15px; color: var(--accent); margin-bottom: 10px;
}
.live-match-pitcher-row {
  font-size: 13px; color: var(--text-sub); margin-bottom: 10px; min-height: 18px;
}
.live-match-pitcher-row .pitcher-name { color: var(--text-main); font-weight: 700; }
.live-match-pitcher-row .pitcher-manual-tag { color: var(--accent); font-weight: 700; }
.live-match-select-row { margin-bottom: 12px; }
.live-match-select-row label {
  display: block; font-size: 12.5px; color: var(--text-sub); margin-bottom: 6px;
}
.live-match-select-row select {
  width: 100%; padding: 9px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-c);
  background: var(--bg-input); color: var(--text-main); font-size: 13px;
}
.live-match-select-row select optgroup {
  color: var(--accent); font-weight: 700; font-style: normal;
}
.live-match-select-row select option {
  color: var(--text-main); font-weight: 400;
}
.live-match-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.live-match-btn-row .btn { flex: 1 1 auto; }
.live-match-btn-row #live-match-abandon-btn { flex: 0 1 auto; color: var(--red); border-color: var(--red); }

@media (max-width: 720px) {
  .live-match-btn-row { flex-direction: column; }
  .live-match-btn-row .btn { width: 100%; }
  .live-match-scoreboard { font-size: 13px; flex-wrap: wrap; }
}

/* 🧪🎮 정밀 모드(타석 단위 인터랙티브 진행) 전용 최소 스타일. .live-match-panel 등 기존 라이브 매치
   클래스를 그대로 재사용하고, 여기서는 주자 베이스 다이아몬드 표시에만 신규 클래스를 추가한다. */
.precision-live-panel { border-color: var(--accent); }
.precision-live-diamond {
  position: relative; width: 84px; height: 84px; margin: 6px auto 14px;
}
.precision-base {
  position: absolute; width: 18px; height: 18px; border: 2px solid var(--border-c);
  background: var(--bg-input); transform: rotate(45deg); transition: background .15s, border-color .15s;
}
.precision-base-1 { right: 0; bottom: 28px; }
.precision-base-2 { left: 33px; top: 0; }
.precision-base-3 { left: 0; bottom: 28px; }
.precision-base.on-base { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
.precision-outs-text {
  position: absolute; left: 50%; top: 58px; transform: translateX(-50%);
  font-size: 11.5px; color: var(--text-sub); font-family: var(--font-mono); white-space: nowrap;
}
.precision-live-upcoming-tag { color: var(--accent); font-weight: 700; }

/* ==================== ⚔️ PvP 실시간 턴제 대결 (2026-07-13, 10차 신규) ====================
   .live-match-panel/.precision-live-panel/.precision-live-diamond/.broadcast-box 등 기존 라이브
   매치 클래스를 그대로 재사용하고, 여기서는 PvP 전용 요소(투구판 카운트다운/방 코드/역할 배너)만
   추가한다. */
.pvp-waiting-hint { font-size: 14px; color: var(--text-sub); margin: 4px 0 10px; }
.pvp-room-code {
  font-family: var(--font-mono); font-size: 34px; font-weight: 800; letter-spacing: 6px;
  color: var(--accent); margin: 10px 0; text-shadow: 0 0 12px rgba(245,166,35,0.35);
}
.pvp-count-display {
  text-align: center; font-size: 20px; font-weight: 700; margin: 10px 0;
  font-family: var(--font-mono); color: var(--text-main);
}
.pvp-role-banner { text-align: center; font-weight: 700; margin: 8px 0; font-size: 14px; }
.pvp-countdown-wrap { margin: 10px auto; max-width: 260px; }
.pvp-countdown-track {
  background: rgba(255,255,255,0.12); border-radius: 8px; height: 10px; overflow: hidden;
}
.pvp-countdown-bar {
  background: linear-gradient(90deg, var(--accent-bg), var(--primary)); height: 100%; width: 100%;
  transition: width 0.2s linear;
}
.pvp-countdown-text { text-align: center; font-size: 13px; margin-top: 4px; color: var(--text-sub); }
.pvp-broadcast-box { margin-top: 14px; }
.pvp-broadcast-title { margin: 0 0 6px; font-size: 13px; color: var(--text-sub); }
.pvp-abandon-row { margin-top: 12px; }
.pvp-result-panel { text-align: center; padding: 20px; }
.pvp-result-title { font-size: 24px; margin-bottom: 8px; }
.pvp-result-score { font-size: 16px; margin-bottom: 14px; color: var(--text-main); }
.pvp-log-row:hover { background: var(--bg-panel-2); }
.pvp-choice-row { justify-content: center; display: flex; gap: 10px; flex-wrap: wrap; }
.pvp-choice-row .btn { flex: 1 1 auto; min-width: 140px; }
#pvp-pitcher-change-row, #pvp-pinch-hit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pvp-pitcher-change-row label, #pvp-pinch-hit-row label { flex: 1 1 100%; margin-bottom: 0; }
#pvp-pitcher-change-row select, #pvp-pinch-hit-row select { flex: 1 1 auto; min-width: 160px; }
.pvp-substitute-btn { flex: 0 0 auto; padding: 9px 16px; font-size: 12.5px; }

@media (max-width: 720px) {
  .pvp-room-code { font-size: 28px; letter-spacing: 4px; }
}

/* ==================== 🛠️ 관리자 계정/설정 패널 (2026-07-11 신규)
   게임 구단 계정(로그인/대시보드)과 완전히 분리된 관리자 전용 화면.
   기존 다크 테마 변수(--bg-panel 등)와 .modal-overlay/.table-wrap 컴포넌트를 그대로 재사용한다. ==================== */
.login-admin-link {
  display: block; width: 100%; margin-top: 12px; padding: 10px 0; background: none; border: none;
  color: var(--text-sub); font-size: 12px; text-align: center; cursor: pointer; letter-spacing: 0.1px;
  text-decoration: underline; text-decoration-color: transparent; transition: color .15s, text-decoration-color .15s;
}
.login-admin-link:hover { color: var(--accent); text-decoration-color: var(--accent); }

.admin-bootstrap-note {
  margin: 0 0 16px; padding: 10px 12px; background: rgba(245,166,35,0.1); border: 1px solid var(--accent);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; color: var(--accent); font-size: 12px; line-height: 1.6;
}

/* 관리자 전체 화면 레이아웃: 사이드바 없이 상단 헤더 + 탭 네비 + 콘텐츠, 최대 폭 제한 후 중앙 정렬 */
.admin-shell {
  min-height: 100vh; background: var(--bg-dark); display: flex; flex-direction: column;
}
.admin-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 24px; background: var(--bg-panel); border-bottom: 1px solid var(--border-c);
  position: sticky; top: 0; z-index: 20;
}
.admin-header-title {
  margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--text-main); letter-spacing: 0.2px;
}
.admin-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-header-user {
  font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--chip-bg);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-c);
}

.admin-tab-nav {
  display: flex; gap: 8px; padding: 14px 24px 0; background: var(--bg-dark); flex-wrap: wrap;
}
.admin-tab-btn {
  padding: 11px 18px; background: var(--bg-panel); color: var(--text-sub); font-size: 13px; font-weight: 700;
  border: 1px solid var(--border-c); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer; letter-spacing: 0.1px; transition: color .15s, background .15s;
}
.admin-tab-btn:hover { color: var(--text-main); }
.admin-tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.admin-main {
  flex: 1; padding: 20px 24px 60px; max-width: 1080px; width: 100%; margin: 0 auto;
}
.admin-panel {
  background: var(--bg-panel); border: 1px solid var(--border-c); border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.admin-panel-title {
  margin: 0 0 6px; font-family: var(--font-display); font-size: 16.5px; font-weight: 800; color: var(--text-main);
}
.admin-panel-desc { margin: 0 0 18px; font-size: 12.5px; color: var(--text-sub); line-height: 1.6; }

/* 설정 항목 자동 렌더링 그리드: SETTINGS_DEFS 구조({key,label,type,unit,step,default,current})를
   그대로 순회해 라벨+입력+단위를 카드형으로 배치한다. */
.admin-settings-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.admin-setting-item {
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
  padding: 14px 16px;
}
.admin-setting-item label {
  display: block; font-size: 12.5px; color: var(--text-sub); font-weight: 700; margin-bottom: 8px; letter-spacing: 0.1px;
}
.admin-setting-item .admin-setting-input-row { display: flex; align-items: center; gap: 8px; }
.admin-setting-item input {
  flex: 1; min-width: 0; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border-c);
  color: var(--text-main); font-size: 13.5px; border-radius: var(--radius-sm); outline: none;
  font-family: var(--font-mono); transition: border-color .15s, box-shadow .15s;
}
.admin-setting-item input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.admin-setting-item .admin-setting-unit { font-size: 11.5px; color: var(--text-sub); flex: none; }
.admin-setting-item .admin-setting-default {
  margin-top: 8px; font-size: 10.5px; color: var(--text-sub); opacity: 0.75;
}

.admin-panel-footer { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-c); }

/* 관리자 화면 안의 패널 전환(설정/계정관리) */
.admin-panel.hidden { display: none; }

/* 🆕 배열형(json_array) 설정 항목(예: ⭐ 별강화 성공률표)은 그리드 전체를 가로로 넓게 차지하게 한다. */
.admin-setting-item-wide { grid-column: 1 / -1; }

/* 🆕 2026-07-11(2차 개편): 관리자 설정 화면을 category별 카드 박스로 그룹화하고, 각 항목 아래에
   쉬운 설명(help)을 항상 노출하며, 배열형(별강화 성공률표) 항목은 "1성/2성/..." 개별 슬롯으로 보여준다.
   사용자 요청: "값 입력하는게 너무 어려움... 수치가 무슨뜻인지 전혀 이해가 안된다"에 대응. */
.admin-settings-categories { display: flex; flex-direction: column; gap: 18px; }
.admin-settings-category-box {
  background: var(--bg-dark); border: 1px solid var(--border-c); border-radius: var(--radius-lg);
  padding: 16px 18px 18px;
}
.admin-settings-category-title {
  margin: 0 0 14px; font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--accent);
  letter-spacing: 0.1px;
}
/* 각 설정 항목 아래 항상 표시되는 쉬운 설명 문구 */
.admin-setting-help {
  margin: -2px 0 10px; font-size: 11.5px; color: var(--text-sub); line-height: 1.55; opacity: 0.9;
}
/* 배열형(별강화 성공률표) 설정: "1성/2성/.../N성" 라벨이 붙은 개별 슬롯을 그리드로 배치 */
.admin-setting-array-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px;
}
.admin-setting-array-slot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  padding: 10px 8px;
}
.admin-setting-array-slot-label {
  font-size: 11px; font-weight: 700; color: var(--text-sub);
}
.admin-setting-array-slot input {
  width: 100%; min-width: 0; padding: 7px 6px; background: var(--bg-panel-2); border: 1px solid var(--border-c);
  color: var(--text-main); font-size: 12.5px; border-radius: 8px; outline: none; text-align: center;
  font-family: var(--font-mono); transition: border-color .15s, box-shadow .15s;
}
.admin-setting-array-slot input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.admin-setting-array-slot .admin-setting-unit { font-size: 10.5px; color: var(--text-sub); }

@media (max-width: 480px) {
  .admin-setting-array-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
}

/* 🆕 ⚾ 선수 관리 탭: 선수 추가 폼 + 목록 (2026-07-11 신규, 기존 .field-group/.table-wrap 재사용) */
.admin-panel-subtitle {
  margin: 24px 0 12px; font-family: var(--font-display); font-size: 14.5px; font-weight: 800; color: var(--text-main);
}
.admin-section-divider { border: none; border-top: 1px solid var(--border-c); margin: 26px 0 4px; }
.admin-add-player-form { display: flex; flex-direction: column; gap: 4px; }
.admin-add-player-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
}
/* .field-group은 로그인 폼 전제로 좌우 28px 패딩이 있는데, 그리드 안에서는 gap이 여백을 대신하므로 0으로 되돌린다. */
.admin-add-player-grid .field-group, .admin-add-player-stats-grid .field-group { padding: 0; margin-bottom: 0; }
.admin-add-player-hint {
  margin: 2px 0 14px; font-size: 11.5px; color: var(--text-sub); opacity: 0.85; line-height: 1.6;
}
.admin-add-player-toggle-row { margin-bottom: 6px; }
.admin-add-player-checkbox {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-sub); cursor: pointer; user-select: none;
}
.admin-add-player-checkbox input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.admin-add-player-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 6px 0 12px;
  padding: 14px 16px; background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
}
.admin-add-player-stats-grid.hidden { display: none; }

@media (max-width: 720px) {
  .admin-header { padding: 12px 16px; }
  .admin-header-title { font-size: 15.5px; }
  .admin-tab-nav { padding: 12px 12px 0; }
  .admin-tab-btn { flex: 1 1 auto; text-align: center; padding: 10px 8px; font-size: 12px; }
  .admin-main { padding: 14px 12px 40px; }
  .admin-panel { padding: 16px 14px; }
  .admin-settings-grid { grid-template-columns: 1fr; }
  .admin-settings-category-box { padding: 14px 12px 16px; }
  .admin-setting-array-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .admin-add-player-grid, .admin-add-player-stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .admin-header-actions { width: 100%; justify-content: space-between; }
  .admin-add-player-grid, .admin-add-player-stats-grid { grid-template-columns: 1fr; }
}

/* ==================== 🆕 선수 기록 표 정렬 헤더 (2026-07-13)
   "타수 누르면 몇타수인지, 안타 누르면 안타 1위인지" 요청 대응.
   클릭 가능한 th에 커서/호버 표시를 주고, 현재 정렬 기준 컬럼에는 방향 화살표를 보여준다. ==================== */
.sortable-th-row th[data-sort-key] {
  cursor: pointer; user-select: none; position: relative; transition: color 0.15s ease;
}
.sortable-th-row th[data-sort-key]:hover { color: var(--accent); }
.sortable-th-row th[data-sort-key].sort-active-asc,
.sortable-th-row th[data-sort-key].sort-active-desc {
  color: var(--accent); font-weight: 800;
}
.sortable-th-row th[data-sort-key].sort-active-asc::after { content: ' \25B2'; font-size: 10px; }
.sortable-th-row th[data-sort-key].sort-active-desc::after { content: ' \25BC'; font-size: 10px; }

/* ==================== 🆕 방출/판매 탭: 라인업 배정 잠금 표시 (2026-07-13) ====================
   라인업/로테이션에 배정된 선수는 판매/방출 버튼을 비활성화하고 잠금 안내 배지를 보여준다. */
.player-card-locked-badge {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 10px;
  background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.35); border-radius: var(--radius-sm);
  font-size: 11.5px; color: var(--accent); font-weight: 700; line-height: 1.4;
}
.card-btn-row .btn[disabled] {
  opacity: 0.4; cursor: not-allowed; filter: grayscale(0.3);
}