/* ============================================================
   핑크팬더 테마 (pink / deep magenta) — 색상 전용 레이어

   포니 `pony_color.css`(핑크) 자리를 **대체**한다. 원본 사이트가 처음부터
   '색상 전용 레이어'로 분리해 둔 자리(base.css 다음에 로드 → base.css 를 덮어씀)이며,
   레이아웃(치수/여백/DOM)은 1바이트도 건드리지 않는다.

   시안: `PinkPanther-PC.dc.html`(PC) / `PinkPanther-Mobile.dc.html`(모바일) — Claude Design 캔버스 산출물.
   시안 팔레트(스크립트·인라인 스타일 그대로):
     핑크 #F0408A  — 포인트(링크 hover · 금액 · 강조)
     마젠타 #D92A74 / 짙은 #B81C5E / 딥 #8E1048 — 버튼·제목바·배지
     본문 #EEE6EA / 보조 #A69AA0 / 은색 #B8C2C8 · #D6DDE1(테두리·하이라이트) / 제목바 영문 #FDE8F1
     패널 #151213 · #110E10 / 바탕 #0C0A0B / 구분선 #241F21 · #302A2D

   ⚠️ 이 파일은 **색만** 담당한다. 이미지 교체·배치 보정은 `pp.css`(마지막 로드)로 보낸다.
      둘을 합치지 말 것 — 색 프리셋 교체가 한 파일로 끝나야 한다.
   ============================================================ */
:root {
    /* 포인트색 — 텍스트/보더/글로우의 기준 */
    --sb-accent: #F0408A;
    /* 제목바 — 시안 기본 프리셋 `green-metal`(이름만 그린, 실제는 핑크 — 48%/52% 에서 꺾이는 금속 광택) */
    --sb-hdr-grad: linear-gradient(180deg, #F0408A 0%, #D92A74 48%, #8E1048 52%, #D92A74 100%);
    /* 좌측 제목바도 같은 바를 쓴다(시안은 두 제목바가 같은 hdrGrad) */
    --sb-ttl-grad: linear-gradient(180deg, #F0408A 0%, #D92A74 48%, #8E1048 52%, #D92A74 100%);
    /* 버튼 하이라이트 — 로그인·좌측 상단 3칸·게임 시작·배팅하기 */
    --sb-btn-grad: linear-gradient(180deg, #F0408A 0%, #D92A74 55%, #8E1048 100%);
    --sb-btn-border: #B81C5E;
    /* 핑크 바 **위에** 얹는 보조 텍스트색 — 시안 영문 소제목(NOTICE/RULE · SPORTS) */
    --sb-on-gold: #FDE8F1;
    /* 어두운 면 위 보조 포인트 (카지노/슬롯 버튼 영문 라벨 등 — 세븐스타 금색 자리) */
    --sb-gold: #F0408A;
    /* 본문색 */
    --sb-text: #EEE6EA;
    /* 제목바 공통 그림자 — 시안 `border-top:1px #D92A74` + `0 2px 6px` */
    --sb-hdr-shadow: inset 0 1px 0 #D6DDE1, 0 2px 6px rgba(0, 0, 0, .18);
}

.top_right_box a i,
.top_right_box span i { color: var(--sb-text); }

/* GNB 바 — 시안은 위아래 보더 대신 `menu_bg.webp` 한 장이 바 전체를 그린다(배경은 pp.css). */
.gnb_box {
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/* GNB hover — 시안 `color:#fff; text-shadow:0 0 10px rgba(238, 230, 234,.55)` */
.gnb_menu_box a:hover,
.gnb_menu_box span:hover {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(238, 230, 234, .55);
}

/* 로그인 버튼 — 시안은 핑크 버튼(테두리 #D92A74)에 밝은 글자 */
.btn_top_login {
    border: 1px solid var(--sb-btn-border);
    color: var(--sb-text);
    font-weight: 700;
    background: var(--sb-btn-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .6);
    transition: filter .15s ease, transform .1s ease;
}
.btn_top_login:hover { filter: brightness(1.15); }
.btn_top_login:active { transform: scale(.97); }

/* 회원가입 / 무기명회원가입 / 텔레그램문의 — 시안은 '회색 테두리 + 반투명 검정' 3종 동일 */
.btn_top_join,
.btn_top_sos,
.btn_top_tele {
    border: 1px solid #B8C2C8;
    background: rgba(16, 12, 14, .7);
    color: var(--sb-text);
    font-weight: 700;
    text-shadow: none;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease;
}
.btn_top_join:hover,
.btn_top_sos:hover,
.btn_top_tele:hover {
    background: rgba(217, 42, 116, .45);
    border-color: var(--sb-text);
}

/* 좌측 메뉴 상단 3칸(충전·환전·문의) — 시안은 이 3개만 핑크 버튼(dc navGrid: `i < 3 ? hi : dark`).
   ⚠️ `.btn_gray` 는 머니/충환전 페이지의 회색 버튼에도 쓰이므로 `.snb_left` 스코프를 유지할 것. */
.snb_left ul li a.btn_gray {
    background: var(--sb-btn-grad);
    color: var(--sb-text);
    font-weight: 700;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.snb_left ul li a.btn_gray:hover {
    background: var(--sb-btn-grad);
    filter: brightness(1.15);
    opacity: 1;
}
.snb_left ul li a.btn_gray i { color: var(--sb-text); }

/* 공지/이벤트 제목바 */
.main_bbs_ttl {
    background: var(--sb-hdr-grad);
    box-shadow: var(--sb-hdr-shadow);
    color: var(--sb-text);
}

/* 제목 옆 영문 소제목(NOTICE/RULE · EVENT) */
.main_bbs_sub { color: var(--sb-on-gold); }

.notice_area .main_bbs_ttl { height: 47px; }
.event_area .main_bbs_ttl { height: 47px; }

/* 좌측 사이드바 제목바(인기스포츠리스트 · 최신 인기게임) */
.left_ttl {
    background: var(--sb-ttl-grad);
    box-shadow: var(--sb-hdr-shadow);
    color: var(--sb-text);
}
