@charset "UTF-8";
/* ==========================================================================
   ATHENA — 디자인 시스템
   pom-79824.com · 2026-09-11 신설
   --------------------------------------------------------------------------
   컨셉: 베수비오 화산 + 그리스 제국.
        청금석 바탕에 황금이 흐르고, 황금 기둥과 월계관이 격을 잡는다.

   구조
     이 파일은 구매 템플릿(demo2/style.css, 453K)을 **덮는 층**이다.
     ⛔ 템플릿 원본을 고치지 말 것 — 되돌릴 수 없게 되고 업데이트도 막힌다.
     순서: style.css → custom.css → athena.css (마지막이 이긴다)

   규칙
     · 색은 반드시 토큰(--ath-*)으로 쓴다. 화면에 색을 직접 적지 말 것.
     · 부트스트랩 변수(--bs-*)를 함께 덮어 기존 컴포넌트가 자동으로 따라오게 한다.
     · 새 컴포넌트는 .ath- 접두를 쓴다.
   ========================================================================== */

/* ==========================================================================
   1. 토큰
   ========================================================================== */
:root {
  /* --- 바탕: 심야의 청금석과 신전의 석재 --- */
  --ath-night:   #0D0D0E;   /* 가장 깊은 바탕 */
  --ath-stone-900:    #131113;   /* 면 */
  --ath-stone-800:    #1a1a1c;   /* 떠 있는 면(카드) */
  --ath-stone-700:    #1E1E21;   /* 더 떠 있는 면 */
  --ath-stone-600:    #2D2D30;   /* 테두리 */
  --ath-stone-500:    #3A3A3E;   /* 흐린 테두리 */

  /* --- 황금: 주조색 --- */
  --ath-primary:       #04F695;
  --ath-primary-hot:   #4DFFB8;
  --ath-primary-deep:  #00B872;
  --ath-torch:      #F5A524;   /* 횃불 */

  /* --- 그리스: 황금과 대리석 --- */
  --ath-gold:       #04F695;
  --ath-gold-hot:   #7DFFCB;
  --ath-gold-dim:   #00B872;
  --ath-marble:     #C1C1C3;
  --ath-blood:      #FF4D4F;   /* 아테나의 진홍 */

  /* --- 글자 --- */
  --ath-text:       #FFFFFF;
  --ath-text-dim:   #C1C1C3;
  --ath-text-mute:  #868688;

  /* --- 의미색 --- */
  --ath-win:        #04F695;
  --ath-lose:       #FF4D4F;
  --ath-warn:   #F5A524;   /* 주의 — ⛔ 민트로 바꾸지 말 것. 정상과 구분이 사라진다 */
    --ath-hold:       #F5A524;

  /* --- 형태 --- */
  --ath-r-sm: 6px;
  --ath-r:    10px;
  --ath-r-lg: 16px;
  --ath-r-xl: 24px;

  /* --- 그림자와 빛 --- */
  --ath-shadow:      0 8px 28px rgba(0, 0, 0, .55);
  --ath-shadow-sm:   0 2px 10px rgba(0, 0, 0, .45);
  --ath-glow-gold:   0 0 20px rgba(4,246,149, .30);

  /* --- 그러데이션 --- */
  --ath-grad-gold:  linear-gradient(135deg, #7DFFCB 0%, #04F695 50%, #00B872 100%);
  --ath-grad-ash:   linear-gradient(180deg, #1a1a1c 0%, #131113 100%);
  /* 석재 하늘 — 히어로 바탕 */
  --ath-grad-sky:   radial-gradient(120% 90% at 50% 115%, #04F695 0%, #00B872 28%, #211B21 55%, #0D0D0E 82%);

  /* --- 글꼴 ---
     🔴 본문·제목은 토판사(sclsolution7.com)와 **똑같이** Roboto 다.
        한글은 웹폰트를 얹지 않고 시스템 글꼴로 떨어뜨린다 — 토판사와 같은 모양이 되게.
        ⛔ Noto Sans KR / Noto Serif KR 을 다시 넣지 말 것. 2026-09-11 사장님 지적:
           "폰트가 너무 이상하다, sclsolution7.com 이랑 같은 걸 써라".
        ⭐ 그리스 비문 글꼴(Cinzel)은 **라틴 로고 글자에만** 쓴다(--ath-font-brand).
           한글에 걸면 세리프로 떨어져 어색해진다. */
  --ath-font-body:    "Roboto", Helvetica, sans-serif;
  --ath-font-display: "Roboto", Helvetica, sans-serif;
  --ath-font-num:     "Roboto", Helvetica, sans-serif;
  --ath-font-brand:   "Cinzel", Georgia, serif;

  /* --- 간격 --- */
  --ath-gap:    16px;
  --ath-gap-sm: 8px;
  --ath-gap-lg: 28px;
}

/* --------------------------------------------------------------------------
   부트스트랩 변수 덮어쓰기 — 기존 컴포넌트가 자동으로 아테나 색을 입는다.
   ⚠ 이걸 지우면 화면마다 색을 일일이 지정해야 한다.
   -------------------------------------------------------------------------- */
:root {
  --bs-primary:       #04F695;
  --bs-primary-rgb: 4, 246, 149;
  --bs-secondary:     #C1C1C3;
  --bs-secondary-rgb: 193, 193, 195;
  --bs-success:       #04F695;
  --bs-success-rgb: 4, 246, 149;
  --bs-warning:       #F5A524;
  --bs-warning-rgb: 245, 165, 36;
  --bs-danger:        #FF4D4F;
  --bs-danger-rgb: 255, 77, 79;
  --bs-info:          #04F695;
  --bs-info-rgb: 4, 246, 149;
  --bs-dark:          #0D0D0E;
  --bs-dark-rgb: 13, 13, 14;
  --bs-light:         #C1C1C3;
  --bs-body-color:    #FFFFFF;
  --bs-body-bg:       #0D0D0E;
  --bs-border-color:  #2D2D30;
  --bs-link-color:    #4DFFB8;
  --bs-link-hover-color: #4DFFB8;
}

/* ==========================================================================
   2. 바탕과 글자
   ========================================================================== */
html,
body {
  background: var(--ath-night) !important;
  color: var(--ath-text);
  font-family: var(--ath-font-body);
  -webkit-font-smoothing: antialiased;
}

/* 재가 내려앉은 듯한 아주 옅은 질감. 과하면 글자가 안 읽히니 미세하게만. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(4,246,149, .07) 0%, transparent 60%),
    radial-gradient(50% 35% at 85% 8%, rgba(4,246,149, .05) 0%, transparent 60%);
}

h1, h2, h3, h4, h5, h6,
.ath-display {
  font-family: var(--ath-font-display);
  letter-spacing: .02em;
  color: var(--ath-marble);
  font-weight: 700;
}

/* 숫자는 흔들리면 안 된다 — 배당·금액이 표에서 어긋나 보인다. */
.ath-num,
.ath-odds__val,
.ath-money {
  font-family: var(--ath-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--ath-torch); text-decoration: none; }
a:hover { color: var(--ath-primary-hot); }

::selection { background: rgba(4,246,149, .35); color: #fff; }

/* 스크롤바도 테마에 맞춘다 (검은 바탕에 흰 스크롤바는 튄다) */
* { scrollbar-color: var(--ath-stone-600) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ath-stone-600);
  border-radius: 999px;
  border: 2px solid var(--ath-night);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ath-gold-dim); }

/* ==========================================================================
   3. 브랜드
   ========================================================================== */
.ath-brand {
  font-family: var(--ath-font-brand);   /* 라틴 로고 전용 */
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--ath-grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: center;
  gap: .45em;
}

/* 브랜드 옆 분화구 표식 */
.ath-brand__mark {
  /* 🔴 사장님 문장. 예전에는 CSS 로 그린 주황 삼각형이었다.
     ⚠ 문장은 세로로 길다(가로:세로 0.63). 정사각형으로 두면 찌그러진다 —
        높이를 기준으로 잡고 너비는 비율대로 준다.
     ⛔ box-shadow 로 되돌리지 말 것 — 투명 PNG 에서는 보이지 않는 네모 둘레에 빛이 돈다. */
  width: 1.20em;
  height: 1.90em;
  flex: 0 0 auto;
  background: url('../images/athena/logo-mark.png') center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(4,246,149, .30));
}

/* ==========================================================================
   4. 레이아웃 — 사이드바 / 헤더 / 본문 / 베팅슬립
   ========================================================================== */
.main-wrapper,
.page-wrapper,
.page-content { background: transparent !important; }

/* --- 사이드바 --- */
.sidebar {
  background: var(--ath-grad-ash) !important;
  border-right: 1px solid var(--ath-stone-600);
}
.sidebar .sidebar-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ath-stone-600);
}
.sidebar .sidebar-body { background: transparent !important; }

.sidebar .nav-link,
.sidebar .sports-list a {
  color: var(--ath-text-dim) !important;
  border-radius: var(--ath-r-sm);
  transition: background .15s ease, color .15s ease;
}
.sidebar .nav-link:hover,
.sidebar .sports-list a:hover {
  color: var(--ath-marble) !important;
  background: rgba(4,246,149, .10);
}
.sidebar .nav-item.active > .nav-link,
.sidebar .nav-link.active {
  color: #fff !important;
  background: rgba(4,246,149, .16);
  box-shadow: inset 3px 0 0 var(--ath-primary);
}
.sidebar .nav-link .link-icon,
.sidebar .nav-link i { color: var(--ath-gold); }

/* --- 헤더 --- */
.navbar,
.horizontal-menu .navbar {
  background: rgba(13,13,14, .92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ath-stone-600);
  box-shadow: 0 1px 0 rgba(4,246,149, .12);
}
.navbar .navbar-content .nav-link { color: var(--ath-text-dim) !important; }
.navbar .navbar-content .nav-link:hover { color: var(--ath-marble) !important; }

/* --- 본문 --- */
.sports_list { position: relative; z-index: 1; }

/* --- 오른쪽 베팅슬립 --- */
#rightCart {
  background: var(--ath-grad-ash) !important;
  border-left: 1px solid var(--ath-stone-600);
}

/* ==========================================================================
   5. 공통 컴포넌트
   ========================================================================== */

/* --- 면(카드) --- */
.card,
.ath-card {
  background: var(--ath-stone-800);
  border: 1px solid var(--ath-stone-600);
  border-radius: var(--ath-r);
  color: var(--ath-text);
  box-shadow: var(--ath-shadow-sm);
}
.card-header,
.ath-card__head {
  background: transparent;
  border-bottom: 1px solid var(--ath-stone-600);
  color: var(--ath-marble);
  font-family: var(--ath-font-display);
  letter-spacing: .04em;
}

/* 금테를 두른 면 — 중요한 곳에만 아껴 쓴다 */
.ath-card--gilt {
  border-color: transparent;
  background:
    linear-gradient(var(--ath-stone-800), var(--ath-stone-800)) padding-box,
    var(--ath-grad-gold) border-box;
  border: 1px solid transparent;
}

/* --- 버튼 --- */
.ath-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--ath-r-sm);
  font-family: var(--ath-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}
.ath-btn:active { transform: translateY(1px); }
.ath-btn:disabled,
.ath-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.ath-btn--primary,
.btn-primary {
  background: var(--ath-grad-gold) !important;
  border-color: var(--ath-primary-deep) !important;
  /* 🔴 민트는 밝은 색이다. 흰 글자를 얹으면 대비 1.46:1 로 안 읽힌다(실측).
     어두운 글자면 13:1 이 넘는다. ⛔ #fff 로 되돌리지 말 것. */
  color: var(--ath-night) !important;
}
.ath-btn--primary:hover,
.btn-primary:hover { box-shadow: var(--ath-glow-gold); color: var(--ath-night) !important; }

.ath-btn--gold {
  background: var(--ath-grad-gold);
  border-color: var(--ath-gold-dim);
  color: #151516;
}
.ath-btn--gold:hover { box-shadow: var(--ath-glow-gold); color: #151516; }

.ath-btn--ghost,
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--ath-stone-500) !important;
  color: var(--ath-text) !important;
}
.ath-btn--ghost:hover,
.btn-outline-primary:hover {
  border-color: var(--ath-gold) !important;
  color: var(--ath-gold-hot) !important;
  background: rgba(4,246,149, .08) !important;
}

.ath-btn--blood,
.btn-danger {
  background: var(--ath-blood) !important;
  border-color: #B3282A !important;
  color: #fff !important;
}

.btn-secondary {
  background: var(--ath-stone-700) !important;
  border-color: var(--ath-stone-500) !important;
  color: var(--ath-text) !important;
}
.btn-warning { background: var(--ath-warn) !important; border-color: #C9871C !important; color: var(--ath-night) !important; }
.btn-success { background: var(--ath-win) !important; border-color: #00B872 !important; color: var(--ath-night) !important; }

.ath-btn--block { width: 100%; }
.ath-btn--lg { padding: 15px 30px; font-size: 16px; }
.ath-btn--sm { padding: 7px 14px; font-size: 12.5px; }

/* --- 입력 --- */
.form-control,
.form-select,
.ath-input {
  background: var(--ath-stone-900) !important;
  border: 1px solid var(--ath-stone-600) !important;
  color: var(--ath-text) !important;
  border-radius: var(--ath-r-sm) !important;
}
.form-control:focus,
.form-select:focus,
.ath-input:focus {
  border-color: var(--ath-primary) !important;
  box-shadow: 0 0 0 3px rgba(4,246,149, .18) !important;
  background: var(--ath-stone-900) !important;
  color: var(--ath-text) !important;
}
.form-control::placeholder { color: var(--ath-text-mute) !important; }
.form-label,
label { color: var(--ath-text-dim); }
.input-group-text {
  background: var(--ath-stone-700) !important;
  border-color: var(--ath-stone-600) !important;
  color: var(--ath-text-dim) !important;
}
.form-check-input { background-color: var(--ath-stone-700); border-color: var(--ath-stone-500); }
.form-check-input:checked { background-color: var(--ath-primary); border-color: var(--ath-primary); }

/* --- 표 --- */
.table,
.ath-table {
  color: var(--ath-text);
  border-color: var(--ath-stone-600);
  --bs-table-bg: transparent;
  --bs-table-color: var(--ath-text);
  --bs-table-border-color: var(--ath-stone-600);
  --bs-table-striped-bg: rgba(255, 255, 255, .02);
  --bs-table-striped-color: var(--ath-text);
  --bs-table-hover-bg: rgba(4,246,149, .07);
  --bs-table-hover-color: var(--ath-marble);
}
.table > thead th,
.ath-table > thead th {
  background: var(--ath-stone-700);
  color: var(--ath-gold);
  font-family: var(--ath-font-display);
  font-weight: 700;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--ath-gold-dim);
  white-space: nowrap;
}
.table > tbody td { border-color: var(--ath-stone-600); vertical-align: middle; }

/* 표는 좁은 화면에서 가로로만 흐르게 한다. 본문 전체가 밀리면 안 된다. */
.ath-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- 배지 --- */
.ath-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  border: 1px solid transparent;
}
.ath-badge--win  { background: rgba(4,246,149, .14);  color: var(--ath-win);  border-color: rgba(4,246,149, .35); }
.ath-badge--lose { background: rgba(255,77,79, .14);  color: #FF8F90;         border-color: rgba(255,77,79, .38); }
.ath-badge--hold { background: rgba(77,255,184, .14); color: var(--ath-torch); border-color: rgba(77,255,184, .35); }
.ath-badge--live {
  background: var(--ath-blood);
  color: #fff;
  animation: pom-pulse 1.6s ease-in-out infinite;
}
@keyframes pom-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,79, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(255,77,79, 0); }
}

/* --- 탭 --- */
.nav-tabs {
  border-bottom: 1px solid var(--ath-stone-600);
  gap: 4px;
}
.nav-tabs .nav-link {
  color: var(--ath-text-dim);
  border: 1px solid transparent;
  border-radius: var(--ath-r-sm) var(--ath-r-sm) 0 0;
  font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--ath-marble); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--ath-gold-hot);
  background: var(--ath-stone-800);
  border-color: var(--ath-stone-600) var(--ath-stone-600) transparent;
  box-shadow: inset 0 2px 0 var(--ath-primary);
}

/* --- 모달 --- */
.modal-content {
  background: var(--ath-stone-800);
  border: 1px solid var(--ath-stone-600);
  border-radius: var(--ath-r-lg);
  color: var(--ath-text);
}
.modal-header,
.modal-footer { border-color: var(--ath-stone-600); }
.modal-title { font-family: var(--ath-font-display); color: var(--ath-marble); }

/* --- 페이지네이션 --- */
.pagination .page-link {
  background: var(--ath-stone-800);
  border-color: var(--ath-stone-600);
  color: var(--ath-text-dim);
}
.pagination .page-link:hover { background: var(--ath-stone-700); color: var(--ath-marble); }
.pagination .page-item.active .page-link {
  background: var(--ath-grad-gold);
  border-color: var(--ath-primary-deep);
  color: #fff;
}

/* --- 드롭다운 --- */
.dropdown-menu {
  background: var(--ath-stone-800);
  border: 1px solid var(--ath-stone-600);
  box-shadow: var(--ath-shadow);
}
.dropdown-item { color: var(--ath-text); }
.dropdown-item:hover { background: rgba(4,246,149, .12); color: var(--ath-marble); }
.dropdown-divider { border-color: var(--ath-stone-600); }

/* ==========================================================================
   6. 아테나 전용 컴포넌트
   ========================================================================== */

/* --- 섹션 제목: 양옆으로 금선이 뻗는다 --- */
.ath-section {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--ath-gap-lg) 0 var(--ath-gap);
}
.ath-section__title {
  font-family: var(--ath-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ath-marble);
  margin: 0;
  white-space: nowrap;
}
.ath-section__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--ath-gold-dim), transparent);
}

/* --- 히어로: 분화하는 베수비오 --- */
.ath-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ath-r-lg);
  background: var(--ath-grad-sky);
  border: 1px solid var(--ath-stone-600);
  padding: clamp(28px, 5vw, 56px);
  isolation: isolate;
}
/* 흘러내리는 황금 줄기 */
.ath-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -40% 0;
  height: 70%;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 30% 100%, rgba(4,246,149, .55), transparent 70%),
    radial-gradient(40% 55% at 72% 100%, rgba(77,255,184, .35), transparent 70%);
  filter: blur(14px);
}
.ath-hero__eyebrow {
  font-family: var(--ath-font-display);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ath-gold);
  margin-bottom: 12px;
}
.ath-hero__title {
  font-family: var(--ath-font-display);
  font-size: clamp(30px, 6vw, 60px);
  line-height: 1.08;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 4px 30px rgba(4,246,149, .5);
}
.ath-hero__lead {
  color: rgba(255,255,255, .84);
  font-size: clamp(14px, 1.6vw, 17px);
  max-width: 46ch;
  margin: 0 0 26px;
  line-height: 1.65;
}
.ath-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- 게임 타일 --- */
.ath-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--ath-gap);
}
.ath-tile {
  position: relative;
  display: block;
  border-radius: var(--ath-r);
  overflow: hidden;
  background: var(--ath-stone-800);
  border: 1px solid var(--ath-stone-600);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  text-decoration: none;
}
.ath-tile:hover {
  transform: translateY(-3px);
  border-color: var(--ath-gold);
  box-shadow: var(--ath-glow-gold);
}
.ath-tile__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
  background: var(--ath-stone-700);
}
.ath-tile__body { padding: 12px 14px; }
.ath-tile__name {
  font-family: var(--ath-font-display);
  font-size: 14.5px;
  color: var(--ath-marble);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ath-tile__meta { font-size: 12px; color: var(--ath-text-mute); margin-top: 3px; }

/* --- 배당 버튼: 이 사이트에서 가장 많이 눌리는 것 --- */
.ath-odds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: var(--ath-stone-700);
  border: 1px solid var(--ath-stone-600);
  border-radius: var(--ath-r-sm);
  color: var(--ath-text);
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease, transform .1s ease;
}
.ath-odds:hover {
  background: rgba(4,246,149, .12);
  border-color: var(--ath-primary);
}
.ath-odds.is-selected {
  background: var(--ath-grad-gold);
  border-color: var(--ath-primary-deep);
  color: #fff;
  box-shadow: var(--ath-glow-gold);
}
.ath-odds.is-locked {
  opacity: .42;
  cursor: not-allowed;
  background: var(--ath-stone-800);
}
.ath-odds__name {
  font-size: 13px;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ath-odds__val {
  font-weight: 700;
  font-size: 14px;
  color: var(--ath-torch);
  flex: 0 0 auto;
}
.ath-odds.is-selected .ath-odds__val { color: #fff; }

/* 배당이 오르내린 직후 깜빡임 */
.ath-odds--up   { animation: pom-flash-up 1s ease; }
.ath-odds--down { animation: pom-flash-down 1s ease; }
@keyframes pom-flash-up   { 0% { background: rgba(4,246,149, .35); } 100% { background: var(--ath-stone-700); } }
@keyframes pom-flash-down { 0% { background: rgba(255,77,79, .35); } 100% { background: var(--ath-stone-700); } }

/* --- 경기 카드 --- */
.ath-match {
  background: var(--ath-stone-800);
  border: 1px solid var(--ath-stone-600);
  border-radius: var(--ath-r);
  overflow: hidden;
  margin-bottom: 10px;
}
.ath-match__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--ath-stone-900);
  border-bottom: 1px solid var(--ath-stone-600);
  font-size: 12.5px;
  color: var(--ath-text-dim);
}
.ath-match__league { color: var(--ath-gold); font-weight: 600; }
.ath-match__time { margin-left: auto; font-family: var(--ath-font-num); }
.ath-match__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.ath-match__team { font-size: 14px; color: var(--ath-text); }
.ath-match__vs {
  font-family: var(--ath-font-display);
  color: var(--ath-gold-dim);
  font-size: 12px;
  letter-spacing: .1em;
}

/* --- 베팅슬립 --- */
.ath-slip__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ath-stone-600);
  font-family: var(--ath-font-display);
  letter-spacing: .08em;
  color: var(--ath-gold);
}
.ath-slip__item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ath-stone-600);
}
.ath-slip__empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--ath-text-mute);
  font-size: 13px;
}
.ath-slip__total {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--ath-text-dim);
}
.ath-slip__total strong { color: var(--ath-torch); font-family: var(--ath-font-num); }

/* --- 금액 표기 --- */
.ath-money { font-weight: 700; }
.ath-money--plus  { color: var(--ath-win); }
.ath-money--minus { color: #FF8F90; }

/* --- 빈 상태 --- */
.ath-empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--ath-text-mute);
}
.ath-empty__icon { font-size: 44px; color: var(--ath-stone-500); margin-bottom: 12px; }

/* --- 구분 장식: 월계관 대신 금선 두 줄 --- */
.ath-divider {
  height: 0;
  border: 0;
  border-top: 1px solid var(--ath-stone-600);
  box-shadow: 0 1px 0 rgba(4,246,149, .14);
  margin: var(--ath-gap-lg) 0;
}

/* ==========================================================================
   7. 반응형 — 400px 에서도 가로 스크롤이 생기면 안 된다
   ========================================================================== */
@media (max-width: 991.98px) {
  #rightCart { display: none !important; }
}

@media (max-width: 575.98px) {
  :root { --ath-gap: 12px; --ath-gap-lg: 20px; }

  .ath-tiles { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .ath-hero { padding: 22px 18px; border-radius: var(--ath-r); }
  .ath-match__body { grid-template-columns: 1fr; text-align: center; }
  .ath-section__title { font-size: 15.5px; }
  .ath-btn { padding: 10px 16px; }
}

/* 표·코드·도표만 가로로 흐른다. 본문은 절대 안 된다. */
.table-responsive,
.ath-scroll-x { max-width: 100%; }

/* ==========================================================================
   8. 접근성
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--ath-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   9. 템플릿 잔재 정리 — 2026-09-11
   구매 템플릿이 남긴 규칙 중 아테나와 어긋나는 것만 좁게 덮는다.
   ========================================================================== */

/* 사이드바 브랜드 */
.sidebar .sidebar-brand {
  display: inline-flex !important;
  align-items: center;
  gap: .5em;
  font-family: var(--ath-font-body);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ath-marble) !important;
}
.sidebar .sidebar-brand .ath-brand__mark {
  /* 🔴 2026-09-18 표식을 실제로 넣었다 — 그 전에는 이 자리만 있고 쓰는 화면이 0 이었다.
     표식은 정사각형(마름모 링 + Α)이다. 폼페이 문장처럼 세로로 길지 않으니 가로·세로를 같게 둔다.
     ⛔ box-shadow 로 빛을 주지 말 것 — 투명 PNG 둘레에 네모 빛이 돈다. drop-shadow 를 쓴다.
     그림 생성기: /root/quarantine-20260918/athena-logo/mklogo.py */
  width: 1.45em;
  height: 1.45em;
  flex: 0 0 auto;
  background: url('../images/athena/logo-mark.png') center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(4, 246, 149, .35));
}

/* 상단 2차 메뉴 띠 */
.nav_second {
  background: var(--ath-stone-900) !important;
  border-bottom: 1px solid var(--ath-stone-600);
}
.nav_second ul { margin: 0; padding: 10px 0; list-style: none; }
.nav_second a {
  color: var(--ath-text-dim) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--ath-r-sm);
  transition: color .15s ease, background .15s ease;
}
.nav_second a:hover {
  color: var(--ath-gold-hot) !important;
  background: rgba(4,246,149, .08);
}

/* 헤더의 bg-dark 는 템플릿 잔재다 — 아테나 바탕으로 덮는다 */
.navbar .navbar-content.bg-dark { background: transparent !important; }
.navbar .navbar-content .text-white { color: var(--ath-text) !important; }
.navbar .navbar-content .text-white:hover { color: var(--ath-gold-hot) !important; }

/* 오른쪽 베팅슬립이 잘리지 않게 */
#rightCart { min-width: 0; }

/* 즐겨찾기·종목 목록 */
.sidebar .sports-list a,
.sidebar .nav-link {
  border-bottom: 1px solid var(--ath-stone-600);
}

/* --------------------------------------------------------------------------
   외부 라이브러리(CDN) 색 덮기
   Swiper 는 jsdelivr 에서 오므로 우리 색 이관 대상이 아니다. 여기서 덮는다.
   -------------------------------------------------------------------------- */
.swiper-pagination-bullet {
  background: var(--ath-text-mute) !important;
  opacity: .5;
}
.swiper-pagination-bullet-active {
  background: var(--ath-primary) !important;
  opacity: 1;
  box-shadow: 0 0 10px rgba(4,246,149, .7);
}


/* ==========================================================================
   ATHENA-BOOTSTRAP-OVERRIDE
   🔴 구매 템플릿(NobleUI)은 색을 **클래스 안에 직접 박아** 놨다.
      그래서 :root 의 --bs-* 만 덮어서는 안 바뀐다.
      실측: --bs-warning 을 바꿔도 .btn-outline-warning 은 원본 노랑(#fbbc06) 그대로였다.
   ⛔ 이 블록을 지우지 말 것. ⛔ demo2/style.css 를 직접 고치지 말 것 — 여기서만 덮는다.
   ========================================================================== */
.btn-outline-primary { color: var(--ath-primary) !important; border-color: var(--ath-primary) !important; }
.btn-outline-primary:hover,
.btn-outline-primary:focus { background: var(--ath-primary) !important; color: var(--ath-night) !important; }

.btn-outline-warning { color: var(--ath-warn) !important; border-color: var(--ath-warn) !important; }
.btn-outline-warning:hover { background: var(--ath-warn) !important; color: var(--ath-night) !important; }

.btn-outline-secondary { color: var(--ath-text-dim) !important; border-color: var(--ath-stone-500) !important; }
.btn-outline-secondary:hover { background: var(--ath-stone-700) !important; color: var(--ath-text) !important; border-color: var(--ath-stone-500) !important; }

.text-primary  { color: var(--ath-primary) !important; }
.text-success  { color: var(--ath-win) !important; }
.text-warning  { color: var(--ath-warn) !important; }
.text-danger   { color: var(--ath-lose) !important; }
.text-info     { color: var(--ath-primary-hot) !important; }

.bg-primary,  .badge.bg-primary  { background-color: var(--ath-primary) !important; color: var(--ath-night) !important; }
.bg-success,  .badge.bg-success  { background-color: var(--ath-win) !important; color: var(--ath-night) !important; }
.bg-warning,  .badge.bg-warning  { background-color: var(--ath-warn) !important; color: var(--ath-night) !important; }
.bg-danger,   .badge.bg-danger   { background-color: var(--ath-lose) !important; color: #fff !important; }
.bg-info,     .badge.bg-info     { background-color: var(--ath-primary-hot) !important; color: var(--ath-night) !important; }


/* ==========================================================================
   ATHENA-SIDEBAR-MINT
   🔴 구매 템플릿(demo2/style.css)이 사이드바 버튼을 **남색**으로 칠해 놨다.
      그 값들은 클래스 안과 :root 변수에 박혀 있어 --bs-primary 만 바꿔서는 안 바뀐다.
      실측(브라우저 계산값): .grid-btn #0C1427 / .sub-grid-btn #111B2D / 테두리 #172340
   ⛔ demo2/style.css 를 직접 고치지 말 것 — 여기서만 덮는다.
   ⛔ 이 블록을 지우지 말 것. 지우면 버튼이 남색으로 돌아간다.
   ========================================================================== */

/* 템플릿의 회색 계열이 전부 남색조다. 차콜로 바꾼다. */
:root {
  --bs-gray:        #868688;
  --bs-gray-600:    #868688;
  --bs-gray-700:    #2D2D30;
  --bs-gray-800:    #1E1E21;
  --bs-gray-900:    #131113;
  --bs-gray-dark:   #1a1a1c;
  --bs-secondary:   #868688;
}

/* ── 입금 / 출금 — 회원이 가장 많이 누르는 두 버튼이라 민트를 확실히 준다 ── */
.sidebar .grid-btn,
.sidebar .nav-link.grid-btn {
  background: linear-gradient(180deg, rgba(4,246,149,.15) 0%, rgba(4,246,149,.06) 100%) !important;
  border: 1px solid rgba(4,246,149,.36) !important;
  color: var(--ath-text) !important;
  border-radius: 6px;
  transition: background .18s ease, border-color .18s ease;
}
.sidebar .grid-btn:hover,
.sidebar .nav-link.grid-btn:hover {
  background: rgba(4,246,149,.24) !important;
  border-color: var(--ath-primary) !important;
  color: #fff !important;
}
/* 아이콘만 민트로 — 글자까지 민트면 어두운 배경에서 눈이 아프다 */
.sidebar .grid-btn .link-icon { color: var(--ath-primary) !important; }

/* ── 메뉴 격자 — 수가 많아 은은하게. 누를 때만 민트가 올라온다 ── */
.sidebar .sub-grid-btn,
.sidebar .nav-link.sub-grid-btn {
  background: var(--ath-stone-700) !important;
  border: 1px solid rgba(4,246,149,.13) !important;
  color: var(--ath-text-dim) !important;
  border-radius: 5px;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.sidebar .sub-grid-btn:hover,
.sidebar .nav-link.sub-grid-btn:hover {
  background: rgba(4,246,149,.10) !important;
  border-color: rgba(4,246,149,.48) !important;
  color: var(--ath-primary) !important;
}

/* ── 남색이 남아 있던 카드·표 ── */
.quick-card,
.widget-card,
.bg-card-dark {
  background-color: var(--ath-stone-800) !important;
  border-color: var(--ath-stone-600) !important;
}
.bg-gray-800 { background-color: var(--ath-stone-700) !important; }
[class*="team_ma"] {
  background-color: var(--ath-stone-700) !important;
  border-color: var(--ath-stone-600) !important;
}


/* --- ATHENA-LAST-NAVY -----------------------------------------------------
   구매 템플릿이 남긴 마지막 남색 2종. 화면에서 계산값을 재서 찾았다.
   ⛔ 지우지 말 것 — 지우면 푸르스름한 회색이 돌아온다. */
.text-muted { color: var(--ath-text-mute) !important; }

/* 2차 메뉴 띠 — 아랫 테두리는 이미 덮었는데 **윗** 테두리가 남아 있었다 */
.nav_second,
ul.gap-4.d-flex.align-items-center.justify-content-center {
  border-color: var(--ath-stone-600) !important;   /* 네 방향 전부 — 한쪽만 지정하면 나머지가 템플릿 값을 쓴다 */
}

/* --- ATHENA-HEADER-BORDER ---
   .sidebar-header 의 오른쪽 테두리가 템플릿 남색(#172340)이었다.
   ⛔ 한 방향만 지정하지 말 것 — 나머지가 조용히 템플릿 값을 쓴다. */
.sidebar .sidebar-header,
.sidebar-header { border-color: var(--ath-stone-600) !important; }

/* --- ATHENA-SIDEBAR-FRAME ---
   템플릿이 사이드바 컨테이너마다 남색 테두리(#172340)를 준다.
   ⛔ `.sidebar *` 로 넓히지 말 것 — 버튼의 민트 테두리까지 회색이 된다. */
.sidebar,
.sidebar > .sidebar-header,
.sidebar > .sidebar-body,
.sidebar-body,
.sidebar-footer { border-color: var(--ath-stone-600) !important; }