@charset "utf-8";

/****************************************************************************************************************************************
ST10 EARTH 테마 — 토큰 · 폰트 · z-index · 배경 애니메이션
(모든 색상/레이어/폰트 루트 정의. layout/main/popup/board/game/casino는 이 토큰을 참조)
*****************************************************************************************************************************************/

/* ──────────────────────────────────────────────────────────────────────
   Orbitron 폰트 self-host (스킨 전용 경로)
   Google Fonts 의 variable font (Latin subset) 단일 파일로 400~900 weight 지원.
   원본: https://fonts.gstatic.com/s/orbitron/v35/yMJRMIlzdpvBhQQL_Tq5fSp5ig.woff2
   ────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Orbitron';
    src: url('../Lib/font/Orbitron-Variable.woff2') format('woff2-variations'),
         url('../Lib/font/Orbitron-Variable.woff2') format('woff2');
    font-weight: 400 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 {
    /* Earth 원형 팔레트 */
    --earth-primary: #00d4aa;
    --earth-secondary: #0099ff;
    --earth-accent: #00ff88;
    --earth-dark: #0a1628;
    --earth-darker: #050d1a;
    --earth-light: #1a3a5c;
    --earth-text: #ffffff;
    --earth-text-muted: #8fa3bf;
    --earth-gradient: linear-gradient(135deg, #00d4aa 0%, #0099ff 50%, #00ff88 100%);
    --earth-glow: 0 0 30px rgba(0, 212, 170, 0.5);

    /* 공용 토큰 매핑 (ST02/_Shared 클래스가 참조) */
    --body-bg: #050d1a;
    --color: #ffffff;
    --secondary: #8fa3bf;

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

    --red-color: #00d4aa;
    --red-color-hover: #4fe8c7;
    --green-color: #00ff88;
    --blue-color: #0099ff;
    --gray-color: #8fa3bf;
    --light-gray: #5b6f89;
    --placeholder-color: #5b6f89;

    --bg-layer1: rgba(10, 22, 40, 0.85);
    --bg-layer1-solid: #0a1628;
    --bg-layer2: #1a3a5c;
    --bg-layer3: #12253d;
    --red-bg: #00d4aa;
    --red-bg-hover: rgba(0, 212, 170, 0.8);
    --red-border: #00d4aa;
    --blue-bg: #0099ff;
    --green-bg: #00ff88;
    --th-bg: #1a3a5c;
    --sport-bg: #0f1f33;
    --sport-on-bg: #12345a;

    --border1-color: #2a4560;
    --border1-color-hover: #3e5f80;
    --border2-color: #1f3a5a;
    --border3-color: rgba(143, 163, 191, 0.2);
    --board-sport: #1a3a5c;
    --board-sport-on: #0099ff;

    --border1-font: #8fa3bf;
    --border1-font-hover: #ffffff;
    --border2-font: #5b6f89;

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

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

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

/* Orbitron은 로고/제목/숫자/헤더에만 선택적으로
   (모든 셀렉터에 body.skin-st10-venus prefix 로 다른 스킨 영향 0;
   한글은 'Orbitron' 미지원 → 자동으로 Noto Sans KR 폴백) */
body.skin-st10-venus .top-logo,
body.skin-st10-venus .top-logo b,
body.skin-st10-venus .bo-tit,
body.skin-st10-venus h1, body.skin-st10-venus h2, body.skin-st10-venus h3,
body.skin-st10-venus .tnb-info > li > b,
body.skin-st10-venus #user-balance,
body.skin-st10-venus #user-comp,
body.skin-st10-venus .main-menu > li > a,
body.skin-st10-venus .hd-btn,
body.skin-st10-venus .tnb-action > button,
body.skin-st10-venus .side-actions-menu a,
body.skin-st10-venus .side-actions-menu button {
    font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
    letter-spacing: 0.02em;
}

/* ──────────────────────────────────────────────────────────────────────
   Space Background — 비디오 대체 (포스터 + @keyframes)
   ────────────────────────────────────────────────────────────────────── */
.space-bg {
    position: fixed;
    inset: 0;
    z-index: var(--z-space-bg);
    overflow: hidden;
    pointer-events: none;
}

.space-bg-poster {
    position: absolute;
    inset: 0;
    background-image:
        url('../img/main/hero-earth.jpg'),
        linear-gradient(180deg, #050d1a 0%, #0a1628 40%, #1a3a5c 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* 원본 Earth rotation mp4 — poster 위에 덮어 재생, fallback 유지 */
.space-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    filter: brightness(50%);
}

.space-bg-stars {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 230px 80px, #fff, transparent),
        radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 370px 50px, #fff, transparent),
        radial-gradient(2px 2px at 450px 180px, rgba(255,255,255,0.8), transparent);
    background-repeat: repeat;
    background-size: 500px 500px;
    animation: st10-twinkle 8s ease-in-out infinite;
    opacity: 0.35;
    mix-blend-mode: screen;
}

@keyframes st10-twinkle {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.35; }
}

.space-bg-aurora {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 255, 136, 0.08) 20%,
        rgba(0, 212, 170, 0.12) 40%,
        transparent 100%);
    animation: st10-aurora 15s ease-in-out infinite;
    opacity: 0.35;
    mix-blend-mode: screen;
}

@keyframes st10-aurora {
    0%, 100% { transform: translateX(-10%) skewX(-5deg); }
    50%      { transform: translateX(10%)  skewX(5deg); }
}

.space-bg-glow {
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 100%;
    background: radial-gradient(ellipse at center bottom,
        rgba(0, 212, 170, 0.28) 0%,
        rgba(0, 153, 255, 0.18) 30%,
        transparent 70%);
    animation: st10-pulse 6s ease-in-out infinite;
    opacity: 0.45;
    mix-blend-mode: screen;
}

@keyframes st10-pulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.05); }
}

.space-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
}

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

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

body.skin-st10-venus .tnb {
    background: transparent;
}

body.skin-st10-venus .nav {
    background: var(--bg-layer1-solid);
    border-top: 1px solid rgba(0, 212, 170, 0.15);
}

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

body.skin-st10-venus ul.tnb-info > li.tnb-action > button {
    background: var(--earth-light);
    color: #fff;
    border: 1px solid rgba(0, 212, 170, 0.3);
}

body.skin-st10-venus ul.main-menu > li > a {
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 212, 170, 0.3);
}

body.skin-st10-venus footer {
    background: rgba(10, 22, 40, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 212, 170, 0.15);
}

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

@media (max-width: 797px) {
    body.skin-st10-venus .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(0, 212, 170, 0.2);
    }
    body.skin-st10-venus .side-actions-menu > li {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    body.skin-st10-venus .side-actions-menu > li > a,
    body.skin-st10-venus .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-st10-venus .side-actions-menu > li > .side-btn-deposit {
        color: #0a1628;
        background: var(--earth-gradient);
        box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
    }
    body.skin-st10-venus .side-actions-menu > li > .side-btn-withdraw {
        color: var(--earth-accent);
        background: transparent;
        border-color: var(--earth-accent);
    }
    body.skin-st10-venus .side-actions-menu > li > .side-btn-point {
        color: var(--earth-primary);
        background: rgba(0, 153, 255, 0.12);
        border-color: rgba(0, 212, 170, 0.35);
    }
    body.skin-st10-venus .side-actions-menu > li > .side-btn-mypage {
        color: var(--white-color);
        background: rgba(10, 22, 40, 0.6);
        border-color: rgba(0, 212, 170, 0.4);
    }
    body.skin-st10-venus .side-actions-menu > li > .side-btn-logout {
        color: #f97316;
        background: transparent;
        border-color: #f97316;
    }
}

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