/* ============================================================================
 * baseball-manager-sim — style.css (RENEWAL v2.0 · BROADCAST 시안 A)
 * 2026-08-02 리뉴얼 · 발주자 UX 방향성 준수
 * ----------------------------------------------------------------------------
 * 구성:
 *   [1] 원본 style.css (v1.10.1) — 기존 규칙 · id/data-*/상태 클래스 기반
 *       DOM 훅과 26개 화면 마크업이 그대로 매핑되도록 완전 유지.
 *   [2] BROADCAST 시안 오버라이드 — :root 토큰(색 · 폰트 · 라디우스) 재정의,
 *       홈 · 로그인 · 히어로 · QA카드 · 패널 · 카드 · 탭 · 버튼 · 진행막대 등
 *       핵심 컴포넌트를 방송그래픽 톤으로 재설계.
 *   [3] BROADCAST 확장 오버라이드 — 26개 화면 특수 컴포넌트
 *       (선수단 · 필터바 · 방출/판매 · FA · 시즌 · 트레이드 · PvP · 정밀경기 ·
 *        업적 · 도감 · 미션 · 출석 · 뽑기 · 관리자 · 보상수령 등) 톤 정합.
 *
 * 원칙 (인계 문서 준수):
 *   • id · data-* · 상태 클래스 이름 변경 없음
 *   • .hidden / .is-stage-hidden / .is-step-hidden 은 display:none !important 유지
 *   • .qa-card > * { pointer-events:none } 유지 (홈 CTA 카드 전체 클릭)
 *   • 새 @media (max-width:720px) 규칙은 파일 맨 끝에 위치
 *   • body[data-palette] / [data-motion] / [data-density] 로 tweak 지원
 * ============================================================================ */

/* ==================== [1] 원본 style.css (v1.10.1) ==================== */

/* ==================== ⚾ 레드 매니저 스타일 — 컴프야풍 다크 네이비 + 레드 테마 ====================
   2026-07-28 전면 리뉴얼: project.zip(레드 매니저 V26) 디자인을 참고하여 새로 제작.
   - 배경: 짙은 네이비(#05080f~#1e3054) + 레드 글로우 라디얼 그라데이션
   - 카드/패널: 반투명 유리(surface) + 얇은 스트로크 + 소프트 섀도우
   - 등급 매핑: 일반=grade-normal / 고급=grade-rare(그린) / 영웅=grade-hero(블루) / 전설=grade-legend(퍼플)
   - 폰트: Pretendard(본문) / Black Ops One·Oswald(숫자·디스플레이)
==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Oswald:wght@500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
/* 🔧 리뉴얼 v2.0 방송그래픽 폰트 — 반드시 다른 규칙보다 앞에 있어야 유효 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg-dark: #05080f;
  --bg-panel: rgba(20, 32, 60, 0.72);
  --bg-panel-2: rgba(28, 44, 78, 0.82);
  --bg-input: rgba(10, 18, 36, 0.65);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --border-c: rgba(120, 160, 220, 0.16);
  --primary: #ff2d4a;
  --primary-dark: #8b1220;
  --primary-soft: rgba(255, 45, 74, 0.18);
  --accent: #ffb547;
  --accent-bg: #ffd15c;
  --grass: #4dd68a;
  --green: #4dd68a;
  --red: #ff6b7f;
  --cyan: #38d0ff;
  --text-main: #e8eefc;
  --text-sub: #a9b6d4;
  --grade-normal: #8895af;
  --grade-rare: #4dd68a;
  --grade-hero: #4a9fff;
  --grade-legend: #b56cff;
  /* 🆕(초월 등급 시스템, 2026-07-30): 전설(보라) 위 최상위 등급. 이전 디자인 개편 때의 참고
     소스코드(player-card.jsx/styles.css)에 있던 "LIVE(라이브)" 등급 색상(크림슨 레드)을 그대로 이식 */
  --grade-transcendence: #ff2d4a;
  --grade-transcendence-2: #8b1220;
  --text-3: #6f7fa3;
  /* 🆕(2026-07-31 디자인 리뉴얼) 원본 docs/design-ref/styles.css 의 --text-4 와 동일한 값.
     검색창 placeholder 색을 원본과 정확히 맞추기 위해 추가한다. */
  --text-4: #4a5878;
  --font-display: 'Pretendard', -apple-system, sans-serif;
  --font-mono: 'Oswald', 'Pretendard', sans-serif;
  --font-num: 'Black Ops One', 'Oswald', sans-serif;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-glow-red: 0 0 24px rgba(255, 45, 74, 0.45), 0 0 40px rgba(255, 45, 74, 0.2);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  --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: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  position: relative;
}
.mono, .num, .use-num-font { font-family: var(--font-num); letter-spacing: 0.02em; font-feature-settings: 'tnum'; }

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 1200px 800px at 50% -10%, rgba(255,45,74,0.18), transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 100%, rgba(56,208,255,0.07), transparent 60%),
    linear-gradient(180deg, #0a1224 0%, #05080f 100%);
  opacity: 1;
}
.bg-fx::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(120,160,220,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,220,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.stadium-glow {
  position: absolute; width: 46%; height: 40%;
  background: radial-gradient(ellipse at center, rgba(255,45,74,0.16), 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,181,71,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%, #2a0208 100%);
  padding: 42px 36px; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.login-visual::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 500px 300px at 20% 0%, rgba(255,255,255,0.12), transparent 60%);
}
.login-visual-mark { font-size: 44px; margin-bottom: 10px; filter: drop-shadow(0 0 14px rgba(255,45,74,0.6)); }
.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; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.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: linear-gradient(180deg, var(--primary), var(--primary-dark)); color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 14px rgba(255,45,74,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .6s;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 20px rgba(255,45,74,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-primary:active { box-shadow: 0 2px 8px rgba(255,45,74,0.4); }
.btn-accent {
  background: linear-gradient(180deg, var(--accent-bg), #a86a10); color: #2a1a00;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(255,181,71,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-accent:active { box-shadow: 0 2px 8px rgba(255,181,71,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); }
/* 🆕(통합 체크리스트 P2 3번 "CTA/버튼 클릭영역 일관성 개선", 2026-07-30):
   보관함 확장/새로고침/시즌 포기 등 보조(secondary) 버튼들이 각 화면마다
   style="padding:7px 14px;font-size:12.5px;" 같은 인라인 스타일로 제각각 크기를 지정하고
   있어 클릭 방식/영역이 화면마다 미묘하게 달랐다. 공용 .btn-compact 클래스로 통일하고,
   터치 타겟 최소 크기(44px) 가이드에 맞춰 min-height를 보장한다(패딩이 작아도 실제 클릭
   가능 높이는 항상 44px 이상 유지). */
.btn-compact { padding: 7px 14px; font-size: 12.5px; min-height: 44px; box-shadow: none; }

.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: linear-gradient(180deg, rgba(15,26,51,0.95) 0%, rgba(10,18,36,0.98) 100%);
  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: 18px; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-sm); flex-shrink: 0; position: relative; overflow: hidden;
  box-shadow: 0 0 16px rgba(255,45,74,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  font-family: var(--font-num); color: #fff;
}
.side-nav-mark::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  animation: side-nav-mark-sweep 3s ease-in-out infinite;
}
@keyframes side-nav-mark-sweep { 0% { transform: translateX(-120%); } 50% { transform: translateX(120%); } 100% { transform: translateX(120%); } }
/* 🆕 사용자 요청: 사이드바 팀명 아래에 감독명을 함께 표시. 팀명(구단명)과 감독명이 세로로
   쌓이도록 브랜드 텍스트 영역을 별도 컬럼으로 분리한다. */
.side-nav-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.side-nav-brand-text #header-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav-manager-name {
  font-size: 11.5px; font-weight: 600; color: var(--text-sub); font-family: var(--font-display);
  letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.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; }

/* 🏟️ 팀컬러 시스템(신규, 요구사항 2번) — 위 team-color-* (UI 포인트 색상)와는 별도 기능 */
.team-affiliation-tier-list {
  list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--text-sub);
}
.team-affiliation-tier-list li {
  background: rgba(47,111,237,0.06); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.team-affiliation-status {
  font-size: 13px; color: var(--text-main); background: rgba(34,197,94,0.06);
  border: 1px solid var(--border-c); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px;
}
.team-affiliation-select-row {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-sub);
  padding-top: 14px; border-top: 1px solid var(--border-c);
}
.team-affiliation-select-row select {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-main); font-size: 13px;
}

/* 🆕(2026-07-28, 헤더 리뉴얼 — 참고 디자인 이미지 수준 재작업):
   기존에는 자금/팀가치/전적/연승/로스터 5개의 동일한 pill이 나열되기만 했으나, 참고 디자인처럼
   "좌측 팀 배지+팀명+OVR" / "중앙 자원 칩 그룹" / "우측 아이콘 버튼"의 3분할 구조로 재구성한다.
   ⚠️ 참고 디자인에는 원화/스타포인트/뽑기권/다이아 4종 화폐가 있었지만, 현재 서버(gsGetState)에는
   스타포인트·뽑기권·다이아에 대응하는 데이터가 전혀 없다. 존재하지 않는 자원을 시각적으로만 흉내내는
   것은 사용자 확정 방침("A. 현재 있는 재화들로만")에 따라 배제하고, 실제로 존재하는 자금/팀가치/
   연승/로스터 4개 칩 + OVR 배지(팀 종합 전력, 기존 computeTeamOverall 재사용)만 채용한다. */
.stat-hud {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 12px 24px; background: linear-gradient(180deg, rgba(15,26,51,0.9), rgba(10,18,36,0.85));
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--border-c); box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.stat-hud-brand {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-right: 16px;
  border-right: 1px solid var(--border-c);
}
.stat-hud-brand-mark {
  width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-family: var(--font-num); font-size: 17px;
  box-shadow: 0 0 14px rgba(255,45,74,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
.stat-hud-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.stat-hud-brand-name {
  font-size: 14.5px; font-weight: 800; color: var(--text-main); font-family: var(--font-display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;
}
.stat-hud-brand-sub { font-size: 11.5px; color: var(--text-sub); font-weight: 600; white-space: nowrap; }
.stat-hud-brand-sub b {
  color: var(--accent); font-weight: 800; font-family: var(--font-num); letter-spacing: 0.02em;
}
.stat-hud-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; }
.stat-hud-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-shrink: 0; }
.stat-hud-ico-btn {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(10,18,36,0.7); border: 1px solid var(--border-c); color: var(--text-main);
  font-size: 15px; cursor: pointer; transition: all .15s;
}
.stat-hud-ico-btn:hover { border-color: var(--accent-bg); background: rgba(255,181,71,0.12); }
.stat-hud-ico-btn:active { transform: translateY(1px); }
.stat-chip {
  background: rgba(10,18,36,0.7);
  border: 1px solid var(--border-c);
  border-radius: 100px;
  padding: 6px 13px 6px 10px; font-size: 12.5px; display: flex; gap: 6px; align-items: center;
  font-weight: 700;
}
.stat-chip-ico { font-size: 13px; line-height: 1; }
.stat-chip-money { border-color: rgba(255,181,71,0.35); background: rgba(255,181,71,0.08); }
.stat-chip b { color: var(--accent); font-weight: 400; font-family: var(--font-num); letter-spacing: 0.02em; text-shadow: 0 0 10px rgba(255,181,71,0.35); }
/* 🆕 사용자 요청: 상단 HUD의 이모지 아이콘을 한글 라벨로 교체(가독성 향상). 라벨은 본문보다 살짝
   흐린 톤으로 구분해 값(b 태그)이 더 눈에 잘 들어오도록 한다. */
.stat-chip-label { color: var(--text-sub); font-weight: 700; }

.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: rgba(120,160,220,0.06); }
.tab-btn.active {
  color: #fff; background: linear-gradient(90deg, rgba(255,45,74,0.28), rgba(255,45,74,0.04));
  border-color: rgba(255,45,74,0.4);
  box-shadow: inset 3px 0 0 var(--primary), 0 4px 14px rgba(255,45,74,0.2);
}
.nav-group-label {
  font-size: 10px; color: var(--text-sub); opacity: 0.65; text-transform: uppercase;
  letter-spacing: 0.14em; padding: 12px 10px 4px; font-weight: 700;
}
.nav-group-label:first-child { padding-top: 2px; }
/* 🆕(2026-07-30): "더보기" 버튼은 모바일 하단 탭바 전용이라 데스크톱 사이드바에서는 항상 숨긴다. */
.tab-more-btn { display: none; }

.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: var(--shadow-card), var(--shadow-inner);
  backdrop-filter: blur(6px);
  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); box-shadow: 0 0 8px var(--primary);
}
.panel-title .sub-action { font-size: 12px; font-weight: 500; color: var(--text-sub); font-family: var(--font-display); }
/* 패널 제목 옆 인라인 리셋류 버튼(예: 기록 초기화) - 텍스트가 너무 길어 보이지 않도록 짧게 표기하고 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; }
/* 🆕(2026-07-28 카드 전면 재작업): .player-card는 이제 껍데기 컨테이너 역할만 한다 — 안에
   원본 트레이딩카드 비주얼(.pcard, 등급 프레임/사진/능력치 그리드를 전부 포함)이 위쪽에 꽉 차게
   자리잡고, 실용 정보(.pc-extra: 배지/컨디션/가격/버튼)는 그 아래 별도 패딩 영역에 놓인다.
   기존에 있던 등급별 배경 틴트/상단 색바(::before)/레전드 반짝임(::after)은 .pcard 자체가 이미
   프레임 그라데이션+배지+홀로그램 스윕으로 등급을 훨씬 선명하게 표현하므로 중복 제거한다. */
.player-card {
  background: rgba(15,24,46,0.94);
  border: 2px solid var(--ovr-border, var(--border-c)); border-radius: var(--radius-md);
  position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: var(--shadow-card), 0 0 0 1px var(--ovr-border, transparent) inset;
}
.player-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 14px 30px rgba(0,0,0,0.5), 0 0 0 1px var(--ovr-border, transparent) inset; border-color: var(--ovr-border, var(--primary)); }
/* 트레이딩카드 비주얼(.pcard) 아래, 우리 앱 전용 실용 정보 영역의 패딩 */
.pc-extra { padding: 10px 14px 14px; }

/* ============================================================
   .pcard — 원본 참고 소스코드(player-card.jsx + styles.css)의 등급별 트레이딩카드 구조를
   그대로 재현. aspect-ratio 3/4, frame/inner/bg/team-stripe/badge-tl/ovr/photo/pos/stars/lv/
   name-box/stats 절대배치 레이어 + 등급별 프레임 그라데이션 + 전설 등급 홀로그램 스윕.
   서버가 실제 지원하는 4등급만 사용(grade-normal/rare/hero/legend, 원본의 legend·live 등급은
   서버에 없는 화폐/등급이라 제외 — 새 등급 추가 금지 원칙 유지). 색상값은 원본 gradeColor()/
   gradeColor2() 및 GRADES.frame 그라데이션 값을 그대로 이식.
   ============================================================ */
.pcard {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 3/4; isolation: isolate;
}
.pcard .frame { position: absolute; inset: 0; padding: 3px; border-radius: var(--radius-md); z-index: 1; }
.pcard .inner { position: absolute; inset: 3px; border-radius: 8px; background: #1a2544; overflow: hidden; }
.pcard .bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.14), transparent 60%); }
.pcard .photo {
  position: absolute; inset: 0 0 40% 0; display: grid; place-items: center;
  color: rgba(255,255,255,0.6); background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
}
.pcard .badge-tl {
  position: absolute; top: 6px; left: 6px; padding: 3px 7px; border-radius: 6px;
  font-family: var(--font-num); font-size: 10px; letter-spacing: 0.1em; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6); z-index: 2;
}
.pcard .ovr {
  position: absolute; top: 6px; right: 8px; font-family: var(--font-num); font-size: 26px;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 12px currentColor; z-index: 2; line-height: 1;
}
.pcard .pos {
  position: absolute; left: 6px; bottom: 46%; padding: 2px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.6); color: var(--cyan); font-family: var(--font-num); font-size: 12px;
  letter-spacing: 0.08em; z-index: 2; border: 1px solid rgba(56,208,255,0.4);
}
.pcard .name-box {
  position: absolute; bottom: 30%; left: 6px; right: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55)); padding: 4px 8px; border-radius: 4px; z-index: 2;
}
.pcard .name-box .nm { font-weight: 800; font-size: 13px; color: #fff; line-height: 1.1; text-shadow: 0 1px 3px rgba(0,0,0,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .name-box .sub { font-size: 9px; color: var(--text-sub); letter-spacing: 0.06em; }
.pcard .name-box .pcard-tc-match { color: var(--green); font-weight: 700; }
.pcard .stats {
  position: absolute; bottom: 4%; left: 4px; right: 4px; padding: 4px 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.85)); border-radius: 6px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; z-index: 2;
}
.pcard .stats .cell { text-align: center; overflow: hidden; }
/* 🐛(2026-07-30, Section4 QA): FA 시장처럼 카드가 좁아지는 컴팩트 그리드(.fa-market-grid 등)에서
   "스피드"(3글자) 라벨이 칸 폭에 못 맞고 2줄로 줄바뀜 → 값(val)과 겹치고, stats 박스 전체 높이가
   늘어나면서 그 위(%기준 절대배치)의 Lv 배지(.lv)까지 침범해 겹치는 문제가 있었다.
   → 라벨은 항상 1줄로 고정(white-space: nowrap)하고, 좁은 칸에서도 살짝 더 들어가도록
   letter-spacing을 없애고 ellipsis로 넘치는 부분만 안전하게 잘라낸다(칸 자체는 겹치지 않음). */
.pcard .stats .lbl {
  font-size: 8px; color: var(--text-3); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard .stats .val { font-family: var(--font-num); font-size: 13px; color: var(--accent-bg); line-height: 1; margin-top: 1px; }
.pcard .stars {
  position: absolute; bottom: 20%; left: 6px; z-index: 2; font-size: 8px; color: var(--accent-bg);
  letter-spacing: 2px; text-shadow: 0 0 4px currentColor;
}
.pcard .lv {
  position: absolute; bottom: 20%; right: 6px; z-index: 2; font-family: var(--font-num); font-size: 11px;
  color: #fff; background: rgba(0,0,0,0.6); padding: 1px 6px; border-radius: 3px;
}
.pcard .team-stripe { position: absolute; top: 0; right: 0; width: 30%; height: 3px; z-index: 3; }

/* 등급별 프레임 그라데이션(원본 GRADES 색상값 그대로, 4등급만) */
.pcard.grade-normal .frame { background: linear-gradient(135deg, #a3adc4, #5d6a86 40%, #3c4864 100%); }
.pcard.grade-normal .ovr { color: #b8c4dc; }
.pcard.grade-rare .frame { background: linear-gradient(135deg, #7effb0, #4dd68a 30%, #1e7a45 100%); }
.pcard.grade-rare .ovr { color: #7effb0; }
.pcard.grade-hero .frame { background: linear-gradient(135deg, #7fb8ff, #4a9fff 30%, #1e4c99 100%); }
.pcard.grade-hero .ovr { color: #a8d1ff; }
.pcard.grade-legend .frame { background: linear-gradient(135deg, #fff2ba, #ffb547 30%, #a86a10 70%, #ffd15c 100%); }
.pcard.grade-legend .ovr { color: #ffe58a; }
/* 🆕(초월 등급 시스템 디자인 교체, 2026-07-30): 이전 디자인 개편 때 만들어졌던 참고 소스코드
   (player-card.jsx/styles.css)의 "LIVE(라이브)" 등급 — 전설(보라) 위 최상위 등급으로 설계된
   무지개 conic-gradient 회전 프레임 + 크림슨 레드 톤 — 을 그대로 초월 등급에 이식한다.
   (참고: 원본 grade-live .frame/.ovr/.badge-tl/.photo 규칙, rotate-hue 애니메이션) */
.pcard.grade-transcendence .frame {
  background: conic-gradient(from 0deg, #ff2d4a, #ff8c1a, #ffd15c, #4dd68a, #38d0ff, #b56cff, #ff2d4a);
  animation: rotate-hue 6s linear infinite;
}
.pcard.grade-transcendence .ovr { color: #ffb6c1; text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 12px currentColor; }
@keyframes rotate-hue { to { filter: hue-rotate(360deg); } }

/* 등급 뱃지(badge-tl) 배경 */
.pcard.grade-normal .badge-tl { background: linear-gradient(180deg, #a3adc4, #5d6a86); }
.pcard.grade-rare .badge-tl { background: linear-gradient(180deg, #7effb0, #1e7a45); }
.pcard.grade-hero .badge-tl { background: linear-gradient(180deg, #7fb8ff, #1e4c99); }
.pcard.grade-legend .badge-tl { background: linear-gradient(180deg, #ffd15c, #a86a10); color: #2a1a00; }
.pcard.grade-transcendence .badge-tl { background: linear-gradient(180deg, #ff2d4a, #8b1220); }

/* 전설/초월 등급 사진 영역 배경(홀로그램 톤) — 🆕(초월 등급 시스템 디자인 교체, 2026-07-30):
   원본 참고 소스코드(player-card.jsx/styles.css)도 legend/live 두 최상위 등급이 이 규칙을 함께
   공유했으므로 동일하게 grade-transcendence를 합류시킨다. */
.pcard.grade-legend .photo,
.pcard.grade-transcendence .photo {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.2), transparent 55%),
    conic-gradient(from 220deg at 50% 40%, rgba(255,255,255,0.05), rgba(255,181,71,0.15), rgba(255,255,255,0.05));
}

/* 전설/초월 등급 홀로그램 스윕 애니메이션(동일 이유로 grade-transcendence 합류) */
.pcard.grade-legend .inner::before,
.pcard.grade-transcendence .inner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 46%, rgba(255,255,255,0.05) 54%, transparent 70%);
  transform: translateX(-100%); z-index: 3; pointer-events: none;
}
.pcard.grade-legend:hover .inner::before,
.pcard.grade-transcendence:hover .inner::before,
.pcard.grade-legend.auto .inner::before,
.pcard.grade-transcendence.auto .inner::before { animation: sweep 2.5s ease-in-out infinite; }
@keyframes sweep {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* 🆕(2026-07-28 선수단 카드 리뉴얼, 참고 디자인 반영): 카드 최상단에 "등급뱃지(좌) + 대형 OVR 숫자(우)"
   전용 줄을 추가한다. 서버가 지원하는 4등급(일반/고급/영웅/전설)은 그대로 유지하고, 참고 디자인처럼
   OVR을 크고 화려하게 강조해 "카드마다 실력이 한눈에 다르게 보인다"는 느낌만 살린다.
   ⚠️ 아래 pc-top-strip~stat-bar-fill 규칙들은 트레이드 미니그리드/뽑기 결과 카드 등 아직 .pcard로
   전환되지 않은 구형 카드 렌더러가 계속 사용 중이므로 유지한다(추후 해당 렌더러들도 전환 예정). */
.pc-top-strip { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pc-grade-badge { font-size: 11px; padding: 5px 13px; }
.pc-ovr-big {
  font-family: var(--font-num); font-weight: 800; font-size: 30px; line-height: 1;
  text-shadow: 0 0 14px currentColor; letter-spacing: -0.5px;
}
/* 포지션 코드 칩(P/C/1B/2B/3B/SS/LF/CF/RF/DH) — 참고 디자인처럼 이름 왼쪽에 작은 정사각 칩으로 배치 */
.pc-pos-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 22px; border-radius: 6px; font-size: 10.5px; font-weight: 800;
  color: #fff; letter-spacing: 0; margin-top: 1px;
}
.pc-pos-chip.grade-normal { background: var(--grade-normal); }
.pc-pos-chip.grade-rare { background: var(--grade-rare); color: #062b16; }
.pc-pos-chip.grade-hero { background: var(--grade-hero); }
.pc-pos-chip.grade-legend { background: var(--grade-legend); }
.pc-pos-chip.grade-transcendence { background: var(--grade-transcendence); color: #fff; }

.player-card-top { display: flex; justify-content: flex-start; align-items: flex-start; margin: 6px 0 10px; gap: 8px; }
.player-card-top > div { min-width: 0; }
/* 이름은 항상 한 줄로 고정 표시(배지는 아래 .player-badge-row로 분리되어 있어 이름 폭에 영향받지 않음) */
.player-name { font-size: 15.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
/* 🐛 배치 버그 픽스(사용자 리포트 "배치들이 이상하잖아?"): ⭐강화/+N강/부상 배지를 이름 줄에서 분리한
   전용 줄. 카드 전체 폭을 사용해 배지 개수·자릿수와 무관하게 항상 이름 바로 아래 한 자리에 안정적으로
   배치되며, 배지가 하나도 없으면 이 줄 자체가 생성되지 않아(app.js) 카드마다 세로 정렬이 흔들리지 않는다. */
.player-badge-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.player-pos { font-size: 11.5px; color: var(--text-sub); letter-spacing: 0.1px; overflow-wrap: break-word; margin-top: 3px; }
.player-origin-team { display: inline-block; margin-left: 6px; font-size: 10.5px; color: var(--text-sub); opacity: 0.85; white-space: nowrap; }
/* 🆕 팀컬러 시스템(요구사항 2번): 원소속팀이 설정된 팀컬러와 일치하는 선수를 강조 표시 */
.player-origin-team.team-color-match { color: var(--green); opacity: 1; font-weight: 700; }
.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: linear-gradient(180deg, #a3adc4, var(--grade-normal)); box-shadow: 0 0 8px rgba(136,149,175,0.5); }
.grade-badge.grade-rare { background: linear-gradient(180deg, #7effb0, var(--grade-rare)); color: #062b16; box-shadow: 0 0 8px rgba(77,214,138,0.5); }
.grade-badge.grade-hero { background: linear-gradient(180deg, #7fb8ff, var(--grade-hero)); box-shadow: 0 0 8px rgba(74,159,255,0.5); }
.grade-badge.grade-legend { background: linear-gradient(180deg, #d29fff, var(--grade-legend)); color: #fff; box-shadow: 0 0 10px rgba(181,108,255,0.6); }
.grade-badge.grade-transcendence { background: linear-gradient(180deg, #ff6b81, var(--grade-transcendence)); color: #fff; box-shadow: 0 0 12px rgba(255,45,74,0.75); }

.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; }
/* 🆕(2026-07-28 리뉴얼): 능력치 막대 색을 카드 등급색과 통일해 카드 전체 톤이 일관되게 보이도록 함 */
.player-card.grade-normal .stat-bar-fill { background: linear-gradient(90deg, #5d6a86, var(--grade-normal)); }
.player-card.grade-rare .stat-bar-fill { background: linear-gradient(90deg, #1e7a45, var(--grade-rare)); }
.player-card.grade-hero .stat-bar-fill { background: linear-gradient(90deg, #1e4c99, var(--grade-hero)); }
.player-card.grade-legend .stat-bar-fill { background: linear-gradient(90deg, #6a2ea8, var(--grade-legend)); }
.player-card.grade-transcendence .stat-bar-fill { background: linear-gradient(90deg, var(--grade-transcendence-2), var(--grade-transcendence)); }
.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은 이제 카드 최상단 .pc-top-strip으로 이동했으므로, footer에는 가격만 남는다
   (2026-07-28 선수단 카드 리뉴얼). .player-price 자체가 text-align:right라 오른쪽 정렬이 유지된다. */
.player-card-footer {
  display: flex; justify-content: flex-end; 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; border: 1px solid var(--border-c);
}
.overall-tag b { font-size: 17px; font-family: var(--font-num); font-weight: 400; text-shadow: 0 0 10px currentColor; }
.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; }
/* 🆕(통합 체크리스트 P2 3번 "터치 타겟 최소 크기 보장", 2026-07-30): 치료/구단변경/판매/방출
   버튼이 폰트 11.5px, padding 10px 6px로 다른 버튼보다 눈에 띄게 작아 모바일에서 오탭 위험이
   있었다. 폰트/패딩(카드 폭에 맞춘 컴팩트 디자인)은 유지하되 min-height로 실제 클릭 가능 높이를
   44px 이상으로 보장한다. */
.player-card .card-btn-row .btn { flex: 1; padding: 10px 6px; font-size: 11.5px; min-height: 44px; }
/* 🐛 버그 픽스: FA 시장 "영입하기" 버튼에서 가격 표시("(473만원)")가 버튼 폭이 좁을 때 "473만"과
   "원)" 사이에서 어색하게 줄바꿈되는 문제 수정. 가격 부분 전체를 nowrap으로 고정해 한 덩어리로
   유지하고, 버튼 자체는 필요 시 두 줄(라벨/가격)로 자연스럽게 줄바꿈되도록 white-space:normal 유지. */
.fa-buy-btn { white-space: normal; line-height: 1.3; text-align: center; flex-wrap: wrap; row-gap: 2px; }
.fa-buy-price { white-space: nowrap; display: inline-block; }
.enhance-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: #241900;
  background: var(--accent-bg); padding: 3px 10px; border-radius: 999px;
  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; }
/* 🆕(2026-07-28 리뉴얼): 강화 진행바를 골드→레드 그라데이션으로 통일해 "강화 = 파워업" 느낌을 강조 */
.enhance-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 999px; box-shadow: 0 0 8px rgba(255,45,74,0.35); }
.enhance-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-sub); margin-top: 4px; }

/* ============================================================
   .mini-pcard — 강화 탭 좌측 선수 목록 등 축소 리스트용 카드(원본 참고 소스코드 player-card.jsx의
   MiniPlayerCard 구조 그대로: 36x36 그라데이션 정사각형(OVR 숫자) + 이름/포지션칩 + 팀축약·강화·별 텍스트).
   ============================================================ */
.mini-pcard {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--radius-sm); background: var(--bg-input);
  border: 1px solid var(--border-c); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.mini-pcard:hover { background: rgba(255,255,255,0.04); }
.mini-pcard.selected { border-color: var(--accent-bg); box-shadow: 0 0 0 3px rgba(255,176,32,0.18); }
.mini-pcard-ovr {
  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-num); font-size: 14px; color: #fff;
}
.mini-pcard.grade-normal .mini-pcard-ovr { background: linear-gradient(135deg, var(--grade-normal), #4d5871); box-shadow: 0 0 8px rgba(136,149,175,0.4); }
.mini-pcard.grade-rare .mini-pcard-ovr { background: linear-gradient(135deg, var(--grade-rare), #1e7a45); box-shadow: 0 0 8px rgba(77,214,138,0.4); }
.mini-pcard.grade-hero .mini-pcard-ovr { background: linear-gradient(135deg, var(--grade-hero), #1e4c99); box-shadow: 0 0 8px rgba(74,159,255,0.4); }
.mini-pcard.grade-legend .mini-pcard-ovr { background: linear-gradient(135deg, var(--grade-legend), #6a2ea8); box-shadow: 0 0 8px rgba(181,108,255,0.4); }
.mini-pcard.grade-transcendence .mini-pcard-ovr { background: linear-gradient(135deg, var(--grade-transcendence), var(--grade-transcendence-2)); box-shadow: 0 0 10px rgba(255,45,74,0.55); color: #fff; }
.mini-pcard-body { flex: 1; min-width: 0; }
.mini-pcard-name-row { display: flex; align-items: center; gap: 6px; }
.mini-pcard-name { font-weight: 700; font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-pcard-sub { font-size: 10px; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 별 강화(성급) 배지 */
.star-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: #241900;
  background: var(--accent-bg); padding: 3px 10px; border-radius: 999px;
  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: var(--font-display); 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: var(--font-display);
  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단 레이아웃: 좌측 선수 목록(280px) + 우측 강화 상세) ====================
   🆕(2026-07-28 재수정): 원본 참고 소스코드 EnhanceScreen 뼈대 그대로 — 전체
   grid-template-columns: 280px 1fr. 좌측은 검색/필터 없는 단순 세로 스크롤 리스트, 우측이 강화 상세. */
.enhance-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.enhance-list-col {
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-lg); padding: 14px;
}
.enhance-mini-list { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; padding: 2px; }
.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-14, 사용자 요청 "다시 로그로 순차 재생되게 해줘"): 각 줄이 순차적으로 나타나는 동안
   맨 위에 "⏳ 진행 중... (n/N)" 진행 표시줄을 sticky로 고정 배치해 스크롤해도 항상 보이게 하고,
   전부 재생 완료되면 "✅ 완료! (N/N)"로 전환된다. */
.enhance-auto-log-progress {
  position: sticky; top: 0; z-index: 1;
  font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: var(--radius-sm);
  background: rgba(245,158,11,0.12); color: var(--accent); border: 1px solid rgba(245,158,11,0.35);
  display: flex; align-items: center; gap: 6px;
}
.enhance-auto-log-progress::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(245,158,11,0.3); border-top-color: var(--accent);
  animation: spin .9s linear infinite; flex-shrink: 0;
}
.enhance-auto-log-progress.done {
  background: rgba(34,197,94,0.12); color: var(--green); border-color: rgba(34,197,94,0.4);
}
.enhance-auto-log-progress.done::before { animation: none; border-color: var(--green); }

/* ==================== 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); }

/* 🆕(2026-07-28 강화 탭 재작업, 참고 디자인의 "★★★★★★★★★★" 별강화 시각화 반영): 채워진 별/빈 별을
   나란히 그려 현재 성 진행 상태를 한눈에 보여준다. maxStar는 등급별로 다르므로(일반5/고급6/영웅8/전설10)
   새 등급을 만들지 않고 서버가 내려주는 값 그대로 개수만 렌더링한다. */
.enhance-star-icons {
  font-size: 20px; letter-spacing: 3px; color: var(--accent-bg); margin: 8px 0 14px;
  text-shadow: 0 0 10px rgba(255, 209, 92, 0.5); line-height: 1;
}
.enhance-star-icons-empty { color: var(--border-c); text-shadow: none; }

/* ============================================================
   🆕(2026-07-28 재수정, 원본 EnhanceScreen 뼈대 그대로): 강화 상세 패널을
   "선수 카드(펄스 효과) + 현재/다음 강화 2분할 + 능력치 변화 미리보기 + 부스트 아이템 칩" 구조로
   재구성. 원본 style={{display:'grid', gridTemplateColumns:'220px 1fr'}} 및 하위 요소들을
   그대로 클래스로 이식한다(로직/데이터는 서버가 이미 계산해 내려주는 값만 사용, 새 데이터 추가 없음).
   ============================================================ */
.enhance-detail-body { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.enhance-detail-card-col { position: relative; }
.enhance-detail-card-col .pulse {
  position: absolute; inset: -8px; border-radius: 16px; border: 2px solid rgba(255,45,74,0.4); pointer-events: none;
  animation: enhancePulseGlow 2s ease-in-out infinite;
}
@keyframes enhancePulseGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,45,74,0.4); }
  50% { box-shadow: 0 0 24px rgba(255,45,74,0.7); }
}
.enhance-current-next-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 12px; margin-bottom: 16px; align-items: stretch; }
.enhance-current-next-divider { background: var(--border-c); }
.enhance-current-col .big-num, .enhance-next-col .big-num { font-size: 32px; }
.enhance-current-col .enhance-stars-line { font-size: 14px; color: var(--accent-bg); letter-spacing: 2px; margin-top: 2px; }
.enhance-next-col .enhance-gain-tag { color: #7effb0; font-size: 12px; white-space: nowrap; }
.enhance-next-col .enhance-rate-line { font-size: 11px; color: var(--text-sub); margin-top: 14px; }
.enhance-next-col .enhance-cost-line { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.enhance-next-col .enhance-rate-line b, .enhance-next-col .enhance-cost-line b { font-family: var(--font-mono); }
.enhance-stat-preview-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; margin-bottom: 16px; }
.enhance-stat-preview-cell {
  padding: 8px 4px; border-radius: 8px; background: rgba(10,18,36,0.6); border: 1px solid var(--border-c);
  text-align: center; min-width: 0;
}
.enhance-stat-preview-cell .lbl { font-size: 10px; color: var(--text-sub); }
.enhance-stat-preview-cell .row { display: flex; gap: 3px; justify-content: center; align-items: baseline; margin-top: 2px; flex-wrap: nowrap; }
.enhance-stat-preview-cell .cur { font-family: var(--font-mono); color: #fff; font-size: 15px; }
.enhance-stat-preview-cell .gain { color: #7effb0; font-size: 10px; white-space: nowrap; }
.enhance-boost-chip-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.enhance-boost-chip {
  padding: 6px 12px; border-radius: 8px; background: rgba(56,208,255,0.08); border: 1px solid rgba(56,208,255,0.3);
  font-size: 12px; color: var(--cyan); cursor: pointer; white-space: nowrap;
}
.enhance-boost-chip.disabled { opacity: 0.45; cursor: not-allowed; }
.enhance-boost-chip .mult { color: var(--text-sub); }
.enhance-action-row { display: flex; gap: 8px; }
.enhance-action-row .btn-do { flex: 2; }
.enhance-action-row .btn-auto { flex: 1; }
.enhance-action-footnote { font-size: 11px; color: var(--text-4, var(--text-sub)); margin-top: 8px; text-align: center; }

/* ==================== 🆕 초월(Transcendence) 승급 재료 카드 선택 그리드 (2026-07-30) ====================
   승급은 등급승급(자동 선택)과 달리 재료 5장을 사용자가 직접 고를 수 있어(문서 2.4절), 체크형
   선택 카드 그리드가 새로 필요하다. enhance-mini-list의 .mini-pcard를 그대로 재사용하고, 선택
   상태만 이 래퍼 클래스로 표시한다. */
.transcendence-material-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
  max-height: 320px; overflow-y: auto; padding: 4px; margin: 10px 0;
  border: 1px solid var(--border-c); border-radius: var(--radius-md); background: rgba(10,18,36,0.35);
}
.transcendence-material-pick { position: relative; cursor: pointer; border-radius: var(--radius-sm); transition: transform .15s ease; }
.transcendence-material-pick:hover { transform: translateY(-2px); }
.transcendence-material-pick.picked .mini-pcard { outline: 2px solid var(--accent-bg); box-shadow: 0 0 12px rgba(255,209,92,0.5); }
.transcendence-material-pick.locked { opacity: 0.4; cursor: not-allowed; }
.transcendence-material-pick.locked:hover { transform: none; }
.transcendence-material-pick-badge {
  position: absolute; top: 3px; right: 3px; z-index: 2; font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; background: var(--accent-bg); color: #2a1a00;
}
.transcendence-material-pick-lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-sub); background: rgba(0,0,0,0.35); border-radius: var(--radius-sm); z-index: 2;
}
.transcendence-material-count-bar {
  display: flex; justify-content: space-between; align-items: center; font-size: 12.5px;
  color: var(--text-sub); margin-bottom: 6px; flex-wrap: wrap; gap: 6px;
}
.transcendence-material-count-bar b { color: var(--accent-bg); font-family: var(--font-mono); }
.transcendence-max-banner {
  background: rgba(255,45,74,0.1); border: 1px solid var(--grade-transcendence); color: var(--grade-transcendence);
  padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 700; margin-top: 6px; text-align: center;
}

/* ==================== 라인업 화면: 포지션 슬롯 카드 ==================== */
.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; }
/* 🆕(요구사항 5번): 대타 슬롯에 배치된 선수의 실제 포지션(투수 제외 전 포지션 가능) 강조 배지 */
.lineup-slot-position-badge { color: var(--grass); font-weight: 700; background: rgba(34,197,94,0.12); 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; }

/* 뽑기 화면 (2026-07-28 리뉴얼: 골드+레드 글로우로 "가챠 두근거림" 강조) */
.gacha-hero {
  text-align: center; padding: 32px 20px; border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 0%, rgba(255,181,71,0.14), transparent 60%), var(--bg-panel-2);
  border: 1px solid var(--border-c);
}
.gacha-machine { font-size: 56px; margin-bottom: 12px; filter: drop-shadow(0 0 16px rgba(255,181,71,0.5)); }
.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: var(--shadow-card);
}
.gacha-result-card.dup { opacity: 0.65; }
@keyframes popIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 경기 화면: 스코어보드 (2026-07-28 리뉴얼: 컴프야 스타일 중계 스코어보드 참고, 붉은 글로우 헤더 바 추가) */
.match-arena {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 22px 14px; text-align: center; position: relative;
  background: linear-gradient(180deg, rgba(255,45,74,0.13), rgba(139,18,32,0.16) 60%, transparent);
  border: 1px solid var(--border-c); border-radius: var(--radius-lg); overflow: hidden;
}
.match-arena::before {
  content: '● LIVE'; position: absolute; top: 10px; left: 14px; font-size: 10px; font-weight: 800;
  color: var(--primary); letter-spacing: 0.08em; text-shadow: 0 0 8px rgba(255,45,74,0.6);
}
.match-side { flex: 1; }
.match-vs {
  font-size: 22px; font-weight: 800; color: var(--accent); font-family: var(--font-num);
  text-shadow: 0 0 10px rgba(255,181,71,0.4);
}
.match-team-name { font-weight: 800; font-size: 15px; margin-bottom: 8px; letter-spacing: 0.2px; color: var(--text-main); }
.match-score {
  display: inline-block; font-size: 40px; font-weight: 400; font-family: var(--font-num);
  background: rgba(0,0,0,0.35); padding: 6px 26px; border-radius: var(--radius-md); color: #fff;
  text-shadow: 0 0 18px rgba(255,181,71,0.55); border: 1px solid var(--border-c);
}
.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); }

/* 🆕(2026-07-30, 통합 체크리스트 P1 2번: "경기 로그/정밀 경기 로그 UI 개편")
   데스크톱(≥721px): 기존 표(.match-log-table-wrap)를 그대로 유지하되, 긴 "결정 투수" 열은
   최대 너비를 주고 줄바꿈을 허용해 가독성을 높인다(기존엔 white-space:nowrap로 한 줄에 다 몰려
   글자가 잘려 보이는 문제가 있었음). 카드형 리스트(.log-card-list)는 데스크톱에서 항상 숨긴다.
   모바일(≤720px): 반대로 표를 숨기고 카드형 리스트만 보여줘 가로 스크롤 없이 핵심 결과만 먼저
   파악할 수 있게 한다. */
.log-card-list { display: none; }
.match-log-table-wrap .col-decision { white-space: normal; max-width: 260px; }
.match-log-table-wrap .col-replay-head { text-align: center; }
.log-replay-btn {
  border: 1px solid var(--border-c); background: var(--bg-input); color: var(--text-sub);
  border-radius: 999px; padding: 3px 10px; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.log-replay-btn:hover { background: var(--primary-soft); color: var(--text-main); border-color: var(--primary); }
.log-row-clickable { cursor: pointer; }
.log-detail-toggle-hint { font-size: 10.5px; color: var(--text-sub); }

@media (max-width: 720px) {
  .match-log-table-wrap { display: none; }
  .log-card-list { display: flex; flex-direction: column; }
  /* 카드 리스트는 .mission(홈 화면 최근 경기 카드와 동일 컴포넌트)을 재사용하되, 로그 카드는
     클릭으로 펼쳐지는 투수 상세 영역(.log-card-detail)과 "▶ 다시보기" 버튼이 추가로 필요하다. */
  .log-card { display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: var(--radius-md); background: rgba(255,255,255,0.02); border: 1px solid var(--border-c); overflow: hidden; }
  .log-card + .log-card { margin-top: 8px; }
  .log-card-main { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
  .log-card-result { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
  .log-card-body { flex: 1; min-width: 0; }
  .log-card-title { font-weight: 700; font-size: 12.5px; color: var(--text-main); }
  .log-card-desc { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
  .log-card-reward { font-family: var(--font-mono); font-size: 11.5px; padding: 3px 8px; border-radius: 4px; background: rgba(255,181,71,0.1); border: 1px solid rgba(255,181,71,0.25); flex-shrink: 0; white-space: nowrap; }
  .log-card-detail { display: none; padding: 0 12px 12px; border-top: 1px dashed var(--border-c); }
  .log-card.open .log-card-detail { display: block; padding-top: 10px; }
  .log-card-detail-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-sub); padding: 3px 0; }
  .log-card-replay-btn { margin-top: 8px; width: 100%; }
}
.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); }

/* 🆕(2026-07-30, 통합 체크리스트 P3 2번 "빈 상태/단순 화면 UX 점검"): 선물함/선수 추가 요청처럼
   데이터가 아예 없는 게 정상 상태인 화면에서 기존 .empty-state는 회색 텍스트 한 줄("아직 받은
   선물이 없습니다")뿐이라 텅 비어 보이고 "이게 오류인지 정상인지" 헷갈리기 쉬웠다. 큰 아이콘 +
   제목 + 부연설명 2단 구조로 "정상적으로 비어있음"을 명확히 알리고, 다음에 뭘 하면 되는지
   안내한다(예: "관리자가 선물을 보내면 여기에 표시돼요"). 기존 .empty-state(로딩/오류 문구)는
   그대로 재사용하고, "데이터 0건" 케이스에만 이 컴포넌트로 교체한다. */
.empty-state-rich { text-align: center; padding: 44px 20px 40px; }
.empty-state-rich .esr-icon { font-size: 40px; line-height: 1; margin-bottom: 12px; opacity: 0.85; }
.empty-state-rich .esr-title { font-size: 14.5px; font-weight: 700; color: var(--text-main); margin: 0 0 6px; }
.empty-state-rich .esr-desc { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; margin: 0; }
@media (max-width: 720px) {
  .empty-state-rich { padding: 34px 16px 30px; }
  .empty-state-rich .esr-icon { font-size: 34px; margin-bottom: 10px; }
}

/* 토스트 */
#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: var(--shadow-card);
}
/* 🆕(2026-07-28 리뉴얼): 달성 완료(보상 수령 가능) 카드는 골드 글로우로 강조해 "받을 게 있다"는 신호를 준다 */
.achievement-card.achieved { opacity: 1; filter: none; border-color: var(--accent); box-shadow: var(--shadow-card), 0 0 16px rgba(255,181,71,0.25); }
.achievement-card.achieved:hover { transform: translateY(-3px); box-shadow: var(--shadow-card), 0 0 22px rgba(255,181,71,0.35); }
.achievement-card.claimed { border-color: var(--grass); box-shadow: var(--shadow-card); }
.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; }

/* 🆕(통합 체크리스트 P2 4번 "업적 보상 UX 개선" - 전체 보상 받기 바, 2026-07-30): 골드 글로우 배경으로
   "받을 게 있다"는 achievement-card.achieved와 톤을 통일하고, 카드 그리드 위에서 눈에 먼저 들어오도록
   배치한다. 반복 클릭 피로 감소가 목적이라 버튼 하나로 전체 수령이 끝난다는 것을 문구로 명확히 안내. */
.achievement-claim-all-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,181,71,0.16), rgba(255,181,71,0.04));
  border: 1px solid rgba(255,181,71,0.4); border-radius: var(--radius-md);
  padding: 14px 18px; margin-bottom: 16px;
}
.achievement-claim-all-bar #achievement-claim-all-text { font-size: 13.5px; font-weight: 700; color: var(--accent-bg); }
.achievement-claim-all-bar .btn { flex-shrink: 0; min-height: 44px; }

/* ==================== 컨디션 / 부상 표시 ==================== */
.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;
  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(74,159,255,0.08); }
/* 🆕 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(74,159,255,0.08); }
.broadcast-line.event-pinchHit { border-left-color: var(--grade-hero); color: var(--grade-hero); font-style: italic; background: rgba(74,159,255,0.08); }
@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 10px; letter-spacing: 0.1px; display: flex; align-items: center; gap: 8px; }
/* 🆕(개발자 체크리스트 P1: 트레이드 화면 가독성/탐색성 개선)
   좌(보낼 선수)/우(요청할 선수) 영역을 색상 테두리 + 배경 틴트로 명확히 분리하고,
   카드 밀도를 낮추기 위해 트레이드 사이드 패널 자체에 여백/보더를 부여한다. */
.trade-side { border-radius: var(--radius-md); padding: 12px; border: 1px solid transparent; }
.trade-side-offer { background: rgba(255,45,74,0.04); border-color: rgba(255,45,74,0.18); }
.trade-side-request { background: rgba(56,189,248,0.04); border-color: rgba(56,189,248,0.18); }
.trade-side-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.trade-side-tag.offer { background: rgba(255,45,74,0.14); color: var(--primary); }
.trade-side-tag.request { background: rgba(56,189,248,0.14); color: #38bdf8; }
.trade-mini-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.trade-mini-filter-row .search { flex: 1 1 160px; min-width: 140px; }
.trade-mini-filter-row .filter-chip-select { flex: 0 1 auto; }
.trade-mini-filter-row input:disabled, .trade-mini-filter-row select:disabled { opacity: 0.45; cursor: not-allowed; }
/* 카드 밀도 완화: 기존 180px → 200px, gap 확대 */
.trade-mini-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-height: 340px; overflow-y: auto; padding: 4px; }
.trade-mini-grid .player-card { cursor: pointer; padding: 14px; }
.trade-mini-grid .player-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* 🆕(통합 체크리스트 P1 "트레이드 화면 전면 개선" 모바일 단계형 플로우, 2026-07-30)
   기본(데스크톱, 721px 이상)에서는 모든 단계를 동시에 보여줘 기존 UX를 그대로 유지하고,
   진행 인디케이터(.trade-wizard-steps)는 모바일 전용이므로 숨긴다. */
.trade-wizard-steps { display: none; }
@media (min-width: 721px) {
  .trade-step { display: block !important; }
  /* 🐛(2026-07-30 수정) 기존에는 .trade-step-nav 전체를 숨겨서 4단계 안에 함께 들어있는
     "거래 제안 보내기" 전송 버튼(#trade-send-btn)까지 데스크톱에서 사라지는 버그가 있었다.
     모바일 전용 이전/다음 버튼만 숨기고, 전송 버튼은 항상 보이게 한다. */
  .trade-step-prev, .trade-step-next { display: none !important; }
  .trade-step-nav { display: block !important; margin-top: 14px; }
}
/* 협폭(720px 이하): 한 화면에 한 단계만 노출하는 위저드 플로우 */
@media (max-width: 720px) {
  .trade-wizard-steps { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }
  .tw-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-sub); opacity: 0.6; }
  .tw-step .tw-num {
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--bg-input); border: 1px solid var(--border-c); font-weight: 800; font-size: 11px;
  }
  .tw-step.active { opacity: 1; color: var(--text-main); }
  .tw-step.active .tw-num { background: var(--primary); border-color: var(--primary); color: #fff; }
  .tw-step.done { opacity: 0.85; }
  .tw-step.done .tw-num { background: rgba(126,255,176,0.18); border-color: #7effb0; color: #7effb0; }
  .trade-step { display: none; }
  .trade-step.active { display: block; animation: fadeInStep 0.25s ease; }
  .trade-columns.trade-columns { display: block; margin: 0; } /* 위저드 모드에서는 좌우 그리드를 풀어 단계별 세로 배치 */
  .trade-step-nav { display: flex; gap: 8px; margin-top: 14px; }
  .trade-step-nav .btn { flex: 1; }
  .trade-mini-grid { max-height: none; }
  .trade-review-box { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
}
@keyframes fadeInStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.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; }

/* ==================== 📝 선수 추가 요청 - 상태/중복 배지 (신규, 사용자 요청 "관리자 페이지에
   중복된 이름과 소속팀인지 확인 가능하게 중복표시 해줘") ==================== */
.request-status-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.request-status-chip.pending { background: rgba(217,119,6,0.12); color: var(--accent); }
.request-status-chip.approved { background: rgba(22,163,74,0.12); color: var(--green); }
.request-status-chip.rejected { background: rgba(220,38,38,0.12); color: var(--red); }
/* 중복 배지: 이미 선수 풀에 같은 이름+원소속팀이 있으면(pool), 다른 대기중 요청과 중복되면(pending) 각각 다른 색으로 경고 */
.dup-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; margin: 1px 3px 1px 0; }
.dup-badge-pool { background: rgba(220,38,38,0.14); color: var(--red); border: 1px solid rgba(220,38,38,0.35); }
.dup-badge-pending { background: rgba(217,119,6,0.14); color: var(--accent); border: 1px solid rgba(217,119,6,0.35); }
.dup-badge-none { color: var(--text-sub); font-size: 11px; }

/* ==================== 💵 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-text { overflow: hidden; }
  .side-nav-manager-name { font-size: 10px; }
  .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;
  }

  /* 📱 하단 고정 탭 바 — 🆕(2026-07-30, 개발자 체크리스트 1차: "가로 스크롤 의존 구조" 개선)
     기존에는 18개 탭 전부가 가로 스크롤 한 줄에 나열되어, 신규 유저가 "경기/시즌/랭킹" 같은 핵심
     탭을 찾으려면 옆으로 스크롤해야 했다(숨겨진 탭이 있다는 힌트도 없었음). 이제는 자주 쓰는
     tab-priority 5개(홈/선수단/경기/시즌/랭킹) + "더보기" 버튼만 균등 그리드로 표시하고,
     .nav-group-label과 비-priority .tab-btn은 하단 탭바에서는 숨긴다(더보기 시트에서 대신 노출).
     스크롤이 사라지므로 "숨겨진 탭 힌트"도 더 이상 필요 없다(모든 항목이 항상 화면 안에 보임). */
  .tab-nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
    /* 🆕(2026-07-30, 통합 체크리스트 P3 1번 "폴드 전용 초협폭 대응 보강"):
       기존 배경은 var(--bg-panel)(rgba(20,32,60,0.72)) + blur(6px)라 투명도가 남아 있었다.
       Galaxy Fold 280px 폭에서 홈 화면 퀵액션 카드 제목("PvP 대결"/"선수단 관리"/"시즌제")이
       하단 탭바 바로 아래(스크롤 시)에 위치하면, 이 잔여 투명도 때문에 카드 글자가 탭 라벨
       뒤로 비쳐 보이며 겹쳐 보이는 문제가 있었다(좁은 화면일수록 글자 간 거리가 가까워 더 눈에 띔).
       탭바 배경을 사실상 불투명하게(opacity 0.96) 올리고 blur를 강화해 비침을 제거한다. */
    background: rgba(15, 24, 46, 0.96); backdrop-filter: blur(14px); border-top: 1px solid var(--border-c);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 18px rgba(0,0,0,0.3);
  }
  .nav-group-label { display: none; }
  .tab-btn { display: none; }
  .tab-btn.tab-priority, .tab-btn.tab-more-btn {
    display: flex; width: auto; flex-direction: column; justify-content: center; align-items: center;
    gap: 3px; padding: 7px 2px; min-width: 0; 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; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }

  /* 🆕(2026-07-28, 헤더 모바일 wrap 수정): .stat-hud-chips가 flex:1+flex-wrap:wrap이라 상위
     .stat-hud의 flex-wrap과 뒤섞이면서 칩들이 예측 불가능한 순서로 3줄 wrap되는 문제가 있었다.
     모바일에서는 "1행: 팀배지+액션버튼 / 2행: 칩 그룹(가로 스크롤)"의 명확한 2단 구조로 강제한다. */
  .stat-hud { padding: 10px 12px; gap: 6px; }
  .stat-hud-brand { order: 1; padding-right: 10px; }
  .stat-hud-actions { order: 2; }
  .stat-hud-chips {
    order: 3; flex: 1 1 100%; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-top: 2px; padding-bottom: 2px;
  }
  .stat-hud-chips::-webkit-scrollbar { display: none; }
  .stat-chip { padding: 6px 10px; font-size: 11.5px; flex-shrink: 0; }
  .stat-hud-brand-name { max-width: 90px; }
  .stat-hud-brand-sub { font-size: 10.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-badge-row로 분리되어 있어 이름 줄과 무관하게 자체적으로 줄바꿈된다 */
  .player-card-top { flex-wrap: wrap; }
  .lineup-badge-row, .player-pos { flex-wrap: wrap; }
  .pc-ovr-big { font-size: 24px; }

  /* 💵 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 시장 컴팩트 카드에서는 대형 OVR도 함께 축소(좁은 카드에서 겹침 방지) */
  .fa-market-grid .player-card .pc-ovr-big { font-size: 20px; }
  .fa-market-grid .player-card .pc-top-strip { margin-bottom: 4px; }
  .fa-market-grid .player-card .pc-pos-chip { width: 24px; height: 18px; font-size: 9px; }
  .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-mini-list { 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; }
  /* 모바일: 좁은 폭에서 문구+버튼이 나란히 있으면 버튼이 짓눌리므로 세로로 쌓고 버튼을 꽉 채운다. */
  .achievement-claim-all-bar { flex-direction: column; align-items: stretch; padding: 12px 14px; }
  .achievement-claim-all-bar .btn { width: 100%; }

  .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; }
  /* 강화 탭: panel-header 우측 tabbar(레벨강화/별강화/등급승급)가 좁은 화면에서 줄바꿈되게 함 */
  #enhance-detail-col .panel-header { flex-wrap: wrap; }
  #enhance-detail-col .panel-header .tabbar { margin-left: 0; width: 100%; }
  .gacha-hero { padding: 22px 14px; }
  .trade-compose { padding: 14px; }
  .difficulty-current-row { gap: 8px; }
  .difficulty-name-text { min-width: 100%; order: 3; }

  /* 🆕(2026-07-29, 사용자 실기기 리포트): 강화 탭 상세 패널(.enhance-detail-body 220px 고정 카드+1fr /
     .enhance-current-next-grid 1fr 1px 1fr / .enhance-stat-preview-grid 5열)이 원래 420px 미만
     초소형 화면에서만 세로 스택으로 바뀌도록 되어 있었는데, 요즘 흔한 안드로이드 폰(CSS 너비
     412~430px대, 즉 420px보다 넓은 경우가 많음)은 이 조건에 걸리지 않아 데스크톱 레이아웃이
     그대로 적용됨 → 우측 좁은 영역에 파워/정확/스피드/제구/체력 5개 숫자가 욱여넣어지면서
     겹쳐 보이는 문제가 발생했다. 720px 기준으로 올려 실질적으로 모든 모바일 폭에서 세로 스택되게 한다. */
  .enhance-detail-body { grid-template-columns: 1fr; gap: 16px; }
  .enhance-current-next-grid { grid-template-columns: 1fr; }
  .enhance-current-next-divider { display: none; }
  .enhance-stat-preview-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .enhance-action-row { flex-direction: column; }
  .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; }
  /* 🆕(2026-07-29, 카드 확대 요청): 데스크톱은 좌우 2단 배치라 카드 폭이 220px로 좁아야 하지만,
     모바일은 세로 스택이라 화면 폭을 거의 다 쓸 수 있다. 220px로 캡을 걸어두면 화면에 여백이 남는데도
     카드가 작아 보이므로, 화면 폭에 맞춰 최대 300px까지 커지도록 완화한다. */
  .enhance-detail-card-col { max-width: 280px; width: 78%; margin: 0 auto; }
}

@media (max-width: 420px) {
  /* 🆕(2026-07-28, 헤더 리뉴얼): 칩 그룹은 720px 브레이크포인트에서 이미 2행+가로스크롤 구조로
     전환되어 4개 칩이 모두 표시되므로, 초소형 화면에서 별도로 칩을 숨길 필요는 없다. */
  .stat-hud-brand { border-right: none; }
  .side-nav-brand-text { 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; }

  /* 강화 탭 세로 스택 규칙은 720px 블록으로 이동(위 참고: 2026-07-29 리포트) — 여기서는 중복 제거 */

  /* 라인업 탭: 슬롯을 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; }

/* 🔧(2026-07-28, 경기 탭 진짜 재작업): 원래는 별도의 큰 패널(위쪽에 점수/이닝을 다시 표시하는
   .live-match-scoreboard까지 포함)이었으나, 그 정보가 최상단 스코어보드와 중복이라 스코어보드
   규칙은 삭제했고, 이 패널 자체도 컨트롤바(.match-control-bar) 안에 나란히 놓이는 작은 블록으로
   축소했다(원본 참고 디자인처럼 난이도+시작 버튼이 한 줄에 있도록). */
.live-match-panel {
  flex: 1 1 260px; min-width: 220px; padding: 10px 14px;
  background: rgba(255,45,74,0.06); border: 1px solid var(--primary-soft); border-radius: var(--radius-md);
}
.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-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, box-shadow .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(--grass); border-color: var(--grass); box-shadow: 0 0 10px var(--grass), 0 0 18px rgba(77,214,138,0.5); }
.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-27, PvP 재구축) 랜덤 3팀 매칭 후보 카드 */
/* 🆕(2026-07-28 리뉴얼): PvP 대결 상대 후보 카드 — 레드 테마 강조로 "대결" 느낌을 살림 */
/* 🆕(PvP 전면 리뉴얼, 사용자 제공 참고 코드 screens-match.jsx PvpScreen()의 qa-card 마크업 이식):
   기존 텍스트 나열형 카드를 팀컬러 뱃지 + OVR/전적 2열 스탯박스 + 승률/연승 한 줄 구조로 확장.
   .qa-card 기반 클래스를 함께 부여해 호버 애니메이션/배경 톤은 홈 대시보드 카드와 통일한다. */
.pvp-candidate-card {
  text-align: left; padding: 18px; min-height: 220px;
}
.pvp-candidate-card:hover { border-color: var(--primary); box-shadow: 0 8px 24px rgba(255,45,74,0.25); }
.pvp-candidate-tag { position: absolute; top: 12px; right: 12px; }
.pvp-candidate-badge {
  width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-num); color: #fff; font-size: 19px;
}
.pvp-candidate-card .pvp-candidate-name { font-size: 15px; font-weight: 800; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvp-candidate-card .pvp-candidate-manager { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.pvp-candidate-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.pvp-candidate-stat-box { padding: 8px; background: rgba(0,0,0,0.3); border-radius: 6px; text-align: center; }
.pvp-candidate-foot { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.pvp-candidate-card .btn { margin-top: 12px; width: 100%; }
.pvp-ranking-body tr.me, #pvp-ranking-body tr.me { background: var(--primary-soft); }

/* 🆕(PvP 리뉴얼): 대결 대기 화면 상단 "MY TEAM vs 상대" 비교 패널 */
.pvp-vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.pvp-vs-side { text-align: center; }
.pvp-vs-mid { font-family: var(--font-num); font-size: 32px; color: var(--primary); text-shadow: 0 0 20px rgba(255,45,74,0.5); text-align: center; }
.pvp-vs-sub { color: var(--text-sub); font-size: 12px; margin-top: 4px; }
.pvp-vs-streak { font-size: 12px; margin-top: 8px; min-height: 16px; }
@media (max-width: 560px) {
  .pvp-vs-grid { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .pvp-vs-mid { font-size: 22px; }
}

/* 🆕(랭킹 리뉴얼): 상위 3위 트로피 카드 + 랭킹 테이블 팀뱃지/스파크라인 */
.rank-trophy-card { position: relative; overflow: hidden; border-radius: var(--radius-lg, 12px); border: 1px solid var(--border-c); padding: 18px; }
.rank-trophy-card.me { box-shadow: 0 0 0 2px rgba(255,45,74,0.35); }
.rank-trophy-emoji { position: absolute; top: -20px; right: -16px; font-size: 96px; opacity: 0.15; line-height: 1; pointer-events: none; }
.rank-trophy-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; position: relative; z-index: 1; }
.rank-trophy-num { font-family: var(--font-num); font-size: 32px; line-height: 1; }
.rank-trophy-team { font-size: 16px; font-weight: 800; color: #fff; }
.rank-trophy-manager { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.rank-trophy-stats { display: flex; gap: 8px; position: relative; z-index: 1; }
.rank-trophy-stat-box { flex: 1; padding: 10px; background: rgba(0,0,0,0.4); border-radius: 8px; text-align: center; min-width: 0; }
.rank-team-cell { display: flex; align-items: center; gap: 8px; }
.rank-team-badge {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-num); color: #fff; font-size: 11px;
}
/* 투구 카운트(B-S) 및 역할 배너를 경기 스코어보드 톤에 맞춰 강조 */
.pvp-count-display { text-align: center; font-family: var(--font-num); font-size: 18px; color: var(--accent); margin: 6px 0; text-shadow: 0 0 10px rgba(255,181,71,0.35); }
.pvp-role-banner { color: var(--primary); text-shadow: 0 0 8px rgba(255,45,74,0.4); }

/* 🆕(개발자 체크리스트 P1: 랭킹 화면 로딩 체감 개선)
   shimmer 애니메이션 skeleton — 표 행/트로피 카드 로딩 중 실제 레이아웃과 유사한 회색 블록을
   보여줘 "곧 채워질 데이터"라는 느낌을 준다. */
@keyframes skeleton-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skel-line {
  height: 12px; border-radius: 4px; width: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.05) 63%);
  background-size: 400px 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skel-line.skel-w40 { width: 40%; } .skel-line.skel-w50 { width: 50%; } .skel-line.skel-w70 { width: 70%; }
tr.skeleton-row td { padding: 12px 10px; }
.rank-trophy-card.skeleton-card { display: flex; flex-direction: column; justify-content: center; min-height: 132px; }

/* 🆕(개발자 체크리스트 P1: 내 팀 행 하이라이트 강화)
   기존 tr.me의 은은한 배경만으로는 눈에 잘 안 띈다는 지적 → 좌측 컬러 바 + 은은한 글로우 추가.
   랭킹 표 전용으로 한정해 다른 tr.me 사용처(트레이드 등)에는 영향 없게 한다. */
#ranking-body tr.me {
  position: relative; background: rgba(255,45,74,0.10);
  box-shadow: inset 3px 0 0 var(--primary), 0 0 16px rgba(255,45,74,0.12);
}
#ranking-body tr.me td:first-child { font-weight: 800; color: var(--primary); }

/* ==================== 🛠️ 관리자 계정/설정 패널 (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);
}

/* ============================================================
   🆕 2026-07-28 리뉴얼 — 컴프야 스타일 신규 컴포넌트 클래스 모음
   (project_extracted/styles.css를 참고해 새로 제작. 기존 vanilla JS 구조에
   맞춰 클래스명은 유지하고 톤앤매너만 이식)
   ============================================================ */

/* --- 홈 대시보드: 히어로 비주얼 --- */
.hero-visual {
  height: 220px; border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background:
    radial-gradient(ellipse 700px 400px at 50% 100%, rgba(255,45,74,0.35), transparent 60%),
    linear-gradient(180deg, #0d1b3a 0%, #050914 100%);
  border: 1px solid var(--border-c); box-shadow: var(--shadow-card);
  margin-bottom: 20px; display: flex; align-items: flex-end; padding: 22px 26px;
}
.hero-visual .stadium-lines {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(120,160,220,0.05) 60px, rgba(120,160,220,0.05) 61px),
    radial-gradient(ellipse 400px 200px at 50% 100%, rgba(77,214,138,0.14), transparent 60%);
}
.hero-visual .hero-title {
  font-family: var(--font-num); font-weight: 400; font-size: 34px; color: #fff; line-height: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 30px rgba(255,45,74,0.4); position: relative; z-index: 1;
}
.hero-visual .hero-title .accent { color: var(--primary); }
.hero-visual .hero-sub { color: var(--text-sub); font-size: 12.5px; margin-top: 6px; position: relative; z-index: 1; }

/* 🆕(2026-08-01, v1.10.1) §3.1 "홈 첫 1스크린에는 대표 행동 5개만": 히어로가 모바일에서 220px를
   차지해 행동 카드 5장이 첫 스크린 경계에 겨우 걸쳤다. 장식 영역이므로 모바일에서만 압축한다.
   ⚠️ CSS 소스 순서 트랩 준수: 데스크톱 규칙 바로 뒤에 둔다. */
@media (max-width: 720px) {
  .hero-visual { height: 132px; padding: 14px 16px; margin-bottom: 14px; }
  .hero-visual .hero-title { font-size: 22px; }
  .hero-visual .hero-sub { font-size: 11.5px; margin-top: 4px; }
}

/* --- 홈 대시보드: 퀵액션 카드 --- */
.qa-card {
  position: relative; border-radius: var(--radius-md); padding: 16px;
  background: linear-gradient(135deg, rgba(30,48,84,0.7), rgba(15,26,51,0.9));
  border: 1px solid var(--border-c); cursor: pointer; transition: all .2s; overflow: hidden;
  min-height: 100px; display: flex; flex-direction: column; justify-content: space-between;
}
.qa-card:hover { transform: translateY(-2px); border-color: rgba(255,45,74,0.4); box-shadow: 0 8px 24px rgba(255,45,74,0.2); }
.qa-card.hot { background: linear-gradient(135deg, rgba(255,45,74,0.25), rgba(139,18,32,0.4)); border-color: rgba(255,45,74,0.5); }
.qa-card .qa-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.08);
  display: grid; place-items: center; font-size: 19px; border: 1px solid var(--border-c);
}
.qa-card.hot .qa-icon { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-color: rgba(255,255,255,0.2); box-shadow: 0 0 16px rgba(255,45,74,0.5); }
.qa-card .qa-title { font-weight: 800; font-size: 14.5px; color: var(--text-main); letter-spacing: -0.01em; margin-top: 8px; }
.qa-card .qa-desc { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.qa-card .qa-cta { font-family: var(--font-mono); font-size: 11px; color: var(--primary); letter-spacing: 0.1em; display: flex; align-items: center; gap: 4px; margin-top: 8px; }

/* --- 홈 대시보드: 미션(업적 요약) 리스트 --- */
.mission { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(255,255,255,0.02); border: 1px solid var(--border-c); }
.mission + .mission { margin-top: 8px; }
.mission .mi-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(255,181,71,0.12); color: var(--accent); display: grid; place-items: center; font-size: 15px; border: 1px solid rgba(255,181,71,0.2); flex-shrink: 0; }
.mission .mi-body { flex: 1; min-width: 0; }
.mission .mi-title { font-weight: 700; font-size: 12.5px; color: var(--text-main); }
.mission .mi-desc { font-size: 11px; color: var(--text-sub); }
.mission .mi-reward { font-family: var(--font-mono); color: var(--accent); font-size: 11.5px; padding: 3px 8px; border-radius: 4px; background: rgba(255,181,71,0.1); border: 1px solid rgba(255,181,71,0.25); flex-shrink: 0; }

/* --- 홈 대시보드: 통계 카드/큰 숫자 --- */
.big-num { font-family: var(--font-num); font-weight: 400; font-size: 28px; color: var(--text-main); line-height: 1; letter-spacing: 0.02em; }
.big-num.gold { color: var(--accent-bg); text-shadow: 0 0 20px rgba(255,181,71,0.5); }
.big-num.red { color: var(--primary); text-shadow: 0 0 20px rgba(255,45,74,0.5); }
.stat-lbl { font-size: 10px; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }

/* --- 범용 유틸 --- */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-c); font-size: 11px; font-weight: 600;
  color: var(--text-sub); white-space: nowrap;
}
.chip.red { background: rgba(255,45,74,0.15); border-color: rgba(255,45,74,0.4); color: #ff9aab; }
.chip.gold { background: rgba(255,181,71,0.15); border-color: rgba(255,181,71,0.4); color: var(--accent-bg); }
.chip.cyan { background: rgba(56,208,255,0.15); border-color: rgba(56,208,255,0.4); color: var(--cyan); }
.chip.green { background: rgba(77,214,138,0.15); border-color: rgba(77,214,138,0.4); color: #7effb0; }

.progress { position: relative; height: 8px; background: rgba(0,0,0,0.4); border-radius: 4px; overflow: hidden; border: 1px solid var(--border-c); }
.progress .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--primary-dark), var(--primary)); box-shadow: 0 0 12px rgba(255,45,74,0.5); }
.progress .fill.gold { background: linear-gradient(90deg, #a86a10, var(--accent-bg)); box-shadow: 0 0 12px rgba(255,181,71,0.5); }
.progress .fill.cyan { background: linear-gradient(90deg, #1a8fbd, var(--cyan)); box-shadow: 0 0 12px rgba(56,208,255,0.5); }

/* --- 탭바(필터바) & 필터칩 & 검색창: 홈/랭킹/스카우트 등 신규 화면에서 사용 --- */
.tabbar { display: flex; gap: 4px; background: rgba(10,18,36,0.6); border: 1px solid var(--border-c); padding: 4px; border-radius: var(--radius-md); }
.tabbar .tab { padding: 8px 14px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--text-sub); cursor: pointer; letter-spacing: 0.02em; white-space: nowrap; background: none; border: none; }
.tabbar .tab.active { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 2px 8px rgba(255,45,74,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }

.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-chip { padding: 6px 12px; border-radius: 20px; background: rgba(10,18,36,0.6); border: 1px solid var(--border-c); font-size: 12px; font-weight: 600; color: var(--text-sub); cursor: pointer; white-space: nowrap; }
.filter-chip.active { background: rgba(255,45,74,0.15); border-color: rgba(255,45,74,0.5); color: var(--primary); }

.search { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-md); background: rgba(10,18,36,0.6); border: 1px solid var(--border-c); min-width: 220px; }
.search input { background: none; border: none; color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; flex: 1; }
.search input::placeholder { color: var(--text-4); }
.search select.filter-select-inline { background: none; border: none; color: var(--text-main); font-family: inherit; font-size: 12px; outline: none; }
.ml-a { margin-left: auto; }
/* 참고 디자인 뼈대 이식(선수단/강화 탭): 등급 필터 칩 안에 얹는 부가 필터 select들 */
/* 🆕(2026-07-31 디자인 리뉴얼: docs/design-ref/screens-roster.jsx 기준) 「포지션:」「정렬:」 같은
   필터바 인라인 라벨. 원본의 style={{fontSize:12, color:'var(--text-3)'}} 를 클래스로 옮긴 것. */
.filter-inline-label { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.filter-chip-select { padding: 6px 10px; border-radius: 20px; background: rgba(10,18,36,0.6); border: 1px solid var(--border-c); font-size: 12px; font-weight: 600; color: var(--text-sub); cursor: pointer; }

/* 🆕(2026-07-29: 참고 스크린샷 VABUtC8T 기준) 선수단 탭 필터 4행 세로 스택 레이아웃.
   tabbar/filter-row/search/select-row를 각각 독립된 한 줄로 세로 배치한다. */
.roster-filter-stack { display: flex; flex-direction: column; gap: 12px; }
.roster-filter-row-full { width: 100%; }
.roster-filter-row-full.tabbar { justify-content: flex-start; }
.roster-filter-row-full.search { min-width: 0; }

/* 🆕(2026-07-31 모바일 검색/필터바 수정)
   문제: 좁은 화면에서 검색창이 이상하게 보였다. 원인은 3가지가 겹친 것.
     1) .search 에 min-width:220px 이 걸려 있어 컨테이너보다 넓어지면 패널을 삐져나갔다.
     2) .search 에 .ml-a(margin-left:auto)가 붙어 있어 줄바꿈된 뒤에도 오른쪽으로 밀려
        앞쪽에 커다란 빈 공간이 생겼다.
     3) .tabbar .tab 이 white-space:nowrap + 「전체 12 / 45명」처럼 카운트까지 한 줄이라
        3개 탭이 가로로 넘쳤다.
   → 720px 이하에서는 필터바의 각 블록을 100% 폭 한 줄씩 세로로 쌓고, 탭은 균등 분할하며
     서브탭 카운트는 두 번째 줄로 내린다.
   ⚠️ 이 파일은 예전에 @media 를 데스크톱 규칙보다 "앞"에 둬서 무효화된 이력이 있다
     (2442번째 줄대 주석 참고). 그래서 위 데스크톱 규칙 바로 뒤에 선언한다. */
@media (max-width: 720px) {
  /* 어떤 화면의 검색창이든 컨테이너를 넘지 않게 한다(스카우트/랭킹/기록/트레이드 공통). */
  .search { min-width: 0; max-width: 100%; }

  .filter-bar-wrap { gap: 10px; }
  .filter-bar-wrap > * { min-width: 0; }
  /* 검색창: ml-a 해제 + 한 줄 전체 폭 */
  .filter-bar-wrap .search { margin-left: 0; flex: 1 1 100%; width: 100%; }
  /* 서브탭/정렬 탭바: 한 줄 전체 폭 + 탭 균등 분할 */
  .filter-bar-wrap .tabbar { flex: 1 1 100%; width: 100%; }
  .filter-bar-wrap .tabbar .tab {
    flex: 1 1 0; text-align: center; padding: 8px 4px; font-size: 11.5px;
  }
  /* 「전체 12 / 45명」의 카운트를 두 번째 줄로 내려 가로 넘침을 막는다. */
  .filter-bar-wrap .tabbar .tab .sub-tab-count {
    display: block; margin: 2px 0 0; font-size: 10px; font-weight: 600;
  }
  /* 「포지션:」「정렬:」 라벨 + select/탭바 행도 한 줄 전체 폭 */
  .filter-bar-wrap > .row.gap-4 { flex: 1 1 100%; width: 100%; flex-wrap: wrap; }
  .filter-bar-wrap .filter-row { flex: 1 1 100%; }
  .filter-bar-wrap .filter-chip-select { flex: 1 1 120px; min-width: 0; }
}

/* 🆕(2026-07-31) 초소형 화면(≤380px) 추가 축소: 등급 칩이 6개라 2줄을 넘지 않도록 */
@media (max-width: 380px) {
  .filter-bar-wrap .filter-chip { padding: 5px 9px; font-size: 11px; }
  .filter-bar-wrap .tabbar .tab { padding: 7px 2px; font-size: 11px; }
  .filter-bar-wrap .tabbar { padding: 3px; gap: 3px; }
  .filter-bar-wrap .search { padding: 7px 10px; }
  .filter-bar-wrap .search input { font-size: 12.5px; }
  .filter-inline-label { font-size: 11px; }
}

/* --- 리소스 바(자금/티켓 등): stat-hud 대체 요소가 필요할 때 사용 --- */
.res-bar { display: flex; align-items: center; gap: 10px; }
.res { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 6px; background: rgba(10,18,36,0.7); border: 1px solid var(--border-c); border-radius: 100px; font-size: 13px; min-width: 100px; }
.res-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.res-icon.money { background: radial-gradient(circle at 30% 30%, #ffe58a, #a67c00); color: #4a3200; }
.res-icon.star { background: radial-gradient(circle at 30% 30%, #ffd6d6, #d8253a); color: #fff; }
.res-icon.ball { background: radial-gradient(circle at 30% 30%, #ffffff, #b0b8c8); color: #2a3244; }
.res-icon.gem { background: radial-gradient(circle at 30% 30%, #b3f0ff, #1a8fbd); color: #fff; }
.res-val { font-family: var(--font-num); color: var(--text-main); flex: 1; text-align: right; font-size: 12px; letter-spacing: 0.01em; }

/* --- 사이드바 하단 매니저 아바타 --- */
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--bg-panel-2), var(--bg-dark)); border: 2px solid var(--primary); display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 13px; box-shadow: 0 0 12px rgba(255,45,74,0.4); flex-shrink: 0; }

/* --- QA 카드/미션 그리드 --- */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.home-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.home-stat-card { background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md); padding: 14px 16px; min-width: 0; overflow: hidden; }
.home-stat-card .big-num { font-size: clamp(16px, 1.7vw, 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.home-stat-card .stat-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.home-two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
@media (max-width: 900px) { .home-two-col { grid-template-columns: 1fr; } }

/* 🆕(2026-07-28, 홈 대시보드 재작업): 참고 디자인의 "팀 현황"/"오늘의 미션"/"최근 경기 결과"/
   "공지·이벤트" 4블록 레이아웃을 재현하되, 실존하지 않는 데이터(일일 미션/공지)는 각각 업적 진행
   현황/리그 랭킹으로 대체한다. .home-two-col의 자식 패널을 .panel(전체 패널)보다 한 단계 낮은
   서브패널 스타일로 감싸서 홈 화면 안에서의 계층 구조를 표현한다. */
.panel-sub {
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-lg);
  padding: 18px; min-width: 0;
}
/* 🆕(2026-07-28, 홈 대시보드 상태태그 잘림 수정): .panel-sub는 2단 그리드 안에 들어가는 좁은
   서브패널이라 "시즌 미진행 · 단일 경기 모드" 같은 긴 상태 텍스트가 panel-title의 justify-content:
   space-between과 만나면 플렉스 아이템 기본 min-width:auto 때문에 줄어들지 못하고 밖으로 넘친다.
   panel-title 자체를 wrap 허용해 좁을 때는 태그가 다음 줄로 자연스럽게 내려가도록 한다. */
.panel-sub .panel-title { font-size: 14.5px; margin-bottom: 12px; padding-bottom: 10px; flex-wrap: wrap; row-gap: 4px; }
.panel-sub .panel-title .sub-action { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; text-align: right; }
.panel-sub .home-stats-grid { margin-bottom: 14px; }

/* 다음 3경기 스케줄 스트립 */
.next-games-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.next-game-card {
  flex: 1 1 0; min-width: 90px; background: rgba(10,18,36,0.6); border: 1px solid var(--border-c);
  border-radius: var(--radius-md); padding: 10px 12px; text-align: center;
}
.next-game-card .ng-date { font-size: 10.5px; color: var(--text-sub); font-weight: 700; }
.next-game-card .ng-opp { font-size: 13px; font-weight: 800; color: var(--text-main); margin-top: 4px; }
.next-game-card .ng-tag { font-size: 10px; color: var(--accent); font-weight: 700; margin-top: 3px; }

/* 업적 진행률 바 */
.achievement-progress-bar-wrap { margin-bottom: 14px; }
.achievement-progress-bar {
  height: 8px; border-radius: 999px; background: rgba(10,18,36,0.7); border: 1px solid var(--border-c); overflow: hidden;
}
.achievement-progress-fill {
  height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 10px rgba(255,45,74,0.5); transition: width .3s ease;
}

/* --- 다이아몬드 필드(라인업 탭 시각화) --- */
.diamond-field-wrap { display: flex; justify-content: center; padding: 10px 0 4px; }
.diamond-field-svg { width: 100%; max-width: 260px; }
.diamond-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 480px) { .diamond-slot-grid { grid-template-columns: repeat(2, 1fr); } }
.diamond-slot {
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
  padding: 10px; text-align: center; cursor: pointer; transition: border-color .15s, transform .1s;
}
.diamond-slot:hover { border-color: var(--primary); transform: translateY(-2px); }
.diamond-slot .ds-pos { font-size: 10.5px; color: var(--text-sub); letter-spacing: 0.05em; }
.diamond-slot .ds-name { font-weight: 700; font-size: 12.5px; color: var(--text-main); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diamond-slot .ds-ovr { font-family: var(--font-num); font-size: 15px; color: var(--accent); margin-top: 2px; }
.diamond-slot.empty { opacity: 0.55; border-style: dashed; }

/* --- 🆕(2026-07-28 리뉴얼) 라인업 탭 야수 포지션 배치도: 실제 야구장 형태로 8개 수비 포지션을
   시각화한다. 각 포지션은 클릭 시 아래 슬롯 카드 영역으로 스크롤 이동한다(실제 배정은 슬롯의
   select에서 이루어짐 — 이 필드는 "현황 요약 + 내비게이션" 역할). --- */
.diamond-field {
  position: relative; width: 100%; max-width: 360px; aspect-ratio: 1/0.86; margin: 4px auto 8px;
  background: radial-gradient(circle at 50% 100%, rgba(77,214,138,0.16), transparent 62%),
              linear-gradient(180deg, var(--bg-panel-2), var(--bg-dark));
  border: 1px solid var(--border-c); border-radius: var(--radius-lg, 16px); overflow: hidden;
}
.diamond-field::before {
  /* 내야 다이아몬드(홈-1루-2루-3루) 라인 */
  content: ''; position: absolute; left: 50%; bottom: 10%; width: 46%; height: 46%;
  transform: translateX(-50%) rotate(45deg); border: 1.5px dashed rgba(77,214,138,0.35);
}
.dpos {
  position: absolute; transform: translate(-50%, -50%); text-align: center; cursor: pointer;
  padding: 5px 7px; border-radius: var(--radius-sm); background: var(--bg-panel-2);
  border: 1px solid var(--border-c); transition: border-color .15s, transform .15s; min-width: 54px;
}
.dpos:hover { border-color: var(--primary); transform: translate(-50%, -50%) translateY(-2px); }
.dpos.filled { border-color: var(--grass); box-shadow: 0 0 8px rgba(77,214,138,0.35); }
.dpos .dp-pos { font-size: 9.5px; color: var(--text-sub); letter-spacing: 0.04em; white-space: nowrap; }
.dpos .dp-name { font-weight: 700; font-size: 11.5px; color: var(--text-main); margin-top: 1px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpos .dp-ovr { font-family: var(--font-num); font-size: 12.5px; color: var(--accent); margin-top: 1px; }
.dpos.empty .dp-name { color: var(--text-sub); }
/* 야구장 실제 배치 좌표(퍼센트 기준, 홈플레이트가 하단 중앙) */
.dpos-catcher { left: 50%; top: 90%; }
.dpos-first { left: 76%; top: 62%; }
.dpos-second { left: 61%; top: 40%; }
.dpos-third { left: 24%; top: 62%; }
.dpos-shortstop { left: 39%; top: 40%; }
.dpos-leftfield { left: 20%; top: 15%; }
.dpos-centerfield { left: 50%; top: 7%; }
.dpos-rightfield { left: 80%; top: 15%; }
.diamond-dh-row { display: flex; justify-content: center; margin-top: 4px; }
.diamond-dh-chip {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: 999px; font-size: 12px;
}
.diamond-dh-chip.filled { border-color: var(--grass); }
.diamond-dh-chip:hover { border-color: var(--primary); }
@media (max-width: 480px) {
  .dpos { padding: 4px 5px; min-width: 44px; }
  .dpos .dp-name { max-width: 56px; font-size: 10.5px; }
}

/* --- 등급 6단계 뱃지 색상(신규 팩/스카우트 등에서 참고용, 게임 로직상 미사용 대비) --- */
/* 🆕(초월 등급 시스템 디자인 교체, 2026-07-30): @keyframes rotate-hue는 위쪽
   .pcard.grade-transcendence .frame 규칙 옆에 이미 정의되어 있으므로 중복 제거 */
.grade-live-frame {
  background: conic-gradient(from 0deg, #ff2d4a, #ff8c1a, #ffd15c, #4dd68a, #38d0ff, #b56cff, #ff2d4a);
  animation: rotate-hue 6s linear infinite;
}

/* ============================================================
   🆕(2026-07-28, 2차 리뉴얼): 경기/PvP/뽑기/랭킹 화면을 원본 참고 소스코드
   (screens-match.jsx) 구조 그대로 재구성하기 위해 필요한 범용 유틸리티 클래스.
   원본 styles.css에 있던 .row/.gap-*/.grid-*/.panel-header/.panel-title-bar/
   .page-title-row 등을 그대로 이식한다.
   ============================================================ */
.row { display: flex; align-items: center; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
/* 🆕(2026-07-31 디자인 리뉴얼) 원본 docs/design-ref/styles.css:844 의 .gap-16.
   선수단/방출판매 필터바가 class="row gap-16" 을 쓰는데 이 유틸이 없어서
   gap 이 0 으로 렌더되고 있었다. 원본과 동일한 16px 로 맞춘다. */
.gap-16 { gap: 16px; }
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.hr { height: 1px; background: var(--border-c); margin: 8px 0; }

.page-title-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title-row .page-title { margin: 0; }
.page-sub { color: var(--text-sub); font-size: 12.5px; }

.panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.panel-header .panel-title { margin: 0; padding: 0; border: none; }
.panel-header .panel-title::before { display: none; }
.panel-title-bar {
  display: inline-block; width: 3px; height: 14px; background: var(--primary);
  border-radius: 2px; box-shadow: 0 0 8px var(--primary); flex-shrink: 0;
}

.chip.pulse { animation: chip-pulse-glow 1.6s ease-in-out infinite; }
@keyframes chip-pulse-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,45,74,0.4); }
  50% { box-shadow: 0 0 14px rgba(255,45,74,0.85); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ---------- ⚔️ 경기 시뮬레이션: 스코어보드 ---------- */
.match-scoreboard-head {
  background: linear-gradient(180deg, rgba(255,45,74,0.15), rgba(139,18,32,0.25));
  padding: 16px 20px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--border-c);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.match-scoreboard-head .msh-meta { font-family: var(--font-num); font-size: 13px; color: var(--text-main); letter-spacing: 0.1em; }
.match-scoreboard-head .msh-sub { font-size: 11px; color: var(--text-3); font-family: var(--font-num); margin-left: auto; }
.match-scoreboard-body { padding: 20px 24px; }
.match-teams-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.match-team-block { display: flex; flex-direction: column; }
.match-team-block.away { text-align: right; align-items: flex-end; }
.match-team-block.home { text-align: left; align-items: flex-start; }
.match-team-block .mt-tag { font-size: 11px; color: var(--text-3); letter-spacing: 0.1em; }
.match-team-block .mt-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.match-team-block.away .mt-row { justify-content: flex-end; }
.match-team-logo {
  width: 60px; height: 60px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-family: var(--font-num); font-size: 20px;
  box-shadow: 0 0 20px rgba(255,45,74,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.match-team-block .mt-name { font-size: 22px; font-weight: 900; color: #fff; }
.match-team-block .mt-info { font-size: 12px; color: var(--text-3); margin-top: 2px; white-space: nowrap; }
.match-team-block .mt-score { font-family: var(--font-num); font-size: 64px; color: #fff; margin-top: 8px; line-height: 1; }
.match-inning-box {
  padding: 8px 14px; background: rgba(0,0,0,0.4); border: 1px solid var(--border-c);
  border-radius: var(--radius-md); text-align: center; min-width: 76px;
}
.match-inning-box .mib-lbl { font-size: 10px; color: var(--text-3); font-family: var(--font-num); letter-spacing: 0.1em; }
.match-inning-box .mib-val { font-size: 26px; font-weight: 900; color: var(--accent-bg); font-family: var(--font-num); margin-top: 2px; }
.match-inning-box .mib-state { font-size: 10px; color: var(--primary); margin-top: 2px; }

/* 🆕(2026-07-29, 모바일 스크린샷 리포트 2차): 2026-07-28 경기 탭 재작업으로 스코어보드가
   .match-teams-row(3열 그리드) + .mt-name(22px)/.mt-score(64px)/.match-team-logo(60px) 등
   데스크톱 전용 크기로 완전히 교체됐는데, 이 새 클래스들에는 모바일 대응 규칙이 없어서
   좁은 화면에서 AWAY 박스 텍스트와 로고가 겹치고 HOME 박스가 화면 밖으로 잘려나가는 붕괴가
   발생했다. 1차 수정 때 @media 블록을 파일 앞부분(1291번째 줄대)에 추가했으나, 여기 있는
   미디어쿼리 없는 데스크톱 규칙(.match-teams-row 등)이 CSS 소스상 더 뒤에 위치해 동일 우선순위
   충돌에서 이겨버려 모바일 규칙이 그대로 무효화됐다(실기기 재현으로 확인).
   → 데스크톱 규칙 바로 뒤, 이 위치에 다시 선언해 소스 순서 문제를 해결한다.
   3열 그리드를 세로 스택(AWAY/INNING/HOME)으로 전환하고, 각 팀 블록 내부도 로고+텍스트를
   가운데 정렬 + 줄바꿈 허용으로 바꿔 폭 초과를 원천 차단한다. */
@media (max-width: 720px) {
  .match-scoreboard-head { padding: 12px 14px; gap: 6px 12px; }
  .match-scoreboard-head .msh-meta { font-size: 11px; }
  .match-scoreboard-head .msh-sub { margin-left: 0; flex: 1 1 100%; }
  .match-scoreboard-body { padding: 14px 12px; }
  .match-teams-row { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .match-team-block, .match-team-block.away, .match-team-block.home {
    width: 100%; text-align: center; align-items: center;
  }
  .match-team-block .mt-row, .match-team-block.away .mt-row {
    justify-content: center; flex-wrap: wrap; width: 100%; gap: 10px;
  }
  /* 로고를 제외한 이름+전력 래퍼(별도 클래스 없는 div)가 좁은 화면에서 줄어들 수 있도록 */
  .match-team-block .mt-row > div:not(.match-team-logo) { min-width: 0; flex: 1 1 auto; }
  .match-team-logo { width: 44px; height: 44px; font-size: 15px; }
  .match-team-block .mt-name { font-size: 16px; overflow-wrap: break-word; white-space: normal; }
  .match-team-block .mt-info { font-size: 10.5px; white-space: normal; }
  .match-team-block .mt-score { font-size: 40px; margin-top: 4px; }
  .match-inning-box { width: fit-content; margin: 0 auto; min-width: 0; padding: 6px 16px; }
}

.match-linescore-wrap {
  margin-top: 18px; padding: 12px; background: rgba(0,0,0,0.35); border-radius: 8px;
  border: 1px solid var(--border-c); overflow-x: auto;
}
.match-linescore-table { width: 100%; border-collapse: collapse; font-family: var(--font-num); font-size: 14px; min-width: 560px; }
.match-linescore-table th { padding: 4px 8px; color: var(--text-sub); font-size: 9.5px; letter-spacing: 0.1em; font-weight: 400; }
.match-linescore-table td { padding: 7px 8px; text-align: center; border-top: 1px solid var(--border-c); }
.match-linescore-table td.ls-team { text-align: left; color: #fff; font-family: var(--font-display); font-weight: 700; }
.match-linescore-table th.ls-r { color: var(--accent-bg); }
.match-linescore-table th.ls-h { color: var(--cyan); }
.match-linescore-table th.ls-e { color: #ff9aab; }

/* ---------- ⚔️ 경기 시뮬레이션: 투수/다이아몬드/타자 3분할 ---------- */
.match-arena-3col { display: grid; grid-template-columns: 220px 1fr 220px; gap: 20px; margin-top: 0; align-items: start; }
@media (max-width: 980px) { .match-arena-3col { grid-template-columns: 1fr; } }
.match-side-panel { padding: 14px; }
.match-side-sub-box { margin-top: 12px; padding: 10px; background: rgba(10,18,36,0.6); border-radius: 8px; border: 1px solid var(--border-c); }
.match-side-sub-box .row { justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
/* 🆕(2026-07-28, 경기 탭 진짜 재작업): 원본 참고 디자인(screens-match.jsx)의 다이아몬드 패널
   panel-header에 있던 동적 상태문구("현재 상황 · 7회초 2사 1,3루")를 panel-header 안 우측에 배치.
   (2026-07-29: 상태문구 래퍼 div를 없애고 panel-header 한 줄에 바로 넣는 구조로 단순화했으므로
   더 이상 쓰지 않는 .match-arena-status-row 규칙은 제거함) */
.match-diamond-box-wrap { padding: 14px; }
.match-arena-status-text { font-size: 11.5px; color: var(--accent); font-family: var(--font-num); text-align: right; }
.match-diamond-box { position: relative; aspect-ratio: 1/1; max-width: 280px; margin: 0 auto; }
.match-diamond-box svg { width: 100%; height: 100%; }
.match-diamond-outs {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;
}
.match-diamond-outs .mdo-lbl { font-size: 10px; color: var(--text-sub); font-family: var(--font-num); letter-spacing: 0.1em; }
.match-diamond-outs .mdo-val { font-family: var(--font-num); font-size: 28px; color: var(--primary); line-height: 1; }
.match-count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.match-count-box { padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.4); border: 1px solid var(--border-c); text-align: center; }
.match-count-box .mcb-lbl { font-size: 9px; color: var(--text-sub); letter-spacing: 0.12em; }
.match-count-box .mcb-dots { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.match-count-box .mcb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); }
/* 🆕(2026-07-28, 경기 탭 전체 재작업): CountBox 활성 도트 — BALL(청록)/STRIKE(골드)/OUT(레드)별로
   구분되는 색으로 발광. app.js가 kind 매핑에 따라 이 클래스들을 붙인다. */
.match-count-box .mcb-dot.on-ball { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.match-count-box .mcb-dot.on-strike { background: var(--accent-bg); box-shadow: 0 0 6px var(--accent-bg); }
.match-count-box .mcb-dot.on-out { background: var(--red); box-shadow: 0 0 6px var(--red); }
.match-recent-pitch-box { margin-top: 12px; padding: 10px; background: rgba(0,0,0,0.4); border-radius: 8px; border: 1px solid var(--border-c); }
.match-recent-pitch-chip { flex: 1; padding: 6px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-c); text-align: center; }
.match-recent-pitch-chip .mrp-type { font-size: 10px; color: var(--text-sub); }
.match-recent-pitch-chip .mrp-speed { color: #fff; font-size: 13px; }
.match-recent-pitch-chip .mrp-result { font-size: 10px; margin-top: 1px; }
/* 🆕(2026-07-28, 경기 탭 전체 재작업): 최근 상황 이벤트 chip(투구결과 대체) — score(득점)면 골드 강조 */
.match-recent-event-chip {
  flex: 1 1 auto; min-width: 90px; padding: 6px 10px; border-radius: 6px; text-align: center;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-c); font-size: 11px; color: var(--text-sub);
}
.match-recent-event-chip.score { border-color: var(--accent-bg); color: var(--accent-bg); background: rgba(255,176,32,0.08); }
.match-recent-event-chip .mre-name { display: block; color: #fff; font-size: 12.5px; font-weight: 700; margin-top: 1px; }

/* 🆕(2026-07-28, 경기 탭 전체 재작업): 다이아몬드 베이스 상태(주자 있음) 전환 애니메이션
   (2026-07-29: 3분할을 감싸던 래퍼 <div class="match-arena-panel">를 제거하고 match-arena-3col이
   직접 그리드 컨테이너가 되도록 평탄화했으므로, 더 이상 쓰지 않는 .match-arena-panel 패딩 규칙은 제거함.
   현재 마크업의 id="match-arena-panel"은 app.js 참조용으로만 남아있고 별도 스타일은 없음) */
.match-diamond-box svg rect { transition: fill .2s ease; }
.match-diamond-box svg rect.on-base { fill: rgba(255,181,71,0.9) !important; stroke: #fff; }
.match-arena-mini-card {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border-c);
}
.match-arena-mini-card .mini-pcard-ovr { width: 40px; height: 40px; font-size: 15px; }
.match-arena-mini-card.grade-normal .mini-pcard-ovr { background: linear-gradient(135deg, var(--grade-normal), #4d5871); box-shadow: 0 0 8px rgba(136,149,175,0.4); }
.match-arena-mini-card.grade-rare .mini-pcard-ovr { background: linear-gradient(135deg, var(--grade-rare), #1e7a45); box-shadow: 0 0 8px rgba(77,214,138,0.4); }
.match-arena-mini-card.grade-hero .mini-pcard-ovr { background: linear-gradient(135deg, var(--grade-hero), #1e4c99); box-shadow: 0 0 8px rgba(74,159,255,0.4); }
.match-arena-mini-card.grade-legend .mini-pcard-ovr { background: linear-gradient(135deg, var(--grade-legend), #6a2ea8); box-shadow: 0 0 8px rgba(181,108,255,0.4); }
.match-arena-mini-card .mini-pcard-body { flex: 1; min-width: 0; }
.match-arena-mini-card .mini-pcard-name { font-weight: 700; font-size: 13.5px; color: #fff; }
.match-arena-mini-card .mini-pcard-sub { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }

/* ---------- ⚔️ 경기 시뮬레이션: 하단 컨트롤 바 ----------
   🔧(2026-07-28, 경기 탭 진짜 재작업): 원본 참고 디자인처럼 난이도 패널과 시작/진행 버튼이 한 패널
   (match-control-panel)에 통합되므로, 이 바는 그 패널의 panel-body 안에 있는 마지막 줄이 된다. */
.match-control-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.match-control-bar .mcb-diff { flex: 1; min-width: 160px; }

/* ---------- 🆚 PvP 대결 ---------- */
.pvp-vs-panel { padding: 20px; }
.pvp-vs-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.pvp-vs-side { text-align: center; }
.pvp-vs-mark { font-family: var(--font-num); font-size: 34px; color: var(--primary); text-shadow: 0 0 20px rgba(255,45,74,0.5); }
.pvp-opponent-card { position: relative; padding: 18px; min-height: 210px; display: flex; flex-direction: column; }
.pvp-opponent-badge { position: absolute; top: 10px; right: 10px; }
.pvp-opponent-head { display: flex; align-items: center; gap: 12px; }
.pvp-opponent-logo {
  width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-family: var(--font-num); font-size: 18px;
}
.pvp-opponent-name { font-size: 14.5px; font-weight: 800; color: #fff; }
.pvp-opponent-mgr { font-size: 10.5px; color: var(--text-sub); }
.pvp-opponent-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.pvp-opponent-stat-box { padding: 8px; background: rgba(0,0,0,0.3); border-radius: 6px; text-align: center; }
.pvp-opponent-stat-box .pob-val { font-family: var(--font-num); font-size: 18px; color: var(--accent-bg); margin-top: 3px; }
.pvp-opponent-foot { display: flex; justify-content: space-between; font-size: 11px; margin-top: auto; }

/* ---------- 🎰 뽑기(스카우트) ---------- */
.gacha-pack-panel { overflow: hidden; }
.gacha-pack-visual {
  position: relative; height: 340px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,181,71,0.18), transparent 60%), linear-gradient(180deg, #1a1428, #0a0510);
}
.gacha-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; }
.gacha-pack-cards { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 14px; align-items: center; }
.gacha-pack-card {
  aspect-ratio: 3/4; border-radius: 12px; padding: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gacha-pack-card.side { width: 130px; background: linear-gradient(135deg, #b56cff, #6a2ea8); box-shadow: 0 0 20px rgba(181,108,255,0.3); }
.gacha-pack-card.side.left { transform: rotate(-8deg) translateX(14px); }
.gacha-pack-card.side.right { transform: rotate(8deg) translateX(-14px); }
.gacha-pack-card.featured {
  width: 168px;
  background: linear-gradient(135deg, #ff2d4a, #8b1220, #ffb547, #ff2d4a);
  box-shadow: 0 0 40px rgba(255,45,74,0.6), 0 0 80px rgba(255,181,71,0.3);
  animation: rotate-hue 6s linear infinite; transform: scale(1.05);
}
.gacha-pack-card-inner {
  width: 100%; height: 100%; border-radius: 9px; background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.85));
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; position: relative;
}
.gacha-pack-card-inner .gp-q1 { font-family: var(--font-num); font-size: 18px; color: #fff; text-shadow: 0 0 20px currentColor; }
.gacha-pack-card-inner .gp-q2 { font-family: var(--font-num); font-size: 36px; color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.5); margin-top: 14px; }
.gacha-pack-card-inner .gp-tag { font-family: var(--font-num); font-size: 10px; color: var(--text-sub); letter-spacing: 0.14em; margin-top: auto; }
.gacha-pack-card.featured .gp-q1, .gacha-pack-card.featured .gp-q2 { font-size: 24px; }
.gacha-pack-card.featured .gp-q2 { font-size: 52px; }
.gacha-pack-card.featured .gp-tag { color: var(--accent-bg); }
.gacha-pack-actions { position: absolute; bottom: 14px; left: 14px; right: 14px; display: flex; gap: 10px; }
.gacha-prob-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-c); }
.gacha-prob-row:last-of-type { border-bottom: none; }
.gacha-prob-swatch { width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0; }
.gacha-prob-name { font-weight: 700; font-size: 12.5px; color: #fff; flex: 1; }
.gacha-prob-pct { font-family: var(--font-num); font-size: 14px; }
/* 등급별 확률 리스트의 swatch/pct 색상 (카드 프레임과 동일한 4등급 매핑 재사용) */
.gacha-prob-swatch.grade-normal, .gacha-prob-pct.grade-normal { color: var(--grade-normal); }
.gacha-prob-swatch.grade-normal { background: linear-gradient(135deg, #a3adc4, #5d6a86 40%, #3c4864 100%); }
.gacha-prob-swatch.grade-rare, .gacha-prob-pct.grade-rare { color: var(--grade-rare); }
.gacha-prob-swatch.grade-rare { background: linear-gradient(135deg, #7effb0, #4dd68a 30%, #1e7a45 100%); }
.gacha-prob-swatch.grade-hero, .gacha-prob-pct.grade-hero { color: var(--grade-hero); }
.gacha-prob-swatch.grade-hero { background: linear-gradient(135deg, #7fb8ff, #4a9fff 30%, #1e4c99 100%); box-shadow: 0 0 12px rgba(74,159,255,0.5); }
.gacha-prob-swatch.grade-legend, .gacha-prob-pct.grade-legend { color: var(--grade-legend); }
.gacha-prob-swatch.grade-legend { background: linear-gradient(135deg, #fff2ba, #ffb547 30%, #a86a10 70%, #ffd15c 100%); box-shadow: 0 0 12px rgba(255,181,71,0.5); }
.gacha-prob-tip { margin-top: 12px; padding: 10px; background: rgba(255,181,71,0.08); border: 1px solid rgba(255,181,71,0.25); border-radius: 8px; font-size: 11px; color: var(--text-2, var(--text-sub)); }

/* ---------- 🏆 랭킹 ---------- */
.ranking-trophy-card { position: relative; overflow: hidden; padding: 18px; }
.ranking-trophy-emoji { position: absolute; top: -18px; right: -14px; font-size: 100px; opacity: 0.15; line-height: 1; }
.ranking-trophy-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; position: relative; z-index: 1; }
.ranking-trophy-rank { font-family: var(--font-num); font-size: 32px; line-height: 1; }
.ranking-trophy-team { font-size: 16px; font-weight: 800; color: #fff; }
.ranking-trophy-mgr { font-size: 10.5px; color: var(--text-sub); }
.ranking-trophy-stats { display: flex; gap: 8px; position: relative; z-index: 1; }
.ranking-trophy-stat-box { flex: 1; padding: 8px; background: rgba(0,0,0,0.4); border-radius: 8px; min-width: 0; text-align: center; }
.ranking-trophy-stat-box .rts-val { font-family: var(--font-num); font-size: 16px; margin-top: 2px; white-space: nowrap; }
.ranking-team-logo-sm {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-family: var(--font-num); font-size: 10.5px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.ranking-sparkline { display: inline-block; }

/* ============================================================
   🆕(2026-07-30, 개발자 체크리스트 1차) 모바일 하단 탭바 "더보기" 바텀시트.
   .modal-overlay를 재사용해 배경 오버레이를 만들되, 내부 콘텐츠(.more-tab-sheet)는 화면 하단에서
   위로 올라오는 시트 형태로 배치한다(중앙 정렬 모달 대신). 데스크톱에서는 이 버튼/시트가 아예
   렌더링될 일이 없으므로(⁠.tab-more-btn은 항상 display:none) 별도 min-width 분기 없이 항상 이 스타일을 쓴다.
   ============================================================ */
#more-tab-sheet-overlay { align-items: flex-end; padding: 0; }
.more-tab-sheet {
  width: 100%; max-width: 640px; max-height: 80vh; overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--border-c); border-bottom: none;
  border-radius: 18px 18px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px rgba(0,0,0,0.45);
  animation: moreTabSheetUp .18s ease-out;
}
@keyframes moreTabSheetUp { from { transform: translateY(24px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
.more-tab-sheet-handle {
  width: 40px; height: 4px; border-radius: 2px; background: var(--border-c); margin: 6px auto 12px;
}
.more-tab-sheet-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.more-tab-sheet-header h3 { font-size: 15px; color: var(--text-main); font-weight: 800; }
.more-tab-sheet-close-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-c);
  background: var(--bg-panel-2); color: var(--text-sub); font-size: 14px; cursor: pointer;
}
.more-tab-sheet-close-btn:active { transform: translateY(1px); }
.more-tab-sheet-group { margin-bottom: 14px; }
.more-tab-sheet-group-title {
  font-size: 10.5px; color: var(--text-sub); opacity: 0.7; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 700; margin-bottom: 8px;
}
.more-tab-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.more-tab-sheet-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 6px; background: var(--bg-panel-2); border: 1px solid var(--border-c);
  border-radius: var(--radius-md); color: var(--text-sub); font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: all .15s; text-align: center;
}
.more-tab-sheet-btn .tab-btn-ico { font-size: 20px; }
.more-tab-sheet-btn:active { transform: translateY(1px); border-color: var(--primary); color: var(--text-main); }
/* 320px보다 좁은 초협폭(갤럭시 폴드 커버화면 등)에서는 3열이 너무 빡빡하므로 2열로 완화 */
@media (max-width: 320px) {
  .more-tab-sheet-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 🆕(2026-07-30, 통합 체크리스트 P1 4번: "상단 상태칩 반응형 수정") ──────────────────────────
   상단 상태칩(💰자금/📈팀가치/🔥연승/👥로스터) 4개의 실제 콘텐츠 총폭은 약 434px인데, 기존에는
   320px 이하에서만 2x2 그리드로 전환하고 그 위(321~720px, Android 412px·iPhone 390px 포함)는
   "가로 스크롤 1행" 구조를 그대로 썼다. 그 결과 412px/390px 뷰포트에서 434px > 컨테이너 폭이라
   4번째 칩(로스터)이 스크롤해야만 보이는 문제가 실측 확인되었다(2026-07-30, Playwright 412px/390px
   에서 로스터 칩 fully_in_viewport_without_scroll=False).
   브레이크포인트를 480px로 넓혀 Android 412px·iPhone 390px·Galaxy Fold 280px를 모두 스크롤 없는
   2x2 그리드로 통일 대응한다(모바일 중심 요구사항이므로 태블릿 이상 720px 초과 구간은 미대상). */
@media (max-width: 480px) {
  .stat-hud-chips {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;
    overflow-x: visible; flex-wrap: unset;
  }
  .stat-chip {
    justify-content: center; padding: 5px 6px; font-size: 10.5px;
    /* 긴 수치/문구가 칩 폭을 넘기지 않도록 축약 규칙(말줄임) 적용 */
    overflow: hidden; white-space: nowrap;
  }
  .stat-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .stat-hud-brand-name { max-width: 68px; }
}
/* Galaxy Fold 280px처럼 더 좁은 화면에서는 2열 그리드도 여유가 부족하므로 칩 내부 아이콘/라벨
   간격을 한 번 더 좁혀 텍스트가 잘리지 않게 한다. */
@media (max-width: 320px) {
  .stat-chip { padding: 5px 4px; gap: 3px; font-size: 10px; }
  .stat-chip-ico { font-size: 11px; }
}

/* 🆕(2026-07-30, 개발자 체크리스트 2차: "모바일 홈 화면 단순화") ─────────────────────────────────
   목표: 모바일 첫 화면의 정보량 과다 구간을 줄이고 "지금 할 일" 중심으로 재구성한다.
   1) 상단 노출 우선순위: 다음 경기/시즌 진행 상황(.home-status-row) → 가챠/강화/선수단 등 CTA
      (#home-quick-actions) → 최근 경기/랭킹 요약(.home-summary-row) 순서로, 720px 이하에서만
      CSS order로 시각적 순서를 재배치한다. (DOM 순서 자체는 데스크톱 레이아웃을 위해 그대로 둔다.)
   2) 스크롤이 긴 "최근 경기"/"랭킹" 블록은 <details>로 감싸 모바일에서는 기본적으로 요약 1줄만
      보이게 접어두고, 필요할 때 펼쳐서 전체를 본다(정보량 축소). 데스크톱에서는 항상 펼쳐진 상태로
      기존 UX를 유지한다(아래 900px 초과 분기에서 강제로 펼침 + summary 화살표/커서 비활성화). */
/* 🔧 수정(2026-08-01, v1.10.1): 위 order 재배치는 **v1.8.0 UX 1차 개편 이전의 홈 DOM**을 전제로 한
   레거시 규칙이었다. 1차에서 홈 DOM 자체를 「행동판」 순서(히어로 → 대표 행동 5개 → 접힘 구분선 →
   정보성 블록)로 재정렬했기 때문에, order 값이 없는 신규 블록(#home-fold-divider,
   .home-mission-row, #home-update-notice-panel)이 모두 기본값 order:0 을 받아 order:1 인
   #home-quick-actions **앞으로** 밀려 올라갔다. 그 결과 모바일 첫 화면에 미션/출석/업데이트가 먼저
   보이고 행동 카드는 아래로 내려가 §3.1 을 정면으로 위반했다.
   → flex + order 재배치를 제거하고 DOM 순서(=1차 설계 순서)를 그대로 신뢰한다.
     margin 만 모바일 값으로 유지한다. (#tab-panel-home 에 display 를 지정하지 않는 것도 중요:
     id 선택자가 .hidden 보다 강해 탭 전환이 깨질 위험을 원천 차단한다.) */
@media (max-width: 720px) {
  #tab-panel-home > #home-quick-actions { margin-bottom: 14px; }
  #tab-panel-home > .home-status-row { margin-bottom: 14px; }
  #tab-panel-home > .home-summary-row { margin-bottom: 0; }

  /* 모바일 CTA 카드: 정보량을 줄이기 위해 설명 문구는 숨기고 아이콘+제목만 촘촘히 보여준다. */
  .qa-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .qa-card { min-height: 76px; padding: 10px 8px; align-items: center; text-align: center; }
  .qa-card .qa-icon { width: 32px; height: 32px; font-size: 15px; }
  .qa-card .qa-title { font-size: 11.5px; margin-top: 6px; }
  .qa-card .qa-desc, .qa-card .qa-cta { display: none; }
}

/* 🆕(2026-07-30, 통합 체크리스트 P2 2번: "홈 화면 정보 우선순위 조정") ───────────────────────────
   문제(수정 전 실측): 모바일(390×844)에서 CTA(경기하기/선수뽑기 등)가 top≈1199px에 위치해
   첫 화면(스크롤 전)에서 전혀 보이지 않았음(팀현황+업적 블록이 697px나 차지). "더보기 전 핵심
   행동만 먼저 보이게 조정" 요구에 맞춰 위 order 값을 바꿔 CTA를 팀현황/업적보다 앞으로 당기고,
   "다음 경기/시즌 진행/수령 가능한 보상"은 아래에서 카드 자체를 컴팩트하게 줄여 정보량을 축소한다
   (내용을 숨기는 게 아니라 한 화면에 더 많이 들어오도록 압축). */
@media (max-width: 720px) {
  /* 팀 현황 4칸을 2×2로 압축(기존 auto-fit 1행 4칸보다 카드가 커져 한눈에 읽기 쉬움 + 세로는
     오히려 살짝 줄어듦: 패딩/폰트 축소로 상쇄) */
  #home-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
  #home-stats-grid .home-stat-card { padding: 8px 6px; text-align: center; }
  #home-stats-grid .home-stat-card .big-num { font-size: 13.5px; }
  #home-stats-grid .home-stat-card .stat-lbl { font-size: 9.5px; }
  .panel-sub .panel-title { font-size: 13px; margin-bottom: 8px; padding-bottom: 8px; }
  .panel-sub { padding: 12px; }
  /* 다음 경기 스트립: 3장 중 "가장 급한 다음 경기" 1장만 보이게 축소(나머지는 경기 탭에서 확인) */
  #home-next-games-strip .next-game-card:nth-child(n+2) { display: none; }
  #home-next-games-strip .next-game-card { min-width: 0; }
  /* 업적 미리보기: 4개 → 2개로 축소, 진행률 바는 얇게 줄여 세로 공간 절약 */
  .achievement-progress-bar-wrap { margin-bottom: 8px; }
  #home-achievement-list .mission:nth-child(n+3) { display: none; }
  #home-achievement-list .mission { padding: 8px 10px; }
}

/* 최근 경기/랭킹 접이식 패널: <details><summary>를 패널 헤더처럼 보이게 재스타일링 */
.home-collapsible-panel { padding: 0; }
.home-collapsible-summary {
  cursor: pointer; list-style: none; user-select: none; padding: 18px 18px 12px;
}
.home-collapsible-summary::-webkit-details-marker { display: none; }
.home-collapsible-panel > .table-wrap,
.home-collapsible-panel > #home-ranking-list,
.home-collapsible-panel > .match-card-list { padding: 0 18px 18px; }
.home-collapsible-hint { display: none; }

@media (max-width: 720px) {
  .home-collapsible-summary { padding: 14px 14px 10px; }
  .home-collapsible-panel > .table-wrap,
  .home-collapsible-panel > #home-ranking-list,
  .home-collapsible-panel > .match-card-list { padding: 0 14px 14px; }
  /* 접혀 있을 때는 "몇 건 있는지" 힌트를 요약줄에 보여주고, 펼치면 굳이 중복이라 숨긴다. */
  .home-collapsible-hint { display: inline; font-weight: 600; }
  .home-collapsible-panel[open] .home-collapsible-hint { display: none; }
  .home-collapsible-summary::after {
    content: '▾'; margin-left: auto; font-weight: 700; font-size: 13px; color: var(--accent); flex-shrink: 0;
  }
  .home-collapsible-panel[open] .home-collapsible-summary::after { content: '▴'; }
  /* 접힌 상태에서는 아래 여백을 없애 "요약 카드" 느낌을 준다 */
  .home-collapsible-panel:not([open]) { padding-bottom: 2px; }
}

/* 데스크톱(721px 이상)에서는 <details>를 열림 상태처럼 강제로 항상 펼쳐서 기존 UX를 그대로 유지한다.
   <details open> 속성을 아예 안 쓰는 이유: 모바일 첫 로딩 시 "닫힌 상태"가 기본이어야 하므로(정보량 축소),
   HTML에는 open을 넣지 않고 데스크톱에서만 UA 기본 숨김 규칙(details:not([open]) > *:not(summary){display:none})을
   author CSS로 재정의해 항상 보이게 만든다. */
@media (min-width: 721px) {
  .home-collapsible-summary { cursor: default; pointer-events: none; }
  .home-collapsible-summary .btn { pointer-events: auto; }
  .home-collapsible-panel > .table-wrap,
  .home-collapsible-panel > #home-ranking-list,
  .home-collapsible-panel > .match-card-list { display: block !important; }
}

/* 🆕(2026-07-30, 체크리스트 2차: "협폭 표 UI 카드형 전환") 홈 "최근 경기 결과" 카드 리스트
   (.mission을 재사용하되 카드마다 위/아래 여백을 살짝 좁혀 5건이 한 화면에 더 잘 들어오게 한다). */
.match-card-list .mission + .mission { margin-top: 6px; }

/* (2026-07-30, 체크리스트 3번 항목: "선수 추가 요청 목록 표를 모바일 카드형으로 재구성") "내 요청
   목록" 카드 리스트. .mission을 재사용하되 mi-reward 칸에는 숫자 대신 상태 배지(request-status-chip)
   가 들어가므로 줄바꿈 없이 잘 보이도록 flex-shrink만 유지하고, 카드 간 간격은 기본 8px을 그대로 쓴다. */
.request-card-list { display: flex; flex-direction: column; }
.request-card-list .mi-reward { background: none; border: none; padding: 0; }

/* 🆕(2026-07-30, 체크리스트 2차: "협폭 표 UI 카드형 전환" — "우선 열 정책: 랭킹은 순위/구단명/감독/
   자금(또는 승률) 중 핵심만 우선 노출") "전체 구단 랭킹"/"명예의 전당" 표의 승/패/무/팀가치/최고 연승
   열에 `.col-priority-low`를 부여해, 640px 이하 협폭에서는 숨기고 핵심 4열(순위/구단명/감독/자금)만
   남긴다. 표 자체는 그대로 두고 열만 숨기므로 가로 스크롤(.table-wrap { overflow-x:auto })이 필요
   없어진다. 640px 초과에서는 기존과 동일하게 9열 전체 노출. */
@media (max-width: 640px) {
  .col-priority-low { display: none; }
}
/* 320px 이하 초협폭에서는 4열(순위/구단명/감독/자금)만 남아도 기본 th/td 패딩(8px) 때문에
   가로 스크롤이 여전히 필요했다. 이 폭대에서만 패딩/폰트를 한 단계 더 좁혀 스크롤 없이 맞춘다.
   (명예의 전당 표는 여전히 col-priority-low 방식 유지 — 랭킹 메인 표만 아래에서 카드형으로 전환) */
@media (max-width: 320px) {
  #tab-panel-ranking table, #tab-panel-ranking th, #tab-panel-ranking td { font-size: 10.5px; }
  #tab-panel-ranking th, #tab-panel-ranking td { padding: 6px 4px; }
}

/* 🆕(2026-07-30, 통합 체크리스트 P2 1번: "랭킹 화면 개선") ───────────────────────────────────
   공통: "불러오는 중..." 텍스트/skeleton은 기존 유지, 내 팀 인지성은 아래 강조 카드로 추가 강화.
   모바일(≤720px): 표 전체보다 "상위 랭킹 + 내 순위" 중심 구조를 요구하므로, 메인 랭킹 표는 숨기고
   카드형 리스트로 전환. 명예의 전당 표는 범위 밖(기존 col-priority-low 방식 유지)이라 미대상. */
.ranking-my-rank-banner:empty { display: none; }
.ranking-card-list { display: none; }
@media (min-width: 721px) {
  .ranking-my-rank-banner { display: none; }
}
@media (max-width: 720px) {
  .ranking-table-wrap { display: none; }
  .ranking-card-list { display: flex; flex-direction: column; margin-bottom: 20px; }
}
.ranking-my-rank-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--radius-md); background: rgba(255,45,74,0.1);
  border: 1px solid rgba(255,45,74,0.35); box-shadow: 0 0 16px rgba(255,45,74,0.15);
}
.ranking-my-rank-num { font-family: var(--font-num); font-size: 22px; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.ranking-my-rank-info { min-width: 0; }
.ranking-my-rank-name { font-weight: 800; font-size: 13.5px; color: var(--text-main); }
.ranking-my-rank-sub { font-size: 11.5px; color: var(--text-sub); margin-top: 2px; font-family: var(--font-mono); }

.ranking-card {
  border-radius: var(--radius-md); background: rgba(255,255,255,0.02); border: 1px solid var(--border-c);
  overflow: hidden;
}
.ranking-card + .ranking-card { margin-top: 8px; }
.ranking-card.me { box-shadow: 0 0 0 2px rgba(255,45,74,0.35); background: rgba(255,45,74,0.05); }
.ranking-card-main { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; }
.ranking-card-rank { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: 13px; flex-shrink: 0; width: 26px; }
.ranking-card-name-wrap { flex: 1; min-width: 0; }
.ranking-card-name { font-weight: 700; font-size: 13px; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-card-manager { font-size: 10.5px; color: var(--text-sub); margin-top: 1px; }
.ranking-card-money { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.ranking-card-expand-ico { font-size: 11px; color: var(--text-sub); flex-shrink: 0; transition: transform 0.2s ease; }
.ranking-card.open .ranking-card-expand-ico { transform: rotate(180deg); }
.ranking-card-detail { display: none; padding: 0 14px 12px; border-top: 1px dashed var(--border-c); }
.ranking-card.open .ranking-card-detail { display: block; padding-top: 10px; }
.ranking-card-detail-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-sub); padding: 3px 0; }

@media (max-width: 320px) {
  .ranking-my-rank-card { padding: 10px 12px; gap: 8px; }
  .ranking-my-rank-num { font-size: 18px; }
  .ranking-card-main { padding: 9px 12px; }
}

/* ==================== 🆕(체크리스트 P1 3번 "선수 기록/통계 화면 개편", 2026-07-30)
   대상: 선수 기록(#tab-panel-stats)/정밀경기 선수 기록(#tab-panel-precisionStats)/시즌 선수 기록
   (#season-subpanel-playerStats) 3개 화면, 모두 동일한 구조(.stats-subtab-nav/.stats-section/
   .stats-table-wrap/.stats-card-list)를 공유하므로 CSS 한 곳에서 일괄 대응한다.
   - 공통: 정렬 가능한 열은 항상 ↕ 힌트를 보여줘 "여기 눌러서 정렬 가능"을 직관적으로 인지시키고,
     현재 정렬 중인 열은 배경을 살짝 강조해 헤더 인지성을 높인다(요청: "정렬 UX 직관성 강화").
   - 데스크톱(≥721px): 표 헤더를 sticky로 고정해 긴 표를 스크롤해도 열 이름을 계속 볼 수 있게
     한다(요청: "긴 통계 표에서 헤더/정렬 상태 인지성 개선"). 서브탭 nav와 카드 리스트는 숨긴다.
   - 모바일(≤720px): 타자/투수를 서브탭으로 분리해 한 번에 하나만 보여주고(요청: "타자 기록/투수
     기록 분리"), 표 대신 이름/포지션/핵심 3지표만 보이는 카드를 렌더링하며 탭하면 나머지 상세
     지표가 펼쳐진다(요청: "핵심 열만 우선 노출, 나머지 상세 열은 펼치기로 이동"). ==================== */

/* 정렬 가능 열: 항상 ↕ 힌트를 두고, 활성 열은 배경 강조 + 화살표로 방향 표시 */
.sortable-th-row th[data-sort-key]::before {
  content: '\21C5'; font-size: 9px; margin-right: 3px; opacity: 0.45; display: inline-block;
}
.sortable-th-row th[data-sort-key].sort-active-asc::before,
.sortable-th-row th[data-sort-key].sort-active-desc::before { content: ''; margin-right: 0; }
.sortable-th-row th[data-sort-key].sort-active-asc,
.sortable-th-row th[data-sort-key].sort-active-desc {
  background: rgba(255,181,71,0.09);
}

.stats-subtab-nav { display: none; }
.stats-card-list { display: none; }

@media (min-width: 721px) {
  /* 데스크톱: 긴 표 스크롤 시에도 헤더가 항상 보이도록 sticky 고정 */
  .stats-table-wrap { max-height: 520px; overflow-y: auto; }
  .stats-table-wrap table thead th {
    position: sticky; top: 0; z-index: 2; background: var(--bg-panel);
  }
}

@media (max-width: 720px) {
  .stats-subtab-nav { display: flex; gap: 10px; margin: 10px 0 14px; }
  .stats-table-wrap { display: none; }
  .stats-card-list { display: flex; flex-direction: column; }
  /* 서브탭 전환 시 비활성 섹션 전체(제목+표+카드리스트)를 숨긴다 */
  .stats-section-hidden-mobile { display: none; }
  .stats-section-title { display: none; } /* 모바일에서는 서브탭 버튼 라벨이 제목을 대신하므로 중복 숨김 */
}

/* 선수 기록 카드: 이름/포지션 + 핵심 3지표를 한 줄에, 탭하면 상세 지표가 펼쳐진다 */
.stats-card {
  border-radius: var(--radius-md); background: rgba(255,255,255,0.02); border: 1px solid var(--border-c);
  overflow: hidden;
}
.stats-card + .stats-card { margin-top: 8px; }
.stats-card-main { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.stats-card-name { font-weight: 700; font-size: 13px; color: var(--text-main); flex-shrink: 0; min-width: 74px; }
.stats-card-pos { display: block; font-size: 10.5px; color: var(--text-sub); font-weight: 500; margin-top: 2px; }
.stats-card-key-metrics { display: flex; gap: 14px; flex: 1; justify-content: flex-end; }
.stats-card-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stats-card-metric-label { font-size: 10px; color: var(--text-sub); }
.stats-card-metric-value { font-size: 13px; font-weight: 800; color: var(--accent); font-family: var(--font-mono); }
.stats-card-expand-ico { font-size: 11px; color: var(--text-sub); flex-shrink: 0; transition: transform 0.2s ease; }
.stats-card.open .stats-card-expand-ico { transform: rotate(180deg); }
.stats-card-detail { display: none; padding: 0 14px 12px; border-top: 1px dashed var(--border-c); }
.stats-card.open .stats-card-detail { display: block; padding-top: 10px; }
.stats-card-detail-row {
  display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-sub); padding: 3px 0;
}

/* 갤럭시 폴드 커버 화면(280px) 대응: 핵심 3지표가 한 줄에 다 안 들어가므로 이름/지표 영역을
   세로로 쌓고 폰트를 한 단계 줄인다 */
@media (max-width: 320px) {
  .stats-card-main { flex-wrap: wrap; padding: 10px 12px; }
  .stats-card-name { min-width: 0; width: 100%; }
  .stats-card-key-metrics { width: 100%; justify-content: space-between; gap: 6px; }
  .stats-card-metric-value { font-size: 12px; }
  .stats-subtab-nav .sub-tab-btn { padding: 7px 12px; font-size: 11.5px; }
}

/* ================== 📢 업데이트 안내(패치노트) 게시판 ==================
   사용자 요청("메이플스토리에서 가져온거야 비슷하게 해서 ... 업데이트 안내 게시판"):
   메이플 공지의 톤(정갈한 문서형 레이아웃 + 대분류 색 배지 + ■ 불릿)을 이 앱의 다크 테마
   디자인 토큰(--bg-panel, --primary 등)에 맞춰 옮겼다. 새 색을 만들지 않고 기존 변수만 쓴다. */

/* --- 게시판 머리말 --- */
.pn-board-intro {
  background: linear-gradient(135deg, rgba(255, 45, 74, 0.10), rgba(56, 208, 255, 0.06));
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.pn-board-intro-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}
.pn-board-intro-desc {
  font-size: 0.86rem;
  color: var(--text-sub);
  line-height: 1.6;
}
.pn-board-intro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pn-stat {
  background: var(--chip-bg);
  border: 1px solid var(--border-c);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: var(--text-sub);
}
.pn-stat b { color: var(--accent); font-family: var(--font-num); margin: 0 2px; }

/* --- 버전 카드(아코디언) --- */
.pn-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.pn-card[open] { border-color: rgba(255, 45, 74, 0.34); }
.pn-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease;
}
.pn-card-head::-webkit-details-marker { display: none; }
.pn-card-head:hover { background: rgba(255, 255, 255, 0.03); }
.pn-card-head-main { flex: 1; min-width: 0; }
.pn-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.pn-ver {
  font-family: var(--font-num);
  font-size: 0.9rem;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid rgba(255, 45, 74, 0.34);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
.pn-latest-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #05080f;
  background: var(--accent-bg);
  border-radius: 999px;
  padding: 2px 8px;
}
/* 안 읽은 최신 버전 표시. 시선을 끌어야 하므로 은근한 맥동을 준다(1회성 아님, 접근성상 과하지 않게). */
.pn-new-badge {
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  padding: 2px 8px;
  animation: pn-new-pulse 1.8s ease-in-out infinite;
}
@keyframes pn-new-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 74, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(255, 45, 74, 0); }
}
.pn-date { font-size: 0.76rem; color: var(--text-3); font-family: var(--font-mono); }
.pn-card-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.45;
}
.pn-card-summary {
  font-size: 0.83rem;
  color: var(--text-sub);
  line-height: 1.55;
  margin-top: 4px;
}
.pn-card-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pn-card-chevron {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 0.9rem;
  transition: transform 0.2s ease;
  margin-top: 2px;
}
.pn-card[open] .pn-card-chevron { transform: rotate(180deg); }

/* --- 대분류 배지 (신규/개선/오류 수정) --- */
.pn-kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.pn-kind-new { color: var(--accent); background: rgba(255, 181, 71, 0.14); border: 1px solid rgba(255, 181, 71, 0.3); }
.pn-kind-improve { color: var(--cyan); background: rgba(56, 208, 255, 0.12); border: 1px solid rgba(56, 208, 255, 0.28); }
.pn-kind-fix { color: var(--green); background: rgba(77, 214, 138, 0.12); border: 1px solid rgba(77, 214, 138, 0.28); }

/* --- 카드 본문 --- */
.pn-card-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border-c);
}
.pn-greeting {
  font-size: 0.86rem;
  color: var(--text-sub);
  line-height: 1.7;
  padding: 14px 0 4px;
}
.pn-greeting b { color: var(--text-main); }

/* --- 목차 --- */
.pn-toc {
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 12px 0 18px;
}
.pn-toc-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.pn-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pn-toc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 7px 8px;
  color: var(--text-sub);
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  /* 클릭 영역 일관성(P2-3 규칙)을 지키기 위해 최소 높이를 확보한다 */
  min-height: 36px;
}
.pn-toc-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-main); }
.pn-toc-count {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 0.76rem;
  color: var(--text-3);
}

/* --- 대분류 본문 --- */
.pn-section { margin-bottom: 20px; scroll-margin-top: 16px; }
.pn-section:last-child { margin-bottom: 0; }
.pn-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-c);
}
.pn-section-name { flex: 1; min-width: 0; }
.pn-section-count { font-family: var(--font-num); font-size: 0.76rem; color: var(--text-3); }
/* 목차에서 점프했을 때 어디로 갔는지 알려주는 짧은 하이라이트 */
.pn-section-flash { animation: pn-flash 1.2s ease-out; }
@keyframes pn-flash {
  0% { background: rgba(255, 45, 74, 0.16); }
  100% { background: transparent; }
}
.pn-item-list { list-style: none; margin: 0; padding: 0; }
/* 메이플 공지의 "■" 불릿을 그대로 재현한다 */
.pn-item {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 0.86rem;
  color: var(--text-sub);
  line-height: 1.68;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.pn-item::before {
  content: '■';
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 0.62rem;
  line-height: 1.68;
  color: var(--primary);
}

/* --- 탭 버튼 "새 소식" 빨간 점 --- */
.tab-btn-has-news { position: relative; }
.tab-btn-has-news::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 6px rgba(255, 45, 74, 0.8);
}

@media (max-width: 640px) {
  .pn-card-head { padding: 12px 13px; }
  .pn-card-body { padding: 0 13px 14px; }
  .pn-board-intro { padding: 13px 14px; }
  .pn-card-title { font-size: 0.92rem; }
  .pn-item { font-size: 0.84rem; }
}

/* ============================================================
   🧬 잠재 도감 (2026-07-31 신규)
   잠재 탭 상단의 접이식 패널. 서버 GET /api/potential-defs 로 받은 전체 잠재 목록을
   카드 그리드로 뿌린다. 필터바는 선수단 탭과 같은 .filter-bar-wrap 을 재사용하므로
   모바일 대응(720px/380px 미디어쿼리)이 자동으로 따라온다.
   ============================================================ */
.potential-codex summary { color: var(--text-main); }
.potential-codex[open] summary { border-bottom: 1px solid var(--border-c); }
.potential-codex summary b { color: var(--accent); font-family: var(--font-num); }

/* 배지 의미 안내(범례). 카드 위에 한 번만 보여줘서 배지를 처음 보는 사용자도 이해하게 한다. */
.codex-legend {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px; margin-bottom: 12px;
  background: rgba(10,18,36,0.5); border: 1px solid var(--border-c);
  border-radius: var(--radius-md); font-size: 11.5px; color: var(--text-3); line-height: 1.6;
}
.codex-legend span { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.codex-result-count {
  font-size: 11.5px; color: var(--text-3); margin-bottom: 10px;
  font-family: var(--font-num); letter-spacing: 0.01em;
}

.codex-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.codex-card {
  background: var(--bg-panel-2); border: 1px solid var(--border-c);
  border-radius: var(--radius-md); padding: 12px 13px;
  border-left: 3px solid rgba(120,160,220,0.35);
  min-width: 0;
}
/* 상황형은 획득 경로가 완전히 달라(전용 재설정) 좌측 띠 색으로 즉시 구분되게 한다. */
.codex-card.is-sit { border-left-color: var(--accent); }

.codex-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.codex-name {
  font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--text-main);
  letter-spacing: 0.01em; overflow-wrap: break-word; min-width: 0;
}
.codex-badge {
  padding: 2px 7px; border-radius: 100px; font-size: 10px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0; letter-spacing: 0.02em;
}
.codex-badge-normal { background: rgba(56,208,255,0.14); border: 1px solid rgba(56,208,255,0.4); color: var(--cyan); }
.codex-badge-sit { background: rgba(255,181,71,0.14); border: 1px solid rgba(255,181,71,0.45); color: var(--accent-bg); }
.codex-badge-premium { background: rgba(255,45,74,0.13); border: 1px solid rgba(255,45,74,0.42); color: var(--primary); }

.codex-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.codex-cat {
  font-size: 10.5px; font-weight: 700; color: var(--text-sub);
  padding: 2px 7px; border-radius: 4px; background: rgba(10,18,36,0.6); border: 1px solid var(--border-c);
}
.codex-code { font-family: var(--font-num); font-size: 9.5px; color: var(--text-4); letter-spacing: 0.04em; }

.codex-effect {
  font-size: 12.5px; font-weight: 700; color: var(--cyan);
  padding: 7px 9px; margin-bottom: 7px;
  background: rgba(56,208,255,0.07); border-radius: 6px; line-height: 1.5;
}
.codex-desc { font-size: 11.5px; color: var(--text-sub); line-height: 1.65; margin-bottom: 8px; }
.codex-acquire {
  font-size: 10.5px; color: var(--text-3); line-height: 1.55;
  padding-top: 7px; border-top: 1px dashed var(--border-c);
}

@media (max-width: 720px) {
  .codex-card-grid { grid-template-columns: 1fr; gap: 10px; }
  .codex-legend { font-size: 11px; padding: 9px 10px; }
  .codex-card { padding: 11px 12px; }
  .codex-name { font-size: 13.5px; }
  .codex-effect { font-size: 12px; }
}


/* ================================================================================================
   🆕 Phase 1(2026-08-01) 일일/주간 미션 + 출석 보상 + 보상 인벤토리 + 업적 UX 보강 + 홈 위젯
   ⚠️ 이 블록은 파일의 **맨 끝**에 있다. 이 파일 2442줄 부근 주석에 기록된 것처럼, 과거에 @media
      블록을 대응 데스크톱 규칙보다 **앞**에 두었다가 같은 명시도의 뒤쪽 데스크톱 규칙에 덮여
      모바일 스타일이 조용히 죽은 사고가 있었다. 그래서 아래는 반드시
      "데스크톱 규칙 → 곧바로 그 규칙을 덮는 @media" 순서로만 작성한다.
   ================================================================================================ */

/* ---------- 공통: 패널 설명 문구 ---------- */
.mission-scope-block { margin-top: 12px; }

/* ---------- 📅 미션: 진행률 헤더 ---------- */
.mission-progress-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mission-progress-bar-wrap { flex: 1; min-width: 0; }
.mission-progress-bar {
  height: 9px; border-radius: 99px; overflow: hidden;
  background: rgba(10, 18, 36, 0.75); border: 1px solid var(--border-c);
}
.mission-progress-fill {
  height: 100%; border-radius: 99px; transition: width 0.35s ease;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.mission-progress-fill.is-weekly { background: linear-gradient(90deg, var(--grade-hero), var(--cyan)); }
.mission-progress-count {
  font-family: var(--font-num); font-size: 13px; font-weight: 800;
  color: var(--text-main); flex-shrink: 0; letter-spacing: 0.04em;
}

/* ---------- 📅 미션: 전체 완료 보상 바 ---------- */
.mission-allclear-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin-bottom: 12px; border-radius: var(--radius-md, 8px);
  background: linear-gradient(135deg, rgba(255,181,71,0.16), rgba(255,45,74,0.12));
  border: 1px solid rgba(255,181,71,0.35);
  font-size: 13px; font-weight: 700; color: var(--accent-bg);
}
.mission-allclear-bar .btn { flex-shrink: 0; }

/* ---------- 📅 미션: 카드 리스트 ---------- */
.mission-list { display: flex; flex-direction: column; gap: 8px; }
.mission-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-md, 8px);
  background: var(--bg-panel-2); border: 1px solid var(--border-c);
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* 수령 가능한 미션은 테두리를 금색으로 강조해서 "지금 눌러야 할 것"이 한눈에 보이게 한다. */
.mission-item.is-claimable {
  border-color: rgba(255,181,71,0.5);
  background: linear-gradient(135deg, rgba(255,181,71,0.1), var(--bg-panel-2));
}
/* 이미 수령한 미션은 채도를 낮춰 시선에서 물러나게 한다(삭제하지 않는 이유: 오늘 뭘 했는지 확인용). */
.mission-item.is-claimed { opacity: 0.55; }
.mission-item .mi-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--chip-bg); border: 1px solid var(--border-c);
}
.mission-item .mi-body { flex: 1; min-width: 0; }
.mission-item .mi-title { font-size: 13.5px; font-weight: 800; color: var(--text-main); margin-bottom: 2px; }
.mission-item .mi-desc { font-size: 11.5px; color: var(--text-sub); line-height: 1.45; }
.mission-item-bar {
  height: 5px; margin-top: 7px; border-radius: 99px; overflow: hidden;
  background: rgba(10, 18, 36, 0.7);
}
.mission-item-bar-fill { height: 100%; border-radius: 99px; background: var(--cyan); transition: width 0.35s ease; }
.mission-item-right {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 116px;
}
.mission-item .mi-reward { font-size: 13px; font-weight: 800; color: var(--accent-bg); font-family: var(--font-num); }
.mission-item-progress { font-size: 11px; color: var(--text-3); font-family: var(--font-num); }
.mission-item-status { font-size: 10.5px; font-weight: 700; color: var(--text-3); }
.mission-item.is-claimable .mission-item-status { color: var(--accent); }
.mission-item.is-claimed .mission-item-status { color: var(--green); }
.mission-item-right .btn { margin-top: 4px; padding: 6px 12px; font-size: 11.5px; white-space: nowrap; }

/* ⬇️ 미션 모바일 최적화 — 위 데스크톱 규칙 바로 뒤에 둔다(소스 순서 규칙). */
@media (max-width: 720px) {
  /* 좁은 화면에서 우측 컬럼(보상/진행/상태/버튼)을 그대로 두면 제목이 2~3줄로 쪼개진다.
     그래서 카드를 2줄 구조로 바꾼다: 1줄 = 아이콘 + 제목/조건, 2줄 = 보상/진행/상태/버튼 가로 배치. */
  .mission-item { flex-wrap: wrap; padding: 11px 12px; gap: 10px; }
  .mission-item .mi-icon { width: 34px; height: 34px; font-size: 17px; border-radius: 9px; }
  .mission-item .mi-title { font-size: 13px; }
  .mission-item .mi-desc { font-size: 11px; }
  .mission-item-right {
    width: 100%; min-width: 0; flex-direction: row; align-items: center;
    justify-content: flex-start; flex-wrap: wrap; gap: 8px;
    padding-top: 9px; border-top: 1px dashed var(--border-c);
  }
  .mission-item .mi-reward { font-size: 12.5px; }
  .mission-item-right .btn { margin-top: 0; margin-left: auto; }
  .mission-progress-head { gap: 10px; }
  .mission-progress-count { font-size: 12px; }
  /* 전체 완료 보상 바는 문구가 길어 한 줄에 버튼까지 넣으면 버튼이 찌그러진다 → 세로로 쌓는다. */
  .mission-allclear-bar { flex-direction: column; align-items: stretch; gap: 10px; font-size: 12.5px; padding: 11px 13px; }
  .mission-allclear-bar .btn { width: 100%; }
}

/* ---------- 📆 출석: 헤더 + 진행률 ---------- */
.attendance-head {
  display: flex; align-items: center; gap: 16px; margin: 14px 0 16px;
  padding: 14px 16px; border-radius: var(--radius-md, 8px);
  background: var(--bg-panel-2); border: 1px solid var(--border-c);
}
.attendance-progress { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.attendance-progress-bar {
  flex: 1; min-width: 0; height: 9px; border-radius: 99px; overflow: hidden;
  background: rgba(10, 18, 36, 0.75); border: 1px solid var(--border-c);
}
.attendance-progress-fill {
  height: 100%; border-radius: 99px; transition: width 0.35s ease;
  background: linear-gradient(90deg, var(--grass), var(--cyan));
}
.attendance-progress-count {
  font-family: var(--font-num); font-size: 13px; font-weight: 800; color: var(--text-main); flex-shrink: 0;
}
.attendance-head .btn { flex-shrink: 0; }

/* ---------- 📆 출석: 28칸 그리드 ---------- */
/* 데스크톱은 7칸 × 4줄 = 달력처럼 보이는 배치가 가장 직관적이다(7일 반복 패턴과 열이 일치한다). */
.attendance-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.att-cell {
  position: relative; padding: 12px 8px 11px; border-radius: var(--radius-md, 8px);
  background: var(--bg-panel-2); border: 1px solid var(--border-c);
  text-align: center; transition: transform 0.15s ease, border-color 0.2s ease;
}
.att-cell.is-special {
  border-color: rgba(181,108,255,0.45);
  background: linear-gradient(160deg, rgba(181,108,255,0.14), var(--bg-panel-2));
}
/* 오늘 받을 칸: 금색 테두리 + 살짝 확대해서 "여기를 받으면 된다"를 분명히 한다. */
.att-cell.is-next {
  border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,181,71,0.18);
  transform: translateY(-2px);
}
.att-cell.is-claimed { opacity: 0.5; }
.att-day { font-family: var(--font-num); font-size: 11px; font-weight: 800; color: var(--text-3); margin-bottom: 5px; }
.att-reward { font-size: 11.5px; font-weight: 700; color: var(--accent-bg); line-height: 1.35; word-break: keep-all; }
.att-badge {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 99px; white-space: nowrap;
  font-size: 9px; font-weight: 800; letter-spacing: 0.02em;
  background: var(--grade-legend); color: #fff;
}
.att-check { position: absolute; top: 5px; right: 6px; font-size: 11px; }

/* ⬇️ 출석 모바일 최적화 */
@media (max-width: 720px) {
  /* 7칸을 유지하면 한 칸이 40px 미만이 되어 보상 문구("가챠 1연차 티켓")가 읽히지 않는다.
     4칸 × 7줄로 줄여 글자가 온전히 보이게 한다(달력 모양은 포기하고 가독성을 택함). */
  .attendance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .att-cell { padding: 11px 6px 10px; }
  .att-reward { font-size: 10.5px; }
  .att-badge { font-size: 8.5px; padding: 2px 6px; }
  /* 진행률 + 버튼을 한 줄에 두면 버튼이 잘린다 → 세로로 쌓는다. */
  .attendance-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 13px; }
  .attendance-head .btn { width: 100%; }
  .attendance-progress-count { font-size: 12px; }
}

/* ---------- 🎒 보유 아이템(보상 인벤토리) ---------- */
.reward-inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ri-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-md, 8px);
  background: var(--bg-panel-2); border: 1px solid var(--border-c);
}
/* 실제로 1개 이상 보유한 아이템만 강조한다(0개짜리도 목록에 남기는 이유: 어떤 아이템이
   존재하는지, 어디서 쓰는지 미리 알려주는 안내 역할을 겸한다). */
.ri-card.has-item { border-color: rgba(255,181,71,0.4); background: linear-gradient(135deg, rgba(255,181,71,0.09), var(--bg-panel-2)); }
.ri-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg); border: 1px solid var(--border-c);
}
.ri-body { flex: 1; min-width: 0; }
.ri-name { font-size: 13px; font-weight: 800; color: var(--text-main); margin-bottom: 3px; }
.ri-usage { font-size: 11px; color: var(--text-sub); line-height: 1.45; }
.ri-amount {
  flex-shrink: 0; font-family: var(--font-num); font-size: 15px; font-weight: 800; color: var(--accent-bg);
}
.ri-card:not(.has-item) .ri-amount { color: var(--text-4); }

/* ⬇️ 보유 아이템 모바일 최적화 */
@media (max-width: 720px) {
  .reward-inventory-grid { grid-template-columns: 1fr; gap: 8px; }
  .ri-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 9px; }
  .ri-name { font-size: 12.5px; }
  .ri-usage { font-size: 10.5px; }
}

/* ---------- 🏅 업적 UX 보강(§6): 요약 박스 ---------- */
.achievement-summary-box {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 12px;
}
.ach-sum-card {
  padding: 12px 14px; border-radius: var(--radius-md, 8px);
  background: var(--bg-panel-2); border: 1px solid var(--border-c); text-align: center;
}
.ach-sum-card .stat-lbl { font-size: 10.5px; color: var(--text-3); margin-bottom: 5px; }
.ach-sum-card .big-num { font-size: 17px; font-weight: 800; font-family: var(--font-num); }

/* ---------- 🏅 업적 UX 보강(§6): 필터 칩 + 정렬 ---------- */
.ach-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.ach-filter-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.ach-chip {
  padding: 7px 14px; border-radius: 99px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--text-sub);
  background: var(--chip-bg); border: 1px solid var(--border-c);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.ach-chip:hover { color: var(--text-main); border-color: rgba(120,160,220,0.34); }
.ach-chip.is-active {
  color: #fff; background: var(--primary); border-color: var(--primary);
}
.ach-sort-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ach-sort-lbl { font-size: 11.5px; color: var(--text-3); font-weight: 700; }
.ach-sort-select {
  padding: 7px 11px; border-radius: 7px; font-size: 12px; cursor: pointer;
  color: var(--text-main); background: var(--bg-input); border: 1px solid var(--border-c);
}

/* ⬇️ 업적 요약/툴바 모바일 최적화 */
@media (max-width: 720px) {
  /* 4칸을 유지하면 "수령 가능 총액" 숫자가 잘린다 → 2×2로 접는다. */
  .achievement-summary-box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; }
  .ach-sum-card { padding: 10px 11px; }
  .ach-sum-card .big-num { font-size: 15px; }
  /* 필터 칩 4개 + 정렬 셀렉트를 한 줄에 두면 칩이 줄바꿈되며 정렬이 밀린다.
     칩은 가로 스크롤 한 줄로, 정렬은 그 아래 전체 폭으로 분리한다. */
  .ach-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .ach-filter-chips {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ach-filter-chips::-webkit-scrollbar { display: none; }
  .ach-chip { flex-shrink: 0; padding: 7px 13px; font-size: 11.5px; }
  .ach-sort-wrap { justify-content: space-between; }
  .ach-sort-select { flex: 1; min-width: 0; }
}

/* ---------- 🏠 홈 위젯: 오늘의 미션 ---------- */
.home-mission-foot { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border-c); font-size: 11.5px; }
.home-mission-claimable { color: var(--accent-bg); font-weight: 800; }
.home-mission-hint { color: var(--text-3); }
#home-mission-panel .mission-progress-bar-wrap { margin-bottom: 12px; }

/* ---------- 🏠 홈 위젯: 출석 ---------- */
.home-attendance-today {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 12px; border-radius: var(--radius-md, 8px);
  background: linear-gradient(135deg, rgba(77,214,138,0.12), var(--bg-panel-2));
  border: 1px solid rgba(77,214,138,0.3);
}
.home-att-day-badge {
  flex-shrink: 0; padding: 7px 12px; border-radius: 99px;
  font-family: var(--font-num); font-size: 12px; font-weight: 800; color: #05221a;
  background: var(--grass);
}
.home-att-reward { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: var(--accent-bg); }
.home-att-badge {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px;
  font-size: 9.5px; font-weight: 800; color: #fff; background: var(--grade-legend);
}
.home-att-claim-btn { width: 100%; }
.home-att-next { margin-top: 9px; font-size: 11px; color: var(--text-3); }

/* ---------- 🏠 홈 위젯: 업데이트 안내 ---------- */
.home-pn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.home-pn-ver {
  flex-shrink: 0; padding: 3px 10px; border-radius: 99px;
  font-family: var(--font-num); font-size: 11px; font-weight: 800; color: #fff; background: var(--primary);
}
.home-pn-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--text-main); }
.home-pn-date { flex-shrink: 0; font-family: var(--font-num); font-size: 11px; color: var(--text-3); }
.home-pn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.home-pn-list li {
  font-size: 12px; color: var(--text-sub); line-height: 1.55;
  padding: 9px 11px; border-radius: 7px; background: var(--bg-panel-2); border: 1px solid var(--border-c);
}
.home-pn-group {
  display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 800; color: var(--cyan); background: rgba(56,208,255,0.1);
}
.home-pn-more { margin-top: 9px; font-size: 11px; color: var(--text-3); text-align: right; }

/* ⬇️ 홈 위젯 모바일 최적화 */
@media (max-width: 720px) {
  /* home-two-col 은 기존 규칙에서 이미 1열로 접히지만, 미션 행은 미션 → 출석 순서를 반드시 지켜야
     한다(출석이 위로 오면 "오늘 할 일"보다 보상이 먼저 보여 동선이 뒤집힌다). 명시적으로 고정한다. */
  /* ⚠️ 2026-08-01 수정: .home-two-col 의 `align-items: start` 가 그대로 살아 있어서, 여기서
     display:flex + flex-direction:column 으로 바꾸는 순간 start 가 "교차축(가로) 정렬"로 해석되어
     자식 패널이 내용 너비로 쪼그라들었다(모바일에서 미션/출석 위젯이 좌측 60% 폭으로만 보이고
     우측에 빈 공간이 남던 문제). 세로 스택에서는 반드시 가로로 꽉 채워야 하므로 stretch 로 덮는다. */
  .home-mission-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  /* 같은 이유로 grid 로 남는 나머지 행도 자식 폭이 1fr 을 다 쓰도록 못 박는다(방어). */
  .home-two-col { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .home-two-col > * { min-width: 0; width: auto; }
  .home-attendance-today { padding: 12px 13px; gap: 10px; flex-wrap: wrap; }
  .home-att-day-badge { font-size: 11px; padding: 6px 11px; }
  .home-att-reward { font-size: 13px; }
  .home-mission-foot { font-size: 11px; }
  .home-pn-head { gap: 8px; }
  .home-pn-title { font-size: 12.5px; width: 100%; order: 3; }
  .home-pn-list li { font-size: 11.5px; padding: 8px 10px; }
  .home-pn-group { font-size: 9.5px; }
}

/* ==================================================================================
   🆕 Phase 2(2026-08-01) 선수 도감 + 팀 컬렉션
   명세 §3/§4/§6. 두 탭은 카드 구조가 거의 같아 .col-* 접두사로 공통 스타일을 쓰고,
   도감 전용 선수 카드만 .dex-* 로 분리했다.
   ⚠️ 이 파일의 규칙: 새 @media 블록은 반드시 "그 규칙을 덮어쓸 데스크톱 규칙 바로 뒤"에
      둔다(파일 앞쪽에 두면 뒤에 오는 동일 특이도의 데스크톱 규칙에 덮여 조용히 무효화된다).
   ================================================================================== */

/* ---------- 상단 요약 4칸 (도감/팀 컬렉션 공용) ---------- */
.col-summary-box {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 12px;
}
.col-sum-card {
  padding: 12px 14px; border-radius: var(--radius-md, 8px);
  background: var(--bg-panel-2); border: 1px solid var(--border-c); text-align: center;
}
.col-sum-card .stat-lbl { font-size: 10.5px; color: var(--text-3); margin-bottom: 5px; }
.col-sum-card .big-num { font-size: 17px; font-weight: 800; font-family: var(--font-num); }
/* 최다 구단 칸에는 "LG 트윈스 4" 처럼 긴 문자열이 들어가므로 넘치면 줄바꿈되게 둔다. */
#teamcol-sum-club { font-size: 13.5px; line-height: 1.3; word-break: keep-all; }

@media (max-width: 720px) {
  /* 4칸을 그대로 두면 한 칸이 70px 남짓으로 좁아져 숫자가 잘린다. 2×2로 접는다. */
  .col-summary-box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; }
  .col-sum-card { padding: 10px 8px; }
  .col-sum-card .stat-lbl { font-size: 9.5px; }
  .col-sum-card .big-num { font-size: 15px; }
  #teamcol-sum-club { font-size: 12px; }
}

/* ---------- 묶음 요약 칩 스트립 (구단별/포지션별/등급별 필터에서만 노출) ---------- */
.col-group-strip {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.col-group-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 99px;
  background: var(--chip-bg); border: 1px solid var(--border-c);
}
/* 이 묶음에 지금 수령할 수 있는 보상이 있으면 금색으로 강조 — 어디를 눌러야 할지 즉시 보이게 한다. */
.col-group-chip.has-claim {
  border-color: rgba(255,181,71,0.55);
  background: linear-gradient(135deg, rgba(255,181,71,0.14), var(--chip-bg));
}
.col-group-chip .cgc-name { font-size: 11.5px; font-weight: 800; color: var(--text-main); }
.col-group-chip .cgc-count { font-size: 12px; font-weight: 800; color: var(--accent); font-family: var(--font-num); }
.col-group-chip .cgc-next { font-size: 10px; color: var(--text-3); }

@media (max-width: 720px) {
  /* 모바일에서는 칩이 10개(구단)까지 늘어나 화면을 다 잡아먹으므로 가로 스크롤 한 줄로 만든다. */
  .col-group-strip {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; margin-bottom: 12px;
  }
  .col-group-strip::-webkit-scrollbar { height: 3px; }
  .col-group-chip { flex: 0 0 auto; padding: 6px 10px; gap: 6px; }
  .col-group-chip .cgc-name { font-size: 11px; }
  .col-group-chip .cgc-next { display: none; }
}

/* ---------- 보상 단계 카드 (도감 단계 + 팀 컬렉션 공용) ---------- */
.col-reward-list { display: flex; flex-direction: column; gap: 9px; }
.col-reward-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px; border-radius: var(--radius-md, 8px);
  background: var(--bg-panel-2); border: 1px solid var(--border-c);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.col-reward-item.is-claimable {
  border-color: rgba(255,181,71,0.5);
  background: linear-gradient(135deg, rgba(255,181,71,0.1), var(--bg-panel-2));
}
/* 이미 수령한 단계는 채도를 낮춰 물러나게 하되 지우지는 않는다(무엇을 이미 받았는지 확인용). */
.col-reward-item.is-claimed { opacity: 0.55; }
.col-ri-main { flex: 1; min-width: 0; }
.col-ri-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.col-ri-group { font-size: 13px; font-weight: 800; color: var(--text-main); }
.col-ri-step {
  padding: 1px 8px; border-radius: 5px;
  font-size: 10px; font-weight: 800; color: var(--cyan); background: rgba(56,208,255,0.1);
}
.col-meets-badge {
  padding: 1px 8px; border-radius: 5px;
  font-size: 10px; font-weight: 800; color: var(--green, #4dd68a); background: rgba(77,214,138,0.12);
}
.col-ri-cond { font-size: 11.5px; color: var(--text-sub); margin-bottom: 8px; }
.col-ri-bar { height: 5px; border-radius: 99px; background: rgba(120,160,220,0.14); overflow: hidden; }
.col-ri-bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.3s ease;
}
.col-ri-hint { margin-top: 6px; font-size: 10.5px; color: var(--text-3); }
.col-ri-right {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 132px;
}
.col-ri-reward { font-size: 13px; font-weight: 800; color: var(--accent); font-family: var(--font-num); }
.col-ri-progress { font-size: 11px; color: var(--text-sub); font-family: var(--font-num); }
.col-ri-status { font-size: 10.5px; color: var(--text-3); }
.col-ri-right .col-claim-btn { margin-top: 5px; padding: 6px 12px; font-size: 11.5px; }

@media (max-width: 720px) {
  /* 가로 배치를 유지하면 오른쪽 보상 열(최소 132px) 때문에 조건 문구가 2~3줄로 터진다. 세로로 쌓는다. */
  .col-reward-item { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 13px; }
  .col-ri-group { font-size: 12.5px; }
  .col-ri-cond { font-size: 11px; }
  .col-ri-right {
    flex-direction: row; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; min-width: 0;
    padding-top: 9px; border-top: 1px dashed var(--border-c);
  }
  .col-ri-right .col-claim-btn { margin-top: 0; width: 100%; }
}

/* ---------- 도감 등록 선수 카드 그리드 ---------- */
.dex-player-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 9px;
}
.dex-player-card {
  padding: 11px 12px; border-radius: var(--radius-md, 8px);
  background: var(--bg-panel-2); border: 1px solid var(--border-c);
  /* 미보유 카드도 목록에 남는 것이 도감의 핵심이라, 지우는 대신 살짝 흐리게만 처리한다. */
  opacity: 0.62;
  transition: border-color 0.18s ease, opacity 0.18s ease;
}
.dex-player-card.is-owned { opacity: 1; border-color: rgba(120,160,220,0.3); }
.dex-player-card:hover { border-color: rgba(120,160,220,0.42); }
.dex-pc-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.dex-pc-name {
  font-size: 13px; font-weight: 800; color: var(--text-main);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dex-pc-meta { font-size: 10.5px; color: var(--text-sub); margin-bottom: 7px; }
.dex-pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dex-pc-date { font-size: 9.5px; color: var(--text-4, var(--text-3)); font-family: var(--font-num); }
.dex-pc-own {
  padding: 1px 7px; border-radius: 5px;
  font-size: 9.5px; font-weight: 800; color: var(--text-3); background: rgba(120,160,220,0.1);
}
.dex-pc-own.yes { color: var(--green, #4dd68a); background: rgba(77,214,138,0.12); }

@media (max-width: 720px) {
  /* 168px 최소폭은 모바일(360px 안팎)에서 1열로 떨어져 스크롤이 길어진다. 2열이 되도록 낮춘다. */
  .dex-player-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .dex-player-card { padding: 10px; }
  .dex-pc-name { font-size: 12px; }
  .dex-pc-meta { font-size: 10px; }
}

/* ==========================================================================
   🩹 2026-08-01 패치 체크리스트 대응 (v1.7.2)
   ⚠️ 배치 규칙: 이 파일은 "같은 특이도면 뒤에 온 규칙이 이긴다" 문제 때문에
      @media 블록을 데스크톱 규칙보다 앞에 두면 무력화된다. 따라서 모든 신규
      규칙은 파일 최하단에, 각 데스크톱 그룹 바로 뒤에 자기 모바일 블록을 둔다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [P1-1] 홈 CTA 카드를 <button>으로 통일하면서 필요한 UA 스타일 리셋.
   ⚠️ .pvp-candidate-card 는 <div> 로 .qa-card 를 재사용하므로 반드시
      button.qa-card 로 스코프를 한정한다(PvP 후보 카드 레이아웃 보호).
   -------------------------------------------------------------------------- */
button.qa-card {
  appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit; text-align: left;
  width: 100%; margin: 0;
  font-family: inherit;
}
button.qa-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* 내부 span 이 이벤트 타깃이 되어 dataset 조회가 실패하는 일이 없도록 못 박는다. */
.qa-card > * { pointer-events: none; }
/* .qa-icon 은 원래 div 기준으로 grid place-items 였다. span 에서도 동일하게 동작시킨다. */
button.qa-card .qa-icon { display: grid; place-items: center; }
button.qa-card .qa-title,
button.qa-card .qa-desc { display: block; }

@media (max-width: 720px) {
  /* [P1-4] 3열 CTA 의 간격이 8px 이라 인접 터치 타깃 사이 오조작이 발생.
     WCAG 2.5.8 권장(타깃 간 충분한 간격) 충족을 위해 12px 로 넓힌다. */
  .qa-grid { gap: 12px; }
  button.qa-card { text-align: center; }
}

/* --------------------------------------------------------------------------
   [P2-2] 초월 재료 카드 잠금 사유 세분화 UI
   -------------------------------------------------------------------------- */
.tmp-lock-slot {
  display: inline-block; margin-left: 4px;
  font-size: 9.5px; font-weight: 700; color: var(--text-3);
  opacity: 0.95;
}
.transcendence-material-unlock-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px dashed rgba(255,181,71,0.4);
  border-radius: var(--radius-sm);
  background: rgba(255,181,71,0.07);
}
.tmub-text { font-size: 11.5px; color: var(--text-sub); flex: 1 1 220px; min-width: 0; }
.tmub-btn { font-size: 11.5px; padding: 6px 10px; white-space: nowrap; }

@media (max-width: 720px) {
  .transcendence-material-unlock-bar { flex-direction: column; align-items: stretch; }
  .tmub-text { flex: none; }
  .tmub-btn { width: 100%; min-height: 40px; }
}

/* --------------------------------------------------------------------------
   [P2-3] 잠재 추천 문구 — 추천 기준을 툴팁으로 안내
   -------------------------------------------------------------------------- */
.potential-recommend-line { display: flex; align-items: center; gap: 6px; cursor: help; }
.potential-recommend-help {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  font-size: 9.5px; font-weight: 800;
  color: var(--text-3); background: rgba(120,160,220,0.16);
  cursor: help; flex: none;
}

/* --------------------------------------------------------------------------
   [P1-3] 초월 / 잠재 해금 전 잠금 안내 패널
   -------------------------------------------------------------------------- */
.feature-lock-panel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 20px; text-align: center;
  border: 1px dashed var(--border-c);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(30,48,84,0.4), rgba(15,26,51,0.6));
}
.feature-lock-icon { font-size: 34px; line-height: 1; opacity: 0.9; }
.feature-lock-title { font-size: 15px; font-weight: 800; color: var(--text-main); }
.feature-lock-cond {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 800;
  color: var(--accent, #ffb547);
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: rgba(255,181,71,0.1); border: 1px solid rgba(255,181,71,0.3);
}
.feature-lock-desc { font-size: 12px; color: var(--text-sub); line-height: 1.7; max-width: 460px; }
.feature-lock-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }

@media (max-width: 720px) {
  .feature-lock-panel { padding: 24px 14px; }
  .feature-lock-icon { font-size: 28px; }
  .feature-lock-title { font-size: 14px; }
  .feature-lock-cond { font-size: 11.5px; }
  .feature-lock-desc { font-size: 11.5px; }
  .feature-lock-actions > .btn { width: 100%; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   [P3] 배경 장식 레이어가 상단 요소의 클릭을 가로채지 않도록 방어.
   (.bg-fx 는 z-index:-1 + overflow:hidden 이라 실제 오버플로 문제는 없지만,
    stacking context 가 바뀌는 상황에서도 안전하도록 명시한다.)
   -------------------------------------------------------------------------- */
.bg-fx, .bg-fx::after, .stadium-glow { pointer-events: none; }

/* [2026-08-01 버그수정] 강화 탭 좌측 목록 상단 — "초월 카드는 일반 강화 대상이 아님" 안내 배너.
   ⚠️ CSS 소스 순서 트랩 준수: 데스크톱 규칙 바로 뒤에 전용 @media 를 붙여 파일 끝에 배치한다. */
.enhance-transcendence-notice {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 10px; padding: 10px 12px;
  border: 1px dashed rgba(167, 139, 250, 0.45);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(124, 92, 220, 0.14), rgba(60, 40, 120, 0.10));
}
.enhance-transcendence-notice .etn-text { font-size: 11.5px; line-height: 1.65; color: var(--text-sub); }
.enhance-transcendence-notice .etn-text b { color: var(--text-main); }
.enhance-transcendence-notice .etn-names { font-family: var(--font-mono); font-size: 11px; color: #c4b5fd; }
.enhance-transcendence-notice .etn-btn { width: 100%; font-size: 11.5px; padding: 7px 10px; }
@media (max-width: 720px) {
  .enhance-transcendence-notice { padding: 10px; }
  .enhance-transcendence-notice .etn-text { font-size: 11px; }
  .enhance-transcendence-notice .etn-btn { min-height: 40px; }
}

/* ============================================================================
   🆕 다중 로그인 동시성 패치 (2026-08-01, Request U)
   - .session-stamp        : 라인업/로테이션 "마지막 저장 시각", 업적 "마지막 갱신 시각"
   - .multi-login-policy   : 동일 계정 다중 로그인 정책 A 안내 박스
   - .is-session-locked    : 다른 세션이 시즌 자동진행 락을 잡고 있을 때의 버튼 상태
   ⚠️ CSS 소스 순서 트랩: 이 파일의 @media 블록들은 데스크톱 규칙보다 앞에 있는 경우가 있어
      새 모바일 규칙은 항상 파일 맨 끝(=이 위치)에 둔다.
   ========================================================================= */
.session-stamp {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 7px 11px;
  border: 1px solid var(--border-c);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.session-stamp.hidden { display: none; }

.multi-login-policy {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-c);
  border-left: 3px solid var(--accent, #f5a623);
  border-radius: 10px;
  background: rgba(245, 166, 35, 0.06);
}
.multi-login-policy .mlp-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text-main);
}
.multi-login-policy .mlp-body {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-main);
}
.multi-login-policy .mlp-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-sub);
}
.multi-login-policy .mlp-list b { color: var(--text-main); }

button.is-session-locked,
button.is-session-locked:hover {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

@media (max-width: 720px) {
  .session-stamp { font-size: 11px; padding: 6px 10px; margin-bottom: 10px; }
  .multi-login-policy { padding: 12px 13px; margin-bottom: 13px; }
  .multi-login-policy .mlp-title { font-size: 13px; }
  .multi-login-policy .mlp-body { font-size: 12px; }
  .multi-login-policy .mlp-list { font-size: 11px; padding-left: 16px; }
}

/* ==================================================================================
   🆕 UX 방향성 문서 1차 반영 (2026-08-01, v1.8.0)
   - §3.1 홈은 "행동판": 5개 핵심 CTA + 접기 구분선 + 「수령 가능한 보상」 카드
   - §3.4 라인업: 역할별 3단계(선발 야수/투수 운용/대타·벤치) + 상단 요약 고정
   - §3.5 트레이드: 제안 만들기 / 받은 제안 / 보낸 제안 분리 서브탭
   ⚠️ 반드시 파일 END 에 둔다(위쪽 @media 블록이 이 규칙들을 덮어쓰지 못하게 하기 위함).
   ================================================================================== */

/* ---------- §3.1 홈: 핵심 CTA 5개 그리드 ---------- */
/* 첫 스크린에서 "눌러야 할 행동" 5개만 보이게 한다. 데스크톱은 5열, 태블릿 3열, 모바일 2열. */
.qa-grid.qa-grid-primary {
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1180px) {
  .qa-grid.qa-grid-primary { grid-template-columns: repeat(3, 1fr); }
}

/* 「수령 가능한 보상」 카드: 다른 CTA 와 색으로 구분(골드 톤)해 보상 화면임을 즉시 인지시킨다. */
button.qa-card.qa-card-reward {
  background: linear-gradient(135deg, rgba(255, 181, 71, 0.22), rgba(139, 90, 18, 0.34));
  border-color: rgba(255, 181, 71, 0.42);
}
button.qa-card.qa-card-reward:hover {
  border-color: rgba(255, 181, 71, 0.72);
  box-shadow: 0 8px 24px rgba(255, 181, 71, 0.24);
}
button.qa-card.qa-card-reward .qa-icon {
  background: linear-gradient(135deg, var(--accent), #b3761f);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 16px rgba(255, 181, 71, 0.45);
}
button.qa-card.qa-card-reward .qa-cta { color: var(--accent); }
/* 수령 가능한 보상이 하나도 없을 때는 톤을 낮춰 "지금 눌러야 하는 카드"에서 제외한다. */
button.qa-card.qa-card-reward.is-empty {
  background: var(--bg-panel);
  border-color: var(--border-c);
  opacity: 0.72;
}
button.qa-card.qa-card-reward.is-empty .qa-icon {
  background: var(--chip-bg);
  box-shadow: none;
}
button.qa-card.qa-card-reward.is-empty .qa-cta { color: var(--text-sub); }

.qa-badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(255, 45, 74, 0.5);
}
.qa-badge.hidden { display: none; }

/* ---------- §3.1 홈: 첫 스크린 아래 정보 영역 구분선 ---------- */
/* "여기부터는 읽는 정보"라는 신호. 위쪽 CTA 5개와 아래 정보 블록을 시각적으로 분리한다. */
.home-fold-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
}
.home-fold-divider::before,
.home-fold-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-c), transparent);
}
.home-fold-label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  white-space: nowrap;
}

/* ---------- §3.4 라인업: 상단 편집 상태 요약 고정 ---------- */
.lineup-sticky-head {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -4px 16px;
  padding: 12px 14px 10px;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-md);
  background: rgba(10, 18, 36, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
}
.lineup-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.lu-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid var(--border-c);
  border-radius: 999px;
  background: var(--chip-bg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}
.lu-chip.is-complete {
  border-color: rgba(77, 214, 138, 0.5);
  background: rgba(77, 214, 138, 0.14);
  color: var(--green);
}
/* 라인업 상단 요약 안의 저장 시각 스탬프는 여백을 줄여 헤더 높이를 낮춘다. */
.lineup-sticky-head .session-stamp { margin-bottom: 10px; }

/* ---------- §3.4 라인업: 역할별 3단계 탭 ---------- */
.lineup-stage-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lineup-stage-tab {
  padding: 9px 10px;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-sub);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lineup-stage-tab:hover { color: var(--text-main); border-color: rgba(255, 45, 74, 0.35); }
.lineup-stage-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 45, 74, 0.35);
}
.lineup-stage-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ⚠️ 매우 중요: 단계 전환은 "CSS 로 숨기기"만 한다.
   saveLineup() 은 #lineup-grid 안의 모든 [data-slot-key] select 를 한 번에 읽어 서버로 보낸다.
   따라서 비활성 단계를 DOM 에서 제거하면 그 단계의 배치가 통째로 초기화된다.
   반드시 display:none 으로만 감춰 select 들이 DOM 에 남아 있게 유지해야 한다. */
.lineup-section.is-stage-hidden { display: none !important; }

/* ---------- §3.5 트레이드: 서브탭 패널 ---------- */
.trade-subpanel.hidden { display: none; }
#trade-sub-tab-nav .sub-tab-count {
  display: inline-block;
  min-width: 16px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.6;
}
#trade-sub-tab-nav .sub-tab-btn.active .sub-tab-count {
  background: rgba(0, 0, 0, 0.32);
}

/* ---------- 모바일 대응 ---------- */
@media (max-width: 720px) {
  .qa-grid.qa-grid-primary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* 5개 중 마지막(수령 가능한 보상) 카드는 2열 그리드에서 혼자 남으므로 폭 전체를 쓰게 한다. */
  button.qa-card.qa-card-reward { grid-column: 1 / -1; min-height: 66px; }
  .qa-badge { font-size: 10.5px; padding: 1px 5px; }

  .home-fold-divider { margin: 2px 0 14px; }
  .home-fold-label { font-size: 11px; }

  .lineup-sticky-head { margin: 0 0 13px; padding: 10px 11px 9px; border-radius: var(--radius-sm); }
  .lineup-summary-chips { gap: 6px; margin-bottom: 8px; }
  .lu-chip { padding: 4px 9px; font-size: 11px; }
  .lineup-stage-tabs { gap: 6px; }
  .lineup-stage-tab { padding: 8px 4px; font-size: 11px; }

  #trade-sub-tab-nav { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  #trade-sub-tab-nav .sub-tab-btn { flex: none; padding: 7px 11px; font-size: 11.5px; white-space: nowrap; }
}

/* =========================================================================
   🆕 UX 방향성 문서 2차 반영 (2026-08-01, v1.9.0)
   ⑥ 초월(§3.6) · ⑦ 잠재(§3.7) · ⑧ 선수/정밀경기 기록(§3.8) · ⑨ 선수 도감 · ⑩ 팀 컬렉션(§3.9) · ⑪ 정밀 경기
   ⚠️ CSS 소스 순서 트랩: 이 블록은 반드시 파일 맨 끝에 둔다(앞선 @media 에 덮이지 않도록).
   ========================================================================= */

/* ---------- §3.6 초월: 카드 단위 "설명형 잠금 화면" ---------- */
.tr-lock-card {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(30, 41, 59, .55), rgba(15, 23, 42, .35));
  padding: 16px 16px 14px;
}
.tr-lock-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.tr-lock-icon { font-size: 26px; line-height: 1; }
.tr-lock-head-text { min-width: 0; }
.tr-lock-title { font-size: 15px; font-weight: 800; color: var(--text-main); }
.tr-lock-sub { margin-top: 3px; font-size: 12px; color: var(--text-3); line-height: 1.55; }
.tr-lock-progress {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-3); margin-bottom: 5px;
}
.tr-lock-progress b { font-family: var(--font-mono); color: var(--accent); font-size: 13px; }
.tr-lock-bar { height: 6px; border-radius: 999px; background: rgba(148, 163, 184, .18); overflow: hidden; }
.tr-lock-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #a855f7); transition: width .3s ease; }
.tr-cond-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-cond-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: rgba(15, 23, 42, .3);
  font-size: 12.5px; color: var(--text-sub);
}
.tr-cond-item.is-ok { border-color: rgba(77, 214, 138, .45); background: rgba(77, 214, 138, .1); }
.tr-cond-mark { font-size: 13px; line-height: 1; }
.tr-cond-label { font-weight: 700; }
.tr-cond-now { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.tr-cond-item.is-ok .tr-cond-now { color: var(--green); }
.tr-lock-why { margin: 12px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.7; }
.tr-lock-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tr-lock-actions .tr-lock-btn { flex: 1 1 180px; }
.tr-unlocked-banner {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid rgba(77, 214, 138, .4); background: rgba(77, 214, 138, .12);
  font-size: 12.5px; font-weight: 700; color: var(--green);
}

/* ---------- §3.7 잠재: "역할 세팅 시스템"으로 보이게 ---------- */
.pot-why-card {
  border: 1px solid rgba(250, 204, 21, .38);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(250, 204, 21, .14), rgba(120, 53, 15, .16));
  padding: 13px 14px;
}
.pot-why-head { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #facc15; }
.pot-why-text { margin-top: 5px; font-size: 14px; font-weight: 800; color: var(--text-main); line-height: 1.5; }
.pot-why-sub { margin-top: 6px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.pot-slot { border-width: 1px; border-style: solid; }
.pot-slot-main { border-color: rgba(34, 211, 238, .42); }
.pot-slot-sub { border-color: rgba(14, 165, 233, .26); }
.pot-slot.is-locked { border-color: rgba(148, 163, 184, .26); opacity: .92; }
.pot-slot-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.pot-slot-role {
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
}
.pot-slot-role.is-main { background: rgba(34, 211, 238, .2); color: #67e8f9; border: 1px solid rgba(34, 211, 238, .45); }
.pot-slot-role.is-sub { background: rgba(148, 163, 184, .16); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, .34); }
.pot-slot-label { font-size: 12px; font-weight: 800; color: var(--text-3); }
.pot-slot-roledesc { font-size: 11px; color: var(--text-3); line-height: 1.55; margin-bottom: 7px; }
.pot-kind-badge {
  padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.pot-kind-badge.is-normal { background: rgba(34, 197, 94, .16); color: #86efac; border: 1px solid rgba(34, 197, 94, .42); }
.pot-kind-badge.is-sit { background: rgba(124, 58, 237, .22); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, .48); }
.pot-kind-why { margin-top: 4px; font-size: 11px; color: var(--text-3); }

/* ---------- §3.8 기록: 핵심 요약 카드 → 상세 표 ---------- */
.stats-summary-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin: 6px 0 10px;
}
.stats-sum-card {
  border: 1px solid var(--border-c); border-radius: 12px;
  background: var(--bg-panel); padding: 9px 11px; min-width: 0;
}
.stats-sum-lbl { font-size: 11px; color: var(--text-3); font-weight: 700; }
.stats-sum-val { margin-top: 3px; font-family: var(--font-mono); font-size: 19px; font-weight: 800; color: var(--accent); line-height: 1.15; }
.stats-sum-sub { margin-top: 3px; font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-sum-empty { font-size: 12px; color: var(--text-3); margin: 4px 0 10px; }
.stats-col-toggle-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }
/* 세부 열 접기: 타자 18열 / 투수 14열 중 "핵심"만 남긴다.
   타자 핵심 = 이름1 포지션2 경기3 타수4 안타5 홈런8 타점9 타율15 OPS18
   투수 핵심 = 이름1 포지션2 경기3 이닝4 ERA7 승8 패9 세이브10 홀드11 */
.stats-table-wrap.is-compact.is-batter th:nth-child(6),
.stats-table-wrap.is-compact.is-batter td:nth-child(6),
.stats-table-wrap.is-compact.is-batter th:nth-child(7),
.stats-table-wrap.is-compact.is-batter td:nth-child(7),
.stats-table-wrap.is-compact.is-batter th:nth-child(10),
.stats-table-wrap.is-compact.is-batter td:nth-child(10),
.stats-table-wrap.is-compact.is-batter th:nth-child(11),
.stats-table-wrap.is-compact.is-batter td:nth-child(11),
.stats-table-wrap.is-compact.is-batter th:nth-child(12),
.stats-table-wrap.is-compact.is-batter td:nth-child(12),
.stats-table-wrap.is-compact.is-batter th:nth-child(13),
.stats-table-wrap.is-compact.is-batter td:nth-child(13),
.stats-table-wrap.is-compact.is-batter th:nth-child(14),
.stats-table-wrap.is-compact.is-batter td:nth-child(14),
.stats-table-wrap.is-compact.is-batter th:nth-child(16),
.stats-table-wrap.is-compact.is-batter td:nth-child(16),
.stats-table-wrap.is-compact.is-batter th:nth-child(17),
.stats-table-wrap.is-compact.is-batter td:nth-child(17),
.stats-table-wrap.is-compact.is-pitcher th:nth-child(5),
.stats-table-wrap.is-compact.is-pitcher td:nth-child(5),
.stats-table-wrap.is-compact.is-pitcher th:nth-child(6),
.stats-table-wrap.is-compact.is-pitcher td:nth-child(6),
.stats-table-wrap.is-compact.is-pitcher th:nth-child(12),
.stats-table-wrap.is-compact.is-pitcher td:nth-child(12),
.stats-table-wrap.is-compact.is-pitcher th:nth-child(13),
.stats-table-wrap.is-compact.is-pitcher td:nth-child(13),
.stats-table-wrap.is-compact.is-pitcher th:nth-child(14),
.stats-table-wrap.is-compact.is-pitcher td:nth-child(14) { display: none; }

/* ---------- §3.9 / ⑩ 컬렉션: "지금 받을 것 / 곧 달성할 것" 고정 블록 ---------- */
.col-priority-block {
  border: 1px solid rgba(255, 181, 71, .4);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255, 181, 71, .14), rgba(139, 90, 18, .16));
  padding: 12px 13px;
  margin: 0 0 12px;
}
.col-priority-block.is-soon {
  border-color: rgba(99, 102, 241, .36);
  background: linear-gradient(150deg, rgba(99, 102, 241, .13), rgba(30, 27, 75, .18));
}
.col-priority-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; font-weight: 800; color: var(--text-main); margin-bottom: 9px;
}
.col-priority-count {
  min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--red, #ef4444); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 800; text-align: center;
}
.col-priority-sub { font-size: 11px; font-weight: 600; color: var(--text-3); }
.col-all-title { margin-top: 20px; }

/* ---------- ⑪ 정밀 경기: 3단계 분할 ---------- */
.precision-step-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 12px 0 14px;
}
.precision-step-tab {
  padding: 10px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-c); background: var(--bg-panel);
  color: var(--text-3); font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all .15s ease;
}
.precision-step-tab:hover { border-color: var(--primary); color: var(--text-main); }
.precision-step-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* ⚠️ 매우 중요 — DOM 제거 금지, CSS로만 감춘다(라이브 경기 select 값 보존) */
.precision-step.is-step-hidden { display: none !important; }

/* ---------- 모바일 ---------- */
@media (max-width: 720px) {
  .tr-lock-card { padding: 13px 12px 12px; }
  .tr-lock-icon { font-size: 22px; }
  .tr-lock-title { font-size: 14px; }
  .tr-cond-item { font-size: 12px; padding: 7px 9px; flex-wrap: wrap; }
  .tr-cond-now { margin-left: auto; }
  .tr-lock-actions .tr-lock-btn { flex: 1 1 100%; }

  .pot-why-text { font-size: 13px; }
  .pot-slot-roledesc { font-size: 10.5px; }

  /* 문서 §3.8 "모바일에서 전부 표로 유지하지 않는다" — 요약 카드는 2열 카드형으로 */
  .stats-summary-row { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .stats-sum-val { font-size: 17px; }
  .stats-sum-card:last-child { grid-column: 1 / -1; }
  /* 모바일에서는 표 자체가 숨겨지므로(.stats-card-list 사용) 열 토글 버튼도 감춘다 */
  .stats-col-toggle-row { display: none; }

  .col-priority-block { padding: 11px 11px; margin-bottom: 10px; }
  .col-priority-head { font-size: 12.5px; }

  .precision-step-tabs { gap: 6px; margin: 10px 0 12px; }
  .precision-step-tab { padding: 8px 4px; font-size: 11px; }
}

/* =========================================================================
   🆕 UX 방향성 문서 3차 반영 (2026-08-01, v1.10.0)
   대상: ⑫ FA 시장 · ⑬ 시즌 · ⑭ 업적 · ⑮ 출석 · ⑯ PvP
   원칙: §3.10 "수령 가능 항목은 항상 위 / 진행 정보는 보조 / 수령 후 피드백은 강하게",
        §2 원칙 ③ "긴 화면은 단계 분할", §5 "모바일은 카드형/단계형"
   ========================================================================= */

/* ---------- 공통: 강한 수령 피드백 오버레이 (§3.10) ---------- */
.reward-burst {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; background: rgba(2, 6, 23, .42);
  animation: rb-fade .45s ease-out forwards;
  animation-delay: 1.15s;
}
.reward-burst-card {
  text-align: center; padding: 26px 34px; border-radius: 20px;
  border: 1px solid rgba(255, 181, 71, .55);
  background: linear-gradient(160deg, rgba(255, 181, 71, .22), rgba(15, 23, 42, .92));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 181, 71, .08);
  animation: rb-pop .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.reward-burst-emoji { font-size: 44px; line-height: 1; margin-bottom: 8px; animation: rb-spin .7s ease-out both; }
.reward-burst-amount { font-family: var(--font-num); font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -.5px; }
.reward-burst-label { margin-top: 6px; font-size: 13px; color: var(--text-main); font-weight: 700; }
.reward-burst-sub { margin-top: 3px; font-size: 11.5px; color: var(--text-sub); }
@keyframes rb-pop { from { transform: scale(.72) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes rb-spin { from { transform: rotate(-22deg) scale(.6); } to { transform: rotate(0) scale(1); } }
@keyframes rb-fade { to { opacity: 0; } }

/* ---------- ⑭⑮ 수령 우선 블록 (업적/출석 공통) ---------- */
.claim-first-block {
  border: 1px solid rgba(255, 181, 71, .42); border-radius: 14px;
  background: linear-gradient(150deg, rgba(255, 181, 71, .14), rgba(15, 23, 42, .3));
  padding: 13px 14px; margin: 0 0 14px;
}
.claim-first-block.is-empty { border-color: var(--border-c); background: var(--bg-panel-2); }
.claim-first-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 800; color: var(--text-main); }
.claim-first-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 7px; border-radius: 11px; background: var(--primary); color: #fff;
  font-family: var(--font-num); font-size: 12px; font-weight: 800;
}
.claim-first-total { margin-left: auto; font-family: var(--font-num); font-size: 13px; font-weight: 800; color: var(--accent); }
.claim-first-sub { font-size: 11.5px; color: var(--text-sub); font-weight: 600; }
.claim-first-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.claim-first-actions .btn { flex: 1 1 200px; }
.claim-first-list { display: grid; gap: 8px; margin-top: 10px; }
.claim-first-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px;
  border: 1px solid rgba(255, 181, 71, .3); background: rgba(15, 23, 42, .45);
}
.claim-first-item-name { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.claim-first-item-desc { font-size: 11px; color: var(--text-sub); }
.claim-first-item-reward { margin-left: auto; font-family: var(--font-num); font-size: 12.5px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.claim-first-empty { font-size: 12.5px; color: var(--text-sub); }
/* 진행 정보는 보조로 내린다 */
.is-secondary-info { opacity: .92; }
.secondary-info-title { margin: 16px 0 8px; font-size: 12.5px; font-weight: 800; color: var(--text-3); letter-spacing: .3px; }

/* ---------- ⑮ 출석: 오늘 받을 보상 카드 ---------- */
.att-today-card {
  display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-radius: 14px;
  border: 1px solid var(--border-c); background: var(--bg-panel-2); margin-bottom: 14px;
}
.att-today-card.is-ready { border-color: rgba(77, 214, 138, .5); background: linear-gradient(150deg, rgba(77, 214, 138, .15), rgba(15, 23, 42, .3)); }
.att-today-card.is-done { opacity: .8; }
.att-today-ico { font-size: 30px; line-height: 1; }
.att-today-body { min-width: 0; flex: 1 1 auto; }
.att-today-title { font-size: 14.5px; font-weight: 800; color: var(--text-main); }
.att-today-reward { margin-top: 3px; font-family: var(--font-num); font-size: 17px; font-weight: 800; color: var(--accent); }
.att-today-sub { margin-top: 3px; font-size: 11.5px; color: var(--text-sub); }
.att-today-card .att-today-btn { flex: 0 0 auto; }

/* ---------- ⑫ FA 시장: 요약 + 필터 ---------- */
.fa-summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.fa-sum-card { border: 1px solid var(--border-c); border-radius: 12px; background: var(--bg-panel-2); padding: 10px 11px; }
.fa-sum-lbl { font-size: 11px; color: var(--text-3); font-weight: 700; }
.fa-sum-val { margin-top: 3px; font-family: var(--font-num); font-size: 19px; font-weight: 800; color: var(--text-main); letter-spacing: -.4px; }
.fa-sum-val.is-accent { color: var(--accent); }
.fa-sum-val.is-green { color: var(--green); }
.fa-sum-sub { margin-top: 2px; font-size: 10.5px; color: var(--text-sub); }
.fa-filter-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 12px; }
.fa-chip {
  border: 1px solid var(--border-c); background: var(--chip-bg); color: var(--text-sub);
  border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.fa-chip:hover { color: var(--text-main); border-color: rgba(148, 163, 184, .4); }
.fa-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.fa-filter-note { margin-left: auto; font-size: 11px; color: var(--text-3); }

/* ---------- ⑬ 시즌: 진행 요약 고정 헤드 ---------- */
.season-sticky-head {
  position: sticky; top: 0; z-index: 20; margin: 0 0 12px;
  border: 1px solid var(--border-c); border-radius: 14px; padding: 11px 13px;
  background: rgba(15, 23, 42, .93); backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
}
.season-sh-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.season-sh-title { font-size: 13.5px; font-weight: 800; color: var(--text-main); }
.season-sh-rank { margin-left: auto; font-family: var(--font-num); font-size: 13px; font-weight: 800; color: var(--accent); }
.season-sh-bar { height: 6px; border-radius: 3px; background: rgba(148, 163, 184, .18); overflow: hidden; margin: 9px 0 7px; }
.season-sh-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #22d3ee, #4dd68a); transition: width .3s ease; }
.season-sh-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.season-sh-chip {
  border: 1px solid var(--border-c); background: var(--chip-bg); border-radius: 999px;
  padding: 4px 9px; font-size: 11px; font-weight: 700; color: var(--text-sub);
}
.season-sh-chip.is-ok { border-color: rgba(77, 214, 138, .45); color: var(--green); background: rgba(77, 214, 138, .1); }
.season-sh-next { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--text-main); }
.season-sh-next b { color: var(--accent); }

/* ---------- ⑯ PvP: 3단계 흐름 표시 ---------- */
.pvp-step-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.pvp-step {
  border: 1px solid var(--border-c); border-radius: 12px; background: var(--bg-panel-2);
  padding: 10px 11px; text-align: left;
}
.pvp-step.is-active { border-color: var(--primary); background: rgba(255, 45, 74, .12); box-shadow: 0 0 0 1px rgba(255, 45, 74, .28) inset; }
.pvp-step.is-done { border-color: rgba(77, 214, 138, .45); background: rgba(77, 214, 138, .1); }
.pvp-step-num { font-family: var(--font-num); font-size: 11px; font-weight: 800; color: var(--text-3); }
.pvp-step.is-active .pvp-step-num { color: var(--primary); }
.pvp-step.is-done .pvp-step-num { color: var(--green); }
.pvp-step-label { margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--text-main); }
.pvp-step-desc { margin-top: 2px; font-size: 10.5px; color: var(--text-sub); }

@media (max-width: 720px) {
  .reward-burst-card { padding: 20px 24px; }
  .reward-burst-emoji { font-size: 36px; }
  .reward-burst-amount { font-size: 24px; }
  .claim-first-block { padding: 11px 11px; margin-bottom: 11px; }
  .claim-first-head { font-size: 12.5px; }
  .claim-first-total { margin-left: 0; width: 100%; }
  .claim-first-actions .btn { flex: 1 1 100%; }
  .claim-first-item { flex-wrap: wrap; gap: 6px; }
  .claim-first-item-reward { margin-left: 0; }
  .att-today-card { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .att-today-card .att-today-btn { flex: 1 1 100%; }
  .fa-summary-row { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .fa-sum-val { font-size: 17px; }
  .fa-filter-note { display: none; }
  .season-sticky-head { padding: 10px 11px; }
  .season-sh-title { font-size: 12.5px; }
  .season-sh-rank { margin-left: 0; }
  .pvp-step-flow { gap: 6px; }
  .pvp-step { padding: 8px 7px; }
  .pvp-step-label { font-size: 11px; }
  .pvp-step-desc { display: none; }
}


/* ==================== [2] BROADCAST 시안 오버라이드 (홈·핵심 컴포넌트) ==================== */

/* ========================================================================
   시안 A — BROADCAST
   스포츠 방송 그래픽(ESPN Gameday · MLB Statcast) 감성.
   딥 미드나잇 + 크림슨 레드 + 시안 데이터라이트 + 라이트닝 옐로.
   원본 style.css를 베이스로 얹는 오버라이드 레이어.
   ------------------------------------------------------------------------
   원칙:
   - :root 토큰 재정의 (색·폰트·라디우스·그림자)
   - 홈 · 로그인 · 카드 · 탭 · 버튼 · 히어로 시각 재설계
   - 상태 클래스 (.hidden, .is-stage-hidden 등) display:none !important 보존
   - id/data-* 이름 손대지 않음
   ======================================================================== */

/* ---------------------------------------------------------
   1. 폰트 로딩 (Anton · IBM Plex Mono · Bebas Neue)
   🔧 2026-08-02 이식 시 수정: 이 위치의 @import 는 앞선 4,500여 줄의
   스타일 규칙 뒤에 있어 CSS 스펙상 브라우저가 무시한다(@import 는
   @charset/@layer 를 제외한 모든 규칙보다 앞에 있어야 유효).
   그 결과 Anton / JetBrains Mono 가 로드되지 않고 폴백 폰트가
   사용되어 시안 의도가 깨졌다. → 파일 최상단 @import 블록으로 이동.
--------------------------------------------------------- */

/* ---------------------------------------------------------
   2. 토큰 재정의 (기본 팔레트 = "crimson")
--------------------------------------------------------- */
:root, body {
  /* 배경 */
  --bg-dark: #04070d;
  --bg-panel: rgba(14, 22, 40, 0.88);
  --bg-panel-2: rgba(20, 32, 56, 0.92);
  --bg-input: rgba(8, 14, 28, 0.82);
  --chip-bg: rgba(255, 255, 255, 0.045);
  --border-c: rgba(90, 140, 210, 0.22);

  /* 포인트 */
  --primary: #ff1f3d;
  --primary-dark: #b8081e;
  --primary-soft: rgba(255, 31, 61, 0.16);
  --accent: #ffcc29;          /* 라이트닝 옐로 */
  --accent-bg: #ffd85c;
  --grass: #22e58a;
  --green: #22e58a;
  --red: #ff5e78;
  --cyan: #29d8ff;             /* 데이터 시안 */

  /* 텍스트 */
  --text-main: #f2f6ff;
  --text-sub: #96a6c8;
  --text-3: #64749a;
  --text-4: #3b476a;

  /* 등급 */
  --grade-normal: #7c8aab;
  --grade-rare: #22e58a;
  --grade-hero: #4a9fff;
  --grade-legend: #b56cff;
  --grade-transcendence: #ff1f3d;
  --grade-transcendence-2: #b8081e;

  /* 타이포 */
  --font-display: 'Pretendard', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-num: 'Anton', 'Bebas Neue', 'Oswald', sans-serif;

  /* 형태 */
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;

  /* 그림자 */
  --shadow-card:
    0 10px 30px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-glow-red:
    0 0 32px rgba(255, 31, 61, 0.55),
    0 0 64px rgba(255, 31, 61, 0.20);
  --shadow-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------
   3. 팔레트 스왑 (data-palette="…" on body)
--------------------------------------------------------- */
body[data-palette="cobalt"] {
  --primary: #2f7bff;
  --primary-dark: #1543b8;
  --primary-soft: rgba(47, 123, 255, 0.16);
  --accent: #29d8ff;
  --accent-bg: #6ee5ff;
  --grade-transcendence: #2f7bff;
  --grade-transcendence-2: #1543b8;
}
body[data-palette="emerald"] {
  --primary: #1fc27e;
  --primary-dark: #0a6644;
  --primary-soft: rgba(31, 194, 126, 0.16);
  --accent: #f6e05e;
  --accent-bg: #ffee88;
  --grade-transcendence: #1fc27e;
  --grade-transcendence-2: #0a6644;
}
body[data-palette="neon"] {
  --primary: #ff00a8;
  --primary-dark: #a10068;
  --primary-soft: rgba(255, 0, 168, 0.18);
  --accent: #b8ff00;
  --accent-bg: #d6ff5a;
  --cyan: #00e0ff;
  --grade-transcendence: #ff00a8;
  --grade-transcendence-2: #a10068;
}
body[data-palette="mono"] {
  --primary: #f0f2ff;
  --primary-dark: #8f96b8;
  --primary-soft: rgba(240, 242, 255, 0.10);
  --accent: #ffcc29;
  --accent-bg: #ffe27a;
  --grade-transcendence: #f0f2ff;
  --grade-transcendence-2: #8f96b8;
}

/* ---------------------------------------------------------
   4. 밀도 스왑 (data-density="…")
--------------------------------------------------------- */
body[data-density="compact"] { --_pad: 12px; --_gap: 10px; }
body[data-density="standard"]{ --_pad: 16px; --_gap: 14px; }
body[data-density="airy"]    { --_pad: 22px; --_gap: 20px; }
body { --_pad: 16px; --_gap: 14px; }

/* ---------------------------------------------------------
   5. 배경 재설계 — 스타디움 스포트라이트 + 데이터 그리드
--------------------------------------------------------- */
.bg-fx {
  background:
    radial-gradient(ellipse 1400px 700px at 50% -20%, rgba(255, 31, 61, 0.22), transparent 55%),
    radial-gradient(ellipse 900px 600px at 15% 100%, rgba(41, 216, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 800px 500px at 90% 90%, rgba(255, 204, 41, 0.06), transparent 60%),
    linear-gradient(180deg, #060c1a 0%, #04070d 100%);
}
.bg-fx::after {
  background-image:
    linear-gradient(rgba(90, 140, 210, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 140, 210, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 25%, transparent 85%);
}
.stadium-glow-1 {
  top: -10%; left: -10%;
  background: radial-gradient(ellipse at center, rgba(255, 31, 61, 0.18), transparent 65%);
  animation: bcast-lamp 8s ease-in-out infinite alternate;
}
.stadium-glow-2 {
  top: -5%; right: -8%;
  background: radial-gradient(ellipse at center, rgba(41, 216, 255, 0.10), transparent 65%);
  animation: bcast-lamp 9s ease-in-out infinite alternate-reverse;
}
@keyframes bcast-lamp {
  0%   { opacity: 0.8; transform: translateX(0); }
  100% { opacity: 1;   transform: translateX(20px); }
}
body[data-motion="off"] .stadium-glow-1,
body[data-motion="off"] .stadium-glow-2 { animation: none !important; }

/* ---------------------------------------------------------
   6. 로그인 — "ON AIR" 방송 카드 느낌
--------------------------------------------------------- */
.login-frame {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 31, 61, 0.35);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 31, 61, 0.15) inset,
    var(--shadow-glow-red);
  position: relative;
  overflow: hidden;
}
.login-frame::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--cyan) 100%);
  z-index: 3;
}
.login-visual {
  background:
    radial-gradient(ellipse 500px 300px at 30% 20%, rgba(255, 204, 41, 0.14), transparent 60%),
    linear-gradient(155deg, #1a0409 0%, var(--primary-dark) 45%, #2a0208 100%);
  position: relative;
}
.login-visual::before {
  content: 'ON AIR · CH ⚾';
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
  color: #fff;
  padding: 4px 10px;
  background: var(--primary);
  border-radius: 2px;
  z-index: 2;
  box-shadow: 0 0 20px rgba(255, 31, 61, 0.7);
  animation: bcast-blink 1.6s ease-in-out infinite;
}
@keyframes bcast-blink {
  0%, 60% { opacity: 1; }
  70%, 90% { opacity: 0.35; }
  100% { opacity: 1; }
}
body[data-motion="off"] .login-visual::before { animation: none; }
.login-visual::after {
  background:
    radial-gradient(ellipse 600px 400px at 20% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    repeating-linear-gradient(-45deg, transparent 0 20px, rgba(255, 255, 255, 0.02) 20px 22px);
}
.login-visual-mark {
  font-size: 56px; margin-bottom: 4px;
  filter: drop-shadow(0 0 22px rgba(255, 204, 41, 0.7));
}
.login-visual-title {
  font-family: var(--font-num); font-weight: 400;
  font-size: 42px; letter-spacing: 0.02em; line-height: 0.95;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 31, 61, 0.35);
  margin: 0 0 14px;
}
.login-visual-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
.login-visual-list li::before { content: '▸'; color: var(--accent); font-weight: 900; }
.login-visual-list li {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 0 6px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.login-visual-foot {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.login-card {
  background:
    linear-gradient(180deg, rgba(20, 32, 56, 0.98), rgba(10, 16, 30, 0.98));
  border-left: 1px solid rgba(255, 31, 61, 0.15);
}
.login-title {
  font-family: var(--font-num); font-weight: 400;
  font-size: 30px; letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-main);
  margin: 4px 0 4px;
}
.login-title::before {
  content: '⚾ ';
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 900;
}
.login-sub {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub);
}
.field-group label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
}
.field-group input, .field-group select {
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-left: 2px solid rgba(41, 216, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 13px 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field-group input:focus, .field-group select:focus {
  border-color: var(--primary);
  border-left-color: var(--primary);
  background: rgba(255, 31, 61, 0.06);
  box-shadow: 0 0 0 3px var(--primary-soft), 0 0 20px rgba(255, 31, 61, 0.2);
}

/* ---------------------------------------------------------
   7. 버튼 — 각진 스포츠 버튼
--------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 13px 22px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .5s ease;
  pointer-events: none;
}
.btn:hover::after { transform: translateX(100%); }
body[data-motion="off"] .btn::after { display: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: rgba(255, 31, 61, 0.6);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255, 31, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 31, 61, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 32px rgba(255, 31, 61, 0.4);
}
.btn-outline {
  background: transparent;
  border: 1px solid rgba(150, 166, 200, 0.4);
  color: var(--text-main);
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.btn-accent {
  background: linear-gradient(180deg, var(--accent) 0%, #d99919 100%);
  color: #1a0f00;
  border-color: rgba(255, 204, 41, 0.7);
  box-shadow: 0 4px 16px rgba(255, 204, 41, 0.35);
}
.btn-danger {
  background: linear-gradient(180deg, #ff3860 0%, #a1071e 100%);
  color: #fff;
  border-color: rgba(255, 56, 96, 0.6);
}
.btn-block { width: 100%; }

/* ---------------------------------------------------------
   8. 패널 · 카드 — 방송용 두꺼운 프레임
--------------------------------------------------------- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  backdrop-filter: blur(6px);
}
.panel-sub {
  background: var(--bg-panel);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}
.panel-sub::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--primary) 0%, transparent 70%);
  opacity: 0.7;
}

.panel-title {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-main);
  padding-bottom: 12px;
  margin-bottom: 16px;
  position: relative;
  border-bottom: 1px solid var(--border-c);
  display: flex; align-items: center; gap: 10px;
}
.panel-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 20px;
  background: var(--primary);
  box-shadow: 0 0 12px rgba(255, 31, 61, 0.6);
  margin-right: 2px;
  vertical-align: middle;
}
.panel-title::after { display: none; } /* 원본의 언더라인 장식 제거 */
.panel-title .sub-action {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
  margin-left: auto;
}

/* ---------------------------------------------------------
   9. 히어로 — 스코어보드 스타일
--------------------------------------------------------- */
.hero-visual {
  background:
    linear-gradient(135deg, rgba(255, 31, 61, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, rgba(20, 32, 56, 0.95), rgba(10, 16, 30, 0.98)),
    radial-gradient(ellipse 800px 400px at 100% 0%, rgba(41, 216, 255, 0.10), transparent 60%);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  padding: 32px 34px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  min-height: 172px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-visual::before {
  /* 상단 컬러바 */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 40%, var(--cyan) 100%);
  z-index: 2;
}
.hero-visual::after {
  /* 우측 대각 텍스처 */
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 240px;
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(255, 31, 61, 0.06) 12px 14px);
  mask-image: linear-gradient(90deg, transparent 0%, black 40%);
  pointer-events: none;
}
.hero-visual .stadium-lines {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, transparent 49.5%, rgba(255, 255, 255, 0.04) 50%, transparent 50.5%),
    linear-gradient(180deg, transparent 0%, transparent 49.5%, rgba(255, 255, 255, 0.03) 50%, transparent 50.5%);
  pointer-events: none;
}
.hero-visual .hero-title {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-main);
  margin: 0;
  position: relative; z-index: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.hero-visual .hero-title .accent {
  color: var(--primary);
  text-shadow: 0 0 24px rgba(255, 31, 61, 0.65);
}
.hero-visual .hero-sub {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-top: 12px;
  position: relative; z-index: 1;
}
.hero-visual .hero-sub::before {
  content: '● LIVE  ·  ';
  color: var(--primary);
  animation: bcast-blink 1.6s ease-in-out infinite;
  font-weight: 900;
}
body[data-motion="off"] .hero-visual .hero-sub::before { animation: none; }

/* ---------------------------------------------------------
   10. Quick Action 카드 (홈 CTA 5개) — 카드 전체 클릭 유지
--------------------------------------------------------- */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--_gap);
  margin-bottom: 22px;
}
.qa-card {
  /* button 초기화만 button.qa-card 로 스코프 */
  position: relative;
  background: linear-gradient(180deg, rgba(20, 32, 56, 0.9) 0%, rgba(10, 16, 30, 0.95) 100%);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-md);
  padding: 20px 18px 18px;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  overflow: hidden;
  transition: transform .12s ease, border-color .15s ease, box-shadow .2s ease;
  cursor: pointer;
}
button.qa-card {
  appearance: none;
  color: inherit;
  font: inherit;
}
.qa-card::before {
  /* 상단 컬러바 */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--border-c);
  transition: background .15s ease, height .15s ease;
}
.qa-card::after {
  /* 우측 방송 코너 텍스처 */
  content: '';
  position: absolute; top: 0; right: 0; width: 80px; height: 80px;
  background:
    linear-gradient(135deg, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
}
.qa-card > * { pointer-events: none; }  /* 원본 유지 (제거 금지 지정) */
.qa-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 31, 61, 0.5);
  box-shadow: 0 12px 32px rgba(255, 31, 61, 0.2), 0 0 0 1px rgba(255, 31, 61, 0.3) inset;
}
.qa-card:hover::before {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  height: 3px;
}
.qa-card.hot {
  background:
    linear-gradient(135deg, rgba(255, 31, 61, 0.28) 0%, rgba(139, 8, 30, 0.6) 100%),
    linear-gradient(180deg, rgba(20, 32, 56, 0.9), rgba(10, 16, 30, 0.95));
  border-color: rgba(255, 31, 61, 0.6);
  box-shadow: 0 8px 24px rgba(255, 31, 61, 0.25);
}
.qa-card.hot::before {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  height: 3px;
}
.qa-card.hot::after {
  background:
    repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, 0.1) 6px 7px);
  mask-image: linear-gradient(135deg, black 0%, transparent 60%);
  width: 100px; height: 100px;
}

.qa-card .qa-icon {
  width: 42px; height: 42px;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.qa-card.hot .qa-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(255, 31, 61, 0.6);
}
.qa-card .qa-title {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-main);
  line-height: 1;
  margin-top: 8px;
}
.qa-card .qa-desc {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-top: 6px;
  line-height: 1.4;
}
.qa-card .qa-cta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
  margin-top: auto;
  padding-top: 8px;
}
.qa-card.hot .qa-cta { color: var(--accent); text-shadow: 0 0 10px rgba(255, 204, 41, 0.5); }

/* 보상 카드 특수 처리 */
.qa-card-reward {
  background:
    linear-gradient(135deg, rgba(255, 204, 41, 0.16) 0%, rgba(255, 31, 61, 0.10) 100%),
    linear-gradient(180deg, rgba(20, 32, 56, 0.9), rgba(10, 16, 30, 0.95));
  border-color: rgba(255, 204, 41, 0.4);
}
.qa-card-reward::before {
  background: linear-gradient(90deg, var(--accent), var(--primary));
  height: 3px;
}
.qa-card-reward .qa-icon {
  background: linear-gradient(135deg, var(--accent), #d99919);
  border-color: rgba(255, 204, 41, 0.5);
  box-shadow: 0 0 20px rgba(255, 204, 41, 0.55);
}
.qa-card-reward .qa-title { color: var(--accent); }
.qa-card-reward .qa-cta { color: var(--accent); }
.qa-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  box-shadow: 0 0 12px rgba(255, 31, 61, 0.6);
}

/* ---------------------------------------------------------
   11. 홈 fold divider — 방송 티커
--------------------------------------------------------- */
.home-fold-divider {
  margin: 26px 0 20px;
  padding: 10px 16px;
  background:
    linear-gradient(90deg, rgba(255, 31, 61, 0.14) 0%, transparent 40%, transparent 60%, rgba(41, 216, 255, 0.10) 100%);
  border-top: 1px solid rgba(255, 31, 61, 0.3);
  border-bottom: 1px solid rgba(41, 216, 255, 0.2);
  position: relative;
  display: flex; align-items: center;
}
.home-fold-divider::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--primary);
  border-radius: 50%;
  margin-right: 12px;
  box-shadow: 0 0 12px rgba(255, 31, 61, 0.8);
  animation: bcast-blink 1.6s ease-in-out infinite;
}
body[data-motion="off"] .home-fold-divider::before { animation: none; }
.home-fold-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-sub);
}
.home-fold-label::after {
  content: ' · SECTION B · SUPPORT DATA';
  color: var(--text-3);
  letter-spacing: 0.22em;
  font-weight: 600;
}

/* ---------------------------------------------------------
   12. 홈 통계 카드 — 스코어보드 그리드
--------------------------------------------------------- */
.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.home-stat-card {
  background:
    linear-gradient(180deg, rgba(28, 42, 70, 0.6) 0%, rgba(14, 22, 40, 0.8) 100%);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  padding: 12px 14px 14px;
  position: relative;
  overflow: hidden;
}
.home-stat-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--cyan);
  opacity: 0.6;
}
.home-stat-card:nth-child(2)::before { background: var(--primary); }
.home-stat-card:nth-child(3)::before { background: var(--accent); }
.home-stat-card:nth-child(4)::before { background: var(--grass); }
.home-stat-card .stat-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sub);
  font-weight: 700;
  margin-bottom: 6px;
}
.big-num {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--text-main);
  line-height: 1;
  font-feature-settings: 'tnum';
}
.big-num.gold {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255, 204, 41, 0.5);
}
.big-num.red {
  color: var(--primary);
  text-shadow: 0 0 24px rgba(255, 31, 61, 0.55);
}

/* ---------------------------------------------------------
   13. 진행 막대 (미션/출석/업적) — 스탯 바 스타일
--------------------------------------------------------- */
.mission-progress-bar,
.attendance-progress-bar,
.achievement-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.mission-progress-fill,
.attendance-progress-fill,
.achievement-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  box-shadow: 0 0 12px rgba(255, 31, 61, 0.5);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.mission-progress-fill::after,
.attendance-progress-fill::after,
.achievement-progress-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255, 255, 255, 0.15) 8px 10px);
  animation: bcast-stripes 1.4s linear infinite;
}
@keyframes bcast-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}
body[data-motion="off"] .mission-progress-fill::after,
body[data-motion="off"] .attendance-progress-fill::after,
body[data-motion="off"] .achievement-progress-fill::after { animation: none; }

/* ---------------------------------------------------------
   14. 홈 출석 위젯
--------------------------------------------------------- */
.home-attendance-today {
  background: linear-gradient(135deg, rgba(255, 204, 41, 0.10), rgba(255, 31, 61, 0.06));
  border: 1px solid rgba(255, 204, 41, 0.3);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px;
}
.home-att-day-badge {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 22px;
  color: var(--accent);
  padding: 8px 14px;
  background: rgba(255, 204, 41, 0.12);
  border: 1px solid rgba(255, 204, 41, 0.35);
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  text-shadow: 0 0 14px rgba(255, 204, 41, 0.5);
  line-height: 1;
}
.home-att-reward {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-main);
  font-weight: 600;
}
.home-att-claim-btn {
  width: 100%;
  margin-top: 4px;
}
.home-att-next {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 10px;
}

/* ---------------------------------------------------------
   15. 탭·칩·필터
--------------------------------------------------------- */
.tabbar {
  display: inline-flex;
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.tabbar .tab {
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-sub);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .12s, background .12s;
  white-space: nowrap;
}
.tabbar .tab:hover { color: var(--text-main); }
.tabbar .tab.active,
.tabbar .tab.is-active {
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 31, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.filter-chip,
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: var(--chip-bg);
  border: 1px solid var(--border-c);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  transition: all .12s;
}
.filter-chip:hover, .chip:hover { color: var(--text-main); border-color: rgba(255, 255, 255, 0.2); }
.filter-chip.active, .filter-chip.is-active,
.chip.active, .chip.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 12px rgba(255, 31, 61, 0.3);
}

/* ---------------------------------------------------------
   16. 헤더 · 사이드바
--------------------------------------------------------- */
.header {
  background:
    linear-gradient(180deg, rgba(14, 22, 40, 0.96) 0%, rgba(14, 22, 40, 0.85) 100%);
  border-bottom: 1px solid rgba(255, 31, 61, 0.3);
  backdrop-filter: blur(12px);
  position: relative;
}
.header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, transparent 20%, transparent 80%, var(--cyan) 100%);
}

/* ---------------------------------------------------------
   17. 선수 카드 — 방송용 스탯 카드 스타일
   (구조 유지: .player-card > .pcard > .inner ...)
--------------------------------------------------------- */
.player-card {
  border-radius: var(--radius-md);
  transition: transform .15s ease, box-shadow .2s ease;
}
.player-card:hover { transform: translateY(-3px); }
.pcard {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pcard.grade-normal      { --ovr-border: #7c8aab; }
.pcard.grade-rare        { --ovr-border: #22e58a; }
.pcard.grade-hero        { --ovr-border: #4a9fff; }
.pcard.grade-legend      { --ovr-border: #b56cff; }
.pcard.grade-transcendence { --ovr-border: #ff1f3d; }

.pcard .frame {
  position: absolute; inset: 0;
  border: 2px solid var(--ovr-border);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.4),
    0 0 24px color-mix(in oklab, var(--ovr-border) 30%, transparent);
  pointer-events: none;
  z-index: 4;
}
.pcard .inner {
  position: relative;
  aspect-ratio: 3 / 4.2;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--ovr-border) 22%, #0a1224) 0%,
    #05080f 65%);
}
.pcard .bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, color-mix(in oklab, var(--ovr-border) 35%, transparent), transparent 60%),
    repeating-linear-gradient(-45deg, transparent 0 20px, rgba(255, 255, 255, 0.02) 20px 22px);
}
.pcard .team-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--ovr-border);
  box-shadow: 0 0 14px currentColor;
}
.pcard .ovr {
  position: absolute; top: 14px; left: 12px;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  z-index: 3;
  line-height: 0.9;
}
.pcard .pos {
  position: absolute; top: 60px; left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ovr-border);
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--ovr-border);
  border-radius: 2px;
  z-index: 3;
  text-transform: uppercase;
}
.pcard .stars {
  position: absolute; top: 14px; right: 12px;
  font-size: 12px;
  color: var(--accent);
  z-index: 3;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(255, 204, 41, 0.6);
}
.pcard .lv {
  position: absolute; top: 34px; right: 12px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  z-index: 3;
}
.pcard .name-box {
  position: absolute; bottom: 68px; left: 12px; right: 12px;
  z-index: 3;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  border-left: 3px solid var(--ovr-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pcard .name-box .nm {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.01em;
}
.pcard .name-box .sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-top: 2px;
}
.pcard .stats {
  position: absolute; bottom: 8px; left: 8px; right: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.55);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pcard .stats .cell {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 2px 0;
}
.pcard .stats .cell .lbl {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
}
.pcard .stats .cell .val {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 15px;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

/* 등급별 홀로그램 오버레이 */
.pcard.grade-legend .bg::after,
.pcard.grade-transcendence .bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    color-mix(in oklab, var(--ovr-border) 20%, transparent) 45%,
    transparent 55%,
    color-mix(in oklab, var(--ovr-border) 15%, transparent) 70%,
    transparent 85%);
  mix-blend-mode: overlay;
  animation: bcast-holo 6s linear infinite;
  pointer-events: none;
}
@keyframes bcast-holo {
  0% { transform: translateX(-30%); }
  100% { transform: translateX(30%); }
}
body[data-motion="off"] .pcard.grade-legend .bg::after,
body[data-motion="off"] .pcard.grade-transcendence .bg::after { animation: none; }

/* ---------------------------------------------------------
   18. 스크롤바 · selection
--------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::selection { background: var(--primary); color: #fff; }

/* ---------------------------------------------------------
   19. 상태 클래스 — 절대 손대지 말라는 것을 다시 못박음
--------------------------------------------------------- */
.hidden { display: none !important; }
.is-stage-hidden { display: none !important; }
.is-step-hidden  { display: none !important; }

/* ---------------------------------------------------------
   20. 모션 강도 옵션
--------------------------------------------------------- */
body[data-motion="cinematic"] .qa-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 20px 60px rgba(255, 31, 61, 0.35),
    0 0 0 1px var(--primary) inset,
    0 0 80px rgba(255, 31, 61, 0.25);
}
body[data-motion="cinematic"] .pcard:hover { transform: translateY(-6px) rotateX(4deg); }
body[data-motion="off"] * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }

/* ---------------------------------------------------------
   21. 반응형 — 모바일에서도 방송 톤 유지
--------------------------------------------------------- */
@media (max-width: 720px) {
  .hero-visual { padding: 20px 20px; min-height: 132px; }
  .hero-visual .hero-title { font-size: 26px; }
  .hero-visual .hero-sub { font-size: 10px; }
  .qa-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .qa-card { min-height: 118px; padding: 14px 12px 12px; }
  .qa-card .qa-title { font-size: 17px; }
  .qa-card .qa-icon { width: 34px; height: 34px; font-size: 16px; }
  /* 5번째 카드(보상)만 전폭 */
  .qa-card:nth-child(5) { grid-column: 1 / -1; }
  .panel-title { font-size: 16px; }
  .home-fold-divider { padding: 8px 12px; margin: 20px 0 14px; }
  .home-fold-label { font-size: 9.5px; }
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .big-num { font-size: 24px; }
}


/* ==================== [3] BROADCAST 확장 오버라이드 (26개 화면 특수 컴포넌트) ==================== */

/* ========================================================================
   시안 A · BROADCAST — 26개 화면 확장 오버라이드
   ------------------------------------------------------------------------
   overrides.css의 기본 홈/컴포넌트 스타일에 이어서
   나머지 화면(로스터·라인업·트레이드·초월·기록·도감·업적·출석·
   PvP·시즌·강화·정밀·미션·랭킹·선물함·업데이트안내·뽑기·관리자)의
   특수 컴포넌트를 방송그래픽 톤에 맞춰 재조정한다.

   원칙:
   - id / data-* / 상태 클래스 이름은 그대로 유지
   - .hidden / .is-stage-hidden / .is-step-hidden 은 display:none !important 유지
   - .qa-card > * { pointer-events:none } 제거 금지 (원본에 있음)
   ======================================================================== */

/* ============================================================
   앱 셸 · 사이드바 · 헤더
   ============================================================ */
.app-shell {
  background: transparent;
}
.header {
  padding: 12px 22px;
}
.header .logo {
  font-family: var(--font-num);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 20px;
  color: var(--text-main);
}
.header .logo .k {
  color: var(--primary);
  text-shadow: 0 0 12px rgba(255, 31, 61, 0.5);
}
.header .header-team-info,
.header .avatar,
.header .header-user {
  font-family: var(--font-mono);
}
.header-team-info { letter-spacing: 0.08em; }

/* 좌측 사이드바 메뉴 */
.side-nav,
.sidebar,
.left-nav {
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.95), rgba(4, 7, 13, 0.95));
  border-right: 1px solid var(--border-c);
}
.tab-btn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  transition: all .15s;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
}
.tab-btn:hover {
  background: rgba(255, 31, 61, 0.08);
  color: var(--text-main);
}
.tab-btn.active,
.tab-btn.is-active {
  background: linear-gradient(90deg, rgba(255, 31, 61, 0.2) 0%, transparent 80%);
  border-left-color: var(--primary);
  color: var(--primary);
  text-shadow: 0 0 8px rgba(255, 31, 61, 0.4);
}
.tab-btn-has-news::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 6px;
  box-shadow: 0 0 8px rgba(255, 204, 41, 0.7);
  animation: bcast-blink 1.6s ease-in-out infinite;
  vertical-align: middle;
}
body[data-motion="off"] .tab-btn-has-news::after { animation: none; }

/* ============================================================
   선수단 (roster) · 방출/판매 (manage) · FA 시장 (fa)
   → 필터바 · bulk 바 · 카드 그리드
   ============================================================ */
.filter-bar-wrap {
  gap: 12px;
  align-items: center;
}
.filter-inline-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  font-weight: 700;
}
.filter-chip-select {
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  color: var(--text-main);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.search {
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .15s;
}
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 12.5px;
  min-width: 200px;
}
.search input::placeholder {
  color: var(--text-4);
  letter-spacing: 0.06em;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.roster-bulk-bar {
  background:
    linear-gradient(180deg, rgba(255, 31, 61, 0.18), rgba(139, 8, 30, 0.35)),
    var(--bg-panel);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 20px rgba(255, 31, 61, 0.3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 12px;
}
.roster-bulk-bar-actions { margin-left: auto; display: flex; gap: 8px; }
.roster-bulk-cost-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-num);
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.roster-select-all-row {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sub);
  cursor: pointer;
  margin: 4px 0 12px;
}
.sub-tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  margin-left: 4px;
  color: var(--text-sub);
  letter-spacing: 0.02em;
}
.tab.active .sub-tab-count,
.tab.is-active .sub-tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.player-price {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 0.02em;
}
.condition-row { padding: 6px 0; }
.condition-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.condition-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--grass), var(--accent));
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.condition-fill.low {
  background: linear-gradient(90deg, var(--red), var(--primary));
}
.lineup-badge, .injury-badge {
  display: inline-flex;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-c);
  color: var(--text-sub);
}
.lineup-badge { background: rgba(41, 216, 255, 0.14); border-color: rgba(41, 216, 255, 0.4); color: var(--cyan); }
.injury-badge { background: rgba(255, 45, 74, 0.14); border-color: rgba(255, 31, 61, 0.4); color: var(--red); }

/* ============================================================
   경기 (match) · 정밀경기 (precision) · 브로드캐스트 로그
   ============================================================ */
.broadcast-box {
  background: linear-gradient(180deg, #05080f 0%, #0a1224 100%);
  border: 1px solid var(--border-c);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  position: relative;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
}
.broadcast-box::before {
  content: '● LIVE FEED';
  position: absolute;
  top: -1px; right: 12px;
  padding: 3px 10px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 4px 12px rgba(255, 31, 61, 0.4);
}
.broadcast-log {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-main);
}
.broadcast-line {
  padding: 6px 8px;
  border-left: 2px solid transparent;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
  letter-spacing: 0.02em;
}
.broadcast-line:hover { border-left-color: var(--accent); background: rgba(255, 204, 41, 0.04); }

/* 정밀경기 단계 */
.precision-step,
.pvp-step,
.trade-step {
  display: flex; flex-direction: column;
  padding: 12px 14px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  position: relative;
  transition: all .15s;
}
.precision-step.is-active,
.pvp-step.is-active,
.trade-step.is-active {
  background: linear-gradient(180deg, rgba(255, 31, 61, 0.18), rgba(20, 32, 56, 0.9));
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(255, 31, 61, 0.3);
}
.precision-step.is-done,
.pvp-step.is-done,
.trade-step.is-done {
  opacity: 0.7;
  border-color: var(--grass);
}
.precision-step .step-num,
.pvp-step .step-num,
.trade-step .step-num,
.pvp-step-label {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--primary);
  line-height: 1;
}
.pvp-step-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-main);
}
.pvp-step-desc {
  font-family: var(--font-body, var(--font-display));
  font-size: 11.5px;
  color: var(--text-sub);
  margin-top: 4px;
  line-height: 1.4;
}
.pvp-step.is-active .pvp-step-label { color: var(--primary); }
.pvp-step-flow {
  display: flex; gap: 8px;
  margin-bottom: 16px;
}

/* ============================================================
   시즌 (season) · 랭킹 (ranking)
   ============================================================ */
.season-sticky-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background:
    linear-gradient(180deg, rgba(255, 31, 61, 0.14) 0%, rgba(14, 22, 40, 0.98) 100%),
    var(--bg-panel);
  border: 1px solid rgba(255, 31, 61, 0.4);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 31, 61, 0.1);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.season-sh-title {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-main);
}
.season-sh-rank {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 32px;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-shadow: 0 0 20px rgba(255, 204, 41, 0.4);
}

.champion-banner {
  background:
    linear-gradient(135deg, var(--accent) 0%, #d99919 60%, var(--primary) 100%);
  color: #1a0a00;
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  box-shadow: 0 12px 40px rgba(255, 204, 41, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}
.champion-banner::before {
  content: '🏆';
  font-size: 40px;
  margin-right: 12px;
  vertical-align: middle;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.champion-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(255, 255, 255, 0.08) 12px 14px);
  pointer-events: none;
}

/* ============================================================
   업적 (achievement) · 도감 (playerCollection, teamCollection)
   ============================================================ */
.ach-toolbar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
}
.achievement-summary-box,
.ach-sum-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.achievement-grid,
.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.achievement-card {
  background:
    linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: all .15s;
  position: relative;
  overflow: hidden;
}
.achievement-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--border-c);
  transition: background .15s;
}
.achievement-card:hover { transform: translateY(-2px); border-color: rgba(255, 31, 61, 0.3); }
.achievement-card.is-ready::before { background: linear-gradient(180deg, var(--accent), var(--primary)); }
.achievement-card.is-ready {
  border-color: rgba(255, 204, 41, 0.4);
  background: linear-gradient(180deg, rgba(255, 204, 41, 0.10), var(--bg-panel-2));
  box-shadow: 0 4px 20px rgba(255, 204, 41, 0.15);
}
.achievement-icon { font-size: 22px; margin-bottom: 6px; }
.achievement-name {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 4px;
}
.achievement-desc {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.45;
  margin-bottom: 8px;
}
.achievement-reward {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 0.02em;
}
.achievement-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-sub);
}
.achievement-claim-all-bar {
  background: linear-gradient(90deg, rgba(255, 204, 41, 0.16), rgba(255, 31, 61, 0.14));
  border: 1px solid rgba(255, 204, 41, 0.4);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(255, 204, 41, 0.15);
}
.ach-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ach-chip {
  padding: 6px 12px;
  background: var(--chip-bg);
  border: 1px solid var(--border-c);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
}
.ach-chip.active, .ach-chip.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.ach-sort-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ach-sort-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  font-weight: 700;
}
.ach-sort-select {
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  color: var(--text-main);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* 수령 우선 블록 */
.claim-first-block {
  background:
    linear-gradient(180deg, rgba(255, 204, 41, 0.14) 0%, rgba(255, 31, 61, 0.08) 100%),
    var(--bg-panel);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(255, 204, 41, 0.18), 0 0 0 1px rgba(255, 204, 41, 0.3) inset;
}
.claim-first-block::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
}
.claim-first-block.is-empty {
  background: var(--bg-panel-2);
  border-color: var(--border-c);
  box-shadow: none;
}
.claim-first-block.is-empty::before { background: var(--border-c); }
.claim-first-head {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-main);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.claim-first-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  font-weight: 600;
  margin-bottom: 14px;
}
.claim-first-count {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 22px;
  padding: 2px 12px;
  background: rgba(255, 204, 41, 0.14);
  border: 1px solid rgba(255, 204, 41, 0.4);
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}
.claim-first-total {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 20px;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(255, 204, 41, 0.4);
  margin-left: auto;
}
.claim-first-list {
  display: flex; flex-direction: column; gap: 8px;
  margin: 12px 0;
}
.claim-first-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
}
.claim-first-item-name {
  font-family: var(--font-num);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text-main);
}
.claim-first-item-desc {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 2px;
}
.claim-first-item-reward {
  margin-left: auto;
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 0.02em;
}
.claim-first-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.claim-first-actions {
  display: flex; gap: 8px;
  margin-top: 12px;
}

/* ============================================================
   출석 (attendance)
   ============================================================ */
.att-today-card {
  background:
    linear-gradient(150deg, rgba(255, 204, 41, 0.16), rgba(20, 32, 56, 0.9));
  border: 2px solid rgba(255, 204, 41, 0.4);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
  box-shadow: 0 8px 30px rgba(255, 204, 41, 0.18);
  position: relative;
  overflow: hidden;
}
.att-today-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}
.att-today-card.is-ready {
  border-color: rgba(77, 214, 138, .5);
  background: linear-gradient(150deg, rgba(77, 214, 138, .18), rgba(15, 23, 42, .8));
}
.att-today-card.is-ready::before { background: linear-gradient(90deg, var(--grass), var(--accent)); }
.att-today-card.is-done { opacity: 0.6; }
.att-today-card.is-done::before { background: var(--border-c); }
.att-today-ico {
  font-size: 38px;
  filter: drop-shadow(0 4px 12px rgba(255, 204, 41, 0.4));
  animation: bcast-att-pulse 2.4s ease-in-out infinite;
}
@keyframes bcast-att-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
body[data-motion="off"] .att-today-ico { animation: none; }
.att-today-card.is-done .att-today-ico { animation: none; opacity: 0.5; }
.att-today-body { flex: 1; }
.att-today-title {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-main);
  line-height: 1;
}
.att-today-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-top: 6px;
}
.att-today-reward {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 18px;
  letter-spacing: 0.02em;
  margin-top: 6px;
}
.att-today-btn { padding: 12px 24px; }

.attendance-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-c);
}
.attendance-progress {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.attendance-progress-count {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 20px;
  letter-spacing: 0.02em;
}
.attendance-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.att-day {
  aspect-ratio: 1;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  padding: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-sub);
  position: relative;
}
.att-day.is-done {
  background: linear-gradient(160deg, rgba(77, 214, 138, 0.2), var(--bg-panel-2));
  border-color: var(--grass);
  color: var(--grass);
}
.att-day.is-ready {
  background: linear-gradient(160deg, rgba(255, 204, 41, 0.2), var(--bg-panel-2));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(255, 204, 41, 0.4);
  animation: bcast-att-pulse 2s ease-in-out infinite;
}
body[data-motion="off"] .att-day.is-ready { animation: none; }
.att-day .att-cell,
.att-day .att-reward {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
}
.att-badge {
  position: absolute; top: 2px; right: 3px;
  font-size: 10px;
}
.att-check {
  color: var(--grass);
  font-size: 14px;
}

/* ============================================================
   FA 시장 (fa)
   ============================================================ */
.fa-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.fa-sum-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  position: relative;
}
.fa-sum-card:nth-child(2) { border-left-color: var(--accent); }
.fa-sum-card:nth-child(3) { border-left-color: var(--grass); }
.fa-sum-card:nth-child(4) { border-left-color: var(--primary); }
.fa-sum-card .stat-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sub);
  font-weight: 700;
  margin-bottom: 6px;
}
.fa-sum-val {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

/* ============================================================
   뽑기 (gacha)
   ============================================================ */
.gacha-hero {
  background:
    radial-gradient(ellipse 700px 400px at 50% 30%, rgba(255, 31, 61, 0.24), transparent 60%),
    linear-gradient(180deg, #1a0409 0%, var(--bg-panel) 100%);
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(255, 31, 61, 0.3),
    inset 0 0 60px rgba(255, 31, 61, 0.1);
}
.gacha-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
}
.gacha-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(255, 31, 61, 0.03) 20px 22px);
  pointer-events: none;
  animation: bcast-gacha-stripes 30s linear infinite;
}
@keyframes bcast-gacha-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}
body[data-motion="off"] .gacha-hero::after { animation: none; }

/* ============================================================
   보상 수령 폭발 연출 (reward-burst) — 유지 + 강화
   ============================================================ */
.reward-burst {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  background: rgba(4, 7, 13, 0.85);
  backdrop-filter: blur(8px);
}
.reward-burst-card {
  background:
    radial-gradient(ellipse 500px 300px at 50% 30%, rgba(255, 204, 41, 0.25), transparent 70%),
    linear-gradient(180deg, var(--bg-panel), var(--bg-dark));
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 32px 40px;
  text-align: center;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 100px rgba(255, 204, 41, 0.4),
    0 0 0 1px rgba(255, 204, 41, 0.5) inset;
  position: relative;
  overflow: hidden;
  min-width: 280px;
}
.reward-burst-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
}
.reward-burst-emoji {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 16px rgba(255, 204, 41, 0.6));
}
.reward-burst-amount {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 40px;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-shadow: 0 0 30px rgba(255, 204, 41, 0.6);
  line-height: 1;
}
.reward-burst-label {
  margin-top: 10px;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-main);
}
.reward-burst-sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
}

/* ============================================================
   업데이트 안내 · 패치노트
   ============================================================ */
.home-update-notice-panel[open] .home-collapsible-summary {
  border-bottom: 1px solid var(--border-c);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

/* ============================================================
   관리자 (admin)
   ============================================================ */
.admin-shell { background: var(--bg-dark); }
.admin-header {
  background: linear-gradient(180deg, rgba(255, 31, 61, 0.1), rgba(14, 22, 40, 0.95));
  border-bottom: 1px solid rgba(255, 31, 61, 0.3);
  padding: 14px 22px;
}
.admin-header-title {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-main);
}
.admin-header-title::before {
  content: '⚙️ ADMIN · ';
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  margin-right: 8px;
  vertical-align: middle;
}
.admin-panel,
.admin-settings-category-box {
  background: var(--bg-panel);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-md);
  padding: 20px;
}
.admin-panel-title,
.admin-settings-category-title {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-main);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-c);
  display: flex; align-items: center; gap: 8px;
}
.admin-panel-title::before,
.admin-settings-category-title::before {
  content: '';
  width: 3px; height: 16px;
  background: var(--primary);
  display: inline-block;
}
.admin-tab-btn {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-sub);
  cursor: pointer;
  transition: all .12s;
}
.admin-tab-btn:hover { color: var(--text-main); }
.admin-tab-btn.active,
.admin-tab-btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* ============================================================
   진행 막대 라벨 텍스트
   ============================================================ */
.mission-progress-bar-wrap,
.achievement-progress-bar-wrap,
.attendance-progress-progress-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}

/* 홈 next-games-strip */
.next-games-strip {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border-c);
  margin-top: 4px;
}
.next-games-strip .next-game {
  padding: 8px 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-sub);
}

/* 미션 리스트 */
.mission-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--border-c);
  margin-bottom: 6px;
  transition: all .12s;
}
.mission-item.is-done { opacity: 0.6; border-left-color: var(--grass); }
.mission-item.is-ready { border-left-color: var(--accent); background: rgba(255, 204, 41, 0.06); }
.mission-item-name {
  font-family: var(--font-body, var(--font-display));
  font-size: 12.5px;
  color: var(--text-main);
  flex: 1;
}
.mission-item-reward {
  font-family: var(--font-num);
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* home 미션 프로그레스 태그 */
.home-mission-foot {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  padding-top: 10px;
  margin-top: 4px;
}

/* ============================================================
   접기 패널 (details)
   ============================================================ */
.panel-info {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-left: 2px solid var(--cyan);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
}
.panel-info summary {
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyan);
  list-style: none;
}
.panel-info summary::-webkit-details-marker { display: none; }
.panel-info[open] summary { border-bottom: 1px solid var(--border-c); }
.panel-info-body {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.55;
}
.panel-info-body b { color: var(--text-main); font-weight: 700; }

/* home-collapsible-panel: 데스크톱은 항상 펼침 (원본 동작 유지) */
.home-collapsible-panel[open] .home-collapsible-hint { display: none; }
@media (min-width: 721px) {
  .home-collapsible-panel .home-collapsible-summary::-webkit-details-marker { display: none; }
  .home-collapsible-hint { display: none; }
}

/* ============================================================
   빈 상태 (empty-state)
   ============================================================ */
.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ============================================================
   테이블 (log-card-list, ranking, stats, match-log)
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-panel-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
table thead th {
  background: rgba(255, 31, 61, 0.12);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 31, 61, 0.3);
}
table tbody td {
  padding: 10px 12px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-c);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
table tbody tr:hover td { background: rgba(255, 31, 61, 0.06); }
table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   랭킹 카드 리스트 (mobile card-view)
   ============================================================ */
.ranking-card-list, .log-card-list, .match-card-list {
  display: flex; flex-direction: column; gap: 8px;
}
.ranking-card-detail,
.log-card-list > *,
.match-card-list > * {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-left: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

/* ============================================================
   ⚠️ 이름 고정 · 상태 클래스 재확인 (마지막에 다시 못박음)
   ============================================================ */
.hidden { display: none !important; }
.is-stage-hidden { display: none !important; }
.is-step-hidden  { display: none !important; }

/* ============================================================
   모바일 리뷰 (720px 이하)
   ============================================================ */
@media (max-width: 720px) {
  .hero-visual { padding: 20px 20px; min-height: 132px; }
  .hero-visual .hero-title { font-size: 26px; }
  .hero-visual::after { display: none; }

  .qa-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .qa-card { min-height: 118px; padding: 14px 12px 12px; }
  .qa-card .qa-title { font-size: 17px; }
  .qa-card .qa-icon { width: 34px; height: 34px; font-size: 16px; }
  .qa-card:nth-child(5) { grid-column: 1 / -1; }

  .home-fold-divider { padding: 8px 12px; margin: 20px 0 14px; }
  .home-fold-label { font-size: 9.5px; }
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .big-num { font-size: 24px; }

  .season-sticky-head { padding: 12px 14px; }
  .season-sh-title { font-size: 16px; }
  .season-sh-rank { font-size: 24px; margin-left: 0; width: 100%; }

  .fa-summary-row { grid-template-columns: repeat(2, 1fr); }
  .fa-sum-val { font-size: 17px; }

  .attendance-grid { grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .att-day { font-size: 9.5px; }

  .achievement-grid, .codex-grid {
    grid-template-columns: 1fr;
  }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .broadcast-box { padding: 12px 14px; }
  .broadcast-log { max-height: 240px; font-size: 11.5px; }

  .champion-banner { font-size: 18px; padding: 16px 18px; }
  .champion-banner::before { font-size: 28px; margin-right: 8px; }

  .claim-first-block { padding: 14px 16px; }
  .claim-first-head { font-size: 15px; }
  .claim-first-total { margin-left: 0; width: 100%; }
  .claim-first-actions .btn { flex: 1 1 100%; }

  .att-today-card { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .att-today-card .att-today-btn { flex: 1 1 100%; margin-top: 4px; }
  .att-today-title { font-size: 18px; }

  .reward-burst-card { padding: 24px 28px; }
  .reward-burst-emoji { font-size: 40px; }
  .reward-burst-amount { font-size: 32px; }
  .reward-burst-label { font-size: 17px; }

  .roster-bulk-bar { flex-wrap: wrap; }
  .roster-bulk-bar-actions { width: 100%; margin-left: 0; }

  .pvp-step-flow { gap: 6px; }
  .pvp-step { padding: 8px 10px; }
  .pvp-step-label { font-size: 11px; }
  .pvp-step-desc { display: none; }

  .panel { padding: 16px; }
  .panel-title { font-size: 16px; }
  .panel-title::before { width: 3px; height: 16px; }

  .filter-bar-wrap { gap: 8px; }
  .filter-inline-label { font-size: 10px; }
  .search input { min-width: 140px; }

  .admin-header { padding: 12px 16px; }
  .admin-header-title { font-size: 18px; }
  .admin-header-title::before { display: block; margin-bottom: 4px; margin-right: 0; }
}

/* 극소형 (380px 이하) */
@media (max-width: 380px) {
  .hero-visual .hero-title { font-size: 22px; }
  .qa-card .qa-title { font-size: 15px; }
  .qa-card .qa-desc { display: none; }
  .fa-summary-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}


/* ==================== [4] QA 리포트 대응 (2026-08-02, v2.1.0) ====================
   외부 QA 리포트(QA-001~006)의 확인된 결함을 고친다. 리뉴얼 오버라이드([2]/[3])보다
   뒤에 두어야 확실히 적용되므로 파일 맨 끝에 배치한다(소스 순서 트랩 회피). */

/* ---------- [QA-002] 토스트 레이어 분리 ----------
   원인: .toast 배경이 var(--bg-panel) = rgba(14,22,40,.88) 로 반투명이라, 화면 상단에
   떠 있는 알림 뒤로 헤더/히어로 글자가 그대로 비쳐 "알림과 배경이 섞여" 읽혔다.
   또 z-index 999 는 .modal-overlay(1100)보다 낮아 팝업이 열린 상태의 토스트가 가려졌다. */
#toast-container { z-index: 1200; }
.toast {
  background: #0e1628;
  border-color: rgba(122, 150, 200, 0.32);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* ---------- [QA-003] 모바일 홈 수치 잘림 / 어색한 줄바꿈 ----------
   원인: #home-stats-grid 를 모바일에서 4열로 강제(카드 폭 68px)해 두었는데, 리뉴얼 시안은
   2열(.home-stats-grid { repeat(2,1fr) })을 의도했다. id 선택자 우선순위가 높아 시안 규칙이
   무시되고 4열이 유지되면서, 자금이 커지면(예: 1,234.5억원) 말줄임표로 잘렸다. */
@media (max-width: 720px) {
  #home-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #home-stats-grid .home-stat-card { padding: 10px 12px 11px; text-align: left; min-width: 0; }
  #home-stats-grid .home-stat-card .stat-lbl { font-size: 9px; letter-spacing: 0.1em; }
  #home-stats-grid .home-stat-card .big-num {
    font-size: clamp(15px, 4.6vw, 21px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
  }
  /* 한국어는 어절 단위로 끊어야 자연스럽다. keep-all 이 없으면 "정규시즌부터 한국시/리즈까지"
     처럼 낱말 중간에서 잘린다. 카드 높이도 2줄 기준으로 맞춰 CTA 카드끼리 어긋나지 않게 한다. */
  .qa-card .qa-title, .qa-card .qa-desc, .qa-card .qa-cta {
    word-break: keep-all; overflow-wrap: break-word;
  }
  /* line-height 가 1.4em 이므로 2줄분(2.8em)을 확보해야 1줄짜리와 2줄짜리 설명의
     카드 높이가 정확히 같아진다(2.4em 이면 2줄 설명만 29px 로 튀어나온다). */
  .qa-card .qa-desc { line-height: 1.4; min-height: 2.8em; }

  /* 🩹 QA-003 추가 발견(2026-08-02): 리뉴얼에서 .home-fold-label::after 로 붙인
     ' · SECTION B · SUPPORT DATA' 접미사가 flex:none + white-space:nowrap 인 라벨을
     390px 화면에서 3px 넘치게 만들어, 모바일 홈에 가로 스크롤(scrollWidth 393)이
     생겨 있었다. 좁은 화면에서는 접미사를 떼고 라벨이 줄어들 수 있게 한다. */
  .home-fold-label {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
    letter-spacing: 0.12em;
  }
  .home-fold-label::after { content: ''; }
}
/* 「수령 가능한 보상」 제목 뒤 건수 배지가 글자에 붙어 "보상5"처럼 읽히던 문제 */
.qa-card .qa-title .qa-badge { margin-left: 6px; }

/* ---------- [QA-004] 모바일 더보기 시트 레이어 분리 ----------
   원인: .modal-overlay 공용 딤(rgba(20,22,28,.55))을 그대로 써서 뒤 홈 화면이 강하게 비쳤고,
   배경 스크롤도 잠기지 않아 시트 위에서 스크롤하면 뒤 화면이 함께 움직였다. */
#more-tab-sheet-overlay {
  background: rgba(2, 5, 11, 0.86);
  -webkit-backdrop-filter: blur(10px) saturate(0.65);
  backdrop-filter: blur(10px) saturate(0.65);
}
.more-tab-sheet { box-shadow: 0 -20px 52px rgba(0, 0, 0, 0.62); }
html.sheet-open, body.sheet-open { overflow: hidden !important; }

/* ---------- [QA-006] 업데이트 안내 검색 / 종류 필터 ---------- */
.pn-board-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 12px 14px;
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
}
.pn-search-input {
  flex: 1 1 220px; min-width: 0; padding: 9px 12px;
  background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  color: var(--text-main); font-size: 13px; font-family: inherit;
}
.pn-search-input::placeholder { color: var(--text-4); }
.pn-search-input:focus { outline: none; border-color: var(--primary); }
.pn-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-filter-chip {
  padding: 7px 12px; border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-sub);
  font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.pn-filter-chip:hover { color: var(--text-main); border-color: rgba(255, 255, 255, 0.22); }
.pn-filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pn-filter-result {
  flex: 1 0 100%; font-size: 11.5px; color: var(--text-3);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .pn-board-filter { padding: 10px 12px; }
  .pn-search-input { flex: 1 0 100%; }
}


/* ==================== [5] 모바일 사용성 제보 대응 (2026-08-02, v2.2.0) ====================
   사용자 제보: ① 모바일 선수단 카드가 금색 덩어리로만 보임 ② 트레이드 4단계가 한꺼번에 나옴
   ③ 모바일 기록에 정렬 기능이 없음 ④ 랭킹이 승수 한 가지로만 나옴.
   ①②는 v2.0.0 리뉴얼 이식 과정의 선택자 충돌이 원인이라 여기서 되돌린다. */

/* ---------- [M-001] 선수 카드가 등급 그라데이션에 완전히 가려지던 문제 ----------
   원인: 리뉴얼이 .pcard .frame 을 "테두리 링"으로 재정의하면서 z-index 를 1 → 4 로 올렸는데,
   기존 .pcard.grade-* .frame 에는 카드 전체를 채우는 등급 그라데이션 배경이 남아 있었다.
   그 결과 프레임이 OVR·이름·능력치 위에 통째로 덮여 금색(전설) 판만 보였다.
   → 등급 배경을 걷어내고 리뉴얼이 의도한 네온 테두리만 남긴다. */
.pcard.grade-normal .frame,
.pcard.grade-rare .frame,
.pcard.grade-hero .frame,
.pcard.grade-legend .frame,
.pcard.grade-transcendence .frame {
  background: none;
  padding: 0;
  animation: none;
}
/* 초월 등급의 무지개 회전 프레임은 배경을 지우면 사라지므로, 테두리 색이 순환하는 네온으로 대체한다. */
.pcard.grade-transcendence .frame { animation: bcast-transcend-ring 4.5s linear infinite; }
@keyframes bcast-transcend-ring {
  0%   { border-color: #ff1f3d; box-shadow: inset 0 0 40px rgba(0,0,0,0.4), 0 0 22px rgba(255,31,61,0.55); }
  33%  { border-color: #ffcc29; box-shadow: inset 0 0 40px rgba(0,0,0,0.4), 0 0 22px rgba(255,204,41,0.55); }
  66%  { border-color: #b56cff; box-shadow: inset 0 0 40px rgba(0,0,0,0.4), 0 0 22px rgba(181,108,255,0.55); }
  100% { border-color: #ff1f3d; box-shadow: inset 0 0 40px rgba(0,0,0,0.4), 0 0 22px rgba(255,31,61,0.55); }
}
body[data-motion="off"] .pcard.grade-transcendence .frame { animation: none; }
/* 리뉴얼이 .inner 를 position:relative + aspect-ratio:3/4.2 로 바꿨는데 .pcard 는 3/4 그대로여서
   카드 아래 20px(능력치 줄 일부)이 잘려 나갔다. 두 값을 맞추고 .inner 는 카드에 꽉 채운다. */
.pcard { aspect-ratio: 3 / 4.2; }
.pcard .inner { position: absolute; inset: 0; aspect-ratio: auto; }

/* ---------- [M-002] 모바일 트레이드에서 4단계가 동시에 노출되던 문제 ----------
   원인: 리뉴얼이 정밀경기 단계 칩 스타일을 만들면서 .trade-step 을 같은 그룹에 넣어
   display:flex 를 걸었다. 트레이드의 .trade-step 은 "칩"이 아니라 위저드 단계 패널이라,
   모바일 전용 .trade-step{display:none} 규칙(같은 특정도·앞쪽 선언)이 밀려 전부 펼쳐졌다. */
@media (max-width: 720px) {
  #trade-compose .trade-step { display: none; }
  #trade-compose .trade-step.active { display: flex; flex-direction: column; animation: fadeInStep 0.25s ease; }
}

/* ---------- [M-003] 모바일 기록 정렬 바 ----------
   데스크톱은 표 머리글(th) 클릭으로 정렬하지만, 모바일에서는 표가 카드 리스트로 바뀌어
   정렬 수단 자체가 없었다. 표 머리글을 그대로 읽어 만든 정렬 바를 협폭에서만 노출한다. */
.mobile-sort-bar { display: none; }
@media (max-width: 720px) {
  .mobile-sort-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 10px; padding: 9px 11px;
    background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
  }
  .msb-label {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.14em; color: var(--text-3); text-transform: uppercase;
  }
  .msb-select {
    flex: 1 1 120px; min-width: 0; padding: 8px 10px;
    background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
    color: var(--text-main); font-size: 13px; font-family: inherit; font-weight: 700;
  }
  .msb-select:focus { outline: none; border-color: var(--primary); }
  .msb-dir {
    flex: 0 0 auto; padding: 8px 12px;
    background: transparent; border: 1px solid var(--border-c); border-radius: var(--radius-sm);
    color: var(--text-sub); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
  }
  .msb-dir:hover { color: var(--text-main); border-color: rgba(255,255,255,0.22); }
  .msb-dir.is-asc { color: var(--cyan); border-color: rgba(41,216,255,0.45); }
}

/* ---------- [M-004] 랭킹 기준 선택 ---------- */
.ranking-sort-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 11px 13px;
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
}
.ranking-sort-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--text-3); text-transform: uppercase;
}
.ranking-sort-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ranking-sort-chip {
  padding: 7px 12px; border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-sub);
  font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.ranking-sort-chip:hover { color: var(--text-main); border-color: rgba(255,255,255,0.22); }
.ranking-sort-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ranking-card-metric-lbl {
  display: block; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; color: var(--text-4); text-transform: uppercase;
}
@media (max-width: 720px) {
  .ranking-sort-row { padding: 10px 12px; }
  .ranking-sort-chips { width: 100%; }
  .ranking-sort-chip { flex: 1 1 30%; text-align: center; }
}

/* ==================== [6] 카드 레이아웃 정리 + 타이포그래피 교체 (2026-08-02, v2.3.0) ====================
   모바일 제보 2차: "카드 안이 이렇게 보인다 + 전체적으로 폰트가 투박하다".
   실측(390px / 2열 460px)으로 확인한 원인만 정확히 짚어서 고친다.
   ------------------------------------------------------------------------------------------ */

/* ---------- [A-001] 리뉴얼이 원본 절대배치 오프셋을 초기화하지 않아 카드 요소 박스가 늘어나던 문제 ----------
   섹션 [2] 리뉴얼은 .ovr/.pos/.stars/.lv 위치를 top/left/right 로만 다시 잡았는데,
   섹션 [1] 원본이 지정해 둔 반대편 오프셋(bottom / right / left)이 그대로 남아
   "over-constrained" 상태가 되면서 실제 렌더 박스가 아래처럼 늘어났다(390px 실측).
     .stars  12x14 → 282x322      .lv  40x15 → 58x302
     .pos    33x19 → 33x167       .ovr 60x36 → 280x36
   → .pos 는 배경/테두리가 있어 이름칸까지 내려오는 세로 막대로 보였고,
     .stars 는 우측 상단이 아니라 좌측 상단(OVR 옆)에 붙어 보였다.
   해결: 리뉴얼이 쓰지 않는 반대편 오프셋을 auto 로 되돌린다. */
.pcard .ovr   { right: auto; bottom: auto; }
.pcard .pos   { right: auto; bottom: auto; }
.pcard .stars { left: auto; bottom: auto; text-align: right; }
.pcard .lv    { left: auto; bottom: auto; text-align: right; }

/* ---------- [A-002] 등급 배지(초월/전설)와 OVR 숫자가 좌측 상단에서 28x13 겹치던 문제 ----------
   리뉴얼이 OVR 을 우측 상단 → 좌측 상단으로 옮기면서 원본 등급 배지 자리와 충돌했다.
   → 좌측 열 = OVR + 포지션 / 우측 열 = 등급 + 성급 + 강화레벨 로 분리한다. */
.pcard .badge-tl {
  top: 12px; right: 12px; left: auto;
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: 0.02em; padding: 3px 8px;
  border-radius: var(--radius-sm); z-index: 3;
}
.pcard .stars { top: 34px; right: 12px; }
.pcard .lv    { top: 52px; right: 12px; }

/* ---------- [A-003] 이름 / 부제 / 능력치 라벨이 좁은 카드에서 한 글자만 다음 줄로 떨어지던 문제 ----------
   부제(.sub)는 JetBrains Mono + letter-spacing 0.14em + uppercase 였는데, 한글에는 그 서체가
   없어 시스템 monospace 로 떨어지고 자간까지 넓어져 "LG · 초월 · ✅팀컬러" 가 넘쳐 "러" 한 글자만
   다음 줄로 내려갔다. → 한글 서체로 통일 + 자간 정상화 + 넘치면 말줄임. */
.pcard .name-box .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .name-box .sub {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.01em; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard .stats .cell .lbl {
  font-family: var(--font-display); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- [A-004] 카드 아래 실용 영역(.pc-extra) 높이가 카드마다 달라 행이 들쭉날쭉하던 문제 ----------
   선수마다 라인업 배지 / 부상 / 치료 버튼 유무가 달라 내용 높이가 다른 것 자체는 정상이지만,
   그 때문에 "선택" 체크박스 줄까지 카드마다 다른 높이에 놓여 그리드 정렬이 깨져 보였다.
   → 카드를 세로 플렉스로 만들어 선택 줄을 항상 카드 바닥에 고정한다. */
.card-grid .player-card { display: flex; flex-direction: column; }
.card-grid .player-card .pc-extra { flex: 1 1 auto; display: flex; flex-direction: column; }
.card-grid .player-card .player-card-select-row { margin-top: auto; }

/* ---------- [A-005] 가격이 "31.4억원 (기본 1.4억 / 원)" 처럼 토큰 중간에서 잘리던 문제 ---------- */
.player-price { white-space: nowrap; }
.player-price span { display: block; margin-top: 2px; font-size: 0.78em; white-space: nowrap; }

/* ---------- [A-006] 카드 버튼(치료 / 구단 변경)이 좁은 카드에서 글자 단위로 줄바뀌던 문제 ---------- */
@media (max-width: 720px) {
  .card-grid .player-card .card-btn-row { flex-direction: column; }
  .card-grid .player-card .card-btn-row .btn { width: 100%; white-space: nowrap; }
}

/* ---------- [A-007] 카드 2열 구간(421~720px) 컴팩트 스케일 ----------
   리뉴얼 카드 내부 수치는 폭 300px(데스크톱) 기준 고정 px 이라 폭 180px 남짓한 2열 카드에서
   요소가 서로 밀착됐다. 2열 구간에서만 비례 축소한다. */
@media (min-width: 421px) and (max-width: 720px) {
  .pcard .ovr { font-size: 30px; top: 11px; left: 10px; }
  .pcard .pos { top: 48px; left: 10px; font-size: 9px; letter-spacing: 0.06em; padding: 2px 6px; }
  .pcard .badge-tl { top: 10px; right: 9px; font-size: 8.5px; padding: 2px 6px; }
  .pcard .stars { top: 29px; right: 9px; font-size: 9px; letter-spacing: 0; }
  .pcard .lv { top: 44px; right: 9px; font-size: 9px; }
  .pcard .name-box { bottom: 56px; left: 8px; right: 8px; padding: 5px 8px; }
  .pcard .name-box .nm { font-size: 13px; }
  .pcard .name-box .sub { font-size: 8.5px; }
  .pcard .stats { left: 6px; right: 6px; bottom: 6px; padding: 5px 3px; gap: 1px; }
  .pcard .stats .cell { padding: 1px 0; }
  .pcard .stats .cell .lbl { font-size: 7.5px; }
  .pcard .stats .cell .val { font-size: 13px; }
  .card-grid .player-card { padding: 9px; }
  .pc-extra { padding: 8px 10px 10px; }
  .player-price { font-size: 13.5px; }
}

/* ---------- [A-008] FA 시장처럼 아주 좁은 카드(≈130px)용 초컴팩트 스케일 ---------- */
.fa-market-grid .pcard .ovr { font-size: 24px; top: 9px; left: 8px; }
.fa-market-grid .pcard .pos { top: 38px; left: 8px; font-size: 8px; padding: 1px 5px; letter-spacing: 0.04em; }
.fa-market-grid .pcard .badge-tl { top: 8px; right: 7px; font-size: 8px; padding: 1px 5px; }
.fa-market-grid .pcard .stars { top: 24px; right: 7px; font-size: 7.5px; letter-spacing: 0; }
.fa-market-grid .pcard .lv { top: 36px; right: 7px; font-size: 8px; }
.fa-market-grid .pcard .name-box { bottom: 48px; left: 6px; right: 6px; padding: 4px 6px; }
.fa-market-grid .pcard .name-box .nm { font-size: 11.5px; }
.fa-market-grid .pcard .name-box .sub { font-size: 7.5px; }
.fa-market-grid .pcard .stats { left: 4px; right: 4px; bottom: 4px; padding: 4px 2px; gap: 1px; }
.fa-market-grid .pcard .stats .cell .lbl { font-size: 6.5px; }
.fa-market-grid .pcard .stats .cell .val { font-size: 11px; }

/* ---------- [A-101] 타이포그래피 교체 ----------
   기존: 숫자/디스플레이 = Anton(초굵은 콘덴스드 포스터체), 라벨 = JetBrains Mono.
   두 서체 모두 한글 글리프가 없어 한글은 generic sans-serif / monospace 로 떨어졌고,
   한 줄 안에 서로 다른 3~4종이 섞여 투박하고 옛날 인쇄물 같은 인상을 줬다.
   → ① 모든 폰트 스택 끝에 Pretendard 를 넣어 한글을 한 서체로 통일
      ② 큰 숫자 전용 서체 Anton → Bebas Neue(방송 스코어보드 계열, 이미 로드 중)로 교체
      ③ 한글이 섞이는 수치(가격/자금/OVR 태그 등)는 Pretendard 800 + 고정폭 숫자로 통일 */
:root, body {
  --font-display: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Pretendard', ui-monospace, monospace;
  --font-num: 'Bebas Neue', 'Oswald', 'Pretendard', sans-serif;
  --font-data: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
}
body { font-family: var(--font-display); }
.mono, .num, .use-num-font { font-feature-settings: 'tnum'; }

/* 한글 + 숫자가 섞이는 수치 텍스트는 Pretendard 로 통일 (콘덴스드 숫자 + 시스템 한글 혼용 제거) */
.player-price,
.stat-chip b,
.big-num,
.overall-tag, .overall-tag b,
.enhance-stat-row b,
.rank-num,
.res-val,
.mission .mi-reward,
.log-card-reward,
.roster-bulk-cost-chip,
.msb-label,
.ranking-sort-label,
.ranking-card-money,
.match-arena-status-text {
  font-family: var(--font-data);
  font-weight: 800;
  font-feature-settings: 'tnum';
  letter-spacing: 0;
}
.pcard .stats .cell .val {
  font-family: var(--font-data);
  font-weight: 800;
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
}

/* ---------- [A-201] 시즌 순위표 "1위와의 게임차(GB)" 열 (2026-08-02, v2.4.0) ---------- */
.season-gb {
  font-family: var(--font-data); font-weight: 800; font-feature-settings: 'tnum';
  color: var(--accent); white-space: nowrap;
}
.season-gb.is-lead { color: var(--text-4); font-weight: 700; }
#season-standings-body tr.me .season-gb { color: var(--cyan); }

/* ==================== [7] 신규 유저 온보딩: 시작 가이드 · 게임 가이드 탭 · 환영 모달 (2026-08-02, v2.5.0) ====================
   사용자 제보: "처음 회원가입하고 어떤걸 해야 하는지 잘 모르는거 같아 신규유저 가이드라인과 따라하기 같은거 만들어줄래?"
   UX 방향 문서의 "홈은 행동판" 원칙을 지키기 위해, 홈에는 «다음 할 일 1개»만 크게 보여주는 압축 블록을 두고
   전체 8단계와 긴 설명은 별도의 「📖 게임 가이드」 탭으로 분리했다(기능 추가가 아니라 기능 구조화). */

/* ---------- 홈 상단 「시작 가이드」 블록 ---------- */
.onboard-card {
  position: relative;
  margin: 0 0 16px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, rgba(255, 204, 41, 0.10), var(--bg-panel-2));
  border: 1px solid rgba(255, 204, 41, 0.34);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.onboard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.onboard-title {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--text-main); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onboard-count {
  flex: 0 0 auto;
  font-family: var(--font-data); font-weight: 800; font-size: 11.5px;
  font-feature-settings: 'tnum';
  color: var(--accent); background: rgba(255, 204, 41, 0.12);
  border: 1px solid rgba(255, 204, 41, 0.3);
  border-radius: var(--radius-sm); padding: 3px 8px; white-space: nowrap;
}
.onboard-close-btn {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  background: transparent; border: 1px solid var(--border-c);
  border-radius: var(--radius-sm); color: var(--text-3);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.onboard-close-btn:hover { color: var(--text-main); border-color: var(--text-3); }

.onboard-bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.07); margin-bottom: 12px;
}
.onboard-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  transition: width 0.35s ease;
}

.onboard-next {
  display: block; width: 100%; text-align: left;
  padding: 13px 14px; margin: 0 0 12px;
  background: var(--bg-input);
  border: 1px solid rgba(255, 204, 41, 0.3);
  border-radius: var(--radius-md);
  cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.onboard-next:hover { border-color: var(--accent); transform: translateY(-1px); }
.onboard-next > * { pointer-events: none; display: block; }
.onboard-next-step {
  font-family: var(--font-num); font-size: 11px; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 3px;
}
.onboard-next-title {
  font-family: var(--font-display); font-weight: 800; font-size: 15.5px;
  color: var(--text-main); line-height: 1.3; margin-bottom: 4px;
}
.onboard-next-desc {
  font-size: 12px; color: var(--text-sub); line-height: 1.45; margin-bottom: 8px;
}
.onboard-next-cta { font-size: 12px; font-weight: 700; color: var(--cyan); }

.onboard-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.onboard-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: 10.5px; font-weight: 800;
  color: var(--text-4); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-c);
}
.onboard-dot.is-done { color: #04070d; background: var(--grade-rare); border-color: var(--grade-rare); }
.onboard-dot.is-next { color: #04070d; background: var(--accent); border-color: var(--accent); }

.onboard-more-btn {
  display: block; width: 100%; padding: 8px 10px;
  background: transparent; border: 1px dashed var(--border-c);
  border-radius: var(--radius-sm); color: var(--text-sub);
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.onboard-more-btn:hover { color: var(--text-main); border-color: var(--text-3); }

/* ---------- 📖 게임 가이드 탭 ---------- */
.guide-hero {
  padding: 16px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(41, 216, 255, 0.08), var(--bg-panel-2));
  border: 1px solid var(--border-c); border-left: 3px solid var(--cyan);
  border-radius: var(--radius-lg);
}
.guide-hero-title {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  color: var(--text-main); margin-bottom: 6px;
}
.guide-hero-desc { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-sub); }
.guide-hero-desc b { color: var(--text-main); }

.guide-bar {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.07); margin: 0 0 14px;
}
.guide-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--grade-rare), var(--cyan));
  transition: width 0.35s ease;
}

.guide-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.guide-step {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; background: var(--bg-panel);
  border: 1px solid var(--border-c); border-radius: var(--radius-md);
  cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.guide-step:hover { border-color: var(--text-3); background: var(--bg-panel-2); }
.guide-step > * { pointer-events: none; }
.guide-step.is-next { border-color: var(--accent); background: rgba(255, 204, 41, 0.07); }
.guide-step.is-done { opacity: 0.72; }
.gs-no {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-weight: 800; font-size: 12.5px;
  color: var(--text-3); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-c);
}
.guide-step.is-done .gs-no { color: #04070d; background: var(--grade-rare); border-color: var(--grade-rare); }
.guide-step.is-next .gs-no { color: #04070d; background: var(--accent); border-color: var(--accent); }
.gs-body { flex: 1 1 auto; min-width: 0; display: block; }
.gs-title {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--text-main); line-height: 1.35;
}
.gs-now {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 9.5px; font-weight: 800; color: #04070d;
  background: var(--accent); border-radius: var(--radius-sm); vertical-align: middle;
}
.gs-desc { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-sub); line-height: 1.45; }
.gs-cta { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--cyan); white-space: nowrap; }
.guide-alldone {
  margin: 6px 0 0; padding: 12px; text-align: center;
  font-size: 12.5px; color: var(--grade-rare);
  background: rgba(34, 229, 138, 0.08);
  border: 1px solid rgba(34, 229, 138, 0.3); border-radius: var(--radius-md);
}

.guide-doc { display: flex; flex-direction: column; gap: 8px; }
.guide-sec {
  background: var(--bg-panel); border: 1px solid var(--border-c);
  border-radius: var(--radius-md); overflow: hidden;
}
.guide-sec > summary {
  list-style: none; cursor: pointer; padding: 13px 15px;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--text-main);
}
.guide-sec > summary::-webkit-details-marker { display: none; }
.guide-sec > summary::after { content: '▾'; float: right; color: var(--text-3); font-size: 11px; }
.guide-sec[open] > summary::after { content: '▴'; }
.guide-sec[open] > summary { border-bottom: 1px solid var(--border-c); background: var(--bg-panel-2); }
.guide-sec-body { padding: 14px 15px; font-size: 12.5px; line-height: 1.7; color: var(--text-sub); }
.guide-sec-body p { margin: 0 0 10px; }
.guide-sec-body p:last-child { margin-bottom: 0; }
.guide-sec-body b { color: var(--text-main); }
.guide-sec-body ul, .guide-sec-body ol { margin: 0 0 10px; padding-left: 20px; }
.guide-sec-body li { margin-bottom: 6px; }
.guide-tip {
  margin: 10px 0 0 !important; padding: 10px 12px;
  background: rgba(41, 216, 255, 0.07);
  border-left: 2px solid var(--cyan); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-main);
}

/* ---------- 신규 감독 환영 모달 ---------- */
.welcome-guide-modal { max-width: 420px; text-align: center; }
.welcome-guide-emoji { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.welcome-guide-title {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 800;
  font-size: 19px; color: var(--text-main);
}
.welcome-guide-desc { margin: 0 0 14px; font-size: 13px; line-height: 1.75; color: var(--text-sub); }
.welcome-guide-desc b { color: var(--accent); }
.welcome-guide-steps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 16px;
}
.welcome-guide-steps span {
  padding: 4px 9px; font-size: 11px; color: var(--text-sub);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-c); border-radius: var(--radius-sm); white-space: nowrap;
}
.welcome-guide-btns { display: flex; flex-direction: column; gap: 8px; }
.welcome-guide-btns .btn { width: 100%; }
.welcome-guide-foot { margin: 12px 0 0; font-size: 11px; color: var(--text-4); }

/* ---------- 모바일(720px 이하) ---------- */
@media (max-width: 720px) {
  .onboard-card { padding: 13px 13px 12px; margin-bottom: 14px; }
  .onboard-title { font-size: 14px; }
  .onboard-count { font-size: 10.5px; padding: 2px 6px; }
  .onboard-next { padding: 12px; }
  .onboard-next-title { font-size: 14.5px; }
  .onboard-next-desc { font-size: 11.5px; }
  .onboard-dot { width: 20px; height: 20px; font-size: 10px; }

  .guide-hero { padding: 13px; }
  .guide-hero-title { font-size: 15.5px; }
  .guide-hero-desc { font-size: 12.5px; }
  /* 좁은 화면에서는 "하러 가기 →"가 제목을 밀어내므로 세로로 접는다. */
  .guide-step { flex-wrap: wrap; padding: 11px 12px; gap: 10px; }
  .gs-body { flex: 1 1 60%; }
  .gs-cta { width: 100%; text-align: right; }
  .gs-title { font-size: 13px; }
  .gs-desc { font-size: 11px; }
  .guide-sec > summary { font-size: 13px; padding: 12px 13px; }
  .guide-sec-body { font-size: 12px; padding: 13px; }
  .welcome-guide-modal { max-width: 100%; }
  .welcome-guide-title { font-size: 17px; }
  .welcome-guide-desc { font-size: 12.5px; }
}

/* ================================================================
   [8] 라인업 «자동 채우기» + 온보딩 액션 배너 (2026-08-02, v2.6.0)
   ⚠️ 이 파일의 규칙은 항상 «파일 끝»에 추가한다(소스 순서 = 우선순위).
   ================================================================ */

/* ---- 라인업 상단 자동 편성 바 ---- */
.lineup-auto-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 15px;
  margin-bottom: 14px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}
.lineup-auto-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lineup-auto-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.lineup-auto-desc { font-size: 12px; line-height: 1.5; color: var(--text-sub); }
.lineup-auto-btns { display: flex; gap: 8px; flex-shrink: 0; }
.lineup-auto-btns .btn { white-space: nowrap; }

@media (max-width: 720px) {
  .lineup-auto-bar { padding: 12px 13px; gap: 11px; }
  .lineup-auto-title { font-size: 13.5px; }
  .lineup-auto-desc { font-size: 11.5px; }
  /* 모바일(390px 등 좁은 폭)에서는 «⚡ 빈 자리 자동 채우기» 라벨이 반폭 버튼에 들어가지 않아
     글자가 잘린다. 두 버튼을 세로로 쌓아 각각 전체 폭을 쓰게 하면 잘림도 오조작도 없어진다. */
  .lineup-auto-btns { width: 100%; flex-direction: column; }
  .lineup-auto-btns .btn { width: 100%; min-width: 0; }
}

/* 확인 모달 안의 부연 문구(되돌릴 수 없는 동작 경고) */
.confirm-note {
  margin: 8px 0 0;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-sub);
  background: var(--bg-input);
  border-left: 2px solid var(--primary);
  border-radius: var(--radius-sm);
}

/* ---- 온보딩 «지금 해야 할 1개 액션» 배너 (TICKET-OG-003) ----
   각 탭 패널의 «맨 위»에 삽입된다(app.js renderOnboardBanner). 목적지 화면에서
   "그래서 여기서 뭘 누르라는 거지?" 를 없애는 것이 전부이므로, 문장은 항상 1개만 둔다. */
.onboard-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 15px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(255, 204, 41, 0.11), rgba(255, 204, 41, 0.02));
  border: 1px solid rgba(255, 204, 41, 0.34);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}
.onboard-banner.is-done {
  background: linear-gradient(90deg, rgba(34, 229, 138, 0.11), rgba(34, 229, 138, 0.02));
  border-color: rgba(34, 229, 138, 0.34);
  border-left-color: var(--grade-rare);
}
.ob-banner-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; }
.ob-banner-step {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.onboard-banner.is-done .ob-banner-step { color: var(--grade-rare); }
.ob-banner-step.is-warn { color: var(--primary); }
.ob-banner-action {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text-main);
  word-break: keep-all;
}
.ob-banner-btns { display: flex; gap: 8px; flex-shrink: 0; }
.ob-banner-btns .btn { white-space: nowrap; }

/* ---- 가이드 단계 카드 + 선행 조건 안내 (TICKET-OG-002) ---- */
.guide-step-wrap { display: flex; flex-direction: column; gap: 0; }
/* 선행 조건이 안 맞는 단계는 «잠김»이 아니라 «준비 필요»로 보이게 한다.
   눌러도 되지만, 누르면 선행 단계 화면으로 보낸다(startOnboardStep). */
.guide-step.is-blocked {
  border-color: rgba(255, 31, 61, 0.4);
  background: rgba(255, 31, 61, 0.05);
}
.guide-step.is-blocked .gs-no { color: var(--primary); border-color: rgba(255, 31, 61, 0.55); background: transparent; }
.guide-step.is-blocked .gs-cta { color: var(--primary); }
.gs-prereq {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--primary);
  word-break: keep-all;
}
.gs-action {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--cyan);
  word-break: keep-all;
}
/* 카드 «아래»에 붙는 보조 CTA. .guide-step 의 형제이므로 pointer-events 제약을 받지 않는다. */
.guide-prereq-cta {
  align-self: stretch;
  margin-top: -1px;
  padding: 8px 13px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
  color: var(--accent);
  background: rgba(255, 204, 41, 0.07);
  border: 1px solid rgba(255, 204, 41, 0.3);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.guide-prereq-cta:hover { background: rgba(255, 204, 41, 0.16); color: var(--text-main); }

@media (max-width: 720px) {
  .onboard-banner { padding: 11px 13px; gap: 10px; }
  .ob-banner-action { font-size: 12.5px; }
  /* 모바일에서는 버튼이 줄바꿈되어 손가락으로 누르기 쉬운 폭을 갖도록 한다. */
  .ob-banner-btns { width: 100%; }
  .ob-banner-btns .btn { flex: 1 1 0; min-width: 0; }
  .gs-prereq { font-size: 10.5px; }
  .gs-action { font-size: 11px; }
  .guide-prereq-cta { font-size: 11px; padding: 8px 11px; }
}

/* ============================================================================
   [9] 온보딩 완주 축하 + 홈 완주 배너  (2026-08-02, v2.7.0)
   TICKET-FLOW-006/007/008 — STEP 6~8 완료 반영 및 「완주」 피드백
   ⚠️ 새 규칙은 항상 파일 «맨 끝»에 추가한다(리뉴얼 레이어 순서 유지).
   ========================================================================== */

/* ---- 8/8 완주 시 홈 상단 「시작 가이드」 블록의 완주 배너 상태 ---- */
.onboard-card.is-complete {
  border-color: rgba(34, 229, 138, .5);
  box-shadow: 0 0 0 1px rgba(34, 229, 138, .18) inset;
}
.onboard-card.is-complete .onboard-bar-fill { background: var(--grade-rare); }
.onboard-card.is-complete .onboard-next-step {
  color: var(--grade-rare);
  border-color: rgba(34, 229, 138, .45);
}
.onboard-card.is-complete .onboard-count { color: var(--grade-rare); }

/* ---- 완주 축하 오버레이 ---- */
.onboard-celebrate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1150;                 /* .modal-overlay(1100) 위, #toast-container(1200) 아래 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 5, 12, .74);
  animation: ocFadeIn .18s ease-out;
}
@keyframes ocFadeIn { from { opacity: 0; } to { opacity: 1; } }

.onboard-celebrate-box {
  width: 100%;
  max-width: 420px;
  padding: 26px 22px 20px;
  text-align: center;
  background: var(--bg-panel-2);
  border: 1px solid rgba(34, 229, 138, .45);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  animation: ocPopIn .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes ocPopIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.onboard-celebrate-box .oc-emoji {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 10px;
}
.onboard-celebrate-box .oc-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.01em;
}
.onboard-celebrate-box .oc-sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-sub);
}
.onboard-celebrate-box .oc-progress {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 14px;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 800;
  color: var(--grade-rare);
  background: rgba(34, 229, 138, .10);
  border: 1px solid rgba(34, 229, 138, .38);
  border-radius: var(--radius-sm);
}
.onboard-celebrate-box .oc-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.onboard-celebrate-box .oc-btns .btn { flex: 1 1 0; min-width: 0; }

@media (max-width: 420px) {
  .onboard-celebrate-box { padding: 22px 16px 16px; }
  .onboard-celebrate-box .oc-btns { flex-direction: column; }
}

/* ================================================================
   [10] 리뉴얼 미반영 잔여 요소 보정 (2026-08-02, v2.7.1)
   전체 27개 탭 디자인 반영 감사에서 «실제로 스타일이 붙지 않은» 요소만 골라 보정한다.
   판정 기준: 화면에 보이는 상태에서 computed background 가 브라우저 기본값
   rgb(239,239,239) 이거나 border-style 가 outset/기본 회색인 것.
   ================================================================ */

/* (1) .btn-gold — 마크업(뽑기 5연차 버튼)에서 쓰고 있으나 CSS 정의가 아예 없어
       다크 UI 위에 «연회색 기본 버튼»으로 떠 있었다. 골드 CTA 로 정의한다. */
.btn-gold {
  background: linear-gradient(180deg, #ffd76b, #c2861a);
  color: #2a1a00;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 14px rgba(255, 190, 60, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.07); }

/* (2) .btn-lg — 큰 CTA 4곳(1·5연차 뽑기, 경기 시작, 오늘 출석)에서 쓰지만 정의가 없어
       일반 버튼과 크기가 같았다. 리뉴얼 CTA 위계를 되살린다. */
.btn-lg {
  padding: 16px 26px;
  font-size: 15px;
  letter-spacing: 0.2px;
}
@media (max-width: 420px) {
  .btn-lg { padding: 14px 18px; font-size: 14px; }
}

/* (3) #auto-match-count — 경기 탭 «연속 경기 횟수» 숫자 입력칸이 브라우저 기본
       (흰 배경 + inset 테두리)이었다. 강화 탭의 동일 입력칸과 같은 규격으로 맞춘다. */
#auto-match-count {
  padding: 7px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font-data);
  font-weight: 800;
  font-size: 13px;
  text-align: center;
}
#auto-match-count:focus { outline: none; border-color: var(--primary); }

/* ================================================================
   [11] 라인업 편집 재설계 (2026-08-02, v2.8.0)
   요청: "라인업 설정 할때 다들 힘들어 하는데 편하게 하는 좋은 방법 없을까?" → 3단계 전부 적용.
     A 자리 맞바꾸기 / B 묶음 저장 / C 지명타자 필수 해제 /
     D 다이아몬드 카드 배치 시트 / E 타순 ▲▼·드래그 정렬 / F 자동 편성 기준 4종 / G 프리셋
   ⚠️ 규칙: 새 규칙은 항상 파일 «끝»에 덧붙인다(리뉴얼 레이어 순서 유지).
   ================================================================ */

/* ---------- (F) 자동 편성 기준 4종 ---------- */
.lineup-auto-strategy {
  display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px;
}
.lu-strat {
  flex: 1 1 auto; min-width: 104px; padding: 8px 10px; cursor: pointer;
  background: var(--bg-input); color: var(--text-sub);
  border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lu-strat:hover { color: var(--text-main); border-color: var(--primary); }
.lu-strat.is-active {
  color: var(--bg-dark); background: var(--accent-bg); border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(255, 204, 41, 0.22);
}

/* ---------- (G) 라인업 프리셋 ---------- */
.lineup-preset-bar {
  margin: 0 0 14px; padding: 12px 14px;
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
}
.lineup-preset-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lineup-preset-title { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.4px; color: var(--text-main); }
.lineup-preset-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lineup-preset-empty { font-size: 12px; color: var(--text-3); line-height: 1.6; }
.lu-preset-item {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--border-c); border-radius: var(--radius-sm); background: var(--bg-input);
}
.lu-preset-item.is-warn { border-color: rgba(255, 204, 41, 0.55); }
.lu-preset-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; cursor: pointer;
  background: none; border: none; color: var(--text-main); font-family: inherit; font-size: 12.5px; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.lu-preset-chip:hover { background: rgba(41, 216, 255, 0.12); color: var(--cyan); }
.lpc-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpc-meta { font-family: var(--font-num); font-size: 11px; color: var(--text-3); }
.lu-preset-item.is-warn .lpc-meta { color: var(--accent); }
.lu-preset-del {
  padding: 0 9px; cursor: pointer; background: none; border: none; border-left: 1px solid var(--border-c);
  color: var(--text-4); font-size: 12px; transition: color .15s ease, background .15s ease;
}
.lu-preset-del:hover { color: var(--primary); background: rgba(255, 31, 61, 0.12); }

/* ---------- (B) 묶음 저장 바 ---------- */
.lineup-sticky-head.is-dirty { border-color: rgba(255, 204, 41, 0.5); }
.lineup-save-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px;
  background: rgba(255, 204, 41, 0.1); border: 1px solid rgba(255, 204, 41, 0.42);
  border-radius: var(--radius-sm);
}
.lsb-text { font-size: 12.5px; font-weight: 800; color: var(--accent); }
.lsb-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* 저장되지 않은 자리는 테두리로 표시해 «무엇을 바꿨는지»를 잃지 않게 한다. */
.lineup-slot.is-changed { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255, 204, 41, 0.28) inset; }
.dpos.is-changed, .diamond-dh-chip.is-changed { border-color: var(--accent); }

/* ---------- (D) 슬롯 카드의 «카드로 고르기» 버튼 ---------- */
.lineup-slot-pick-btn {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0; cursor: pointer; line-height: 1;
  background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  color: var(--text-sub); font-size: 12px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lineup-slot-pick-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(41, 216, 255, 0.12); }

/* ---------- 다이아몬드 보강 ---------- */
.dpos .dp-order {
  margin-top: 2px; font-family: var(--font-num); font-size: 10px; font-weight: 800;
  color: var(--cyan); letter-spacing: 0.02em;
}
.diamond-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--text-3); text-align: center; }

/* ---------- (D) 선수 배치 카드 시트 ---------- */
.lineup-assign-overlay { align-items: flex-start; padding: 0; }
.lineup-assign-sheet {
  display: flex; flex-direction: column; width: 100%; max-width: 520px;
  margin: min(8vh, 72px) auto 24px; max-height: 82vh;
  background: var(--bg-panel); border: 1px solid var(--border-c); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden;
  animation: modalPop .2s ease;
}
.las-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--border-c); background: var(--bg-panel-2);
}
.las-title { flex: 0 0 auto; font-family: var(--font-display); font-size: 17px; letter-spacing: 0.4px; color: var(--accent); }
.las-now { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.las-close {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  color: var(--text-sub); font-size: 13px; transition: color .15s ease, border-color .15s ease;
}
.las-close:hover { color: var(--primary); border-color: var(--primary); }
.las-tools { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-c); }
.las-search {
  flex: 1 1 auto; min-width: 0; padding: 9px 11px;
  background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  color: var(--text-main); font-family: inherit; font-size: 13px;
}
.las-search:focus { outline: none; border-color: var(--cyan); }
.las-list { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.las-card {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; cursor: pointer; text-align: left;
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
}
.las-card:hover { border-color: var(--cyan); transform: translateX(2px); background: rgba(41, 216, 255, 0.07); }
.las-card.is-here { border-color: var(--grade-rare); }
.las-ovr {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 6px 0; border-radius: var(--radius-sm);
  font-family: var(--font-num); font-size: 15px; font-weight: 800;
}
.las-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.las-name { font-size: 14px; font-weight: 800; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.las-sub { font-size: 11.5px; color: var(--text-sub); }
.las-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.las-tag {
  padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: rgba(150, 166, 200, 0.14); color: var(--text-sub);
}
.las-tag.is-here { background: rgba(34, 229, 138, 0.16); color: var(--grade-rare); }
.las-tag.is-other { background: rgba(41, 216, 255, 0.16); color: var(--cyan); }
.las-tag.is-inj { background: rgba(255, 31, 61, 0.16); color: var(--primary); }
.las-tag.is-cond { background: rgba(255, 204, 41, 0.14); color: var(--accent); }
.las-empty { margin: 18px 4px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; text-align: center; }

/* ---------- (E) 타순 정렬 패널 ---------- */
.lineup-order-panel {
  margin: 0 0 16px; padding: 13px 14px;
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
}
.lo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lo-title { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.4px; color: var(--text-main); }
.lo-sub { font-family: var(--font-body, inherit); font-size: 11px; font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.lo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lo-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.lo-row:hover { border-color: var(--cyan); }
.lo-row.is-dragging { opacity: 0.45; }
.lo-row.is-over { border-color: var(--accent); background: rgba(255, 204, 41, 0.09); }
.lo-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--primary); color: #fff; font-family: var(--font-num); font-size: 13px; font-weight: 800;
}
.lo-grip { flex: 0 0 auto; cursor: grab; color: var(--text-4); font-size: 14px; line-height: 1; }
.lo-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-pos { flex: 0 0 auto; font-size: 11px; color: var(--text-sub); }
.lo-ovr { flex: 0 0 auto; }
.lo-btns { flex: 0 0 auto; display: flex; gap: 4px; }
.lo-btn {
  width: 26px; height: 26px; padding: 0; cursor: pointer; line-height: 1;
  background: var(--bg-panel); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  color: var(--text-sub); font-size: 11px;
  transition: color .15s ease, border-color .15s ease;
}
.lo-btn:hover:not(:disabled) { color: var(--cyan); border-color: var(--cyan); }
.lo-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.lo-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.lo-empty { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }

/* ---------- 공용 프롬프트 입력 ---------- */
.prompt-modal-input {
  width: 100%; margin-top: 12px; padding: 11px 12px;
  background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  color: var(--text-main); font-family: inherit; font-size: 14px;
}
.prompt-modal-input:focus { outline: none; border-color: var(--accent); }

/* ---------- 모바일 ---------- */
@media (max-width: 720px) {
  .lu-strat { min-width: 0; flex: 1 1 46%; font-size: 11.5px; padding: 8px 6px; }
  .lineup-preset-bar { padding: 11px 12px; }
  .lpc-name { max-width: 108px; }
  .lineup-save-bar { padding: 9px 10px; }
  .lsb-btns { flex: 1 1 100%; }
  .lsb-btns .btn { flex: 1 1 0; justify-content: center; }
  .lineup-assign-sheet { margin: 0 auto; max-height: 100vh; height: 100%; max-width: none; border-radius: 0; border: none; }
  .lineup-assign-overlay { padding: 0; }
  .las-list { padding: 12px 13px 24px; }
  .lo-pos { display: none; }
  .lo-row { gap: 7px; padding: 8px; }
  .lo-name { font-size: 13px; }
}

/* ================================================================
   [12] 업적 대량 확장 (v2.9.0)
   - 업적 10개 → 40개. 분야 칩 / 카드 분야 배지 / 부분 진행 게이지.
   - ⚠️ 이 섹션은 파일 맨 끝에 있어야 한다(소스 순서 우선순위). 새 규칙은 이 아래에 추가할 것.
   ================================================================ */

/* ---- 분야 칩 행 ---- */
.ach-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-c);
}
.ach-cat-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-sub);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ach-cat-chip:hover { color: var(--text-main); border-color: rgba(90, 140, 210, .4); }
.ach-cat-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ach-cat-count {
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  color: var(--text-3);
}
.ach-cat-chip.is-active .ach-cat-count { background: rgba(0, 0, 0, .3); color: #fff; }
/* 수령 가능한 보상이 있는 분야에 금색 점 */
.ach-cat-chip.has-claimable::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

/* ---- 카드 분야 배지 ---- */
.achievement-card { position: relative; }
.achievement-cat-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-c);
  background: rgba(0, 0, 0, .3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-3);
}
.achievement-cat-badge.cat-record { color: var(--cyan); border-color: rgba(41, 216, 255, .35); }
.achievement-cat-badge.cat-growth { color: var(--grade-rare); border-color: rgba(34, 229, 138, .35); }
.achievement-cat-badge.cat-collection { color: var(--grade-legend); border-color: rgba(181, 108, 255, .35); }
.achievement-cat-badge.cat-operation { color: var(--accent); border-color: rgba(255, 204, 41, .35); }

/* ---- 부분 진행 게이지 ---- */
.ach-prog { margin: 8px 0 4px; }
.ach-prog-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  overflow: hidden;
}
.ach-prog-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--grade-rare));
  transition: width .35s ease;
}
.ach-prog.is-done .ach-prog-fill { background: linear-gradient(90deg, var(--accent), var(--accent-bg)); }
.ach-prog-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
}
.ach-prog-num { font-family: var(--font-num); font-weight: 700; color: var(--text-sub); }
.ach-prog.is-done .ach-prog-num { color: var(--accent); }
.ach-prog-remain { color: var(--text-4); font-weight: 600; }

/* 단발성 이벤트 업적: 게이지 대신 안내 배지 */
.ach-prog-event { display: flex; }
.ach-prog-event-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-c);
  background: rgba(0, 0, 0, .22);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-4);
}

@media (max-width: 720px) {
  .ach-cat-chips { gap: 5px; }
  .ach-cat-chip { flex: 1 1 auto; justify-content: center; padding: 8px 8px; font-size: 12px; }
  .achievement-cat-badge { top: 6px; right: 6px; font-size: 10px; }
}

/* ============================================================================
   [13] 명예의 전당 «2주 자동 등록» (v2.10.0)
   사용자 요청: "명예의전당 관리자가 직접 하는데 2주마다 자동으로 하게 해줄래? 일요일 지나면 자동으로"

   구성 요소
     1) .hof-schedule-banner  — 랭킹 탭 최상단 마감 카운트다운 배너(D-N + 진행 게이지)
     2) .hof-src-badge        — 명예의전당 표의 «자동 / 관리자» 구분 배지
     3) .hof-admin-sched      — 관리자 패널의 자동 등록 on/off · 주기 설정
   ============================================================================ */

/* ---- 1) 랭킹 탭 마감 안내 배너 ---- */
.hof-schedule-banner {
  margin-bottom: 18px;
  padding: 12px 14px 10px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-lg);
}
.hof-schedule-banner[hidden] { display: none; }

.hof-sched-main {
  display: flex;
  align-items: center;
  gap: 11px;
}
.hof-sched-ico {
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
.hof-sched-text {
  flex: 1 1 auto;
  min-width: 0;
}
.hof-sched-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.2px;
}
.hof-sched-desc {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-sub);
}
.hof-sched-desc b { color: var(--text-main); font-weight: 700; }

.hof-sched-dday {
  flex: 0 0 auto;
  padding: 5px 11px;
  background: rgba(41, 216, 255, 0.14);
  border: 1px solid rgba(41, 216, 255, 0.4);
  border-radius: var(--radius-sm);
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 800;
  color: var(--cyan);
  white-space: nowrap;
}

/* 주기 진행 게이지 — 다음 마감까지 얼마나 왔는지 시각적으로 보여준다. */
.hof-sched-bar {
  margin-top: 9px;
  height: 4px;
  background: var(--bg-input);
  border-radius: 2px;
  overflow: hidden;
}
.hof-sched-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), #7ae7ff);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* 마감 3일 이하 — 곧 초기화되므로 경고색으로 전환한다. */
.hof-schedule-banner.is-soon { border-left-color: var(--accent); }
.hof-schedule-banner.is-soon .hof-sched-dday {
  background: rgba(255, 204, 41, 0.14);
  border-color: rgba(255, 204, 41, 0.45);
  color: var(--accent);
}
.hof-schedule-banner.is-soon .hof-sched-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-bg));
}

/* 자동 등록 꺼짐 — 무채색으로 낮춰 "지금은 동작하지 않음"을 명확히 한다. */
.hof-schedule-banner.is-off { border-left-color: var(--text-4); }
.hof-schedule-banner.is-off .hof-sched-dday {
  background: rgba(100, 116, 154, 0.14);
  border-color: rgba(100, 116, 154, 0.4);
  color: var(--text-3);
}

/* ---- 2) 명예의전당 표: 자동 / 관리자 구분 배지 ---- */
.hof-src-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.hof-src-badge.is-auto {
  background: rgba(41, 216, 255, 0.13);
  border: 1px solid rgba(41, 216, 255, 0.34);
  color: var(--cyan);
}
.hof-src-badge.is-manual {
  background: rgba(255, 204, 41, 0.12);
  border: 1px solid rgba(255, 204, 41, 0.32);
  color: var(--accent);
}
/* 등록일 아래에 붙는 구간(2주치) 표기 */
.hof-period {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--font-num);
}

/* ---- 3) 관리자 패널: 자동 등록 설정 ---- */
.hof-admin-sched {
  margin-top: 12px;
  padding: 11px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-md);
}
.hof-admin-sched-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.hof-admin-sched-head b { font-size: 12.5px; color: var(--text-main); }

.hof-admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-sub);
  cursor: pointer;
}
.hof-admin-toggle input { cursor: pointer; }

.hof-admin-sched-desc {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-sub);
}
.hof-admin-sched-desc b { color: var(--text-main); }

.hof-admin-sched-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.hof-admin-sched-row label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}
.hof-admin-sched-row select {
  padding: 6px 10px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 12px;
}
.hof-admin-sched-note {
  font-size: 11px;
  color: var(--text-3);
}
.hof-admin-sched-note b { color: var(--text-sub); }

/* ---- 모바일 ---- */
@media (max-width: 720px) {
  .hof-schedule-banner { padding: 11px 12px 9px; }
  .hof-sched-main { gap: 9px; }
  .hof-sched-ico { font-size: 17px; }
  .hof-sched-title { font-size: 12.5px; }
  .hof-sched-desc { font-size: 11px; }
  .hof-sched-dday { padding: 4px 9px; font-size: 13px; }
  .hof-admin-sched-row { gap: 7px; }
  .hof-admin-sched-note { flex: 1 1 100%; }
}

/* ========================================================================
   [14] 모바일 하단 탭바 «화면 중간 떠 있음» 보정 (v2.10.1)

   제보: 랭킹 목록 위로 하단 탭바가 화면 중간에 떠서 4위 구단을 가림.
   CSS 자체는 정상이다(크롬 실측: position:fixed / bottom:0 / 뷰포트 하단 gap 0px).
   원인은 모바일의 «레이아웃 뷰포트 ≠ 시각 뷰포트» 문제이며, 실제 보정은 app.js 의
   bindMobileTabNavViewportFix() 가 inline transform 으로 수행한다.
   여기서는 그 이동이 «툭» 끊기지 않도록 전환 효과만 준다.
   ⚠️ transform 을 쓰므로 .tab-nav 안에 position:fixed 자식을 두면 안 된다(현재 없음).
   ======================================================================== */
@media (max-width: 720px) {
  .tab-nav {
    transition: transform .16s ease;
    /* 홈 인디케이터/제스처 바 영역까지 배경을 채워, 보정 중에도 아래가 비쳐 보이지 않게 한다. */
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
  }
}

/* ========================================================================
   [15] 랭킹 «구단 상세» 팝업 (v2.11.0)
   랭킹 표/카드/트로피 카드에서 구단을 누르면 열리는 상세 팝업.
   라인업(타순·선발 로테이션·불펜) / 팀가치 / 전적 / 전력을 한 화면에서 본다.
   ⚠️ 새 규칙은 항상 파일 END 에 추가한다(소스 순서 규칙).
   ======================================================================== */
.tp-clickable { cursor: pointer; }
tr.tp-clickable:hover > td { background: rgba(41, 216, 255, 0.07); }
.rank-trophy-card.tp-clickable { transition: transform .14s ease, box-shadow .14s ease; }
.rank-trophy-card.tp-clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }
.ranking-card-profile-btn { margin-top: 10px; }

.team-profile-box { max-width: 620px; }
.team-profile-box .modal-body { line-height: 1.5; }

.tp-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border-c); }
.tp-team { font-family: var(--font-display); font-size: 17px; color: var(--text-main); }
.tp-manager { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

.tp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.tp-stat { background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; min-width: 0; }
.tp-stat-lbl { font-size: 10.5px; color: var(--text-3); letter-spacing: .2px; }
.tp-stat-val { font-size: 13.5px; color: var(--text-main); margin-top: 3px; overflow-wrap: anywhere; }
.tp-stat-val.tp-hl { color: var(--accent); }

.tp-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 0; }
.tp-sub-lbl { color: var(--text-3); }
.tp-sub-val { color: var(--cyan); }
.tp-sub-val.tp-dim { color: var(--text-4); }

.tp-grades { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.tp-grade-chip { font-size: 11px; padding: 3px 8px; border: 1px solid var(--border-c); border-radius: 999px; background: var(--bg-panel-2); }

.tp-sec { margin-top: 14px; }
.tp-sec-title { font-family: var(--font-display); font-size: 13.5px; color: var(--text-main); margin-bottom: 6px; }
.tp-sec-count { font-size: 11px; color: var(--text-3); font-family: inherit; }
.tp-list { display: flex; flex-direction: column; gap: 3px; }
.tp-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-sm); font-size: 12.5px; }
.tp-ord { flex: 0 0 20px; text-align: center; font-size: 11px; color: var(--accent); font-weight: 700; }
.tp-slot { flex: 0 0 96px; color: var(--text-sub); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 등급 색상은 프로젝트 전체에서 «스코프별»로만 정의되어 있어(.pcard.grade-*, .gacha-prob-*.grade-* 등),
   여기서도 팝업 전용으로 명시해 준다. 색상 토큰 자체는 공용 변수를 그대로 쓴다. */
.tp-name.grade-transcendence { color: var(--grade-transcendence); }
.tp-name.grade-legend        { color: var(--grade-legend); }
.tp-name.grade-hero          { color: var(--grade-hero); }
.tp-name.grade-rare          { color: var(--grade-rare); }
.tp-name.grade-normal        { color: var(--grade-normal); }
.tp-grade-chip.grade-transcendence { color: var(--grade-transcendence); border-color: rgba(255, 31, 61, 0.45); }
.tp-grade-chip.grade-legend        { color: var(--grade-legend); border-color: rgba(181, 108, 255, 0.45); }
.tp-grade-chip.grade-hero          { color: var(--grade-hero); border-color: rgba(74, 159, 255, 0.45); }
.tp-grade-chip.grade-rare          { color: var(--grade-rare); border-color: rgba(34, 229, 138, 0.45); }
.tp-grade-chip.grade-normal        { color: var(--grade-normal); }
.tp-enh { flex: 0 0 auto; font-size: 10.5px; color: var(--accent); }
.tp-enh.tp-enh-tr { color: var(--grade-transcendence); }
.tp-tc { flex: 0 0 auto; font-size: 10px; color: var(--cyan); border: 1px solid rgba(41, 216, 255, 0.4); border-radius: 999px; padding: 1px 5px; }
.tp-inj { flex: 0 0 auto; font-size: 10px; color: var(--primary); }
.tp-ovr { flex: 0 0 34px; text-align: right; font-size: 13px; color: var(--text-main); font-weight: 700; }
.tp-empty { font-size: 12px; color: var(--text-4); padding: 8px 0; }

@media (max-width: 720px) {
  .team-profile-box { max-width: 100%; padding: 16px 14px 14px; }
  .tp-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-slot { flex: 0 0 78px; font-size: 10.5px; }
  .tp-row { padding: 6px; font-size: 12px; gap: 5px; }
}

/* ========================================================================
   [16] 선수 기록 «자동 갱신» 표시 (v2.12.0)
   경기가 끝나면 기록이 스스로 최신화되므로, «언제 기준의 기록인지»를 제목 옆에 알려준다.
   ======================================================================== */
.panel-title .stats-freshness {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .2px;
}
.panel-title .stats-freshness.is-stale { color: var(--accent); }
.panel-title .sub-action.stats-refresh-btn {
  background: none;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  cursor: pointer;
  color: var(--cyan);
}
.panel-title .sub-action.stats-refresh-btn:hover { border-color: rgba(41, 216, 255, 0.45); }
.panel-title .sub-action.stats-refresh-btn:disabled { opacity: .5; cursor: default; }

/* ============================================================================
   [17] 🆕 v2.13.0 «세이버메트릭스(스탯티즈 스타일) 지표»
   사용자 요청: "wRC+ 가능한가? 스탯티즈에서 쓰는 기록들" → "지금 가능한것들은 다해줘"
   정식경기 기록 탭에 세이버 서브탭(#stats-section-saber)을 추가했다. 표/카드 골격은 기존
   .stats-table-wrap / .stats-card 를 그대로 재사용하고, 여기서는 세이버 전용 요소만 정의한다.
   ⚠️ .saber-name 은 등급 색상을 인라인 style 로 주므로 별도 .grade-* 규칙이 필요 없다
      (트랩 #60: 이 프로젝트에는 bare .grade-* 색상 규칙이 없다).
   ========================================================================= */

/* ---- 리그 평균 기준선 스트립 ---- */
.saber-league-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 10px 12px; margin: 4px 0 12px;
  background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-md);
}
.saber-league-strip .saber-lg-title {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--accent); letter-spacing: .3px;
}
.saber-league-strip .saber-lg-note { font-size: 12px; color: var(--text-3); }
.saber-league-strip .saber-lg-item { display: inline-flex; align-items: baseline; gap: 5px; }
.saber-league-strip .saber-lg-lbl { font-size: 11px; color: var(--text-3); }
.saber-league-strip .saber-lg-val {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--text-main); letter-spacing: .2px;
}
.saber-league-strip .saber-lg-sample { margin-left: auto; font-size: 11px; color: var(--text-4); }

/* ---- 안내 문구 ---- */
.saber-help .panel-info-body p { margin: 0 0 7px; line-height: 1.65; }
.saber-help .panel-info-body p:last-child { margin-bottom: 0; }
.saber-help .panel-info-body .saber-warn { color: var(--accent); }

.saber-sub-title {
  margin: 18px 0 8px; font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: var(--text-sub); letter-spacing: .3px;
}

/* ---- 표 ---- */
.saber-table-wrap table { min-width: 1080px; }
.saber-table-wrap table td, .saber-table-wrap table th { white-space: nowrap; }
.saber-table-wrap .saber-name { font-weight: 700; }
.saber-table-wrap .saber-hl { color: var(--cyan); font-weight: 600; }
.saber-table-wrap .saber-war { color: var(--accent); font-weight: 700; }

/* 100 = 리그 평균인 지표(wRC+/OPS+/ERA+) 4단계 색상 */
.saber-plus { font-weight: 700; }
.saber-plus.tier-elite { color: var(--grade-legend); }
.saber-plus.tier-good { color: var(--grade-rare); }
.saber-plus.tier-avg { color: var(--text-main); }
.saber-plus.tier-poor { color: var(--text-3); }

/* ---- 모바일 카드 ---- */
.saber-card-list .stats-card-metric-value.saber-plus { font-weight: 700; }

@media (max-width: 720px) {
  .saber-league-strip { gap: 6px 10px; padding: 9px 10px; }
  .saber-league-strip .saber-lg-title { width: 100%; }
  .saber-league-strip .saber-lg-sample { margin-left: 0; width: 100%; }
  .saber-league-strip .saber-lg-val { font-size: 12px; }
  /* 세이버 섹션 안에서는 «타자/투수» 소제목이 유일한 구분선이므로 모바일에서도 보여준다.
     (.stats-section-title 은 서브탭 라벨과 중복이라 숨기지만, .saber-sub-title 은 남긴다.) */
  .saber-sub-title { display: block; margin: 14px 0 8px; font-size: 13px; }
}

/* ⚠️ 트랩 #60 재확인(v2.13.0): gradeColor()는 «색상값»이 아니라 «클래스명»(grade-legend 등)을
   돌려준다. 그리고 이 프로젝트에는 bare .grade-* 색상 규칙이 없으므로, 세이버 표/카드도
   자기 컴포넌트용 등급 색상 규칙을 직접 선언해야 한다(안 하면 --text-main 을 그대로 상속). */
.saber-table-wrap .saber-name.grade-normal,
.saber-card-list .saber-card-name.grade-normal { color: var(--grade-normal); }
.saber-table-wrap .saber-name.grade-rare,
.saber-card-list .saber-card-name.grade-rare { color: var(--grade-rare); }
.saber-table-wrap .saber-name.grade-hero,
.saber-card-list .saber-card-name.grade-hero { color: var(--grade-hero); }
.saber-table-wrap .saber-name.grade-legend,
.saber-card-list .saber-card-name.grade-legend { color: var(--grade-legend); }
.saber-table-wrap .saber-name.grade-transcendence,
.saber-card-list .saber-card-name.grade-transcendence { color: var(--grade-transcendence); }

/* ==========================================================================
   [18] v2.14.0 — 일반 기록(정식/정밀/시즌) 색상 체계
   사용자 요청("와 색상 넣은거 좋다 일반 기록도 가능해?")에 따라 세이버 탭의 4단계 색상을
   일반 기록 표/카드에도 확장한다.
   · 선수 이름  = 등급 색(초월/전설/영웅/고급/일반)
   · 비율 지표  = 리그 평균 대비 4단계(최상/우수/평균권/평균 이하)
   ⚠️ gradeColor()는 클래스명을 반환하므로 컴포넌트 스코프 규칙이 반드시 필요하다.
   ========================================================================== */
.stats-table-wrap .stats-name { font-weight: 700; }
.stats-table-wrap .stats-name.grade-normal,
.stats-card-list .stats-card-name.grade-normal { color: var(--grade-normal); }
.stats-table-wrap .stats-name.grade-rare,
.stats-card-list .stats-card-name.grade-rare { color: var(--grade-rare); }
.stats-table-wrap .stats-name.grade-hero,
.stats-card-list .stats-card-name.grade-hero { color: var(--grade-hero); }
.stats-table-wrap .stats-name.grade-legend,
.stats-card-list .stats-card-name.grade-legend { color: var(--grade-legend); }
.stats-table-wrap .stats-name.grade-transcendence,
.stats-card-list .stats-card-name.grade-transcendence { color: var(--grade-transcendence); }

/* 비율 지표 4단계 색상 */
.stats-table-wrap td.stat-rate.stat-tier-elite,
.stats-card-list .stats-card-metric-value.stat-tier-elite,
.stats-card-list .stats-card-detail-row .stat-rate.stat-tier-elite,
.stat-color-legend .scl-chip.stat-tier-elite { color: var(--grade-legend); font-weight: 700; }
.stats-table-wrap td.stat-rate.stat-tier-good,
.stats-card-list .stats-card-metric-value.stat-tier-good,
.stats-card-list .stats-card-detail-row .stat-rate.stat-tier-good,
.stat-color-legend .scl-chip.stat-tier-good { color: var(--grade-rare); font-weight: 700; }
.stats-table-wrap td.stat-rate.stat-tier-avg,
.stats-card-list .stats-card-metric-value.stat-tier-avg,
.stats-card-list .stats-card-detail-row .stat-rate.stat-tier-avg,
.stat-color-legend .scl-chip.stat-tier-avg { color: var(--text-main); font-weight: 600; }
.stats-table-wrap td.stat-rate.stat-tier-poor,
.stats-card-list .stats-card-metric-value.stat-tier-poor,
.stats-card-list .stats-card-detail-row .stat-rate.stat-tier-poor,
.stat-color-legend .scl-chip.stat-tier-poor { color: var(--text-3); font-weight: 500; }

/* 색상 범례 */
.stat-color-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: -4px 0 12px; padding: 8px 10px;
  background: var(--bg-input); border: 1px solid var(--border-c); border-radius: var(--radius-md);
  font-size: 11px; color: var(--text-3); line-height: 1.5;
}
.stat-color-legend .scl-label { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 11px; }
.stat-color-legend .scl-item { color: var(--text-3); }
.stat-color-legend .scl-div { color: var(--text-4); }
.stat-color-legend .scl-chip {
  display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-c); font-size: 11px;
}
@media (max-width: 720px) {
  .stat-color-legend { gap: 4px 7px; padding: 7px 9px; font-size: 10.5px; }
  .stat-color-legend .scl-div { display: none; }
  .stat-color-legend .scl-chip { padding: 0 5px; }
}

/* ==========================================================================
   [19] v2.14.1 — 🐛 데스크톱에서 모바일 카드 리스트가 함께 보이던 문제 수정
   [원인] 1176줄 `.log-card-list { display:none }` / 2903줄 `.ranking-card-list { display:none }` 이
          6784줄 `.ranking-card-list, .log-card-list, .match-card-list { display:flex }` 에 의해
          덮어써졌다(동일 명시도 → 뒤에 온 규칙이 승리).
   [증상] 📜 최근 경기 기록에서 표 10줄 + 카드 10장이 동시에 렌더링되고,
          카드의 접기 규칙(.log-card-detail)은 ≤720px 미디어쿼리 안에만 있어서
          「투수 등판 상세」가 항상 펼쳐진 채 접히지 않았다. 랭킹 탭도 동일.
   [수정] 파일 맨 끝에서 미디어쿼리로 다시 못박는다(이후 규칙 순서 변화에도 안전).
          .match-card-list(홈 최근 경기)는 데스크톱에서도 쓰는 컴포넌트라 제외한다.
   ========================================================================== */
@media (min-width: 721px) {
  .log-card-list,
  .ranking-card-list { display: none !important; }
}

/* ================== [20] v2.15.0 «기록 색상 기준 토글» ==================
   색상 기준선을 «리그 평균»(전체 유저 표본) ↔ «우리 팀 평균»(같은 난이도 표본)으로 바꾸는 스위치.
   높은 난이도로 돌리는 팀은 리그 평균 기준으로는 투수 전원이 «평균 이하»로 칠해지므로,
   팀 내부 상대 비교가 필요할 때 쓴다. ⚠️ 새 규칙은 항상 파일 끝에 추가한다(소스 순서 충돌 방지). */
.stat-color-legend .scl-toggle {
  display: inline-flex;
  align-items: stretch;
  margin-left: auto;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
}
.stat-color-legend .scl-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.stat-color-legend .scl-toggle-btn + .scl-toggle-btn { border-left: 1px solid var(--border-c); }
.stat-color-legend .scl-toggle-btn:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.05); }
.stat-color-legend .scl-toggle-btn.active {
  background: rgba(255, 204, 41, 0.16);
  color: var(--accent);
}
.stat-color-legend .scl-item b { color: var(--text-main); font-weight: 700; }

@media (max-width: 720px) {
  .stat-color-legend .scl-toggle { margin-left: 0; width: 100%; }
  .stat-color-legend .scl-toggle-btn { flex: 1 1 0; padding: 6px 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [21] v2.17.0 «난이도별 랭킹» — 랭킹 범위 선택기
   사용자 요청: "지금 경기 돌리면 전체 난이도에서 승리 이런거가 포함인데 이제 이걸 난이도
   마다 기록 되게 해줄래? 랭킹도 마찬가지야"
   기존 「랭킹 기준」 칩 줄(.ranking-sort-row)과 시각적으로 한 세트로 보이도록 같은 패널
   스타일을 쓰되, 「범위」가 「기준」보다 상위 개념이므로 탭 형태로 구분한다.
   ⚠️ 소스 순서 규칙: 동일 특이도에서는 뒤에 오는 규칙이 이기므로 항상 파일 끝에 추가한다.
   ═══════════════════════════════════════════════════════════════════════════ */
.rank-diff-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 11px 13px;
  background: var(--bg-panel-2); border: 1px solid var(--border-c); border-radius: var(--radius-md);
}
.rank-diff-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rank-diff-tabs { display: flex; gap: 0; }
.rank-diff-tab {
  padding: 7px 14px; border: 1px solid var(--border-c);
  background: transparent; color: var(--text-sub);
  font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.rank-diff-tab:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.rank-diff-tab:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.rank-diff-tab:hover { color: var(--text-main); border-color: rgba(255,255,255,0.22); }
.rank-diff-tab.is-active {
  background: var(--cyan); border-color: var(--cyan); color: #04070d;
}
.rank-diff-select {
  padding: 7px 10px; border: 1px solid var(--border-c); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-main);
  font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  max-width: 260px;
}
.rank-diff-select:focus { outline: none; border-color: var(--cyan); }
.rank-diff-note {
  flex: 1 1 100%; margin: 2px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--text-3);
}

/* 난이도별 전적 요약(경기 탭) */
.diff-record-panel { margin-top: 16px; }
.diff-record-empty { font-size: 11.5px; color: var(--text-3); line-height: 1.7; }
.diff-record-list { display: flex; flex-direction: column; gap: 6px; }
.diff-record-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--bg-input);
  border: 1px solid var(--border-c); border-radius: var(--radius-sm);
}
.diff-record-item.is-current { border-color: var(--cyan); }
.diff-record-lv {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--cyan); min-width: 42px;
}
.diff-record-name { flex: 1 1 120px; font-size: 12px; font-weight: 700; color: var(--text-main); }
.diff-record-wl { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-sub); }
.diff-record-rate { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--accent); }
.diff-record-streak { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }

@media (max-width: 720px) {
  .rank-diff-row { padding: 10px 12px; }
  .rank-diff-controls { width: 100%; }
  .rank-diff-tabs { flex: 1 1 100%; }
  .rank-diff-tab { flex: 1 1 0; text-align: center; }
  .rank-diff-select { flex: 1 1 100%; max-width: none; }
  .diff-record-name { flex: 1 1 100%; }
}

/* ==========================================================================
   [22] v2.18.0 «난이도별 선수 기록» — 기록 탭 범위 선택기 / 표본 배지 / 관리자 위험 동작 박스
   ⚠️ CSS는 같은 특이도면 «뒤에 온 규칙»이 이긴다. 이 섹션은 반드시 파일 맨 끝에 둔다.
   ========================================================================== */
.stats-diff-row {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
}
.stats-diff-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stats-diff-tabs {
  display: inline-flex;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stats-diff-tab {
  padding: 6px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-sub);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.stats-diff-tab + .stats-diff-tab { border-left: 1px solid var(--border-c); }
.stats-diff-tab:hover { background: rgba(41, 216, 255, 0.08); color: var(--text-main); }
.stats-diff-tab.is-active { background: var(--cyan); color: #04070d; }
.stats-diff-select {
  padding: 6px 10px;
  font-size: 0.86rem;
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px dotted var(--border-c);
  border-radius: var(--radius-md);
  max-width: 240px;
}
.stats-diff-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-3);
}

/* 규정 기준 미달(표본 부족) 표시 — «제외»하지 않고 «회색 + 배지»로만 알린다. */
.saber-unqual {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-3);
  background: rgba(100, 116, 154, 0.16);
  border: 1px solid rgba(100, 116, 154, 0.32);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  cursor: help;
}
tr.is-unqualified > td { opacity: 0.62; }
tr.is-unqualified > td.saber-name { opacity: 1; }

/* 관리자 위험 동작 박스(전 구단 선수 기록 초기화) */
.admin-danger-box {
  background: rgba(255, 31, 61, 0.06);
  border: 1px solid rgba(255, 31, 61, 0.28);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.admin-danger-warn {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--primary);
}

@media (max-width: 720px) {
  .stats-diff-row { padding: 9px 10px; }
  .stats-diff-controls { gap: 8px; }
  .stats-diff-tab { flex: 1; padding: 7px 8px; font-size: 0.8rem; }
  .stats-diff-tabs { width: 100%; }
  .stats-diff-select { width: 100%; max-width: none; }
  .stats-diff-note { font-size: 0.74rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [23] v2.19.0 «리그 평균 누적 원장» 기준선 출처 표시
   원장 기준선일 때는 눈에 띄게(청록) 표시하고, 아직 실시간 집계 폴백 중이면
   원장이 얼마나 쌓였는지 진행 상황을 흐린 글씨로 함께 보여 준다.
   ══════════════════════════════════════════════════════════════════════════ */
.saber-lg-sample.is-ledger {
  color: var(--cyan);
  border-color: rgba(41, 216, 255, 0.34);
  cursor: help;
}
.saber-lg-ledger-progress {
  color: var(--text-4);
  font-size: 0.92em;
}

/* ══════════════════════════════════════════════════════════════════════════
   [24] v2.20.0 «시즌 리그 전체 선수 기록 + 골든글러브»
   시즌 기록 탭의 «내 구단 / 리그 전체» · «일반 기록 / 세이버» 세그먼트 토글,
   리그 모드에서 내 선수 행을 강조하는 배지, 그리고 골든글러브 수상 카드 그리드.
   ══════════════════════════════════════════════════════════════════════════ */
.season-stats-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(8, 14, 26, 0.6);
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-sub);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border-c); }
.seg-btn:hover { color: var(--text-main); background: rgba(90, 140, 210, 0.12); }
.seg-btn.active {
  color: #0a0e18;
  background: var(--accent);
}
.season-stats-hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-sub);
}
.season-stats-hint:empty { display: none; }

/* 리그 전체 모드에서 «내 선수» 행 강조 */
.season-row-mine > td {
  background: rgba(255, 204, 41, 0.07);
}
.season-mine-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #0a0e18;
  background: var(--accent);
  vertical-align: middle;
}

/* ── 골든글러브 ───────────────────────────────────────────────────────── */
.gg-summary {
  margin: 0 0 14px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-sub);
}
.gg-season { margin-bottom: 22px; }
.gg-season-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
.gg-season-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-sub);
}
.gg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.gg-card {
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gg-card-mine {
  border-color: rgba(255, 204, 41, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 204, 41, 0.16);
  background: linear-gradient(180deg, rgba(255, 204, 41, 0.08), rgba(14, 22, 40, 0.9));
}
.gg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.gg-slot {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.gg-mine-badge {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #0a0e18;
  background: var(--accent);
}
.gg-card-name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.gg-card-club {
  font-size: 0.74rem;
  color: var(--text-sub);
}
.gg-card-metric {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cyan);
}
.gg-statline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px dashed var(--border-c);
}
.gg-stat {
  font-size: 0.72rem;
  color: var(--text-main);
  font-weight: 700;
  white-space: nowrap;
}
/* 라벨(항목명)은 흐리게, 값은 밝게 — app.js 가 <em>라벨</em>값 구조로 그린다. */
.gg-stat em {
  font-style: normal;
  font-weight: 600;
  color: var(--text-sub);
  margin-right: 3px;
}

@media (max-width: 640px) {
  .season-stats-toggle-row { gap: 6px; }
  .seg-toggle { flex: 1 1 100%; }
  .seg-btn { flex: 1; padding: 8px 6px; font-size: 0.78rem; }
  .gg-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gg-card { padding: 9px 10px 10px; }
  .gg-card-name { font-size: 0.94rem; }
  .gg-stat { font-size: 0.68rem; }
}
@media (max-width: 380px) {
  .gg-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   [25] v2.21.0 — 순위 배지 · 시상식(경쟁 현황 / 골든글러브 / 타이틀)
   사용자 요청:
     · "선수기록에 순위 표시해주고 내구단은 그중 선수가 몇위인지 나오면 좋을거 같고"
     · "탭하나 만들어서 골든글러브 경쟁중이거 있으면 좋을거 같아 몇명의 선수만 말이야"
     · "타율왕 홈런왕 ... 세이브왕 승리왕 이런거 ... 기록 남게"
   ⚠️ 이 파일은 «뒤에 오는 규칙이 이긴다». 새 규칙은 반드시 파일 END 에 둔다.
   ========================================================================== */

/* ── 순위 배지 (표 셀 안 / 카드 이름 옆) ─────────────────────────────── */
.rank-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.45;
  vertical-align: middle;
  color: var(--text-sub);
  background: rgba(90, 140, 210, 0.14);
  border: 1px solid var(--border-c);
}
.rank-badge.rank-medal {
  padding: 0 2px;
  font-size: 0.74rem;
  color: inherit;
  background: none;
  border: none;
}
.rank-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  vertical-align: middle;
  color: var(--text-sub);
  background: rgba(90, 140, 210, 0.14);
  border: 1px solid var(--border-c);
}
.rank-chip.rank-chip-top {
  color: #0a0e18;
  background: var(--accent);
  border-color: transparent;
}

/* ── 시상식 서브탭 ───────────────────────────────────────────────────── */
.award-subtab-nav {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.award-subtab-nav::-webkit-scrollbar { display: none; }
.award-subtab-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  background: rgba(14, 22, 40, 0.6);
  color: var(--text-sub);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.award-subtab-btn:hover { color: var(--text-main); }
.award-subtab-btn.active {
  color: #0a0e18;
  background: var(--accent);
  border-color: transparent;
}
.award-group-title {
  margin: 18px 0 9px;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-main);
  border-left: 3px solid var(--cyan);
  padding-left: 8px;
}
.award-group-title:first-of-type { margin-top: 4px; }

/* ── 경쟁 현황 ───────────────────────────────────────────────────────── */
.award-race-head {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  background: rgba(41, 216, 255, 0.06);
}
.award-race-head-main {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-main);
}
.award-race-head-sub {
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-sub);
}
.race-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.race-card {
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  padding: 10px 11px 11px;
}
.race-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-c);
}
.race-card-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.race-qual-tag,
.race-metric-tag {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(41, 216, 255, 0.12);
  border: 1px solid rgba(41, 216, 255, 0.26);
}
.race-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.race-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px;
  border-radius: 3px;
}
.race-row-top { background: rgba(255, 204, 41, 0.07); }
.race-row-mine {
  background: rgba(255, 204, 41, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 204, 41, 0.3);
}
.race-rank {
  flex: 0 0 30px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sub);
  text-align: center;
}
.race-who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.race-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-club {
  font-size: 0.64rem;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-val {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.race-gap {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-sub);
}
.race-empty {
  margin: 6px 0 2px;
  font-size: 0.72rem;
  color: var(--text-sub);
}
.race-mybest {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-c);
  font-size: 0.7rem;
  color: var(--text-sub);
}
.race-mybest strong { color: var(--text-main); font-weight: 700; }
.race-mybest em {
  font-style: normal;
  font-weight: 800;
  color: var(--accent);
}

/* ── 확정 타이틀 카드 ────────────────────────────────────────────────── */
.title-card {
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.title-card-mine {
  border-color: rgba(255, 204, 41, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 204, 41, 0.16);
  background: linear-gradient(180deg, rgba(255, 204, 41, 0.08), rgba(14, 22, 40, 0.9));
}
.title-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.title-card-slot {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.title-card-value {
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.title-card-name {
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.title-card-sub {
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-c);
  font-size: 0.68rem;
  color: var(--text-sub);
}

@media (max-width: 560px) {
  .race-grid { grid-template-columns: 1fr; }
  .award-subtab-btn { padding: 7px 11px; font-size: 0.74rem; }
  .title-card-value { font-size: 1.14rem; }
  .rank-badge { font-size: 0.58rem; }
}


/* ============================================================================
   [26] 🆕 v2.21.1 «시상식 경쟁 현황 자동 갱신» 표시
   사용자 요청: "시상식 부분 경쟁현황 자동갱신 되면 좋을거 같은데 선수기록 자동갱신되는것처럼 말이야"
   선수 기록 탭의 [16] 갱신 표시와 완전히 같은 모양을 쓰되, 시상식 제목 옆에 붙는
   도구 묶음(.award-race-tools)만 새로 만든다. 골든글러브/타이틀 서브탭에서는 숨긴다.
   ============================================================================ */
.panel-title .award-race-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.panel-title .award-race-tools.hidden { display: none; }
@media (max-width: 560px) {
  .panel-title .award-race-tools { gap: 6px; }
  .panel-title .award-race-tools .stats-freshness { font-size: 10.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   [27] v2.22.0 — 시상식 경쟁 현황 보조 안내 문구
   · .award-group-note   : 골든글러브 블록 아래의 설명 한 줄
   · .race-empty-hint    : 「규정 N이닝 필요 · 현재 리그 최다 M이닝」 부가 안내
   ⚠️ 동일 특정도 규칙은 나중에 선언된 쪽이 이긴다. 이 섹션은 파일 «맨 끝»에 둔다.
   ═══════════════════════════════════════════════════════════════════════ */
.award-group-note {
  margin: -4px 0 10px;
  padding-left: 11px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-sub);
}
.race-empty-hint {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--cyan);
  opacity: 0.9;
}