@charset "utf-8";
/* =========================================================================
   샴페인(309 cpn) v2 테마 — 2026-11-09
   셸(ruby-shell.css)·본문 CSS 의 색은 레거시 샴페인 cpn.css(--tmt-*) 값으로 일괄 치환했다(README 디자인 절).
   이 파일은 치환으로 맞출 수 없는 모양(로고 크기·메뉴 아이콘 원·비주얼 비율·모바일 하단 안내·강조 버튼 글자)만 덮어쓴다. layout_head.php 에서 셸 CSS 다음, 페이지 CSS 앞에 읽는다.
     espresso #1A1512 · walnut #261F1A · cask #362C25 · champagne gold #CEA25B · amber #E8A844
     cream #F9EBD1 · bronze #8C6642 · line #66482E · muted #CAAD8D
   ========================================================================= */
:root {
  --cpn-gold: #CEA25B;
  --cpn-amber: #E8A844;
  --cpn-cream: #F9EBD1;
  --cpn-bronze: #8C6642;
  --cpn-ink: #1A1512;
  --cpn-gradient: linear-gradient(135deg, #8C6642, #CEA25B 50%, #E8A844);
  --rb-box: linear-gradient(135deg, #362C25, #261F1A 55%, #1F1915);
  --rb-glow: 0 0 13px -5px rgba(232, 168, 68, .75), inset 0 0 11px -8px rgba(232, 168, 68, .6);
}

/* 로고: 레거시 샴페인 글자 로고(가로:세로 약 2.3:1)를 헤더 높이에 맞춘다. */
.rb-brand { max-width: 118px; }
@media (min-width: 1024px) {
  .rb-brand { flex: 0 0 136px; width: 136px; }
}
@media (min-width: 1024px) and (max-width: 1151.98px) {
  .rb-brand { flex-basis: 124px; width: 124px; }
}

/* 좌측 메뉴 아이콘: 레거시처럼 어두운 원 안의 흰 글리프(아이콘 그림은 흰 선, cpn/icon_NN.webp). */
.menu-icon {
  flex-basis: 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--icon) center / 16px 16px no-repeat, radial-gradient(circle at 35% 30%, #4A3A2C, #261F1A 72%);
  box-shadow: inset 0 0 0 1px rgba(206, 162, 91, .32);
}
.lm-row:hover .menu-icon, .lm-row[aria-current] .menu-icon { box-shadow: inset 0 0 0 1px rgba(232, 168, 68, .75), 0 0 10px -3px rgba(232, 168, 68, .7); filter: none; }
.mobile-drawer__quick img { padding: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4A3A2C, #261F1A 72%); box-shadow: inset 0 0 0 1px rgba(206, 162, 91, .32); box-sizing: border-box; }

/* 게임 카드: 레거시 샴페인 카드(206×226, 금색 액자)는 제목이 그림에 있다. 비율을 그림에 맞춘다. */
.rb-game__img { aspect-ratio: 206 / 226; object-fit: cover; }

/* 메인 비주얼: 레거시 샴페인 배너 비율(1647×555). 이벤트 카드는 그림(400×480, 글자 포함) 비율. */
@media (min-width: 1024px) {
  .rb-visual { aspect-ratio: 1647 / 555; }
}
.rb-event img { aspect-ratio: 400 / 480; object-fit: cover; }

/* 모바일 하단 안내(F1 그림 대신 글자): 19세 표시 · 안내 · 저작권 */
.rb-footer__art {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; max-width: 665px; margin: 0 auto; padding: 12px 14px;
  border: 1px solid var(--rb-line-2); border-radius: 4px; background: var(--rb-box); box-sizing: border-box;
}
.rb-footer__art img { grid-row: span 2; width: 30px; height: auto; }
.rb-footer__art p { margin: 0; color: var(--rb-text-2); font-size: 12px; font-weight: 600; line-height: 1.45; }
.rb-footer__art small { color: var(--rb-muted); font-size: 10.5px; letter-spacing: .2px; }

/* 강조 버튼: 샴페인 골드 그라데이션 위 진한 글자(흰 글자 대비 부족 방지) */
.rb-auth-btn--join, .rb-btn--deposit, .rb-btn--coin_deposit,
.rb-body .main-content .content-layout > .bet-panel .bet-action-link.primary { background: var(--cpn-gradient); color: var(--cpn-ink); }

/* ---------------------------------------------------------------------------------------------
   샴페인 질감(2026-11-09 디자인 다듬기): 배치는 그대로 두고 F1 의 각진 모서리·빨간 사선 장식을 레거시 샴페인처럼 부드럽게.
   레거시 기준: 좌측 메뉴·게시판·푸터 상자 둥근 모서리(약 10px), 헤더 로그인·회원가입은 알약 버튼, 상자 위 테두리 강조 없음.
   --------------------------------------------------------------------------------------------- */
:root { --cpn-radius: 10px; --cpn-radius-sm: 6px; }
.rb-box, .rb-board, .rb-footer__bar, .rb-footer__art, .mdx-banner, .mdx-tile,
.rb-body .main-content .content-layout > .bet-panel .bet-panel-inner, .rb-side-banners a.rb-sbn { border-radius: var(--cpn-radius); }
.rb-box, .rb-board, .rb-body .main-content .content-layout > .bet-panel .bet-panel-inner { border-top-color: var(--rb-line); }
.rb-partners__item, .rb-section__nav button, .mdx .mdx-close, .rb-money__item { border-radius: var(--cpn-radius-sm); }
.rb-auth-btn, .rb-btn, .rb-quicknav__link, .mdx-memo, .rb-footer__cookie { border-radius: 999px; }
@media (min-width: 1024px) {
  .rb-auth-btn { padding: 0 20px; }
  .rb-auth-btn--login { border-color: var(--cpn-cream); background: transparent; color: var(--cpn-cream); }
}
/* 우측·더보기 배너: F1 빨간 사선 띠 대신 오른쪽 끝의 은은한 골드 빛 */
.rb-sbn::after, .mdx-banner::before { content: none; }
.rb-sbn::before { width: 120px; background: radial-gradient(120px 90px at 100% 50%, rgba(232, 168, 68, .28), transparent 70%); clip-path: none; }
.rb-side-banners a.rb-sbn { background: var(--rb-box); }
.rb-sbn__icon { color: var(--cpn-gold); }
.rb-sbn__text strong { color: var(--cpn-cream); }

/* 무기명가입(레거시 샴페인 헤더 버튼 이관): 로그인과 같은 크기의 외곽선 버튼. 모바일 헤더는 좁아 전체 메뉴 패널의 버튼만 쓴다. */
.rb-auth-btn--noname { background: transparent; border-color: var(--rb-line); color: var(--cpn-cream); }
.rb-auth-btn--noname:hover, .rb-auth-btn--noname:focus-visible { border-color: var(--cpn-gold); }
@media (max-width: 1023.98px) {
  .rb-auth-btn--noname { display: none; }
}
.noname-modal__intro { margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgba(206, 162, 91, .35); border-radius: 6px; background: rgba(54, 44, 37, .6); color: var(--rb-text-2); font-size: 13px; line-height: 1.55; }

/* 반응형 3단(2026-11-09): 모바일 < 1024, PC 겹침 좌측 메뉴 1024~1299, PC 고정 좌측 메뉴 ≥ 1300(ruby-shell.css).
   넓은 모바일(태블릿 세로·작은 창)과 겹침 PC 구간은 메인 카드가 지나치게 커지지 않게 열 수를 늘린다. */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .rb-games ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .rb-events__track { grid-auto-columns: calc((100% - 24px) / 4); }
  .rb-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* 모바일 메인 게시판: 글 제목·전체보기를 손가락으로 누르기 쉽게(24px 이상, 줄 전체가 링크). 좁은 폰은 한 줄에 하나. */
@media (max-width: 1023.98px) {
  .rb-board__list li > a { display: block; padding: 7px 0; line-height: 18px; }
  .rb-board__more { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; }
  /* 경기결과 날짜 이전·다음 화살표(17×24 → 32×32) */
  .record-board__date .ui-control { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; }
}
@media (max-width: 599.98px) {
  .rb-boards { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1299.98px) {
  .rb-games ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rb-events__track { grid-auto-columns: calc((100% - 45px) / 4); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-icon { transition: none; }
}
.mobile-drawer__auth--menu { margin: 4px 0 12px; }
.mobile-drawer__auth--menu a { flex: 1; }