/* ============================================================
   main.css — bet365 스타일, 반응형
   ============================================================ */

/* ── 리셋 & 변수 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand-green:  #1a6634;
  --brand-dark:   #0e3d1f;
  --brand-light:  #f5f5f0;
  --brand-yellow: #ffd700;
  --live-red:     #e8292a;
  --text-primary: #1a1a1a;
  --text-muted:   #666666;
  --border:       #dddddd;
  --white:        #ffffff;
  --nav-width:    220px;
  --header-h:     48px;
}

body {
  font-family: 'Noto Sans KR', 'Lato', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: var(--brand-light);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;             /* 모바일 헤더의 풀-블리드 트릭(음수 마진) 가로 스크롤 차단 */
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; }

/* ── 헤더 ────────────────────────────────────────────────── */
#header-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-green);
  color: var(--white);
  height: var(--header-h);
  flex-shrink: 0;
}
.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  gap: 10px;
}
.header-logo {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--brand-yellow);
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-logo-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.footer-logo-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px 2px;
}
.header-sports {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 8px;
  flex: 1;
}
.sport-tab {
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.sport-tab:hover { background: rgba(255,255,255,0.14); color: #fff; }
.sport-tab.active { background: rgba(255,255,255,0.22); color: #fff; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.btn-login {
  background: var(--brand-yellow);
  color: var(--brand-dark);
  padding: 4px 14px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 13px;
}
.btn-login:hover { background: #e6c200; }

/* 게시글 상세 — 둥근 사각형 카드 스타일 (.section-box보다 뒤에 정의 + 복합 선택자로 우선순위 확보) */
.section-box.section-box-rounded {
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.07);
  border: 1px solid #e8e8e8;
  margin-bottom: 16px;
  overflow: hidden;
}
@media (max-width: 600px) {
  #main-content > .section-box.section-box-rounded { margin-left: 8px; margin-right: 8px; }
}

/* 게시글 상세 헤더 */
.post-detail-header { padding: 16px; }
.post-detail-title {
  font-size: 22px; font-weight: 700; line-height: 1.4;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}
.post-detail-meta {
  display: grid;
  grid-template-columns: 48px 1fr auto auto auto;
  grid-template-rows: auto auto;
  gap: 2px 14px;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}
.pdm-avatar {
  grid-row: 1 / span 2; grid-column: 1;
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #f0f0ea; color: var(--text-muted);
  font-size: 18px; font-weight: 700;
}
.pdm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdm-avatar-fallback { background: var(--brand-yellow); color: var(--brand-dark); }
.pdm-nick {
  grid-row: 1; grid-column: 2;
  font-weight: 700; color: var(--text-primary); font-size: 14px;
}
.pdm-date {
  grid-row: 2; grid-column: 2;
  font-size: 12px;
}
.pdm-stat {
  grid-row: 1;
  white-space: nowrap; font-size: 12px;
}
.pdm-stat-label { color: var(--text-muted); }
.pdm-stat-value { font-weight: 700; color: var(--text-primary); }

/* 추천 (하트) 바 — 좋아요만 */
.vote-btn-heart {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
  color: #aaa;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.vote-btn-heart:hover { color: var(--live-red); border-color: var(--live-red); }
.vote-btn-heart.liked { color: var(--live-red); border-color: var(--live-red); background: #fff0f0; }
.vote-btn-heart .vote-count { font-size: 16px; font-weight: 700; }

/* 게시글 글쓴이 — 아이콘 + 닉네임 */
.author-cell { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.author-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f0f0ea; color: var(--text-muted);
  font-size: 10px; font-weight: 700; line-height: 1;
  vertical-align: middle;
}
.author-avatar-fallback { background: var(--brand-yellow); color: var(--brand-dark); }

/* Mattermost 채팅 패널 */
.chat-panel {
  position: fixed; right: 16px; bottom: 16px;
  width: 380px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 80px);
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  z-index: 300;
  display: flex; flex-direction: column; overflow: hidden;
  animation: chatRise 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes chatRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.chat-panel-header {
  background: var(--brand-green); color: #fff;
  padding: 10px 14px; font-size: 14px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.chat-panel-close { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 0 4px; }
.chat-panel-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-panel-body iframe { flex: 1; width: 100%; border: none; }
@media (max-width: 600px) {
  .chat-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; height: 70vh; }
}
.btn-register {
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--white);
  padding: 3px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
}
.btn-register:hover { background: rgba(255,255,255,0.1); }
.notif-btn { position: relative; padding: 4px 8px; color: var(--white); font-size: 18px; line-height: 1; }
.notif-badge {
  position: absolute; top: 0; right: 0;
  background: var(--live-red); color: #fff;
  font-size: 10px; min-width: 16px; height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
/* ── 헤더 아이콘 바 (로그인 후) ──────────────────────────── */
.header-icon-bar {
  display: flex; align-items: center; gap: 2px;
}
.hib-item { position: relative; }
.hib-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.85); padding: 6px 8px;
  border-radius: 4px; transition: background 0.15s, color 0.15s;
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.hib-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.hib-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* 알림 뱃지 */
.hib-notif-wrap { position: relative; }
.hib-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--live-red); color: #fff;
  font-size: 9px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 8px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; border: 2px solid var(--brand-green);
}

/* 사용자 버튼 */
.hib-user-btn { gap: 7px; }
.hib-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-yellow); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; flex-shrink: 0;
  overflow: hidden;
}
.hib-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.hib-user-info-avatar { overflow: hidden; }
.hib-user-info-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.hib-username {
  max-width: 90px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 700;
}
.hib-chevron { opacity: 0.7; flex-shrink: 0; }

/* 공통 드롭다운 */
.hib-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  z-index: 400; min-width: 220px;
  animation: hibFadeIn 0.12s ease;
}
@keyframes hibFadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.hib-dropdown-header {
  padding: 10px 14px 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.hib-dropdown-body { max-height: 280px; overflow-y: auto; }
.hib-dropdown-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  text-align: center; font-size: 12px;
}
.hib-dropdown-footer a { color: var(--brand-green); text-decoration: none; font-weight: 600; }
.hib-dropdown-empty { padding: 20px 14px; text-align: center; font-size: 13px; color: var(--text-muted); }
.hib-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* 알림 드롭다운 */
.notif-dropdown-panel { min-width: 300px; }
.hib-notif-item {
  display: block; padding: 10px 14px;
  text-decoration: none; color: var(--text-primary);
  border-bottom: 1px solid #f0f0f0; transition: background 0.1s;
}
.hib-notif-item:hover { background: #f8f8f8; }
.hib-notif-item.unread { background: #f0f8f2; }
.hib-notif-item.unread:hover { background: #e8f5ec; }
.hib-notif-text { font-size: 13px; margin-bottom: 3px; }
.hib-notif-time { font-size: 11px; color: var(--text-muted); }

/* 유저 드롭다운 */
.hib-user-info {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
}
.hib-user-info-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; flex-shrink: 0;
}
.hib-user-info-name { font-size: 13px; font-weight: 700; }
.hib-user-info-role { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.hib-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 14px;
  font-size: 13px; text-align: left;
  color: var(--text-primary); background: none; border: none;
  cursor: pointer; font-family: inherit; transition: background 0.1s;
}
.hib-menu-item:hover { background: #f5f5f5; }
.hib-menu-danger { color: var(--live-red) !important; }
.hib-menu-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }

/* 하위 호환 (기존 dropdown-item 등) */
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.hamburger { display: none; color: var(--white); font-size: 20px; padding: 4px 8px; }

/* ── 레이아웃 ────────────────────────────────────────────── */
:root { --content-max: 1400px; --ad-width: 160px; --ad-gap: 16px; }

/* 페이지 이동 시 본문 폭 들썩임 방지 — 세로 스크롤바 영역 항상 예약
   (콘텐츠가 짧아도 스크롤바 자리는 비워두므로 viewport 폭 일정) */
html { scrollbar-gutter: stable; overflow-x: hidden; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }   /* 구형 브라우저 폴백 */
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;                       /* 항상 전체 폭 사용 — 페이지 콘텐츠 폭 따라 좁아지지 않음 */
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--white);
  position: relative;
}

#layout {
  display: flex;
  flex: 1;
}

/* ── 좌·우 광고 슬롯 (고정 위치, 화면이 충분히 넓을 때만 표시) ── */
.ad-slot {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  width: var(--ad-width);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
  background: #f0f0eb;
  border: 1px dashed #ccc;
  z-index: 10;
  pointer-events: auto;
}
.ad-slot-inner {
  font-size: 12px;
  color: #999;
  text-align: center;
  line-height: 1.6;
}
#ad-slot-left  { left:  calc((100vw - var(--content-max)) / 2 - var(--ad-width) - var(--ad-gap)); }
#ad-slot-right { right: calc((100vw - var(--content-max)) / 2 - var(--ad-width) - var(--ad-gap)); }

/* 1400(content) + 160*2(ads) + 16*2(gap) + 여유 = 약 1760px */
@media (min-width: 1760px) {
  .ad-slot { display: flex; }
}

/* ── 좌측 네비 (dark) ────────────────────────────────────── */
#left-nav {
  width: var(--nav-width);
  flex-shrink: 0;
  background: var(--brand-dark);
  color: #fff;
  overflow-y: auto;
  min-height: calc(100vh - var(--header-h));
}

.nav-live-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font-weight: 700; color: var(--brand-yellow);
  font-size: 13px;
  transition: background 0.15s;
}
.nav-live-link:hover { background: rgba(255,255,255,0.1); }
.nav-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live-red);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ── 섹션 레이블 (GENERAL / LIVE ON) ───────────────────── */
.nav-section-label {
  padding: 16px 14px 4px;
  font-size: 10px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.3);
}

/* ── 접힘 그룹 헤더 ──────────────────────────────────────── */
.nav-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.nav-group-header:hover { background: rgba(255,255,255,0.08); }
.nav-group-header.active { color: #fff; }

.nav-group-header-left { display: flex; align-items: center; gap: 8px; }
.nav-group-icon {
  font-size: 14px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-group-icon img { width: 16px; height: 16px; object-fit: contain; display: block; }

.nav-group-chevron {
  font-size: 20px; color: rgba(255,255,255,0.55);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.nav-group-chevron.open { transform: rotate(180deg); }

/* ── 접힘 그룹 아이템 컨테이너 ───────────────────────────── */
.nav-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.nav-group-items.open { max-height: 600px; }

/* ── 개별 항목 ───────────────────────────────────────────── */
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 32px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.nav-item:hover, .nav-item.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.nav-item.active { border-left: 3px solid var(--brand-yellow); padding-left: 29px; }
.nav-item img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.nav-item-icon { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }

/* 라이브 링크 (항상 표시) */
.nav-live-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font-weight: 700; color: var(--brand-yellow);
  font-size: 13px;
  transition: background 0.15s;
}
.nav-live-link:hover, .nav-live-link.active {
  background: rgba(255,255,255,0.1);
}

.nav-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 16px 32px;
  gap: 8px;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.nav-placeholder-icon { font-size: 36px; }
.nav-placeholder-label { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.85); }
.nav-placeholder-msg { font-size: 12px; line-height: 1.5; }
.nav-search-wrap { padding: 8px 10px 14px; }
.nav-search-wrap input {
  width: 100%; border-radius: 3px; border: none; outline: none;
  padding: 5px 8px; font-size: 12px;
  background: rgba(255,255,255,0.9); color: var(--text-primary);
}

/* ── 메인 콘텐츠 ─────────────────────────────────────────── */
#main-content {
  flex: 1;
  min-width: 0;
  padding: 14px;
}

/* ── 푸터 ────────────────────────────────────────────────── */
#site-footer {
  background: var(--brand-dark);
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  text-align: center;
  padding: 12px;
  flex-shrink: 0;
}

/* ── 섹션 박스 ───────────────────────────────────────────── */
.section-box { background: var(--white); border-radius: 4px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.section-box.section-box-rounded {
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 10px 30px rgba(0,0,0,0.16);
  border: 1px solid #d8d8d8;
  margin-bottom: 16px;
  padding: 5px;                 /* 내부 5px 갭 */
}
/* 본문 → 댓글 사이 3px 굵은 구분 라인 (초록 헤더 대체) */
.post-comment-section {
  border-top: 5px solid #888;
  margin-top: 5px;
  padding-top: 5px;
}
/* 월드컵 일정 — 날짜 변경 구분선 */
.wc-date-separator {
  height: 0;
  border-top: 2px solid #c4c4c4;
  margin: 0;
}
.post-comment-count {
  padding: 8px 12px 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.section-title { background: var(--brand-green); color: var(--white); padding: 8px 12px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.section-title .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live-red); animation: pulse 1.5s ease-in-out infinite; }

/* ── 순위 카드 행 ────────────────────────────────────────── */
.standings-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.standing-card {
  position: relative;
  border-radius: 8px;
  padding: 16px 9px 18px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  color-scheme: light;
  -webkit-text-fill-color: currentColor;
  forced-color-adjust: none;
}
.standing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* 배경 리그 아이콘 */
.standing-card-bg-icon {
  position: absolute;
  right: -12px; bottom: -10px;
  width: 130px; height: 130px;
  object-fit: contain;
  opacity: 0.35;
  pointer-events: none;
  filter: brightness(6);
}

/* 카드 헤더 */
.standing-card-header {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 14px;
}
.standing-card-logo {
  width: 22px; height: 22px; object-fit: contain; flex-shrink: 0;
}
.standing-card-name {
  font-size: 15.6px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.5px;
  opacity: 0.9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 팀 행 */
.standing-card-body { display: flex; flex-direction: column; gap: 8px; }

.standing-row {
  display: flex; align-items: center; gap: 7px;
}
.standing-row.skeleton {
  height: 20px; background: rgba(255,255,255,0.15);
  border-radius: 3px; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { opacity: 0.5; } 50% { opacity: 1; }
}

.standing-rank {
  font-size: 14px; font-weight: 900;
  min-width: 16px; text-align: center;
  opacity: 0.85;
}
.standing-team-logo {
  width: 20px; height: 20px; object-fit: contain; flex-shrink: 0;
}
.standing-team-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden;
  text-overflow: '.';
  opacity: 0.93;
}
.standing-pts {
  font-size: 12px; font-weight: 700;
  opacity: 0.75; flex-shrink: 0; white-space: nowrap;
}
.standing-empty {
  font-size: 12px; opacity: 0.5; text-align: center; padding: 10px 0;
}

/* 반응형 — 좁은 화면 */
@media (max-width: 1100px) {
  .standings-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .standings-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .standing-pts { display: none !important; }
}

/* ── 경기 카드 ───────────────────────────────────────────── */
.match-league-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px 0;
  font-size: 12px; color: var(--text-muted);
}
.match-league-row img { width: 17px; height: 17px; object-fit: contain; }
.match-card {
  display: grid;
  grid-template-columns: 90px 1fr auto 1fr 96px 110px;
  align-items: center;
  padding: 8px 12px 10px;
  gap: 8px;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.match-card-odds {
  display: flex; gap: 3px; justify-content: center;
}
.mco-cell {
  flex: 1; text-align: center; padding: 3px 4px;
  font-size: 11px; font-weight: 700; color: #444;
  background: #f5f5f0; border-radius: 3px; min-width: 28px;
}
.match-card-venue {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  text-align: right;
  overflow: hidden;
}
.match-card-venue .mcv-city    { font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-card-venue .mcv-country { font-size: 10px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) {
  .match-card {
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-areas:
      "date date odds"
      "home score away" !important;
    cursor: default;
    row-gap: 4px;
  }
  .match-card-venue { display: none !important; }
  .match-card-date {
    grid-area: date;
    text-align: left;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: var(--text-muted);
    padding-bottom: 2px;
    align-self: end;
  }
  .match-card-date-sub { display: none !important; }
  .match-card-odds {
    grid-area: odds;
    justify-self: end;
    padding-bottom: 2px;
  }
  .match-card-odds .mco-cell { font-size: 10px; padding: 2px 4px; min-width: 24px; }
  .match-team-home  { grid-area: home; }
  .match-score-box  { grid-area: score; }
  .match-team-away  { grid-area: away; }
}
.match-card-date { font-size: 14.3px; font-weight: 600; color: var(--text-muted); line-height: 1.5; white-space: nowrap; }
.match-card-date-sub { display: block; font-size: 13px; font-weight: 400; color: var(--text-muted); }
.match-card:hover { background: #f8fff9; border-left-color: var(--brand-green); }
.match-card.live { border-left-color: var(--live-red); }
.match-card:last-child { border-bottom: none; }
.match-team-home { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; justify-content: flex-end;
  word-break: keep-all; overflow-wrap: break-word; min-width: 0; text-align: right; line-height: 1.25; }
.match-team-away { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  word-break: keep-all; overflow-wrap: break-word; min-width: 0; line-height: 1.25; }
.match-team-home img, .match-team-away img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
/* 카드 위치 안정화 — NS/LIVE/FT 전환 시 박스 높이 일정 유지 */
.match-score-box {
  text-align: center;
  min-width: 72px;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.match-card { min-height: 56px; }
.match-score { font-size: 18px; font-weight: 900; letter-spacing: 1px; }
.match-score.live { color: var(--live-red); }
.match-minute { display: inline-block; margin-top: 2px; background: var(--live-red); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 2px; animation: pulse 1.5s ease-in-out infinite; }
.match-kickoff-inline { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; white-space: nowrap; }
.match-kickoff-sub { font-size: 10px; font-weight: 400; color: var(--text-muted); }
.match-time { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.match-time-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.match-vs   { font-size: 13px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; }
.match-status-text { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.match-goals-row  { display: flex; justify-content: space-between; padding: 2px 12px 6px; font-size: 11px; color: var(--text-muted); gap: 8px; }
.match-goals-home { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 1; }
.match-goals-away { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1; }
.match-goals-home span, .match-goals-away span { white-space: nowrap; }
.goal-min  { color: var(--live-red); font-weight: 700; }
.goal-type { color: var(--text-muted); font-size: 10px; }
.match-detail-link { text-align: right; padding: 0 12px 8px; font-size: 12px; }
.match-detail-link a { color: var(--brand-green); font-weight: 700; }
.match-detail-link a:hover { text-decoration: underline; }

/* ── 핫게시글 ────────────────────────────────────────────── */
.hot-post-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}
.hot-post-item:last-child { border-bottom: none; }
.hot-post-item:hover { background: #f8f8f8; }
.hot-post-cat {
  background: var(--brand-green); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 2px;
  flex-shrink: 0; white-space: nowrap;
}
.hot-post-cat--news-soccer         { background: #5cb85c; }
.hot-post-cat--news-oversea-soccer { background: var(--brand-green); }
.hot-post-cat--news-footballist    { background: #e67e22; }
.hot-post-cat--news-interfootball  { background: #8e44ad; }
.hot-post-title { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-post-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── 선수 통계 테이블 (매치 상세) ──────────────────────────── */
.player-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
/* 홈/어웨이 두 테이블 컬럼 정렬 통일 — 첫 컬럼(선수명) 고정폭 + 나머지 균등 */
.player-stats-table .ps-th-name,
.player-stats-table .ps-name { width: 140px; }
.player-stats-table .ps-th,
.player-stats-table .ps-cell { width: 36px; }
.player-stats-table thead th {
  background: #fafafa;
  border-bottom: 2px solid #ddd;
  font-weight: 700;
  color: #666;
  font-size: 11px;
  white-space: nowrap;
}
.player-stats-table .ps-th { padding: 6px 4px; text-align: center; cursor: help; }
.player-stats-table .ps-th-name { padding: 6px 8px; text-align: left; min-width: 120px; }
.player-stats-table tbody tr.ps-row { border-bottom: 1px solid #f0f0f0; }
.player-stats-table tbody tr.ps-row:hover { background: #f8fff8; }
.player-stats-table .ps-name { padding: 6px 8px; font-weight: 600; }

/* 모바일 — 선수 이름 컬럼 sticky, 나머지는 가로 드래그 */
@media (max-width: 768px) {
  .player-stats-table { min-width: 540px; }
  .player-stats-table .ps-th-name,
  .player-stats-table .ps-name {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 #e5e5e5;
    width: 130px; min-width: 130px; max-width: 130px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .player-stats-table thead .ps-th-name { background: #fafafa; }
  .player-stats-table tbody tr.ps-row:hover .ps-name { background: #f8fff8; }
}
.player-stats-table .ps-cell {
  padding: 6px 4px;
  text-align: center;
  white-space: nowrap;
}

/* ── 라인업 피치 시각화 ──────────────────────────────────── */
.lineup-pitch {
  position: relative;
  width: 95%;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 2 / 1;
  background:
    linear-gradient(90deg,
      #2d8e3d 0%, #2d8e3d 10%, #2f9540 10%, #2f9540 20%,
      #2d8e3d 20%, #2d8e3d 30%, #2f9540 30%, #2f9540 40%,
      #2d8e3d 40%, #2d8e3d 50%, #2f9540 50%, #2f9540 60%,
      #2d8e3d 60%, #2d8e3d 70%, #2f9540 70%, #2f9540 80%,
      #2d8e3d 80%, #2d8e3d 90%, #2f9540 90%, #2f9540 100%);
  border: 3px solid #fff;
  margin: 12px;
  overflow: hidden;     /* 코너 아크 클리핑 */
  border-radius: 4px;
}
.lineup-pitch-line {
  position: absolute;
  background: #fff;
}
.lineup-pitch .lp-mid {
  left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-1.5px);
}
.lineup-pitch-circle {
  position: absolute;
  left: 50%; top: 50%;
  width: 18%; aspect-ratio: 1 / 1;
  border: 3px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.lineup-pitch-spot {
  position: absolute;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
}
.lineup-pitch .lp-spot-mid { left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* 페널티 박스 */
.lineup-pitch-box {
  position: absolute;
  top: 22%; bottom: 22%;
  width: 14%;
  border: 3px solid #fff;
}
.lineup-pitch .lp-box-left  { left: 0;  border-left: none; }
.lineup-pitch .lp-box-right { right: 0; border-right: none; }
/* 골 에어리어 */
.lineup-pitch-goal {
  position: absolute;
  top: 35%; bottom: 35%;
  width: 6%;
  border: 3px solid #fff;
}
.lineup-pitch .lp-goal-left  { left: 0;  border-left: none; }
.lineup-pitch .lp-goal-right { right: 0; border-right: none; }
/* 코너킥 호 — 원 중심을 모서리에 정확히 정렬 (transform 50%/50%) */
.lineup-pitch-corner {
  position: absolute;
  width: 44px; height: 44px;
  border: 3px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}
.lineup-pitch .lp-c-tl { top: 0;    left: 0;    transform: translate(-50%, -50%); }
.lineup-pitch .lp-c-tr { top: 0;    left: 100%; transform: translate(-50%, -50%); }
.lineup-pitch .lp-c-bl { top: 100%; left: 0;    transform: translate(-50%, -50%); }
.lineup-pitch .lp-c-br { top: 100%; left: 100%; transform: translate(-50%, -50%); }

/* ── 세로 피치 (모바일) ─────────────────────────────────── */
.lineup-pitch.vertical {
  aspect-ratio: 3 / 5;
  background:
    linear-gradient(0deg,
      #2d8e3d 0%, #2d8e3d 10%, #2f9540 10%, #2f9540 20%,
      #2d8e3d 20%, #2d8e3d 30%, #2f9540 30%, #2f9540 40%,
      #2d8e3d 40%, #2d8e3d 50%, #2f9540 50%, #2f9540 60%,
      #2d8e3d 60%, #2d8e3d 70%, #2f9540 70%, #2f9540 80%,
      #2d8e3d 80%, #2d8e3d 90%, #2f9540 90%, #2f9540 100%);
}
.lineup-pitch.vertical .lp-mid {
  top: 50%; left: 0; right: 0; height: 3px; width: auto;
  transform: translateY(-1.5px);
}
.lineup-pitch.vertical .lp-box-left,
.lineup-pitch.vertical .lp-box-right {
  top: auto; bottom: auto;
  left: 22%; right: 22%; width: auto;
  height: 14%;
}
.lineup-pitch.vertical .lp-box-left  { top: 0;    border-top: none;    border-bottom: 3px solid #fff; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.lineup-pitch.vertical .lp-box-right { bottom: 0; border-bottom: none; border-top: 3px solid #fff;    border-left: 3px solid #fff; border-right: 3px solid #fff; }
.lineup-pitch.vertical .lp-goal-left,
.lineup-pitch.vertical .lp-goal-right {
  top: auto; bottom: auto;
  left: 35%; right: 35%; width: auto;
  height: 6%;
}
.lineup-pitch.vertical .lp-goal-left  { top: 0;    border-top: none;    border-bottom: 3px solid #fff; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.lineup-pitch.vertical .lp-goal-right { bottom: 0; border-bottom: none; border-top: 3px solid #fff;    border-left: 3px solid #fff; border-right: 3px solid #fff; }

.lineup-shirt {
  position: absolute;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0;
}
.lineup-shirt svg { display: block; }
.lineup-shirt .ls-name {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
  .lineup-shirt svg { width: 49px; height: 49px; }
  .lineup-shirt .ls-name {
    font-size: 11px;
    padding: 1px 5px;
    margin-top: 2px;
    border-radius: 2px;
    line-height: 1.25;
  }
}

/* ── 팀 통계 요약 박스 (8개 그리드) ───────────────────────── */
.team-stat-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ts-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  text-align: center;
}
.ts-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.ts-value { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.ts-sub   { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
@media (max-width: 700px) {
  .team-stat-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ── 선수 랭킹 2×2 그리드 ─────────────────────────────────── */
.rankings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.ranking-card {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.ranking-card-title {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.ranking-empty {
  padding: 32px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.ranking-list { display: flex; flex-direction: column; }
.ranking-row {
  display: grid;
  grid-template-columns: 24px 28px 1fr 18px 36px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s;
}
.ranking-row:last-child { border-bottom: none; }
.ranking-row:hover { background: #f5fff8; }
.ranking-rank { text-align: right; color: var(--text-muted); font-weight: 700; font-size: 12px; }
.ranking-photo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #eee; }
.ranking-photo-empty { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: #eee; }
.ranking-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-name-en { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.ranking-team-logo { width: 18px; height: 18px; object-fit: contain; }
.ranking-value { font-weight: 800; text-align: right; font-size: 14px; }
@media (max-width: 900px) {
  .rankings-grid { grid-template-columns: 1fr; }
}

/* ── 뉴스 2×2 그리드 ─────────────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.news-grid-cell {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.news-grid-title {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.news-grid-empty {
  padding: 20px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ── 게시판 헤더 ─────────────────────────────────────────── */
.board-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 6px; border-bottom: 1px solid #333; margin-bottom: 0; }
.board-title { font-size: 14px; font-weight: bold; color: #222; }
.board-wrap { border-bottom: 1px solid #bbb; }
.board-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 12px; }

/* ── 게시글 목록 테이블 ───────────────────────────────────── */
.post-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.post-table colgroup .col-num    { width: 52px; }
.post-table colgroup .col-likes  { width: 40px; }
.post-table colgroup .col-title  { /* auto */ }
.post-table colgroup .col-author { width: 80px; }
.post-table colgroup .col-date   { width: 58px; }
.post-table colgroup .col-views  { width: 50px; }

.post-table thead tr { border-top: 2px solid #444; border-bottom: 1px solid #ccc; background: #f5f5f5; }
.post-table thead th { padding: 6px 4px; font-size: 11px; font-weight: bold; color: #555; text-align: center; }

.post-table tbody tr { border-bottom: 1px solid #e8e8e8; cursor: pointer; }
.post-table tbody tr:hover { background: #f5f9ff; }
.post-table tbody tr.row-notice { background: #fafafa; font-weight: bold; }
.post-table tbody tr.row-notice:hover { background: #f0f0f0; }
.post-table td { padding: 5px 4px; font-size: 12px; vertical-align: middle; }

/* 번호 */
.col-num { text-align: center; color: #888; }
/* 추천 */
.col-likes { text-align: center; color: #aaa; }
.col-likes.has-like { color: #c0392b; font-weight: bold; }
/* 제목 */
.col-title { overflow: hidden; text-align: left; padding-left: 8px; }
.post-cat { display: inline-block; padding: 0 4px; border: 1px solid #b0c4de; border-radius: 2px; font-size: 10px; color: #4a6fa8; margin-right: 4px; vertical-align: middle; white-space: nowrap; line-height: 16px; }
.post-cat--news-soccer         { background: #e8f5e9; border-color: #66bb6a; color: #2e7d32; }
.post-cat--news-oversea-soccer { background: #1a6634; border-color: #1a6634; color: #fff; }
.post-link { color: #333; font-size: 13px; vertical-align: middle; }
.post-link:hover { color: var(--brand-green); }
.post-comment-count { color: #c0392b; font-size: 11px; font-weight: bold; margin-left: 2px; vertical-align: middle; }
.post-attach-icon { font-size: 10px; margin-left: 3px; vertical-align: middle; opacity: 0.55; cursor: default; }
/* 글쓴이 */
.col-author { text-align: center; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 날짜 */
.col-date { text-align: center; color: #888; white-space: nowrap; }
/* 조회 */
.col-views { text-align: center; color: #aaa; }

/* 뱃지 */
.post-badge { display: inline-block; padding: 0 4px; border-radius: 2px; font-size: 10px; font-weight: bold; vertical-align: middle; margin-right: 2px; line-height: 15px; }
.post-badge-notice, .badge-notice { background: var(--brand-green); color: #fff; }
.post-badge-best,   .badge-best   { background: #c0392b; color: #fff; }
.post-badge-new,    .badge-new    { background: #c0392b; color: #fff; font-size: 9px; margin-left: 3px; padding: 0 3px; }
.post-meta { font-size: 12px; color: var(--text-muted); }

/* ── 버튼 ────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 16px; border-radius: 3px; font-size: 13px; font-weight: 600; transition: background 0.15s; }
.btn-primary { background: var(--brand-green); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: #eee; color: var(--text-primary); }
.btn-secondary:hover { background: #ddd; }
.btn-danger { background: var(--live-red); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ── 페이지네이션 ────────────────────────────────────────── */
.pagination { display: flex; gap: 2px; justify-content: center; margin: 14px 0; }
.page-btn { padding: 4px 9px; border: 1px solid #ddd; border-radius: 2px; font-size: 12px; color: #555; background: #fff; }
.page-btn.active { background: #444; color: #fff; border-color: #444; font-weight: bold; }
.page-btn:hover:not(.active) { background: #f0f0f0; border-color: #ccc; }

/* ── 폼 ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.form-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; font-size: 14px; outline: none; transition: border-color 0.15s; }
.form-input:focus { border-color: var(--brand-green); }
.form-error { color: var(--live-red); font-size: 12px; margin-top: 4px; }

/* ── 댓글 ────────────────────────────────────────────────── */
.comment-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.comment-item:last-child { border-bottom: none; }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comment-nickname { font-weight: 700; font-size: 13px; }
.comment-date { font-size: 12px; color: var(--text-muted); }
.comment-content { font-size: 14px; line-height: 1.6; }
.comment-deleted { color: var(--text-muted); font-style: italic; }
.comment-reply { margin-left: 24px; padding-left: 12px; border-left: 2px solid #e0e0e0; }
.vote-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.vote-btn { display: flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 3px; font-size: 12px; }
.vote-btn.liked { border-color: var(--brand-green); color: var(--brand-green); }
.vote-btn.disliked { border-color: var(--live-red); color: var(--live-red); }

/* ── 알림 드롭다운 ───────────────────────────────────────── */
.notif-dropdown { position: absolute; top: var(--header-h); right: 0; background: var(--white); border: 1px solid var(--border); width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 200; }
.notif-item { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; font-size: 13px; cursor: pointer; }
.notif-item:hover { background: #f8f8f8; }
.notif-item.unread { background: #f0f8f2; }

/* ── 탭 ──────────────────────────────────────────────────── */
.tab-bar { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 0; }
.tab-btn { padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab-btn:hover { color: var(--brand-green); }
.tab-btn.active { color: var(--brand-green); border-bottom-color: var(--brand-green); }
.tab-panel { display: none; padding-top: 12px; }
.tab-panel.active { display: block; }

/* ── 순위표 ──────────────────────────────────────────────── */
.standings-scroll { width: 100%; }
@media (max-width: 768px) {
  .standings-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .standings-scroll .standings-table { min-width: 720px; }
  .standings-scroll .standings-table td:nth-child(2),
  .standings-scroll .standings-table th:nth-child(2) {
    width: 40vw;
    max-width: 40vw;
    position: sticky;
    left: 32px;
    background: #fff;
    z-index: 1;
  }
  .standings-scroll .standings-table thead th:nth-child(2) {
    background: var(--brand-green);
  }
  .standings-scroll .standings-table td:first-child,
  .standings-scroll .standings-table th:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
  }
  .standings-scroll .standings-table thead th:first-child {
    background: var(--brand-green);
  }
}
.standings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.standings-table thead th { background: var(--brand-green); color: #fff; padding: 8px 10px; text-align: center; font-weight: 600; font-size: 12px; white-space: nowrap; }
.standings-table thead th:first-child,
.standings-table thead th:nth-child(2) { text-align: left; }
.standings-table thead th.th-live { text-align: center; min-width: 80px; }
.standings-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.standings-table tbody tr:hover { background: #f5fff8; }
.standings-table td { padding: 7px 10px; text-align: center; }
.standings-table td:first-child { text-align: center; font-weight: 700; color: var(--text-muted); width: 32px; }
.standings-table td:nth-child(2) { text-align: left; }
.standings-table td.td-live { text-align: center; padding: 4px 6px; white-space: nowrap; }
.standings-team { display: flex; align-items: center; gap: 7px;
  word-break: keep-all; overflow-wrap: break-word; line-height: 1.25; }
.standings-team img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.standings-team span { word-break: keep-all; overflow-wrap: break-word; }
.standings-pts { font-weight: 700; color: var(--brand-green); }
.standings-form { display: flex; gap: 2px; }
.standings-form span { display: inline-block; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; color: #fff; }
.standings-form .W { background: var(--brand-green); }
.standings-form .D { background: #999; }
.standings-form .L { background: var(--live-red); }
.standings-zone-cl      { border-left: 3px solid #1a6be8; }
.standings-zone-acl2    { border-left: 3px solid #0ea5e9; }
.standings-zone-el      { border-left: 3px solid #f59e0b; }
.standings-zone-playoff { border-left: 3px solid #10b981; }
.standings-zone-rel     { border-left: 3px solid var(--live-red); }
.standings-row-live     { background: rgba(232,41,42,0.04); }
.standings-live-score   { color: var(--live-red); font-size: 11px; font-weight: 700; white-space: nowrap; }

/* 실시간 점수 배지 */
.live-score-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px;
  border-radius: 5px; padding: 3px 0;
  font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.live-score-badge .lsb-my  { font-weight: 900; font-size: 14px; }
.live-score-badge .lsb-sep { opacity: 0.55; margin: 0 3px; font-weight: 400; }
.live-score-badge .lsb-opp { opacity: 0.85; font-weight: 700; }
.lsb-min { font-size: 11px; color: #888; margin-left: 5px; white-space: nowrap; }
.standings-season { font-size: 12px; color: var(--text-muted); text-align: right; padding: 6px 0 10px; }
.standings-conference-header { font-size: 13px; font-weight: 700; color: var(--brand-green); padding: 10px 4px 6px; border-bottom: 2px solid var(--brand-green); margin-bottom: 2px; }

/* ── 팀 페이지 ───────────────────────────────────────────── */
.team-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  margin-bottom: 12px;
}
.team-header-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}
.team-header-name {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 6px;
}
.team-header-meta {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}
.team-header-info { flex: 1; min-width: 0; }
/* 선수 모달 정보 그리드 — 모바일 2열 */
@media (max-width: 768px) {
  .player-info-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .player-info-empty { display: none !important; }
}

.team-header-venue {
  display: block;
  flex-shrink: 0;
  width: 90px;
  height: 55px;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  cursor: zoom-in;
  transition: transform 0.2s, box-shadow 0.2s;
}
.team-header-venue:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.team-header-venue img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .team-header-venue { width: 60px; height: 38px; }
}
.player-scroll { width: 100%; }
@media (max-width: 768px) {
  .player-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .player-scroll .player-table {
    min-width: calc(36px + 40vw + 240px);
    table-layout: fixed;
  }
  .player-scroll .player-table th:first-child,
  .player-scroll .player-table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #fff;
    width: 36px !important;
  }
  .player-scroll .player-table thead th:first-child { background: #f0f0ea; }
  .player-scroll .player-table th:nth-child(2),
  .player-scroll .player-table td:nth-child(2) {
    position: sticky; left: 36px; z-index: 1;
    background: #fff;
    width: 40vw !important;
  }
  .player-scroll .player-table thead th:nth-child(2) { background: #f0f0ea; }
  .player-scroll .player-table th:nth-child(3),
  .player-scroll .player-table td:nth-child(3) { width: 70px !important; }
  .player-scroll .player-table th:nth-child(4),
  .player-scroll .player-table td:nth-child(4) { width: 90px !important; }
  .player-scroll .player-table th:nth-child(5),
  .player-scroll .player-table td:nth-child(5) { width: 80px !important; }
}
.player-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.player-table th {
  background: #f0f0ea;
  padding: 7px 10px;
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.player-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-table td:nth-child(2) { white-space: normal; vertical-align: top; padding-top: 10px;
  word-break: keep-all; overflow-wrap: break-word; line-height: 1.25; }
.player-table td:nth-child(2) a,
.player-table td:nth-child(2) div { word-break: keep-all; overflow-wrap: break-word; min-width: 0; }
.player-table tbody tr:last-child td { border-bottom: none; }
.player-table tbody tr:hover { background: #fafaf6; }

/* ── 라운드 섹션 ─────────────────────────────────────────── */
.round-section { margin-bottom: 16px; }
.round-header {
  padding: 7px 12px;
  background: #c8d9cc;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-dark);
  border-left: 3px solid var(--brand-green);
  border-radius: 3px 3px 0 0;
}
.round-toggle-wrapper { margin-bottom: 8px; }
.round-toggle-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: var(--brand-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.round-toggle-btn:hover {
  background: #e8e8e0;
  color: var(--brand-dark);
}

/* ── 스피너 ──────────────────────────────────────────────── */
.spinner { display: flex; justify-content: center; padding: 32px; }
.spinner-ring { width: 32px; height: 32px; border: 3px solid #ddd; border-top-color: var(--brand-green); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 로드 시간 표시 ──────────────────────────────────────── */
.load-time-bar {
  margin-top: 16px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  border-top: 1px solid var(--border);
}

/* ── 모바일 오버레이 ─────────────────────────────────────── */
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 89; }
.nav-overlay.open { display: block; }

/* ── 반응형 (≤768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
  #left-nav {
    display: none;
    position: fixed;
    top: var(--header-h); left: 0;
    height: calc(100vh - var(--header-h));
    z-index: 90; width: 240px;
    transform: translateX(-100%);
    transition: transform 0.25s;
  }
  #left-nav.open { display: block; transform: translateX(0); }
  .hamburger { display: flex; }
  /* 모바일 sport-tab — 탭 영역 + 색상 대비 강화 */
  .sport-tab {
    padding: 8px 14px;
    font-size: 14px;
    color: #fff;                    /* 비활성 흰색 (옛 0.72 투명도 → solid) */
    border: 1px solid rgba(255,255,255,0.25);
  }
  .sport-tab.active {
    background: var(--brand-yellow);
    color: var(--text-primary);
    border-color: var(--brand-yellow);
  }
  .sport-tab:hover { background: rgba(255,255,255,0.14); color: #fff; }
  .sport-tab.active:hover { background: var(--brand-yellow); color: var(--text-primary); }

  /* 모바일: 종목 탭을 둘째 줄(별도 섹션)으로 분리 */
  :root { --header-h: 96px; }       /* 탭 키워서 헤더 높이 약간 증가 (88 → 96) */
  #header-wrap { height: var(--header-h); }
  .header-inner {
    flex-wrap: wrap;
    padding: 6px 12px 0;
    row-gap: 0;
    height: auto;
  }
  .header-logo    { order: 1; }
  .hamburger      { order: 0; }
  .header-actions { order: 2; margin-left: auto; }
  .header-sports {
    order: 3;
    flex: 0 0 100%;                 /* 부모 padding 안쪽 — 음수 마진 트릭 제거(가로 스크롤 방지) */
    margin: 8px 0 0;
    padding: 8px 0;
    gap: 6px;                       /* 탭 간 여백 ↑ */
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  #left-nav { top: var(--header-h); height: calc(100vh - var(--header-h)); }
  /* 모바일: 글쓴이·날짜·조회 숨김 (번호·추천·제목 유지) */
  .post-table thead th:nth-child(4),
  .post-table tbody td:nth-child(4),
  .post-table thead th:nth-child(5),
  .post-table tbody td:nth-child(5),
  .post-table thead th:nth-child(6),
  .post-table tbody td:nth-child(6) { display: none; }
  .post-table colgroup .col-num  { width: 44px; }
  .post-table colgroup .col-date { width: 52px; }
}

/* ── TUI Editor 커스텀 ───────────────────────────────────── */
.toastui-editor-defaultUI { border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; }
.toastui-editor-toolbar { border-radius: 6px 6px 0 0; }
.toastui-editor-main { font-size: 14px; line-height: 1.8; }
.toastui-editor-contents { min-height: 300px; font-size: 14px; line-height: 1.8; }
.ProseMirror { min-height: 300px; }

/* ── 2026 FIFA 월드컵 페이지 ──────────────────────────────── */
.wc-header {
  background: linear-gradient(135deg, #6d28d9 0%, #1e40af 100%);
  color: #fff; padding: 20px 16px; border-radius: 8px;
  margin: 8px 0 12px; text-align: center;
}
.wc-title {
  font-size: 22px; font-weight: 900; letter-spacing: 0.5px;
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
}
.wc-meta  { font-size: 12px; opacity: 0.9; margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wc-trophy-inline {
  width: 36px; height: 36px; object-fit: contain;
  background: rgba(255,255,255,0.15); padding: 3px; border-radius: 6px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .wc-trophy-inline { width: 28px; height: 28px; }
  .wc-title         { font-size: 18px; }
}
.wc-empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ── 12조 그리드 (4×3) ───────────────────────────────────── */
.wc-groups-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 1024px) { .wc-groups-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .wc-groups-grid { grid-template-columns: 1fr; } }

.wc-group-card {
  border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; background: #fff;
}
.wc-group-header {
  background: #1a6634; color: #fff; padding: 6px 10px;
  font-weight: 700; font-size: 13px;
}
.wc-group-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wc-group-table thead th {
  background: #fafafa; padding: 4px; font-weight: 600; color: #666;
  border-bottom: 1px solid #e5e7eb;
}
.wc-group-table .wc-th-team { text-align: left; padding-left: 8px; }
.wc-group-table tbody td {
  padding: 5px 4px; text-align: center; border-bottom: 1px solid #f3f4f6;
}
.wc-group-table .wc-td-team { text-align: left; padding-left: 8px; }
.wc-group-table .wc-pts    { font-weight: 700; color: #1a1a1a; }
.wc-group-table tr.wc-zone-r16 { background: rgba(26,107,232,0.06); }
.wc-group-table tr.wc-zone-r16 td:first-child { box-shadow: inset 3px 0 0 #1a6be8; }
.wc-group-table tr.wc-zone-3rd { background: rgba(245,158,11,0.05); }
.wc-group-table tr.wc-zone-3rd td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

.wc-team-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.wc-team-link:hover { color: var(--brand-green); }

/* ── 토너먼트 브라켓 ──────────────────────────────────────── */
/* 토너먼트 브라켓 래퍼 — 좌·우 스크롤 화살표 + 그라데이션 오버레이 */
.wc-bracket-wrap {
  position: relative;
}
.wc-bracket-wrap::before,
.wc-bracket-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 60px;
  pointer-events: none; z-index: 5;
  transition: opacity 0.25s;
  opacity: 0.7;
}
.wc-bracket-wrap::before {
  right: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.7));
}
.wc-bracket-wrap::after {
  left: 0;
  background: linear-gradient(to left, transparent, rgba(255,255,255,0.7));
}
.wc-bracket-arrow {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  background: rgba(26,102,52,0.18);
  border: none; border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--brand-green);
  cursor: pointer; z-index: 10;
  transition: opacity 0.25s, background 0.15s, transform 0.15s;
  opacity: 0.45;
}
.wc-bracket-arrow.right { right: 6px; animation: bracketPulseRight 1.4s ease-in-out infinite; }
.wc-bracket-arrow.left  { left: 6px;  animation: bracketPulseLeft 1.4s ease-in-out infinite; }
.wc-bracket-arrow:hover { opacity: 0.85; background: rgba(26,102,52,0.3); }
.wc-bracket-arrow:active { transform: translateY(-50%) scale(0.92); }

/* 끝/시작 도달 시 해당 방향 인디케이터 숨김 */
.wc-bracket-wrap.at-end::before,
.wc-bracket-wrap.at-end .wc-bracket-arrow.right { opacity: 0; pointer-events: none; }
.wc-bracket-wrap.at-start::after,
.wc-bracket-wrap.at-start .wc-bracket-arrow.left { opacity: 0; pointer-events: none; }

@keyframes bracketPulseRight {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(3px); }
}
@keyframes bracketPulseLeft {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(-3px); }
}
@media (min-width: 769px) {
  .wc-bracket-wrap::before, .wc-bracket-wrap::after, .wc-bracket-arrow { display: none; }
}
@media (max-width: 768px) {
  .wc-bracket-arrow { width: 48px; height: 48px; font-size: 28px; }
  .wc-bracket-arrow.right { right: 8px; }
  .wc-bracket-arrow.left  { left: 8px; }
}

.wc-bracket {
  display: flex; gap: 16px; overflow-x: auto;
  padding: 12px 4px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}
.wc-bracket-col { scroll-snap-align: start; }
.wc-bracket-col {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 200px; flex: 1 0 200px;
  align-self: stretch;     /* 모든 컬럼 같은 높이 */
}
.wc-bracket-col-matches {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;                 /* 라벨 아래 남은 공간 차지 */
}
/* 첫 컬럼(R32)은 위에서부터 쌓고, 그 다음 컬럼들은 매치를 균등 분산 → 이전 컬럼의 두 매치 중간에 위치 */
.wc-bracket-col:not(:first-child) .wc-bracket-col-matches {
  justify-content: space-around;
  gap: 0;
}
.wc-bracket-label {
  font-weight: 700; font-size: 12px; color: #666;
  padding: 6px 10px; background: #f5f5f0; border-radius: 4px; text-align: center;
}
.wc-bracket-match {
  display: block; border: 1px solid #e5e7eb; border-radius: 4px;
  padding: 8px; background: #fff; text-decoration: none; color: inherit;
  transition: border-color .12s;
}
.wc-bracket-match:hover { border-color: var(--brand-green); }
.wcb-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0; font-size: 12px;
}
.wcb-row img { flex-shrink: 0; }
.wcb-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcb-score  { font-weight: 700; color: #1a1a1a; min-width: 18px; text-align: right; }
.wcb-winner {
  color: var(--brand-green);
  font-weight: 700;
  background: #8ad272;
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
}
.wcb-meta   { margin-top: 4px; font-size: 10px; color: #999; text-align: center; }
.wcb-live   { color: var(--live-red); font-weight: 700; }

.wc-bracket-pending {
  text-align: center; padding: 60px 20px;
  border: 2px dashed #d1d5db; border-radius: 8px;
  color: #666; background: #fafafa;
}

/* ── 매치 예측·배당 (match.js renderPredictions) ───────── */
.pred-block { margin-bottom: 16px; }
.pred-block:last-child { margin-bottom: 0; }
.pred-block-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--text-primary); }
.pred-bookmaker { font-weight: 400; color: var(--text-muted); font-size: 11px; }

/* 1X2 배당 */
.pred-odds-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pred-odds-cell { background: #f5f5f0; border-radius: 6px; padding: 10px; text-align: center; }
.pred-odds-team { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pred-odds-val { font-size: 20px; font-weight: 900; color: #1a6634; }

/* 승률 바 */
.pred-percent-bar { display: flex; height: 28px; border-radius: 4px; overflow: hidden; font-size: 11px; font-weight: 700; color: #fff; }
.pp-seg { display: flex; align-items: center; justify-content: center; transition: width 0.3s; }
.pp-seg.pp-home { background: #1a6be8; }
.pp-seg.pp-draw { background: #888; }
.pp-seg.pp-away { background: #dc2626; }
.pred-percent-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.pred-percent-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.dot.pp-home { background: #1a6be8; }
.dot.pp-draw { background: #888; }
.dot.pp-away { background: #dc2626; }
.pred-advice { margin-top: 8px; font-size: 12px; color: #444; line-height: 1.4; padding: 6px 8px; background: #fffae6; border-radius: 4px; }
.pred-winner { margin-top: 4px; font-size: 12px; color: #444; }

/* 팀 비교 */
.pred-compare { display: flex; flex-direction: column; gap: 6px; }
.pred-cmp-row { display: grid; grid-template-columns: 50px 1fr 60px 1fr 50px; align-items: center; gap: 6px; font-size: 12px; }
.pcr-home { text-align: right; font-weight: 700; }
.pcr-away { text-align: left;  font-weight: 700; }
.pcr-lbl  { text-align: center; color: var(--text-muted); font-size: 11px; }
.pcr-bar  { display: flex; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.pcr-bar-h { display: block; }
.pcr-bar-a { display: block; }

/* H2H */
.pred-h2h { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pred-h2h-row { display: grid; grid-template-columns: 70px 1fr 60px 1fr 90px; gap: 6px; align-items: center; padding: 4px 6px; background: #fafafa; border-radius: 3px; }
.ph-date { color: var(--text-muted); font-size: 11px; }
.ph-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-home { text-align: right; }
.ph-away { text-align: left; }
.ph-score { text-align: center; font-weight: 700; }
.ph-lg { color: var(--text-muted); font-size: 10px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .pred-cmp-row, .pred-h2h-row { font-size: 11px; }
  .pred-h2h-row { grid-template-columns: 1fr 1fr 50px 1fr 1fr; }
}

/* ── 예측 — 팀 비교 (레이더 + 가로 바, api-football 스타일) ── */
.pred-compare-legend {
  display: flex; gap: 16px; font-size: 12px; color: #444; margin-bottom: 10px;
  font-weight: 600;
}
.pred-compare-legend .dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
  margin-right: 5px; vertical-align: middle;
}
.pred-compare-grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: center;
}
.pred-radar-wrap { display: flex; align-items: center; justify-content: center; }

.pred-bars { display: flex; flex-direction: column; gap: 10px; }
.pred-bar-row { display: flex; flex-direction: column; gap: 3px; }
.pbr-label {
  text-align: center; font-size: 10px; font-weight: 700;
  color: #666; letter-spacing: 0.6px;
}
.pbr-row { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 8px; }
.pbr-pct { font-size: 12px; font-weight: 700; color: #444; }
.pbr-pct-h { text-align: right; }
.pbr-pct-a { text-align: left;  color: #888; }
.pbr-track {
  display: flex; height: 6px; background: #e9eef3; border-radius: 3px;
  overflow: hidden;
}
.pbr-fill { height: 100%; transition: width 0.3s; }
.pbr-fill-h { background: #1a6be8; }
.pbr-fill-a { background: #7cd040; }

@media (max-width: 768px) {
  .pred-compare-grid { grid-template-columns: 1fr; }
  .pred-radar-wrap   { max-width: 280px; margin: 0 auto; }
}

/* ── 예측 — 가로 바 (양 끝에서 시작, 트랙은 100% 척도) ───── */
.pred-bars .pbr-track {
  position: relative;
  height: 8px; background: #e9eef3; border-radius: 4px; overflow: hidden;
}
.pred-bars .pbr-fill {
  position: absolute; top: 0; bottom: 0;
  transition: width 0.3s ease;
}
.pred-bars .pbr-fill-h { left: 0;  background: #1a6be8; max-width: 50%; }
.pred-bars .pbr-fill-a { right: 0; background: #7cd040; max-width: 50%; }
.pred-bars .pbr-fill-h { width: calc(var(--h, 0%) * 0.5); }   /* fallback */

/* ── 예측 — 핵심 결과 카드 그리드 (예상 승자/스코어/언오버/무승부) ── */
.pred-fact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin-top: 12px;
}
.pred-fact {
  background: #f5f7f5; border-radius: 6px; padding: 8px 10px;
  text-align: center;
}
.pred-fact .pf-k { font-size: 11px; color: #666; margin-bottom: 4px; }
.pred-fact .pf-v { font-size: 14px; font-weight: 700; color: #1a1a1a; }

/* ── 예측 — 최근 5경기 폼 ─────────────────────────────────── */
.pred-last5-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.pl5-col {
  background: #fafafa; border-radius: 6px; padding: 10px 12px;
}
.pl5-team { font-weight: 700; font-size: 13px; margin-bottom: 6px; text-align: center; }
.pl5-form { display: flex; gap: 3px; justify-content: center; margin-bottom: 8px; }
.form-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 3px;
  font-size: 11px; font-weight: 800; color: #fff;
}
.form-badge.fb-w { background: #16a34a; }
.form-badge.fb-d { background: #888;    }
.form-badge.fb-l { background: #dc2626; }
.form-badge.fb-empty { background: #ddd; color: #888; }
.form-empty { color: #888; font-size: 12px; }
.pl5-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  font-size: 11px;
}
.pl5-stats > div {
  text-align: center; background: #fff; border-radius: 4px; padding: 4px;
}
.pl5-stats b { display: block; font-size: 13px; font-weight: 700; color: #1a1a1a; }
.pl5-stats span { color: #888; font-size: 10px; }

@media (max-width: 600px) {
  .pred-last5-grid { grid-template-columns: 1fr; }
}