@charset "utf-8";

/* ST11 Purple Gaming — 소스 디자인 토큰 (--purple-*, --dark-purple-*, --accent-*, --text-*)
   원본 layout.css :root 에서 추출. main.css 의 .platform-card/.category-tabs/.banner-item 셀렉터가 참조 */
:root {
    /* 퍼플 컬러 팔레트 */
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7c3aed;
    --purple-800: #6b21a8;
    --purple-900: #581c87;

    /* 다크 퍼플 (배경용) */
    --dark-purple-900: #0f0a1f;
    --dark-purple-800: #1a1033;
    --dark-purple-700: #251547;
    --dark-purple-600: #2d1a54;

    /* 악센트 컬러 */
    --accent-magenta: #c026d3;
    --accent-fuchsia: #d946ef;
    --accent-pink: #ec4899;

    /* 텍스트 컬러 */
    --text-primary: #ffffff;
    --text-secondary: #d8b4fe;
    --text-muted: #a78bfa;

    /* 기본 설정 */
    --header-height: 70px;
    --mobile-nav-height: 65px;
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

/* ───────────────────────────────────────────────────────────────────────
   ST10 호환 토큰 (--earth-*, --body-bg 등) — ST10 markup 의 .tnb/.nav 셀렉터가 참조
   ─────────────────────────────────────────────────────────────────────── */
/****************************************************************************************************************************************
ST11 Purple Gaming 테마 — 토큰 · 폰트 · z-index · 배경 애니메이션
(모든 색상/레이어/폰트 루트 정의. layout/main/popup/board/game/casino는 이 토큰을 참조)
*****************************************************************************************************************************************/

/* ──────────────────────────────────────────────────────────────────────
   Orbitron 폰트 self-host (스킨 전용 경로, W16 방식)
   ※ 실제 woff2 파일은 운영 배포 전 Lib/font/Orbitron-*.woff2 로 커밋
   ────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Orbitron';
    src: url('../Lib/font/Orbitron-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Orbitron';
    src: url('../Lib/font/Orbitron-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Orbitron';
    src: url('../Lib/font/Orbitron-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Orbitron';
    src: url('../Lib/font/Orbitron-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Orbitron';
    src: url('../Lib/font/Orbitron-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Orbitron';
    src: url('../Lib/font/Orbitron-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

/* ──────────────────────────────────────────────────────────────────────
   Earth 팔레트 + 공용 토큰 (_Shared 뷰/공용 class 호환)
   ────────────────────────────────────────────────────────────────────── */
:root {
    /* Purple Gaming 원형 팔레트 */
    --earth-primary: #a855f7;
    --earth-secondary: #c084fc;
    --earth-accent: #d946ef;
    --earth-dark: #1a1033;
    --earth-darker: #0f0a1f;
    --earth-light: #251547;
    --earth-text: #ffffff;
    --earth-text-muted: #a78bfa;
    --earth-gradient: linear-gradient(135deg, #a855f7 0%, #c084fc 50%, #d946ef 100%);
    --earth-glow: 0 0 30px rgba(168, 85, 247, 0.5);

    /* 공용 토큰 매핑 (ST02/_Shared 클래스가 참조) */
    --body-bg: #0f0a1f;
    --color: #ffffff;
    --secondary: #a78bfa;

    --white-color: #ffffff;
    --black-color: #000000;

    --red-color: #a855f7;
    --red-color-hover: #c084fc;
    --green-color: #d946ef;
    --blue-color: #c084fc;
    --gray-color: #a78bfa;
    --light-gray: #7a5b9e;
    --placeholder-color: #7a5b9e;

    --bg-layer1: rgba(26, 16, 51, 0.85);
    --bg-layer1-solid: #1a1033;
    --bg-layer2: #251547;
    --bg-layer3: #1f1241;
    --red-bg: #a855f7;
    --red-bg-hover: rgba(168, 85, 247, 0.8);
    --red-border: #a855f7;
    --blue-bg: #c084fc;
    --green-bg: #d946ef;
    --th-bg: #251547;
    --sport-bg: #1a0e36;
    --sport-on-bg: #2d1a54;

    --border1-color: #3a2862;
    --border1-color-hover: #5b3d8a;
    --border2-color: #2d1f47;
    --border3-color: rgba(168, 85, 247, 0.2);
    --board-sport: #251547;
    --board-sport-on: #c084fc;

    --border1-font: #a78bfa;
    --border1-font-hover: #ffffff;
    --border2-font: #7a5b9e;

    /* ── Z-Index 레이어 (ST02와 동일한 체계를 초기부터 변수화) ── */
    --z-alert:        100000;
    --z-popup:         50000;
    --z-sidebar:       30000;
    --z-game-popup:    40000; /* 모바일 헤더/하단네비(--z-sidebar 30000대) 위, 공지팝업(--z-popup 50000) 아래 */
    --z-mobile-menu:   10200;
    --z-fab:           10100;
    --z-bottom-sheet:  10000;
    --z-scroll-top:     5000;
    --z-tooltip:        3000;
    --z-header:         1000;
    --z-space-bg:         -1;
}

/* ──────────────────────────────────────────────────────────────────────
   body.skin-st11 — 전역 스킨 스코프
   (html에 solid fallback, body 투명 → fixed+z-index:-1 .space-bg 가시 보장)
   ────────────────────────────────────────────────────────────────────── */
html:has(body.skin-st11) {
    background: var(--earth-darker);
}

body.skin-st11 {
    background: transparent;
    color: var(--earth-text);
    font-family: 'Noto Sans KR', sans-serif;
}

body.skin-st11 * {
    font-family: 'Noto Sans KR', sans-serif;
}

/* Orbitron은 로고/제목/숫자에만 선택적으로 */
body.skin-st11 .top-logo,
body.skin-st11 .top-logo b,
body.skin-st11 .bo-tit,
body.skin-st11 h1, body.skin-st11 h2, body.skin-st11 h3,
body.skin-st11 .tnb-info > li > b,
body.skin-st11 #user-balance,
body.skin-st11 #user-comp {
    font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
    letter-spacing: 0.02em;
}

/* Space Background block removed for ST11 — Purple Gaming uses solid dark-purple background */

/* 모바일: 배경 영상 정지 (poster 이미지로 대체, CPU/배터리 절약 + iOS 자동재생 정책 회피) */
@media (max-width: 768px) {
    .space-bg-video { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   공용 component 꾸밈 보강 — Earth glow · 네온 테두리
   (ST02 클래스와 호환, 토큰 오버라이드로 자연스럽게 Earth 톤)
   ────────────────────────────────────────────────────────────────────── */
body.skin-st11 header {
    background: rgba(26, 16, 51, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
    box-shadow: 0 4px 30px rgba(168, 85, 247, 0.08);
}

body.skin-st11 .tnb {
    background: transparent;
}

body.skin-st11 .nav {
    background: var(--bg-layer1-solid);
    border-top: 1px solid rgba(168, 85, 247, 0.15);
}

body.skin-st11 .hd-login {
    background: transparent;
    color: var(--earth-primary);
    border-color: var(--earth-primary);
}
body.skin-st11 .hd-join,
body.skin-st11 .hd-logout {
    color: #fff;
    background: var(--earth-gradient);
    border: none;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
}

body.skin-st11 ul.tnb-info > li.tnb-action > button {
    background: var(--earth-light);
    color: #fff;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

body.skin-st11 ul.main-menu > li > a {
    color: #fff;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

body.skin-st11 footer {
    background: rgba(26, 16, 51, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(168, 85, 247, 0.15);
}

/* ──────────────────────────────────────────────────────────────────────
   SweetAlert2 최상위 레이어 (공용)
   ────────────────────────────────────────────────────────────────────── */
.swal2-container,
.swal2-popup {
    z-index: var(--z-alert) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   ST11 헤더 상단 액션바 (원본 mockup 디자인 — /Users/emotian/Downloads/st11/index.html 기반)
   `.tnb-right` > `.header-actions` (인증된 사용자 only). 비로그인 `.before-btns` 는 옛 CSS 유지.
   ────────────────────────────────────────────────────────────────────── */
body.skin-st11 .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 데스크톱: 새 PC actions 노출, 옛 모바일 마크업은 숨김 */
body.skin-st11 .tnb-right > .after-tnb {
    display: none;
}

/* 모바일(≤797px): 새 PC actions 숨김, 옛 ul.tnb-info 복귀 */
@media (max-width: 797px) {
    body.skin-st11 .header-actions {
        display: none;
    }
    body.skin-st11 .tnb-right > .after-tnb {
        display: block;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   ST11 모바일 사이드 메뉴 액션 (.nav.active 슬라이드 안의 사용자 액션)
   데스크톱: 숨김 / 모바일(≤797px): 카테고리 main-menu 아래 노출
   ────────────────────────────────────────────────────────────────────── */
body.skin-st11 .side-actions-menu { display: none; }

@media (max-width: 797px) {
    body.skin-st11 .side-actions-menu {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 18px 0 0 0;
        padding: 14px 0 10px 0;
        list-style: none;
        border-top: 1px solid rgba(168, 85, 247, 0.2);
    }
    body.skin-st11 .side-actions-menu > li {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    body.skin-st11 .side-actions-menu > li > a,
    body.skin-st11 .side-actions-menu > li > button {
        display: block;
        width: 100%;
        padding: 0 20px;
        line-height: 44px;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        font-family: 'Noto Sans KR', sans-serif;
        border-radius: 10px;
        border: 1px solid transparent;
        cursor: pointer;
        text-decoration: none;
        transition: 0.2s;
    }
    body.skin-st11 .side-actions-menu > li > .side-btn-partner {
        color: #fff;
        background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
    }
    body.skin-st11 .side-actions-menu > li > .side-btn-deposit {
        color: #fff;
        background: var(--purple-500-grad);
        box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
    }
    body.skin-st11 .side-actions-menu > li > .side-btn-withdraw {
        color: var(--purple-500);
        background: transparent;
        border-color: var(--purple-500);
    }
    body.skin-st11 .side-actions-menu > li > .side-btn-mypage {
        color: var(--purple-300);
        background: rgba(15, 10, 31, 0.6);
        border-color: rgba(168, 85, 247, 0.4);
    }
    body.skin-st11 .side-actions-menu > li > .side-btn-logout {
        color: #f97316;
        background: transparent;
        border-color: #f97316;
    }
}

body.skin-st11 .header-actions > a,
body.skin-st11 .header-actions > button {
    text-decoration: none;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    line-height: 1;
}

body.skin-st11 .btn-partner {
    padding: 9px 18px;
    color: #fff;
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
    transition: 0.2s;
}

body.skin-st11 .btn-deposit {
    padding: 9px 18px;
    color: #fff;
    background: var(--purple-500-grad);
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
    transition: 0.2s;
}

body.skin-st11 .btn-withdraw {
    padding: 9px 18px;
    color: var(--purple-500);
    background: transparent;
    border: 1px solid var(--purple-500);
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s;
}

body.skin-st11 .user-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    color: var(--text-primary);
    background: rgba(15, 10, 31, 0.6);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 999px;
}

body.skin-st11 .user-profile .user-balance {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

body.skin-st11 .user-profile .user-point {
    color: var(--purple-300);
    font-weight: 600;
    font-size: 14px;
    padding-left: 10px;
    border-left: 1px solid rgba(168, 85, 247, 0.3);
}

body.skin-st11 .user-profile .btn-point-convert {
    padding: 3px 10px;
    color: var(--purple-300);
    background: transparent;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

body.skin-st11 .user-profile .user-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #fff;
    background: var(--purple-500);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}

body.skin-st11 .btn-mail {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--purple-300);
    background: transparent;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 50%;
    transition: 0.2s;
}

body.skin-st11 .btn-mail > i {
    font-size: 16px;
}

body.skin-st11 .btn-mail .mail-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    color: #fff;
    background: #ef4444;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

body.skin-st11 .header-actions .btn-logout {
    padding: 9px 18px;
    color: #f97316;
    background: transparent;
    border: 1px solid #f97316;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    body.skin-st11 .btn-partner:hover,
    body.skin-st11 .btn-deposit:hover,
    body.skin-st11 .btn-withdraw:hover,
    body.skin-st11 .btn-mail:hover,
    body.skin-st11 .header-actions .btn-logout:hover {
        filter: brightness(115%);
        transform: translateY(-1px);
    }
    body.skin-st11 .user-profile .btn-point-convert:hover {
        background: rgba(168, 85, 247, 0.15);
    }
}