/**
 * theme.css - Multiverse Creature Lab 듀얼 테마 시스템
 * 다크/라이트 테마 CSS 변수 정의
 * 2026-01-19 생성
 */

/* ========================================
   기본 테마 변수 (다크 모드 - 기본값)
   ======================================== */
:root {
    /* --- 색상 모드 플래그 --- */
    color-scheme: dark light;

    /* --- 배경 --- */
    --bg-primary: #0F0F1A;
    --bg-secondary: #1A1A2E;
    --bg-tertiary: #252542;
    --bg-panel: rgba(255, 255, 255, 0.03);
    --bg-panel-hover: rgba(255, 255, 255, 0.06);

    /* --- 글래스모피즘 --- */
    --glass-bg: rgba(15, 15, 26, 0.8);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --glass-blur: blur(12px);

    /* --- 텍스트 --- */
    --text-primary: #F0F0FF;
    --text-secondary: #9CA3AF;
    --text-dim: #6B7280;
    --text-inverse: #1A1A2E;

    /* --- 주요 강조색 --- */
    --accent-primary: #6B5CE7;
    /* 포탈 퍼플 */
    --accent-secondary: #E056FD;
    /* 아이돌 핑크 */
    --accent-tertiary: #3498DB;
    /* 스카이 블루 */

    /* --- 등급 색상 --- */
    --color-ur: linear-gradient(135deg, #FFD700, #FFA500);
    --color-ssr: #EF5350;
    --color-sr: #FF7043;
    --color-special: #AB47BC;
    --color-rare: #42A5F5;
    --color-unique: #66BB6A;
    --color-normal: #9E9E9E;

    --glow-ur: 0 0 20px rgba(255, 215, 0, 0.5);
    --glow-ssr: 0 0 15px rgba(239, 83, 80, 0.4);
    --glow-sr: 0 0 12px rgba(255, 112, 67, 0.3);

    /* --- 세계관별 테마 --- */
    --world-asgard: #7DD3FC;
    /* 얼음/번개 */
    --world-olympus: #FBBF24;
    /* 황금 */
    --world-abyss: #8B5CF6;
    /* 심연 */
    --world-shangrila: #34D399;
    /* 옥/자연 */

    /* --- 세계관별 배경 이미지 --- */
    --bg-world-asgard: url('/images/backgrounds/bg_asgard.png');
    --bg-world-olympus: url('/images/backgrounds/bg_olympus.png');
    --bg-world-abyss: url('/images/backgrounds/bg_abyss.png');
    --bg-world-shangrila: url('/images/backgrounds/bg_shangrila.png');
    --bg-world-default: linear-gradient(180deg, #03030a 0%, #0f0f24 50%, #05050f 100%);

    /* --- 상태 색상 --- */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* --- 버튼 --- */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-text: #FFFFFF;
    --btn-primary-shadow: 0 4px 15px rgba(107, 92, 231, 0.4);

    --btn-secondary-bg: rgba(255, 255, 255, 0.1);
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-border: rgba(255, 255, 255, 0.2);

    /* --- 입력 필드 --- */
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-focus-border: var(--accent-primary);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-dim);

    /* --- 카드/패널 --- */
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    --card-hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);

    /* --- 네비게이션 --- */
    --nav-bg: rgba(15, 15, 26, 0.95);
    --nav-active-bg: rgba(107, 92, 231, 0.2);
    --nav-hover-bg: rgba(255, 255, 255, 0.05);

    /* --- 스크롤바 --- */
    --scrollbar-track: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: var(--accent-primary);

    /* --- 타이포그래피 --- */
    --font-display: 'Orbitron', 'Rajdhani', sans-serif;
    --font-body: 'Noto Sans KR', 'Exo 2', sans-serif;

    /* --- 애니메이션 --- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* --- 레이아웃 --- */
    --header-height: 70px;
    --nav-width: 260px;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 28px;
}

/* ========================================
   라이트 테마
   ======================================== */
[data-theme="light"],
:root.light-theme {
    /* --- 배경 --- */
    --bg-primary: #F8FAFC;
    --bg-secondary: #E2E8F0;
    --bg-tertiary: #CBD5E1;
    --bg-panel: rgba(0, 0, 0, 0.02);
    --bg-panel-hover: rgba(0, 0, 0, 0.04);

    /* --- 글래스모피즘 --- */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.05);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

    /* --- 텍스트 --- */
    --text-primary: #1A1A2E;
    --text-secondary: #64748B;
    --text-dim: #94A3B8;
    --text-inverse: #F0F0FF;

    /* --- 카드/패널 --- */
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: rgba(0, 0, 0, 0.05);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --card-hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);

    /* --- 버튼 --- */
    --btn-secondary-bg: rgba(0, 0, 0, 0.05);
    --btn-secondary-border: rgba(0, 0, 0, 0.1);

    /* --- 입력 필드 --- */
    --input-bg: rgba(0, 0, 0, 0.03);
    --input-border: rgba(0, 0, 0, 0.1);

    /* --- 네비게이션 --- */
    --nav-bg: rgba(255, 255, 255, 0.95);
    --nav-hover-bg: rgba(0, 0, 0, 0.03);

    /* --- 스크롤바 --- */
    --scrollbar-track: rgba(0, 0, 0, 0.03);
    --scrollbar-thumb: rgba(0, 0, 0, 0.15);
}

/* ========================================
   시스템 설정 자동 감지
   ======================================== */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        /* 시스템이 라이트 모드일 때 자동 적용 */
        --bg-primary: #F8FAFC;
        --bg-secondary: #E2E8F0;
        --text-primary: #1A1A2E;
        --text-secondary: #64748B;
        --glass-bg: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(0, 0, 0, 0.05);
        --card-bg: rgba(255, 255, 255, 0.9);
    }
}

/* ========================================
   세계관별 동적 배경 클래스
   ======================================== */

#global-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: background 0.8s ease;
}

#global-background.bg-default {
    background: var(--bg-world-default);
}

#global-background.bg-asgard {
    background: linear-gradient(180deg,
            rgba(125, 211, 252, 0.1) 0%,
            rgba(15, 15, 26, 0.95) 30%,
            #0a0a14 100%),
        var(--bg-world-asgard);
    background-size: cover;
    background-position: center;
}

#global-background.bg-olympus {
    background: linear-gradient(180deg,
            rgba(251, 191, 36, 0.1) 0%,
            rgba(15, 15, 26, 0.95) 30%,
            #0a0a14 100%),
        var(--bg-world-olympus);
    background-size: cover;
    background-position: center;
}

#global-background.bg-abyss {
    background: linear-gradient(180deg,
            rgba(139, 92, 246, 0.15) 0%,
            rgba(10, 5, 20, 0.95) 30%,
            #050308 100%),
        var(--bg-world-abyss);
    background-size: cover;
    background-position: center;
}

#global-background.bg-shangrila {
    background: linear-gradient(180deg,
            rgba(52, 211, 153, 0.1) 0%,
            rgba(15, 20, 15, 0.95) 30%,
            #080a08 100%),
        var(--bg-world-shangrila);
    background-size: cover;
    background-position: center;
}

/* ========================================
   테마 전환 애니메이션
   ======================================== */
body,
.glass-panel,
.cyber-btn,
.nav-item,
input,
button {
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

/* ========================================
   유틸리티 클래스
   ======================================== */

/* 글로우 효과 */
.glow-primary {
    box-shadow: 0 0 20px rgba(107, 92, 231, 0.4);
}

.glow-gold {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
}

/* 그라디언트 텍스트 */
.gradient-text {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 세계관 테마 - UI 전체 색상 변경 */
/* 세계관 테마 - UI 전체 색상 변경 (우선순위 강화) */
body.theme-asgard {
    --accent-world: var(--world-asgard);
    --accent-primary: var(--world-asgard);
    --accent-secondary: #38BDF8;
    /* Sky Blue 400 */
    --btn-primary-bg: linear-gradient(135deg, #7DD3FC 0%, #38BDF8 100%);
    --btn-primary-shadow: 0 4px 15px rgba(125, 211, 252, 0.4);
    --input-focus-border: var(--world-asgard);
}

body.theme-olympus {
    --accent-world: var(--world-olympus);
    --accent-primary: var(--world-olympus);
    --accent-secondary: #F59E0B;
    /* Amber 500 */
    --btn-primary-bg: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    --btn-primary-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
    --input-focus-border: var(--world-olympus);
}

body.theme-abyss {
    --accent-world: var(--world-abyss);
    --accent-primary: var(--world-abyss);
    --accent-secondary: #7C3AED;
    /* Violet 600 */
    --btn-primary-bg: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    --btn-primary-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    --input-focus-border: var(--world-abyss);
}

body.theme-shangrila {
    --accent-world: var(--world-shangrila);
    --accent-primary: var(--world-shangrila);
    --accent-secondary: #10B981;
    /* Emerald 500 */
    --btn-primary-bg: linear-gradient(135deg, #34D399 0%, #059669 100%);
    --btn-primary-shadow: 0 4px 15px rgba(52, 211, 153, 0.4);
    --input-focus-border: var(--world-shangrila);
}

/* ========================================
   하이브리드 로그인 UI
   다크: 니케 SF 스타일
   라이트: 블루아카이브 청량 스타일
   ======================================== */

/* === 공통 베이스 스타일 === */
.auth-overlay,
#login-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 숨김 상태 */
#login-overlay.hidden,
.auth-overlay.hidden {
    display: none !important;
}

/* === 다크 모드 - 니케 SF 스타일 === */
[data-theme="dark"] .auth-overlay,
[data-theme="dark"] #login-overlay,
:root:not([data-theme="light"]) .auth-overlay,
:root:not([data-theme="light"]) #login-overlay {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(107, 92, 231, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(224, 86, 253, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 90%, rgba(52, 152, 219, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, #050510 0%, #0A0A1A 50%, #0F0F25 100%) !important;
}

/* 다크 모드 스캔라인 효과 */
[data-theme="dark"] .auth-overlay::before,
:root:not([data-theme="light"]) .auth-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(107, 92, 231, 0.02) 2px,
            rgba(107, 92, 231, 0.02) 4px);
    pointer-events: none;
    z-index: 1;
}

/* 다크 모드 로고 - 네온 글로우 */
[data-theme="dark"] #login-overlay h1,
:root:not([data-theme="light"]) #login-overlay h1 {
    font-family: 'Orbitron', sans-serif !important;
    color: #6B5CE7 !important;
    font-size: 3rem !important;
    font-weight: 900 !important;
    margin-bottom: 10px !important;
    text-shadow:
        0 0 10px rgba(107, 92, 231, 0.8),
        0 0 30px rgba(107, 92, 231, 0.6),
        0 0 60px rgba(107, 92, 231, 0.4),
        0 0 100px rgba(107, 92, 231, 0.2) !important;
    text-align: center !important;
    letter-spacing: 8px !important;
    animation: neonPulse 3s ease-in-out infinite;
    z-index: 10;
}

[data-theme="dark"] #login-overlay h1 span,
:root:not([data-theme="light"]) #login-overlay h1 span {
    display: block;
    font-size: 0.4em !important;
    letter-spacing: 12px !important;
    color: #E056FD !important;
    text-shadow:
        0 0 10px rgba(224, 86, 253, 0.8),
        0 0 20px rgba(224, 86, 253, 0.4) !important;
    margin-top: 5px;
}

@keyframes neonPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.85;
    }
}

/* 다크 모드 카드 - 글래스모피즘 사이버 */
[data-theme="dark"] #auth-card,
:root:not([data-theme="light"]) #auth-card {
    width: 90% !important;
    max-width: 420px !important;
    background: rgba(15, 15, 30, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(107, 92, 231, 0.3) !important;
    border-radius: 20px !important;
    box-shadow:
        0 0 40px rgba(107, 92, 231, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
    z-index: 10;
    position: relative;
}

/* 다크 카드 상단 글로우 라인 */
[data-theme="dark"] #auth-card::before,
:root:not([data-theme="light"]) #auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            #6B5CE7 20%,
            #E056FD 50%,
            #6B5CE7 80%,
            transparent);
    animation: glowLine 3s linear infinite;
}

@keyframes glowLine {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* === 라이트 모드 - 블루 아카이브 청량 스타일 === */
[data-theme="light"] .auth-overlay,
[data-theme="light"] #login-overlay {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(135, 206, 250, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 182, 193, 0.3) 0%, transparent 50%),
        linear-gradient(180deg, #E8F4FD 0%, #F0F7FF 50%, #FAFCFF 100%) !important;
}

/* 라이트 모드 플로팅 파티클 효과 */
[data-theme="light"] .auth-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(107, 92, 231, 0.08) 0, transparent 8px),
        radial-gradient(circle at 80% 20%, rgba(52, 211, 153, 0.08) 0, transparent 6px),
        radial-gradient(circle at 60% 70%, rgba(251, 191, 36, 0.08) 0, transparent 10px),
        radial-gradient(circle at 30% 80%, rgba(139, 92, 246, 0.08) 0, transparent 7px);
    pointer-events: none;
    z-index: 1;
}

/* 라이트 모드 로고 - 깔끔한 그라디언트 */
[data-theme="light"] #login-overlay h1 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #6B5CE7 0%, #3B82F6 50%, #06B6D4 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
    text-align: center !important;
    letter-spacing: 6px !important;
    margin-bottom: 10px !important;
    z-index: 10;
}

[data-theme="light"] #login-overlay h1 span {
    display: block;
    font-size: 0.4em !important;
    letter-spacing: 10px !important;
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-top: 5px;
}

/* 라이트 모드 카드 - 부드러운 화이트 글래스 */
[data-theme="light"] #auth-card {
    width: 90% !important;
    max-width: 420px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(107, 92, 231, 0.15) !important;
    border-radius: 24px !important;
    box-shadow:
        0 20px 60px rgba(107, 92, 231, 0.1),
        0 4px 20px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
    z-index: 10;
    position: relative;
}

/* 라이트 카드 상단 그라디언트 바 */
[data-theme="light"] #auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6B5CE7, #3B82F6, #06B6D4, #10B981);
    border-radius: 24px 24px 0 0;
}

/* === 공통 탭 스타일 === */
.auth-tab {
    flex: 1;
    padding: 18px !important;
    background: transparent !important;
    border: none !important;
    font-family: 'Orbitron', sans-serif !important;
    cursor: pointer;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative;
}

[data-theme="dark"] .auth-tab,
:root:not([data-theme="light"]) .auth-tab {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .auth-tab.active,
:root:not([data-theme="light"]) .auth-tab.active {
    color: #6B5CE7 !important;
    background: rgba(107, 92, 231, 0.1) !important;
}

[data-theme="dark"] .auth-tab.active::after,
:root:not([data-theme="light"]) .auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, #6B5CE7, #E056FD);
    border-radius: 2px;
}

[data-theme="light"] .auth-tab {
    color: #64748B !important;
}

[data-theme="light"] .auth-tab.active {
    color: #6B5CE7 !important;
    background: rgba(107, 92, 231, 0.05) !important;
}

[data-theme="light"] .auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg, #6B5CE7, #3B82F6);
    border-radius: 3px;
}

/* === 공통 입력 필드 === */
.cyber-input {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .cyber-input,
:root:not([data-theme="light"]) .cyber-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(107, 92, 231, 0.3) !important;
    color: #F0F0FF !important;
}

[data-theme="dark"] .cyber-input:focus,
:root:not([data-theme="light"]) .cyber-input:focus {
    outline: none !important;
    border-color: #6B5CE7 !important;
    box-shadow: 0 0 20px rgba(107, 92, 231, 0.3) !important;
    background: rgba(107, 92, 231, 0.1) !important;
}

[data-theme="dark"] .cyber-input::placeholder,
:root:not([data-theme="light"]) .cyber-input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="light"] .cyber-input {
    background: #F8FAFC !important;
    border: 2px solid #E2E8F0 !important;
    color: #1E293B !important;
}

[data-theme="light"] .cyber-input:focus {
    outline: none !important;
    border-color: #6B5CE7 !important;
    box-shadow: 0 0 0 4px rgba(107, 92, 231, 0.1) !important;
    background: #FFFFFF !important;
}

[data-theme="light"] .cyber-input::placeholder {
    color: #94A3B8 !important;
}

/* === 버튼 스타일 === */
.cyber-btn,
#auth-card button[type="submit"] {
    width: 100% !important;
    padding: 16px !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .cyber-btn,
[data-theme="dark"] #auth-card button[type="submit"],
:root:not([data-theme="light"]) .cyber-btn,
:root:not([data-theme="light"]) #auth-card button[type="submit"] {
    background: linear-gradient(135deg, #6B5CE7 0%, #8B5CF6 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(107, 92, 231, 0.4) !important;
}

[data-theme="dark"] .cyber-btn:hover,
[data-theme="dark"] #auth-card button[type="submit"]:hover,
:root:not([data-theme="light"]) .cyber-btn:hover,
:root:not([data-theme="light"]) #auth-card button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 6px 30px rgba(107, 92, 231, 0.5),
        0 0 40px rgba(107, 92, 231, 0.3) !important;
}

[data-theme="light"] .cyber-btn,
[data-theme="light"] #auth-card button[type="submit"] {
    background: linear-gradient(135deg, #6B5CE7 0%, #3B82F6 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(107, 92, 231, 0.25) !important;
}

[data-theme="light"] .cyber-btn:hover,
[data-theme="light"] #auth-card button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(107, 92, 231, 0.35) !important;
}

/* === 구글 로그인 버튼 === */
#btn-google-login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

[data-theme="dark"] #btn-google-login,
:root:not([data-theme="light"]) #btn-google-login {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] #btn-google-login:hover,
:root:not([data-theme="light"]) #btn-google-login:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(107, 92, 231, 0.5) !important;
}

[data-theme="light"] #btn-google-login {
    background: #FFFFFF !important;
    border: 2px solid #E2E8F0 !important;
    color: #1E293B !important;
}

[data-theme="light"] #btn-google-login:hover {
    border-color: #6B5CE7 !important;
    box-shadow: 0 4px 15px rgba(107, 92, 231, 0.15) !important;
}

/* ========================================
   미니멀 로그인 UI 추가 스타일
   ======================================== */

/* 탭 컨테이너 */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 폼 바디 */
.auth-form-body {
    padding: 32px 28px !important;
}

/* 입력 그룹 */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

/* 입력 래퍼 (아이콘 포함) */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 14px;
    font-size: 1.1rem;
    z-index: 1;
    pointer-events: none;
}

.input-wrapper .cyber-input {
    padding-left: 48px !important;
    width: 100%;
}

/* 로그인 옵션 */
.login-options {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.2s;
}

[data-theme="dark"] .checkbox-label,
:root:not([data-theme="light"]) .checkbox-label {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .checkbox-label {
    color: #64748B;
}

.checkbox-label:hover {
    color: var(--accent-primary);
}

.checkbox-label input[type="checkbox"] {
    accent-color: var(--accent-primary);
    width: 16px;
    height: 16px;
}

/* 메인 로그인 버튼 */
.auth-submit-btn {
    width: 100%;
    padding: 16px 24px !important;
    border: none;
    border-radius: 14px !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem !important;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

[data-theme="dark"] .auth-submit-btn,
:root:not([data-theme="light"]) .auth-submit-btn {
    background: linear-gradient(135deg, #6B5CE7 0%, #8B5CF6 50%, #A855F7 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(107, 92, 231, 0.4);
}

[data-theme="dark"] .auth-submit-btn:hover,
:root:not([data-theme="light"]) .auth-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px rgba(107, 92, 231, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3);
}

[data-theme="light"] .auth-submit-btn {
    background: linear-gradient(135deg, #6B5CE7 0%, #3B82F6 50%, #06B6D4 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(107, 92, 231, 0.3);
}

[data-theme="light"] .auth-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(107, 92, 231, 0.4);
}

.auth-submit-btn .btn-icon {
    font-size: 1.3rem;
    transition: transform 0.3s;
}

.auth-submit-btn:hover .btn-icon {
    transform: translateX(4px);
}

/* 구분선 */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
}

[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after,
:root:not([data-theme="light"]) .auth-divider::before,
:root:not([data-theme="light"]) .auth-divider::after {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .auth-divider::before,
[data-theme="light"] .auth-divider::after {
    background: #E2E8F0;
}

.auth-divider span {
    font-size: 0.85rem;
    font-weight: 500;
}

[data-theme="dark"] .auth-divider span,
:root:not([data-theme="light"]) .auth-divider span {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .auth-divider span {
    color: #94A3B8;
}

/* 구글 로그인 버튼 (미니멀 버전) */
.google-login-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

[data-theme="dark"] .google-login-btn,
:root:not([data-theme="light"]) .google-login-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

[data-theme="dark"] .google-login-btn:hover,
:root:not([data-theme="light"]) .google-login-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(107, 92, 231, 0.5);
}

[data-theme="light"] .google-login-btn {
    background: #FFFFFF;
    border: 2px solid #E2E8F0;
    color: #374151;
}

[data-theme="light"] .google-login-btn:hover {
    border-color: #6B5CE7;
    background: #FAFAFA;
    box-shadow: 0 4px 12px rgba(107, 92, 231, 0.1);
}

/* 클라우드 안내 */
.cloud-notice {
    text-align: center;
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
}

[data-theme="dark"] .cloud-notice,
:root:not([data-theme="light"]) .cloud-notice {
    color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .cloud-notice {
    color: #94A3B8;
}

/* 에러 메시지 */
.auth-message {
    text-align: center;
    font-size: 0.9rem;
    min-height: 20px;
    margin-top: 12px;
    color: #EF4444;
}

/* ========================================
   상단 헤더바 (Top Bar) 테마
   ======================================== */

#main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    transition: all var(--transition-normal);
    position: relative;
    z-index: 100;
}

/* 다크 모드 헤더 - 니케 스타일 */
[data-theme="dark"] #main-header,
:root:not([data-theme="light"]) #main-header {
    background: linear-gradient(180deg, rgba(15, 15, 30, 0.95) 0%, rgba(15, 15, 30, 0.85) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(107, 92, 231, 0.2) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(107, 92, 231, 0.1) !important;
}

/* 라이트 모드 헤더 - 블루아카이브 스타일 */
[data-theme="light"] #main-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(107, 92, 231, 0.1) !important;
    box-shadow: 0 4px 20px rgba(107, 92, 231, 0.08) !important;
}

/* 유저 정보 영역 */
#user-info-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

[data-theme="dark"] #user-info-area,
:root:not([data-theme="light"]) #user-info-area {
    color: var(--text-primary);
}

[data-theme="light"] #user-info-area {
    color: #1E293B;
}

/* DIRECTOR 라벨 */
#user-info-area>div:first-child {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 2px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

[data-theme="dark"] #user-info-area>div:first-child,
:root:not([data-theme="light"]) #user-info-area>div:first-child {
    background: linear-gradient(135deg, rgba(107, 92, 231, 0.3), rgba(139, 92, 246, 0.2)) !important;
    color: #A78BFA !important;
    border: 1px solid rgba(107, 92, 231, 0.3) !important;
    text-shadow: 0 0 10px rgba(107, 92, 231, 0.5);
}

[data-theme="light"] #user-info-area>div:first-child {
    background: linear-gradient(135deg, rgba(107, 92, 231, 0.1), rgba(59, 130, 246, 0.1)) !important;
    color: #6B5CE7 !important;
    border: 1px solid rgba(107, 92, 231, 0.2) !important;
}

/* 유저 이름 */
#header-user-name {
    font-weight: 600;
    font-size: 0.95rem;
}

/* 레벨 뱃지 */
#header-user-level {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
}

[data-theme="dark"] #header-user-level,
:root:not([data-theme="light"]) #header-user-level {
    background: rgba(255, 215, 0, 0.15) !important;
    color: #FFD700 !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

[data-theme="light"] #header-user-level {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #D97706 !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

/* DIRECTOR 라벨 (user-role-badge) */
.user-role-badge {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 2px;
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--accent-primary);
}

[data-theme="dark"] .user-role-badge,
:root:not([data-theme="light"]) .user-role-badge {
    background: linear-gradient(135deg, rgba(107, 92, 231, 0.3), rgba(139, 92, 246, 0.2));
    color: #A78BFA;
    border: 1px solid rgba(107, 92, 231, 0.3);
    text-shadow: 0 0 10px rgba(107, 92, 231, 0.5);
}

[data-theme="light"] .user-role-badge {
    background: linear-gradient(135deg, rgba(107, 92, 231, 0.1), rgba(59, 130, 246, 0.1));
    color: #6B5CE7;
    border: 1px solid rgba(107, 92, 231, 0.2);
}

/* 헤더 액션 버튼 그룹 */
.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 로그아웃 버튼 */
.logout-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
}

/* 유틸리티: 숨김 */
.hidden {
    display: none !important;
}

/* 로비 버튼 그룹 */
#lobby-buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

#btn-lobby-manage {
    opacity: 0.9;
}

#btn-lobby-date {
    background: linear-gradient(135deg, #e91e63, #ad1457) !important;
}

#btn-outpost-claim {
    background: linear-gradient(135deg, #f39c12, #d35400) !important;
    position: relative;
}

#outpost-badge {
    display: none;
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
}

/* 로그 컨텐츠 */
#log-content {
    height: 200px;
    font-size: 0.8rem;
    color: #8b949e;
    padding: 10px;
}

/* ========================================
   메인 레이아웃 (내용 영역)
   ======================================== */

/* 홈 레이아웃 - 크리처 중심 3열 구조 */
.layout-dashboard {
    display: grid !important;
    grid-template-columns: 300px minmax(300px, 1fr) 280px;
    grid-template-rows: 1fr;
    gap: 15px;
    height: 100%;
    padding: 15px;
    align-items: start;
}

#left-panel {
    grid-column: 1;
    display: flex !important;
    flex-direction: column;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

/* 중앙 로비 캐릭터 - 1:1 비율 유지 */
#lobby-character-panel {
    grid-column: 2;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

#lobby-character-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    overflow: hidden;
}

#lobby-character-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

#center-panel {
    /* lobby.css에서 스타일 적용 - 여기서 숨기지 않음 */
}

#right-panel {
    grid-column: 3;
    display: flex !important;
    flex-direction: column;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

/* 리소스 바 */
.resource-bar {
    display: flex;
    gap: 20px;
    align-items: center;
}

.res-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

[data-theme="dark"] .res-item,
:root:not([data-theme="light"]) .res-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .res-item {
    background: rgba(107, 92, 231, 0.05);
    border: 1px solid rgba(107, 92, 231, 0.1);
}

.res-item:hover {
    transform: translateY(-2px);
}

[data-theme="dark"] .res-item:hover,
:root:not([data-theme="light"]) .res-item:hover {
    background: rgba(107, 92, 231, 0.15);
    border-color: rgba(107, 92, 231, 0.3);
    box-shadow: 0 4px 15px rgba(107, 92, 231, 0.2);
}

[data-theme="light"] .res-item:hover {
    background: rgba(107, 92, 231, 0.1);
    border-color: rgba(107, 92, 231, 0.2);
    box-shadow: 0 4px 15px rgba(107, 92, 231, 0.1);
}

.res-icon {
    font-size: 1.1rem;
}

.res-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
}

[data-theme="dark"] .res-value,
:root:not([data-theme="light"]) .res-value {
    color: #F0F0FF;
}

[data-theme="light"] .res-value {
    color: #1E293B;
}

/* 헤더 버튼들 */
#main-header .cyber-btn.small {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="dark"] #main-header .cyber-btn.small,
:root:not([data-theme="light"]) #main-header .cyber-btn.small {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] #main-header .cyber-btn.small:hover,
:root:not([data-theme="light"]) #main-header .cyber-btn.small:hover {
    background: rgba(107, 92, 231, 0.2) !important;
    border-color: rgba(107, 92, 231, 0.4) !important;
    box-shadow: 0 0 15px rgba(107, 92, 231, 0.3) !important;
}

[data-theme="light"] #main-header .cyber-btn.small {
    background: rgba(107, 92, 231, 0.08) !important;
    border: 1px solid rgba(107, 92, 231, 0.15) !important;
}

[data-theme="light"] #main-header .cyber-btn.small:hover {
    background: rgba(107, 92, 231, 0.15) !important;
    border-color: rgba(107, 92, 231, 0.3) !important;
    box-shadow: 0 4px 15px rgba(107, 92, 231, 0.15) !important;
}

/* ========================================
   하단 네비게이션 독 (Bottom Dock) 테마
   블루아카이브 스타일 탭 바
   ======================================== */

#bottom-dock {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 8px 12px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    transition: all var(--transition-normal) !important;
}

/* 다크 모드 독 - 니케 스타일 */
[data-theme="dark"] #bottom-dock,
:root:not([data-theme="light"]) #bottom-dock {
    background: linear-gradient(180deg, rgba(15, 15, 30, 0.98) 0%, rgba(10, 10, 20, 0.99) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(107, 92, 231, 0.25) !important;
    box-shadow:
        0 -8px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(107, 92, 231, 0.1) !important;
}

/* 라이트 모드 독 - 블루아카이브 스타일 */
[data-theme="light"] #bottom-dock {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.99) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(107, 92, 231, 0.12) !important;
    box-shadow: 0 -8px 30px rgba(107, 92, 231, 0.08) !important;
}

/* 네비게이션 아이템 */
#bottom-dock .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    min-width: 60px !important;
}

#bottom-dock .nav-item .icon {
    font-size: 1.4rem !important;
    transition: transform 0.25s ease !important;
}

#bottom-dock .nav-item span:not(.icon) {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* 다크 모드 네비 아이템 */
[data-theme="dark"] #bottom-dock .nav-item,
:root:not([data-theme="light"]) #bottom-dock .nav-item {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] #bottom-dock .nav-item:hover,
:root:not([data-theme="light"]) #bottom-dock .nav-item:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(107, 92, 231, 0.1) !important;
}

[data-theme="dark"] #bottom-dock .nav-item:hover .icon,
:root:not([data-theme="light"]) #bottom-dock .nav-item:hover .icon {
    transform: translateY(-2px) scale(1.1) !important;
}

[data-theme="dark"] #bottom-dock .nav-item.active,
:root:not([data-theme="light"]) #bottom-dock .nav-item.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, rgba(107, 92, 231, 0.25), rgba(139, 92, 246, 0.15)) !important;
    box-shadow:
        0 4px 15px rgba(107, 92, 231, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* 다크 모드 활성 탭 인디케이터 */
[data-theme="dark"] #bottom-dock .nav-item.active::after,
:root:not([data-theme="light"]) #bottom-dock .nav-item.active::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 30px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #6B5CE7, #E056FD) !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 0 10px rgba(107, 92, 231, 0.5) !important;
}

/* 라이트 모드 네비 아이템 */
[data-theme="light"] #bottom-dock .nav-item {
    color: #64748B !important;
}

[data-theme="light"] #bottom-dock .nav-item:hover {
    color: #6B5CE7 !important;
    background: rgba(107, 92, 231, 0.08) !important;
}

[data-theme="light"] #bottom-dock .nav-item:hover .icon {
    transform: translateY(-2px) scale(1.1) !important;
}

[data-theme="light"] #bottom-dock .nav-item.active {
    color: #6B5CE7 !important;
    background: linear-gradient(135deg, rgba(107, 92, 231, 0.12), rgba(59, 130, 246, 0.08)) !important;
    box-shadow: 0 4px 15px rgba(107, 92, 231, 0.15) !important;
}

/* 라이트 모드 활성 탭 인디케이터 */
[data-theme="light"] #bottom-dock .nav-item.active::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 30px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #6B5CE7, #3B82F6) !important;
    border-radius: 0 0 4px 4px !important;
}

/* 활성 아이콘 애니메이션 */
#bottom-dock .nav-item.active .icon {
    animation: navBounce 0.4s ease !important;
}

@keyframes navBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* ========================================
   Glass Panel 공통 컴포넌트 고도화
   ======================================== */

.glass-panel {
    border-radius: var(--border-radius-md) !important;
    transition: all var(--transition-normal) !important;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .glass-panel,
:root:not([data-theme="light"]) .glass-panel {
    background: rgba(15, 15, 30, 0.8) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(107, 92, 231, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .glass-panel:hover,
:root:not([data-theme="light"]) .glass-panel:hover {
    border-color: rgba(107, 92, 231, 0.25) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(107, 92, 231, 0.1) !important;
}

[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(107, 92, 231, 0.1) !important;
    box-shadow: 0 8px 32px rgba(107, 92, 231, 0.08) !important;
}

[data-theme="light"] .glass-panel:hover {
    border-color: rgba(107, 92, 231, 0.2) !important;
    box-shadow: 0 12px 40px rgba(107, 92, 231, 0.12) !important;
}

/* ========================================
   세계관별 로비 배경 테마
   ======================================== */
.lobby-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease;
}

/* 기본 배경 (세계관 없음) */
.lobby-background.theme-default {
    background: var(--bg-world-default);
}

/* Asgard 테마 */
.lobby-background.theme-asgard {
    background-image: var(--bg-world-asgard);
    background-color: #0a1a2a;
}

/* Olympus 테마 */
.lobby-background.theme-olympus {
    background-image: var(--bg-world-olympus);
    background-color: #1a1510;
}

/* Abyss 테마 */
.lobby-background.theme-abyss {
    background-image: var(--bg-world-abyss);
    background-color: #0a0515;
}

/* Shangri-La 테마 */
.lobby-background.theme-shangrila {
    background-image: var(--bg-world-shangrila);
    background-color: #0a1a15;
}

/* 홀로그램 스캔 오버레이 */
.lobby-background .hologram-scan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 229, 255, 0.02) 50%, transparent 100%);
    background-size: 100% 300%;
    animation: hologramScan 8s linear infinite;
    pointer-events: none;
}

@keyframes hologramScan {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 0% 300%;
    }
}

/* 관측창 비네팅 */
.lobby-background .vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* ========================================
   새 로비 레이아웃
   ======================================== */
.lobby-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

/* 로비 모드일 때 헤더 스타일 오버라이드 (완전 투명) */
body.lobby-active #game-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%) !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

body.lobby-active #game-header .user-role-badge,
body.lobby-active #game-header .res-item {
    background: rgba(0, 0, 0, 0.3) !important;
    /* 가독성 위해 요소별 약한 배경 */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.lobby-character-stage {
    position: fixed;
    top: 60px;
    bottom: 90px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.lobby-character-image {
    max-height: 75vh;
    max-width: 90%;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(107, 92, 231, 0.4));
    animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {

    0%,
    100% {
        transform: scaleY(1) translateY(0);
    }

    50% {
        transform: scaleY(1.015) translateY(-3px);
    }
}

#lobby-speech-bubble {
    position: absolute;
    top: 20%;
    right: 15%;
    /* 캐릭터 우측 상단 */
    background: rgba(15, 15, 30, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(100, 200, 255, 0.3);
    border-radius: 12px 12px 12px 0;
    /* 말풍선 꼬리 느낌 */
    padding: 15px 20px;
    max-width: 260px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e0f7fa;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 20;
    pointer-events: none;
    /* 클릭 통과 */
}

#lobby-speech-bubble.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#lobby-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 10px solid rgba(15, 15, 30, 0.7);
    border-right: 15px solid transparent;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}

#lobby-speech-text {
    display: inline-block;
}

/* 타이핑 커서 효과 */
#lobby-speech-text::after {
    content: '|';
    animation: blink 1s step-end infinite;
    color: var(--accent-cyan);
    margin-left: 2px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.lobby-interaction-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.lobby-interaction-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(107, 92, 231, 0.3);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.lobby-interaction-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(107, 92, 231, 0.4);
}

/* 새 하단 네비게이션 독 */
.lobby-bottom-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 20px 20px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 30%, rgba(15, 15, 30, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(107, 92, 231, 0.2);
}

.lobby-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 12px;
    position: relative;
}

.lobby-nav-item:hover {
    color: var(--accent-primary);
}

.lobby-nav-item.active {
    color: #00e5ff;
}

.lobby-nav-item.active .nav-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px #00e5ff);
}

.lobby-nav-item .nav-icon {
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.lobby-nav-item .nav-label {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ========================================
   로비 배경 표시를 위한 컨테이너 투명화
   ======================================== */
/* 홈 탭이 활성화될 때만 배경을 투명하게 */
body.lobby-active,
body.lobby-active #app-container {
    background: transparent !important;
}

/* 홈 탭이 아닌 다른 탭에서는 기존 배경 유지 */
body:not(.lobby-active) .lobby-background {
    opacity: 0;
    pointer-events: none;
}

body.lobby-active .lobby-background {
    opacity: 1;
}

/* ========================================
   로비 UI 디테일링 (Glassmorphism & Layout)
   ======================================== */

/* 로비 활성화 시 패널 스타일 재정의 */
body.lobby-active #left-panel,
body.lobby-active #right-panel {
    background: rgba(0, 0, 0, 0.15) !important;
    /* 더 투명하게 변경 */
    backdrop-filter: blur(4px) !important;
    /* 블러 감소로 배경 강조 */
    border-color: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* [NEW] 로비 모드에서 중앙 상세 패널은 숨김 (캐릭터 감상 방해) */
body.lobby-active #center-panel {
    display: none !important;
}

/* 마우스 오버 시에만 조금 더 선명하게 */
/* 좌측 패널: 로비에서도 보이도록 복구 (리스트/필터 접근성 보장) */
/* 좌측 패널: 로비에서도 보이도록 복구 (리스트/필터 접근성 보장) - OVERLAY MODE */
body.lobby-active #left-panel {
    display: flex !important;
    position: fixed !important;
    /* Grid 탈출 */
    top: 100px;
    bottom: 120px;
    /* 하단 Dock 공간 확보 */
    left: 20px;
    width: 320px !important;
    background: rgba(10, 10, 15, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px;
    z-index: 50;
    /* 캐릭터(5)보다 위 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

/* 우측 패널: 로그 등 (위치 고정) */
body.lobby-active #right-panel {
    display: flex !important;
    position: fixed !important;
    top: 100px;
    bottom: 120px;
    right: 20px;
    width: 300px !important;
    background: rgba(10, 10, 15, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px;
    z-index: 50;
    pointer-events: auto;
}

/* 로비 캐릭터 래퍼: 배경 제거하여 캐릭터가 공간에 있는 느낌 강조 */
body.lobby-active #lobby-character-wrapper {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    /* 화면 꽉 채우기 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    /* 배경 바로 위 */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* 바닥 기준 배치 */
    pointer-events: none;
    /* 클릭 통과 (버튼 등 상호작용 위해) */
}

/* 캐릭터 이미지: 크기 및 위치 대폭 확대 */
body.lobby-active #lobby-character-img {
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
    transform-origin: bottom center;
    height: 95vh;
    /* 화면 높이의 95% */
    width: auto;
    max-width: none;
    /* 너비 제한 해제 */
    object-fit: cover;
    /* 꽉 차게 */
    position: absolute;
    bottom: -5vh;
    /* 약간 아래로 내려서 자연스럽게 */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    /* 캐릭터 터치 가능 */
    z-index: 6;
}

/* [Removed] 아래 규칙이 라인 1795의 display:flex를 덮어써서 제거함
body.lobby-active #left-panel {
    display: none !important;
}
*/

/* 테마별 가독성 변수 정의 */
:root {
    --lobby-text-color: #ffffff;
    --lobby-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    --lobby-ui-bg: rgba(0, 0, 0, 0.5);
}

/* 밝은 테마 (샹그릴라, 아스가르드 등) */
body.theme-shangrila,
body.theme-asgard {
    --lobby-text-color: #0f172a;
    /* 진한 남색 */
    --lobby-text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    --lobby-ui-bg: rgba(255, 255, 255, 0.3);
}

/* 텍스트 요소에 변수 적용 */
.user-name,
.res-value,
.lobby-speech-bubble {
    color: var(--lobby-text-color) !important;
    text-shadow: var(--lobby-text-shadow) !important;
}

/* 중앙 버튼 그룹: 캐릭터 우측 하단으로 이동 및 스타일링 */
/* 중앙 버튼 그룹: 화면 우측 하단 고정 (패널 독립적) */
body.lobby-active #lobby-buttons {
    position: fixed !important;
    /* 캐릭터 래퍼 기준이 아닌 화면 기준 고정 */
    bottom: 30px;
    right: 30px;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    /* 세로 배치 */
    gap: 12px;
    align-items: flex-end;
    /* 우측 정렬 */
    z-index: 100;
    /* 캐릭터(10)보다 위 */
    pointer-events: auto;
}

/* 로비 버튼 개별 스타일: 심플한 아이콘+텍스트 */
/* 로비 버튼 개별 스타일: 심플하고 세련된 아이콘+텍스트 */
body.lobby-active #lobby-buttons .cyber-btn {
    background: rgba(15, 15, 20, 0.6) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 200, 255, 0.2) !important;
    border-radius: 8px !important;
    /* 둥근 사각형 느낌 */
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: auto !important;
    min-width: 120px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.lobby-active #lobby-buttons .cyber-btn:hover {
    background: rgba(100, 200, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #000 !important;
    /* 호버 시 텍스트 검정으로 반전 */
    transform: translateX(-5px);
    /* 왼쪽으로 살짝 이동 */
    box-shadow: 0 0 15px rgba(100, 200, 255, 0.5);
}

/* 관리 버튼 강조 */
body.lobby-active #btn-lobby-manage {
    border-left: 3px solid var(--accent-cyan) !important;
}

/* 데이트 버튼 강조 */
body.lobby-active #btn-lobby-date {
    border-left: 3px solid var(--accent-pink) !important;
}

/* 정찰 보상 뱃지 */
#outpost-badge {
    top: -5px;
    right: -5px;
    box-shadow: 0 0 8px red;
}

/* ========================================
   소환 화면 (Summon View) 디자인 리뉴얼
   ======================================== */

#content-summon {
    position: relative;
    overflow: hidden;
}

/* 1. 배경 (차원 관문 효과) */
.summon-gate-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 40%, #2a0a38 0%, #0a0515 70%, #000 100%);
    z-index: 0;
}

.summon-gate-background::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 120vw;
    background: conic-gradient(from 0deg, transparent 0%, rgba(167, 139, 250, 0.1) 20%, transparent 40%, rgba(0, 229, 255, 0.1) 60%, transparent 100%);
    transform: translate(-50%, -50%);
    animation: gateRotate 20s linear infinite;
    opacity: 0.6;
}

@keyframes gateRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 2. 메인 인터페이스 레이아웃 */
.summon-interface {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

/* 3. 상단 배너 영역 */
.summon-banner-area {
    flex: 1;
    /* 남는 공간 차지 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.banner-title {
    text-align: center;
    margin-bottom: 20px;
    animation: fadeInDown 0.8s ease-out;
}

.banner-title h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    background: linear-gradient(to right, #fff, #00e5ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
}

.banner-title p {
    color: #a78bfa;
    font-size: 0.9rem;
    margin: 5px 0 0;
    opacity: 0.8;
}

.current-banner {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(107, 92, 231, 0.2);
    transition: transform 0.3s ease;
}

.current-banner:hover {
    transform: scale(1.02);
    box-shadow: 0 0 60px rgba(107, 92, 231, 0.4);
}

.banner-visual-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20, 10, 40, 0.8), rgba(0, 0, 0, 0.8)), url('/images/creatures/abyss/creature_kraken.jpg') center/cover;
    /* 기본 이미지로 크라켄 사용 */
    color: white;
}

.banner-visual-placeholder span {
    background: var(--accent-gold);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 15px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.banner-visual-placeholder h3 {
    font-size: 1.8rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    margin: 0;
}

/* 4. 하단 컨트롤 패널 */
.summon-control-panel {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 80px;
    /* 독 위 공간 확보 */
    flex-wrap: wrap;
    /* 모바일 대응 */
}

.summon-group {
    background: rgba(15, 15, 30, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.summon-group:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.summon-group.premium {
    background: linear-gradient(180deg, rgba(20, 10, 40, 0.7) 0%, rgba(107, 92, 231, 0.1) 100%);
    border-top: 1px solid rgba(167, 139, 250, 0.3);
    box-shadow: 0 0 30px rgba(107, 92, 231, 0.1);
}

.group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #a78bfa;
    font-size: 0.9rem;
    font-weight: 600;
}

.premium .group-header {
    color: #d8b4fe;
}

.normal .group-header {
    color: #9ca3af;
}

.btn-row {
    display: flex;
    gap: 10px;
}

.summon-btn {
    flex: 1;
    position: relative;
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 프리미엄 버튼 스타일 */
.summon-btn.glass-holo {
    background: rgba(107, 92, 231, 0.2);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: white;
}

.summon-btn.glass-holo:hover {
    background: rgba(107, 92, 231, 0.4);
    box-shadow: 0 0 20px rgba(107, 92, 231, 0.6);
    border-color: #d8b4fe;
}

/* 10회 소환 강조 */
.summon-btn.glass-holo.accent {
    background: linear-gradient(135deg, rgba(107, 92, 231, 0.4), rgba(139, 92, 246, 0.3));
    border: 1px solid rgba(167, 139, 250, 0.5);
}

.summon-btn.glass-holo.accent:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(107, 92, 231, 0.6), rgba(139, 92, 246, 0.5));
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.2);
}

/* 일반 버튼 스타일 */
.summon-btn.glass-basic {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

.summon-btn.glass-basic:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.summon-btn .label {
    font-size: 0.9rem;
    font-weight: 500;
}

.summon-btn .cost {
    font-size: 0.85rem;
    font-family: 'Orbitron', monospace;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 4px;
}

.summon-btn .tag {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* =========================================
   [NEW] Lobby UI Overlay Styles
   ========================================= */

#lobby-ui-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through to character/canvas */
    z-index: 20;
    /* Above character (10), below modals (100+) */
    display: none;
    /* Default hidden */
}

body.lobby-active #lobby-ui-overlay {
    display: block;
}

/* --- Right Action Group --- */
.lobby-right-actions {
    position: absolute;
    bottom: 110px;
    /* Above bottom dock */
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    pointer-events: auto;
}

.lobby-action-btn {
    background: rgba(15, 15, 20, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 200, 255, 0.2);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lobby-text-color, #fff);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.lobby-action-btn:hover {
    transform: translateX(-5px);
    background: rgba(100, 200, 255, 0.9);
    color: #000;
    box-shadow: 0 0 15px rgba(100, 200, 255, 0.5);
}

.lobby-action-btn .icon {
    font-size: 1.2rem;
}

/* Special style for Reward button */
.lobby-action-btn.special {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.lobby-action-btn.special:hover {
    background: var(--accent-orange);
    color: #fff;
}

.lobby-action-btn .badge {
    background: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.7rem;
    margin-left: 5px;
    display: none;
}

/* --- Bottom Dock --- */
.lobby-bottom-dock {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.4) 70%, transparent);
    padding-bottom: 25px;
    /* 공간 확보 */
    pointer-events: auto;
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 65px;
    height: 65px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: rgba(255, 255, 255, 0.6);
}

.dock-item:hover {
    transform: translateY(-10px) scale(1.1);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.dock-item.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(107, 92, 231, 0.5);
    transform: translateY(-5px);
}

.dock-item .dock-icon {
    font-size: 1.5rem;
}

.dock-item .dock-label {
    font-size: 0.75rem;
    font-weight: 500;
}

/* --- Global Background System (Replaces Wrapper BG) --- */
#global-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    /* 최하단 레이어 */
    background-color: #000;
    transition: background-image 0.8s ease-in-out;
}

#global-background.bg-olympus {
    background: url('../images/backgrounds/bg_olympus.png') no-repeat center center/cover !important;
}

#global-background.bg-asgard {
    background: url('../images/backgrounds/bg_asgard.png') no-repeat center center/cover !important;
}

#global-background.bg-abyss {
    background: url('../images/backgrounds/bg_abyss.png') no-repeat center center/cover !important;
}

#global-background.bg-shangrila {
    background: url('../images/backgrounds/bg_shangrila.png') no-repeat center center/cover !important;
}

#global-background.bg-default {
    background: url('../images/backgrounds/bg_sky.jpg') no-repeat center center/cover !important;
}

/* Ensure wrapper doesn't double-draw */
#lobby-character-wrapper {
    background: none !important;
}

#lobby-character-wrapper.bg-abyss {
    background: url('../images/bg/bg_abyss.jpg') no-repeat center center/cover !important;
}

#lobby-character-wrapper.bg-shangrila {
    background: url('../images/bg/bg_shangrila.jpg') no-repeat center center/cover !important;
}

#lobby-character-wrapper.bg-default {
    background: url('../images/bg_main.jpg') no-repeat center center/cover !important;
}

/* [UI REMASTER v2.0] Glassmorphism & Blue Archive Style */
:root {
    --glass-bg: rgba(20, 20, 35, 0.85);
    --glass-border: 1px solid rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.6);
}

/* Glass Modal Overlay */
.modal-glass {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px) saturate(120%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

/* Modal Container (Split View) */
.creature-detail-container {
    display: flex;
    width: 90%;
    max-width: 1100px;
    height: 75vh;
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.9), rgba(30, 30, 45, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transform: scale(0.95);
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Left Panel: Visual */
.split-view-visual {
    flex: 1.2;
    position: relative;
    background: #1a1a2e;
    /* Fallback color */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Blurred Background Layer */
.visual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    filter: blur(15px) brightness(0.4) saturate(1.2);
    z-index: 0;
    transform: scale(1.1);
    /* Prevent blur edge artifacts */
}

/* Foreground Image */
.split-view-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease;
    z-index: 1;
    position: relative;
}

.split-view-visual:hover img {
    transform: scale(1.03) translateY(-5px);
}

/* Right Panel: Info */
.split-view-info {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Modern Speech Bubble (Floating) */
.speech-bubble-modern {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a2e;
    padding: 12px 24px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.speech-bubble-modern.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Lobby Specific Bubble Override */
#lobby-speech-bubble {
    bottom: auto;
    top: 20%;
    left: 80%;
    /* 캐릭터 오른쪽 상단 */
    transform: translateX(0);
    max-width: 250px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
}

/* Active State for lobby bubble */
#lobby-speech-bubble.active {
    transform: translateX(0) translateY(-10px);
}

[data-theme='dark'] .speech-bubble-modern {
    background: rgba(30, 30, 45, 0.95);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* =========================================
   [FIX] Global Background Theme Classes
   LobbyView에서 사용하는 배경 클래스 강제 지정
   ========================================= */
#global-background {
    transition: background-image 0.5s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#global-background.bg-default {
    background: var(--bg-world-default);
}

#global-background.bg-asgard {
    background-image: var(--bg-world-asgard);
}

#global-background.bg-olympus {
    background-image: var(--bg-world-olympus);
}

#global-background.bg-abyss {
    background-image: var(--bg-world-abyss);
}

#global-background.bg-shangrila {
    background-image: var(--bg-world-shangrila);
}

/* Animations */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes popIn {
    to {
        transform: scale(1);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modern Button Grid */
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-modern-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ddd;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-modern-action:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* === MODAL UI REMASTER v3.0 === */

/* Action Card Button */
.action-card {
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.8), rgba(30, 30, 50, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #ccc;
}

.action-card:hover {
    background: linear-gradient(145deg, rgba(60, 60, 90, 0.9), rgba(50, 50, 80, 1));
    border-color: var(--accent-primary, #4fc3f7);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    color: #fff;
}

.action-card .icon {
    font-size: 1.6rem;
}

.action-card .label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-card.highlight {
    border-color: #ffd700;
    background: linear-gradient(145deg, rgba(80, 70, 20, 0.6), rgba(60, 50, 10, 0.8));
}

.action-card.highlight:hover {
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.action-card.accent {
    border-color: #4fc3f7;
    background: linear-gradient(145deg, rgba(20, 60, 80, 0.6), rgba(10, 40, 60, 0.8));
}

.action-card.accent:hover {
    box-shadow: 0 8px 25px rgba(79, 195, 247, 0.3);
}

.action-card.locked {
    border-color: #ef5350;
    background: linear-gradient(145deg, rgba(80, 30, 30, 0.6), rgba(60, 20, 20, 0.8));
}

/* Detail Header */
.detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.detail-header .creature-name {
    flex: 1;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn-close-clean {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-close-clean:hover {
    opacity: 1;
}

/* Rarity Badge */
.rarity-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rarity-badge.normal {
    background: linear-gradient(135deg, #607d8b, #455a64);
    color: #fff;
}

.rarity-badge.unique {
    background: linear-gradient(135deg, #66bb6a, #43a047);
    color: #fff;
}

.rarity-badge.rare {
    background: linear-gradient(135deg, #42a5f5, #1e88e5);
    color: #fff;
}

.rarity-badge.special {
    background: linear-gradient(135deg, #ab47bc, #8e24aa);
    color: #fff;
}

.rarity-badge.sr {
    background: linear-gradient(135deg, #ff7043, #e64a19);
    color: #fff;
}

.rarity-badge.ssr {
    background: linear-gradient(135deg, #ef5350, #c62828);
    color: #fff;
}

.rarity-badge.ur {
    background: linear-gradient(135deg, #ffd700, #ff8f00);
    color: #000;
}

/* Detail Tags */
.detail-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.detail-tags span {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #aaa;
}

/* Level Section */
.level-section {
    margin-bottom: 15px;
}

.level-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.lv-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.exp-label {
    color: #4fc3f7;
    font-weight: 600;
}

.progress-bar-container {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4fc3f7, #29b6f6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Affection Card */
.affection-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 100, 100, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.affection-card .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.affection-card .heart-icon {
    font-size: 1.2rem;
}

.affection-card .aff-title {
    font-weight: 600;
    color: #ff8a80;
}

.affection-card .aff-lv {
    margin-left: auto;
    color: #fff;
    font-weight: 700;
}

.aff-bar-container {
    height: 6px;
    background: rgba(255, 100, 100, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.aff-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff8a80, #ff5252);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.aff-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #aaa;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.stat-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #ccc;
}

.stat-item .icon {
    font-size: 1.1rem;
}

.stat-item .val {
    margin-left: auto;
    font-weight: 700;
    color: #fff;
}

.stat-item .val.red {
    color: #ff8a80;
}

.stat-item .val.yellow {
    color: #ffd54f;
}

.stat-item .val.green {
    color: #81c784;
}

/* Equipment Slots */
.equip-slots {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.equip-slots .slot {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.equip-slots .slot:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-primary, #4fc3f7);
}

.equip-slots .slot .icon {
    font-size: 1.3rem;
}

.equip-slots .slot.empty {
    opacity: 0.6;
}

/* ========================================
   🌞 라이트 모드 - 글로벌 컴포넌트 테마
   Blue Archive 청량 스타일
   ======================================== */

/* === 헤더 === */
[data-theme="light"] #game-header {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(240, 248, 255, 0.9) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] #game-header .user-role-badge {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: white;
}

[data-theme="light"] #game-header #header-user-name,
[data-theme="light"] #game-header #header-user-level {
    color: var(--text-primary);
}

[data-theme="light"] #game-header .res-item {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] #game-header .res-value {
    color: var(--text-primary);
}

[data-theme="light"] #game-header .header-actions .cyber-btn {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

[data-theme="light"] #game-header .header-actions .cyber-btn:hover {
    background: rgba(59, 130, 246, 0.2);
}

/* === 하단 네비게이션 === */
[data-theme="light"] .lobby-bottom-dock,
[data-theme="light"] #global-bottom-nav {
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.9) 30%,
            rgba(240, 248, 255, 0.98) 100%);
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(20px);
}

[data-theme="light"] .dock-item,
[data-theme="light"] .lobby-nav-item {
    color: #64748b;
}

[data-theme="light"] .dock-item:hover,
[data-theme="light"] .lobby-nav-item:hover {
    color: #3b82f6;
}

[data-theme="light"] .dock-item.active,
[data-theme="light"] .lobby-nav-item.active {
    color: #3b82f6;
}

[data-theme="light"] .dock-item.active .dock-icon,
[data-theme="light"] .lobby-nav-item.active .nav-icon {
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

[data-theme="light"] .dock-label,
[data-theme="light"] .nav-label {
    color: inherit;
}

/* === 글래스 패널 === */
[data-theme="light"] .glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
}

[data-theme="light"] .glass-panel .panel-header,
[data-theme="light"] .glass-panel .panel-tabs {
    background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.1) 0%,
            transparent 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .glass-panel h2,
[data-theme="light"] .glass-panel h3 {
    color: #1e40af;
}

/* === 버튼 === */
[data-theme="light"] .cyber-btn {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .cyber-btn:hover {
    background: linear-gradient(135deg, #2563eb, #0891b2);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

[data-theme="light"] .cyber-btn.small {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: none;
}

[data-theme="light"] .cyber-btn.small:hover {
    background: rgba(59, 130, 246, 0.2);
}

/* === 드롭다운 (Select) === */
[data-theme="light"] .cyber-select {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #1e293b;
}

[data-theme="light"] .cyber-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* === 모달 === */
[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .modal-content,
[data-theme="light"] .modal-content.glass-panel {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(240, 248, 255, 0.95) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
}

[data-theme="light"] .modal-content h2,
[data-theme="light"] .modal-content h3 {
    color: #1e40af;
}

[data-theme="light"] .modal-content .btn-close,
[data-theme="light"] .modal-content .btn-close-clean {
    color: #64748b;
}

[data-theme="light"] .modal-content .btn-close:hover,
[data-theme="light"] .modal-content .btn-close-clean:hover {
    color: #1e40af;
}

/* === 크리처 카드 === */
[data-theme="light"] .creature-card-mini {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .creature-card-mini:hover {
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .creature-card-mini .card-overlay,
[data-theme="light"] .creature-card-mini .info {
    background: linear-gradient(0deg,
            rgba(255, 255, 255, 0.95) 0%,
            transparent 100%);
}

[data-theme="light"] .creature-card-mini .card-name {
    color: #1e293b;
}

[data-theme="light"] .creature-card-mini .card-stats {
    color: #64748b;
}

/* === 토스트 알림 === */
[data-theme="light"] .toast {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #1e293b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* === 크리처 상세 모달 스타일 === */
[data-theme="light"] .creature-detail-container {
    background: transparent;
}

[data-theme="light"] .split-view-info {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(240, 248, 255, 0.9) 100%);
    color: var(--text-primary);
}

[data-theme="light"] .detail-header .creature-name {
    color: #1e40af;
}

[data-theme="light"] .detail-tags span {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .level-section,
[data-theme="light"] .affection-card {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .progress-bar-container,
[data-theme="light"] .aff-bar-container {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .progress-bar-fill {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

[data-theme="light"] .aff-bar-fill {
    background: linear-gradient(90deg, #ec4899, #f472b6);
}

[data-theme="light"] .stats-grid .stat-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: #1e293b;
}

[data-theme="light"] .action-grid .action-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

[data-theme="light"] .action-grid .action-card:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

[data-theme="light"] .action-grid .action-card.highlight {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: white;
}

[data-theme="light"] .action-grid .action-card.accent {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: white;
}

/* === 탭 버튼 === */
[data-theme="light"] .tab-btn {
    color: #64748b;
}

[data-theme="light"] .tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .tab-btn:hover:not(.active) {
    color: #1e40af;
    background: rgba(59, 130, 246, 0.05);
}

/* === 스크롤바 === */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
}

/* === 장비 슬롯 === */
[data-theme="light"] .equip-slots .slot {
    background: rgba(59, 130, 246, 0.05);
    border: 1px dashed rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .equip-slots .slot:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}