/**
 * KUBF Main Page Styles
 * 한국대학야구연맹 메인 페이지 스타일
 * Figma 메타데이터 기반 정확한 구현
 *
 * 참고: 기본 리셋은 테마의 reset.css에서 처리됨
 */

/* Base - 테마 리셋 보완 */
html,
body {
  overflow-x: hidden;
}

body {
  font-family: 'Noto Sans KR', 'Roboto', sans-serif;
  background: #fff;
  color: #1c2434;
  line-height: 1.6;
}

/* 메인 페이지 색상 - 직접 코드 사용 */

/* Container - Figma: 좌우 여백 509px → 20.38vw, 콘텐츠 영역 1480px → 59.25vw */
.kubf-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 12vw, 300px); /* 좌우 공통 여백 확대 */
}

/* Navigation - Figma: x=625, width=1106, height=48, 5 items */
/* Item positions: 625, 860, 1105, 1350, 1597 → gap ~101px between items */
.kubf-nav {
  display: flex;
  gap: clamp(20px, 4.04vw, 101px); /* Figma: 101/2498=4.04vw */
  align-items: center;
  justify-content: center;
}

/* Figma: each item width=134, height=48, font-size=26, Inter SemiBold */
.kubf-nav a {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-size: clamp(16px, 1.2vw, 30px); /* 네비게이션 폰트 확대 */
  font-weight: 600;
  color: #fff;
  width: clamp(80px, 5.36vw, 134px); /* Figma: 134/2498=5.36vw */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.kubf-nav a:hover {
  opacity: 0.8;
}

/* Auth Links - Figma: 회원가입 x=1980, 로그인 x=2125, gap=31px */
/* Each: width=114, height=27 (icon 24x24 + text 81x27) */
.kubf-auth {
  display: flex;
  gap: clamp(15px, 1.24vw, 31px); /* Figma: 31/2498=1.24vw */
  align-items: center;
  flex-shrink: 0;
}

/* Figma: text width=81, height=27, font-size=20, Inter Medium */
.kubf-auth a {
  display: flex;
  align-items: center;
  gap: 9px; /* Figma: icon to text gap */
  color: #fff;
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-size: clamp(12px, 0.8vw, 20px); /* Figma: 20/2498=0.8vw */
  font-weight: 500;
  white-space: nowrap;
  height: 27px;
}

/* Figma: icon 24x24 */
.kubf-auth svg {
  width: clamp(16px, 0.96vw, 24px); /* Figma: 24/2498=0.96vw */
  height: clamp(16px, 0.96vw, 24px);
  flex-shrink: 0;
}

/* 햄버거 메뉴 (모바일) */
.kubf-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.kubf-menu-toggle svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}

/* Mobile Menu */
.kubf-mobile-menu {
  position: fixed;
  top: 0;
  right: -280px;
  width: 280px;
  height: 100vh;
  background: #092077;
  z-index: 1001;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.kubf-mobile-menu.active {
  right: 0;
}

.kubf-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kubf-mobile-menu-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.kubf-mobile-menu-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.kubf-mobile-menu-close svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}

.kubf-mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 5px;
  flex: 1;
}

.kubf-mobile-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 15px;
  border-radius: 8px;
  transition: background 0.2s;
}

.kubf-mobile-nav a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.kubf-mobile-auth {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kubf-mobile-auth-btn {
  display: block;
  text-align: center;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s;
}

.kubf-mobile-auth-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.kubf-mobile-auth-btn.primary {
  background: #fff;
  color: #092077;
  border-color: #fff;
}

.kubf-mobile-auth-btn.primary:hover {
  background: rgba(255, 255, 255, 0.9);
}

.kubf-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}

.kubf-mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   Hero Section - Figma: width=2498, height=832
   히어로 이미지만 표시, 헤더가 위에 겹쳐서 표시됨
   ======================================== */
.kubf-hero {
  width: 100%;
  max-width: 2498px; /* Figma exact */
  margin: 0 auto;
}

/* Figma: hero image fills 2498x832 area */
.kubf-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 832px; /* Figma exact */
  object-fit: cover;
}

/* ========================================
   Scoreboard Section - Figma: x=509, y=1205, width=1440, height=323
   Layout: left card (220px) + scoreboard (1000px) + right card (220px) = 1440px
   Cards are flush against scoreboard (gap=0)
   ======================================== */
.kubf-scoreboard-section {
  padding: 40px 0;
}

/* 기본 container padding 상속 - 별도 오버라이드 불필요 */

/* 스코어보드 + 사이드카드 레이아웃 - 전체 너비 활용 */
.kubf-scoreboard-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
}

/* 스코어보드 반응형 */
@media (max-width: 1200px) {
  .kubf-scoreboard {
    padding: 20px 30px;
  }
}

@media (max-width: 900px) {
  .kubf-scoreboard {
    padding: 15px 20px;
  }

  .kubf-scoreboard-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .kubf-scoreboard-section {
    padding: 20px 0;
  }

  .kubf-scoreboard-section .kubf-container {
    padding: 0 15px;
  }

  .kubf-scoreboard {
    padding: 15px;
    border-radius: 10px;
    min-height: auto;
  }

  .kubf-scoreboard-header {
    margin-bottom: 10px;
  }

  .kubf-scoreboard-league {
    font-size: 14px;
    line-height: 1.4;
    height: auto;
  }

  /* 모바일: 팀 - 점수 - 팀 가로 배치 */
  .kubf-scoreboard-main {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .kubf-team {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    width: auto;
    flex: 1;
    gap: 4px;
    margin: 0 !important;
  }

  .kubf-team.home,
  .kubf-team.away {
    margin: 0;
  }

  .kubf-team-logo {
    width: 48px;
    height: 48px;
  }

  .kubf-team-name {
    font-size: 14px;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85px;
  }

  .kubf-score-center {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .kubf-scores-row {
    gap: 12px;
  }

  .kubf-score {
    font-size: 40px;
    width: auto;
    min-width: 40px;
  }

  .kubf-live-badge {
    font-size: 12px;
    height: 24px;
    min-width: 44px;
    padding: 0 8px;
  }

  .kubf-match-info {
    margin-top: 4px;
  }

  .kubf-match-datetime,
  .kubf-match-location {
    font-size: 12px;
    line-height: 1.4;
  }

  /* 이닝 테이블 모바일 - 화면에 맞게 */
  .kubf-inning-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0 15px;
  }

  .kubf-inning-table {
    grid-template-columns: minmax(50px, 60px) repeat(13, minmax(18px, 1fr));
    width: 100%;
  }

  .kubf-inning-cell {
    height: 24px;
    font-size: 10px;
  }

  .kubf-inning-cell.team-name {
    font-size: 10px;
  }

  /* 리그 탭 모바일 */
  .kubf-league-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 15px;
    padding-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .kubf-league-tab {
    height: auto;
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.3;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .kubf-scoreboard-section {
    padding: 15px 0;
  }

  .kubf-scoreboard-section .kubf-container {
    padding: 0 10px;
  }

  .kubf-scoreboard {
    padding: 12px;
    border-radius: 8px;
  }

  .kubf-scoreboard-league {
    font-size: 12px;
  }

  .kubf-team-logo {
    width: 46px;
    height: 46px;
  }

  .kubf-team-name {
    font-size: 12px;
    max-width: 72px;
  }

  .kubf-score {
    font-size: 34px;
    min-width: 40px;
  }

  .kubf-scores-row {
    gap: 10px;
  }

  .kubf-live-badge {
    font-size: 11px;
    height: 22px;
    min-width: 40px;
    padding: 0 7px;
  }

  .kubf-match-datetime,
  .kubf-match-location {
    font-size: 11px;
  }

  .kubf-inning-table-wrap {
    margin: 0;
    padding: 0;
  }

  .kubf-inning-table {
    grid-template-columns: minmax(40px, 50px) repeat(13, minmax(16px, 1fr));
    width: 100%;
  }

  .kubf-inning-cell {
    height: 24px;
    font-size: 10px;
    padding: 2px 1px;
  }

  .kubf-inning-cell.team-name {
    font-size: 10px;
    padding-left: 4px;
  }

  .kubf-league-tabs {
    gap: 6px;
    margin-top: 12px;
    padding-bottom: 15px;
  }

  .kubf-league-tab {
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* ========================================
   Side Match Cards - Figma: width=220, height=224 → 8.81vw, 8.97vw
   Position: y=1223 (18px below scoreboard top at y=1205)
   Left: border-radius 10px 0 0 10px
   Right: border-radius 0 10px 10px 0
   ======================================== */
.kubf-match-card {
  display: none; /* 모바일에서 숨김, 데스크탑에서 표시 */
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  padding: clamp(28px, 1.2vw, 40px) clamp(14px, 0.9vw, 22px);
  width: clamp(190px, 10.5vw, 260px);
  flex-shrink: 0;
  margin: auto 0;
}

.kubf-match-card.left {
  border-radius: clamp(6px, 0.4vw, 10px) 0 0 clamp(6px, 0.4vw, 10px); /* 10/2498=0.4vw */
  border-right: none;
}

.kubf-match-card.right {
  border-radius: 0 clamp(6px, 0.4vw, 10px) clamp(6px, 0.4vw, 10px) 0;
  border-left: none;
}

/* 큰 화면에서 사이드 카드 표시 */
@media (min-width: 1200px) {
  .kubf-match-card {
    display: flex;
  }
}

/* Match Card Header - Date와 Status를 flex로 배치 */
/* Figma: gap between date and status = 6px → 0.24vw */
.kubf-match-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(4px, 0.24vw, 6px); /* 6/2498=0.24vw */
  margin-bottom: clamp(10px, 0.64vw, 16px); /* 16/2498=0.64vw */
}

/* Match Date - Figma: width=138, height=24, font-size=16 → 5.52vw, 0.96vw, 0.64vw */
.kubf-match-date {
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  font-size: clamp(13px, 0.76vw, 19px);
  font-weight: 500;
  color: #1c2434;
  line-height: clamp(18px, 1.1vw, 28px);
  height: auto;
}

/* Status Badge - Figma: width=40 (End) / 46 (Live), height=23, border-radius=15 → 1.6vw, 0.92vw, 0.6vw */
.kubf-match-status {
  background: #bababa; /* Figma: End badge color */
  color: #fff;
  padding: 0 clamp(6px, 0.32vw, 8px);
  height: clamp(20px, 1.1vw, 28px);
  width: clamp(34px, 1.8vw, 46px);
  border-radius: clamp(10px, 0.6vw, 15px);
  font-size: clamp(12px, 0.68vw, 17px);
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kubf-match-status.live {
  background: #5ecfff; /* Figma: Live badge color */
  width: clamp(38px, 2vw, 52px);
}

/* Match Teams - Figma: gap=5px → 0.2vw between team rows */
.kubf-match-teams {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.2vw, 5px); /* 5/2498=0.2vw */
  flex: 1;
}

/* Match Team Row - Figma: width=173, height=48 → 6.93vw, 1.92vw */
.kubf-match-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: clamp(120px, 6.93vw, 173px); /* 173/2498=6.93vw */
  height: clamp(32px, 1.92vw, 48px); /* 48/2498=1.92vw */
}

/* Figma: logo + name group, gap=6px → 0.24vw */
.kubf-match-team-info {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.24vw, 6px); /* 6/2498=0.24vw */
}

/* Team Logo - Figma: width=48, height=48 → 1.92vw */
.kubf-match-team-logo {
  width: clamp(32px, 1.92vw, 48px); /* 48/2498=1.92vw */
  height: clamp(32px, 1.92vw, 48px);
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Team Name - Figma: width=71, font-size=16, line-height=24 → 2.84vw, 0.64vw, 0.96vw */
.kubf-match-team-name {
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  font-size: clamp(13px, 0.76vw, 19px);
  font-weight: 500;
  color: #1c2434;
  line-height: clamp(18px, 1.1vw, 28px);
  width: clamp(82px, 3vw, 80px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Team Score - Figma: width=23, font-size=20, line-height=24 → 0.92vw, 0.8vw, 0.96vw */
.kubf-match-team-score {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(16px, 0.96vw, 24px);
  font-weight: 600;
  line-height: clamp(18px, 1.1vw, 28px);
  width: clamp(20px, 1.1vw, 28px);
  text-align: center;
}

.kubf-match-team-score.winner {
  color: #f57c7c; /* Figma exact */
}

.kubf-match-team-score.loser {
  color: #625b71; /* Figma exact */
}

/* ========================================
   Main Scoreboard - Figma: width=1000, height=260 → 40.03vw, 10.41vw
   Inner content: width=800 (padding 100px on each side)
   background=#092077, border-radius=14
   ======================================== */
.kubf-scoreboard {
  display: flex;
  flex-direction: column;
  background: #092077;
  border-radius: clamp(8px, 0.56vw, 14px);
  padding: clamp(15px, 0.8vw, 20px) clamp(40px, 4vw, 100px)
    clamp(20px, 1.2vw, 30px);
  flex: 1; /* 전체 너비 활용 */
  min-height: clamp(180px, 10.41vw, 260px);
  box-shadow: 6px 6px 54px rgba(0, 0, 0, 0.05);
}

/* Scoreboard Header - League Name - Figma: margin-bottom=12px */
.kubf-scoreboard-header {
  text-align: center;
  margin-bottom: 12px; /* Figma exact */
}

/* League Name - Figma: width=303, height=24, font-size=15, Roboto Medium + Noto Sans KR Medium, color=#4880FF, line-height=24 */
.kubf-scoreboard-league {
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  color: #4880ff; /* Figma exact */
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  height: auto;
}

/* 스코어보드 메인 - 팀/점수 영역 Figma: 전체 수평 배치 */
/* 스코어보드 메인 - Figma: 팀명(y=1257)과 점수(y=1256)가 같은 수평선 */
.kubf-scoreboard-main {
  display: flex;
  align-items: flex-start; /* 상단 정렬 후 개별 조정 */
  justify-content: center;
  margin-bottom: clamp(10px, 0.6vw, 15px);
  width: 100%;
}

/* 팀 블록 - Figma: 팀명(145.56) + gap(8px) + 로고(55) ≈ 208px */
/* Figma: 로고 y=1245, 팀명 y=1257 → 팀명은 로고 상단에서 12px 아래 */
.kubf-team {
  display: flex;
  align-items: center; /* 상단 정렬 - 팀명에 margin-top으로 조정 */
  gap: clamp(5px, 0.32vw, 8px); /* Figma: 8px, 8/2498=0.32vw */
  width: clamp(130px, 8.35vw, 209px); /* 208.6/2498=8.35vw */
  flex-shrink: 0;
}

/* 홈팀: 팀명(우측정렬) → 로고 → [60px gap to score] */
.kubf-team.home {
  flex-direction: row-reverse;
  justify-content: flex-start;
  margin-right: clamp(20px, 2.4vw, 60px); /* Figma: 60px gap to score */
}

.kubf-team.home .kubf-team-name {
  text-align: right;
}

/* 원정팀: [66px gap from score] → 로고 → 팀명(좌측정렬) */
.kubf-team.away {
  flex-direction: row;
  justify-content: flex-start;
  margin-left: clamp(22px, 2.64vw, 66px); /* Figma: 66px gap from score */
}

.kubf-team.away .kubf-team-name {
  text-align: left;
}

/* Team Logo - Figma: width=55.014, height=48 */
.kubf-team-logo {
  width: clamp(35px, 2.2vw, 55px); /* 55/2498=2.2vw */
  height: clamp(30px, 1.92vw, 48px); /* 48/2498=1.92vw */
  object-fit: contain;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}

/* 팀 이름 - Figma: font-size=23, width=145.56, Roboto SemiBold + Noto Sans KR Bold */
/* Figma: 로고 y=1245, 팀명 y=1257 → margin-top: 12px로 점수와 수평 맞춤 */
.kubf-team-name {
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  color: #e2e8f0;
  font-size: clamp(16px, 1.1vw, 26px);
  font-weight: 600;
}

/* 점수 중앙 영역 - Figma: Group 1000004433 width=332.38 */
/* Figma: 로고 y=1245, 점수 y=1256 → margin-top: 11px로 팀명과 수평 맞춤 */
.kubf-score-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  margin-top: clamp(
    3px,
    0.25vw,
    11px
  ); /* Figma: 11px (1256-1245=11), 11/2498=0.44vw */
}

/* Scores Row - 점수와 Live 배지를 한 줄로 배치, Figma: gap ~95px */
.kubf-scores-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.8vw, 95px); /* ~95/2498=3.8vw */
}

/* Live Badge - Figma: width=45.85, height=23, border-radius=15, font-size=14, Cairo Bold, bg=#5ECFFF */
.kubf-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5ecfff;
  color: #fff;
  padding: 0 clamp(6px, 0.32vw, 8px);
  height: clamp(20px, 1.1vw, 28px);
  min-width: clamp(40px, 2vw, 52px);
  border-radius: clamp(10px, 0.6vw, 15px);
  font-size: clamp(12px, 0.68vw, 17px);
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
}

/* Scores - Figma: font-size=50, width=66.476, gap=99.713 → 2.0vw, 2.66vw, 3.99vw */
.kubf-scores {
  display: flex;
  gap: clamp(30px, 3.99vw, 100px); /* 99.713/2498=3.99vw */
  align-items: center;
  justify-content: center;
}

/* Score - Figma: font-size=50, Roboto Bold, width=66.476 */
.kubf-score {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(36px, 2.4vw, 60px);
  font-weight: 700;
  color: #fff;
  width: clamp(48px, 3vw, 75px);
  text-align: center;
  line-height: 1;
}

/* Match Info - Date and Location */
.kubf-match-info {
  margin-top: 5px;
}

/* 경기 일시 */
.kubf-match-datetime {
  display: block;
  font-family: 'Roboto', sans-serif;
  color: #e2e8f0;
  font-size: clamp(13px, 0.72vw, 18px);
  font-weight: 600;
  line-height: 26px;
  text-align: center;
}

/* Location - Figma: font-size=12, Roboto SemiBold + Noto Sans KR Bold, color=#E2E8F0, line-height=24 */
.kubf-match-location {
  display: block;
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  color: #e2e8f0;
  font-size: clamp(13px, 0.72vw, 18px);
  font-weight: 600;
  line-height: 26px;
  text-align: center;
}

/* 이닝 테이블 - Figma: width=800, 팀명 113px + 13컬럼 각 51px */
.kubf-inning-table {
  display: grid;
  /* 팀명 + 이닝 1-9 + R/H/E/B (총 14컬럼) */
  grid-template-columns: minmax(80px, 115px) repeat(13, minmax(40px, 55px));
  width: fit-content;
  margin: 0 auto;
}

.kubf-inning-row {
  display: contents;
}

/* Header Row - Figma: bg=rgba(0,0,0,0.2), height=30 */
.kubf-inning-row.header-row .kubf-inning-cell {
  background: rgba(0, 0, 0, 0.2);
  color: #4880ff;
}

/* Inning Cell - Figma: width=51, height=30, font-size=16, Roboto Medium */
.kubf-inning-cell {
  height: clamp(24px, 1.4vw, 35px);
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(12px, 0.8vw, 20px);
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* 팀명 셀 - Figma: width=113 (실제 데이터 103.58), 좌측 정렬 */
.kubf-inning-cell.team-name {
  text-align: left;
  justify-content: flex-start;
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stat Cells (R, H, E, B) - Figma: color=#4880FF */
.kubf-inning-cell.stat {
  color: #4880ff;
}

/* ========================================
   League Tabs - Figma: y=1520, 각 탭 width=320, height=50 → 12.81vw, 2.0vw
   3 tabs with 20px gap between them
   Active: bg=#092077, border=#ddd, border-radius=10
   Inactive: bg=#fff, border=#ddd
   ======================================== */
/* League Tabs - 전체 너비 활용, 3열 균등 분배 */
.kubf-league-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 0.8vw, 20px); /* 20/2498=0.8vw */
  justify-content: center;
  margin-top: clamp(8px, 0.52vw, 13px); /* 13/2498=0.52vw */
  max-width: none;
  width: 100%;
}

/* 데스크탑: 리그 탭 너비를 스코어보드(파란 박스)와 동일하게 */
@media (min-width: 1200px) {
  .kubf-league-tabs {
    /* 사이드 카드 너비만큼 좌우 마진 추가 */
    margin-left: clamp(190px, 10.5vw, 260px);
    margin-right: clamp(190px, 10.5vw, 260px);
    width: calc(100% - 2 * clamp(190px, 10.5vw, 260px));
  }
}

/* Figma: 전체 너비 활용 */
.kubf-league-tab {
  width: 100%;
  height: clamp(36px, 2.2vw, 55px);
  border-radius: clamp(6px, 0.4vw, 10px);
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  font-size: clamp(13px, 0.76vw, 19px);
  font-weight: 500;
  line-height: clamp(14px, 0.84vw, 21px);
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #ddd; /* Figma exact */
  background: #fff;
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(5px, 0.32vw, 8px) clamp(8px, 0.48vw, 12px);
}

.kubf-league-tab.active {
  background: #092077; /* Figma exact: primary color */
  color: #fff;
  border-color: #ddd;
}

.kubf-league-tab:hover:not(.active) {
  border-color: #092077;
}

/* Responsive: 작은 화면에서 탭 조정 */
@media (max-width: 1100px) {
  .kubf-league-tabs {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* ========================================
   Board Section - Figma: x=509, y=1587, width=1440, height=287 → 57.65vw, 11.49vw
   3열 그리드: 공지사항(x=509), 연맹소식(x=1014), 보도자료(x=1519)
   각 보드: width=430, height=287, gap=75px → 17.21vw, 11.49vw, 3.0vw
   ======================================== */
.kubf-board-section {
  padding: clamp(30px, 2.4vw, 60px) 0; /* 60/2498=2.4vw */
  background: #fff;
}

/* 기본 container padding 상속 - 별도 오버라이드 불필요 */

/* 3열 게시판 그리드 */
.kubf-board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 3vw, 75px);
}

/* 개별 게시판 카드 */
.kubf-board {
  background: #fff;
}

/* Responsive: 작은 화면에서 그리드 조정 */
@media (max-width: 1100px) {
  .kubf-board-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Board Header - Figma: border-bottom line, height=48px → 1.92vw */
.kubf-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: clamp(6px, 0.4vw, 10px); /* 10/2498=0.4vw */
  border-bottom: 2px solid #000;
  margin-bottom: clamp(12px, 0.72vw, 18px); /* 18/2498=0.72vw */
  height: clamp(32px, 1.92vw, 48px); /* 48/2498=1.92vw */
}

/* Board Title */
.kubf-board-title {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-size: clamp(18px, 1.1vw, 28px); /* 폰트 확대 */
  font-weight: 800;
  color: #000;
  line-height: 1.2;
}

/* More Button - Figma: width=30, height=30 → 1.2vw */
.kubf-board-more {
  width: clamp(20px, 1.2vw, 30px); /* 30/2498=1.2vw */
  height: clamp(20px, 1.2vw, 30px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kubf-board-more svg {
  width: clamp(15px, 0.88vw, 22px); /* 22/2498=0.88vw */
  height: clamp(15px, 0.88vw, 22px);
}

/* Board List - Figma: 5 items, gap=14px → 0.56vw */
.kubf-board-list {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 0.56vw, 14px); /* 14/2498=0.56vw */
}

/* Board Item - Figma: height=30px, gap=11px → 1.2vw, 0.44vw */
.kubf-board-item {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.44vw, 11px); /* 11/2498=0.44vw */
  height: clamp(20px, 1.2vw, 30px); /* 30/2498=1.2vw */
}

/* Board Tag - Figma: width=75, height=30, border-radius=2, font-size=18 → 3.0vw, 1.2vw, 0.72vw */
.kubf-board-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(50px, 3vw, 75px); /* 75/2498=3.0vw */
  height: clamp(20px, 1.2vw, 30px); /* 30/2498=1.2vw */
  border-radius: 2px; /* Figma exact */
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-size: clamp(13px, 0.8vw, 20px); /* 태그 폰트 확대 */
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}

.kubf-board-tag.notice {
  background: #3bc8fc;
}

.kubf-board-tag.news {
  background: #b8ed55;
}

.kubf-board-tag.media {
  background: #faca5b;
}

/* Board Item Title */
.kubf-board-item-title {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-size: clamp(14px, 0.85vw, 21px); /* 폰트 확대 */
  font-weight: 400;
  color: #000;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kubf-board-item-title:hover {
  text-decoration: underline;
}

/* ========================================
   Gallery Section - 전체 너비 활용
   4열 그리드: 균등 분배
   ======================================== */
/* Gallery Section - 배경만 담당 */
.kubf-gallery-section {
  background: #fff;
  margin-bottom: clamp(28px, 1.88vw, 47px);
  padding: 0 clamp(20px, 12vw, 300px); /* 좌우 공통 여백 확대 */
}

/* Gallery Card - 카드 스타일 (border, shadow, padding) */
.kubf-gallery-section .kubf-container {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 2px;
  box-shadow: 0px 8px 13px -3px rgba(0, 0, 0, 0.07);
  padding: clamp(24px, 1.6vw, 40px);
}

/* 갤러리 헤더 */
.kubf-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: clamp(10px, 0.68vw, 17px);
  border-bottom: 2px solid #000;
  margin-bottom: clamp(12px, 0.8vw, 20px);
}

/* Gallery Title */
.kubf-gallery-title {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-size: clamp(18px, 1.1vw, 28px); /* 폰트 확대 */
  font-weight: 800;
  color: #000;
  line-height: 1.2;
}

.kubf-gallery-more {
  width: clamp(20px, 1.2vw, 30px); /* 30/2498=1.2vw */
  height: clamp(20px, 1.2vw, 30px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 4열 갤러리 그리드 */
.kubf-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 1.6vw, 40px);
}

@media (max-width: 1100px) {
  .kubf-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* 갤러리 아이템 */
.kubf-gallery-item {
  display: flex;
  flex-direction: column;
}

/* Gallery Thumbnail - 비율 유지 */
.kubf-gallery-thumb {
  width: 100%;
  aspect-ratio: 300 / 185;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: clamp(8px, 0.52vw, 13px); /* 13/2498=0.52vw */
  background: #d9d9d9;
}

/* Gallery Item Title - Figma: font-size=18, line-height=22 → 0.72vw, 0.88vw */
.kubf-gallery-item-title {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-size: clamp(12px, 0.72vw, 18px); /* 18/2498=0.72vw */
  font-weight: 500;
  color: #000;
  line-height: clamp(14px, 0.88vw, 22px); /* 22/2498=0.88vw */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ========================================
   Teams Section - Figma: 팀 로고 리스트 + 필터
   Filter: width=108, height=50 → 4.32vw, 2.0vw
   Team items: 48px logo + name → 1.92vw
   반응형 flex 기반
   ======================================== */
.kubf-teams-section {
  padding: clamp(28px, 1.88vw, 47px) 0 clamp(36px, 2.4vw, 60px); /* 47/2498=1.88vw, 60/2498=2.4vw */
  background: #fff;
}

/* 내부 레이아웃: filter + teams-grid를 flex로 배치 */
.kubf-teams-section .kubf-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 1.16vw, 29px); /* 29/2498=1.16vw */
}

/* Teams Filter - Figma: width=108, height=50 → 4.32vw, 2.0vw */
.kubf-teams-filter {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.32vw, 8px); /* 8/2498=0.32vw */
  width: clamp(80px, 4.7vw, 108px); /* 108/2498=4.32vw */
  height: clamp(32px, 2vw, 50px); /* 50/2498=2.0vw */
  padding: clamp(6px, 0.36vw, 9px) clamp(10px, 0.6vw, 15px); /* 9/2498=0.36vw, 15/2498=0.6vw */
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  font-size: clamp(10px, 0.56vw, 14px); /* 14/2498=0.56vw */
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  background: #fff;
  flex-shrink: 0;
}

.kubf-teams-filter svg {
  width: clamp(12px, 0.72vw, 18px); /* 18/2498=0.72vw */
  height: clamp(12px, 0.72vw, 18px);
  flex-shrink: 0;
}

/* Teams Grid - Figma: gap=22px → 0.88vw between items */
.kubf-teams-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 0.88vw, 22px); /* 22/2498=0.88vw */
  align-items: center;
  flex: 1;
}

/* Team Item - Figma: logo + name, height=48, gap=6px → 1.92vw, 0.24vw */
.kubf-team-item {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.24vw, 6px); /* 6/2498=0.24vw */
  cursor: pointer;
  transition: opacity 0.3s;
  height: clamp(32px, 1.92vw, 48px); /* 48/2498=1.92vw */
}

.kubf-team-item:hover {
  opacity: 0.7;
}

/* Team Item Logo - Figma: width=48, height=48 → 1.92vw */
.kubf-team-item-logo {
  width: clamp(32px, 1.92vw, 48px); /* 48/2498=1.92vw */
  height: clamp(32px, 1.92vw, 48px);
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Team Item Name - Figma: font-size=16, line-height=24 → 0.64vw, 0.96vw */
.kubf-team-item-name {
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  font-size: clamp(11px, 0.64vw, 16px); /* 16/2498=0.64vw */
  font-weight: 500;
  color: #1c2434;
  line-height: clamp(16px, 0.96vw, 24px); /* 24/2498=0.96vw */
  white-space: nowrap;
}

/* ========================================
   Main Content Area - 서브페이지용
   ======================================== */
.kubf-main {
  min-height: calc(100vh - 200px);
  background: #fff;
}

.kubf-content {
  padding: clamp(30px, 2.4vw, 60px) 0;
}

.kubf-content .kubf-container {
  max-width: 1400px;
}

.kubf-page-title {
  font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  font-size: clamp(20px, 1.28vw, 32px);
  font-weight: 700;
  color: #1c2434;
  margin-bottom: clamp(20px, 1.6vw, 40px);
  padding-bottom: clamp(15px, 1vw, 25px);
  border-bottom: 2px solid #092077;
}

/* ========================================
   Responsive Adjustments - 유연한 반응형
   ======================================== */

/* 대형 모니터 */
@media (min-width: 1600px) {
  .kubf-nav {
    gap: 70px;
  }

  .kubf-nav a {
    font-size: 18px;
  }

  .kubf-auth a {
    font-size: 14px;
  }

  .kubf-auth svg {
    width: 16px;
    height: 16px;
  }
}

/* 태블릿 가로 이하 */
@media (max-width: 1200px) {
  .kubf-container {
    padding: 0 clamp(15px, 3vw, 40px);
  }

  .kubf-nav {
    gap: 30px;
  }

  .kubf-nav a {
    font-size: 12px;
  }

  .kubf-scoreboard {
    padding: 20px 30px;
  }

  .kubf-scores {
    gap: 40px;
  }

  .kubf-board-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .kubf-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .kubf-teams-grid {
    gap: 15px;
  }
}

/* 태블릿 세로 */
@media (max-width: 992px) {
  .kubf-container {
    padding: 0 20px;
  }

  .kubf-nav {
    display: none;
  }

  .kubf-auth {
    display: none; /* 모바일에서 숨김 - 모바일 메뉴에서 표시 */
  }

  .kubf-menu-toggle {
    display: flex;
  }

  .kubf-scoreboard-section {
    padding: 25px 0;
  }

  .kubf-scoreboard {
    padding: 15px 20px;
  }

  .kubf-scoreboard-main {
    gap: 10px;
  }

  .kubf-team-logo {
    width: 45px;
    height: 45px;
  }

  .kubf-team-name {
    font-size: 14px;
  }

  .kubf-score {
    font-size: 32px;
  }

  .kubf-inning-table {
    font-size: 10px;
  }

  .kubf-inning-cell {
    padding: 3px 2px;
  }

  .kubf-league-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .kubf-league-tab {
    font-size: 14px;
    padding: 10px 15px;
    height: auto;
  }
}

/* 모바일 가로 */
@media (max-width: 768px) {
  .kubf-container {
    padding: 0 15px;
  }

  .kubf-scoreboard-section {
    padding: 15px 0;
  }

  .kubf-scoreboard {
    padding: 12px;
    border-radius: 8px;
  }

  .kubf-scoreboard-header {
    margin-bottom: 8px;
  }

  .kubf-scoreboard-league {
    font-size: 10px;
    white-space: normal;
    height: auto;
    line-height: 1.3;
  }

  /* 모바일 스코어보드: 가로 배치 유지 */
  .kubf-scoreboard-main {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
  }

  .kubf-team {
    flex: 1;
    min-width: 0;
    width: auto;
    margin: 0;
  }

  .kubf-team.home {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    margin-right: 0;
    width: auto;
  }

  .kubf-team.away {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    margin-left: 0;
    width: auto;
  }

  .kubf-team-logo {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
  }

  .kubf-team-name {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
    max-width: 80px;
    text-align: center !important;
    margin-top: 0; /* 모바일: 세로 배치이므로 margin-top 리셋 */
  }

  .kubf-score-center {
    flex: none;
    width: auto;
    min-width: 100px;
    margin-top: 0; /* 모바일: 중앙 정렬이므로 margin-top 리셋 */
  }

  .kubf-scores-row {
    gap: 15px;
  }

  .kubf-live-badge {
    font-size: 8px;
    padding: 2px 6px;
  }

  .kubf-scores {
    gap: 15px;
  }

  .kubf-score {
    font-size: 28px;
  }

  .kubf-match-info {
    flex-direction: row;
    gap: 6px;
    margin-top: 2px;
  }

  .kubf-match-datetime,
  .kubf-match-location {
    font-size: 9px;
  }

  /* 모바일 이닝 테이블: 화면에 맞게 */
  .kubf-inning-table {
    display: grid;
    grid-template-columns: minmax(48px, 58px) repeat(13, minmax(17px, 1fr));
    width: 100%;
    font-size: 10px;
    margin: 0;
    padding: 0;
  }

  .kubf-inning-cell {
    height: 22px;
    font-size: 9px;
    padding: 2px 1px;
  }

  .kubf-inning-cell.team-name {
    font-size: 9px;
    padding-left: 4px;
  }

  .kubf-league-tabs {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 15px;
  }

  .kubf-league-tab {
    font-size: 13px;
    padding: 10px 12px;
    height: auto;
    white-space: normal;
    line-height: 1.3;
  }

  .kubf-board-section {
    padding: 25px 0;
  }

  .kubf-section-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 15px;
  }

  .kubf-board-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .kubf-gallery-section {
    padding: 25px 0;
  }

  .kubf-gallery-section .kubf-container {
    padding: 12px;
  }

  .kubf-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Teams Section - 가로 스크롤 방식 */
  .kubf-teams-section {
    padding: 25px 0;
  }

  .kubf-teams-section .kubf-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .kubf-teams-filter {
    width: auto;
    min-width: 100px;
  }

  .kubf-teams-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    width: 100%;
    padding-bottom: 10px;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .kubf-teams-grid::-webkit-scrollbar {
    height: 4px;
  }

  .kubf-teams-grid::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 2px;
  }

  .kubf-teams-grid::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
  }

  .kubf-team-item {
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: auto;
    height: auto;
    gap: 6px;
  }

  .kubf-team-item-logo {
    width: 52px;
    height: 52px;
  }

  .kubf-team-item-name {
    font-size: 11px;
    text-align: center;
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 모바일 세로 */
@media (max-width: 480px) {
  .kubf-container {
    padding: 0 10px;
  }

  .kubf-menu-toggle svg {
    width: 22px;
    height: 22px;
  }

  .kubf-hero-img {
    min-height: 160px;
  }

  .kubf-scoreboard-section {
    padding: 12px 0;
  }

  .kubf-scoreboard {
    padding: 10px;
    border-radius: 6px;
  }

  .kubf-scoreboard-header {
    margin-bottom: 6px;
  }

  .kubf-scoreboard-league {
    font-size: 10px;
  }

  .kubf-team-logo {
    width: 36px;
    height: 36px;
    margin-bottom: 2px;
  }

  .kubf-team-name {
    font-size: 10px;
    max-width: 60px;
  }

  .kubf-score-center {
    min-width: 70px;
  }

  .kubf-scores-row {
    gap: 8px;
  }

  .kubf-score {
    font-size: 26px;
  }

  .kubf-scores {
    gap: 10px;
  }

  .kubf-live-badge {
    font-size: 9px;
    padding: 2px 6px;
  }

  .kubf-match-datetime,
  .kubf-match-location {
    font-size: 9px;
  }

  .kubf-inning-table {
    grid-template-columns: minmax(38px, 48px) repeat(13, minmax(15px, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .kubf-inning-cell {
    height: 20px;
    font-size: 8px;
    padding: 1px;
  }

  .kubf-inning-cell.team-name {
    font-size: 8px;
    padding-left: 3px;
  }

  .kubf-league-tabs {
    gap: 5px;
    padding-bottom: 12px;
  }

  .kubf-league-tab {
    font-size: 12px;
    padding: 10px 12px;
  }

  .kubf-board-section,
  .kubf-teams-section {
    padding: 15px 0;
  }

  .kubf-gallery-section {
    padding: 15px 0;
  }

  .kubf-section-header {
    margin-bottom: 10px;
  }

  .kubf-section-header h2 {
    font-size: 14px;
  }

  .kubf-board-card {
    padding: 10px;
  }

  .kubf-board-card-title {
    font-size: 12px;
  }

  .kubf-board-card-meta {
    font-size: 9px;
  }

  .kubf-gallery-section .kubf-container {
    padding: 10px;
  }

  .kubf-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  /* Teams - 더 작은 사이즈 */
  .kubf-teams-grid {
    gap: 12px;
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .kubf-team-item-logo {
    width: 44px;
    height: 44px;
  }

  .kubf-team-item-name {
    font-size: 10px;
    max-width: 60px;
  }

  .kubf-teams-filter {
    font-size: 11px;
    height: 36px;
    min-width: 90px;
  }
}

/* ========================================
   Footer - 테마 layout.css .w_inner 스타일 재적용
   layout.css 90-99줄과 동일한 반응형 마진 스타일
   큰 화면: 중앙 정렬 (margin: 0 auto)
   작은 화면: 좌우 여백 (margin: 0 1.6rem = 16px)
   ======================================== */
#footer .w_inner,
#footer .ft_wrap {
  max-width: 1540px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1572px) {
  #footer .w_inner,
  #footer .ft_wrap {
    margin-left: 1.6rem;
    margin-right: 1.6rem;
  }
}