/* ============================================================
   PONY 스킨 오버라이드 (구조 + 이미지) — 세븐스타(sevenstar.css)에서 복제·재스킨

   ⚠️ 이 파일의 앞부분(~'PONY 시안 보정' 절 전)은 세븐스타 규칙을 **색 토큰만 바꿔** 물려받은 것이다
      (금색 → 버건디/로즈, 금색 위 검은 글자 → 밝은 글자). PONY 시안 고유의 배치·장식은
      **파일 맨 끝 'PONY 시안 보정' 절**에 모았다 — 뒤에 오는 규칙이 이기므로 그 절이 최종값이다.

   로드 순서: base → special → star_color → … → seven-home → **이 파일** → attendance
   즉 **가장 마지막**이라 위의 모든 레이어를 이긴다.

   역할 분담(합치지 말 것):
     · pp_color.css : 색만. 프리셋 교체가 한 파일로 끝나도록 분리돼 있다.
     · seven-home.css : 세븐벳 시안에서 확립한 '배치'(3열 nav 그리드 / 퀵타일 마퀴 /
                        프로모 타일 / 공지·이벤트 2단 / 카지노·슬롯 버튼). 치수는 SEVEN STAR
                        시안과 동일하므로 그대로 재사용한다.
     · 이 파일        : SEVEN STAR 에서 **새로 바뀐 것**만 — 배경 이미지, GNB 바 이미지,
                        로고, 마스크 아이콘, 히어로 테두리, 공지 행 불릿/화살표,
                        프로모 shine + 시작버튼, 베팅슬립 금색화, 모바일 보정.

   시안: `SEVEN BET.dc.html`(PC 1920 / wrap 1900) · `SEVEN BET Mobile.dc.html`(360)
   에셋: /static/pp/**  (원본 `SEVEN_STAR/assets` 를 경로 그대로 옮긴 것)

   ⚠️ 시안은 절대좌표 캔버스지만 좌표계가 레거시 `max.css` 와 정확히 일치한다
      (.wrap 1900 / .contents margin 0 315px 0 310px / .snb_left top:145px / .bet_slip top:149px).
      그래서 DOM 을 새로 짜지 않고 스킨만 얹는다 — 이 전제가 깨지면(레이아웃 CSS 를 고치면)
      시안 좌표와 어긋나므로 반드시 함께 검토할 것.
   ============================================================ */

/* ── 페이지 배경 ────────────────────────────────────────────
   시안: `#0a0a0a url(assets/background.png) center top/cover no-repeat`
   ⚠️ 시안의 `background.png`(1920x1521, 4.0MB)는 **webp 로 재인코딩**해서 넣었다(478KB).
      배경 한 장이 홈 이미지 전체의 15% 를 차지해 공지팝업 이미지가 뒤로 밀렸다(2026-09-10 실측).
      시안 에셋을 다시 받을 때도 PNG 원본을 그대로 두지 말고 webp 로 변환해서 넣을 것.
   base.css:158 의 `bg.png` / `100% 100%` 를 덮어쓴다. */
body {
    background-color: #0C0A0B;
    /* PONY 시안: radial(70% 40% at 50% 0%, rgba(217, 42, 116,.55)) + #151213→#0C0A0B 세로 그라데이션 */
    background-image: radial-gradient(70% 40% at 50% 0%, rgba(217, 42, 116, .55) 0%, rgba(217, 42, 116, 0) 100%), linear-gradient(180deg, #151213 0%, #0C0A0B 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
}

/* ── 상단 로고 ──────────────────────────────────────────────
   시안: 65px 바 안에서 로고만 92px 로 **넘쳐 나온다**(드롭섀도 + 금색 글로우).
   base.css `.logo_gnb { overflow:hidden; margin-left:91px }` + `img{height:60px}` 를 뒤집는다. */
.logo_gnb {
    overflow: visible;
    margin: 0 0 0 18px;
}
.logo_gnb a { overflow: visible; }
.logo_gnb a img {
    height: 92px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .85)) drop-shadow(0 0 16px rgba(240, 64, 138, .4));
}

/* ── 상단 링크 아이콘 (FontAwesome 글리프 → 시안 SVG 마스크) ──
   ⚠️ 마스크로 찍는 이유: 시안 아이콘은 단색이라 색을 CSS 로 제어해야 하고,
      웹폰트 로딩 전 네모가 보이는 구간(FOUT)이 사라진다.
   `--ico` 는 header.tsx 가 링크마다 인라인으로 넣는다. */
.top_right_box .ss-ico {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 2px;
    background: #fff;
    -webkit-mask: var(--ico) center/contain no-repeat;
    mask: var(--ico) center/contain no-repeat;
}
/* FontAwesome 글리프 제거 — 클래스는 남겨 두되(다른 규칙이 참조) 문자만 지운다 */
.top_right_box .ss-ico::before { content: ''; }

/* 상단 링크 hover — base.css 의 주황(#ff8b6b)을 시안 금색으로 */
.top_right_box a:hover,
.top_right_box .tel_btn:hover,
.top_right_box .kakao_btn:hover {
    color: #F0408A;
    text-shadow: 0 0 6px rgba(240, 64, 138, .35), 0 2px 8px rgba(0, 0, 0, .8);
}
.top_right_box a:hover .ss-ico { background: #F0408A; }

/* base.css 가 링크 밑에 그리는 언더라인도 금색으로 */
.top_right_box a::after,
.top_right_box .tel_btn::after,
.top_right_box .kakao_btn::after { background: #F0408A; }

/* 알약 3종은 언더라인/hover 이동이 붙으면 안 된다(시안은 배경만 바뀐다) */
.top_right_box .btn_top_login::after,
.top_right_box .btn_top_join::after,
.top_right_box .btn_top_sos::after,
.top_right_box .btn_top_tele::after { display: none; }
.top_right_box .btn_top_login:hover,
.top_right_box .btn_top_join:hover,
.top_right_box .btn_top_sos:hover,
.top_right_box .btn_top_tele:hover {
    transform: none;
    text-shadow: none;
}
.top_right_box .btn_top_join:hover,
.top_right_box .btn_top_sos:hover,
.top_right_box .btn_top_tele:hover { color: #F0408A; }

/* 알약 치수 — 시안 height 34 / padding 0 20 / radius 999 */
.top_right_box .btn_top_login,
.top_right_box .btn_top_join,
.top_right_box .btn_top_sos,
.top_right_box .btn_top_tele {
    height: 34px;
    line-height: 32px;
    width: auto;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 13px;
}
.top_right_box .btn_top_login { margin-left: 8px; }

/* ── GNB 바 ────────────────────────────────────────────────
   시안: 50px 바 전체를 `menu_bg.webp` 한 장이 그린다(보더 없음 — pp_color.css 가 끈다).
   ⚠️ 양 끝의 붉은 '날개'는 **시안 에셋 그대로다**(menu_bg.webp). 금색 테마 안의 의도된 포인트라
      임의로 걷어내지 말 것 — 바꾸려면 GIF 를 교체한다. */
.gnb_box {
    height: 50px;
    background: #0a0a0a url(/static/pp/menu_bg.webp) center/100% 100% no-repeat;
}
/* 시안은 GNB 를 top:88px 에 둔다(max.css 는 93px). 모바일은 GNB 자체가 없어 PC 로 한정한다. */
@media screen and (min-width: 768px) {
    .gnb_box { top: 88px; }
}

/* ── 좌측 사이드바 ─────────────────────────────────────────── */
/* 시안 패널 바탕 rgb(17,17,17) / nav 그리드 갭 바탕 rgb(34,34,34) */
.snb_left { background: rgb(17, 17, 17); }
.snb_left > ul { background: rgb(34, 34, 34); }

/* 카지노 / 슬롯 버튼 이미지 — SEVEN STAR 판으로 교체 */
.snb_btn_img a:nth-of-type(1) { background-image: url(/static/pp/btn_casino.png); }
.snb_btn_img a:nth-of-type(2) { background-image: url(/static/pp/btn_slot.png); }

/* 세로높이 70px — 좌우가 잘리지 않는 값이다.
   칸 폭은 147px 고정(base.css)이고 SEVEN STAR 배경(btn_casino/btn_slot.png)은 300x143 이라
   가로를 꽉 채우는 데 필요한 높이가 147 / (300/143) ≒ 70px 다. seven-home.css 의 80px 는
   `background-size:cover` 기준으로 높이가 남아 좌우를 각 10px 씩 잘라 먹었다.
   ⚠️ 배경 이미지를 다른 비율로 교체하면 이 값도 함께 다시 계산할 것. */
.snb_btn_img a { height: 70px; }

/* 카지노/슬롯 아래 배너 슬롯 — 시안의 `<!-- revolution banner -->` 자리.
   ⚠️ 원본 GIF 가 장당 23MB 라 `loading="lazy"` + `content-visibility` 로 최초 페인트를
      막지 않게 한다. 재인코딩(webp/mp4) 전까지는 모바일 데이터 사용량에 주의할 것. */
.ss_side_bn {
    width: 297px;
    padding: 3px 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #000;
    content-visibility: auto;
    contain-intrinsic-size: 297px 160px;
}
.ss_side_bn img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
}
.ss_side_bn img:hover { filter: brightness(1.12); transform: scale(1.02); }

/* 좌측 제목바 아이콘 — 시안 22x22 (인기스포츠=st_special / 최신인기게임=hot) */
.left_ttl img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 인기스포츠 행 — 시안 배경/보더 */
.snb_sp_box .btn_snb_sp {
    background: linear-gradient(180deg, rgb(21, 21, 21) 96%, rgb(0, 0, 0) 100%);
    border-bottom: 1px solid rgb(17, 17, 17);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.snb_sp_box .snb_sp_cnt { color: #F0408A; font-weight: 700; }

/* ── 중앙: 히어로 배너 ─────────────────────────────────────
   시안: 629x270 두 칸, radius 5, **2px 금색 테두리**. */
.mb_pc_box .mb_box {
    border: 2px solid #F0408A;
    border-radius: 5px;
    overflow: hidden;
    background: #333;
}

/* ── 중앙: 퀵타일 마퀴 ─────────────────────────────────────
   배치는 seven-home.css 가 잡는다. 여기서는 시안 타일 면만 맞춘다. */
.seven_tile > a,
.seven_tile {
    border-color: #2a2a2a;
}

/* ── 중앙: 공지 / 이벤트 목록 ───────────────────────────────
   시안 행: 41px, 좌측 30px 로고 불릿(logo-s.svg), 우측 `›`, hover 시 금색 그라데이션. */
.main_bbs_pair .bbs_col_item > a {
    position: relative;
    height: 41px;
    background: linear-gradient(180deg, rgb(21, 21, 21) 96%, rgb(0, 0, 0) 100%);
    border-bottom: 1px solid #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background .15s ease;
}
.main_bbs_pair .bbs_col_item > a:hover {
    background: linear-gradient(180deg, rgba(240, 64, 138, .20) 0%, #151213 100%);
}

/* 불릿 — 원본 `<img src="icon-logo.webp">` 를 감추고 시안 SVG 를 ::before 로 찍는다
   (CSS 로는 img 의 src 를 바꿀 수 없다). */
.main_bbs_pair .bbs_col_item > a > img { display: none; }
.main_bbs_pair .bbs_col_item > a::before {
    content: '';
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: url(/static/pp/icons/logo-s.svg) center/72% no-repeat;
}

/* 우측 화살표 — 시안은 공지·이벤트 **양쪽 모두** `›` 다.
   원본은 공지에만 `.main_list_arr`(fa-arrow-right)가 있고 이벤트에는 없다.
   → 원본 span 은 감추고 `::after` 로 양쪽에 동일하게 붙인다. */
.main_bbs_pair .bbs_col_item > a .main_list_arr { display: none; }
.main_bbs_pair .bbs_col_item > a::after {
    content: '\203A';
    margin-left: auto;
    width: 13px;
    flex-shrink: 0;
    color: #fff;
    font-size: 12px;
    text-align: right;
}

/* 공지/이벤트 제목바 아이콘 — SEVEN STAR 판 */
.main_bbs_pair .bbs_col_head .main_bbs_ttl i {
    background-image: url(/static/pp/icons/st_notice.webp);
}
.main_bbs_pair .bbs_col_event .bbs_col_head .main_bbs_ttl i {
    background-image: url(/static/pp/icons/st_event.webp);
}

/* 제목바 안의 글자는 금색 바 위이므로 검게 (MORE 포함) */
.main_bbs_pair .bbs_col_head .main_bbs_ttl { color: #EEE6EA; }

/* 제목 글자 그림자 제거 (2026-09-01 운영 요청)
   base.css:952 / special.css:10 이 `.main_bbs_ttl` 에 어두운 text-shadow 를 준다.
   금색 바 위의 검은 글자에 검은 그림자가 겹쳐 번져 보여서 걷어낸다.
   영문 소제목(NOTICE/RULE · EVENT)도 base.css:960 에서 같은 그림자를 받으므로 함께 끈다.
   ⚠️ 메인 페이지 공지/이벤트 쌍(.main_bbs_pair)에만 한정한다 — 다른 화면의 제목바는 그대로. */
.main_bbs_pair .bbs_col_head .main_bbs_ttl,
.main_bbs_pair .bbs_col_head .main_bbs_sub,
.main_bbs_pair .bbs_col_head .bbs_more { text-shadow: none; }

/* 영문명(NOTICE/RULE · EVENT) — 금색 바 위 검정 60% (2026-09-01 운영 요청)
   seven-home.css 는 이 자리를 금색(--sb-gold)으로 뒀는데 금색 바와 대비가 없어 묻힌다.
   ⚠️ pp_color.css 의 `.main_bbs_sub{color:var(--sb-on-gold)}` 는 명시도(0,1,0)라
      seven-home.css 의 (0,3,0)에 지고 있었다. 그래서 여기서도 같은 (0,3,0)로 맞춰
      뒤에 오는 순서로 이긴다 — 명시도를 낮추면 다시 금색으로 돌아간다. */
.main_bbs_pair .bbs_col_head .main_bbs_sub { color: var(--sb-on-gold); }

.main_bbs_pair .bbs_col_head .bbs_more { color: #EEE6EA; font-weight: 600; }
.main_bbs_pair .bbs_col_head .bbs_more:hover { color: #fff; }

/* ── 중앙: 프로모 타일 5종 ──────────────────────────────────
   시안: 배경 이미지 위에 **시작 버튼 이미지 하나**만 얹고, 금색 빛줄기가 훑고 지나간다.
   제목/부제는 배경 이미지에 이미 그려져 있으므로 텍스트로 다시 그리지 않는다. */
.main_middle_box > a {
    position: relative;
    border: 1px solid #B8C2C8;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background-color: #333;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.main_middle_box > a:hover {
    border-color: #F0408A;
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(240, 64, 138, .35);
}

/* 배경 이미지 — SEVEN STAR 판(bt-game-*.png). 시안은 `center top/cover`. */
.main_middle_box > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* 제목/부제 숨김 — 시안에는 없다(배경 이미지에 이미 인쇄돼 있다) */
.main_middle_box a span.mmb_in_ttl,
.main_middle_box a span.mmb_in_sub { display: none; }

/* 시작 버튼 — 텍스트 버튼을 시안 이미지로 갈아끼운다.
   ⚠️ 선택자를 `.main_middle_box a span.hoverb`(0,3,1)로 맞춰야 한다. `> a .hoverb`(0,2,1) 로는
      seven-home.css 의 동명 규칙을 못 이겨서 래퍼가 타일 전체를 덮은 채 남는다(어두운
      그라데이션 오버레이가 배경 그림 아래쪽을 가린다 — 시안에는 그 오버레이가 없다). */
.main_middle_box a span.hoverb {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 38px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    padding: 0;
    opacity: 1;
}
.main_middle_box a span.mmb_in_btn {
    display: block;
    width: 196px;
    height: 54px;
    font-size: 0;                       /* '게임하러 가기' 텍스트 제거 */
    background: var(--sb-btn-grad);   /* PONY: 이미지 버튼 대신 CSS (최종값은 파일 끝 보정 절) */
    border: 0;
    box-shadow: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6));
    transition: transform .12s ease, filter .12s ease;
}
.main_middle_box a:hover span.mmb_in_btn {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 6px 12px rgba(240, 64, 138, .7));
}

/* 빛줄기 2겹 — 시안 `.sb-shine`(선명) + `.sb-shine-soft`(번짐).
   타일마다 0.55초씩 늦게 출발해 좌→우로 순차적으로 훑는다. */
.main_middle_box > a::before,
.main_middle_box > a::after {
    content: '';
    position: absolute;
    top: -18%;
    left: 0;
    height: 136%;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}
.main_middle_box > a::before {          /* soft */
    width: 52%;
    filter: blur(14px);
    background: linear-gradient(90deg, rgba(238, 230, 234, 0) 0%, rgba(238, 230, 234, .20) 45%, rgba(238, 230, 234, .28) 52%, rgba(238, 230, 234, 0) 100%);
    animation: ss_shine_soft 5.2s cubic-bezier(.25, .6, .2, 1) infinite;
}
.main_middle_box > a::after {           /* sharp */
    width: 26%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(238, 230, 234, .10) 38%, rgba(238, 230, 234, .70) 50%, rgba(238, 230, 234, .10) 62%, rgba(255, 255, 255, 0) 100%);
    animation: ss_shine 5.2s cubic-bezier(.25, .6, .2, 1) infinite;
}
.main_middle_box > a:nth-child(1)::before, .main_middle_box > a:nth-child(1)::after { animation-delay: 0s; }
.main_middle_box > a:nth-child(2)::before, .main_middle_box > a:nth-child(2)::after { animation-delay: .55s; }
.main_middle_box > a:nth-child(3)::before, .main_middle_box > a:nth-child(3)::after { animation-delay: 1.1s; }
.main_middle_box > a:nth-child(4)::before, .main_middle_box > a:nth-child(4)::after { animation-delay: 1.65s; }
.main_middle_box > a:nth-child(5)::before, .main_middle_box > a:nth-child(5)::after { animation-delay: 2.2s; }
.main_middle_box > a:hover::before,
.main_middle_box > a:hover::after { animation-duration: 1.9s; }

@keyframes ss_shine {
    0%   { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
    8%   { opacity: 1; }
    38%  { transform: translateX(320%) skewX(-18deg); opacity: 0; }
    100% { transform: translateX(320%) skewX(-18deg); opacity: 0; }
}
@keyframes ss_shine_soft {
    0%   { transform: translateX(-200%) skewX(-18deg); opacity: 0; }
    10%  { opacity: .85; }
    40%  { transform: translateX(300%) skewX(-18deg); opacity: 0; }
    100% { transform: translateX(300%) skewX(-18deg); opacity: 0; }
}
/* 시안과 동일하게 '모션 줄이기' 설정을 존중한다 */
@media (prefers-reduced-motion: reduce) {
    .main_middle_box > a::before,
    .main_middle_box > a::after { animation: none; opacity: 0; }
    .seven_quick_track { animation: none; }
}

/* ── 우측 베팅슬립 ─────────────────────────────────────────
   시안: 패널 rgb(21,21,21), 금색 포인트, '배팅하기' 는 btn-gold-wide.svg. */
.side_right,
.bet_slip { background: rgb(21, 21, 21); }

.bet_cart .bc_select .no_data { color: rgb(147, 147, 147); }

/* 금액 버튼 hover — 시안은 금색 테두리 + 짙은 금빛 배경 */
.bet_cart .money_btn_box a:hover,
.bet_cart .money_btn_box span:hover {
    background: linear-gradient(180deg, #B81C5E, #8E1048);
    border-color: #F0408A;
}

/* '배팅하기' 버튼 (`.btn_bet`) — 시안은 금색 버튼 이미지 위 검은 글자다.
   ⚠️ 원래 규칙이 `base.css`(단색 #111) 와 `special.css`(붉은 3-stop 그라데이션) **두 곳**에
      있고 special 이 나중이라 붉은 쪽이 이긴다. 한쪽만 덮으면 색이 안 바뀐다 —
      마지막 로드인 이 파일에서 한 번에 잡는다.
   ⚠️ `.btn_bet` 은 베팅슬립 밖(미니게임 베팅 화면 등)에서도 쓰이므로 스코프를 좁히지 않는다. */
.btn_bet {
    background: var(--sb-btn-grad);
    color: #EEE6EA;
    font-weight: 700;
    text-shadow: none;
    border: 0;
    transition: filter .15s ease, transform .1s ease;
}
.btn_bet:hover {
    background: var(--sb-btn-grad);
    color: #EEE6EA;
    filter: brightness(1.08);
}
.btn_bet:active { transform: scale(.98); }

/* 베팅슬립 열기/닫기 손잡이 — 붉은 3-stop 그라데이션을 금색으로.
   ⚠️ 여기만 **이미지가 아니라 CSS 그라데이션**을 쓴다. 손잡이는 34x60 / 36x100 처럼
      세로로 긴 탭인데 `btn-gold.svg` 는 가로 비율(613:269)이라 늘리면 금박 결이 뭉개진다.
      금색이라는 결과는 같으면서 비율 왜곡이 없는 쪽을 택했다. */
.bet_slip_toggle_btn,
.bet_slip_close_btn {
    background: var(--sb-btn-grad);
    border-color: #F0408A;
    color: #EEE6EA !important;   /* base.css 가 `color:#fff !important` 로 박아 둔 것을 되돌린다 */
}
.bet_slip_close_btn:hover,
.bet_slip_toggle_btn:hover {
    background: var(--sb-btn-grad);
    border-color: #F0408A;
    filter: brightness(1.08);
}
.bet_slip_toggle_btn i,
.bet_slip_close_btn i,
.bet_slip_toggle_btn span,
.bet_slip_close_btn span { color: #EEE6EA; }

/* 배당/당첨금 등 강조 수치 */
.bet_cart .bc_info .point_color,
.bet_cart .total_ratio,
.bet_cart .total_win { color: #F0408A; }

/* ── 모바일 (≤767px) — `SEVEN BET Mobile.dc.html` 기준 ───────── */
@media screen and (max-width: 767px) {
    /* 모바일 시안은 배경이 페이지 상단 정렬 cover */
    body { background-size: cover; background-position: center top; }

    /* 상단 헤더 — 시안 50px 검정 바에 로고 46px */
    .logo_gnb { margin: 0; }
    .logo_gnb a img { height: 46px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .85)) drop-shadow(0 0 12px rgba(240, 64, 138, .4)); }

    /* 게스트 버튼 — 시안(loginBtns)은 금색 버튼 이미지 위 **검은 글자만** 3개다.
       ⚠️ 아이콘을 숨기는 이유: 시안에 아이콘이 없기도 하고, 아이콘이 30px 를 먹어
          '무기명가입'·'텔레그램 문의' 라벨이 알약 밖으로 삐져나갔다(실측).
          가입정책에서 기명 회원가입까지 켜면 버튼이 4개가 되는데, 아이콘을 빼야
          4개일 때도 라벨이 한 줄에 들어간다. */
    .contents_join_box .login_btn,
    .contents_join_box .join_btn,
    .contents_join_box .sos_btn,
    .contents_join_box .black_btn {
        background: var(--sb-btn-grad);
        border: 0;
        color: #EEE6EA;
        /* ⚠️ `box-sizing: content-box` + `padding:2px`(base.css)라 height 만 맞추면
              로그인(패딩 0)만 42px, 나머지는 46px 이 되어 한 줄에서 높이가 어긋난다. */
        box-sizing: border-box;
        height: 42px;
        line-height: 42px;
        padding: 0;
        gap: 0;
        align-items: center;
        justify-content: center;
        /* 3열 고정 — 버튼이 4개(가입정책에서 기명까지 켠 경우)면 4번째가 다음 줄 첫 칸에
           **같은 폭으로** 떨어진다. flex:1 그대로 두면 혼자 남은 버튼이 한 줄을 다 먹어
           금색 알약만 기형적으로 길어진다. */
        flex: 0 0 auto;
        width: calc(33.333% - 4px);
        min-width: 0;
    }
    .contents_join_box .btn_text {
        color: #EEE6EA;
        font-weight: 700;
        font-size: 13px;
        white-space: nowrap;   /* 알약 밖으로 접히지 않게 */
    }
    .contents_join_box .icon { display: none; }

    /* 모바일 메뉴 카드 아이콘 — 시안 60px, radius 8 (아이콘은 st_*.gif 로 교체됨) */
    .menumobile .card .ball-area img { width: 60px; height: 60px; border-radius: 8px; }

    /* ⚠️ 하단 고정 메뉴(#quickFoot)의 금색화는 **여기가 아니라 `chrome/footer.tsx` 의 인라인
       `<style>`** 에 있다. 그 style 태그는 body 안(이 파일보다 뒤)이라 같은 명시도면 그쪽이
       이긴다 — 여기에 또 쓰면 `!important` 싸움만 나고 진짜 값이 어디 있는지 흐려진다. */

    /* 좌측 사이드 배너는 모바일에서 숨긴다 — 23MB GIF 2장을 모바일로 내려보내지 않는다 */
    .ss_side_bn { display: none; }
}

/* ============================================================
   내부 페이지 테마 — 레거시 레드 액센트 → SEVEN STAR 골드

   ⚠️ **범위**: 시안은 홈 + 공통 크롬만 제공한다. 내부 페이지(충전/환전/베팅내역/공지/
      마이페이지/미니게임…)는 레이아웃을 그대로 두고 **색만** 브랜드에 맞춘다.

   레거시 CSS 의 붉은 액센트는 두 계열로 딱 갈린다(실측 — base/special/join2/min/max 전수):
     A. 프라이머리 버튼 그라데이션 `linear-gradient(270deg,#300205,#960810,#eb1c26,…)` — 28곳
     B. 액센트 텍스트/보더 `#ff3311` · `#ff5a2a` — 93곳

   ⚠️ **A 계열은 배경만 바꾸면 안 된다.** 원래 흰 글자(어두운 빨강 위)라, 금색으로만 바꾸면
      금색 위 흰 글자가 되어 읽히지 않는다. 반드시 `color:#000` 을 함께 준다.
   ⚠️ B 계열은 대부분 어두운 면 위의 `color` 라 금색으로 바꾸면 대비가 오히려 좋아진다.
      다만 **배경으로 쓰이는 몇 개**는 A 와 같은 취급(검은 글자)이 필요해 따로 묶었다.
   ============================================================ */

/* ── A. 프라이머리 버튼/탭 — 금색 그라데이션 + 검은 글자 ────────────── */
.btn_bank:hover,
.btn_blue:hover,
.select_money:hover,
.btn_order:hover,
.btn_order_on,
.btn_bonus:hover,
.on_bonus,
.btn_bonus.selected,
.pop_login_btn,
.pop_join_box .ip_sm,
.slot_money_box3 span.on,
.paging_div .inner_paging a:hover,
.paging_div .inner_paging a.cur,
.mini_game_menu .menu_title,
.mini_game_menu_item.active,
.mini_game_menu_item:hover,
.mini_game_content .cube.betting-list .listS .selected,
.mini_game_content .cube.betting-list .choice.selected,
.mini_sel_btn .choice.selected,
.tabFrame ul,
.sportLeftMenuBtn.active,
.sportLeftMenuBtn:hover,
.button-style-1:hover,
.bet-attach-badge:hover,
.bbs-view-betting .Selected,
.board-btn-bottom .btn-main:hover,
.bbs-comment-btn:hover,
.hd_amt:hover,
.bettinglist-page-table .buttons.selected,
.tbl-betting.selected,
.half_tab a.on,
.page_tab a.on,
.sm_charge2.on,
.sm_withdrawal2.on,
.btn_payback_receive {
    background: var(--sb-btn-grad);
    border-color: #F0408A;
    color: #EEE6EA;
    text-shadow: none;
}

/* 위 버튼들 안쪽 텍스트/아이콘도 함께 검게 — 자식에 흰색이 박혀 있으면 배경만 금색이 된다 */
.pop_login_btn i,
.pop_join_box .ip_sm i,
.btn_payback_receive i,
.mini_game_menu .menu_title span,
.sportLeftMenuBtn.active .txt,
.sportLeftMenuBtn:hover .txt { color: #EEE6EA; }

/* ⚠️ `NEW`/`HOT` 배지(`.new-icon`·`.hot-icon`)는 **일부러 붉은 채로 둔다.**
   금색 테마 안에서 시선을 끄는 것이 배지의 목적인데 금색으로 바꾸면 배경에 묻힌다.
   (테마 잔재가 아니라 의도된 대비다 — "빨간 게 남았다"고 지우지 말 것) */

/* ── B-1. 액센트 텍스트 — 어두운 면 위 금색 ────────────────────── */
.rs_money,
.pui_btn_icon i,
.game_ttl,
.board_ttl,
.new_memo span,
.hd_line,
.popup_title,
.t_stan_color,
.this_month,
.slot_money_box .sm_refresh,
.slot_money_box .sm_withdrawal,
.slot_money_box .select_max,
.slot_money_box .select_max2,
.slot_money_box2 .sm_refresh,
.odds_stan,
.team_head,
.team_stan,
.d_box .detail_ttl,
.btn_bonus .bonus_name,
.sp_notice_box .icon_notice,
.ny_time,
.main_game_sub_ttl,
.t_info,
.t_info2,
.t_info3,
.vsc_tab_box a.on,
.point_color,
.vs_color,
.stan_color,
.t_orange,
.color-yellow,
.detail_ttl .market_toggle,
.toggle_all_markets,
.bet_slip_toggle_horizontal i,
.list-betting-virtual,
.list-betting-mini,
.bettinglist-sub,
.bet_history_table tbody td .round_num,
.bet_history_table tbody td .bet_pick,
.bet_history_table tbody td .result_pending,
.bet_history_btns .btn_action.btn_refresh,
.mini_info .round_info,
.mini_sel_btn .betPoint,
.bet_list_box .list_title,
.mini_game_content .cubeZone .gameName,
.mini_game_content .cube.betting-list .titleS .left,
.mini_game_content .cube.betting-list .listS .team_head,
.mini_game_content .cube.betting-list .listS .more,
.mini_game_content .cube.betting-list .listS .odds_ratio,
.mini_game_content .cube.betting-list .betPoint,
.brvhrRaceState .yellow,
.brvhrHorseOdds,
.main_bbs_list ul li a:hover,
.menu-item:hover { color: #F0408A; }

/* ── B-2. 액센트 보더/포커스 링 ───────────────────────────────── */
.korean_open_all,
.btn_bonus,
.detail_tab div.detail_tab_on,
.sports_info .info_home_score,
.sports_info .info_away_score,
.btn_sports_tab_on,
.btn_sports_tab:hover,
.bet_slip_toggle_horizontal:hover,
.tbl-betting.select,
.mini_sel_btn .choice:hover,
.mini_game_content .cube.betting-list .choice:hover,
.menu-sports:hover,
.ip_id:focus,
select.ip_id:focus,
.birth-select:hover,
.birth-select:focus,
.loading-spinner { border-color: #F0408A; }

/* GNB 의 `gold` 변형 — 시안은 보더 없이 `menu_bg.webp` 한 장이다(위 GNB 절 참조) */
.gnb_box.gold {
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/* 스포츠 탭 hover/active 의 붉은 글로우 → 금색 */
.btn_sports_tab:hover,
.btn_sports_tab_on { box-shadow: 0 0 10px rgba(240, 64, 138, .35); }
.open_slot2:hover { box-shadow: 0 0 12px rgba(240, 64, 138, .45); }
.snb_btn_img img:hover { box-shadow: none; }   /* 원본 <img> 는 숨겨져 있다(seven-home.css) */

/* ── 한줄 공지 티커(`chrome/oneline-notice.tsx`) 배치 ────────────
   컴포넌트는 자기 인라인 `<style>` 에 모양만 갖고 있고, **바깥 여백은 여기서 준다** —
   좌우 여백이 `.contents` 와 어긋나면 가운데 칼럼 밖으로 삐져나와 사이드바를 덮는다.
   ⚠️ 값은 `max.css` 의 `.contents { margin: 0 315px 0 310px }` 와 **반드시 같아야 한다**.
      한쪽만 고치면 티커와 본문이 어긋난 채로 배포된다. */
@media screen and (min-width: 768px) {
    .ss-oneline { margin: 0 315px 0 310px; }
}
@media screen and (max-width: 767px) {
    .ss-oneline { margin: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   2026-08-31 검수 반영 — 세븐벳 잔재 색상 · 비로그인 버튼 정렬 · 메인 목록
   ═══════════════════════════════════════════════════════════════════ */

/* ── GNB 바에 남아 있던 세븐벳 붉은 네비 이미지 제거 ───────────────
   `.gnb_box` 배경은 이미 SEVEN STAR 금색(menu_bg.webp)인데, **자식** `.gnb_menu_box` 가
   `special.css` 에서 세븐벳 판 `navbar.gif`(붉은 바)를 같은 크기로 덮어 그리고 있었다.
   부모 위에 자식이 정확히 겹쳐 그려져서 "에셋은 금색인데 화면은 빨강"이 됐다.
   ⚠️ 원인이 `.gnb_box` 가 아니라 `.gnb_menu_box` 라는 점이 핵심 — 여기를 지워야 금색이 드러난다. */
.gnb_menu_box {
    background: none;
    height: 50px;
    line-height: 50px;
}

/* ── 좌측 스포츠 검색 돋보기 버튼 — 세븐벳 레드 그라데이션 → 금색 ──
   base.css `.sch_sp_btn` / `.sch_sp_btn2` 가 붉은 그라데이션(#741100→#ffb5a8)을 갖고 있었다.
   시안은 금색 알약에 검은 아이콘이다. hover 는 base.css 가 회색으로 덮으므로 함께 맞춘다. */
.sch_sp_btn,
.sch_sp_btn2 {
    background: var(--sb-hdr-grad);
    border: 1px solid #D92A74;
    color: #EEE6EA;
    text-shadow: none;
}
.sch_sp_btn i,
.sch_sp_btn2 i { color: #EEE6EA; }
.sch_sp_btn:hover,
.sch_sp_btn2:hover {
    background-image: linear-gradient(180deg, #D92A74 0%, #B81C5E 55%, #8E1048 100%);
    color: #EEE6EA;
}
.sch_sp_btn:hover i,
.sch_sp_btn2:hover i { color: #EEE6EA; }

/* ── 상단 우측 비로그인 버튼 4종 규격 통일 (PC) ────────────────────
   로그인 / 회원가입 / 무기명회원가입 / 텔레그램문의.
   base.css 가 셋을 제각각 정의해 둔 탓에 넷이 함께 뜨면 어긋났다(실측 1920px):
     · 간격 0px          — 알약 4개가 서로 맞붙는다
     · 높이 34 vs 36     — 로그인만 테두리가 없어 2px 낮다
     · top 42/41/40/38.5 — vertical-align:baseline 에 inline-block/inline-flex 가 섞여 최대 3.5px 어긋남
     · 회원가입 폭 48px  — base.css `.btn_top_join{padding:0!important}` 라 글자가 테두리에 붙는다
   ⚠️ `.btn_top_sos` / `.btn_top_tele` 는 **모바일 게스트 버튼용 `.sos_btn` 클래스를 함께 달고 있어**
      base.css 의 모바일 규칙(inline-flex/flex:1/height:30px)까지 상속한다. 그래서 셋을 따로
      맞추지 말고 네 개를 한 규칙으로 통일한다.
   ⚠️ padding 에 `!important` 가 필요하다 — base.css 쪽이 `!important` 라 명시도만으로는 못 이긴다.
   기명 회원가입이 꺼져 3개만 떠도 같은 규칙이 그대로 적용된다. */
.top_right_box .btn_top_login,
.top_right_box .btn_top_join,
.top_right_box .btn_top_sos,
.top_right_box .btn_top_tele {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;      /* 테두리 유무가 높이를 바꾸지 않게 — 넷 다 34px */
    height: 34px;
    line-height: 1;
    width: auto;                 /* base.css 의 width:100px 고정 해제 */
    min-width: 88px;
    padding: 0 16px !important;
    margin: 0 0 0 8px;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 30px;
    flex: none;                  /* .sos_btn 의 flex:1 무력화 */
    font-size: 13px;
}

/* ── 메인 공지/이벤트 목록: 로고 불릿과 화살표가 안 보이던 문제 ────
   `bbs_col_item > a` 의 `::before`(로고 불릿) / `::after`(› 화살표)를 이 파일에서 정의하는데,
   base.css 의 같은 명시도 규칙이 먼저 `position:absolute` + `transform:scaleY(0)`(좌측 3px 바) 와
   `position:absolute; left:-120%`(하이라이트 스윕)를 걸어 둔다. 뒤에 오는 이 파일이 이기지만
   **선언한 속성만** 덮으므로 position/transform 이 그대로 남아 로고는 높이 0 으로 찌그러지고
   화살표는 화면 밖(left:-120%)에 그려졌다 — 그래서 둘 다 보이지 않았다.
   ⚠️ 배경/내용만 바꾸지 말고 **레이아웃 속성까지 되돌려야** 한다. */
.main_bbs_pair .bbs_col_item > a::before,
.main_bbs_pair .bbs_col_item > a::after {
    position: static;
    left: auto;
    top: auto;
    transform: none;
}
.main_bbs_pair .bbs_col_item > a::before {
    display: block;
    height: 30px;
}

@media screen and (max-width: 767px) {
    /* ── 모바일 게스트 버튼이 4개일 때 2×2 균등 배치 ───────────────
       위쪽 규칙이 3열 고정(33.333%)이라 버튼이 4개면 4번째만 다음 줄에 홀로 떨어져
       3+1 로 어긋나 보인다. 가입정책에서 기명·무기명을 둘 다 켠 경우가 그렇다.
       개수 선택자(`:first-child:nth-last-child(4)`)로 **4개일 때만** 2열로 바꾼다 —
       3개·2개일 때는 기존 한 줄 배치가 그대로 유지된다. */
    .contents_join_box > div:first-child:nth-last-child(4),
    .contents_join_box > div:first-child:nth-last-child(4) ~ div {
        width: calc(50% - 2.5px);
    }
}

/* ── 상단 로고가 GNB 바에 가려지던 문제 ─────────────────────────────
   실측(1920px): 로고 이미지 y 15~107, GNB 바 y 88~138 → **19px 이 바 뒤에 깔렸다.**
   `.logo_gnb` 가 `position:static / z-index:auto` 라, 위치를 잡은 `.gnb_box`(z-index 9989)가
   무조건 위에 그려진 탓이다(로고를 92px 로 키운 뒤 생긴 부작용).

   시안 좌표(SEVEN BET.dc.html):
     · TOP INFO BAR  top 15px, height 65
     · 로고 박스     top -8px(=절대 7px), height 74, align-items:center, **z-index:2**
     · 로고 이미지   height 92px  →  절대 y -2 ~ 90
     · GNB 바        top 88px
   즉 시안은 로고가 바와 **2px 만** 겹치고, 그 2px 도 로고가 **위**로 그려진다.
   현재는 15px 에서 시작해 19px 이 겹치고 게다가 아래로 깔린다 → 17px 올리고 바 위로 올린다.
   ⚠️ z-index 는 9989(gnb_box)보다 크고 9998(팝업 blind)보다 작아야 한다 —
      더 키우면 로고가 팝업 위로 튀어나온다.

   ⚠️⚠️ **`top:-17px` 는 PC 전용이다 — 미디어쿼리 없이 두면 모바일에서 로고가 잘린다.**
      모바일은 GNB 바 자체가 없고(`min.css` 가 `.gnb_box{display:none}`) 헤더가 50px 바에
      로고 46px 이라, PC 기준으로 계산한 17px 을 그대로 빼면 로고 윗부분이 화면 밖으로 나간다
      (2026-08-31 실사례). 위로 올리는 보정은 **가려질 GNB 바가 있는 PC 에만** 적용한다.
      z-index 는 모바일에서도 무해하므로(가릴 바가 없다) 공통으로 둔다. */
.logo_gnb {
    position: relative;
    z-index: 9990;
}
@media screen and (min-width: 768px) {
    .logo_gnb { top: -17px; }
}

/* ── 메인 공지/이벤트 행 높이 · 우측 화살표 수직 중앙 ───────────────
   실측: 행이 66px 이었다. `.bbs_col_item > a` 에 `height:41px` 이 있지만 **content-box** 라
   base.css 의 `padding:12px 10px` 24px + 하단 보더 1px 이 그대로 더해진 값이다(41+24+1=66).
   시안 행은 41px 이므로 `box-sizing:border-box` 로 바꿔 패딩·보더를 높이 안에 넣는다.

   우측 `›`(::after)는 line-height 16.8px 짜리 글리프가 41px 상자 안에서 위로 붙어 있었다.
   `align-self:center` + `height:auto` + `line-height:1` 로 수직 중앙에 놓는다.
   `margin-left:auto` 는 오른쪽 끝으로 미는 용도라 여기서 다시 못 박아 둔다.

   원본 화살표 span(`.main_list_arr`, fa-arrow-right)은 공지에만 있고 시안에는 없다.
   `›` 와 겹쳐 보이지 않도록 `!important` 로 확실히 감춘다(원본 `<img>` 불릿도 동일). */
.main_bbs_pair .bbs_col_item > a {
    box-sizing: border-box;
    height: 41px;
    padding: 0 10px;
    align-items: center;
}
.main_bbs_pair .bbs_col_item > a::after {
    align-self: center;
    height: auto;
    line-height: 1;
    margin-left: auto;
}
.main_bbs_pair .bbs_col_item > a > img,
.main_bbs_pair .bbs_col_item > a .main_list_arr {
    display: none !important;
}

/* ── 입력 포커스 링 — 세븐벳 레드 → SEVEN STAR 금색 ─────────────────
   base.css 의 전역 규칙(`input:focus, select:focus, textarea:focus`)이
   `border-color:#c8513c` + 붉은 3중 글로우(rgba(255,51,17,...))다.
   로그인/회원가입 모달뿐 아니라 검색·문의 등 **모든 입력창**에 걸리므로 전역으로 뒤집는다.
   글로우 반경/투명도는 원본 그대로 두고 색만 금색으로 바꾼다. */
input:focus,
select:focus,
textarea:focus {
    border-color: #F0408A;
    box-shadow:
        0 0 0 3px rgba(240, 64, 138, .15),
        0 0 15px rgba(240, 64, 138, .35),
        0 0 30px rgba(240, 64, 138, .15);
}

/* ── 베팅 슬립 '초기화' 아이콘 ──────────────────────────────────
   원본은 FontAwesome `fas fa-undo-alt`(굵은 화살표 원형) 인데,
   시안은 FontAwesome 을 쓰지 않고 **텍스트 글리프 ↺(U+21BA)** 를 금색 16px 로 찍는다:
     <span style="color:var(--accent,#F0408A); font-size:16px; cursor:pointer;">↺</span>
   클래스/마크업은 원본 그대로 두고(다른 코드가 `.reset_money` 를 참조한다) 글리프만 바꾼다.
   ⚠️ `font-family` 를 되돌리지 않으면 FontAwesome 폰트로 ↺ 를 찾다가 네모(tofu)가 뜬다. */
.bc_money .reset_money {
    font-family: inherit;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: var(--sb-gold);
    cursor: pointer;
}
.bc_money .reset_money::before {
    content: '\21BA';
}

/* ── 베팅 금액 입력창이 초기화(↺) 아이콘에 붙어 있던 문제 (PC) ────────
   실측: ↺ 의 오른쪽 끝과 입력창 왼쪽이 **간격 0px** 이었다.
   base.css `.money_box input { width:150px }` 에 여백 지정이 없어서다.
   시안은 같은 줄을 `gap:4.2px` 로 띄우고 입력창을 조금 좁게 둔다.
   입력창을 줄이고 왼쪽 여백을 줘서 ↺ 와 떨어뜨린다(오른쪽 정렬은 그대로 유지). */
.bc_money .money_box input.bet_money {
    width: 132px;
    margin-left: 8px;
}

/* ── 베팅카트 '총 배당' · '총 당첨금' 숫자 금색 ─────────────────────
   두 값 모두 흰색(#fff)이라 나머지 정보 줄과 구분이 되지 않았다.
   시안은 결과값(배당/당첨금)만 금색으로 강조한다.
   ⚠️ 아래 '최대 베팅금액/당첨금액'(.bc_max_bet 등)은 **흰색 그대로 둔다** — 한도 안내라
      강조 대상이 아니고, 함께 금색으로 바꾸면 결과값과 구분이 사라진다. */
.bc_info_box .bc_total_ratio,
.bc_info_box .bc_get_money {
    color: var(--sb-gold);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   PONY 시안 보정 — `PONY.dc.html`(PC 1920) / `PONY Mobile.dc.html`(360)

   ⚠️ 이 절이 **최종값**이다(파일 맨 끝 = 가장 늦게 로드). 위쪽은 세븐스타 규칙을 색만 바꿔 물려받은 것이고,
      PONY 시안이 세븐스타와 **모양이 다른 곳**만 여기서 덮는다. 수치는 전부 시안 인라인 스타일 그대로다.
   팔레트: rose #F0408A · wine #8E1048 · burgundy #D92A74 · 테두리 #D92A74 · 본문 #EEE6EA
   ═══════════════════════════════════════════════════════════════════ */

/* ── 상단 로고 — 시안 62px, 글로우 없이 그림자만 ─────────────────────
   세븐스타는 92px 로고를 GNB 바 위로 넘기려고 `top:-17px` 를 줬다. PONY 로고(62px)는
   65px 바 안에 들어가 GNB(top 88px)와 겹치지 않으므로 끌어올리지 않는다. */
.logo_gnb a img {
    height: 62px;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .85));
}
@media screen and (min-width: 768px) {
    .logo_gnb { top: 0; }
}

/* ── 상단 링크 hover — 시안 color:#F0408A ─────────────────────── */
.top_right_box a:hover,
.top_right_box .tel_btn:hover,
.top_right_box .kakao_btn:hover {
    color: #F0408A;
    text-shadow: none;
}
/* 시안 아이콘: 충전·환전 = 로즈 마스크, 나머지 = 밝은 회색 톤 */
.top_right_box .ss-ico { background: #EEE6EA; }
.top_right_box .ss-ico.ss-ico-rose { background: #F0408A; }
.top_right_box a:hover .ss-ico { background: #F0408A; }

/* 상단 알약 4종 — 시안은 radius 3px 의 각진 버튼이다(세븐스타는 999px 알약) */
.top_right_box .btn_top_login,
.top_right_box .btn_top_join,
.top_right_box .btn_top_sos,
.top_right_box .btn_top_tele {
    border-radius: 3px;
    padding: 0 22px !important;
}
.top_right_box .btn_top_join:hover,
.top_right_box .btn_top_sos:hover,
.top_right_box .btn_top_tele:hover { color: #EEE6EA; }

/* ── GNB 바 — 메뉴 글자 15px bold (시안 gnbStyle) ───────────────── */
.gnb_menu_box a,
.gnb_menu_box span {
    font-size: 15px;
    font-weight: 700;
    color: #EEE6EA;
}

/* ── 좌측 사이드바 (시안 패널 #151213 / 그리드 갭 #302A2D) ───────── */
.snb_left { background: #151213; }
.snb_left > ul { background: #302A2D; }
.snb_left ul li a,
.snb_left ul li span.mg_link {
    background: linear-gradient(180deg, #251F22, #0C0A0B);
    box-shadow: inset 0 4px 5px rgba(0, 0, 0, .4);
    color: #EEE6EA;
}
.snb_left ul li a.btn_gray {
    background: var(--sb-btn-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* 스포츠 검색 입력창 — 시안 #110E10 + 안쪽 그림자 */
.snb_left .sch_sp_box input,
.snb_left .sch_sp_box2 input {
    background: #110E10;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, .8), inset -1px -1px 0 rgba(191, 193, 196, .18);
    border: 0;
    color: #EEE6EA;
}
/* 돋보기 버튼 — 시안 32x32, #F0408A→#D92A74, 테두리 #D92A74, 흰 아이콘 */
.sch_sp_btn,
.sch_sp_btn2 {
    background: linear-gradient(180deg, #F0408A, #D92A74);
    border: 1px solid #D92A74;
    border-radius: 3px;
}

/* 좌측 제목바(인기 스포츠 리스트 SPORTS · 최신 인기게임 HOT) — 시안 39px, 아이콘 없음 */
.left_ttl {
    height: 39px;
    border-top: 1px solid #D92A74;
    border-radius: 3px 3px 0 0;
    font-size: 16px;
    font-weight: 700;
    color: #EEE6EA;
    text-shadow: none;
}
.left_ttl img { display: none; }
.left_ttl .left_ttl_sub {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #FDE8F1;
}

/* 인기 스포츠 행 — 시안 39px, hover 시 왼쪽에서 버건디가 밀려 들어오고 3px 로즈 바 */
.snb_sp_box .btn_snb_sp {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #151213 96%, #000 100%);
    border-bottom: 1px solid #110E10;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.snb_sp_box .btn_snb_sp::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(217, 42, 116, .75) 0%, rgba(217, 42, 116, .25) 55%, rgba(217, 42, 116, 0) 100%);
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.2, 0, 0, 1);
    pointer-events: none;
}
.snb_sp_box .btn_snb_sp::after {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: linear-gradient(180deg, #F0408A, #8E1048);
    transform: scaleY(0);
    transition: transform .25s cubic-bezier(.2, 0, 0, 1) .05s;
    pointer-events: none;
}
.snb_sp_box .btn_snb_sp:hover::before { transform: translateX(0); }
.snb_sp_box .btn_snb_sp:hover::after { transform: scaleY(1); }
.snb_sp_box .snb_sp_cnt {
    position: relative;
    color: #F0408A;
    font-weight: 700;
    border-radius: 10px;
    transition: background .2s, color .2s, box-shadow .2s;
}
.snb_sp_box .btn_snb_sp:hover .snb_sp_cnt {
    background: #D92A74;
    color: #EEE6EA;
    box-shadow: inset 0 0 0 1px #D92A74;
}

/* ── 중앙: 히어로 — 시안 1px #B8C2C8, radius 3 ───────────────────── */
.mb_pc_box .mb_box {
    border: 1px solid #B8C2C8;
    border-radius: 3px;
    background: #110E10;
}

/* ── 중앙: 퀵타일 4칸 (`home-game-slider.tsx` → `.pp_quick`) ─────
   시안: 히어로 아래 높이 97(위 1px 여백 + 타일 86px), gap 12, 각 flex:1. */
.pp_quick {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding-top: 9px;
    margin-bottom: 10px;
}
.pp_quick_tile {
    position: relative;
    overflow: hidden;
    flex: 1;
    height: 86px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(180deg, #251F22, #0F0C0D);
    border: 1px solid #302A2D;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s cubic-bezier(.2, 0, 0, 1), box-shadow .2s ease;
}
.pp_quick_tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 120% at 30% 50%, rgba(217, 42, 116, .45) 0%, rgba(217, 42, 116, .15) 55%, rgba(217, 42, 116, 0) 100%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.pp_quick_tile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(217, 42, 116, 0), #F0408A, rgba(217, 42, 116, 0));
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(.2, 0, 0, 1);
}
.pp_quick_ico {
    position: relative;
    width: 50px;
    height: 50px;
    object-fit: contain;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), filter .2s ease;
}
.pp_quick_label {
    position: relative;
    font-size: 15px;
    font-weight: 700;
    color: #EEE6EA;
    transition: transform .25s cubic-bezier(.2, 0, 0, 1), color .2s ease;
}
.pp_quick_arrow {
    position: relative;
    font-size: 16px;
    color: #F0408A;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, 0, 0, 1);
}
.pp_quick_tile:hover {
    border-color: #D92A74;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(217, 42, 116, .25);
}
.pp_quick_tile:hover::before { opacity: 1; }
.pp_quick_tile:hover::after { transform: scaleX(1); }
.pp_quick_tile:hover .pp_quick_ico { transform: scale(1.14) rotate(-6deg); filter: drop-shadow(0 0 10px rgba(240, 64, 138, .55)); }
.pp_quick_tile:hover .pp_quick_label { transform: translateX(4px); color: #fff; }
.pp_quick_tile:hover .pp_quick_arrow { opacity: 1; transform: translateX(0); }
.pp_quick_tile:active { transform: translateY(-1px) scale(.985); }

/* ── 중앙: 프로모 가로형 2칸 (`home-game-buttons.tsx`) ─────────────
   시안: 각 flex:1 × 320px, gap 12, 1px #B8C2C8, radius 3. 왼쪽에 텍스트 블록(left 40px, 세로 가운데). */
.main_middle_box {
    gap: 12px;
    margin-bottom: 10px;
}
.main_middle_box > a {
    height: 320px;
    border: 1px solid #B8C2C8;
    border-radius: 3px;
    background-color: #110E10;
    transition: border-color .3s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2, 0, 0, 1);
}
.main_middle_box > a > img {
    object-position: center center;
    transform-origin: 100% 50%;
    transition: transform 1.1s cubic-bezier(.2, 0, 0, 1), filter .6s ease;
}
.main_middle_box > a:hover {
    border-color: #D92A74;
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(217, 42, 116, .35), 0 0 40px rgba(217, 42, 116, .2);
}
.main_middle_box > a:hover > img { transform: scale(1.06); filter: brightness(1.08) saturate(1.1); }

/* 텍스트 블록 + 왼쪽→오른쪽으로 걷히는 어둠 (시안 px-promo-ov / px-promo-txt) */
.main_middle_box a span.hoverb {
    position: absolute;
    inset: 0;
    top: 0;
    bottom: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 0 0 0 40px;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(24, 12, 18, .92) 0%, rgba(24, 12, 18, .55) 45%, rgba(24, 12, 18, 0) 75%);
    opacity: 1;
    transition: transform .5s cubic-bezier(.2, 0, 0, 1);
}
.main_middle_box > a:hover span.hoverb { transform: translateX(8px); }

.main_middle_box a span.mmb_in_en {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #B8C2C8;
    transition: letter-spacing .5s cubic-bezier(.2, 0, 0, 1), color .3s;
}
.main_middle_box > a:hover span.mmb_in_en { letter-spacing: 7px; color: #F0408A; }
/* 세븐스타는 제목·부제를 숨겼다(이미지에 인쇄돼 있어서). PONY 사진에는 글자가 없으므로 되살린다. */
.main_middle_box a span.mmb_in_ttl {
    display: block;
    font-size: 44px;
    font-weight: 800;
    color: #EEE6EA;
    line-height: 1.1;
    text-shadow: none;
    white-space: nowrap;
    margin: 0;
}
.main_middle_box a span.mmb_in_sub {
    display: block;
    font-size: 15px;
    color: #B8C2C8;
    text-align: left;
    padding: 0;
    margin: 0 0 22px;
    text-shadow: none;
    white-space: nowrap;
}
/* '게임 시작 ›' 버튼 — 시안 200x46, 버건디, 좌우 패딩 22/18. 세븐 이미지 버튼 규칙을 전부 되돌린다. */
.main_middle_box a span.mmb_in_btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    height: 46px;
    aspect-ratio: auto;
    padding: 0 18px 0 22px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 700;
    color: #EEE6EA;
    text-indent: 0;
    background: var(--sb-btn-grad);
    border: 1px solid #D92A74;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .6);
    filter: none;
    margin: 0;
    transition: transform .2s cubic-bezier(.2, 0, 0, 1), box-shadow .3s ease, border-color .2s;
}
.main_middle_box a span.mmb_in_btn .mmb_in_arr { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.main_middle_box > a:hover span.mmb_in_btn {
    transform: translateY(-2px);
    border-color: #F0408A;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px rgba(217, 42, 116, .45), 0 0 0 3px rgba(217, 42, 116, .18);
    filter: none;
}
.main_middle_box > a:hover span.mmb_in_btn .mmb_in_arr { transform: translateX(5px); }

/* 빛줄기는 시안에 한 줄(`.sb-shine`, 폭 14%)이다 — 번지는 보조 빛(::before)은 끈다 */
.main_middle_box > a::before { display: none; }
.main_middle_box > a::after {
    width: 14%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(238, 230, 234, .08) 38%, rgba(238, 230, 234, .4) 50%, rgba(238, 230, 234, .08) 62%, rgba(255, 255, 255, 0) 100%);
}

/* ── 중앙: 공지/규정 · 이벤트 ─────────────────────────────────────
   시안: 47px 바(burgundy-metal, 위 1px #D92A74) · 제목 17px · 영문 11px #FDE8F1 · '더보기 +' 12px
         행 41px [배지 44x22] [제목 14px] [› #B8C2C8], hover 시 왼쪽 버건디 그라데이션. */
.main_pair_gap,
.main_bbs_pair { gap: 12px; }
.main_bbs_pair .bbs_col_head {
    border-radius: 3px 3px 0 0;
    border-top: 1px solid #D92A74;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.main_bbs_pair .bbs_col_head .main_bbs_ttl {
    font-size: 17px;
    font-weight: 700;
    color: #EEE6EA;
}
.main_bbs_pair .bbs_col_head .main_bbs_ttl i { display: none; }
.main_bbs_pair .bbs_col_head .main_bbs_sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #FDE8F1;
}
.main_bbs_pair .bbs_col_head .bbs_more {
    font-size: 12px;
    font-weight: 600;
    color: #EEE6EA;
}
.main_bbs_pair .bbs_col_head .bbs_more:hover { color: #fff; }

.main_bbs_pair .bbs_col_item > a {
    gap: 14px;
    padding: 0 12px 1px;
    background: linear-gradient(180deg, #151213 96%, #000 100%);
    border-bottom: 1px solid #000;
    box-shadow: none;
}
.main_bbs_pair .bbs_col_item > a:hover {
    background: linear-gradient(90deg, rgba(217, 42, 116, .55), #151213);
}
/* 세븐스타의 로고 불릿(::before)은 PONY 에 없다 — 배지(.bbs_head)가 그 자리를 대신한다 */
.main_bbs_pair .bbs_col_item > a::before { display: none; }
.main_bbs_pair .bbs_col_item > a .bbs_head {
    width: 44px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D92A74;
    border: 1px solid #D92A74;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #EEE6EA;
    margin: 0;
}
.main_bbs_pair .bbs_col_item > a .bbs_subj {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #EEE6EA;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main_bbs_pair .bbs_col_item > a::after { color: #B8C2C8; }

/* ── 우측: 베팅슬립 — 시안 패널 #151213, '배팅하기' 버건디 + 숨쉬기 글로우 ── */
.side_right,
.bet_slip { background: #151213; }
.btn_bet {
    background: var(--sb-btn-grad);
    border: 1px solid #D92A74;
    border-radius: 3px;
    color: #EEE6EA;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .6);
    animation: pp_breath 2.8s ease-in-out infinite;
}
.btn_bet:hover { background: var(--sb-btn-grad); color: #fff; animation: none; filter: brightness(1.12); }
@keyframes pp_breath {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 0 rgba(217, 42, 116, 0); }
    50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .6), 0 0 18px 0 rgba(217, 42, 116, .45); }
}
.bet_cart .money_btn_box a,
.bet_cart .money_btn_box span {
    background: linear-gradient(180deg, #302A2D, #0F0C0D);
    border: 1px solid #000;
}
.bet_cart .money_btn_box a:hover,
.bet_cart .money_btn_box span:hover {
    background: linear-gradient(180deg, #B81C5E, #8E1048);
    border-color: #D92A74;
}

/* 우측 사이드 배너 — 시안 296x74, hover 시 왼쪽으로 3px 밀리며 밝아진다 */
.side_right .banner_box img {
    transition: transform .25s cubic-bezier(.2, 0, 0, 1), box-shadow .25s ease, filter .2s;
}
.side_right .banner_box a:hover img {
    transform: translateX(-3px);
    filter: brightness(1.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .6), 0 0 0 1px #D92A74;
}

/* ── 스크롤바 — 시안 8px, 버건디 엄지 ───────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #B8C2C8; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    .btn_bet { animation: none; }
    .pp_quick_tile,
    .main_middle_box > a,
    .main_middle_box > a > img { transition: none; }
}

/* ── 모바일 (≤767px) — `PONY Mobile.dc.html` ─────────────────────── */
@media screen and (max-width: 767px) {
    .logo_gnb a img { height: 46px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .85)); }
    .pp_quick { display: none; }

    /* 게스트 버튼 — 시안: 로그인 = 버건디, 무기명가입·텔레그램 = 회색 테두리 반투명 검정 (radius 3) */
    .contents_join_box .login_btn,
    .contents_join_box .join_btn,
    .contents_join_box .sos_btn,
    .contents_join_box .black_btn {
        background: rgba(16, 12, 14, .7);
        border: 1px solid #B8C2C8;
        border-radius: 3px;
        color: #EEE6EA;
    }
    .contents_join_box .login_btn {
        background: var(--sb-btn-grad);
        border-color: #D92A74;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .6);
    }
    .contents_join_box .btn_text { color: #EEE6EA; }

    /* 메뉴 타일 — 시안 88px, #251F22→#0F0C0D, 1px #302A2D, radius 3 */
    .menumobile .card {
        border-radius: 3px;
        border: 1px solid #302A2D;
        background: linear-gradient(180deg, #251F22, #0F0C0D);
    }
    .menumobile .card .title { color: #EEE6EA; }
}

/* ── 모바일 메뉴 타일: 작은 3열 + 넓은 2칸(충전·환전) ───────────────
   시안(`PONY Mobile.dc.html` mainTiles)은 6열 그리드에 작은 타일 span 2 / 넓은 타일 span 3 이다.
   base.css 의 3열(repeat(3,1fr))을 6열로 바꾸고 칸 폭을 span 으로 맞춘다. */
@media screen and (max-width: 767px) {
    .menumobile { grid-template-columns: repeat(6, 1fr); }
    .menumobile .card { grid-column: span 2; }
    .menumobile .card.card_wide { grid-column: span 3; }
}

/* 공식 텔레그램 배너 버튼(`chrome/side-banners.tsx`) — 키보드 접근용 <button> 의 기본 모양을 걷어내 다른 배너와 같게 */
.pp_bn_btn {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
}
.pp_bn_btn:focus-visible { outline: 2px solid #F0408A; outline-offset: 2px; }

/* ── 충전·환전(USDT) 화면 (2026-10-17) ──
   ① 상단 탭: 원본은 현재 탭(.on)과 나머지가 같은 회색이라 지금 어느 화면인지 안 보였다 → 현재 탭만 로즈 버튼으로.
   ② [충전신청]/[USDT 출금신청]: 회색 금속 버튼이라 화면의 주 동작이 눈에 띄지 않았다 → 같은 로즈 버튼으로.
      (#soilBonusApplyBtn = recharge-usdt.tsx, #chkBtnOk = exchange-usdt.tsx 의 신청 버튼) */
.tab_box_big a.on,
.tab_box_big a.on:hover,
#soilBonusApplyBtn,
#chkBtnOk {
    background: var(--sb-btn-grad);
    border: 1px solid #D92A74;
    color: #EEE6EA;
    font-weight: 700;
}
#soilBonusApplyBtn:hover,
#chkBtnOk:hover {
    filter: brightness(1.12);
}

/* ── 독립 로그인 화면(`/login`, 비로그인 첫 화면) ─────────────────
   메인 위에 뜨는 모달이 아니라 화면 자체라 딤을 빼고 body 배경(버건디 글로우)에 바로 그린다.
   ⚠️ fixed + overflow — 작은 화면에서 카드가 잘려도 스크롤로 닿아야 로그인할 수 있다.
      min.css `.pop_login{height:120%}` 를 이기려고 클래스 2개로 건다. */
.pop_login.pop_login_page {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    background: transparent;
    overflow-y: auto;
}
.pop_login_page .pop_login_box {
    margin: clamp(24px, 12vh, 140px) auto 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   핑크팬더 시안 보정 — `PinkPanther-PC.dc.html`(PC 1920) / `PinkPanther-Mobile.dc.html`(모바일)

   ⚠️ 이 절이 **최종값**이다(파일 맨 끝 = 가장 늦게 로드). 위쪽은 포니 규칙을 색만 핑크로 바꿔 물려받은 것이고,
      핑크팬더 시안이 포니와 **모양이 다른 곳**만 여기서 덮는다. 수치는 시안 인라인 스타일 그대로다.
   팔레트: 핑크 #F0408A · 마젠타 #D92A74 · 짙은 #B81C5E · 딥 #8E1048 · 본문 #EEE6EA · 은색 #B8C2C8/#D6DDE1
   ═══════════════════════════════════════════════════════════════════ */

/* ── 페이지 배경 — 시안: radial(70% 40% at 50% 0%, rgba(217,42,116,.28)) + #141112→#0C0A0B ── */
body {
    background-color: #0C0A0B;
    background-image: radial-gradient(70% 40% at 50% 0%, rgba(217, 42, 116, .28) 0%, rgba(217, 42, 116, 0) 100%), linear-gradient(180deg, #141112 0%, #0C0A0B 100%);
}

/* ── 상단 로고 — 시안 height 76px, 85px 박스 안 세로 가운데(top -12) ───────── */
.logo_gnb a img {
    height: 76px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}
@media screen and (min-width: 768px) {
    .logo_gnb { top: -6px; }
}
/* 로고 조회 전 자리 — 폴백 로고조차 그리지 않고 같은 크기만 잡는다(연동 문서 §2.2.1) */
.pp_logo_ph {
    display: inline-block;
    width: 196px;     /* 로고 600x233 비율 × 76px */
    height: 76px;
    vertical-align: middle;
}

/* ── 상단 링크 — 시안 13px, 아이콘 16px 밝은 회색, hover 핑크 ───────────── */
.top_right_box .mg_link { font-size: 13px; }
.top_right_box .ss-ico { background: #EEE6EA; opacity: .85; }
.top_right_box a:hover { color: #D92A74; }
.top_right_box a:hover .ss-ico { background: #D92A74; opacity: 1; }
/* HOT 배지 — 시안: 글자 위로 띄운 빨간 15px 라벨(#E0102F) */
.top_right_box .pp_top_hot { position: relative; }
.top_right_box .pp_top_hot .pp_hot {
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translateX(-50%);
    height: 15px;
    line-height: 15px;
    padding: 0 4px;
    margin: 0;
    background: #E0102F;
    border-radius: 1px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-shadow: none;
}

/* 상단 버튼 — 로그인 = 핑크 그라데이션 / 무기명가입·텔레그램·로그아웃 = 은색 테두리 + 어두운 그라데이션 */
.top_right_box .btn_top_login {
    background: var(--sb-btn-grad);
    border: 1px solid #B81C5E;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .2);
}
.top_right_box .btn_top_join,
.top_right_box .btn_top_sos,
.top_right_box .btn_top_tele,
.top_right_box .btn_top_logout {
    background: linear-gradient(180deg, #251F22, #0F0C0D);
    border: 1px solid #B8C2C8;
    color: #EEE6EA;
}
.top_right_box .btn_top_join:hover,
.top_right_box .btn_top_sos:hover,
.top_right_box .btn_top_tele:hover,
.top_right_box .btn_top_logout:hover {
    background: rgba(240, 64, 138, .16);
    border-color: #D92A74;
    color: #EEE6EA;
}

/* ── GNB 바 — 시안: `menu_bg3_green.gif` 에 hue-rotate(178deg) saturate(1.15) 필터 + 위아래 은색 선 ──
   ⚠️ 필터는 배경에만 걸어야 해서(메뉴 글자까지 색이 돌면 안 된다) 의사 요소에 이미지를 깐다. */
.gnb_box {
    background: #0C0A0B;
    overflow: visible;
}
.gnb_box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(/static/pp/menu_bg.webp) center/100% 100% no-repeat;
    filter: hue-rotate(178deg) saturate(1.15);
    pointer-events: none;
}
.gnb_box::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(214, 221, 225, 0), #D6DDE1 20%, #FFFFFF 50%, #D6DDE1 80%, rgba(214, 221, 225, 0)) top/100% 1px no-repeat,
        linear-gradient(90deg, rgba(184, 194, 200, 0), #B8C2C8 20%, #EEF1F3 50%, #B8C2C8 80%, rgba(184, 194, 200, 0)) bottom/100% 1px no-repeat;
}
.gnb_menu_box { position: relative; z-index: 1; }
.gnb_menu_box a,
.gnb_menu_box span { color: #FFFFFF; }
.gnb_menu_box li a { position: relative; }
.gnb_menu_box a:hover {
    color: #FDE8F1 !important;
    text-shadow: 0 0 10px rgba(240, 64, 138, .9);
}
/* NEW 배지 — 시안: 글자 위 24px 알약(#B0185E→#3D0620), 흰 11.5px */
.gnb_menu_box .pp_new {
    position: absolute;
    left: 50%;
    top: -16px;
    transform: translateX(-50%);
    height: 24px;
    line-height: 22px;
    padding: 0 15px;
    border-radius: 12px;
    background: linear-gradient(180deg, #B0185E 0%, #6E0C38 55%, #3D0620 100%);
    border: 1px solid rgba(255, 214, 232, .45);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
    font-size: 11.5px;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    letter-spacing: .5px;
    white-space: nowrap;
    z-index: 5;
}

/* ── 좌측 사이드바 — 시안 패널 #151213, 그리드 갭 #302A2D, 15칸 3열 ───────── */
.snb_left { background: #151213; border-right: 1px solid #241F21; }
.snb_left > ul { background: #302A2D; }
.snb_left ul li a,
.snb_left ul li span.mg_link {
    background: linear-gradient(180deg, #251F22, #0F0C0D);
    box-shadow: inset 0 4px 5px rgba(0, 0, 0, .4);
    color: #EEE6EA;
}
.snb_left ul li a:hover,
.snb_left ul li span.mg_link:hover {
    box-shadow: inset 0 0 0 1px rgba(240, 64, 138, .55), inset 0 -2px 0 #F0408A;
}
/* 상단 3칸(충전·환전·문의) — 시안: 검정 바탕 위 핑크로 물들인 루프 GIF(bt-ro) + 흰 굵은 글자.
   ⚠️ 필터를 배경에만 걸려고 의사 요소에 깐다(글자까지 필터가 먹으면 안 된다). */
.snb_left ul li a.btn_gray {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0C0508;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(240, 64, 138, .6);
    box-shadow: none;
}
.snb_left ul li a.btn_gray::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(/static/pp/bt-ro.webp) center/100% 100% no-repeat;
    filter: sepia(.75) saturate(3) hue-rotate(295deg) brightness(1.3);
}
.snb_left ul li a.btn_gray i { display: none; }   /* 시안 버튼에는 아이콘이 없다 */
@media screen and (min-width: 768px) {
    .snb_left ul li a.btn_gray { height: 46px; line-height: 46px; }
}

/* ── 배팅카트 자리 — PC 는 좌측 그리드 아래(.pp_cart_pc), 모바일은 우측 드로어(.pp_cart_m) ── */
.pp_cart_pc { width: 298px; margin-top: 6px; }
.pp_cart_pc .bet_cart { display: block; background: #151213; }
@media screen and (min-width: 768px) {
    .pp_cart_m { display: none; }
}
@media screen and (max-width: 767px) {
    .pp_cart_pc { display: none; }
}

/* ── 우측 패널 — 시안 바탕 #0C0A0B, 배너 294x98 ─────────────────────── */
.side_right,
.bet_slip { background: #0C0A0B; }
.side_right .banner_box img { border-radius: 2px; }
.side_right .banner_box a:hover img,
.side_right .banner_box .pp_bn_btn:hover img {
    transform: translateX(-3px);
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2), 0 0 0 1px #D92A74;
}

/* ── 중앙: 히어로 — 시안 1px #B8C2C8, radius 3 / 조회 전 자리 ───────── */
.mb_pc_box .mb_box { border-color: #B8C2C8; background: #110E10; }

/* ── 중앙: 퀵타일 9칸 — 시안: 세로 배치(아이콘 52 위 · 라벨 13 아래), gap 8 ── */
.pp_quick { gap: 8px; }
.pp_quick_tile {
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    background: linear-gradient(180deg, #251F22, #0F0C0D);
    border: 1px solid #302A2D;
}
.pp_quick_tile::before {
    background: radial-gradient(60% 120% at 30% 50%, rgba(240, 64, 138, .16) 0%, rgba(240, 64, 138, .05) 55%, rgba(240, 64, 138, 0) 100%);
}
.pp_quick_tile::after {
    background: linear-gradient(90deg, rgba(240, 64, 138, 0), #F0408A, rgba(240, 64, 138, 0));
}
.pp_quick_ico_box {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp_quick_ico {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
.pp_quick_label {
    font-size: 13px;
    font-weight: 700;
    color: #EEE6EA;
    white-space: nowrap;
}
.pp_quick_tile:hover {
    border-color: #D92A74;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12), 0 0 0 1px rgba(217, 42, 116, .25);
}
.pp_quick_tile:hover .pp_quick_ico { filter: drop-shadow(0 0 8px rgba(240, 64, 138, .45)); }
.pp_quick_tile:hover .pp_quick_label { color: #F0408A; }

/* ── 중앙: 공지/규정 · 이벤트 — 시안 행 #151213 / 구분선 #241F21 / 배지 #D92A74 ── */
.main_bbs_pair .bbs_col_head { border-top: 1px solid #D6DDE1; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.main_bbs_pair .bbs_col_head .main_bbs_ttl { color: #FFFFFF; }
.main_bbs_pair .bbs_col_head .bbs_more { color: #FFFFFF; }
.main_bbs_pair .bbs_col_head .bbs_more:hover { color: #FDE8F1; text-decoration: underline; }
.main_bbs_pair .bbs_col_item > a {
    background: #151213;
    border-bottom: 1px solid #241F21;
}
.main_bbs_pair .bbs_col_item > a:hover { background: linear-gradient(90deg, rgba(240, 64, 138, .22), #151213); }
.main_bbs_pair .bbs_col_item > a .bbs_head {
    background: #D92A74;
    border: 1px solid #B81C5E;
    color: #FFFFFF;
}
.main_bbs_pair .bbs_col_item > a .bbs_subj { color: #EEE6EA; }
.main_bbs_pair .bbs_col_item > a::after { color: #8F9CA3; }

/* ── 중앙: 프로모(카지노·슬롯) — 시안 테두리 #B8C2C8 · GmarketSans 제목 · 은색 부제 ── */
@font-face {
    font-family: 'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
.main_middle_box > a { border-color: #B8C2C8; background-color: #110E10; }
.main_middle_box > a:hover {
    border-color: #D92A74;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25), 0 0 0 1px rgba(217, 42, 116, .35), 0 0 40px rgba(240, 64, 138, .18);
}
.main_middle_box a span.mmb_in_en,
.main_middle_box a span.mmb_in_ttl,
.main_middle_box a span.mmb_in_sub { font-family: 'GmarketSans', sans-serif; }
.main_middle_box a span.mmb_in_en { color: #D6DDE1; }
.main_middle_box > a:hover span.mmb_in_en { color: #F0408A; }
.main_middle_box a span.mmb_in_ttl { color: #FFFFFF; font-weight: 700; }
.main_middle_box a span.mmb_in_sub { color: #D6DDE1; font-weight: 700; }
.main_middle_box a span.mmb_in_btn {
    color: #FFFFFF;
    border-color: #B81C5E;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .35);
}
.main_middle_box > a::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(214, 221, 225, .08) 38%, rgba(214, 221, 225, .4) 50%, rgba(214, 221, 225, .08) 62%, rgba(255, 255, 255, 0) 100%);
}

/* ── 배팅하기 / 금액 버튼 — 시안: 핑크 버튼 + 숨쉬기 글로우 / 금액 버튼 어두운 그라데이션 ── */
.btn_bet { border-color: #B81C5E; color: #FFFFFF; }
.bet_cart .money_btn_box a,
.bet_cart .money_btn_box span {
    background: linear-gradient(180deg, #251F22, #0F0C0D);
    border: 1px solid #302A2D;
    color: #EEE6EA;
}
.bet_cart .money_btn_box a:hover,
.bet_cart .money_btn_box span:hover {
    background: linear-gradient(180deg, #F0408A, #8E1048);
    border-color: #B81C5E;
    color: #FFFFFF;
}

/* ── 스크롤바 — 시안 8px, 은색 엄지 ─────────────────────────────── */
::-webkit-scrollbar-thumb { background: #B8C2C8; border-radius: 4px; }

/* ── 모바일 (≤767px) — `PinkPanther-Mobile.dc.html` ─────────────────── */
@media screen and (max-width: 767px) {
    .logo_gnb a img { height: 44px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
    .pp_logo_ph { width: 113px; height: 44px; }

    /* 히어로 — 시안 aspect 629/270, 1px #B8C2C8. 조회 전에도 같은 높이를 잡아 배너 도착 시 페이지가 밀리지 않게 한다 */
    .main_btn_box2 .mobile-slider {
        aspect-ratio: 629 / 270;
        border: 1px solid #B8C2C8;
        border-radius: 3px;
        overflow: hidden;
        background: #110E10;
    }
    .main_btn_box2 .mobile-slider .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        display: block;
    }

    /* 메뉴 타일 9칸 — 시안: 3열, radius 8, 테두리 #6B4A58, 방사형 바탕 + 아래 핑크 라벨 띠 */
    .menumobile {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }
    .menumobile .card,
    .menumobile .card.card_wide {
        grid-column: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
        height: auto;
        border-radius: 8px;
        border: 1px solid #6B4A58;
        background: radial-gradient(120% 90% at 50% 30%, #2E2629 0%, #151113 70%);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .5);
        padding: 0;
    }
    .menumobile .card:active { border-color: #D92A74; background: rgba(240, 64, 138, .16); }
    .menumobile .card .ball-area {
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        background: none;
    }
    .menumobile .card .ball-area img {
        width: 58px;
        height: 58px;
        border-radius: 0;
        object-fit: contain;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
    }
    .menumobile .card .title {
        height: 24px;
        line-height: 24px;
        margin: 0;
        flex-shrink: 0;
        text-align: center;
        font-size: 12px;
        font-weight: 800;
        color: #FFFFFF;
        text-shadow: 0 1px 2px rgba(80, 0, 30, .8);
        word-break: keep-all;
        background: linear-gradient(180deg, #FFB3D1 0%, #F0408A 38%, #B81C5E 62%, #E0508E 100%);
        border-top: 1px solid #FFD0E3;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    }

    /* 게스트 버튼 — 시안: 로그인 = 핑크, 무기명가입·텔레그램 = 은색 테두리 + 어두운 그라데이션 */
    .contents_join_box .login_btn,
    .contents_join_box .join_btn,
    .contents_join_box .sos_btn,
    .contents_join_box .black_btn {
        background: linear-gradient(180deg, #251F22, #0F0C0D);
        border: 1px solid #B8C2C8;
        height: 44px;
        line-height: 44px;
    }
    .contents_join_box .login_btn {
        background: var(--sb-btn-grad);
        border-color: #B81C5E;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    }

    /* 하단 배너 6장 — 시안 aspect 3/1, radius 3, 간격 5 */
    .banner_mobile_contact { display: flex; flex-direction: column; gap: 5px; margin-top: 20px; }
    .banner_mobile_contact img { width: 100%; aspect-ratio: 3 / 1; border-radius: 3px; display: block; }
}

/* ── 좌측 배팅카트 — 사이드바의 메뉴용 규칙을 끊는다 ───────────────────
   base.css 가 `.snb_left ul`(height 243px · 배경 #222)·`.snb_left ul li`(float:left) 를 **후손 선택자**로 걸어 두어,
   카트를 좌측 사이드바 안으로 옮기면 카트의 목록(`#betting_result`·정보 6줄)까지 메뉴 그리드처럼 그려졌다
   (실측: 정보 줄이 3개씩 가로로 붙고 빈 목록이 243px 로 늘어났다). 카트 안에서는 원래(우측 패널) 모양으로 되돌린다. */
.snb_left .pp_cart_pc ul {
    width: auto;
    height: auto;
    padding-bottom: 0;
    background: none;
}
.snb_left .pp_cart_pc ul li {
    float: none;
    margin-left: 0;
}
.pp_cart_pc .bet_cart { width: auto; padding: 0; margin: 0; }
.pp_cart_pc .bc_select { background: #0C0A0B; border: 1px solid #241F21; margin: 1px 5px 7px; min-height: 80px; }
.pp_cart_pc .bc_select .no_data { color: #A69AA0; font-size: 12px; }
.pp_cart_pc .bc_ttl {
    height: 32px;
    padding: 6px 8px;
    background: linear-gradient(180deg, #302A2D 0%, #151213 49%, #050606 51%, #110E10 100%);
    border-bottom: 1px solid #302A2D;
    color: #EEE6EA;
    font-size: 12px;
}
.pp_cart_pc .bc_ttl::before { content: '실시간배당'; }   /* 시안 카트 제목(토글 스위치 옆 문구) */
.pp_cart_pc .bc_ttl .bc_da { color: #A69AA0; }
.pp_cart_pc .bc_ttl .bc_da:hover { color: #D92A74; }
.pp_cart_pc .bc_info_box { background: #110E10; padding: 0 5px; }
.pp_cart_pc .bc_info_box ul li {
    height: 38px;
    padding: 0 5px;
    line-height: 38px;
    background: #151213;
    border-bottom: 2px solid #050606;
    color: #EEE6EA;
}
.pp_cart_pc .bc_btn_box { background: #110E10; padding: 10px 14px; }

/* HOT 배지 높이 — 시안은 글자 바로 위(약 20px 위)에 붙는다 */
.top_right_box .pp_top_hot .pp_hot { top: -4px; }

/* ── 점검 화면이 로그인 화면 위에 오게 — 독립 로그인(/login)은 base.css .pop_login 의 z-index 999999 를 물려받아
   사이트 점검 오버레이(@nexus/user-core MaintenanceOverlay, z-index 99999)보다 위에 그려졌다(2026-11-07 운영 실측:
   점검 문구가 로그인 카드 뒤로 비쳤다). 독립 로그인 화면만 오버레이 아래로 내린다(홈 위 모달은 오버레이가 이미 가린다). */
.pop_login.pop_login_page { z-index: 9999; }

/* ── 로그인 보안문자 · 아이디 저장 (조선 기능 기준 2026-11-07 — views/auth/captcha.tsx · login-modal.tsx) ── */
.pp_captcha_row { display: flex; align-items: center; gap: 6px; }
.pp_captcha_row .out_login_ip { flex: 1; min-width: 0; }
.pp_captcha { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pp_captcha canvas { border-radius: 3px; border: 1px solid #B81C5E; }
.pp_captcha_reload {
  width: 38px;
  height: 40px;
  border: 1px solid #302A2D;
  border-radius: 3px;
  background: linear-gradient(180deg, #251F22, #0F0C0D);
  color: #F0408A;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pp_captcha_reload svg { width: 20px; height: 20px; }
.pp_captcha_reload:hover { border-color: #D92A74; }
.pp_save_id {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 2px;
  font-size: 13px;
  color: #EEE6EA;
  cursor: pointer;
}
.pp_save_id { justify-content: flex-start; white-space: nowrap; }
.pp_save_id input { accent-color: #D92A74; width: auto !important; height: auto !important; margin: 0 !important; flex: none; }

/* 충전 화면 [빠른 계좌 문의] — 조선 기능(recharge-bank.tsx QuickAccountInquiry) */
.pp_quick_inquiry {
  float: right;
  height: 24px;
  padding: 0 10px;
  border: 1px solid #B81C5E;
  border-radius: 12px;
  background: rgba(240, 64, 138, .12);
  color: #F0408A;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pp_quick_inquiry:hover { background: rgba(240, 64, 138, .25); }
.pp_quick_inquiry:disabled { opacity: .6; cursor: progress; }

/* 내정보 «회원 정보» — 조선 기능(mypage.tsx MemberInfoBox) */
.pp_info_rows { margin: 10px 0 6px; border-top: 1px solid #241F21; }
.pp_info_row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #241F21; font-size: 13px; }
.pp_info_k { color: #A69AA0; flex-shrink: 0; }
.pp_info_v { color: #EEE6EA; text-align: right; word-break: break-all; }

/* 모바일 충전·환전 표 입력칸 — width:100% + content-box + 좌우 패딩이라 360px 화면에서 오른쪽으로 5px 넘쳤다
   (2026-11-07 로컬 레이아웃 점검). 패딩을 폭 안에 넣는다. */
@media screen and (max-width: 767px) {
  .tb_st_dp td input[type='text'],
  .tb_st_dp td input[type='password'],
  .tb_st_dp td input:not([type]) { box-sizing: border-box; max-width: 100%; }
}

/* 우측 서랍 닫기 손잡이 — 서랍이 닫혀 있을 때도 화면 오른쪽 끝에 1px 걸쳐 분홍 줄로 보였다(2026-11-07 점검).
   닫기 버튼은 열렸을 때(.active)만 필요하다. */
.bet_slip_close_btn:not(.active) { visibility: hidden; }

/* ── 본문 스크롤바 흔들림 (2026-11-07 신고: 메인 가운데에 마우스를 올리면 스크롤바가 생기며 레이아웃이 움직임) ──
   base.css 가 스크롤바를 평소 `display:none`, `:hover` 에서만 `display:block` 으로 바꾼다. 위 8px 스크롤바와 겹쳐
   마우스가 들어가는 순간 본문 폭이 8px 줄어 내용이 밀렸다. 실제로 스크롤되는 본문(.inner)은 **항상** 보이게 두어
   폭이 변하지 않게 한다. 바깥 .contents 는 .inner 의 아래 패딩 5px 만큼 넘쳐 쓸데없는 두 번째 스크롤바가
   생겼으므로 패딩을 높이 안에 넣는다(border-box). PC 레이아웃(max.css)에만 해당. */
@media screen and (min-width: 768px) {
    .inner { box-sizing: border-box; }
    .contents::-webkit-scrollbar,
    .contents:hover::-webkit-scrollbar,
    .inner::-webkit-scrollbar,
    .inner:hover::-webkit-scrollbar { display: block; width: 8px; }
}