:root {
  --bg-primary: #0a1410;
  --bg-elevated: #0e1a15;
  --bg-card: #12211a;
  --bg-card-hover: #17281f;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --accent: #24e583;
  --accent-soft: rgba(36, 229, 131, 0.14);
  --accent-dark: #12a35c;
  --accent-2: #00d4ff;
  --live-red: #ff4757;
  --gold: #ffd166;
  --text-primary: #f3f7f4;
  --text-secondary: #9fb8ab;
  --text-muted: #648274;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* 다이나믹/화려한 톤을 위한 그라디언트+글로우 팔레트 - 경기 목록의 히어로 카드/라이브 강조에 사용 */
  --gradient-brand: linear-gradient(135deg, #24e583 0%, #00d4ff 100%);
  --gradient-live: linear-gradient(120deg, #24e583 0%, #12d9c4 45%, #00aaff 100%);
  --gradient-gold: linear-gradient(135deg, #ffd166 0%, #ff9f4d 100%);
  --glow-live: 0 0 0 1px rgba(36, 229, 131, 0.55), 0 0 28px rgba(0, 212, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* 라이트 모드 - 밤 경기장 사진(body 배경)은 라이트 UI와 어울리지 않아 그대로 옅게 만드는 대신
   아예 다른 배경(브랜드 그린 글로우만 남긴 옅은 배경, 아래 body 규칙)으로 대체한다. 나머지는 구조
   토큰(배경/테두리/글자색)만 밝은 값으로 바꿔주면, 그 토큰을 참조하는 대부분의 컴포넌트가 따라온다 -
   accent/live-red/gold 같은 의미색은 라이트 배경에서도 그대로 잘 보여서 유지한다.
   설정 탭의 테마 토글(js/theme.js)이 :root에 data-theme="light"를 붙이면 이 값들로 바뀐다. */
:root[data-theme="light"] {
  --bg-primary: #f4f8f5;
  --bg-elevated: #eaf1ec;
  --bg-card: #ffffff;
  --bg-card-hover: #eef6f0;
  --border: rgba(18, 33, 26, 0.1);
  --border-strong: rgba(18, 33, 26, 0.18);
  --text-primary: #12211a;
  --text-secondary: #4d6358;
  --text-muted: #7c9086;
  --shadow: 0 8px 24px rgba(18, 33, 26, 0.12);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* PC처럼 뷰포트가 900px보다 넓으면 예전엔 경기장 사진이 가운데 900px에만 떠 있고 양옆은
   그냥 밋밋한 단색이었다 - 사진을 화면 전체로 깔고(cover), 잔디 스트라이프 패턴 + 브랜드
   컬러(그린/시안) 플로드라이트 글로우를 얹어서 넓은 화면에서도 여백이 "비어있다"기보단
   "경기장 배경 위에 앱이 떠 있다"는 느낌이 나게 한다. */
body {
  font-family: "Segoe UI", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 60px, transparent 60px, transparent 120px) center top / 100% 100% fixed,
    radial-gradient(circle at 10% -8%, rgba(36, 229, 131, 0.18), transparent 42%) center top / 100% 100% no-repeat fixed,
    radial-gradient(circle at 92% -4%, rgba(0, 212, 255, 0.14), transparent 40%) center top / 100% 100% no-repeat fixed,
    linear-gradient(180deg, rgba(10, 20, 16, 0.4) 0%, rgba(10, 20, 16, 0.78) 55%, var(--bg-primary) 85%) center top / 100% 100% no-repeat fixed,
    url("/img/stadium.png") center top / cover no-repeat fixed;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 10% -8%, rgba(36, 229, 131, 0.16), transparent 45%) center top / 100% 100% no-repeat fixed,
    radial-gradient(circle at 92% -4%, rgba(0, 212, 255, 0.1), transparent 42%) center top / 100% 100% no-repeat fixed,
    var(--bg-primary);
}

/* 아래는 배경/테두리를 변수가 아니라 rgba 값으로 직접 박아둔 큰 뼈대 요소들(상단바/하단 네비/로그인
   게이트/넓은 화면 비네트) - 위 :root 토큰 재정의만으로는 안 바뀌어서 라이트 모드용으로 따로 덮어쓴다.
   selector 등장 순서가 아니라 :root[data-theme="light"] 쪽이 속성 선택자만큼 더 구체적이라 항상
   이긴다 - 그래서 원래 규칙 바로 옆이 아니라 이렇게 한데 모아둬도 무방하다. */
:root[data-theme="light"] .topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(234, 244, 238, 0.94) 100%);
  background-image:
    repeating-linear-gradient(90deg, rgba(18, 33, 26, 0.025) 0px, rgba(18, 33, 26, 0.025) 40px, transparent 40px, transparent 80px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(234, 244, 238, 0.94) 100%);
}
:root[data-theme="light"] .kst-badge {
  background: rgba(18, 33, 26, 0.05);
  border-color: rgba(18, 33, 26, 0.12);
}
:root[data-theme="light"] .bottom-nav {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.94) 0%, rgba(234, 244, 238, 0.94) 100%);
}
:root[data-theme="light"] .auth-gate {
  background:
    radial-gradient(circle at 10% -8%, rgba(36, 229, 131, 0.14), transparent 42%) center top / 100% 100% no-repeat fixed,
    radial-gradient(circle at 92% -4%, rgba(0, 212, 255, 0.1), transparent 40%) center top / 100% 100% no-repeat fixed,
    var(--bg-primary);
}
@media (min-width: 760px) {
  :root[data-theme="light"] .app {
    background: rgba(255, 255, 255, 0.55);
    box-shadow:
      0 0 0 1px rgba(18, 33, 26, 0.08),
      50px 0 90px -30px rgba(18, 33, 26, 0.18),
      -50px 0 90px -30px rgba(18, 33, 26, 0.18);
  }
}

.app {
  max-width: 900px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 넓은 화면에서는 앱 컬럼 자체에 살짝 비네트+틴트를 줘서 배경 위에 "떠 있는 카드"처럼 보이게 한다
   (bottom-nav가 fixed로 실제 뷰포트 바닥에 붙어있어야 해서 .app 높이/마진은 그대로 둔다). */
@media (min-width: 760px) {
  .app {
    background: rgba(6, 14, 10, 0.3);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.07),
      50px 0 90px -30px rgba(0, 0, 0, 0.65),
      -50px 0 90px -30px rgba(0, 0, 0, 0.65);
  }
}

/* ---------- 로그인 게이트(앱 실행 시 로그인 전까지 앱 본편을 가림) ---------- */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 10% -8%, rgba(36, 229, 131, 0.16), transparent 42%) center top / 100% 100% no-repeat fixed,
    radial-gradient(circle at 92% -4%, rgba(0, 212, 255, 0.12), transparent 40%) center top / 100% 100% no-repeat fixed,
    linear-gradient(180deg, rgba(10, 20, 16, 0.55) 0%, rgba(10, 20, 16, 0.85) 55%, var(--bg-primary) 90%) center top / 100% 100% no-repeat fixed,
    url("/img/stadium.png") center top / cover no-repeat fixed,
    var(--bg-primary);
}

.auth-gate-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow);
}

.auth-gate-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 12px;
}

.auth-gate-desc {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
}

.auth-gate-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.auth-gate-tab {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  padding: 8px;
  cursor: pointer;
}

.auth-gate-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

#auth-gate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#auth-gate-form input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13.5px;
  padding: 11px 12px;
}

#auth-gate-form input:focus {
  outline: none;
  border-color: var(--accent);
}

#gate-signup-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Topbar ---------- */
.theme-toggle-row {
  display: flex;
  gap: 8px;
}
.theme-toggle-btn {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.theme-toggle-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--text-primary);
}
.install-banner-icon {
  flex: none;
  font-size: 16px;
}
.install-banner-text {
  flex: 1;
  line-height: 1.4;
}
.install-banner-action {
  flex: none;
  background: var(--accent);
  color: #06140d;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.install-banner-close {
  flex: none;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(13, 28, 21, 0.9) 0%, rgba(10, 20, 16, 0.88) 100%);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015) 0px,
      rgba(255, 255, 255, 0.015) 40px,
      transparent 40px,
      transparent 80px
    ),
    linear-gradient(180deg, rgba(13, 28, 21, 0.9) 0%, rgba(10, 20, 16, 0.88) 100%);
  box-shadow: 0 1px 0 rgba(36, 229, 131, 0.28), 0 10px 26px -10px rgba(36, 229, 131, 0.2);
}

/* 스타디움 플로드라이트를 연상시키는 은은한 사선 광택이 천천히 훑고 지나간다 */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.05) 48%, transparent 62%);
  background-size: 220% 100%;
  animation: topbarSheen 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes topbarSheen {
  0%, 100% { background-position: -120% 0; }
  50% { background-position: 120% 0; }
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4dffa8, var(--accent) 55%, var(--accent-dark));
  color: #ffffff;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.5px;
  animation: brandGlow 3.2s ease-in-out infinite;
}

@keyframes brandGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(36, 229, 131, 0.35), 0 0 18px rgba(36, 229, 131, 0.22); }
  50% { box-shadow: 0 4px 16px rgba(36, 229, 131, 0.45), 0 0 26px rgba(0, 212, 255, 0.32); }
}

.brand-accent {
  color: var(--accent);
  font-weight: 400;
}

.kst-badge {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 4px 9px;
  cursor: default;
  white-space: nowrap;
}

/* ---------- Bottom nav ----------
   position: sticky는 모바일 브라우저 주소창이 스크롤에 따라 접혔다 펴졌다 하면서 뷰포트 높이가
   바뀔 때 간헐적으로 사라지는 문제가 있어, 뷰포트에 직접 고정되는 fixed로 바꿨다
   (.content에 그만큼 padding-bottom을 줘서 내용이 가려지지 않게 한다). */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 900px;
  margin: 0 auto;
  z-index: 20;
  display: flex;
  background: linear-gradient(0deg, rgba(13, 28, 21, 0.9) 0%, rgba(10, 20, 16, 0.9) 100%);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.nav-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 7px 1px;
  margin: 0 2px;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-btn svg {
  width: 22px;
  height: 22px;
  transition: transform 0.25s var(--ease);
}

.nav-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
}

.nav-btn:hover {
  color: var(--text-secondary);
}

.nav-btn.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.nav-btn.active svg {
  transform: translateY(-1px) scale(1.06);
}

/* "더보기" 토글 버튼 - nav-btn과 똑같이 생겼지만 실제 화면 전환용 view가 없는 팝오버 스위치라
   router.js의 범용 .nav-btn 클릭 핸들러(showView 등)에 절대 걸리면 안 돼서 클래스를 분리했다. */
.more-toggle-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 7px 1px;
  margin: 0 2px;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.more-toggle-btn svg {
  width: 22px;
  height: 22px;
}

.more-toggle-btn span {
  font-size: 10.5px;
  font-weight: 600;
}

.more-toggle-btn:hover,
.more-toggle-btn.active {
  color: var(--accent);
}

.more-toggle-btn.active {
  background: var(--accent-soft);
}

/* "더보기" 팝오버 - 이적시장/AI분석/명예의전당을 여기 담아둔다. 바텀 네비게이션 바로 위에
   떠오르고, 안의 버튼들은 원래 .nav-btn 그대로라 router.js 로직을 하나도 안 건드린다. */
.more-menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 900px;
  margin: 0 auto;
  z-index: 19;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(180deg, rgba(18, 33, 26, 0.98) 0%, rgba(10, 20, 16, 0.98) 100%);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 8px;
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.more-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.more-menu .nav-btn {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
}

.more-menu .nav-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.more-menu .nav-btn span {
  font-size: 14px;
  font-weight: 700;
}

.more-menu .nav-btn:hover {
  background: var(--bg-elevated);
}

/* ---------- Content / Views ---------- */
.content {
  flex: 1;
  padding: 20px;
  /* 하단 탭이 fixed라 문서 흐름에서 빠지므로, 그만큼 여백을 줘서 내용 마지막 줄이 가려지지 않게 한다 */
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* 앱인토스 빌드 전용 - 토스 미니앱 브랜딩 가이드가 탭바를 화면에 딱 붙은 바가 아니라 가장자리에서
   띄운 "플로팅" 형태로 쓰도록 요구한다. 1차 시도(가장자리에서 16px, 모서리만 둥글게)는 화면 폭
   대부분을 차지해 여전히 "붙어있는 바"로 보였는지 2026-08-25에도 같은 사유로 반려됐다 - 양옆 여백을
   훨씬 크게 벌리고 높이만큼 완전히 둥글린 알약(pill) 모양으로, 배경과 뚜렷이 분리되는 카드처럼
   보이도록 다시 만든다. toss-app/copy-assets.cjs가 앱인토스용 dist/index.html에만
   <html data-toss-app="1">을 심어주므로, 일반 웹/PWA/안드로이드 앱에는 이 규칙이 전혀 적용되지 않는다. */
html[data-toss-app] .bottom-nav {
  left: 28px;
  right: 28px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  max-width: calc(900px - 56px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

html[data-toss-app] .nav-btn,
html[data-toss-app] .more-toggle-btn {
  border-radius: 999px;
}

html[data-toss-app] .more-menu {
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  padding-bottom: 78px;
}

/* 토스 미니앱은 표준 웹 푸시(알림)를 지원 안 한다 - 경기 목록의 알림벨(watch-bell)과 설정 탭의
   "골 알림 받기" 버튼을 숨긴다. push.js에서 isTossApp을 import해서 JS로 조건부 렌더링했더니
   원인 불명으로 미니앱 전체가 먹통이 되는 게 재현돼서(2026-08-29, 아주 긴 이등분 탐색 끝에 확인 -
   push.js를 절대 건드리지 않는 게 안전하다고 결론남), 대신 순수 CSS로 숨긴다. */
html[data-toss-app] .watch-bell,
html[data-toss-app] #notify-btn {
  display: none;
}

/* 앱인토스 심사 반려(2026-09-02) - "내비게이션 바의 뒤로가기 버튼과 미니앱 자체 헤더 및 뒤로가기
   버튼이 함께 노출돼요. 중복된 버튼을 제거해 주세요." 토스가 미니앱 웹뷰 상단에 자체 뒤로가기
   버튼을 이미 그려주기 때문에, 화면 안에 우리가 따로 그리는 "← 목록으로" 류 버튼들은 중복이다.
   히스토리 뒤로가기 자체는 토스 쪽 버튼이 처리해줄 거라 안 보여도 기능이 빠지지 않는다. */
html[data-toss-app] .back-btn,
html[data-toss-app] .league-back-btn {
  display: none;
}

/* 같은 반려 건 - "토스 로그인 외에 별도의 자체 로그인 기능을 제공할 수 없어요." 아이디/비번
   자체 로그인 시스템 전체(로그인·회원가입 폼)를 토스 빌드에서만 숨긴다 - 실제 로그인 SDK(User API)는
   이 프로젝트에서 앱 전체를 먹통으로 만든 이력이 네 번 있어(push.js 관련 메모리 참고) 붙이지 않기로
   했다(사용자 확인, 2026-09-02) - 대신 로그인 없이 쓸 수 있는 기능(경기/뉴스/즐겨찾기/명예의전당
   열람)만 남기고, 로그인이 있어야 하는 기능(집관인증/친구/포인트 적립/글쓰기·댓글)은 토스에서는
   그냥 없는 것으로 취급한다 - 이 기능들은 원래도 JS에서 isLoggedIn()으로 감싸져 있어서 로그인
   자체가 안 뜨면 자연히 다 숨겨진다(별도 JS 수정 불필요). 글쓰기 버튼만 누르면 "로그인이 필요해요"
   경고만 뜨는 막다른 길이라 이것도 같이 숨긴다. */
html[data-toss-app] #community-write-btn {
  display: none;
}

/* myTeam.js가 로그인 상태에 따라 이 두 요소의 display를 JS로 계속 인라인 토글하기 때문에(el.guestWrap.
   style.display = "block" 등), 외부 스타일시트 규칙은 인라인 스타일에 밀려 무시된다 - 여기서만
   !important로 강제한다. */
html[data-toss-app] #auth-guest-wrap,
html[data-toss-app] #auth-form-wrap {
  display: none !important;
}

/* 앱인토스 심사 반려(2026-09-02, 두 번째 건) - "미니앱 접속 직후 배너시트가 바로 노출돼요. 미니앱
   진입 시 즉시 배너시트가 나타나지 않도록 수정해 주세요." updateNotes.js가 앱 시작 600ms 뒤 자동으로
   띄우는 "업데이트 소식" 팝업(#update-notes-modal)을 가리키는 것으로 보인다 - 사용자 행동 없이 뜨는
   유일한 시트다. JS 타이머 자체는 그대로 두고(건드릴수록 위험한 부류의 코드는 최소로 손댄다는 원칙),
   그 결과로 뜨는 모달만 토스 빌드에서 강제로 숨긴다 - JS가 매번 inline display를 다시 설정하므로
   !important 필요. */
html[data-toss-app] #update-notes-modal {
  display: none !important;
}

/* 토스 광고 - 2026-09-09 하단 플로팅 배너에서 전면(풀스크린) 광고로 교체했다가, 2026-09-30
   심사 반려("유저가 예상하기 어려운 시점에 광고가 노출돼요")로 다시 이 배너를 전용 CTA 버튼으로
   부활시켰다(toss-ads.js 참고) - 화면 아무 곳이나 눌러서 광고가 뜨는 대신, 이 버튼을 직접 눌러야만
   광고가 뜬다. 기본값은 숨김(display:none) - toss-ads.js가 광고를 준비하는 동안에만 JS로 보여준다
   (일반 웹/PWA/안드로이드 빌드는 이 스크립트 자체가 안 실행되니 항상 숨김 상태 그대로 유지됨). */
.toss-ad-banner {
  display: none;
}

html[data-toss-app] .toss-ad-banner {
  position: fixed;
  left: 28px;
  right: 28px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  max-width: calc(900px - 56px);
  margin: 0 auto;
  z-index: 40;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: 12px 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

html[data-toss-app] .content {
  /* 2026-09-30 광고 CTA 배너가 부활하면서(탭바 위 88px 지점) 다시 그만큼 여유가 더 필요하다. */
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}

.section-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Date nav ---------- */
.date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}

.date-arrow, .refresh-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
}

.date-arrow:hover, .refresh-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(36, 229, 131, 0.25);
}

/* 시간순 보기 버튼이 켜져 있는 동안(#time-sort-btn.active) 눌러야 할 상태임을 색으로 표시한다. */
#time-sort-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.refresh-btn {
  margin-left: 8px;
  font-size: 16px;
}

.refresh-btn.spinning {
  animation: spin 0.6s linear;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.date-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: none;
}

.date-label {
  min-width: 160px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}

/* ---------- Featured / hero match ---------- */
.featured-section {
  margin-bottom: 22px;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 14px;
  font-weight: 800;
}

.section-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.section-link:hover {
  text-decoration: underline;
}

.watch-bell {
  background: none;
  border: none;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  /* 목록 행에 남는 유일한 탭 대상이라(중계/티켓은 상세로 옮김), 터치하기 편하게 여백을 넉넉히 둔다. */
  padding: 8px;
  margin: -8px;
}

.watch-bell:hover {
  transform: scale(1.1);
}

.watch-bell.active {
  opacity: 1;
}

.watch-bell-unsupported {
  opacity: 0.2;
}

.watch-bell-unsupported:hover {
  transform: none;
}

.hero-match-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 22px 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* 배경에 은은하게 번지는 그라디언트 글로우 두 개를 겹쳐서 "화려한" 입체감을 준다 */
.hero-match-card::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 150%;
  background: radial-gradient(circle at 18% 0%, rgba(36, 229, 131, 0.22), transparent 55%),
    radial-gradient(circle at 88% 12%, rgba(0, 212, 255, 0.16), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* 호버 시 은은하게 떠오르는 그라디언트 테두리 링 */
.hero-match-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-brand);
  opacity: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.hero-match-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.hero-match-card:hover::after {
  opacity: 0.55;
}

/* 라이브 경기는 그라디언트 글로우가 은은하게 숨쉬듯 펄스 */
.hero-match-card.is-live {
  box-shadow: var(--glow-live);
  animation: heroLiveGlow 2.4s ease-in-out infinite;
}

@keyframes heroLiveGlow {
  0%, 100% { box-shadow: var(--glow-live); }
  50% { box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.6), 0 0 34px rgba(36, 229, 131, 0.38), 0 10px 30px rgba(0, 0, 0, 0.45); }
}

.hero-match-top, .hero-match-teams {
  position: relative;
  z-index: 1;
}

.hero-match-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}

.hero-match-top-info {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
}

.hero-match-comp-emblem {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 7px;
  background: #eef2ef;
  padding: 2px;
}

.hero-match-comp-name {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.hero-match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.hero-match-team span {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.hero-match-crest {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 50%;
  background: #eef2ef;
  padding: 9px;
  box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px rgba(36, 229, 131, 0.22), 0 6px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.hero-match-team:hover .hero-match-crest {
  transform: scale(1.07);
  box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px rgba(36, 229, 131, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3);
}

.hero-match-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}

.hero-match-score {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hero-match-card.is-live .hero-match-score {
  background: var(--gradient-live);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(36, 229, 131, 0.35));
}

.hero-match-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.hero-match-status.live {
  color: #06241c;
  background: var(--gradient-live);
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(36, 229, 131, 0.35);
}

.hero-match-status.live .live-dot {
  background: #06241c;
  box-shadow: none;
  animation: pulse 1.2s infinite;
}

.hero-match-status.scheduled {
  color: var(--gold);
  background: rgba(255, 209, 102, 0.1);
}

.hero-match-status.stale {
  color: var(--gold);
  background: rgba(255, 209, 102, 0.1);
}

/* ---------- Matches list ---------- */
.competition-group {
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.competition-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px 20px;
  background: linear-gradient(90deg, rgba(36, 229, 131, 0.09), rgba(255, 255, 255, 0.02) 65%);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.competition-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-brand);
}

.competition-header-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.competition-header-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-header-count {
  font-size: 11px;
  font-weight: 800;
  color: #06241c;
  background: var(--gradient-brand);
  border-radius: 999px;
  padding: 2px 9px;
}

.competition-header-arrow {
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
  /* 화살표만 눌러서 접고 펴게 분리한 뒤로(나머지 헤더는 리그 순위로 이동) 탭 영역이 좁아져서 여백을 둔다. */
  padding: 6px 2px 6px 10px;
  margin: -6px -2px -6px 0;
}

.competition-group.collapsed .competition-header-arrow {
  transform: rotate(-90deg);
}

.competition-group.collapsed .competition-header {
  border-bottom: none;
}

.competition-emblem {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 7px;
  background: #eef2ef;
  padding: 2px;
}

/* ---------- 경기 목록의 "다른 리그 보기" (변방 리그 선택기) ---------- */
.league-picker {
  margin-bottom: 22px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}

.league-picker-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}

.league-picker-toggle span:first-child {
  flex: 1;
}

.league-picker-toggle .league-group-toggle-arrow {
  transition: transform 0.2s var(--ease);
}

.league-picker-toggle.open .league-group-toggle-arrow {
  transform: rotate(180deg);
}

.league-picker-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 12px;
}

.league-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.league-picker-row:hover {
  background: var(--bg-card-hover);
}

.league-picker-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.league-picker-row .league-row-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
}

.match-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

/* 시간순 모드(renderMatchesByTime) 전용 - 대회 그룹 헤더가 없어서 행 위에 작은 대회 태그를 한 줄
   더 얹는다. 기존 5열 그리드는 그대로 두고, 태그만 전체 폭으로 첫 행에 배치한다. */
.match-row.with-comp-tag {
  grid-template-rows: auto auto;
  padding-top: 8px;
}
.match-row-comp-tag {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.match-row-comp-emblem {
  width: 14px;
  height: 14px;
  object-fit: contain;
  border-radius: 3px;
}

.match-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.match-row.is-live {
  background: linear-gradient(90deg, rgba(36, 229, 131, 0.07), transparent 45%);
}

.match-row.is-live::before {
  opacity: 1;
}

.match-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}


.match-row:last-child {
  border-bottom: none;
}

.match-row:hover {
  background: var(--bg-card-hover);
}

.match-row:hover::before {
  opacity: 1;
}

.match-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.match-status.live {
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.2s infinite, liveDotRipple 1.8s infinite;
}

@keyframes liveDotRipple {
  0% { box-shadow: 0 0 0 0 rgba(36, 229, 131, 0.5); }
  70% { box-shadow: 0 0 0 5px rgba(36, 229, 131, 0); }
  100% { box-shadow: 0 0 0 0 rgba(36, 229, 131, 0); }
}

.live-dot.result-win {
  background: var(--accent);
}

.live-dot.result-loss {
  background: var(--live-red);
}

.live-dot.result-draw {
  background: var(--text-muted);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.match-status.finished {
  color: var(--text-muted);
}

.match-status.scheduled {
  color: var(--gold);
}

.match-status.stale {
  color: var(--gold);
}

.team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
  cursor: pointer;
}

.team.away {
  justify-content: flex-end;
  text-align: right;
  flex-direction: row-reverse;
}

.team-crest {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  background: #eef2ef;
  padding: 2px;
}

.team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.red-card-badge {
  flex-shrink: 0;
  font-size: 11px;
  margin-left: 2px;
}

.score-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  min-width: 56px;
  justify-content: center;
}

.score-box.live-score {
  background: var(--gradient-live);
  color: #06241c;
  font-weight: 900;
  box-shadow: 0 3px 12px rgba(36, 229, 131, 0.3);
}

.score-box.live-score .score-dash {
  color: rgba(6, 36, 28, 0.55);
}

.score-dash {
  color: var(--text-muted);
  font-weight: 400;
}

.empty-state, .loading, .error-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.error-state {
  color: var(--live-red);
}

/* ---------- 부드러운 로딩(스켈레톤) / 콘텐츠 페이드인 ---------- */
@keyframes contentFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.fade-in {
  animation: contentFadeIn 0.28s var(--ease, ease);
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-row {
  height: 64px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card) 37%, var(--bg-elevated) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}

@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Leagues list / detail ---------- */
.league-search-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  transition: border-color 0.2s var(--ease);
}

.league-search-input::placeholder {
  color: var(--text-muted);
}

.league-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.league-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 리그를 지역/성격별로 묶어 접었다 펼치는 그룹(트리) - 팀 아코디언(.transfer-team-*)과 같은 언어 */
.league-group {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.league-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s var(--ease);
}

.league-group-toggle:hover {
  background: var(--bg-card-hover);
}

.league-group-toggle-name {
  flex: 1;
  font-weight: 800;
  font-size: 14px;
}

.league-group-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: 999px;
  padding: 2px 8px;
}

.league-group-toggle-arrow {
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
}

.league-group-toggle.open .league-group-toggle-arrow {
  transform: rotate(180deg);
}

.league-group-body {
  flex-direction: column;
  gap: 8px;
  padding: 0 8px 8px;
  background: rgba(255, 255, 255, 0.02);
}

.league-group-body .league-row {
  border-radius: 10px;
}

.league-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.league-row:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.league-row-emblem {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
  background: #eef2ef;
  padding: 3px;
  flex-shrink: 0;
}

.league-row-name {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
}

.league-row-arrow {
  color: var(--text-muted);
  font-size: 16px;
}

/* 리그별 테마 배경 - 리그 탭에서 테마 있는 그룹을 펼치거나(leagues.js) 그 리그 경기 상세로 들어가면
   (matches.js) 화면 전체에 그 리그 톤 배경 + 실제 API-Football 엠블럼 워터마크가 자동으로 켜진다
   (2026-08-28/29 사용자 요청, 각 리그 공식 그래픽 참고). 두 화면(#view-leagues, #view-detail)이
   완전히 같은 메커니즘을 쓰므로 규칙을 합쳐서 하나로 관리한다 - 리그가 늘어나도 테마 토큰 블록만
   추가하면 된다. ::before(배경 그라디언트)/::after(브랜드 텍스처)를 뷰 뒤에 고정해서 카드들이 그
   위에 얹힌 것처럼 보이게 하고, .theme-emblem-watermark(<img>, index.html)가 그 리그의 실제 엠블럼을
   크게 반투명으로 띄운다. */
#view-leagues,
#view-detail {
  position: relative;
  isolation: isolate;
}
#view-leagues::before,
#view-leagues::after,
#view-detail::before,
#view-detail::after {
  content: "";
  position: absolute;
  inset: -24px -16px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
#view-leagues[data-theme]::before,
#view-detail[data-theme]::before {
  opacity: 1;
  background: var(--t-bg);
}
#view-leagues[data-theme]::after,
#view-detail[data-theme]::after {
  opacity: 1;
  background: var(--t-motif);
}

/* position:absolute였을 때는 #view-leagues/#view-detail의 "전체 콘텐츠 높이"(순위표가 길면 그만큼
   커짐) 기준으로 가운데 정렬돼서, 실제로는 화면 아래쪽 스크롤해야 보이는 위치에 있었다(사용자 제보,
   2026-08-29) - fixed로 바꿔서 스크롤과 무관하게 항상 "지금 보이는 화면"의 정중앙에 고정한다. */
.theme-emblem-watermark {
  position: fixed;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  filter: drop-shadow(0 0 40px var(--t-glow, transparent));
}
#view-leagues[data-theme] .theme-emblem-watermark,
#view-detail[data-theme] .theme-emblem-watermark {
  opacity: 0.1;
}

/* 리그당 토큰 3종(--t-bg 바탕 그라디언트, --t-motif 브랜드 텍스처, --t-glow 워터마크/카드 글로우) -
   두 화면 다 같은 값을 쓰므로 id를 묶어서 한 번만 정의한다. */
#view-leagues[data-theme="kleague"],
#view-detail[data-theme="kleague"] {
  --t-accent: #e2273f;
  --t-glow: rgba(226, 39, 63, 0.5);
  --t-bg: linear-gradient(200deg, #10193a 0%, #060a1c 55%, #050814 100%),
    linear-gradient(118deg, transparent 0%, transparent 38%, rgba(226, 39, 63, 0.55) 43%, rgba(226, 39, 63, 0.32) 49%, transparent 55%, transparent 100%),
    linear-gradient(118deg, transparent 0%, transparent 56%, rgba(255, 207, 77, 0.28) 60%, transparent 64%, transparent 100%);
  --t-motif: radial-gradient(180px 180px at 78% 28%, rgba(255, 90, 90, 0.7), rgba(226, 39, 63, 0.2) 45%, transparent 72%),
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 3px, transparent 3.5px) 82% 60% / 100% 100% no-repeat,
    radial-gradient(circle, rgba(255, 207, 77, 0.8) 0 1.6px, transparent 2px) 90% 82% / 100% 100% no-repeat;
}
#view-leagues[data-theme="pl"],
#view-detail[data-theme="pl"] {
  --t-accent: #a855f7;
  --t-glow: rgba(168, 85, 247, 0.55);
  --t-bg: linear-gradient(165deg, #2c0c48 0%, #150629 62%, #070312 100%);
  --t-motif: radial-gradient(240px 240px at 84% 26%, rgba(181, 101, 240, 0.35), transparent 70%),
    radial-gradient(200px 200px at 6% 80%, rgba(124, 31, 160, 0.25), transparent 70%);
}
#view-leagues[data-theme="pd"],
#view-detail[data-theme="pd"] {
  --t-accent: #d81f2e;
  --t-glow: rgba(216, 31, 46, 0.5);
  --t-bg: linear-gradient(160deg, #240406 0%, #0d0202 65%, #050101 100%);
  --t-motif: radial-gradient(300px 200px at 90% 10%, rgba(255, 90, 99, 0.25), transparent 70%),
    linear-gradient(118deg, transparent 0%, transparent 42%, rgba(216, 31, 46, 0.5) 46%, rgba(216, 31, 46, 0.26) 51%, transparent 56%, transparent 100%);
}
#view-leagues[data-theme="bl1"],
#view-detail[data-theme="bl1"] {
  --t-accent: #b8172f;
  --t-glow: rgba(184, 23, 47, 0.5);
  --t-bg: linear-gradient(160deg, #260306 0%, #0d0202 65%, #050101 100%);
  --t-motif: radial-gradient(280px 280px at 88% 20%, rgba(255, 107, 82, 0.3), transparent 68%);
}
#view-leagues[data-theme="sa"],
#view-detail[data-theme="sa"] {
  --t-accent: #1560d8;
  --t-glow: rgba(21, 96, 216, 0.5);
  --t-bg: linear-gradient(160deg, #041025 0%, #020814 65%, #010409 100%);
  --t-motif: radial-gradient(260px 260px at 82% 24%, rgba(79, 178, 255, 0.32), transparent 68%);
}
#view-leagues[data-theme="fl1"],
#view-detail[data-theme="fl1"] {
  --t-accent: #4a5ce0;
  --t-glow: rgba(74, 92, 224, 0.45);
  --t-bg: linear-gradient(160deg, #070b2c 0%, #030512 65%, #01020a 100%);
  --t-motif: linear-gradient(120deg, transparent 0%, transparent 42%, rgba(74, 92, 224, 0.38) 47%, transparent 55%, transparent 100%);
}
#view-leagues[data-theme="mls"],
#view-detail[data-theme="mls"] {
  --t-accent: #d4af6a;
  --t-glow: rgba(240, 210, 122, 0.55);
  --t-bg: linear-gradient(160deg, #0b0f26 0%, #05070f 65%, #030408 100%);
  --t-motif: radial-gradient(280px 280px at 80% 22%, rgba(240, 210, 122, 0.26), transparent 68%);
}
#view-leagues[data-theme="cl"],
#view-detail[data-theme="cl"] {
  --t-accent: #4fd8ff;
  --t-glow: rgba(0, 229, 255, 0.6);
  --t-bg: linear-gradient(160deg, #0d1660 0%, #230a5e 55%, #06071e 100%);
  --t-motif: radial-gradient(300px 300px at 80% 16%, rgba(0, 229, 255, 0.3), transparent 70%),
    radial-gradient(260px 260px at 10% 74%, rgba(122, 63, 245, 0.35), transparent 70%);
}

/* 이 화면의 리그 그룹/행 카드는 원래 불투명 배경이라 뒤의 테마 그래픽이 안 비친다 - 테마가 켜져
   있을 땐 반투명하게 낮춰서 카드 아래로 배경이 은은하게 비치게 한다. */
#view-leagues[data-theme] .league-group {
  background: rgba(14, 26, 21, 0.72);
  backdrop-filter: blur(1px);
  transition: background 0.4s var(--ease);
}
#view-leagues[data-theme] .league-group-body .league-row {
  background: rgba(14, 26, 21, 0.6);
}

.league-back-btn {
  display: block;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 4px 0;
}

.league-back-btn:hover {
  color: var(--accent);
}

.league-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.league-detail-emblem {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
  background: #eef2ef;
  padding: 3px;
}

.league-detail-header span {
  font-size: 17px;
  font-weight: 800;
}

.top-players-jump-btn {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.top-players-wrap {
  margin-top: 22px;
}

.top-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
}

.top-player-row:hover {
  border-color: var(--accent);
}

.top-player-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-card);
  flex-shrink: 0;
}

.top-player-info {
  flex: 1;
  min-width: 0;
}

.top-player-name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-player-team {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.team-crest-tiny {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.top-player-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  min-width: 24px;
  text-align: right;
}

/* ---------- Transfer market ---------- */
.transfer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s var(--ease);
}

.transfer-row:last-child {
  border-bottom: none;
}

.transfer-row:hover {
  background: var(--bg-card-hover);
}

.transfer-player-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-card);
  flex-shrink: 0;
}

.transfer-info {
  flex: 1;
  min-width: 0;
}

.transfer-player-name {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.transfer-direction {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
}

.transfer-direction.in {
  color: var(--accent);
  background: var(--accent-soft);
}

.transfer-direction.out {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
}

.transfer-move {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  flex-wrap: wrap;
}

.transfer-team {
  display: flex;
  align-items: center;
  gap: 4px;
}

.transfer-team-crest {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 4px;
  background: #eef2ef;
}

.transfer-arrow {
  color: var(--text-muted);
}

.transfer-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

.transfer-count-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* 리그 안에서 팀별로 접었다 펼치는 아코디언 - 한 번에 다 그리면 렉이 걸려서 펼친 팀만 그린다 */
.transfer-team-group {
  border-bottom: 1px solid var(--border);
}

.transfer-team-group:last-child {
  border-bottom: none;
}

.transfer-team-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s var(--ease);
}

.transfer-team-toggle:hover {
  background: var(--bg-card-hover);
}

.transfer-team-toggle-name {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
}

.transfer-team-toggle-arrow {
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
}

.transfer-team-toggle.open .transfer-team-toggle-arrow {
  transform: rotate(180deg);
}

.transfer-team-body {
  background: rgba(255, 255, 255, 0.02);
}

.transfer-teams-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}

.standings-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}

table.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

/* 득점/실점 컬럼이 추가되면서 팀명 칸이 좁아져 줄바꿈되던 문제 - table-layout: fixed로 컬럼 폭을
   고정하고 팀명 칸만 넉넉히 잡은 뒤, 넘치는 이름은 말줄임표로 자른다. */
.standings-table th:first-child, .standings-table td:first-child { width: 11%; }
.standings-table th:nth-child(2), .standings-table td:nth-child(2) { width: 30%; }
.standings-table th:not(:first-child):not(:nth-child(2)), .standings-table td:not(:first-child):not(:nth-child(2)) { width: 7.375%; }

.standings-table thead th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}

.standings-table tbody td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  overflow: hidden;
}

.standings-table tbody tr:last-child td {
  border-bottom: none;
}

.standings-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.standings-table tbody tr.live-row td {
  background: var(--accent-soft);
}

.standings-table tbody tr.live-row td:first-child {
  border-left: 3px solid var(--accent);
}

/* 경기 상세 "순위" 탭에서 지금 보고 있는 두 팀(홈/원정)을 표에서 바로 찾을 수 있게 강조한다
   (2026-09-14 요청 - "초록색으로 눈에 잘 보이게"). live-row보다 진하게 줘서 겹쳐도 구분된다. */
.standings-table tbody tr.match-team-row td {
  background: rgba(36, 229, 131, 0.22);
  font-weight: 700;
}

.standings-table tbody tr.match-team-row td:first-child {
  border-left: 4px solid var(--accent);
}

/* MLS 동/서부 컨퍼런스처럼 리그가 여러 그룹으로 나뉜 경우, 그룹별 표 사이에 소제목을 넣어 구분한다. */
.standings-group-title {
  padding: 12px 16px 8px;
  font-weight: 800;
  font-size: 13px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.standings-group-title:not(:first-child) {
  border-top: 1px solid var(--border);
}

.bracket-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.bracket-column {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bracket-round-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 2px;
}

.bracket-match {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.bracket-match:hover {
  border-color: var(--accent);
}

.bracket-team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 0;
}

.bracket-team span:nth-child(2) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bracket-team.winner {
  font-weight: 800;
  color: var(--accent);
}

.bracket-score {
  font-weight: 700;
  min-width: 16px;
  text-align: right;
}

.bracket-score.live {
  color: var(--accent);
}

.live-standings-note {
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}

.promotion-rule-note {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.sim-toggle-btn {
  display: block;
  margin: 0 0 10px auto;
  background: rgba(36, 229, 131, 0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.sim-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}

.sim-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sim-reset-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.sim-matchday-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 12px 0 6px;
}

.sim-matchday-title:first-of-type {
  margin-top: 0;
}

.sim-fixture-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--border);
}

.sim-fixture-row:last-child {
  border-bottom: none;
}

.sim-fixture-team {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.sim-fixture-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim-fixture-team.away {
  flex-direction: row-reverse;
  text-align: right;
}

.sim-score-input {
  width: 32px;
  height: 28px;
  text-align: center;
  background: var(--bg-elevated, #1a1f1c);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  -moz-appearance: textfield;
}

.sim-score-input::-webkit-outer-spin-button, .sim-score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sim-score-sep {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.pos-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.pos-badge {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: transparent;
}

.pos-badge.qualify {
  background: var(--accent);
}

.pos-badge.relegate {
  background: var(--live-red);
}

.team-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  min-width: 0;
}

.team-cell.mine {
  color: var(--accent);
}

.team-name-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-star {
  font-size: 12px;
  color: var(--gold);
}

.standings-table .num {
  text-align: center;
}

.standings-table .pts {
  font-weight: 800;
  color: var(--accent);
  text-align: center;
}

.standings-table .pts.live-loss {
  color: var(--live-red);
}

.standings-table .pts.live-draw {
  color: var(--text-muted);
}

/* ---------- Match detail ---------- */
.back-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 4px 0;
}

.back-btn:hover {
  color: var(--accent);
}

.scoreboard-card {
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.scoreboard-competition {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}

.scoreboard-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.scoreboard-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.scoreboard-crest {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 50%;
  background: #eef2ef;
  padding: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.scoreboard-team-name {
  font-size: 15px;
  font-weight: 700;
}

.scoreboard-fifa-rank {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  margin-top: -6px;
  text-shadow: 0 0 6px rgba(36, 229, 131, 0.85), 0 0 14px rgba(36, 229, 131, 0.5);
}

.scoreboard-rank-change {
  margin-left: 2px;
}

.scoreboard-rank-change.down {
  color: var(--live-red);
  text-shadow: none;
}

.scoreboard-score {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.scoreboard-status {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
}

.scoreboard-status.live {
  color: var(--accent);
}

.scoreboard-status.finished {
  color: var(--text-muted);
}

.scoreboard-status.stale {
  color: var(--gold);
}

/* 경기 상세 카드도 리그 탭과 같은 --t-* 토큰을 그대로 쓴다(위 #view-leagues/#view-detail 공용 블록
   참고) - 리그가 늘어나도 여기는 하나도 안 건드려도 된다. */
#view-detail[data-theme] .scoreboard-card {
  background: linear-gradient(165deg, rgba(10, 14, 26, 0.88), rgba(4, 6, 14, 0.94));
  border-color: color-mix(in srgb, var(--t-accent) 55%, transparent);
}
#view-detail[data-theme] .scoreboard-competition,
#view-detail[data-theme] .scoreboard-status:not(.live):not(.finished) {
  color: var(--gold);
}
#view-detail[data-theme] .team-tab-btn.active {
  color: var(--t-accent);
  border-bottom-color: var(--t-accent);
}
#view-detail[data-theme] .detail-action-btn {
  border-color: color-mix(in srgb, var(--t-accent) 45%, transparent);
}

.detail-info-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.detail-info-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.detail-info-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.detail-info-value {
  font-size: 14px;
  font-weight: 700;
}

.detail-halftime {
  margin-top: 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

/* 중계/티켓 버튼 - 예전엔 경기 목록 행 안에 아이콘만 작게(18~24px) 박아뒀었는데, 손가락으로
   누르기 힘들다는 피드백을 받아 경기 상세로 옮기고 여기선 넉넉한 크기의 버튼으로 보여준다.
   좁은 화면에서 두 개를 나란히 두면 "쿠팡플레이에서 중계 보기" 같은 긴 문구가 어중간하게
   줄바꿈돼 잘린 것처럼 보여서, 한 줄에 하나씩 세로로 쌓아 폭을 넉넉히 확보한다. */
.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 0;
}

.detail-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.detail-action-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.detail-action-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* ---------- Match stats / lineups / h2h ---------- */
.stat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 10px;
}

.stat-value {
  min-width: 32px;
}

.stat-value.home {
  text-align: left;
}

.stat-value.away {
  text-align: right;
}

.stat-label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11.5px;
  text-align: center;
  white-space: nowrap;
}

.stat-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background: var(--accent);
}

.dominance-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.dominance-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.dominance-bar {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

/* 색은 이제 팀 색상을 인라인 style로 넣으므로(dominanceTeamColors), 여기선 형태만 규정한다. */
.dominance-fill {
  height: 100%;
}

.dominance-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
}

.dominance-timeline {
  margin-top: 18px;
}

.dominance-timeline-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.legend {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dominance-legend-crest {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.legend-line {
  width: 14px;
  height: 2px;
  border-radius: 1px;
}

.dominance-chart-wrap {
  position: relative;
}
.dominance-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.dominance-gridline {
  stroke: var(--border);
  stroke-width: 1;
}
.dominance-baseline {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.6;
}
.dominance-axis-label {
  fill: var(--text-muted);
  font-size: 9.5px;
}
.dominance-ht-label {
  fill: var(--text-secondary);
  font-size: 9.5px;
  font-weight: 700;
}
.dominance-event-icon {
  font-size: 11px;
}
.dominance-crosshair {
  stroke: var(--text-secondary);
  stroke-width: 1;
  opacity: 0;
  pointer-events: none;
}
.dominance-hover-dot {
  opacity: 0;
  pointer-events: none;
  stroke: var(--bg-card);
  stroke-width: 2;
}

.dominance-tooltip {
  position: absolute;
  top: 26px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-secondary);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.dominance-tooltip strong {
  color: var(--text-primary);
}
.dominance-tooltip-events {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10.5px;
}

.dominance-foot-note {
  margin-top: 8px;
}

.tactical-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 12px;
  margin: 0 0 14px;
}

.pitch-shared {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 560px;
  margin: 0 0 10px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border);
  overflow: hidden;
}

.pitch-team-tag {
  position: absolute;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-primary);
  z-index: 1;
}

.pitch-team-tag.home {
  bottom: 4px;
}

.pitch-team-tag.away {
  top: 4px;
  flex-direction: row-reverse;
}

.pitch-formation-tag {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
}

.pitch-team-tag.away .pitch-formation-tag {
  margin-left: 0;
  margin-right: auto;
}

.pitch-player-abs {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.pitch-bench-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.pitch-bench-col {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.pitch-photo-wrap {
  position: relative;
}

.pitch-photo-ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid;
  padding: 2px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pitch-photo-ring.motm {
  border-color: #ffc93c;
  box-shadow: 0 0 8px rgba(255, 201, 60, 0.85), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.motm-crown {
  font-size: 11px;
  margin-right: 2px;
}

.pitch-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #eef2ef;
}

.pitch-rating {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 20px;
  padding: 1px 4px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  color: #06140d;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.pitch-rating.great {
  background: var(--accent);
}

.pitch-rating.ok {
  background: #f2b84a;
}

.pitch-rating.poor {
  background: var(--live-red);
  color: #fff;
}

.pitch-sub-off {
  position: absolute;
  top: -4px;
  left: -6px;
  min-width: 16px;
  padding: 1px 4px;
  border-radius: 6px;
  font-size: 8.5px;
  font-weight: 800;
  text-align: center;
  color: #fff;
  background: var(--live-red);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* 평점(우상)/교체시간(좌상)이 이미 위쪽 귀퉁이를 쓰고 있어 골/어시스트는 사진 아래쪽에 겹치지 않게 둔다. */
.pitch-event-badge {
  position: absolute;
  bottom: -4px;
  left: -6px;
  padding: 1px 4px;
  border-radius: 6px;
  font-size: 9px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}

.lineup-event-badges {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
}

.lineup-event-icon {
  font-size: 12px;
  white-space: nowrap;
}

.pitch-player-name {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pitch-bench-player {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 0;
  cursor: pointer;
}

.pitch-bench-player:hover {
  color: var(--accent);
}

.pitch-side-footer {
  position: relative;
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.pitch-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.pitch-stat b {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.pitch-stat span {
  font-size: 9.5px;
  color: var(--text-muted);
}

/* K리그 매치센터 폴백 라인업(피치 좌표계가 달라 다이어그램 대신 리스트로 보여줌) */
.lineup-simple-team {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}

.lineup-simple-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 10px;
}

.lineup-simple-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lineup-simple-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.lineup-simple-row:last-child {
  border-bottom: none;
}

.lineup-simple-num {
  width: 22px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.lineup-simple-photo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef2ef;
}

.lineup-simple-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineup-simple-pos {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 6px;
}

.lineup-simple-subs {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.lineup-simple-coach {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.h2h-summary {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* ---------- Footer ---------- */
.app-footer {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.app-footer a {
  color: var(--accent);
  text-decoration: none;
}

.app-footer a:hover {
  text-decoration: underline;
}

/* ---------- News ---------- */
.news-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.news-card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.news-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-card);
  overflow: hidden;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-thumb-empty::after {
  content: "⚽";
  font-size: 28px;
  opacity: 0.25;
}

.news-body {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-title {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.news-date {
  font-size: 11px;
  color: var(--text-muted);
}

.news-source-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  vertical-align: middle;
}

.news-source-badge.donga {
  color: var(--accent);
  background: var(--accent-soft);
}

.news-source-badge.bbc {
  color: var(--gold);
  background: rgba(255, 209, 102, 0.1);
}

/* ---------- AI analysis ---------- */
.ai-card {
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ai-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.ai-card-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.ai-card-teams {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ai-card-team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.ai-card-vs {
  color: var(--text-muted);
  font-size: 12px;
}

.ai-card-summary {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 12px;
}

.ai-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.ai-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.ai-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 4px;
}

.ai-note:last-child {
  margin-bottom: 0;
}

.ai-prediction .ai-section-title {
  color: var(--accent);
}

.ai-card-details {
  display: none;
}

.ai-card.expanded .ai-card-details {
  display: block;
  margin-top: 8px;
}

.ai-card-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.ai-card-toggle-arrow {
  transition: transform 0.2s var(--ease);
}

.ai-card.expanded .ai-card-toggle-arrow {
  transform: rotate(180deg);
}

.prediction-bar {
  display: flex;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
}

.prediction-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #06140d;
}

.prediction-seg.home {
  background: var(--accent);
}

.prediction-seg.draw {
  background: #8a94a6;
  color: #06140d;
}

.prediction-seg.away {
  background: #5a8bff;
  color: #ffffff;
}

.prediction-note {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.ai-link-only-wrap {
  margin-top: 8px;
}

.ai-date-header {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.ai-date-header:first-child {
  margin-top: 4px;
}

.ai-link-only-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  margin: 4px 0 10px;
}

.ai-link-only-hint {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-muted);
}

.ai-link-only-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.ai-link-row:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.ai-link-comp {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  background: var(--bg-card);
  border-radius: 5px;
  padding: 2px 6px;
}

.ai-link-teams {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.ai-link-date {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 11px;
}

.ai-link-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* ---------- My team ---------- */
.notify-btn {
  display: block;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.2s var(--ease);
}

.notify-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.notify-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- 설정 ---------- */
.settings-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.settings-group .notify-btn {
  margin-bottom: 0;
}

.settings-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.settings-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.settings-group > .settings-row + .settings-row {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.notif-type-list .settings-row + .settings-row {
  border-top: 1px solid var(--border);
}

.settings-row-label {
  font-size: 14px;
  color: var(--text-primary);
}

/* 알림 종류별/소리 on-off 스위치 - 네이티브 체크박스를 시각적으로 숨기고 트랙+손잡이로 그린다. */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.toggle-switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.toggle-switch-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.toggle-switch input:checked + .toggle-switch-track {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-switch-track::before {
  background: var(--accent);
  transform: translateX(18px);
}

.toggle-switch input:disabled + .toggle-switch-track {
  opacity: 0.5;
  cursor: not-allowed;
}

.myteam-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.myteam-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.myteam-crest {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  background: #eef2ef;
  padding: 5px;
}

.myteam-info {
  min-width: 0;
  flex: 1;
}

.myteam-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.myteam-next {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.myteam-next.myteam-live {
  color: #ff4d4f;
  font-weight: 600;
}

.myteam-form,
.form-strip {
  margin-top: 6px;
  display: flex;
  gap: 1px;
  font-size: 13px;
  font-weight: 800;
}

/* 색칠된 정사각 배지(동그라미처럼 보여 헷갈린다는 피드백) 대신 승/무/패 한글 텍스트에 색만 입혀서
   "승승승무패"처럼 나란히 붙여 보여준다. */
.form-badge {
  line-height: 1;
}

.form-badge.w {
  color: var(--accent);
}

/* 무승부는 초록(승)/빨강(패)과 헷갈리지 않게 회색으로 통일 */
.form-badge.d {
  color: var(--text-muted);
}

.form-badge.l {
  color: var(--live-red);
}

.streak-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--card-bg-2, rgba(255, 255, 255, 0.06));
}

.streak-badge.win {
  color: var(--accent);
  border: 1px solid rgba(36, 229, 131, 0.4);
}

.streak-badge.loss {
  color: var(--live-red);
  border: 1px solid rgba(229, 72, 77, 0.4);
}

.streak-badge.draw {
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.myteam-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
}

.myteam-remove:hover {
  color: var(--live-red);
}

/* ---------- 로그인/회원가입(선택 기능) ---------- */
.auth-guest-card {
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

.auth-guest-title {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 6px;
}

.auth-guest-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.auth-open-btn,
.auth-submit-btn {
  width: 100%;
  background: var(--accent);
  color: #06140d;
  border: none;
  border-radius: var(--radius);
  padding: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}

.auth-open-btn:hover,
.auth-submit-btn:hover {
  transform: translateY(-1px);
}

.auth-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.auth-form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.auth-form-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.auth-form-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
}

.auth-form-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.auth-form-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
}

#auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#auth-form input,
#auth-form select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13.5px;
  padding: 11px 12px;
}

#auth-form input:focus,
#auth-form select:focus {
  outline: none;
  border-color: var(--accent);
}

#auth-signup-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-search-wrap {
  position: relative;
}

.team-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.team-search-results:empty {
  display: none;
}

.team-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.team-search-row:last-child {
  border-bottom: none;
}

.team-search-row:hover {
  background: var(--bg-card-hover);
}

.team-search-crest {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  background: #eef2ef;
  padding: 2px;
}

.team-search-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.team-search-comp {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--text-muted);
}

.team-search-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.team-search-row.already-friend {
  cursor: default;
}

.team-search-row.already-friend:hover {
  background: none;
}

.friend-add-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 8px;
}

.friend-added-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.community-friend-add-btn {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: none;
  border-radius: 999px;
  padding: 3px 8px;
  cursor: pointer;
}

.community-friend-add-btn:disabled {
  color: var(--text-muted);
  background: transparent;
  cursor: default;
}

.team-picked-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.team-picked-chip span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-picked-crest {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 50%;
  background: #eef2ef;
  padding: 2px;
  flex-shrink: 0;
}

.team-picked-chip button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}

.auth-error {
  color: var(--live-red);
  font-size: 12px;
  min-height: 14px;
}

.auth-security-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: -2px 0 0;
}

.auth-agree-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  cursor: pointer;
}
/* #auth-form input { width: 100% }가 ID 선택자라 일반 규칙보다 우선해서, 체크박스도 텍스트
   입력칸처럼 가로 전체로 늘어나 옆의 동의 문구가 좁은 세로줄로 밀려나는 버그가 있었다 - ID 선택자를
   이겨야 해서 여기만 예외적으로 !important를 쓴다. */
#auth-form input[type="checkbox"].auth-agree-checkbox {
  width: 16px !important;
  margin-top: 2px;
  flex: none;
  accent-color: var(--accent);
}
.auth-agree-row span {
  flex: 1;
  min-width: 0;
}
.auth-agree-row a {
  color: var(--accent);
  text-decoration: underline;
}

.admin-analytics-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-analytics-row {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 8px 12px;
}
.admin-analytics-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.admin-analytics-total {
  font-weight: 400;
  color: var(--accent);
  margin-left: 6px;
}
.admin-analytics-detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.admin-reports-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-report-row {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 10px 12px;
}
.admin-report-target {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.admin-report-body {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0;
  white-space: pre-wrap;
}
.admin-report-meta {
  font-size: 11.5px;
  color: var(--text-muted);
}
.admin-report-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.admin-report-actions button {
  flex: 1;
}

.settings-legal-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.settings-legal-links a {
  color: var(--text-secondary);
  text-decoration: none;
}
.settings-legal-links a:hover {
  color: var(--accent);
}

.auth-find-toggle {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0 0;
}

#auth-find-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#auth-find-wrap input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13.5px;
  padding: 11px 12px;
}

#auth-find-wrap input:focus {
  outline: none;
  border-color: var(--accent);
}

#auth-find-username-panel,
#auth-find-password-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-find-result {
  font-size: 12.5px;
  min-height: 14px;
}

.auth-find-result.ok {
  color: var(--accent);
}

.auth-find-result.error {
  color: var(--live-red);
}

#admin-test-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#admin-test-panel input,
#admin-test-panel select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13.5px;
  padding: 11px 12px;
}

/* ---------- 프로필/레벨/친구 ---------- */
.profile-card {
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.profile-nickname {
  font-weight: 800;
  font-size: 16px;
}

.logout-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
}

.logout-btn:hover {
  border-color: var(--live-red);
  color: var(--live-red);
}

.account-delete-link {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
}

.account-delete-link:hover {
  color: var(--live-red);
}

.my-records-link {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.my-records-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.my-records-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.my-records-stat-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.my-records-stat-main {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.my-records-stat-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.my-records-history-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 10px 0 8px;
}

.auth-submit-btn.danger {
  background: var(--live-red);
  color: #ffffff;
}

.profile-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.level-badge {
  flex-shrink: 0;
  background: var(--accent);
  color: #06140d;
  font-weight: 800;
  font-size: 12.5px;
  border-radius: 8px;
  padding: 5px 9px;
}

.level-bar-wrap {
  flex: 1;
  min-width: 0;
}

.level-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.level-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 4px;
}

.level-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #4dffa8);
  transition: width 0.3s var(--ease);
}

.level-bar-label {
  font-size: 11px;
  color: var(--text-muted);
}

.soccer-school-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-card));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-weight: 800;
  font-size: 14px;
  padding: 14px 16px;
  margin-top: 14px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s var(--ease);
}

.soccer-school-btn:hover {
  transform: translateY(-1px);
}

.soccer-school-btn-sub {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-secondary);
}

.friends-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.friends-title {
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
}

.friend-requests-wrap:empty {
  display: none;
}

.friend-requests-title {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--accent);
  margin-bottom: 8px;
}

.friend-request-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
}

.friend-request-accept,
.friend-request-decline {
  flex-shrink: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.friend-request-accept {
  background: var(--accent);
  color: #06140d;
  border: none;
}

.friend-request-decline {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.friend-add-form {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.friend-add-form input {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 9px 11px;
}

.friend-add-form button {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
}

.friends-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
}

.friend-nickname {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  font-weight: 700;
}

.friend-nickname,
.friend-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-title {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
}

.friend-level {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.friend-points {
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.friend-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}

.friend-remove:hover {
  color: var(--live-red);
}

/* ---------- 집관인증 ---------- */
.checkin-slot {
  margin-top: 8px;
}

.checkin-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  padding: 6px 12px;
  cursor: pointer;
}

.checkin-btn:hover {
  transform: translateY(-1px);
}

.checkin-btn:disabled {
  background: none;
  border-color: var(--border);
  color: var(--text-muted);
  cursor: default;
}

.checkin-done {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
}

/* ---------- 승부예측 ---------- */
.prediction-widget:empty {
  display: none;
}

.prediction-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prediction-input {
  width: 48px;
  height: 36px;
  text-align: center;
  background: var(--bg-elevated, #1a1f1c);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  -moz-appearance: textfield;
}

.prediction-input::-webkit-outer-spin-button, .prediction-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.prediction-sep {
  color: var(--text-muted);
  font-weight: 700;
}

.prediction-submit-btn {
  margin-left: auto;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 16px;
  cursor: pointer;
}

.prediction-submit-btn:disabled {
  background: none;
  border-color: var(--border);
  color: var(--text-muted);
  cursor: default;
}

.prediction-done {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

/* ---------- 명예의 전당 ---------- */
.hof-list-header,
.hof-row {
  display: grid;
  grid-template-columns: 44px 1fr 56px 72px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}

.hof-list-header {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
}

.hof-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  font-size: 13px;
}

.hof-row.me {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.hof-row.goat {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.16), var(--bg-elevated));
  margin-bottom: 12px;
}

.hof-row.goat .hof-rank {
  font-size: 20px;
}

.hof-row.goat .hof-level {
  color: var(--gold);
  font-weight: 800;
}

.hof-rank {
  font-weight: 800;
  text-align: center;
}

.hof-nickname {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.hof-title {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hof-friend-badge {
  align-self: flex-start;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 7px;
}

.hof-friend-badge.pending {
  color: var(--text-muted);
  background: transparent;
  padding: 0;
}

.hof-nickname .community-friend-add-btn {
  align-self: flex-start;
}

.hof-level {
  color: var(--text-muted);
  font-size: 11.5px;
}

.hof-points {
  color: var(--accent);
  font-weight: 800;
  text-align: right;
}

.hof-my-rank-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ---------- Team detail ---------- */
.team-header-card {
  text-align: center;
  padding: 28px 20px;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.team-header-crest {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #eef2ef;
  padding: 9px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.team-header-name {
  font-size: 19px;
  font-weight: 800;
}

.team-header-venue {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.team-info-strip {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.team-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.team-info-label {
  font-size: 11px;
  color: var(--text-muted);
}

.team-info-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.favorite-btn {
  margin-top: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.favorite-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.venue-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.venue-action-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}

.venue-action-btn:hover {
  transform: translateY(-1px);
}

.favorite-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.team-section {
  margin-bottom: 22px;
}

.team-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.mini-match-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
}

.mini-team {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mini-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-team.highlight span {
  color: var(--accent);
  font-weight: 700;
}

.mini-score {
  font-weight: 800;
  font-size: 13px;
}

.mini-score.live {
  color: var(--accent);
}

/* 종료된 경기의 승/무/패를 왼쪽 색 띠로 한눈에 구분 */
.mini-match-row.result-win {
  border-left: 3px solid var(--accent);
}

.mini-match-row.result-draw {
  border-left: 3px solid var(--text-muted);
}

.mini-match-row.result-loss {
  border-left: 3px solid var(--live-red);
}

.mini-status {
  font-size: 11px;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}

.team-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.team-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 4px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.team-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.coach-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.coach-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef2ef;
  border: 2px solid var(--border);
}

.coach-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coach-name {
  font-weight: 700;
  font-size: 14px;
}

.coach-nationality {
  font-size: 12px;
  color: var(--text-secondary);
}

.squad-position-group {
  margin-bottom: 16px;
}

.squad-position-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.squad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.squad-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.squad-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.squad-card--static {
  cursor: default;
}

.squad-card--static:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}

.squad-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef2ef;
  border: 2px solid var(--border);
}

.squad-name {
  font-weight: 700;
  font-size: 13px;
}

.squad-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.team-injuries-card {
  background: rgba(229, 72, 77, 0.08);
  border: 1px solid rgba(229, 72, 77, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
}

.team-injuries-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.team-injuries-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 4px 0;
}

.team-injuries-name {
  font-weight: 600;
}

.team-injuries-reason {
  color: var(--text-muted);
}

.stale-note {
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.3);
  color: var(--gold);
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 16px;
}

/* ---------- Player detail ---------- */
.player-header-photo {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 12px;
  background: var(--bg-card);
}

.player-meta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.player-description {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.transfer-row {
  grid-template-columns: 1fr auto auto;
}

.player-stats-table th,
.player-stats-table td {
  text-align: center;
}

.player-stats-table th:first-child,
.player-stats-table td:first-child,
.player-stats-table th:nth-child(2),
.player-stats-table td:nth-child(2) {
  text-align: left;
}

.player-data-note {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

.goal-scorer-row {
  font-size: 13px;
  padding: 6px 0;
  color: var(--text-primary);
}

.goal-scorer-row.away {
  text-align: right;
}

.goal-assist {
  color: var(--text-muted);
  font-size: 12px;
}

.sub-out {
  color: var(--live-red);
}

.sub-in {
  color: var(--accent);
}

/* ---------- Goal toast ---------- */
.goal-toast-body {
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

.simple-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px 20px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  max-width: 90vw;
  opacity: 0;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
  pointer-events: none;
}

.simple-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.simple-toast-icon {
  font-size: 22px;
}

.simple-toast-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* ---------- 골 세리모니 애니메이션(전체 화면 오버레이) ---------- */
/* 상단에서 슬라이드다운되는 골 알림 팝업 - 화면을 가리지 않고 계속 앱을 볼 수 있다. */
.goal-banner-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  padding: max(14px, env(safe-area-inset-top, 0px)) 14px 0;
  pointer-events: none;
}

.goal-popup {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  cursor: pointer;
  display: flex;
  align-items: stretch;
  gap: 16px;
  background: linear-gradient(135deg, #0d100e 0%, #0a0a0a 55%, #0d1310 100%);
  border: 2px solid var(--accent);
  border-radius: 18px;
  padding: 13px 18px;
  box-shadow:
    0 0 0 1px rgba(36, 229, 131, 0.5),
    0 0 18px rgba(36, 229, 131, 0.45),
    0 0 42px rgba(36, 229, 131, 0.22),
    0 20px 44px rgba(0, 0, 0, 0.5);
  transform: translateY(-140%);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.3s ease;
}

.goal-banner-wrap.show .goal-popup {
  transform: translateY(0);
  opacity: 1;
}

.goal-team-col {
  flex-shrink: 0;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.team-emblem-box {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e4e9e6 70%);
  box-shadow: 0 0 0 1px rgba(36, 229, 131, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
}

.team-emblem-box img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.goal-team-name {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
}

.goal-main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.goal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(36, 229, 131, 0.55);
  animation: goalBadgePop 0.4s var(--ease);
}

@keyframes goalBadgePop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.goal-time {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.goal-scorer {
  font-size: 25px;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 축알못의 축구교실 ---------- */
.school-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}

.school-tab-btn {
  flex: 1;
  min-width: max-content;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 8px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.school-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.rule-card {
  display: flex;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.rule-card.highlight {
  border-color: var(--accent);
  background: linear-gradient(160deg, var(--accent-soft), var(--bg-elevated));
}

.rule-card-icon {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
}

.rule-card-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}

.rule-card-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.position-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.position-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.position-code {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
}

.position-name {
  font-weight: 800;
  font-size: 13.5px;
  margin-bottom: 3px;
}

.position-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.formation-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.formation-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.formation-pitch {
  flex-shrink: 0;
  width: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(180deg, #163826, #0f2418);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 6px;
  aspect-ratio: 3 / 4;
}

.formation-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.formation-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.formation-dot.gk {
  background: var(--gold);
  width: 10px;
  height: 10px;
}

.formation-name {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 5px;
}

.formation-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.term-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.term-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.term-name {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--accent);
  margin-bottom: 4px;
}

.term-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  /* 경기 목록 행 한 칸(375px 기준)을 실측(Playwright 헤드리스로 iPhone 뷰포트 스크린샷 확인)해보니
     티켓(🎟)만 있던 시절 기준값(auto 폭 칼럼 3개 + score-box min-width:56px)이 TV(📺) 아이콘까지
     최대 3개가 붙는 경우(K리그 경기 등: 중계+티켓+알림벨) 팀 이름 칸이 33px까지 눌려 "Ga…"처럼
     두 글자만 보이는 문제가 있었다. 시각/스코어/액션 칼럼을 각각 줄여 팀 이름에 공간을 돌려준다.
     (숫자는 실측 후 재조정한 값 - 감으로 정한 값이 아님.) */
  .match-row {
    grid-template-columns: 34px 1fr auto 1fr auto;
    gap: 4px;
    padding: 10px 8px;
  }
  .team {
    gap: 5px;
  }
  .team-crest {
    width: 18px;
    height: 18px;
  }
  .team-name {
    font-size: 12px;
  }
  .match-status {
    font-size: 10.5px;
  }
  .score-box {
    min-width: 34px;
    padding: 3px 5px;
    font-size: 14px;
    gap: 3px;
  }
  .match-row-actions {
    gap: 2px;
  }
  .hero-match-crest {
    width: 48px;
    height: 48px;
    padding: 7px;
  }
  .hero-match-team span {
    font-size: 12.5px;
  }
  .scoreboard-crest {
    width: 44px;
    height: 44px;
  }
  .scoreboard-score {
    font-size: 30px;
  }
}

/* ---------- 첫 방문 온보딩 힌트("나의 팀" 탭 가리키는 말풍선) ---------- */
.onboarding-tip {
  position: fixed;
  z-index: 3000;
  max-width: 250px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.onboarding-tip.show {
  opacity: 1;
  transform: translateY(0);
}

.onboarding-tip-body {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 12px 12px 12px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(36, 229, 131, 0.2);
}

.onboarding-tip-emoji {
  font-size: 19px;
  line-height: 1.3;
  flex-shrink: 0;
}

.onboarding-tip-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.onboarding-tip-text strong {
  color: #ffffff;
  font-size: 13px;
}

.onboarding-tip-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

.onboarding-tip-arrow {
  position: absolute;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* ---------- 포인트 안내 팝업 ---------- */
.points-info-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  align-self: center;
}

.points-info-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.points-info-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.points-info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.points-info-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.points-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.points-info-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.points-info-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}

.points-info-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.points-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.points-info-icon {
  font-size: 17px;
  flex-shrink: 0;
  min-width: 34px;
  text-align: center;
}

.points-info-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.points-info-value {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text-primary);
}

.points-info-value.good {
  color: var(--accent);
}

.points-info-value.bad {
  color: var(--danger, #e5484d);
}

.points-info-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.points-info-subtitle {
  margin: 18px 0 10px;
  font-size: 14px;
  font-weight: 800;
}

.update-notes-date {
  font-size: 12px;
  color: var(--text-muted);
  margin: -6px 0 10px;
}

.update-notes-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.update-notes-list li {
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

.update-notes-list li:last-child {
  border-bottom: none;
}

.points-history-toggle {
  width: 100%;
  margin-top: 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px;
  cursor: pointer;
}

.points-history-list {
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.points-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  background: var(--bg-card);
  border-radius: 8px;
}

.points-history-reason {
  font-size: 12.5px;
  color: var(--text-primary);
}

.points-history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.points-history-delta {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.points-history-delta.good {
  color: var(--accent);
}

.points-history-delta.bad {
  color: var(--danger, #e5484d);
}

.fifa-rank-delta {
  font-weight: 800;
  font-size: 12px;
  color: var(--text-secondary);
}

.fifa-rank-delta.good {
  color: var(--accent);
}

.fifa-rank-delta.bad {
  color: var(--danger, #e5484d);
}

.points-history-date {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---------- 팬 커뮤니티 게시판 ---------- */
.community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.community-write-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #06140d;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.community-filter-row {
  position: relative;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.community-team-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px 2px 4px;
}

.community-team-badge-crest {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: contain;
  background: #eef2ef;
}

.community-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.community-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.community-row:hover {
  border-color: var(--accent);
}

.community-row-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.community-row-nickname {
  color: var(--text-secondary);
  font-weight: 600;
}

.community-row-comments {
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
}

.community-write-wrap,
.community-detail-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.community-title-input,
.community-body-input,
.community-comment-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13.5px;
  padding: 11px 12px;
  resize: vertical;
}

.community-title-input:focus,
.community-body-input:focus,
.community-comment-input:focus {
  outline: none;
  border-color: var(--accent);
}

.community-submit-btn {
  background: var(--accent);
  color: #06140d;
  border: none;
  border-radius: var(--radius);
  padding: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

.community-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.community-post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.community-post-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

.community-post-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.community-delete-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  cursor: pointer;
}

.community-delete-btn:hover {
  border-color: var(--danger, #e5484d);
  color: var(--danger, #e5484d);
}

.community-report-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  cursor: pointer;
}

.community-report-btn:hover {
  border-color: #ffb454;
  color: #ffb454;
}

.community-comments-section {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.community-comments-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.community-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.community-comment {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.community-comment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.community-comment-body {
  font-size: 13px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.community-comment-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.community-comment-edit-actions .community-submit-btn {
  flex: 1;
  padding: 8px;
  font-size: 12.5px;
}

.community-comment-edit-actions .community-delete-btn {
  padding: 8px 14px;
}

.community-comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.community-login-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  padding: 10px;
}