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

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

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

/* ==========================================================================
   1. 토큰
   ========================================================================== */
:root {
  /* --- 바탕: 흑요석과 화산재 --- */
  --pom-obsidian:   #0B0A0C;   /* 가장 깊은 바탕 */
  --pom-ash-900:    #121013;   /* 면 */
  --pom-ash-800:    #1A171B;   /* 떠 있는 면(카드) */
  --pom-ash-700:    #241F26;   /* 더 떠 있는 면 */
  --pom-ash-600:    #322B34;   /* 테두리 */
  --pom-ash-500:    #4A414D;   /* 흐린 테두리 */

  /* --- 용암: 주조색 --- */
  --pom-lava:       #FF4D1C;
  --pom-lava-hot:   #FF7A3D;
  --pom-lava-deep:  #C8300A;
  --pom-ember:      #FFB020;   /* 불씨 */

  /* --- 로마: 황금과 대리석 --- */
  --pom-gold:       #D4AF37;
  --pom-gold-hot:   #F0D264;
  --pom-gold-dim:   #8C7328;
  --pom-marble:     #E8DCC8;
  --pom-blood:      #C8102E;   /* 검투사의 진홍 */

  /* --- 글자 --- */
  --pom-text:       #E9E4DC;
  --pom-text-dim:   #9E958C;
  --pom-text-mute:  #6B645E;

  /* --- 의미색 --- */
  --pom-win:        #3FB950;
  --pom-lose:       #C8102E;
  --pom-hold:       #FFB020;

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

  /* --- 그림자와 빛 --- */
  --pom-shadow:      0 8px 28px rgba(0, 0, 0, .55);
  --pom-shadow-sm:   0 2px 10px rgba(0, 0, 0, .45);
  --pom-glow-lava:   0 0 24px rgba(255, 77, 28, .38);
  --pom-glow-gold:   0 0 20px rgba(212, 175, 55, .30);

  /* --- 그러데이션 --- */
  --pom-grad-lava:  linear-gradient(135deg, #FF7A3D 0%, #FF4D1C 45%, #C8300A 100%);
  --pom-grad-gold:  linear-gradient(135deg, #F0D264 0%, #D4AF37 50%, #8C7328 100%);
  --pom-grad-ash:   linear-gradient(180deg, #1A171B 0%, #121013 100%);
  /* 화산재 하늘 — 히어로 바탕 */
  --pom-grad-sky:   radial-gradient(120% 90% at 50% 115%, #FF4D1C 0%, #8E2206 28%, #2A1512 55%, #0B0A0C 82%);

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

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

/* --------------------------------------------------------------------------
   부트스트랩 변수 덮어쓰기 — 기존 컴포넌트가 자동으로 폼페이 색을 입는다.
   ⚠ 이걸 지우면 화면마다 색을 일일이 지정해야 한다.
   -------------------------------------------------------------------------- */
:root {
  --bs-primary:       #FF4D1C;
  --bs-primary-rgb:   255, 77, 28;
  --bs-secondary:     #9E958C;
  --bs-secondary-rgb: 158, 149, 140;
  --bs-success:       #3FB950;
  --bs-success-rgb:   63, 185, 80;
  --bs-warning:       #FFB020;
  --bs-warning-rgb:   255, 176, 32;
  --bs-danger:        #C8102E;
  --bs-danger-rgb:    200, 16, 46;
  --bs-info:          #D4AF37;
  --bs-info-rgb:      212, 175, 55;
  --bs-dark:          #0B0A0C;
  --bs-dark-rgb:      11, 10, 12;
  --bs-light:         #E8DCC8;
  --bs-body-color:    #E9E4DC;
  --bs-body-bg:       #0B0A0C;
  --bs-border-color:  #322B34;
  --bs-link-color:    #FFB020;
  --bs-link-hover-color: #FF7A3D;
}

/* ==========================================================================
   2. 바탕과 글자
   ========================================================================== */
html,
body {
  background: var(--pom-obsidian) !important;
  color: var(--pom-text);
  font-family: var(--pom-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(255, 77, 28, .07) 0%, transparent 60%),
    radial-gradient(50% 35% at 85% 8%, rgba(212, 175, 55, .05) 0%, transparent 60%);
}

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

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

a { color: var(--pom-ember); text-decoration: none; }
a:hover { color: var(--pom-lava-hot); }

::selection { background: rgba(255, 77, 28, .35); color: #fff; }

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

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

/* 브랜드 옆 분화구 표식 */
.pom-brand__mark {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: var(--pom-grad-lava);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: var(--pom-glow-lava);
}

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

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

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

/* --- 헤더 --- */
.navbar,
.horizontal-menu .navbar {
  background: rgba(18, 16, 19, .92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pom-ash-600);
  box-shadow: 0 1px 0 rgba(212, 175, 55, .12);
}
.navbar .navbar-content .nav-link { color: var(--pom-text-dim) !important; }
.navbar .navbar-content .nav-link:hover { color: var(--pom-marble) !important; }

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

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

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

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

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

/* --- 버튼 --- */
.pom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--pom-r-sm);
  font-family: var(--pom-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;
}
.pom-btn:active { transform: translateY(1px); }
.pom-btn:disabled,
.pom-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.pom-btn--lava,
.btn-primary {
  background: var(--pom-grad-lava) !important;
  border-color: var(--pom-lava-deep) !important;
  color: #fff !important;
}
.pom-btn--lava:hover,
.btn-primary:hover { box-shadow: var(--pom-glow-lava); color: #fff !important; }

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

.pom-btn--ghost,
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--pom-ash-500) !important;
  color: var(--pom-text) !important;
}
.pom-btn--ghost:hover,
.btn-outline-primary:hover {
  border-color: var(--pom-gold) !important;
  color: var(--pom-gold-hot) !important;
  background: rgba(212, 175, 55, .08) !important;
}

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

.btn-secondary {
  background: var(--pom-ash-700) !important;
  border-color: var(--pom-ash-500) !important;
  color: var(--pom-text) !important;
}
.btn-warning { background: var(--pom-ember) !important; border-color: #C8860F !important; color: #1A1204 !important; }
.btn-success { background: var(--pom-win) !important; border-color: #2C8639 !important; color: #fff !important; }

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

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

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

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

/* --- 배지 --- */
.pom-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;
}
.pom-badge--win  { background: rgba(63, 185, 80, .14);  color: var(--pom-win);  border-color: rgba(63, 185, 80, .35); }
.pom-badge--lose { background: rgba(200, 16, 46, .14);  color: #FF6B84;         border-color: rgba(200, 16, 46, .38); }
.pom-badge--hold { background: rgba(255, 176, 32, .14); color: var(--pom-ember); border-color: rgba(255, 176, 32, .35); }
.pom-badge--live {
  background: var(--pom-blood);
  color: #fff;
  animation: pom-pulse 1.6s ease-in-out infinite;
}
@keyframes pom-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(200, 16, 46, 0); }
}

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

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

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

/* --- 드롭다운 --- */
.dropdown-menu {
  background: var(--pom-ash-800);
  border: 1px solid var(--pom-ash-600);
  box-shadow: var(--pom-shadow);
}
.dropdown-item { color: var(--pom-text); }
.dropdown-item:hover { background: rgba(255, 77, 28, .12); color: var(--pom-marble); }
.dropdown-divider { border-color: var(--pom-ash-600); }

/* ==========================================================================
   6. 폼페이 전용 컴포넌트
   ========================================================================== */

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

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

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

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

/* 배당이 오르내린 직후 깜빡임 */
.pom-odds--up   { animation: pom-flash-up 1s ease; }
.pom-odds--down { animation: pom-flash-down 1s ease; }
@keyframes pom-flash-up   { 0% { background: rgba(63, 185, 80, .35); } 100% { background: var(--pom-ash-700); } }
@keyframes pom-flash-down { 0% { background: rgba(200, 16, 46, .35); } 100% { background: var(--pom-ash-700); } }

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   8. 접근성
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--pom-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(--pom-font-body);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--pom-marble) !important;
}
.sidebar .sidebar-brand .pom-brand__mark {
  width: .85em;
  height: .85em;
}

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

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

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

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