/* ============================================================
   SEVEN STAR 스킨 오버라이드 (구조 + 이미지)

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

   역할 분담(합치지 말 것):
     · star_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/star/**  (원본 `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`
   base.css:158 의 `bg.png` / `100% 100%` 를 덮어쓴다. */
body {
    background-color: #0a0a0a;
    background-image: url(/static/star/background.png);
    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(255, 211, 0, .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: #ffd200;
    text-shadow: 0 0 6px rgba(255, 210, 0, .35), 0 2px 8px rgba(0, 0, 0, .8);
}
.top_right_box a:hover .ss-ico { background: #ffd200; }

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

/* 알약 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: #ffd300; }

/* 알약 치수 — 시안 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.gif` 한 장이 그린다(보더 없음 — star_color.css 가 끈다).
   ⚠️ 양 끝의 붉은 '날개'는 **시안 에셋 그대로다**(menu_bg.gif). 금색 테마 안의 의도된 포인트라
      임의로 걷어내지 말 것 — 바꾸려면 GIF 를 교체한다. */
.gnb_box {
    height: 50px;
    background: #0a0a0a url(/static/star/menu_bg.gif) 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/star/btn_casino.png); }
.snb_btn_img a:nth-of-type(2) { background-image: url(/static/star/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: #ffd300; font-weight: 700; }

/* ── 중앙: 히어로 배너 ─────────────────────────────────────
   시안: 629x270 두 칸, radius 5, **2px 금색 테두리**. */
.mb_pc_box .mb_box {
    border: 2px solid #ffd300;
    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(255, 211, 0, .20) 0%, rgb(26, 23, 15) 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/star/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/star/icons/st_notice.gif);
}
.main_bbs_pair .bbs_col_event .bbs_col_head .main_bbs_ttl i {
    background-image: url(/static/star/icons/st_event.gif);
}

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

/* 제목 글자 그림자 제거 (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)으로 뒀는데 금색 바와 대비가 없어 묻힌다.
   ⚠️ star_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: rgba(0, 0, 0, .6); }

.main_bbs_pair .bbs_col_head .bbs_more { color: #000; font-weight: 600; }
.main_bbs_pair .bbs_col_head .bbs_more:hover { color: #7a3d00; }

/* ── 중앙: 프로모 타일 5종 ──────────────────────────────────
   시안: 배경 이미지 위에 **시작 버튼 이미지 하나**만 얹고, 금색 빛줄기가 훑고 지나간다.
   제목/부제는 배경 이미지에 이미 그려져 있으므로 텍스트로 다시 그리지 않는다. */
.main_middle_box > a {
    position: relative;
    border: 2px solid rgb(51, 38, 0);
    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: #ffd300;
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(255, 211, 0, .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: url(/static/star/promo/button-start.png) center/contain no-repeat;
    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(255, 211, 0, .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(255, 214, 110, 0) 0%, rgba(255, 226, 150, .20) 45%, rgba(255, 236, 190, .28) 52%, rgba(255, 214, 110, 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(255, 246, 214, .10) 38%, rgba(255, 252, 238, .70) 50%, rgba(255, 246, 214, .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, rgb(66, 54, 10), rgb(20, 16, 2));
    border-color: #ffd300;
}

/* '배팅하기' 버튼 (`.btn_bet`) — 시안은 금색 버튼 이미지 위 검은 글자다.
   ⚠️ 원래 규칙이 `base.css`(단색 #111) 와 `special.css`(붉은 3-stop 그라데이션) **두 곳**에
      있고 special 이 나중이라 붉은 쪽이 이긴다. 한쪽만 덮으면 색이 안 바뀐다 —
      마지막 로드인 이 파일에서 한 번에 잡는다.
   ⚠️ `.btn_bet` 은 베팅슬립 밖(미니게임 베팅 화면 등)에서도 쓰이므로 스코프를 좁히지 않는다. */
.btn_bet {
    background: url(/static/star/btn-gold-wide.svg) center/100% 100% no-repeat;
    color: #000;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
    border: 0;
    transition: filter .15s ease, transform .1s ease;
}
.btn_bet:hover {
    background: url(/static/star/btn-gold-wide.svg) center/100% 100% no-repeat;
    color: #000;
    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: linear-gradient(180deg, rgb(255, 234, 0) 0%, rgb(255, 150, 0) 100%);
    border-color: #ffd300;
    color: #000 !important;   /* base.css 가 `color:#fff !important` 로 박아 둔 것을 되돌린다 */
}
.bet_slip_close_btn:hover,
.bet_slip_toggle_btn:hover {
    background: linear-gradient(180deg, rgb(255, 234, 0) 0%, rgb(255, 150, 0) 100%);
    border-color: #ffd300;
    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: #000; }

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

/* ── 모바일 (≤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(255, 211, 0, .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: url(/static/star/btn-gold.svg) center/100% 100% no-repeat;
        border: 0;
        color: #000;
        /* ⚠️ `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: #000;
        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: linear-gradient(180deg, rgb(255, 234, 0) 0%, rgb(255, 150, 0) 100%);
    border-color: #ffd300;
    color: #000;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
}

/* 위 버튼들 안쪽 텍스트/아이콘도 함께 검게 — 자식에 흰색이 박혀 있으면 배경만 금색이 된다 */
.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: #000; }

/* ⚠️ `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: #ffd300; }

/* ── 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: #ffd300; }

/* GNB 의 `gold` 변형 — 시안은 보더 없이 `menu_bg.gif` 한 장이다(위 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(255, 211, 0, .35); }
.open_slot2:hover { box-shadow: 0 0 12px rgba(255, 211, 0, .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.gif)인데, **자식** `.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 rgba(0, 0, 0, .55);
    color: #000;
    text-shadow: none;
}
.sch_sp_btn i,
.sch_sp_btn2 i { color: #000; }
.sch_sp_btn:hover,
.sch_sp_btn2:hover {
    background-image: linear-gradient(0deg, rgb(255, 150, 0) 0%, rgb(255, 200, 0) 60%, rgb(255, 234, 0) 100%);
    color: #000;
}
.sch_sp_btn:hover i,
.sch_sp_btn2:hover i { color: #000; }

/* ── 상단 우측 비로그인 버튼 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: #ffd300;
    box-shadow:
        0 0 0 3px rgba(255, 211, 0, .15),
        0 0 15px rgba(255, 211, 0, .35),
        0 0 30px rgba(255, 211, 0, .15);
}

/* ── 베팅 슬립 '초기화' 아이콘 ──────────────────────────────────
   원본은 FontAwesome `fas fa-undo-alt`(굵은 화살표 원형) 인데,
   시안은 FontAwesome 을 쓰지 않고 **텍스트 글리프 ↺(U+21BA)** 를 금색 16px 로 찍는다:
     <span style="color:var(--accent,#ffd300); 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;
}