@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

        /* ===== SF NEBULA DESIGN SYSTEM + CYBERPUNK NEON ===== */
        :root {
            /* 색상 팔레트 */
            --sf-bg-deep: #050508;
            --sf-bg-dark: #0a0e1a;
            --sf-bg-panel: rgba(8, 12, 24, 0.92);
            --sf-bg-card: rgba(12, 18, 32, 0.95);

            --sf-cyan: #06b6d4;
            --sf-cyan-bright: #22d3ee;
            --sf-cyan-dim: #0891b2;
            --sf-cyan-glow: rgba(6, 182, 212, 0.5);
            --sf-green: #00ff88;
            --sf-green-dim: #00aa66;
            --sf-yellow: #ffd93d;
            --sf-orange: #f97316;
            --sf-orange-glow: rgba(249, 115, 22, 0.5);
            --sf-red: #ff4757;
            --sf-purple: #8b5cf6;
            --sf-purple-glow: rgba(139, 92, 246, 0.5);
            --sf-pink: #ff6bcb;
            --sf-neon-blue: #3b82f6;

            --sf-text-bright: #f0fdfa;
            --sf-text-normal: #cbd5e1;
            --sf-text-dim: #64748b;

            /* 네온 글로우 효과 */
            --sf-glow-cyan: 0 0 8px rgba(6, 182, 212, 0.6), 0 0 20px rgba(6, 182, 212, 0.3), 0 0 40px rgba(6, 182, 212, 0.15);
            --sf-glow-green: 0 0 8px rgba(0, 255, 136, 0.6), 0 0 20px rgba(0, 255, 136, 0.3);
            --sf-glow-red: 0 0 8px rgba(255, 71, 87, 0.6), 0 0 20px rgba(255, 71, 87, 0.3);
            --sf-glow-orange: 0 0 8px rgba(249, 115, 22, 0.6), 0 0 20px rgba(249, 115, 22, 0.3);
            --sf-glow-purple: 0 0 8px rgba(139, 92, 246, 0.6), 0 0 20px rgba(139, 92, 246, 0.3);

            /* UI 레이아웃 변수 */
            --top-bar-height: 60px;
            --nav-width: 160px;
            --spawn-dock-width: 60px;
            --chat-toggle-size: 50px;
            --ui-gap: 10px;
            --ui-padding: 15px;
            --bottom-safe: 80px;

            /* ===== HUD SEMANTIC DESIGN SYSTEM ===== */
            /* Primary (시안 - 기본 계기판, 기본 UI) */
            --hud-primary: #06b6d4;
            --hud-primary-bright: #22d3ee;
            --hud-primary-dim: #0891b2;
            --hud-primary-ghost: rgba(6, 182, 212, 0.15);
            --hud-primary-glow: 0 0 8px rgba(6, 182, 212, 0.5), 0 0 20px rgba(6, 182, 212, 0.2);

            /* Secondary (앰버 - 내비게이션, 타겟) */
            --hud-secondary: #f59e0b;
            --hud-secondary-dim: #d97706;
            --hud-secondary-ghost: rgba(245, 158, 11, 0.12);
            --hud-secondary-glow: 0 0 8px rgba(245, 158, 11, 0.5), 0 0 20px rgba(245, 158, 11, 0.2);

            /* Success (그린 - 오토파일럿, 도킹) */
            --hud-success: #10b981;
            --hud-success-bright: #34d399;
            --hud-success-ghost: rgba(16, 185, 129, 0.12);
            --hud-success-glow: 0 0 8px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.2);

            /* Danger (레드 - 경고, 공격) */
            --hud-danger: #ef4444;
            --hud-danger-bright: #f87171;
            --hud-danger-ghost: rgba(239, 68, 68, 0.15);
            --hud-danger-glow: 0 0 8px rgba(239, 68, 68, 0.5), 0 0 20px rgba(239, 68, 68, 0.2);

            /* Caution (옐로 - 감속, 연료 부족) */
            --hud-caution: #eab308;
            --hud-caution-ghost: rgba(234, 179, 8, 0.12);
            --hud-caution-glow: 0 0 8px rgba(234, 179, 8, 0.4), 0 0 20px rgba(234, 179, 8, 0.2);

            /* Accent (바이올렛 - ARIA AI) */
            --hud-accent: #8b5cf6;
            --hud-accent-ghost: rgba(139, 92, 246, 0.12);
            --hud-accent-glow: 0 0 8px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.2);

            /* HUD 배경 */
            --hud-bg-deep: #050508;
            --hud-bg-dark: #0a0e1a;
            --hud-bg-panel: rgba(8, 12, 24, 0.92);
            --hud-bg-panel-alt: rgba(12, 18, 32, 0.88);

            /* HUD 텍스트 */
            --hud-text-bright: #f0fdfa;
            --hud-text-normal: #cbd5e1;
            --hud-text-dim: #64748b;
            --hud-text-muted: #475569;

            /* HUD 테두리 */
            --hud-border-active: rgba(6, 182, 212, 0.5);
            --hud-border-subtle: rgba(6, 182, 212, 0.2);
            --hud-border-inactive: rgba(100, 116, 139, 0.3);

            /* ===== Z-INDEX 계층 (12단계) ===== */
            --z-bg: -1;
            --z-base: 1;
            --z-hud: 100;
            --z-controls: 200;
            --z-panels: 300;
            --z-combat: 400;
            --z-overlay: 500;
            --z-warnings: 600;
            --z-modal: 1000;
            --z-critical: 2000;
            --z-system: 5000;
            --z-topmost: 10000;
        }
        
        /* 스캔라인 오버레이 (배경 효과) */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 3px,
                rgba(6, 182, 212, 0.008) 3px,
                rgba(6, 182, 212, 0.008) 6px
            );
            pointer-events: none;
            z-index: var(--z-base);
        }

        /* 그리드 패턴 배경 */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(circle at center, transparent 0%, var(--sf-bg-deep) 100%),
                linear-gradient(rgba(6, 182, 212, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(6, 182, 212, 0.04) 1px, transparent 1px);
            background-size: 100% 100%, 50px 50px, 50px 50px;
            pointer-events: none;
            z-index: -1;
        }

        body {
            margin: 0;
            overflow: hidden;
            background: radial-gradient(ellipse at 30% 50%, #0a1628 0%, var(--sf-bg-deep) 70%);
            font-family: 'Rajdhani', 'Noto Sans KR', sans-serif;
            user-select: none;
            color: var(--sf-text-normal);
        }
        
        /* ★★★ 모든 스크롤바 숨김 ★★★ */
        * {
            scrollbar-width: none;  /* Firefox */
            -ms-overflow-style: none;  /* IE/Edge */
        }
        *::-webkit-scrollbar {
            display: none;  /* Chrome, Safari, Opera */
            width: 0;
            height: 0;
        }
        
        /* SF 공통 버튼 스타일 - 네온 */
        .sf-btn {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.04) 100%);
            border: 1px solid var(--sf-cyan);
            color: var(--sf-cyan);
            padding: 10px 20px;
            font-family: 'Share Tech Mono', 'Orbitron', monospace;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            position: relative;
            clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
            transition: all 0.3s ease;
            text-shadow: 0 0 8px var(--sf-cyan-glow);
            box-shadow: 0 0 8px var(--sf-cyan-glow), inset 0 0 15px rgba(6, 182, 212, 0.08);
            touch-action: manipulation;
        }
        .sf-btn:hover {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.3) 0%, rgba(6, 182, 212, 0.1) 100%);
            box-shadow: var(--sf-glow-cyan), inset 0 0 25px rgba(6, 182, 212, 0.15);
            transform: translateY(-2px);
        }
        .sf-btn:active {
            transform: translateY(0);
        }
        
        /* SF 패널 스타일 - 네온 */
        .sf-panel {
            background: var(--sf-bg-panel);
            border: 1px solid rgba(6, 182, 212, 0.25);
            backdrop-filter: blur(20px);
            position: relative;
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.08), inset 0 0 10px rgba(6, 182, 212, 0.03);
        }
        .sf-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--sf-cyan), var(--sf-purple), transparent);
            animation: neon-flicker 6s infinite;
        }
        
        /* SF 카드 스타일 */
        .sf-card {
            background: var(--sf-bg-card);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 4px;
            position: relative;
            overflow: hidden;
        }
        .sf-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }
        
        /* 펄스 애니메이션 */
        @keyframes sf-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        @keyframes sf-glow-pulse {
            0%, 100% { box-shadow: 0 0 5px var(--sf-cyan), 0 0 10px var(--sf-cyan-glow); }
            50% { box-shadow: 0 0 15px var(--sf-cyan), 0 0 30px var(--sf-cyan-glow); }
        }
        @keyframes sf-scan {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }

        /* ★ 네온 애니메이션 ★ */
        @keyframes neon-flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
            20%, 24%, 55% { opacity: 0.6; }
        }
        @keyframes neon-border-flow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        @keyframes neon-breathe {
            0%, 100% { box-shadow: 0 0 5px var(--sf-cyan-glow), inset 0 0 5px rgba(6, 182, 212, 0.05); }
            50% { box-shadow: 0 0 15px var(--sf-cyan-glow), 0 0 30px rgba(6, 182, 212, 0.15), inset 0 0 10px rgba(6, 182, 212, 0.08); }
        }
        @keyframes neon-text-glow {
            0%, 100% { text-shadow: 0 0 4px var(--sf-cyan-glow), 0 0 10px rgba(6, 182, 212, 0.3); }
            50% { text-shadow: 0 0 8px var(--sf-cyan-glow), 0 0 20px rgba(6, 182, 212, 0.5), 0 0 40px rgba(6, 182, 212, 0.2); }
        }
        @keyframes neon-orange-breathe {
            0%, 100% { box-shadow: 0 0 5px var(--sf-orange-glow); }
            50% { box-shadow: 0 0 15px var(--sf-orange-glow), 0 0 30px rgba(249, 115, 22, 0.2); }
        }

        /* 네온 유틸리티 클래스 */
        .neon-text { text-shadow: 0 0 5px var(--sf-cyan-glow), 0 0 15px rgba(6, 182, 212, 0.3); }
        .neon-text-orange { text-shadow: 0 0 5px var(--sf-orange-glow), 0 0 15px rgba(249, 115, 22, 0.3); }
        .neon-text-purple { text-shadow: 0 0 5px var(--sf-purple-glow), 0 0 15px rgba(139, 92, 246, 0.3); }
        .neon-border { border-color: var(--sf-cyan) !important; box-shadow: 0 0 8px var(--sf-cyan-glow), inset 0 0 8px rgba(6, 182, 212, 0.05); }

        /* ★ 대시보드 코너 프레임 */
        .sf-corner-frame { position: relative; }
        .sf-corner-frame::before,
        .sf-corner-frame::after {
            content: ''; position: absolute;
            width: 14px; height: 14px;
            border-color: var(--sf-cyan);
            border-style: solid; border-width: 0;
            pointer-events: none; z-index: var(--z-base);
        }
        .sf-corner-frame::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
        .sf-corner-frame::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

        /* ★ 패널 breathing glow */
        @keyframes panel-breathe {
            0%, 100% { box-shadow: 0 0 8px rgba(6, 182, 212, 0.08), inset 0 0 6px rgba(6, 182, 212, 0.02); }
            50% { box-shadow: 0 0 18px rgba(6, 182, 212, 0.2), inset 0 0 10px rgba(6, 182, 212, 0.05); }
        }
        .sf-panel-glow {
            border: 1px solid rgba(6, 182, 212, 0.3);
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.08), inset 0 0 10px rgba(6, 182, 212, 0.03);
            backdrop-filter: blur(15px);
            background: rgba(8, 12, 24, 0.92);
            animation: panel-breathe 4s ease-in-out infinite;
        }
        .neon-border-orange { border-color: var(--sf-orange) !important; box-shadow: 0 0 8px var(--sf-orange-glow); }
        
        /* ===== 상단 영역 ===== */
        #top-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--top-bar-height);
            background: linear-gradient(180deg, rgba(5, 5, 8, 0.97) 0%, rgba(10, 14, 26, 0.85) 70%, transparent 100%);
            border-bottom: 1px solid rgba(6, 182, 212, 0.25);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 15px; box-sizing: border-box; z-index: var(--z-hud); pointer-events: none;
        }
        #top-bar::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent 5%, var(--sf-cyan) 30%, var(--sf-purple) 70%, transparent 95%);
            animation: neon-flicker 4s infinite;
        }
        body.pilot-mode #top-bar,
        body.pilot-mode #time-bar,
        body.multi-mode #top-bar,
        body.multi-mode #time-bar {
            display: none;
        }
        /* ===== 싱글모드: 도킹/미션/정거장 UI 숨김 ===== */
        body.single-mode #docking-center-wrap,
        body.single-mode #docking-menu,
        body.single-mode #undock-btn,
        body.single-mode #daily-mission-icon,
        body.single-mode #mission-points-display,
        body.single-mode #daily-mission-modal,
        body.single-mode #ssil-mission-panel,
        body.single-mode #mission-board-modal,
        body.single-mode #mission-float-btn,
        body.single-mode #interior-hud,
        body.single-mode #btn-exit-station,
        body.single-mode #station-shop-modal,
        body.single-mode .coins-display,
        body.single-mode #user-coins {
            display: none !important;
        }
        /* 로고 숨김 */
        #top-bar h1 {
            display: none;
        }

        .control-group { pointer-events: auto; display: flex; align-items: center; gap: 8px; color: var(--sf-text-normal); }
        
        .slider-container { display: flex; flex-direction: column; gap: 2px; }
        .slider-row { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--sf-text-dim); font-family: 'Orbitron', sans-serif; }
        .slider-label { width: 45px; text-align: right; text-transform: uppercase; letter-spacing: 0.5px; }
        input[type=range] {
            width: 80px;
            cursor: pointer;
            accent-color: var(--sf-cyan);
            height: 20px;
            background: rgba(0, 255, 255, 0.2);
            border-radius: 2px;
            touch-action: manipulation;
        }
        
        #time-val {
            font-family: 'Orbitron', sans-serif;
            font-size: 14px;
            font-weight: bold;
            color: var(--sf-cyan);
            min-width: 60px;
            text-align: center;
            text-shadow: 0 0 10px var(--sf-cyan-glow);
            padding: 2px 8px;
            background: rgba(0, 255, 255, 0.08);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 3px;
            flex-shrink: 0;
        }

        .mode-btn {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.03) 100%);
            border: 1px solid rgba(6, 182, 212, 0.4);
            color: var(--sf-cyan);
            padding: 5px 10px;
            border-radius: 2px;
            clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
            cursor: pointer;
            font-family: 'Share Tech Mono', 'Orbitron', monospace;
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            white-space: nowrap;
            text-shadow: 0 0 8px var(--sf-cyan-glow);
            touch-action: manipulation;
        }
        .mode-btn:hover, .mode-btn:active {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.3) 0%, rgba(6, 182, 212, 0.1) 100%);
            box-shadow: 0 0 12px var(--sf-cyan-glow), 0 0 25px rgba(6, 182, 212, 0.15), inset 0 0 15px rgba(6, 182, 212, 0.1);
        }
        .mode-btn.active {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.2) 100%);
            border-color: var(--sf-cyan-bright);
            box-shadow: var(--sf-glow-cyan);
            font-weight: bold;
            animation: neon-breathe 3s infinite;
        }

        #btn-station {
            border-color: var(--sf-green);
            color: var(--sf-green);
            background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 136, 0.02) 100%);
            text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
        }
        #btn-station:hover {
            background: linear-gradient(135deg, rgba(0, 255, 136, 0.3) 0%, rgba(0, 255, 136, 0.1) 100%);
            box-shadow: var(--sf-glow-green);
        }

        #btn-catalog {
            border-color: var(--sf-purple);
            color: var(--sf-purple);
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.02) 100%);
            text-shadow: 0 0 8px var(--sf-purple-glow);
        }
        #btn-catalog:hover {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0.1) 100%);
            box-shadow: var(--sf-glow-purple);
        }

        /* ===== 좌측 영역: 네비게이션 ===== */
        #nav-container {
            position: absolute;
            top: 70px;
            left: 0;
            bottom: 20px;
            z-index: var(--z-hud); 
            display: flex; 
            align-items: flex-start;
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform: translateX(0);
            overflow: hidden;
        }
        #nav-container.closed { transform: translateX(-130px); }

        #nav-panel {
            width: 160px;
            max-height: calc(100dvh - 170px);
            overflow-y: auto;
            background: linear-gradient(180deg, rgba(5, 5, 8, 0.97) 0%, rgba(10, 14, 26, 0.92) 100%);
            border: 1px solid rgba(6, 182, 212, 0.25);
            border-left: 2px solid var(--sf-cyan);
            border-radius: 0 8px 8px 0;
            padding: 15px 8px;
            pointer-events: auto;
            backdrop-filter: blur(20px);
            display: flex;
            flex-direction: column;
            gap: 4px;
            position: relative;
            box-shadow: 5px 0 20px rgba(6, 182, 212, 0.08);
        }
        #nav-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, var(--sf-cyan), var(--sf-purple), transparent);
            animation: neon-flicker 5s infinite;
        }
        #nav-panel::-webkit-scrollbar { width: 3px; }
        #nav-panel::-webkit-scrollbar-thumb { background: var(--sf-cyan-dim); border-radius: 2px; }
        #nav-panel::-webkit-scrollbar-track { background: rgba(0, 255, 255, 0.1); }

        .nav-header {
            font-family: 'Share Tech Mono', 'Orbitron', monospace;
            font-size: 10px;
            color: var(--sf-cyan);
            margin-bottom: 8px;
            padding-left: 8px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 0 0 8px var(--sf-cyan-glow), 0 0 20px rgba(6, 182, 212, 0.3);
            animation: neon-text-glow 4s infinite;
        }
        .nav-item {
            padding: 10px 12px;
            border-radius: 4px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 13px;
            font-weight: 500;
            color: var(--sf-text-normal);
            cursor: pointer;
            transition: all 0.2s ease;
            background: rgba(0, 255, 255, 0.03);
            border: 1px solid transparent;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            overflow: hidden;
            touch-action: manipulation;
            min-height: 44px;
        }
        .nav-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 2px;
            height: 100%;
            background: var(--sf-cyan);
            transform: scaleY(0);
            transition: transform 0.2s ease;
        }
        .nav-item:hover, .nav-item:active {
            background: rgba(0, 255, 255, 0.1);
            border-color: rgba(0, 255, 255, 0.3);
            color: var(--sf-cyan);
        }
        .nav-item:hover::before {
            transform: scaleY(1);
        }
        .nav-item.active {
            background: linear-gradient(90deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.03) 100%);
            border-color: var(--sf-cyan);
            color: var(--sf-cyan-bright);
            font-weight: 600;
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.2), inset 0 0 10px rgba(6, 182, 212, 0.05);
            text-shadow: 0 0 8px var(--sf-cyan-glow);
        }
        .nav-item.active::before {
            transform: scaleY(1);
            box-shadow: 0 0 10px var(--sf-cyan), 0 0 20px var(--sf-cyan-glow);
        }
        .nav-item .type-icon { font-size: 10px; opacity: 0.7; }
        .nav-item.satellite { padding-left: 24px; font-size: 12px; color: var(--sf-text-dim); }

        #nav-toggle {
            width: 44px;
            height: 50px;
            background: linear-gradient(135deg, rgba(10, 15, 25, 0.9) 0%, rgba(10, 15, 25, 0.7) 100%);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-left: none;
            border-radius: 0 8px 8px 0;
            color: var(--sf-cyan);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            pointer-events: auto;
            margin-top: 10px;
            transition: all 0.3s ease;
            touch-action: manipulation;
        }
        #nav-toggle:hover, #nav-toggle:active {
            background: rgba(0, 255, 255, 0.15);
            box-shadow: 0 0 15px var(--sf-cyan-glow);
        }

        /* ===== 우측 상단 영역: 스폰 독 ===== */
        #spawn-dock {
            position: absolute;
            top: 70px;
            right: 32px;
            width: 55px;
            max-height: calc(100dvh - 150px);
            overflow-y: auto;
            background: linear-gradient(180deg, rgba(10, 15, 25, 0.95) 0%, rgba(10, 15, 25, 0.85) 100%);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 12px;
            padding: 15px 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            z-index: var(--z-hud);
            pointer-events: auto;
            backdrop-filter: blur(20px);
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 255, 255, 0.05);
        }
        #spawn-dock::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 2px;
            background: var(--sf-cyan);
            border-radius: 1px;
            box-shadow: 0 0 10px var(--sf-cyan);
        }
        #spawn-dock::-webkit-scrollbar { width: 3px; }
        #spawn-dock::-webkit-scrollbar-thumb { background: var(--sf-cyan-dim); border-radius: 2px; }
        
        .spawn-btn {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            border: 2px solid rgba(0, 255, 255, 0.3);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            transition: all 0.3s ease;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.1);
            background-color: rgba(10, 15, 25, 0.8);
            touch-action: manipulation;
        }
        .spawn-btn:hover, .spawn-btn:active {
            transform: scale(1.15);
            border-color: var(--sf-cyan);
            box-shadow: 0 0 20px var(--sf-cyan-glow), inset 0 0 15px rgba(0, 255, 255, 0.2);
            z-index: var(--z-base);
        }
        .spawn-btn.active { 
            border-color: var(--sf-cyan);
            box-shadow: var(--sf-glow-cyan);
            animation: sf-glow-pulse 2s infinite;
        }
        .spawn-btn::after {
            content: attr(data-name);
            position: absolute;
            right: 55px;
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, rgba(10, 15, 25, 0.95) 0%, rgba(10, 15, 25, 0.9) 100%);
            border: 1px solid var(--sf-cyan);
            color: var(--sf-cyan);
            padding: 6px 12px;
            border-radius: 4px;
            font-family: 'Orbitron', sans-serif;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            box-shadow: var(--sf-glow-cyan);
        }
        .spawn-btn:hover::after { opacity: 1; }

        #catalog-modal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(10, 15, 25, 0.95) 0%, rgba(5, 8, 15, 0.98) 100%);
            z-index: var(--z-controls);
            display: none;
            backdrop-filter: blur(10px);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            overflow-y: auto;
            padding: 20px 0;
        }
        #catalog-modal.open { display: flex; }
        #catalog-content {
            width: 85%;
            max-height: 85vh;
            margin: auto;
            background: linear-gradient(135deg, rgba(10, 15, 25, 0.95) 0%, rgba(15, 20, 30, 0.9) 100%);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 12px;
            padding: 25px;
            padding-bottom: 40px;
            overflow-y: auto;
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            align-content: start;
            position: relative;
            box-shadow: 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.02);
        }
        #catalog-content::before {
            content: 'CELESTIAL CATALOG';
            position: absolute;
            top: -30px;
            left: 25px;
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            font-weight: 700;
            color: var(--sf-cyan);
            text-transform: uppercase;
            letter-spacing: 3px;
            text-shadow: var(--sf-glow-cyan);
        }
        #catalog-content::-webkit-scrollbar { width: 6px; }
        #catalog-content::-webkit-scrollbar-track { background: rgba(0, 255, 255, 0.05); border-radius: 4px; }
        #catalog-content::-webkit-scrollbar-thumb { background: var(--sf-cyan-dim); border-radius: 4px; }
        #catalog-content::-webkit-scrollbar-thumb:hover { background: #777; }
        
        .catalog-card {
            background: #252530; border-radius: 10px; padding: 12px; cursor: pointer;
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            transition: 0.2s; border: 2px solid transparent;
            touch-action: manipulation;
        }
        .catalog-card:hover { transform: translateY(-3px); background: #303040; border-color: var(--hud-danger); box-shadow: 0 5px 20px rgba(231, 76, 60, 0.3); }
        .catalog-thumb {
            width: 70px; height: 70px; border-radius: 50%; background-color: #000;
            background-size: cover; background-position: center; border: 3px solid #444;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }
        .catalog-card:hover .catalog-thumb { border-color: var(--hud-danger); }
        .catalog-name { font-size: 11px; color: var(--hud-text-normal); text-align: center; font-weight: bold; }
        
        #catalog-close {
            margin-top: 20px; padding: 10px 30px; background: #e74c3c; color: white; border: none;
            border-radius: 20px; font-weight: bold; cursor: pointer;
        }

        /* 포커스 거리 표시 패널 */
        /* ===== 우측 하단 영역: 거리 패널 ===== */
        #focus-distance-panel {
            position: absolute;
            bottom: 20px;
            right: 100px;  /* spawn-dock 왼쪽 */
            background: rgba(0, 20, 40, 0.9);
            border: 2px solid #4fc3f7;
            border-radius: 12px;
            padding: 12px 18px;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            z-index: var(--z-hud);
            backdrop-filter: blur(5px);
            box-shadow: 0 0 20px rgba(79, 195, 247, 0.3);
            min-width: 150px;
        }
        #focus-distance-panel.visible { display: flex; }
        #focus-target-name {
            font-size: 11px;
            color: #4fc3f7;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        #focus-distance-value {
            font-size: 18px;
            font-weight: bold;
            color: var(--hud-text-bright);
            font-family: 'Orbitron', monospace;
            text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
        }

        /* 우주선 선택 모달 */
        #ship-select-modal {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.9); z-index: var(--z-panels); display: none;
            backdrop-filter: blur(10px); align-items: center; justify-content: center;
            pointer-events: auto; overflow-y: auto; padding: 20px 0;
        }
        #ship-select-modal.open { display: flex; }
        #ship-select-content {
            width: 90%; max-width: 900px; max-height: 85vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 2px solid #4fc3f7; border-radius: 20px; padding: 25px; overflow-y: auto; margin: auto;
            box-shadow: 0 0 50px rgba(79, 195, 247, 0.3);
        }
        #ship-select-content h2 {
            color: #4fc3f7; text-align: center; margin-bottom: 20px;
            font-family: 'Orbitron', sans-serif; text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
        }
        #ship-list {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px; margin-bottom: 20px; max-height: 200px; overflow-y: auto;
            padding: 5px;
        }
        #ship-list::-webkit-scrollbar { width: 5px; }
        #ship-list::-webkit-scrollbar-thumb { background: #4fc3f7; border-radius: 3px; }
        .ship-card {
            background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 10px; cursor: pointer; transition: all 0.3s;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            position: relative; min-height: 120px;
            touch-action: manipulation;
        }
        .ship-card:hover { background: rgba(79, 195, 247, 0.1); border-color: #4fc3f7; transform: translateY(-3px); }
        .ship-card.selected { background: rgba(79, 195, 247, 0.2); border-color: #4fc3f7; box-shadow: 0 0 15px rgba(79, 195, 247, 0.4); }
        .ship-card.locked { opacity: 0.5; cursor: not-allowed; }
        .ship-card.locked:hover { transform: none; border-color: rgba(255,255,255,0.1); }
        .ship-card-icon { width: 100%; height: 70px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 32px; overflow: hidden; background: rgba(0,0,0,0.3); }
        .ship-card-icon img { width: 100%; height: 100%; object-fit: contain; }
        .ship-card-name { font-size: 12px; color: var(--hud-text-bright); text-align: center; font-weight: bold; }
        .ship-card-tier { font-size: 10px; color: #ffd700; }
        .ship-card-lock { position: absolute; font-size: 20px; }
        .ship-card-dev { font-size: 9px; color: #ff9800; background: rgba(255,152,0,0.2); padding: 2px 6px; border-radius: 8px; margin-top: 2px; }
        .ship-card-owned { position: absolute; top: 5px; left: 5px; background: #27ae60; color: var(--hud-text-bright); width: 20px; height: 20px; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; z-index: var(--z-base); }
        .ship-card.owned { border-color: var(--hud-success); }
        
        #ship-detail {
            display: flex; gap: 20px; background: rgba(0,0,0,0.3); border-radius: 15px;
            padding: 20px; margin-bottom: 20px;
        }
        #ship-preview {
            width: 200px; height: 200px; background: radial-gradient(circle, #1a2a3a 0%, #0a1520 100%);
            border-radius: 15px; border: 1px solid #333; display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
        }
        #ship-preview::before {
            content: ''; position: absolute; width: 100%; height: 100%;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 50%);
        }
        #ship-preview canvas { max-width: 100%; max-height: 100%; }
        #ship-info { flex: 1; }
        #ship-info h3 { color: #4fc3f7; margin: 0 0 5px 0; font-family: 'Orbitron', sans-serif; font-size: 20px; }
        #ship-detail-desc { color: var(--hud-text-dim); font-size: 13px; margin-bottom: 15px; }
        #ship-stats { display: flex; flex-direction: column; gap: 10px; }
        .stat-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #ccc; }
        .stat-row > span:first-child { width: 70px; }
        .stat-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
        .stat-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
        .stat-fill.speed { background: linear-gradient(90deg, #e74c3c, #f39c12); }
        .stat-fill.accel { background: linear-gradient(90deg, #2ecc71, #27ae60); }
        .stat-fill.turn { background: linear-gradient(90deg, #3498db, #2980b9); }
        .stat-fill.fuel { background: linear-gradient(90deg, #9b59b6, #8e44ad); }
        .stat-val { width: 70px; text-align: right; color: var(--hud-text-bright); font-weight: bold; }
        #ship-special {
            margin-top: 15px; padding: 10px 15px; background: rgba(79, 195, 247, 0.1);
            border: 1px solid #4fc3f7; border-radius: 8px; color: #4fc3f7; font-size: 12px;
        }
        #ship-special:empty { display: none; }
        
        #ship-select-buttons { display: flex; justify-content: center; gap: 15px; }
        .ship-modal-btn {
            padding: 12px 40px; border-radius: 25px; border: none; font-size: 14px;
            font-weight: bold; cursor: pointer; font-family: 'Orbitron', sans-serif; transition: all 0.3s;
        }
        .ship-modal-btn.confirm { background: linear-gradient(180deg, #4fc3f7, #0288d1); color: var(--hud-text-bright); }
        .ship-modal-btn.confirm:hover { background: linear-gradient(180deg, #81d4fa, #4fc3f7); transform: scale(1.05); }
        .ship-modal-btn.cancel { background: rgba(100,100,100,0.5); border: 1px solid #666; color: var(--hud-text-dim); }
        .ship-modal-btn.cancel:hover { background: rgba(150,150,150,0.5); }
        .ship-modal-btn.buy { background: linear-gradient(180deg, #f39c12, #e67e22); color: var(--hud-text-bright); }
        .ship-modal-btn.buy:hover { background: linear-gradient(180deg, #f7dc6f, #f39c12); transform: scale(1.05); }
        .ship-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
        .ship-modal-btn.armory { background: linear-gradient(180deg, #e74c3c, #c0392b); color: var(--hud-text-bright); }
        .ship-modal-btn.armory:hover { background: linear-gradient(180deg, #ff6b6b, #e74c3c); transform: scale(1.05); }
        
        /* 무장 모달 */
        #armory-modal {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.95); z-index: var(--z-panels); display: none;
            backdrop-filter: blur(10px); align-items: center; justify-content: center;
            overflow-y: auto; padding: 20px 0;
        }
        #armory-modal.open { display: flex; }
        #armory-content {
            width: 95%; max-width: 1000px; max-height: 85vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 2px solid #e74c3c; border-radius: 20px; padding: 20px; overflow-y: auto; margin: auto;
            box-shadow: 0 0 50px rgba(231, 76, 60, 0.3);
        }
        #armory-content h2 {
            color: var(--hud-danger); text-align: center; margin-bottom: 15px;
            font-family: 'Orbitron', sans-serif; text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
        }
        .armory-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; }
        .armory-tab {
            padding: 10px 25px; background: rgba(255,255,255,0.1); border: 1px solid var(--hud-border-inactive);
            border-radius: 20px; color: var(--hud-text-dim); cursor: pointer; font-family: 'Orbitron', sans-serif;
            font-size: 12px; transition: all 0.3s;
        }
        .armory-tab:hover { border-color: var(--hud-danger); color: var(--hud-danger); }
        .armory-tab.active { background: rgba(231, 76, 60, 0.3); border-color: var(--hud-danger); color: var(--hud-danger); }
        
        .armory-main { display: flex; gap: 15px; }
        .armory-list-container { flex: 1; max-height: 350px; overflow-y: auto; }
        .armory-list { display: flex; flex-direction: column; gap: 8px; }
        .armory-item {
            display: flex; align-items: center; gap: 10px; padding: 10px 12px;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px; cursor: pointer; transition: all 0.3s;
        }
        .armory-item:hover { background: rgba(231, 76, 60, 0.1); border-color: var(--hud-danger); }
        .armory-item.selected { background: rgba(231, 76, 60, 0.2); border-color: var(--hud-danger); box-shadow: 0 0 10px rgba(231, 76, 60, 0.3); }
        .armory-item.locked { opacity: 0.4; cursor: not-allowed; }
        .armory-item.equipped { border-color: var(--hud-success); background: rgba(39, 174, 96, 0.15); }
        .armory-item-icon { font-size: 24px; width: 40px; text-align: center; }
        .armory-item-info { flex: 1; }
        .armory-item-name { color: var(--hud-text-bright); font-size: 13px; font-weight: bold; }
        .armory-item-tier { font-size: 10px; color: #f39c12; }
        .armory-item-stats { font-size: 10px; color: var(--hud-text-muted); }
        .armory-item-price { color: #f39c12; font-size: 12px; font-weight: bold; }
        .armory-item-owned { color: var(--hud-success); font-size: 11px; }
        
        .armory-detail {
            width: 280px; background: rgba(0,0,0,0.3); border-radius: 15px; padding: 15px;
        }
        .armory-detail h3 { color: var(--hud-danger); margin: 0 0 10px 0; font-size: 16px; font-family: 'Orbitron', sans-serif; }
        .armory-detail-icon { font-size: 48px; text-align: center; margin-bottom: 10px; }
        .armory-detail-desc { color: var(--hud-text-dim); font-size: 11px; margin-bottom: 15px; line-height: 1.5; }
        .armory-detail-stats { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
        .armory-stat-row { display: flex; justify-content: space-between; font-size: 11px; }
        .armory-stat-row span:first-child { color: var(--hud-text-muted); }
        .armory-stat-row span:last-child { color: var(--hud-text-bright); font-weight: bold; }
        .armory-detail-effect { background: rgba(231, 76, 60, 0.2); border: 1px solid #e74c3c; border-radius: 8px; padding: 8px; font-size: 11px; color: var(--hud-danger); margin-bottom: 15px; }
        
        .armory-equipped-section { margin-bottom: 15px; padding: 10px; background: rgba(39, 174, 96, 0.1); border: 1px solid #27ae60; border-radius: 10px; }
        .armory-equipped-title { color: var(--hud-success); font-size: 12px; margin-bottom: 8px; }
        .armory-equipped-slot { display: flex; align-items: center; gap: 8px; padding: 5px; background: rgba(0,0,0,0.3); border-radius: 5px; margin-bottom: 5px; }
        .armory-equipped-slot span { font-size: 11px; color: #ccc; }
        .armory-slot-empty { color: #666 !important; font-style: italic; }
        
        .armory-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 15px; }
        
        /* 가격 표시 */
        #ship-price-display {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 10px 0;
            padding: 8px 15px;
            background: linear-gradient(135deg, rgba(243,156,18,0.3), rgba(230,126,34,0.3));
            border: 1px solid #f39c12;
            border-radius: 20px;
            width: fit-content;
        }
        .price-label { font-size: 18px; }
        #ship-price-value {
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #f7dc6f;
        }
        #ship-owned-badge {
            background: #27ae60;
            color: var(--hud-text-bright);
            padding: 3px 10px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: bold;
        }
        
        /* 우주선 리스트 아이템에 보유 표시 */
        .ship-item.owned::after {
            content: '✓';
            position: absolute;
            top: 3px;
            right: 5px;
            background: #27ae60;
            color: var(--hud-text-bright);
            width: 16px;
            height: 16px;
            border-radius: 50%;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ship-item { position: relative; }
        
        @media (max-width: 600px) {
            #ship-detail { flex-direction: column; }
            #ship-preview { width: 100%; height: 150px; }
            #ship-list { grid-template-columns: repeat(3, 1fr); }
        }

        #msg-box {
            position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
            color: #ff6b6b; font-weight: bold; text-shadow: 0 2px 4px black;
            font-size: 16px; pointer-events: none; opacity: 0; transition: opacity 0.3s;
        }

        /* ===== 하단 중앙 영역: 버튼들 ===== */
        #reset-cam {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #e67e22; color: white; padding: 10px 25px; border: none;
            border-radius: 50px; cursor: pointer; font-weight: bold; font-size: 13px;
            box-shadow: 0 5px 15px rgba(230, 126, 34, 0.3); display: none; pointer-events: auto;
            z-index: var(--z-hud);
            touch-action: manipulation;
        }
        /* 조종 모드에서 전체보기 버튼 완전히 숨김 */
        body.pilot-mode #reset-cam {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        
        .label {
            color: rgba(255,255,255,0.7); font-size: 10px; text-shadow: 0 0 3px black;
            pointer-events: none; margin-top: -8px;
        }
        .ship-parked-label {
            color: #f39c12 !important;
            font-size: 12px !important;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(243, 156, 18, 0.8);
            cursor: pointer;
            pointer-events: auto !important;
        }
        
        .galaxy-label {
            color: #ff9966; font-size: 14px; font-weight: bold; letter-spacing: 1px;
            text-shadow: 0 0 10px rgba(255, 100, 50, 0.8); opacity: 0.8; pointer-events: none;
        }

        .notify-label {
            font-size: 14px; font-weight: bold; text-shadow: 0 0 5px black;
            pointer-events: none; transition: opacity 1s, transform 1s;
            opacity: 1; transform: translateY(0); white-space: nowrap;
        }
        .notify-label.fade-out { opacity: 0; transform: translateY(-30px); }
        .notify-warn { color: #ffeb3b; }
        .notify-success { color: #ff5722; font-size: 16px; text-shadow: 0 0 10px #ff5722; }

        /* ===== 좌측 하단 영역: 채팅 ===== */
        #chat-toggle {
            position: absolute;
            bottom: 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            background: rgba(30, 30, 40, 0.9);
            border: 2px solid rgba(79, 195, 247, 0.5);
            border-radius: 50%; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; color: #4fc3f7;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            transition: all 0.3s; z-index: var(--z-hud); pointer-events: auto;
            touch-action: manipulation;
        }
        #chat-toggle:hover, #chat-toggle:active { transform: scale(1.1); background: rgba(79, 195, 247, 0.2); color: white; border-color: white; }

        #chat-panel {
            position: absolute; 
            bottom: 80px;  /* chat-toggle 위 */
            left: 20px;
            width: 320px; 
            height: 400px;
            max-height: calc(100dvh - 160px);
            background: rgba(15, 15, 20, 0.95);
            border: 1px solid rgba(79, 195, 247, 0.3);
            border-radius: 15px;
            display: flex; flex-direction: column;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
            transform: scale(0); transform-origin: bottom left;
            transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            z-index: var(--z-hud); pointer-events: auto; overflow: hidden;
        }
        #chat-panel.open { transform: scale(1); }

        #chat-header {
            padding: 15px; background: rgba(79, 195, 247, 0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            color: var(--hud-primary); font-weight: bold; font-size: 14px;
            display: flex; justify-content: space-between; align-items: center;
        }
        #chat-close { cursor: pointer; font-size: 18px; color: var(--hud-text-dim); }
        #chat-close:hover { color: white; }

        #chat-messages {
            flex: 1; padding: 15px; overflow-y: auto;
            display: flex; flex-direction: column; gap: 10px;
            font-size: 13px;
        }
        #chat-messages::-webkit-scrollbar { width: 4px; }
        #chat-messages::-webkit-scrollbar-thumb { background: var(--hud-border-inactive); border-radius: 2px; }

        .msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; line-height: 1.4; word-break: break-word; }
        .msg.user { align-self: flex-end; background: #2c3e50; color: white; border-bottom-right-radius: 2px; }
        .msg.ai { align-self: flex-start; background: rgba(79, 195, 247, 0.15); color: var(--hud-text-normal); border-bottom-left-radius: 2px; border: 1px solid rgba(79, 195, 247, 0.2); }
        .msg.system { align-self: center; font-size: 11px; color: var(--hud-text-muted); margin: 5px 0; }

        #chat-input-area {
            padding: 10px; border-top: 1px solid rgba(255,255,255,0.1);
            display: flex; gap: 5px;
        }
        #chat-input {
            flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
            border-radius: 20px; padding: 8px 12px; color: white; font-size: 13px; outline: none;
        }
        #chat-input:focus { border-color: var(--hud-primary); }
        #chat-send {
            background: var(--hud-primary); border: none; border-radius: 50%;
            width: 44px; height: 44px; cursor: pointer; color: var(--hud-bg-deep);
            display: flex; align-items: center; justify-content: center; font-weight: bold;
            touch-action: manipulation;
        }
        #chat-send:hover { background: white; }

        /* ===== 우주선 조종 시스템 CSS ===== */
        html {
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
            overflow: hidden;
            height: 100%;
            width: 100%;
            position: fixed;
        }
        
        #board-ship-btn {
            position: absolute; 
            bottom: 80px;  /* reset-cam 위 */
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 30px; background: linear-gradient(180deg, var(--hud-primary), var(--hud-primary-dim));
            border: 2px solid var(--hud-primary-bright); color: white; font-size: 16px; font-weight: bold;
            border-radius: 30px; cursor: pointer; z-index: var(--z-hud); display: none;
            box-shadow: var(--hud-primary-glow); animation: pulse 2s infinite;
            font-family: 'Orbitron', sans-serif; pointer-events: auto;
            touch-action: manipulation;
        }
        @keyframes pulse { 0%, 100% { box-shadow: 0 0 20px rgba(79, 195, 247, 0.5); } 50% { box-shadow: 0 0 40px rgba(79, 195, 247, 0.8); } }
        #board-ship-btn:hover, #board-ship-btn:active { background: linear-gradient(180deg, #81d4fa, #4fc3f7); transform: translateX(-50%) scale(1.05); }

        #cockpit-hud { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-controls); font-family: 'Orbitron', sans-serif; }
        #cockpit-hud.active { display: block; }
        /* ★ HUD 패널 숨김 모드 - 크로스헤어, 속도, 조이스틱은 유지 */
        #cockpit-hud.hud-hidden #pilot-top-bar,
        #cockpit-hud.hud-hidden #pilot-right,
        #cockpit-hud.hud-hidden #pilot-left-console,
        #cockpit-hud.hud-hidden #pilot-btn-row,
        #cockpit-hud.hud-hidden #pilot-right-console,
        #cockpit-hud.hud-hidden #pilot-coords-panel,
        #cockpit-hud.hud-hidden #pilot-eta-box,
        #cockpit-hud.hud-hidden #pilot-warning-panel,
        #cockpit-hud.hud-hidden #pilot-target-select,
        #cockpit-hud.hud-hidden #unified-chat-panel,
        #cockpit-hud.hud-hidden #chat-slide-toggle,
        #cockpit-hud.hud-hidden #ai-copilot-panel,
        #cockpit-hud.hud-hidden #docking-center-wrap,
        #cockpit-hud.hud-hidden #minimap-overlay {
            display: none !important;
        }
        #hud-toggle-btn {
            position: fixed;
            top: 8px;
            left: 8px;
            z-index: var(--z-panels);
            width: 44px;
            height: 44px;
            border-radius: 6px;
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-border-active);
            color: var(--hud-primary);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            touch-action: manipulation;
            transition: opacity 0.2s;
        }
        #cockpit-hud.hud-hidden #hud-toggle-btn { opacity: 0.4; }

        #pilot-top-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 55%; pointer-events: none; }
        /* 상단 정보 패널 - primary 통일 */
        .pilot-info-panel {
            background: linear-gradient(135deg, rgba(8, 12, 24, 0.92) 0%, rgba(6, 182, 212, 0.05) 100%);
            border: 1px solid rgba(6, 182, 212, 0.3);
            padding: 4px 10px;
            border-radius: 0;
            clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
            text-align: center;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 0 4px rgba(6, 182, 212, 0.1), inset 0 0 6px rgba(6, 182, 212, 0.03);
            pointer-events: auto;
        }
        .pilot-info-label { font-size: 9px; color: var(--hud-primary-dim); letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 4px rgba(6, 182, 212, 0.3); }
        .pilot-info-value { font-size: 12px; color: var(--hud-text-bright); }
        /* 상태 패널 - success(그린) 강조, 기본 숨김 */
        #status-panel { display: none; border-color: var(--hud-success); }
        #status-panel .pilot-info-label { color: var(--hud-success); }
        #status-panel .pilot-info-value { color: var(--hud-success); }
        #btn-ability { display: none; }
        /* 우주선 이름 - secondary(앰버) 강조 */
        .pilot-info-panel.ship-name-panel { border-color: var(--hud-secondary-dim); }
        .pilot-info-panel.ship-name-panel .pilot-info-label { color: var(--hud-secondary-dim); }
        .pilot-info-panel.ship-name-panel .pilot-info-value { color: var(--hud-secondary); }
        /* 능력 버튼 - accent(바이올렛) */
        .pilot-info-panel.ability-btn {
            cursor: pointer; pointer-events: auto; border-color: var(--hud-accent);
            display: flex; align-items: center; gap: 6px; transition: all 0.3s;
        }
        .pilot-info-panel.ability-btn:hover { background: var(--hud-accent-ghost); transform: scale(1.05); }
        .pilot-info-panel.ability-btn.on-cooldown { opacity: 0.5; cursor: not-allowed; }
        .pilot-info-panel.ability-btn #ability-icon { font-size: 14px; }
        .pilot-info-panel.ability-btn #ability-name { font-size: 10px; color: var(--hud-accent); }
        .pilot-info-panel.ability-btn #ability-cooldown { font-size: 10px; color: var(--hud-text-bright); }
        
        /* 연료보급 버튼 - 제거됨, 도킹 버튼으로 대체 */
        .pilot-info-panel.refuel-btn {
            display: none !important;
        }
        
        /* ★ 화면 중앙 도킹 버튼 - primary */
        /* ISS 라이브: 외부 브라우저로 직접 열림 (모달 CSS 제거됨) */

        #docking-center-wrap {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            z-index: var(--z-critical);
        }
        #docking-center-wrap.show { display: inline-block; }
        #docking-center-btn {
            background: var(--hud-bg-panel);
            border: 2px solid var(--hud-primary);
            color: var(--hud-primary-bright);
            padding: 20px 50px;
            border-radius: 0;
            clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
            font-size: 20px;
            font-family: 'Orbitron', sans-serif;
            cursor: pointer;
            pointer-events: auto;
            display: block;
            animation: dockingPulse 1.5s infinite;
            box-shadow: var(--hud-primary-glow);
        }
        #docking-center-btn:hover {
            background: var(--hud-primary-ghost);
        }
        #docking-center-close {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(200, 30, 30, 0.85);
            border: 1px solid #ff6b6b;
            color: #fff;
            cursor: pointer;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            line-height: 1;
        }
        #docking-center-close:hover { background: rgba(255, 50, 50, 0.95); }
        @keyframes dockingPulse {
            0%, 100% { box-shadow: var(--hud-primary-glow); }
            50% { box-shadow: 0 0 30px rgba(6, 182, 212, 0.6), 0 0 60px rgba(6, 182, 212, 0.3); }
        }

        /* ★★★ 도킹 메뉴 - SF 네온 통합 디자인 ★★★ */
        #docking-menu {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            z-index: var(--z-critical);
            pointer-events: auto;
            padding: 24px 28px 18px;
            background: rgba(4, 8, 18, 0.92);
            border: 1px solid rgba(6, 182, 212, 0.25);
            border-radius: 2px;
            box-shadow: 0 0 40px rgba(6, 182, 212, 0.08), inset 0 0 60px rgba(6, 182, 212, 0.03);
        }
        #docking-menu.show { display: flex; }
        /* 메뉴 상단 장식 라인 */
        #docking-menu::before {
            content: '';
            position: absolute;
            top: 0; left: 10%; right: 10%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--hud-primary), transparent);
        }
        /* 메뉴 타이틀 */
        .docking-menu-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 11px;
            color: var(--hud-primary-dim);
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 6px;
            text-align: center;
        }
        .docking-menu-btn {
            background: transparent;
            border: 1px solid rgba(6, 182, 212, 0.2);
            color: var(--hud-primary);
            padding: 12px 20px;
            border-radius: 2px;
            font-size: 13px;
            font-family: 'Orbitron', sans-serif;
            cursor: pointer;
            transition: all 0.25s ease;
            width: 220px;
            text-align: center;
            touch-action: manipulation;
            position: relative;
            letter-spacing: 1px;
        }
        .docking-menu-btn:hover, .docking-menu-btn:active {
            background: rgba(6, 182, 212, 0.08);
            border-color: var(--hud-primary);
            color: var(--hud-primary-bright);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.15), inset 0 0 15px rgba(6, 182, 212, 0.05);
        }
        /* 기능별 좌측 액센트 바 */
        .docking-menu-btn::before {
            content: '';
            position: absolute;
            left: 0; top: 20%; bottom: 20%;
            width: 2px;
            background: var(--hud-primary);
            opacity: 0;
            transition: opacity 0.25s;
        }
        .docking-menu-btn:hover::before,
        .docking-menu-btn:active::before { opacity: 1; }
        /* 상점/수리 = 동일한 시안 톤 (알록달록X) */
        .docking-menu-btn.shop,
        .docking-menu-btn.repair {
            border-color: rgba(6, 182, 212, 0.2);
            color: var(--hud-primary);
            box-shadow: none;
        }
        .docking-menu-btn.shop:hover, .docking-menu-btn.shop:active,
        .docking-menu-btn.repair:hover, .docking-menu-btn.repair:active {
            background: rgba(6, 182, 212, 0.08);
            border-color: var(--hud-primary);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.15), inset 0 0 15px rgba(6, 182, 212, 0.05);
        }
        .docking-menu-btn.interior {
            border-color: rgba(6, 182, 212, 0.2);
            color: var(--hud-primary);
        }
        .docking-menu-btn.interior:hover, .docking-menu-btn.interior:active {
            background: rgba(6, 182, 212, 0.08);
            border-color: var(--hud-primary);
        }
        /* 구분선 */
        .docking-menu-divider {
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
            margin: 4px 0;
        }
        /* ★ 도킹해제 버튼 - 메뉴 내 통합 */
        #undock-btn {
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: var(--hud-danger);
            padding: 12px 20px;
            border-radius: 2px;
            font-size: 13px;
            font-family: 'Orbitron', sans-serif;
            cursor: pointer;
            pointer-events: auto;
            display: none;
            width: 220px;
            text-align: center;
            touch-action: manipulation;
            letter-spacing: 1px;
            position: relative;
            transition: all 0.25s ease;
        }
        #undock-btn::before {
            content: '';
            position: absolute;
            left: 0; top: 20%; bottom: 20%;
            width: 2px;
            background: var(--hud-danger);
            opacity: 0;
            transition: opacity 0.25s;
        }
        #undock-btn:hover::before, #undock-btn:active::before { opacity: 1; }
        #undock-btn:hover, #undock-btn:active {
            background: rgba(239, 68, 68, 0.08);
            border-color: var(--hud-danger);
            box-shadow: 0 0 15px rgba(239, 68, 68, 0.15), inset 0 0 15px rgba(239, 68, 68, 0.05);
        }
        #undock-btn.show { display: block; }
        @keyframes undockPulse {
            0%, 100% { box-shadow: none; }
            50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.1); }
        }

        /* 연료 보급 진행 오버레이 - success */
        #refuel-overlay {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--hud-bg-dark);
            border: 2px solid var(--hud-success);
            border-radius: 0;
            clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
            padding: 30px 50px;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            z-index: var(--z-critical);
        }
        #refuel-overlay.show { display: flex; }
        #refuel-overlay .refuel-title {
            color: var(--hud-success-bright);
            font-size: 20px;
            font-family: 'Orbitron', sans-serif;
        }
        #refuel-overlay .refuel-bar-container {
            width: 300px;
            height: 30px;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid var(--hud-success);
            border-radius: 2px;
            overflow: hidden;
        }
        #refuel-overlay .refuel-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--hud-success), var(--hud-success-bright));
            transition: width 0.1s;
        }
        #refuel-overlay .refuel-amount {
            color: var(--hud-text-bright);
            font-size: 24px;
            font-family: 'Orbitron', sans-serif;
        }
        #refuel-overlay .refuel-cost {
            color: var(--hud-caution);
            font-size: 14px;
        }
        
        /* ★★★ 수리 오버레이 - secondary ★★★ */
        #repair-overlay {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--hud-bg-dark);
            border: 2px solid var(--hud-secondary);
            border-radius: 0;
            clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
            padding: 30px 50px;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            z-index: var(--z-critical);
        }
        #repair-overlay.show { display: flex; }
        #repair-overlay .repair-title {
            color: var(--hud-secondary);
            font-size: 20px;
            font-family: 'Orbitron', sans-serif;
        }
        #repair-overlay .repair-bar-container {
            width: 300px;
            height: 30px;
            background: var(--hud-secondary-ghost);
            border: 1px solid var(--hud-secondary);
            border-radius: 2px;
            overflow: hidden;
        }
        #repair-overlay .repair-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--hud-secondary-dim), var(--hud-secondary));
            transition: width 0.1s;
        }
        #repair-overlay .repair-amount {
            color: var(--hud-text-bright);
            font-size: 24px;
            font-family: 'Orbitron', sans-serif;
        }
        #repair-overlay .repair-cost {
            color: var(--hud-caution);
            font-size: 14px;
        }
        
        /* ★★★ 내구도 게이지 (연료 옆) ★★★ */
        #hull-gauge {
            position: absolute;
            bottom: 150px;
            right: 85px;
            width: 35px;
            height: 140px;
            background: var(--hud-bg-panel);
            border: 2px solid var(--hud-secondary);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 4px;
            gap: 5px;
            z-index: var(--z-hud);
        }
        #hull-gauge .gauge-label {
            font-size: 10px;
            color: var(--hud-secondary);
            font-family: 'Orbitron', sans-serif;
            letter-spacing: 1px;
        }
        #hull-gauge .gauge-bar {
            width: 18px;
            height: 100px;
            background: var(--hud-secondary-ghost);
            border-radius: 4px;
            position: relative;
            overflow: hidden;
        }
        #hull-gauge .gauge-fill {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: linear-gradient(180deg, var(--hud-secondary), var(--hud-secondary-dim));
            transition: height 0.3s, background 0.3s;
            border-radius: 2px;
        }
        #hull-gauge .gauge-val {
            font-size: 10px;
            color: var(--hud-text-bright);
            font-family: 'Orbitron', sans-serif;
        }
        #hull-gauge.critical .gauge-fill {
            background: linear-gradient(180deg, var(--hud-danger), var(--hud-danger-bright));
            animation: hullCritical 0.5s infinite;
        }
        @keyframes hullCritical {
            50% { opacity: 0.6; }
        }
        
        
        /* ★★★ 내구도 경고 ★★★ */
        .pilot-warning.hull-critical {
            background: var(--hud-danger-ghost);
            border-color: var(--hud-danger);
            color: var(--hud-danger);
        }
        
        /* 수리 버튼 - 통합 스타일 적용 (위 .docking-menu-btn.repair 참조) */
        
        #pilot-target-select { position: absolute; top: 65px; left: 50%; transform: translateX(-50%); pointer-events: auto; z-index: var(--z-panels); }
        #ship-target-toggle {
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-secondary);
            color: var(--hud-secondary);
            padding: 8px 16px;
            font-size: 11px;
            font-family: 'Share Tech Mono', monospace;
            cursor: pointer;
            clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
            white-space: nowrap;
            transition: border-color 0.2s, color 0.2s;
        }
        #ship-target-toggle:hover, #ship-target-toggle.open {
            border-color: var(--hud-secondary);
            color: var(--hud-text-bright);
            text-shadow: 0 0 8px var(--hud-secondary);
        }
        #ship-target-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            min-width: 220px;
            max-height: calc(100dvh - 80px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            background: rgba(8, 12, 24, 0.96);
            border: 1px solid var(--hud-secondary-dim);
            border-top: none;
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            scrollbar-width: thin;
            scrollbar-color: var(--hud-secondary-dim) transparent;
        }
        #ship-target-dropdown.open { display: block; }
        .target-option {
            padding: 8px 14px;
            color: var(--hud-text-normal);
            cursor: pointer;
            border-bottom: 1px solid rgba(245, 158, 11, 0.1);
            transition: background 0.15s, color 0.15s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .target-option:hover {
            background: rgba(245, 158, 11, 0.15);
            color: var(--hud-secondary);
        }
        .target-option.selected {
            background: rgba(245, 158, 11, 0.2);
            color: var(--hud-secondary);
            border-left: 2px solid var(--hud-secondary);
        }
        .target-option .target-icon {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .target-option-header {
            padding: 6px 14px;
            color: var(--hud-text-dim);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-bottom: 1px solid rgba(245, 158, 11, 0.15);
            pointer-events: none;
        }
        
        /* ★★★ 3D 좌표 표시 패널 ★★★ */
        #pilot-coords-panel {
            position: absolute;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-primary-dim);
            padding: 8px 20px;
            border-radius: 0;
            clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
            text-align: center;
            font-family: 'Share Tech Mono', monospace;
            box-shadow: var(--hud-primary-glow);
            cursor: pointer;
            transition: all 0.2s;
            z-index: var(--z-hud);
        }
        #pilot-coords-panel:hover {
            background: rgba(6, 182, 212, 0.1);
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
        }
        #pilot-coords-panel:active { transform: translateX(-50%) scale(0.95); }
        #pilot-coords-panel .coords-label { font-size: 9px; color: var(--hud-primary); margin-bottom: 2px; letter-spacing: 1px; }
        #pilot-coords-panel .coords-value { font-size: 12px; color: var(--hud-text-bright); letter-spacing: 1px; }
        #pilot-coords-panel.copied { border-color: var(--hud-success); box-shadow: var(--hud-success-glow); }
        #pilot-coords-panel.copied .coords-label { color: var(--hud-success); }
        
        /* ===== ETA 박스 (HUD 통일) ===== */
        #pilot-eta-box {
            position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-success);
            padding: 8px 20px; border-radius: 0;
            clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
            text-align: center; display: none;
            box-shadow: var(--hud-success-glow);
        }
        #pilot-eta-box.active { display: block; }
        #pilot-eta-box .eta-label { font-size: 9px; color: var(--hud-success); letter-spacing: 2px; text-transform: uppercase; }
        #pilot-eta-box .eta-time { font-size: 20px; color: var(--hud-text-bright); font-family: 'Share Tech Mono', monospace; }
        #pilot-eta-box .eta-target { font-size: 10px; color: var(--hud-success); }

        /* ===== 경고 패널 (수평 칩 방식) ===== */
        #pilot-warning-panel {
            position: absolute;
            top: 55px; left: 50%; transform: translateX(-50%);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            justify-content: center;
            max-width: 70%;
            pointer-events: none;
        }
        .pilot-warning {
            background: var(--hud-danger-ghost);
            border: 1px solid var(--hud-danger);
            padding: 4px 10px;
            border-radius: 0;
            clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
            color: var(--hud-danger);
            font-size: 10px;
            font-family: 'Share Tech Mono', monospace;
            text-transform: uppercase;
            letter-spacing: 1px;
            animation: hud-warning-blink 1.5s infinite;
            display: none;
            pointer-events: auto;
        }
        .pilot-warning.active { display: block; }
        @keyframes hud-warning-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
        /* 감속 경고 - caution 색상 */
        .pilot-warning.caution { background: var(--hud-caution-ghost); border-color: var(--hud-caution); color: var(--hud-caution); }
        .pilot-warning.decel {
            background: var(--hud-caution-ghost);
            border: 1px solid var(--hud-caution);
            color: var(--hud-caution);
            font-size: 11px;
            padding: 6px 16px;
            animation: hud-caution-blink 1s infinite;
            box-shadow: var(--hud-caution-glow);
        }
        @keyframes hud-caution-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
        /* 중력 포획 - danger 강조 */
        .pilot-warning.gravity {
            background: var(--hud-danger-ghost);
            border: 2px solid var(--hud-danger);
            color: var(--hud-text-bright);
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 8px 20px;
            animation: hud-gravity-pulse 0.5s infinite;
            box-shadow: var(--hud-danger-glow);
            clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
        }
        @keyframes hud-gravity-pulse { 0%, 100% { background: rgba(239,68,68,0.15); } 50% { background: rgba(239,68,68,0.4); } }
        /* ARIA 활성 - accent 색상 (인라인 스타일 대체) */
        .pilot-warning.aria,
        #warn-aria-active {
            background: var(--hud-accent-ghost);
            border-color: var(--hud-accent);
            color: var(--hud-accent);
            animation: none;
        }
        
        #pilot-left { position: absolute; left: 10px; left: calc(10px + env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
        .pilot-gauge {
            width: 90px;
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-border-active);
            border-radius: 0;
            clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
            padding: 10px;
            text-align: center;
            position: relative;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(6, 182, 212, 0.03);
        }
        .pilot-gauge::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--hud-primary), transparent);
        }
        .pilot-gauge-title {
            font-family: 'Share Tech Mono', monospace;
            font-size: 8px;
            font-weight: 600;
            color: var(--hud-primary-dim);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .pilot-gauge-value {
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: var(--hud-primary-bright);
            text-shadow: var(--hud-primary-glow);
        }
        .pilot-gauge-unit { font-size: 8px; color: var(--hud-text-dim); font-family: 'Share Tech Mono', monospace; }
        .pilot-gauge-bar { 
            width: 100%;
            height: 6px;
            background: var(--hud-primary-ghost);
            border-radius: 2px;
            margin-top: 6px;
            overflow: hidden;
            border: 1px solid var(--hud-border-subtle);
        }
        .pilot-gauge-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
        .pilot-gauge-fill.speed { background: linear-gradient(90deg, var(--hud-success), var(--hud-caution), var(--hud-danger)); }
        
        #pilot-right { position: absolute; right: 10px; right: calc(10px + env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; max-width: 140px; }
        /* pilot-radar CSS 제거됨 */

        /* 미니맵 - 네온 */
        #minimap-overlay {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 340px;
            height: 380px;
            z-index: var(--z-overlay);
            pointer-events: auto;
            background: radial-gradient(ellipse at center, rgba(0,30,60,0.85) 0%, rgba(5,5,15,0.95) 70%);
            border: 1px solid rgba(6,182,212,0.4);
            border-radius: 16px;
            padding: 12px;
            box-shadow:
                0 0 40px rgba(6,182,212,0.15),
                0 0 80px rgba(6,182,212,0.05),
                inset 0 0 60px rgba(6,182,212,0.03);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #minimap-header {
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            color: var(--sf-cyan);
            letter-spacing: 3px;
            text-align: center;
            margin-bottom: 8px;
            text-shadow: 0 0 10px var(--sf-cyan-glow);
            opacity: 0.8;
        }
        #minimap-canvas {
            width: 320px;
            height: 320px;
            border-radius: 50%;
            border: 1px solid rgba(6,182,212,0.3);
            box-shadow:
                0 0 20px rgba(6,182,212,0.1),
                inset 0 0 40px rgba(6,182,212,0.05);
            background: radial-gradient(circle, rgba(0,20,40,0.6) 0%, rgba(0,5,15,0.9) 100%);
            animation: neon-breathe 6s infinite;
        }
        #minimap-tooltip {
            position: absolute;
            padding: 4px 10px;
            background: rgba(0,20,40,0.9);
            border: 1px solid var(--sf-cyan);
            border-radius: 4px;
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            color: var(--hud-text-bright);
            white-space: nowrap;
            pointer-events: none;
            box-shadow: 0 0 12px var(--sf-cyan-glow);
            z-index: var(--z-base);
        }
        #minimap-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background: var(--hud-danger-ghost);
            border: 1px solid rgba(239, 68, 68, 0.4);
            border-radius: 6px;
            color: var(--hud-danger-bright);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
            transition: all 0.2s;
        }
        #minimap-close:hover {
            background: rgba(239, 68, 68, 0.3);
            box-shadow: var(--hud-danger-glow);
        }
        @media (max-height: 500px) {
            #minimap-overlay { width: 280px; height: 310px; padding: 8px; }
            #minimap-canvas { width: 260px; height: 260px; }
            #minimap-header { font-size: 9px; margin-bottom: 4px; }
        }

        /* 타겟 정보 패널 - secondary(앰버) 색상 */
        #pilot-target-info {
            background: linear-gradient(135deg, rgba(8, 12, 24, 0.92) 0%, rgba(245, 158, 11, 0.04) 100%);
            border: 1px solid var(--hud-secondary-dim);
            padding: 6px 8px;
            border-radius: 0;
            clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
            min-width: 90px;
            font-size: 10px;
            box-shadow: 0 0 4px rgba(245, 158, 11, 0.15), inset 0 0 6px rgba(245, 158, 11, 0.03);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            pointer-events: auto;
        }
        .target-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: var(--hud-secondary); text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 4px rgba(245, 158, 11, 0.4); }
        .target-name { font-size: 11px; color: var(--hud-text-bright); margin: 4px 0; font-weight: 600; }
        .target-dist, .target-eta { font-size: 9px; color: var(--hud-secondary-dim); }

        /* 오토파일럿 정보 패널 - primary 기본, active시 success */
        #pilot-autopilot-info {
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-primary-dim);
            padding: 6px 8px;
            border-radius: 0;
            clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
            min-width: 90px;
            font-size: 10px;
            box-shadow: var(--hud-primary-glow);
            pointer-events: auto;
        }
        #pilot-autopilot-info.inactive {
            background: var(--hud-bg-panel);
            border-color: var(--hud-border-inactive);
            box-shadow: none;
        }
        .ap-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: var(--hud-primary); text-transform: uppercase; letter-spacing: 2px; }
        #pilot-autopilot-info.inactive .ap-label { color: var(--hud-text-dim); }
        .ap-status { font-size: 11px; color: var(--hud-text-bright); margin: 4px 0; font-weight: 600; }
        .ap-phase { font-size: 9px; color: var(--hud-success); }
        
        /* ★ 미션 미니 HUD */
        #pilot-mission-hud {
            background: rgba(0, 15, 30, 0.85);
            border: 1px solid rgba(255, 180, 50, 0.4);
            padding: 6px 8px;
            margin-top: 4px;
            clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
            min-width: 90px;
            box-shadow: 0 0 6px rgba(255, 180, 50, 0.15);
            pointer-events: auto;
        }
        .mission-hud-label {
            font-family: 'Share Tech Mono', monospace;
            font-size: 9px;
            color: #ffb432;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .mission-hud-title {
            font-size: 10px;
            color: #ffe0a0;
            font-weight: 600;
            margin: 3px 0 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 140px;
        }
        .mission-hud-desc {
            font-size: 8px;
            color: rgba(255, 224, 160, 0.6);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 140px;
        }
        .mission-hud-dist {
            font-size: 9px;
            color: #ffb432;
            margin-top: 3px;
            font-family: 'Orbitron', sans-serif;
        }

        /* 조종실 라디오 패널 */
        #cockpit-radio {
            position: fixed;
            top: 50px;
            right: 60px;
            background: linear-gradient(135deg, rgba(10, 15, 25, 0.98) 0%, rgba(15, 20, 30, 0.95) 100%);
            border: 1px solid var(--sf-cyan);
            border-radius: 0;
            clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
            padding: 8px;
            z-index: var(--z-modal);
            display: none;
            min-width: 120px;
            font-family: 'Orbitron', sans-serif;
            font-size: 10px;
            box-shadow: var(--sf-glow-cyan), 0 0 20px rgba(0, 0, 0, 0.5);
        }
        body.pilot-mode #cockpit-radio { display: block; }
        #cockpit-radio.collapsed {
            width: 40px;
            min-width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            overflow: hidden;
            clip-path: none;
        }
        #cockpit-radio.collapsed .radio-content { display: none; }
        #cockpit-radio.collapsed .radio-toggle { 
            width: 100%; 
            height: 100%; 
            border-radius: 50%;
            font-size: 1.2em;
        }
        .radio-toggle {
            background: var(--hud-primary-ghost);
            border: 1px solid var(--hud-primary);
            color: var(--hud-primary);
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.85em;
            width: 100%;
        }
        .radio-toggle:hover { background: rgba(6, 182, 212, 0.3); }
        .radio-toggle.playing {
            background: var(--hud-success-ghost);
            border-color: var(--hud-success);
            color: var(--hud-success);
            animation: radioPulse 1s infinite;
        }
        @keyframes radioPulse {
            0%, 100% { box-shadow: 0 0 5px rgba(0,255,100,0.5); }
            50% { box-shadow: 0 0 15px rgba(0,255,100,0.8); }
        }
        .radio-content { margin-top: 10px; }
        .radio-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .radio-close-btn {
            background: var(--hud-danger-ghost);
            border: 1px solid rgba(239, 68, 68, 0.4);
            color: var(--hud-danger-bright);
            width: 22px;
            height: 22px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .radio-close-btn:hover {
            background: rgba(239, 68, 68, 0.4);
            color: var(--hud-text-bright);
        }
        .radio-title {
            color: var(--hud-primary);
            font-size: 0.75em;
            text-align: center;
        }
        .radio-station {
            background: var(--hud-bg-panel-alt);
            border: 1px solid var(--hud-border-inactive);
            color: var(--hud-text-dim);
            padding: 8px;
            margin: 4px 0;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.7em;
            transition: all 0.2s;
        }
        .radio-station:hover {
            border-color: var(--hud-primary);
            color: var(--hud-text-bright);
        }
        .radio-station.active {
            border-color: var(--hud-success);
            color: var(--hud-success);
            background: var(--hud-success-ghost);
        }
        .radio-station-name { font-weight: bold; }
        .radio-station-desc { font-size: 0.85em; opacity: 0.7; margin-top: 2px; }
        .radio-volume {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            font-size: 0.7em;
            color: var(--hud-text-dim);
        }
        .radio-volume input { flex: 1; cursor: pointer; }
        .radio-now-playing {
            margin-top: 8px;
            padding: 6px;
            background: rgba(0,0,0,0.3);
            border-radius: 5px;
            font-size: 0.65em;
            color: var(--hud-primary);
            text-align: center;
            min-height: 20px;
        }
        
        /* AI 부조종사 패널 */
        /* ========== 통합 채팅 패널 ========== */
        #unified-chat-panel {
            position: fixed;
            left: 5px;
            left: calc(5px + env(safe-area-inset-left));
            top: 5px;
            width: 180px;
            max-width: 30vw;
            background: rgba(5, 5, 8, 0.95);
            border: 1px solid rgba(6, 182, 212, 0.35);
            border-radius: 6px;
            padding: 5px;
            pointer-events: auto;
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.2), inset 0 0 10px rgba(6, 182, 212, 0.03);
            font-size: 10px;
            z-index: var(--z-overlay);
            transition: background 0.5s, border-color 0.5s, box-shadow 0.5s;
            display: none;
        }
        #unified-chat-panel.transparent {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
        }
        #unified-chat-panel.transparent .chat-tab-bar,
        #unified-chat-panel.transparent .chat-content-box {
            background: transparent;
        }
        #unified-chat-panel.transparent .chat-tab {
            background: transparent;
            border-color: transparent;
        }
        #unified-chat-panel.transparent #chat-toggle-btn {
            background: transparent;
            border-color: transparent;
        }
        
        .chat-tab-bar {
            display: flex;
            gap: 5px;
            margin-bottom: 6px;
            align-items: center;
        }
        .chat-tab {
            flex: 1;
            padding: 4px 5px;
            background: var(--hud-bg-panel-alt);
            border: 1px solid var(--hud-border-inactive);
            border-radius: 4px;
            color: var(--hud-text-dim);
            cursor: pointer;
            font-size: 9px;
            transition: all 0.2s;
        }
        .chat-tab.active {
            background: var(--hud-primary-ghost);
            border-color: var(--hud-primary);
            color: var(--hud-primary);
        }
        .chat-tab:hover {
            border-color: var(--hud-primary);
        }
        #chat-toggle-btn, #chat-size-btn {
            width: 20px;
            height: 20px;
            background: transparent;
            border: 1px solid var(--hud-primary);
            border-radius: 4px;
            color: var(--hud-primary);
            cursor: pointer;
            font-size: 10px;
            transition: all 0.3s;
            flex-shrink: 0;
        }
        #chat-toggle-btn:hover, #chat-size-btn:hover {
            background: var(--hud-primary-ghost);
        }
        /* 채팅 패널 1.5배 확장 */
        #unified-chat-panel.chat-expanded {
            width: 270px;
            max-width: 45vw;
        }
        #unified-chat-panel.chat-expanded .chat-content-box {
            max-height: 120px;
        }
        
        .chat-content-box {
            min-height: 30px;
            max-height: 80px;
            overflow-y: auto;
            font-size: 10px;
            color: var(--hud-text-normal);
            line-height: 1.4;
            padding: 4px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
            margin-bottom: 4px;
        }
        .chat-content-box::-webkit-scrollbar { width: 3px; }
        .chat-content-box::-webkit-scrollbar-thumb { background: var(--hud-primary); border-radius: 3px; }
        
        .chat-input-area {
            display: flex;
            gap: 5px;
        }
        .chat-input-area input {
            flex: 1;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid var(--hud-border-inactive);
            border-radius: 4px;
            padding: 4px 5px;
            color: var(--hud-text-bright);
            font-size: 9px;
        }
        .chat-input-area input:focus {
            outline: none;
            border-color: var(--hud-primary);
        }
        .chat-input-area button {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, var(--hud-primary-dim), var(--hud-primary));
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            font-size: 11px;
        }
        
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        
        /* 접힌 상태 */
        #unified-chat-panel.collapsed .chat-content,
        #unified-chat-panel.collapsed .chat-content-box,
        #unified-chat-panel.collapsed .chat-input-area {
            display: none;
        }
        #unified-chat-panel.collapsed {
            width: auto;
            padding: 6px 8px;
        }
        #unified-chat-panel.collapsed .chat-tab-bar {
            margin-bottom: 0;
        }
        #unified-chat-panel.collapsed #chat-toggle-btn {
            transform: rotate(180deg);
        }
        
        /* 멀티 채팅 메시지 스타일 */
        .mp-msg { margin: 3px 0; word-break: break-word; }
        .mp-msg .nick { color: var(--hud-secondary); font-weight: bold; margin-right: 5px; }
        .mp-msg .time { color: var(--hud-text-dim); font-size: 9px; margin-right: 5px; }
        .mp-msg .text { color: var(--hud-text-bright); }
        .mp-msg.system { color: var(--hud-primary); font-style: italic; }

        /* ARIA 메시지 스타일 */
        .aria-msg { margin: 3px 0; }
        .aria-msg .aria-label { color: var(--hud-accent); font-weight: bold; }
        .aria-msg .aria-text { color: var(--hud-text-normal); white-space: pre-wrap; }
        
        /* 기존 패널 숨김 */
        #ai-copilot-panel { display: none !important; }
        #multiplayer-ui { display: none !important; }
        
        /* AI 로딩 표시 */
        #ai-copilot-panel.loading #ai-avatar {
            animation: ai-loading 1s linear infinite;
        }
        @keyframes ai-loading {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 미션 알림 */
        #ai-mission-alert {
            display: none;
            position: absolute;
            top: -8px;
            right: -8px;
            width: 20px;
            height: 20px;
            background: var(--hud-danger);
            border-radius: 50%;
            font-size: 10px;
            color: var(--hud-text-bright);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: bounce 0.5s infinite;
        }
        @keyframes bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        
        /* AI 교신 모달 */
        #ai-comm-modal {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(10, 20, 40, 0.98);
            border: 2px solid var(--hud-accent);
            border-radius: 15px;
            padding: 20px;
            min-width: 300px;
            max-width: 90vw;
            max-height: 85vh;
            overflow-y: auto;
            z-index: var(--z-panels);
            pointer-events: auto;
        }
        #ai-comm-modal.open { display: block; }
        #ai-comm-portrait {
            font-size: 50px;
            text-align: center;
            margin-bottom: 10px;
        }
        #ai-comm-name {
            text-align: center;
            font-size: 14px;
            color: var(--hud-accent);
            margin-bottom: 10px;
        }
        #ai-comm-message {
            font-size: 12px;
            color: #e0e0e0;
            line-height: 1.5;
            margin-bottom: 15px;
            min-height: 60px;
        }
        #ai-comm-choices {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .ai-comm-choice {
            padding: 10px 15px;
            background: var(--hud-accent-ghost);
            border: 1px solid var(--hud-accent);
            border-radius: 8px;
            color: var(--hud-text-bright);
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s;
            font-family: 'Orbitron', sans-serif;
        }
        .ai-comm-choice:hover {
            background: rgba(139, 92, 246, 0.3);
            transform: translateX(5px);
        }
        .ai-comm-choice.danger { border-color: var(--hud-danger); color: var(--hud-danger); }
        .ai-comm-choice.success { border-color: var(--hud-success); color: var(--hud-success); }

        /* ★★★ SSIL 이벤트 미션 모달 ★★★ */
        #ssil-event-modal {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(5, 15, 30, 0.98);
            border: 2px solid #00ccaa;
            border-radius: 15px;
            padding: 20px;
            min-width: 300px;
            max-width: 90vw;
            z-index: var(--z-panels);
            pointer-events: auto;
            box-shadow: 0 0 30px rgba(0, 204, 170, 0.3);
        }
        #ssil-event-modal.open { display: block; }
        #ssil-event-portrait {
            font-size: 40px;
            text-align: center;
            margin-bottom: 6px;
        }
        #ssil-event-sender {
            text-align: center;
            font-size: 11px;
            color: #00ccaa;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        #ssil-event-title {
            text-align: center;
            font-size: 16px;
            color: var(--hud-text-bright);
            font-weight: bold;
            margin-bottom: 8px;
            font-family: 'Orbitron', sans-serif;
        }
        #ssil-event-desc {
            font-size: 12px;
            color: #c0c0c0;
            line-height: 1.5;
            margin-bottom: 8px;
            text-align: center;
        }
        #ssil-event-howto {
            font-size: 11px;
            color: #6cf;
            line-height: 1.6;
            margin-bottom: 8px;
            padding: 6px 10px;
            background: rgba(0, 180, 255, 0.08);
            border: 1px solid rgba(0, 180, 255, 0.2);
            border-radius: 4px;
            text-align: left;
            white-space: pre-line;
        }
        #ssil-event-reward {
            text-align: center;
            font-size: 14px;
            color: #ffd700;
            margin-bottom: 12px;
            font-family: 'Orbitron', sans-serif;
        }
        #ssil-event-choices {
            display: flex;
            gap: 8px;
            justify-content: center;
        }
        .ssil-event-btn {
            padding: 10px 20px;
            border-radius: 8px;
            color: var(--hud-text-bright);
            cursor: pointer;
            font-size: 12px;
            font-family: 'Orbitron', sans-serif;
            transition: all 0.2s;
            min-height: 44px;
            touch-action: manipulation;
        }
        .ssil-event-btn span { pointer-events: none; }
        .ssil-event-btn.accept {
            background: rgba(0, 204, 170, 0.3);
            border: 1px solid #00ccaa;
        }
        .ssil-event-btn.accept:hover { background: rgba(0, 204, 170, 0.5); }
        .ssil-event-btn.decline {
            background: rgba(100, 100, 100, 0.3);
            border: 1px solid #666;
        }
        .ssil-event-btn.decline:hover { background: rgba(100, 100, 100, 0.5); }

        /* ★★★ SSIL 이벤트 진행 HUD ★★★ */
        #ssil-event-hud {
            display: none;
            position: fixed;
            top: 80px;
            right: 15px;
            background: rgba(0, 20, 40, 0.85);
            border: 1px solid #00ccaa;
            border-radius: 8px;
            padding: 10px 15px;
            color: #e0e0e0;
            font-size: 12px;
            z-index: var(--z-controls);
            font-family: 'Orbitron', sans-serif;
            pointer-events: none;
        }
        #ssil-event-hud.active { display: block; }
        #ssil-event-hud-title {
            color: #00ccaa;
            font-size: 11px;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        #ssil-event-hud-progress {
            color: #ffd700;
            font-size: 13px;
        }

        /* NPC 선박 라벨 */
        .npc-label {
            white-space: nowrap;
            font-family: 'Orbitron', sans-serif;
        }

        /* ★★★ 멀티모드 로비 UI ★★★ */
        #lobby-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: var(--z-controls);
            pointer-events: none;
            flex-direction: column;
        }
        #lobby-overlay.open { display: flex; pointer-events: auto; }
        body.pilot-mode #lobby-overlay { display: none !important; }
        body.pilot-mode #lobby-overlay.open { display: flex !important; }
        body.single-mode #lobby-overlay { display: none !important; }

        #lobby-top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 20px;
            background: var(--sf-bg-panel);
            border-bottom: 1px solid rgba(6, 182, 212, 0.3);
            backdrop-filter: blur(10px);
            pointer-events: auto;
            height: 44px;
            flex-shrink: 0;
        }
        .lobby-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: var(--sf-cyan-bright);
            text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
            letter-spacing: 2px;
        }
        #lobby-top-right {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Share Tech Mono', monospace;
            font-size: 12px;
            color: var(--sf-green);
        }
        .lobby-online-dot {
            width: 8px; height: 8px;
            background: var(--sf-green);
            border-radius: 50%;
            box-shadow: 0 0 6px var(--sf-green);
            animation: lobbyPulse 2s ease-in-out infinite;
        }
        @keyframes lobbyPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        #lobby-main {
            flex: 1;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            gap: 10px;
            overflow: hidden;
            pointer-events: none;
        }

        #lobby-left-panel, #lobby-right-panel {
            width: 220px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: auto;
        }

        #lobby-profile-section, #lobby-mission-section,
        #lobby-ship-section, #lobby-equip-section {
            background: rgba(8, 12, 24, 0.92);
            border: 1px solid rgba(6, 182, 212, 0.3);
            border-radius: 8px;
            padding: 12px;
            backdrop-filter: blur(15px);
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.08), inset 0 0 10px rgba(6, 182, 212, 0.03);
            animation: panel-breathe 4s ease-in-out infinite;
        }

        #lobby-profile-header {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 8px;
        }
        #lobby-avatar {
            width: 48px; height: 48px;
            background: linear-gradient(135deg, var(--sf-purple), var(--sf-neon-blue));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            border: 2px solid rgba(6, 182, 212, 0.5);
            flex-shrink: 0;
            overflow: hidden;
        }
        #lobby-avatar img {
            width: 100%; height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        #lobby-nickname {
            font-family: 'Orbitron', sans-serif;
            font-size: 13px;
            color: var(--sf-text-bright);
            font-weight: 600;
        }
        #lobby-level-row {
            font-family: 'Share Tech Mono', monospace;
            font-size: 10px;
            color: var(--sf-cyan);
            margin-top: 2px;
        }
        #lobby-exp-bar {
            width: 100%; height: 4px;
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
            margin-top: 4px;
            overflow: hidden;
        }
        #lobby-exp-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--sf-cyan), var(--sf-green));
            border-radius: 2px;
            transition: width 0.5s;
            width: 0%;
        }
        #lobby-coins-row {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Share Tech Mono', monospace;
            font-size: 14px;
            color: #ffd700;
            padding-top: 6px;
            border-top: 1px solid rgba(255,255,255,0.05);
        }

        #lobby-mission-section, #lobby-equip-section {
            flex: 1;
            overflow-y: auto;
            max-height: calc(100dvh - 250px);
        }
        .lobby-section-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 11px;
            color: var(--sf-cyan);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            padding-bottom: 4px;
            border-bottom: 1px solid rgba(6, 182, 212, 0.2);
        }
        .lobby-mission-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            border-bottom: 1px solid rgba(255,255,255,0.03);
        }
        .lobby-mission-icon { font-size: 14px; flex-shrink: 0; }
        .lobby-mission-info { flex: 1; }
        .lobby-mission-name { color: var(--sf-text-normal); font-size: 11px; }
        .lobby-mission-progress-bar {
            height: 3px;
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
            margin-top: 3px;
            overflow: hidden;
        }
        .lobby-mission-progress-fill {
            height: 100%;
            background: var(--sf-cyan);
            border-radius: 2px;
        }
        .lobby-mission-reward {
            font-family: 'Share Tech Mono', monospace;
            font-size: 10px;
            color: #ffd700;
            flex-shrink: 0;
        }

        #lobby-ship-preview {
            width: 100%; height: 80px;
            background: radial-gradient(circle, rgba(10,20,40,0.8) 0%, rgba(5,5,8,0.6) 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            overflow: hidden;
        }
        #lobby-ship-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
        #lobby-ship-name {
            font-family: 'Orbitron', sans-serif;
            font-size: 13px;
            color: var(--sf-text-bright);
            text-align: center;
            margin-bottom: 8px;
        }
        .lobby-stat-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }
        .lobby-stat-label {
            width: 55px;
            font-size: 9px;
            color: var(--sf-text-dim);
            font-family: 'Rajdhani', sans-serif;
        }
        .lobby-stat-bar {
            flex: 1; height: 5px;
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
            overflow: hidden;
        }
        .lobby-stat-fill { height: 100%; border-radius: 3px; }
        .lobby-stat-val {
            width: 40px; text-align: right;
            font-family: 'Share Tech Mono', monospace;
            font-size: 9px;
            color: var(--sf-text-normal);
        }

        .lobby-equip-slot {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px;
            background: rgba(0,0,0,0.2);
            border-radius: 6px;
            margin-bottom: 4px;
            font-size: 10px;
            color: var(--sf-text-dim);
        }
        .lobby-equip-slot .slot-icon { font-size: 14px; flex-shrink: 0; }
        .lobby-equip-slot .slot-name { flex: 1; color: var(--sf-text-normal); }

        #lobby-bottom-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            padding-bottom: calc(10px + env(safe-area-inset-bottom));
            background: var(--sf-bg-panel);
            border-top: 1px solid rgba(6, 182, 212, 0.3);
            backdrop-filter: blur(10px);
            pointer-events: auto;
            flex-shrink: 0;
        }
        .lobby-action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            padding: 8px 14px;
            background: rgba(6, 182, 212, 0.08);
            border: 1px solid rgba(6, 182, 212, 0.25);
            border-radius: 10px;
            color: var(--sf-cyan);
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Rajdhani', sans-serif;
            min-height: 44px;
            min-width: 60px;
            touch-action: manipulation;
        }
        .lobby-action-btn:hover, .lobby-action-btn:active {
            background: rgba(6, 182, 212, 0.2);
            border-color: var(--sf-cyan);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
        }
        .lobby-action-btn.primary {
            background: linear-gradient(180deg, rgba(6, 182, 212, 0.3), rgba(6, 182, 212, 0.15));
            border-color: var(--sf-cyan);
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
        }
        .lobby-btn-icon { font-size: 18px; pointer-events: none; }
        .lobby-btn-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            pointer-events: none;
            white-space: nowrap;
        }

        /* ★★★ 브리핑 보드 중앙 홀로그램 ★★★ */
        #briefing-center {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            position: relative;
        }
        #briefing-display {
            width: 100%;
            max-width: min(400px, calc(100dvh - 180px));
            aspect-ratio: 1;
            background: radial-gradient(circle, rgba(0,255,255,0.04) 0%, rgba(0,20,40,0.6) 50%, transparent 70%);
            border: 1px solid rgba(0,255,255,0.12);
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 40px rgba(0,255,255,0.06), inset 0 0 40px rgba(0,255,255,0.03);
        }
        #briefing-display-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 11px;
            color: rgba(0,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 10px;
            text-align: center;
        }
        /* 홀로그램 태양계 */
        #briefing-holo-system {
            width: 100%; height: 100%;
            position: relative;
        }
        .holo-sun {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 20px; height: 20px;
            background: radial-gradient(circle, #ffd700 0%, #ff8c00 50%, transparent 70%);
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(255,200,0,0.6), 0 0 40px rgba(255,150,0,0.3);
        }
        .holo-orbit {
            position: absolute;
            top: 50%; left: 50%;
            border: 1px dashed rgba(0,255,255,0.12);
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        .holo-planet {
            position: absolute;
            border-radius: 50%;
            box-shadow: 0 0 6px currentColor;
            animation: holo-orbit-spin linear infinite;
        }
        @keyframes holo-orbit-spin {
            from { transform: rotate(0deg) translateX(var(--orbit-r)) rotate(0deg); }
            to { transform: rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg); }
        }
        /* 홀로그램 스캔라인 효과 */
        #briefing-display::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0,255,255,0.015) 2px,
                rgba(0,255,255,0.015) 4px
            );
            pointer-events: none;
            border-radius: 50%;
        }
        /* 브리핑 콘텐츠 (비태양계) */
        .briefing-content {
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: rgba(0,255,255,0.7);
            font-family: 'Orbitron', sans-serif;
            padding: 20px;
            text-align: center;
        }
        .briefing-content-icon { font-size: 40px; margin-bottom: 10px; }
        .briefing-content-title { font-size: 14px; color: #0ff; margin-bottom: 6px; }
        .briefing-content-desc { font-size: 10px; color: rgba(0,255,255,0.5); line-height: 1.5; }

        /* ★★★ 해적 경고 배너 ★★★ */
        #pirate-warning-banner {
            display: none;
            position: absolute;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(180, 30, 30, 0.9);
            border: 2px solid #ff4444;
            border-radius: 10px;
            padding: 10px 20px;
            z-index: var(--z-panels);
            pointer-events: auto;
            text-align: center;
            color: var(--hud-text-bright);
            font-family: 'Orbitron', sans-serif;
            animation: pirate-pulse 1s infinite alternate;
        }
        #pirate-warning-banner.active { display: block; }
        .pirate-btn {
            padding: 8px 15px;
            margin: 5px;
            border-radius: 8px;
            border: 1px solid;
            cursor: pointer;
            font-family: 'Orbitron', sans-serif;
            font-size: 11px;
            background: transparent;
            touch-action: manipulation;
            min-height: 44px;
        }
        .pirate-btn.fight { border-color: #ff4444; color: #ff4444; background: rgba(255,68,68,0.2); }
        .pirate-btn.fight:active { background: rgba(255,68,68,0.5); }
        .pirate-btn.flee { border-color: #4488ff; color: #4488ff; background: rgba(68,68,255,0.2); }
        .pirate-btn.flee:active { background: rgba(68,68,255,0.5); }
        .pirate-btn span { pointer-events: none; }
        @keyframes pirate-pulse {
            from { box-shadow: 0 0 10px rgba(255,0,0,0.3); }
            to { box-shadow: 0 0 25px rgba(255,0,0,0.6); }
        }

        /* ★★★ 전리품 팝업 ★★★ */
        #loot-popup {
            display: none;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(10, 30, 10, 0.95);
            border: 2px solid #44ff44;
            border-radius: 15px;
            padding: 20px 30px;
            z-index: var(--z-panels);
            text-align: center;
            color: #44ff44;
            font-family: 'Orbitron', sans-serif;
            font-size: 14px;
            pointer-events: none;
            animation: loot-appear 0.5s ease-out;
        }
        #loot-popup.active { display: block; }
        #loot-icon { font-size: 36px; margin-bottom: 8px; }
        #loot-text { white-space: pre-line; }
        @keyframes loot-appear {
            from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
            to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }

        /* 해적 라벨 */
        .pirate-label { pointer-events: none; }

        #crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; pointer-events: none; z-index: var(--z-hud); }
        .ch-line { position: absolute; background: rgba(255,60,60,0.8); }
        .ch-line.h { top: 50%; left: 0; width: 16px; height: 2px; }
        .ch-line.h::after { content:''; position: absolute; right: -32px; top: 0; width: 16px; height: 2px; background: rgba(255,60,60,0.8); }
        .ch-line.v { left: 50%; top: 0; height: 16px; width: 2px; transform: translateX(-50%); }
        .ch-line.v::after { content:''; position: absolute; bottom: -32px; left: 0; width: 2px; height: 16px; background: rgba(255,60,60,0.8); }
        .ch-dot { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: #ff3c3c; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 6px rgba(255,60,60,0.8); }
        #crosshair-focus-ring {
            position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
            transform: translate(-50%,-50%); border: 2px solid var(--hud-secondary);
            border-radius: 50%; opacity: 0; transition: opacity 0.3s;
            pointer-events: none; box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
        }
        #crosshair.focusing #crosshair-focus-ring { opacity: 1; animation: crosshairPulse 1s infinite; }
        @keyframes crosshairPulse {
            0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.7; }
            50% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
        }
        /* ★★★ 타겟 락온 링 (홀드 시 줄어드는 원) ★★★ */
        #crosshair-lock-ring {
            --lock-progress: 0;
            position: absolute; top: 50%; left: 50%;
            width: 80px; height: 80px;
            transform: translate(-50%,-50%);
            pointer-events: none; opacity: 0;
            transition: opacity 0.15s, transform 0.1s linear;
        }
        #crosshair-lock-ring svg {
            width: 100%; height: 100%;
        }
        #crosshair-lock-ring circle {
            fill: none;
            stroke: var(--hud-secondary);
            stroke-width: 3;
            stroke-dasharray: 289;  /* 2 * PI * 46 ≈ 289 */
            stroke-dashoffset: calc(289 * (1 - var(--lock-progress)));
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
            transition: stroke-dashoffset 0.1s linear;
        }
        #crosshair-lock-ring.active {
            opacity: 1;
            /* 줄어드는 효과: progress에 따라 스케일 감소 */
            transform: translate(-50%,-50%) scale(calc(1.5 - 0.5 * var(--lock-progress)));
        }
        #crosshair-lock-ring.locked {
            opacity: 1;
            transform: translate(-50%,-50%) scale(0.8);
            animation: lockFlash 0.6s ease-out;
        }
        @keyframes lockFlash {
            0% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
            50% { opacity: 1; transform: translate(-50%,-50%) scale(0.6); }
            100% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
        }
        #crosshair-target-btn {
            display: none;
            position: absolute;
            top: calc(50% - 15px);
            left: calc(50% + 45px);
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-secondary);
            color: var(--hud-secondary);
            padding: 6px 12px;
            font-size: 11px;
            font-family: 'Share Tech Mono', monospace;
            cursor: pointer;
            pointer-events: auto;
            z-index: var(--z-controls);
            clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
            animation: fadeIn 0.3s ease;
            white-space: nowrap;
            touch-action: manipulation;
        }
        #crosshair-target-btn.visible { display: block; }
        #crosshair-target-btn:active {
            background: rgba(245, 158, 11, 0.3);
            color: var(--hud-text-bright);
        }
        
        #pilot-bottom { position: absolute; bottom: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 12px; padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); pointer-events: none; }
        #pilot-left-console { display: flex; gap: 8px; align-items: flex-end; pointer-events: auto; }
        #pilot-center-console { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto; }
        #pilot-right-console { display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: auto; }
        /* 드래그 시 독립적으로 움직이도록 */
        #pilot-left-console.dragging,
        #pilot-center-console.dragging,
        #pilot-right-console.dragging,
        #mobile-gauge-container.dragging,
        #mobile-speed-container.dragging,
        #mobile-btns-container.dragging,
        #mobile-arrows-container.dragging {
            position: fixed !important;
            z-index: var(--z-system) !important;
        }
        .vertical-gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .vg-bar { width: 25px; height: 80px; background: var(--hud-bg-panel); border: 1px solid var(--hud-border-subtle); border-radius: 2px; padding: 2px; box-shadow: 0 0 4px rgba(6,182,212,0.1), inset 0 0 4px rgba(6,182,212,0.03); }
        .vg-bg { width: 100%; height: 100%; background: rgba(5,5,8,0.9); border-radius: 2px; position: relative; overflow: hidden; }
        .vg-fill { position: absolute; width: 100%; border-radius: 2px; transition: height 0.2s; }
        .vg-fill.throttle { background: linear-gradient(0deg, var(--hud-primary-dim), var(--hud-primary-bright)); bottom: 0; box-shadow: 0 0 6px rgba(6,182,212,0.4); }
        .vg-fill.fuel { background: linear-gradient(0deg, var(--hud-danger), var(--hud-caution), var(--hud-success)); bottom: 0; box-shadow: 0 0 6px rgba(16,185,129,0.3); }

        /* THR 게이지 - 중앙 0 */
        .thr-gauge { position: relative; }
        .thr-label-top { font-size: 9px; color: var(--hud-success); margin-bottom: 2px; }
        .thr-label-bottom { font-size: 9px; color: var(--hud-danger); margin-top: 2px; }
        .thr-bar { height: 100px; }
        .thr-center-line { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: var(--hud-text-dim); z-index: var(--z-base); }
        .vg-fill.throttle-up { bottom: 50%; background: linear-gradient(0deg, var(--hud-success), var(--hud-success-bright)); }
        .vg-fill.throttle-down { top: 50%; background: linear-gradient(180deg, var(--hud-danger), var(--hud-danger-bright)); }
        .vg-label { font-size: 9px; color: var(--hud-primary-dim); font-family: 'Share Tech Mono', monospace; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 4px rgba(6,182,212,0.3); }
        .vg-value { font-size: 9px; color: var(--hud-text-bright); font-weight: 600; }

        /* ★ 중앙 타겟 거리 표시 */
        #center-target-display {
            text-align: center;
            font-family: 'Share Tech Mono', monospace;
        }
        .center-tgt-name {
            font-size: 11px;
            color: var(--hud-primary, #06b6d4);
            letter-spacing: 1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 180px;
            margin: 0 auto;
        }
        .center-tgt-dist {
            font-size: 22px;
            font-weight: bold;
            color: var(--hud-primary-bright, #22d3ee);
            text-shadow: 0 0 8px rgba(6,182,212,0.4);
        }
        /* 무기 에너지 게이지 (인라인 스타일 대체) */
        #weapon-energy-gauge {
            display: none; position: fixed; left: 50%; top: calc(50% + 30px);
            transform: translateX(-50%); width: 120px; z-index: var(--z-hud, 100); pointer-events: none;
        }
        #weapon-energy-gauge .weapon-gauge-bar {
            background: var(--hud-bg-panel); border: 1px solid var(--hud-border-active);
            border-radius: 2px; height: 6px; overflow: hidden;
        }
        #weapon-energy-fill {
            height: 100%; width: 100%;
            background: linear-gradient(90deg, var(--hud-primary-dim), var(--hud-primary-bright));
            transition: width 0.1s;
        }
        #weapon-energy-text {
            text-align: center; font-size: 9px; color: var(--hud-primary);
            font-family: 'Share Tech Mono', monospace; margin-top: 1px; opacity: 0.8;
        }
        #pilot-btn-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
        
        /* ===== 통일 콘솔 버튼 (HUD 디자인 시스템) ===== */
        .pilot-console-btn {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.10) 0%, rgba(6, 182, 212, 0.03) 100%);
            border: 1px solid rgba(6, 182, 212, 0.35);
            color: var(--hud-primary);
            padding: 10px 14px;
            border-radius: 0;
            clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
            font-size: 10px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Share Tech Mono', 'Orbitron', monospace;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            min-height: 44px;
            touch-action: manipulation;
            text-shadow: 0 0 6px rgba(6, 182, 212, 0.4);
            box-shadow: 0 0 4px rgba(6, 182, 212, 0.15), inset 0 0 8px rgba(6, 182, 212, 0.04);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .pilot-console-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
            transition: left 0.5s ease;
        }
        .pilot-console-btn:hover::before {
            left: 100%;
        }
        .pilot-console-btn:hover {
            border-color: var(--hud-primary-bright);
            color: var(--hud-primary-bright);
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(6, 182, 212, 0.08) 100%);
            box-shadow: 0 0 8px rgba(6, 182, 212, 0.5), 0 0 20px rgba(6, 182, 212, 0.2), inset 0 0 15px rgba(6, 182, 212, 0.08);
            text-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
        }
        .pilot-console-btn:active {
            background: rgba(6, 182, 212, 0.25);
            transform: scale(0.98);
        }
        /* ★ 엔진 모드 버튼 */
        .pilot-console-btn.engine-mode {
            border-color: var(--hud-primary);
            color: var(--hud-primary);
        }
        .pilot-console-btn.engine-mode.combat {
            border-color: #ff4444;
            color: #ff6644;
            background: linear-gradient(135deg, rgba(255, 0, 0, 0.15) 0%, rgba(255, 0, 0, 0.05) 100%);
            text-shadow: 0 0 6px rgba(255, 68, 68, 0.5);
            animation: combat-pulse 1.2s ease-in-out infinite;
        }
        .pilot-console-btn.engine-mode.warp {
            border-color: #9b59b6;
            color: #bb8fce;
            background: linear-gradient(135deg, rgba(155, 89, 182, 0.15) 0%, rgba(155, 89, 182, 0.05) 100%);
            text-shadow: 0 0 6px rgba(155, 89, 182, 0.5);
            animation: warp-pulse 1.2s ease-in-out infinite;
        }
        @keyframes combat-pulse {
            0%, 100% { box-shadow: 0 0 4px rgba(255, 68, 68, 0.2); }
            50% { box-shadow: 0 0 12px rgba(255, 68, 68, 0.5); }
        }
        @keyframes warp-pulse {
            0%, 100% { box-shadow: 0 0 4px rgba(155, 89, 182, 0.2); }
            50% { box-shadow: 0 0 12px rgba(155, 89, 182, 0.5); }
        }
        /* ★ 엔진 모드 뱃지 */
        .mode-badge {
            font-size: 10px;
            letter-spacing: 2px;
            padding: 2px 7px;
            border-radius: 2px;
            display: block;
            margin-bottom: 3px;
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
        }
        .mode-badge.fullthrust {
            color: var(--hud-primary-dim);
            border: 1px solid var(--hud-border-subtle);
        }
        .mode-badge.maneuver {
            color: #ff4444;
            border: 1px solid rgba(255, 68, 68, 0.4);
            background: rgba(255, 0, 0, 0.08);
            animation: combat-pulse 1.2s ease-in-out infinite;
        }
        .mode-badge.warp {
            color: #9b59b6;
            border: 1px solid rgba(155, 89, 182, 0.4);
            background: rgba(155, 89, 182, 0.08);
            animation: warp-pulse 1.2s ease-in-out infinite;
        }

        #btn-exit-station {
            display: none;
            border-color: var(--hud-danger);
            color: var(--hud-danger-bright);
            background: var(--hud-danger-ghost);
            text-shadow: 0 0 8px rgba(239,68,68,0.4);
            min-height: 44px;
            font-size: 12px;
        }
        #btn-exit-station.show {
            display: inline-block !important;
        }
        #btn-exit-station:hover {
            background: rgba(239, 68, 68, 0.25);
            box-shadow: var(--hud-danger-glow);
        }
        /* 오토파일럿 - 기본은 primary, engaged일때만 success */
        .pilot-console-btn.autopilot {
            border-color: var(--hud-border-subtle);
            color: var(--hud-primary-dim);
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(6, 182, 212, 0.02) 100%);
        }
        .pilot-console-btn.autopilot.engaged {
            border-color: var(--hud-success);
            color: var(--hud-success-bright);
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.2);
            text-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
            animation: hud-success-pulse 2s infinite;
        }
        @keyframes hud-success-pulse {
            0%, 100% { box-shadow: var(--hud-success-glow); }
            50% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.6), 0 0 30px rgba(16, 185, 129, 0.3); }
        }
        /* 선내 - 기본 primary 스타일 (별도 색상 없음) */
        .pilot-console-btn.interior {
            border-color: var(--hud-border-subtle);
            color: var(--hud-primary-dim);
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(6, 182, 212, 0.02) 100%);
        }
        .pilot-console-btn.interior:hover {
            border-color: var(--hud-primary);
            color: var(--hud-primary);
        }
        .pilot-console-btn.interior.disabled {
            border-color: var(--hud-border-inactive);
            color: var(--hud-text-muted);
            opacity: 0.4;
            cursor: not-allowed;
        }
        /* 위험/탈출 버튼 */
        .pilot-console-btn.danger {
            border-color: var(--hud-danger);
            color: var(--hud-danger);
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.04) 100%);
            text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
            box-shadow: 0 0 4px rgba(239, 68, 68, 0.2);
        }
        .pilot-console-btn.emergency {
            border-color: var(--hud-danger);
            color: var(--hud-text-bright);
            background: var(--hud-danger-ghost);
            animation: hud-danger-pulse 1s infinite;
            display: none;
            box-shadow: var(--hud-danger-glow);
        }
        .pilot-console-btn.emergency.active { display: block; }
        @keyframes hud-danger-pulse {
            0%, 100% { background: rgba(239,68,68,0.15); }
            50% { background: rgba(239,68,68,0.35); }
        }
        /* 궤도진입 - 기본 primary, hover시 success 힌트 */
        .pilot-console-btn.orbit-entry {
            border-color: var(--hud-border-subtle);
            color: var(--hud-primary-dim);
            background: var(--hud-bg-panel);
        }
        .pilot-console-btn.orbit-entry:hover {
            border-color: var(--hud-success);
            color: var(--hud-success);
            background: var(--hud-success-ghost);
        }
        
        /* 긴급 역추진 버튼 */
        .pilot-ctrl-btn.emergency-brake {
            background: linear-gradient(145deg, rgba(239,68,68,0.4), rgba(239,68,68,0.2));
            border: 2px solid var(--hud-danger);
            color: var(--hud-text-bright);
            font-size: 10px;
            line-height: 1.1;
            width: 50px;
            height: 50px;
            margin-left: 10px;
            display: none;
            clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
            border-radius: 0;
            box-shadow: var(--hud-danger-glow);
        }
        .pilot-ctrl-btn.emergency-brake:active {
            background: rgba(239,68,68,0.6);
            transform: scale(0.95);
        }
        
        /* 데스크톱 전용 버튼 */
        .desktop-only { display: flex; }
        
        /* 전체화면 버튼 */
        #btn-fullscreen { background: var(--hud-accent-ghost); border: 1px solid rgba(155, 89, 182, 0.5); color: var(--hud-accent); }
        #btn-fullscreen:hover { background: #9b59b6; color: var(--hud-text-bright); }
        #btn-fullscreen.active { background: #9b59b6; color: var(--hud-text-bright); }
        
        /* 언어 선택 */
        #lang-select {
            background: rgba(52, 73, 94, 0.8);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            border-radius: 4px;
            font-size: 9px;
            padding: 4px 6px;
            outline: none;
        }
        #lang-select option {
            background: #2c3e50;
            color: white;
        }
        
        /* 유저 영역 */
        #user-area {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            margin-right: 60px;  /* 광고버튼 공간 확보 */
            pointer-events: auto;  /* 클릭 가능하게! */
        }
        #user-coins {
            background: linear-gradient(135deg, #f39c12, #e67e22);
            padding: 3px 8px;
            border-radius: 12px;
            font-weight: bold;
            font-size: 10px;
            color: var(--hud-text-bright);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }
        #user-info {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        #user-name {
            color: #3498db;
            font-weight: bold;
            font-size: 10px;
        }
        #btn-login {
            background: linear-gradient(135deg, #3498db, #2980b9);
            border: none;
        }
        #btn-logout {
            background: rgba(231, 76, 60, 0.3);
            border: 1px solid #e74c3c;
            color: var(--hud-danger);
            font-size: 10px;
            padding: 4px 8px;
        }
        
        /* 로그인 모달 */
        #login-modal {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.8);
            z-index: var(--z-critical);
            justify-content: center;
            align-items: center;
            overflow-y: auto;
            padding: 20px 0;
        }
        #login-modal.open { display: flex; }
        #login-content {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            border: 2px solid #3498db;
            border-radius: 15px;
            padding: 30px;
            width: 320px;
            max-width: 90vw;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            margin: auto;
        }
        #login-content h2 {
            color: var(--hud-text-bright);
            text-align: center;
            margin-bottom: 20px;
        }
        .login-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .login-tab {
            flex: 1;
            padding: 10px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            color: var(--hud-text-muted);
            cursor: pointer;
            transition: all 0.3s;
        }
        .login-tab.active {
            background: #3498db;
            border-color: #3498db;
            color: var(--hud-text-bright);
        }
        #login-content input {
            width: 100%;
            padding: 12px;
            margin-bottom: 12px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            color: var(--hud-text-bright);
            font-size: 14px;
            box-sizing: border-box;
        }
        #login-content input:focus {
            outline: none;
            border-color: #3498db;
        }
        #login-error {
            color: var(--hud-danger);
            font-size: 12px;
            margin-bottom: 10px;
            text-align: center;
            min-height: 18px;
        }
        .login-submit {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            border: none;
            border-radius: 8px;
            color: var(--hud-text-bright);
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .login-submit:hover { transform: scale(1.02); }
        #login-close {
            position: absolute;
            top: 10px;
            right: 15px;
            background: none;
            border: none;
            color: var(--hud-text-muted);
            font-size: 20px;
            cursor: pointer;
        }
        #login-close:hover { color: var(--hud-text-bright); }
        
        /* 아이디/비밀번호 찾기 */
        .login-find-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
            font-size: 12px;
        }
        .login-find-links a {
            color: var(--hud-text-muted);
            text-decoration: none;
            cursor: pointer;
            transition: color 0.3s;
        }
        .login-find-links a:hover {
            color: #3498db;
            text-decoration: underline;
        }
        #login-success {
            color: #2ecc71;
            font-size: 12px;
            margin-bottom: 10px;
            text-align: center;
            min-height: 18px;
        }
        .find-result {
            background: rgba(46, 204, 113, 0.2);
            border: 1px solid #2ecc71;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            text-align: center;
        }
        .find-result .label {
            color: var(--hud-text-muted);
            font-size: 11px;
            margin-bottom: 5px;
        }
        .find-result .value {
            color: #2ecc71;
            font-size: 16px;
            font-weight: bold;
        }
        .back-to-login {
            width: 100%;
            padding: 10px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 8px;
            color: var(--hud-text-dim);
            font-size: 13px;
            cursor: pointer;
            margin-top: 10px;
            transition: all 0.3s;
        }
        .back-to-login:hover {
            background: rgba(255,255,255,0.2);
            color: var(--hud-text-bright);
        }
        
        /* 함선 처분 모달 */
        #sell-ship-modal {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.9);
            z-index: var(--z-critical);
            justify-content: center;
            align-items: center;
            overflow-y: auto;
            padding: 20px 0;
        }
        #sell-ship-modal.open { display: flex; }
        #sell-ship-content {
            background: linear-gradient(135deg, #2c1810, #1a1a2e);
            border: 2px solid #e74c3c;
            border-radius: 15px;
            padding: 30px;
            width: 350px;
            max-width: 90vw;
            max-height: 85vh;
            overflow-y: auto;
            margin: auto;
            text-align: center;
        }
        #sell-ship-content h2 {
            color: var(--hud-danger);
            margin-bottom: 15px;
        }
        #sell-ship-content p {
            color: #ccc;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        #sell-ship-info {
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .sell-info-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            color: var(--hud-text-bright);
        }
        .sell-info-row:last-child { border-bottom: none; }
        #sell-price-value {
            color: #f39c12;
            font-weight: bold;
        }
        #sell-ship-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
        }
        .ship-modal-btn.sell {
            background: linear-gradient(180deg, #e74c3c, #c0392b);
            color: var(--hud-text-bright);
        }
        .ship-modal-btn.sell:hover {
            background: linear-gradient(180deg, #ff6b6b, #e74c3c);
            transform: scale(1.05);
        }
        @keyframes emergencyPulse { 0%, 100% { background: rgba(255,0,0,0.5); } 50% { background: rgba(255,0,0,0.8); } }
        
        .pilot-ctrl-btn { width: 45px; height: 45px; min-width: 44px; min-height: 44px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,40,60,0.9) 0%, rgba(6,182,212,0.08) 100%); border: 2px solid var(--hud-primary); color: var(--hud-primary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-shadow: 0 0 6px rgba(6,182,212,0.5); box-shadow: 0 0 6px rgba(6,182,212,0.2), inset 0 0 8px rgba(6,182,212,0.05); touch-action: manipulation; }
        .pilot-ctrl-btn:active { background: rgba(0,255,255,0.3); box-shadow: 0 0 12px rgba(6,182,212,0.5), inset 0 0 15px rgba(6,182,212,0.15); }
        .pilot-ctrl-btn.brake { border-color: #f00; color: #f00; font-size: 8px; }
        
        #virtual-joystick { position: absolute; display: none; pointer-events: none; z-index: var(--z-panels); }
        #joystick-base { width: 100px; height: 100px; background: rgba(0,255,255,0.08); border: 2px solid rgba(0,255,255,0.4); border-radius: 50%; }
        #joystick-knob { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: radial-gradient(circle, rgba(0,255,255,0.7), rgba(0,255,255,0.2)); border-radius: 50%; transform: translate(-50%,-50%); }
        
        /* 모바일용 동적 조이스틱 (터치 시 생성) */
        #pilot-joystick {
            position: absolute;
            width: 80px; height: 150px; 
            pointer-events: none; z-index: var(--z-panels);
            display: none;
        }
        #pilot-joystick.visible { display: block; }
        @media (min-width: 1024px) { #pilot-joystick { display: none !important; } }
        #pilot-joystick-base {
            width: 100%; height: 100%; background: rgba(0,255,255,0.1);
            border: 3px solid rgba(0,255,255,0.5); border-radius: 40px;
            position: relative;
            display: flex; flex-direction: column; justify-content: space-between;
            align-items: center; padding: 8px 0;
        }
        #pilot-joystick-base::before {
            content: '▲ Accel';
            font-size: 9px; color: var(--hud-success); font-family: 'Orbitron', sans-serif;
        }
        #pilot-joystick-base::after {
            content: '▼ Reverse';
            font-size: 9px; color: #f60; font-family: 'Orbitron', sans-serif;
        }
        #pilot-joystick-knob {
            position: absolute; top: 50%; left: 50%; width: 45px; height: 45px;
            background: radial-gradient(circle, rgba(0,255,255,0.8), rgba(0,255,255,0.3));
            border-radius: 50%; transform: translate(-50%,-50%);
            box-shadow: 0 0 15px rgba(0,255,255,0.5);
        }
        #pilot-joystick-label {
            position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
            font-size: 10px; color: var(--hud-primary); font-family: 'Orbitron', sans-serif;
            text-shadow: 0 0 5px var(--sf-cyan-glow);
        }
        
        /* 터치 영역 (화면 하단 왼쪽) */
        #touch-area-left {
            position: absolute;
            left: 0; bottom: 0;
            width: 50%; height: 45%;
            pointer-events: auto;
            z-index: var(--z-panels);
            display: none;
        }
        #cockpit-hud.active #touch-area-left { display: block; }
        @media (min-width: 1024px) { #touch-area-left { display: none !important; } }
        
        /* 모바일에서 AI 패널이 터치 영역 위에 오도록 */
        #ai-copilot-panel { z-index: var(--z-panels); }

        /* 선내 모드 */
        #interior-hud { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-panels); }
        #interior-hud.active { display: block; }
        #interior-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,40,60,0.9); border: 1px solid var(--hud-primary); padding: 6px 20px; border-radius: 20px; display: flex; gap: 15px; align-items: center; }
        #interior-location { font-size: 12px; color: var(--hud-primary); font-family: 'Orbitron', sans-serif; }
        #interior-eta { font-size: 11px; color: #00ff88; font-family: 'Orbitron', sans-serif; }
        #interior-bottom { position: absolute; bottom: 15px; bottom: calc(15px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; pointer-events: auto; }
        #move-joystick { position: absolute; bottom: 70px; bottom: calc(70px + env(safe-area-inset-bottom)); left: 15px; left: calc(15px + env(safe-area-inset-left)); width: 110px; height: 110px; pointer-events: auto; z-index: var(--z-panels); display: none; }
        #move-joystick.active { display: block; }
        #move-joystick-base { width: 100%; height: 100%; background: rgba(255,255,255,0.1); border: 3px solid rgba(255,255,255,0.4); border-radius: 50%; }
        #move-joystick-knob { position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(255,255,255,0.3)); border-radius: 50%; transform: translate(-50%,-50%); }
        #door-prompt { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,60,100,0.95); border: 2px solid var(--hud-primary); padding: 20px 35px; border-radius: 15px; text-align: center; pointer-events: auto; z-index: var(--z-panels); }
        #door-prompt.active { display: block; }
        #door-prompt p { color: var(--hud-text-dim); font-size: 11px; margin-bottom: 12px; }
        #door-prompt .door-name { color: var(--hud-primary); font-size: 16px; margin-bottom: 8px; font-family: 'Orbitron', sans-serif; }
        #btn-open-door { background: linear-gradient(180deg, #00ffff, #0088aa); border: none; color: #000; padding: 12px 35px; border-radius: 25px; font-size: 14px; font-weight: bold; cursor: pointer; }
        #interior-crosshair { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: rgba(255,255,255,0.6); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
        #object-name { display: none; position: absolute; top: 55%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); border: 1px solid var(--hud-primary); padding: 6px 15px; border-radius: 8px; color: var(--hud-primary); font-size: 12px; font-family: 'Orbitron', sans-serif; pointer-events: none; z-index: var(--z-panels); }
        #object-name.active { display: block; }
        #interaction-hint { display: none; position: absolute; top: 62%; left: 50%; transform: translateX(-50%); color: var(--hud-text-dim); font-size: 10px; pointer-events: none; z-index: var(--z-panels); }
        #interaction-hint.active { display: block; }

        /* 전망대 모드 */
        #observatory-hud { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-panels); }
        #observatory-hud.active { display: block; }
        #obs-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,40,60,0.8); border: 1px solid var(--hud-primary); padding: 6px 20px; border-radius: 20px; display: flex; gap: 15px; align-items: center; }
        #obs-title { font-size: 12px; color: var(--hud-primary); font-family: 'Orbitron', sans-serif; }
        #obs-eta { font-size: 11px; color: #00ff88; font-family: 'Orbitron', sans-serif; }
        #obs-bottom { position: absolute; bottom: 15px; bottom: calc(15px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; pointer-events: auto; }

        /* 궤도 진입 프롬프트 */
        #orbit-prompt { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(8, 12, 24, 0.95); border: 1px solid rgba(0,255,136,0.4); padding: 25px 40px; border-radius: 10px; text-align: center; pointer-events: auto; z-index: var(--z-panels); box-shadow: 0 0 20px rgba(0,255,136,0.2), inset 0 0 10px rgba(0,255,136,0.03); backdrop-filter: blur(15px); }
        #orbit-prompt.active { display: block; animation: orbitPulse 1.5s infinite; }
        @keyframes orbitPulse { 0%, 100% { box-shadow: 0 0 40px rgba(0,255,136,0.4); } 50% { box-shadow: 0 0 60px rgba(0,255,136,0.6); } }
        .orbit-prompt-title { font-size: 18px; color: #00ff88; margin-bottom: 8px; font-family: 'Orbitron', sans-serif; }
        .orbit-prompt-target { font-size: 22px; color: var(--hud-text-bright); margin-bottom: 15px; font-family: 'Orbitron', sans-serif; }
        #orbit-prompt p { color: var(--hud-text-dim); font-size: 12px; margin-bottom: 20px; line-height: 1.6; }
        .orbit-prompt-buttons { display: flex; gap: 15px; justify-content: center; }
        .orbit-btn { padding: 12px 25px; border-radius: 25px; border: none; font-size: 13px; font-weight: bold; cursor: pointer; font-family: 'Orbitron', sans-serif; }
        .orbit-btn.confirm { background: linear-gradient(180deg, #00ff88, #00aa55); color: #000; }
        .orbit-btn.cancel { background: rgba(100,100,100,0.5); border: 1px solid #666; color: var(--hud-text-dim); }
        .orbit-btn.confirm:hover { background: #00ffaa; }
        .orbit-btn.cancel:hover { background: rgba(150,150,150,0.5); }

        /* 모바일 반응형 */
        @media (max-width: 600px) and (orientation: portrait) {
            #pilot-left, #pilot-right { display: none; }
            /* 2D cockpit 제거됨 */
            #pilot-top-bar { gap: 6px; flex-wrap: wrap; max-width: 95%; }
            .pilot-info-panel { padding: 3px 8px; }
            #pilot-target-select { top: 50px; }
            #pilot-eta-box { top: 75px; padding: 5px 12px; }
            #pilot-warning-panel { top: 105px; }
            .pilot-console-btn { padding: 7px 10px; font-size: 8px; }
            .pilot-ctrl-btn { width: 44px; height: 44px; font-size: 14px; }
            .vg-bar { height: 60px; width: 20px; }
            .center-tgt-dist { font-size: 20px; }
        }
        @media (max-height: 500px) and (orientation: landscape) {
            /* 2D cockpit 제거됨 */
            #pilot-left, #pilot-right { transform: translateY(-50%) scale(0.7); }
            #pilot-top-bar { top: 3px; gap: 5px; }
            .pilot-info-panel { padding: 2px 6px; }
            #pilot-target-select { top: 30px; }
            #pilot-eta-box { top: 60px; }
            #pilot-warning-panel { top: 90px; }
            .vg-bar { height: 50px; width: 18px; }
            .center-tgt-dist { font-size: 18px; }
            .pilot-console-btn { padding: 5px 8px; font-size: 9px; }
            .pilot-ctrl-btn { width: 44px; height: 44px; font-size: 12px; }
            /* 소행성/해적 UI 축소 */
            #pirate-warning-banner { top: 40px; padding: 6px 12px; font-size: 10px; }
            .pirate-btn { padding: 5px 10px; font-size: 9px; min-height: 44px; touch-action: manipulation; }
            #loot-popup { padding: 12px 18px; font-size: 11px; }
            #loot-icon { font-size: 24px; }
        }

        /* ========== 모바일 반응형 최적화 ========== */
        
        /* 모바일용 시간 조절 버튼 */
        #mobile-time-controls {
            display: none;  /* 기본적으로 숨김 */
            align-items: center;
            gap: 8px;
            background: rgba(0,0,0,0.3);
            padding: 5px 10px;
            border-radius: 20px;
        }
        .time-btn {
            background: #3498db;
            border: none;
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: manipulation;
        }
        .time-btn:active {
            background: #2980b9;
            transform: scale(0.95);
        }
        #time-val-mobile {
            color: var(--hud-danger);
            font-weight: bold;
            font-size: 12px;
            min-width: 40px;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            /* ===== 모바일 UI 변수 재정의 ===== */
            :root {
                --top-bar-height: 45px;
                --nav-width: 140px;
                --spawn-dock-width: 50px;
                --chat-toggle-size: 45px;
                --ui-gap: 8px;
                --ui-padding: 10px;
            }
            
            /* AI 부조종사 패널 모바일 - 글자 크기 1.5배 */
            #ai-copilot-panel {
                width: 200px;
                max-width: 50vw;
                top: 5px;
                left: 5px;
                padding: 8px;
            }
            #ai-avatar { width: 26px; height: 26px; font-size: 13px; }
            #ai-name { font-size: 12px; }
            #ai-status { font-size: 9px; }
            #ai-message-box { min-height: 50px; max-height: 100px; font-size: 14px; line-height: 1.5; padding: 6px; }
            #ai-message-text { font-size: 14px; }
            #ai-input-area { margin-top: 6px; }
            #ai-input { padding: 8px 10px; font-size: 12px; }
            #ai-input::placeholder { font-size: 11px; }
            #ai-send-btn { width: 30px; height: 30px; font-size: 12px; }
            #ai-expand-btn { width: 24px; height: 24px; font-size: 12px; line-height: 22px; }
            #ai-comm-modal { min-width: 200px; padding: 12px; }
            #ai-comm-portrait { font-size: 30px; }
            #ssil-event-modal { min-width: 200px; padding: 12px; }
            #ssil-event-portrait { font-size: 30px; }
            #ssil-event-title { font-size: 13px; }
            #ssil-event-hud { top: 60px; right: 8px; padding: 6px 10px; font-size: 10px; }
            
            /* 탑바 */
            #top-bar {
                padding: 8px 10px;
                flex-wrap: wrap;
                gap: 8px;
            }
            #top-bar h1 {
                font-size: 14px;
                width: auto;
                text-align: left;
                margin-bottom: 0;
            }
            .control-group {
                flex: 1;
                justify-content: center;
                flex-wrap: wrap;
                gap: 5px;
            }
            .mode-btn {
                padding: 6px 10px;
                font-size: 10px;
            }
            .slider-container {
                display: none;  /* 모바일에서 슬라이더 숨김 */
            }
            #time-bar {
                display: none !important;  /* 모바일에서 시간바 숨김 */
            }
            #time-val {
                display: none;  /* 모바일에서 데스크톱 시간 표시 숨김 */
            }
            #mobile-time-controls {
                display: flex;  /* 모바일에서 시간 조절 버튼 표시 */
            }
            /* 유저 영역 모바일 */
            #user-area {
                position: relative;
                gap: 5px;
                pointer-events: auto;  /* 클릭 가능 유지 */
            }
            #user-coins {
                padding: 3px 8px;
                font-size: 11px;
            }
            #user-name {
                display: none;
            }
            
            /* 모바일에서 데스크톱 전용 버튼 숨기기 */
            .desktop-only {
                display: none !important;
            }
            #pilot-right-console {
                display: none;
            }
            
            /* 긴급 역추진 버튼 모바일 표시 */
            .pilot-ctrl-btn.emergency-brake {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            /* 조종 모드에서 전체보기 버튼 숨기기 */
            #cockpit-hud.active ~ #reset-cam,
            body.pilot-mode #reset-cam {
                display: none !important;
            }
            
            /* ===== UI 영역 체계적 배치 (겹침 방지) ===== */
            
            /* 상단 영역: top-bar */
            #top-bar {
                height: 50px;
                padding: 5px 10px;
            }
            #top-bar h1 {
                font-size: 12px;
            }
            
            /* 좌측 영역: nav-container */
            #nav-container {
                top: 55px;
                left: 0;
                bottom: 70px;
            }
            #nav-panel {
                width: 130px;
                max-height: calc(100dvh - 140px);
                font-size: 10px;
            }
            .nav-item {
                padding: 6px 8px;
                font-size: 10px;
            }
            .nav-item.satellite {
                padding-left: 15px;
                font-size: 9px;
            }
            #nav-toggle {
                width: 28px;
                font-size: 12px;
                padding: 15px 5px;
            }
            
            /* 우측 상단 영역: spawn-dock */
            #spawn-dock {
                top: 55px;
                right: 32px;
                width: 45px;
                max-height: calc(100dvh - 130px);
            }
            .spawn-btn {
                width: 36px;
                height: 36px;
            }
            
            /* 좌측 하단 영역: chat-toggle, chat-panel */
            #chat-toggle {
                bottom: 15px;
                left: 15px;
                right: auto;
                width: 44px;
                height: 44px;
                font-size: 18px;
            }
            #chat-panel {
                bottom: 70px;
                left: 15px;
                right: auto;
                width: calc(100vw - 80px);
                max-width: 280px;
                height: auto;
                max-height: calc(100dvh - 150px);
            }
            
            /* 하단 중앙 영역: 버튼들 */
            #board-ship-btn {
                bottom: 70px;
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                padding: 10px 20px;
                font-size: 12px;
            }
            #reset-cam {
                bottom: 15px;
                left: 50%;
                right: auto;
                transform: translateX(-50%);
            }
            
            /* 메시지, 거리 패널 */
            #msg-box {
                bottom: 130px;
                left: 50%;
                transform: translateX(-50%);
                max-width: 70%;
                font-size: 11px;
            }
            #focus-distance-panel {
                bottom: 15px;
                right: 70px;
                left: auto;
            }
            
            /* ===== 추가 모바일 설정 ===== */
            /* 메시지 박스 */
            #msg-box {
                bottom: 60px;
                font-size: 13px;
                max-width: 90%;
                text-align: center;
            }
            
            /* 리셋 카메라 버튼 */
            #reset-cam {
                bottom: 15px;
                padding: 8px 18px;
                font-size: 11px;
            }
            
            /* 포커스 거리 패널 */
            #focus-distance-panel {
                bottom: 70px;
                right: 10px;
                padding: 8px 12px;
                font-size: 11px;
            }
            #focus-distance-value {
                font-size: 14px;
            }
            
            /* 카탈로그 모달 */
            #catalog-content {
                width: 95%;
                max-height: 60vh;
                padding: 15px;
                padding-bottom: 30px;
                grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
                gap: 10px;
            }
            .catalog-card {
                padding: 8px;
            }
            .catalog-thumb {
                width: 55px;
                height: 55px;
            }
            .catalog-name {
                font-size: 9px;
            }
            
            /* 우주선 선택 모달 */
            #ship-select-modal {
                padding: 15px;
            }
            #ship-select-modal h2 {
                font-size: 16px;
            }
            #ship-list {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                max-height: 35vh;
            }
            .ship-card {
                padding: 8px;
                min-height: 100px;
            }
            .ship-card-icon {
                width: 100%;
                height: 55px;
                font-size: 24px;
            }
            .ship-card-name {
                font-size: 11px;
            }
            .ship-card-class {
                font-size: 9px;
            }
            #ship-detail {
                flex-direction: column;
                gap: 10px;
            }
            #ship-preview {
                width: 100%;
                height: 120px;
            }
            #ship-stats {
                font-size: 11px;
            }
            #btn-select-ship, #btn-cancel-ship {
                padding: 10px 25px;
                font-size: 12px;
            }
        }

        /* 더 작은 화면 (스마트폰) */
        @media (max-width: 480px) {
            /* AI 패널 스마트폰 - 글자 크기 1.5배 */
            #ai-copilot-panel {
                width: 180px;
                max-width: 55vw;
                top: 3px;
                left: 3px;
                padding: 6px;
            }
            #ai-copilot-header { margin-bottom: 5px; padding-bottom: 4px; gap: 6px; }
            #ai-avatar { width: 22px; height: 22px; font-size: 12px; }
            #ai-name { font-size: 11px; letter-spacing: 0; }
            #ai-status { font-size: 8px; }
            #ai-message-box { min-height: 45px; max-height: 90px; font-size: 13px; line-height: 1.4; padding: 5px; }
            #ai-message-text { font-size: 13px; }
            #ai-input-area { margin-top: 5px; }
            #ai-input { padding: 6px 8px; font-size: 11px; }
            #ai-input::placeholder { font-size: 10px; }
            #ai-send-btn { width: 36px; height: 36px; font-size: 11px; touch-action: manipulation; }
            #ai-expand-btn { width: 36px; height: 36px; font-size: 11px; line-height: 34px; touch-action: manipulation; }
            #ai-comm-modal { min-width: 160px; padding: 10px; }
            #ai-comm-portrait { font-size: 25px; }
            #ai-comm-name { font-size: 10px; }
            #ssil-event-modal { min-width: 160px; padding: 10px; }
            #ssil-event-portrait { font-size: 25px; }
            #ssil-event-title { font-size: 12px; }
            #ssil-event-desc { font-size: 10px; }
            .ssil-event-btn { padding: 8px 14px; font-size: 10px; }
            #ssil-event-hud { top: 50px; right: 5px; padding: 5px 8px; font-size: 9px; }
            #ai-comm-message { font-size: 8px; }
            .ai-comm-choice { padding: 6px 8px; font-size: 8px; }
            
            #top-bar h1 {
                font-size: 12px;
            }
            .mode-btn {
                padding: 5px 8px;
                font-size: 9px;
            }
            
            #nav-panel {
                width: 120px;
                max-height: 35vh;
            }
            .nav-item {
                padding: 5px 6px;
                font-size: 9px;
            }
            
            /* 카탈로그 스마트폰 */
            #catalog-content {
                width: 95%;
                max-height: 55vh;
                padding: 10px;
                padding-bottom: 25px;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }
            .catalog-card {
                padding: 6px;
            }
            .catalog-thumb {
                width: 45px;
                height: 45px;
                border-width: 2px;
            }
            .catalog-name {
                font-size: 8px;
            }
            
            #chat-panel {
                width: 90vw;
                height: 50vh;
                right: 5vw;
            }
            #chat-toggle {
                width: 44px;
                height: 44px;
                font-size: 18px;
                bottom: 15px;
                right: 15px;
            }
            
            #ship-list {
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
            }
            .ship-card {
                padding: 6px;
                min-height: 90px;
            }
            .ship-card-icon {
                width: 100%;
                height: 50px;
                font-size: 20px;
            }
            
            #focus-distance-panel {
                bottom: 60px;
                right: 5px;
                padding: 6px 10px;
            }
            
            /* 조종 모드 HUD */
            #pilot-top-bar {
                gap: 4px;
            }
            .pilot-info-panel {
                padding: 3px 6px;
                font-size: 9px;
            }
            .pilot-info-panel .info-value {
                font-size: 11px;
            }
            #ship-target-toggle {
                padding: 4px 8px;
                font-size: 9px;
            }

            /* 조이스틱 */
            #pilot-joystick {
                width: 100px;
                height: 100px;
                bottom: 15px;
                left: 15px;
            }
            #joystick-knob {
                width: 40px;
                height: 40px;
            }
            
            /* 조종 버튼 */
            .pilot-ctrl-btn {
                width: 44px;
                height: 44px;
                font-size: 12px;
            }
            #pilot-stop-btn {
                width: 50px;
                height: 50px;
                font-size: 10px;
            }
            #pilot-throttle-up, #pilot-throttle-down {
                width: 45px;
                height: 45px;
            }
            
            /* 게이지 */
            .vg-bar {
                height: 50px;
                width: 18px;
            }
            .vg-label {
                font-size: 8px;
            }
            .vg-value {
                font-size: 9px;
            }
            
            /* 콘솔 버튼 */
            #pilot-console-btns {
                gap: 5px;
            }
            .pilot-console-btn {
                padding: 6px 10px;
                font-size: 8px;
            }
            
            /* 속도 표시 */
            #pilot-main-speed {
                bottom: 55px;
            }
            .center-tgt-dist {
                font-size: 20px;
            }
        }

        /* 가로 모드 모바일 */
        @media (max-height: 450px) and (orientation: landscape) {
            #top-bar {
                padding: 5px 10px;
            }
            #top-bar h1 {
                font-size: 12px;
                width: auto;
                margin-bottom: 0;
            }
            .mode-btn {
                padding: 4px 8px;
                font-size: 9px;
            }
            
            #nav-panel {
                max-height: 80vh;
                width: 130px;
            }
            
            #ship-select-modal {
                padding: 10px;
                max-height: 95vh;
            }
            #ship-list {
                grid-template-columns: repeat(5, 1fr);
                max-height: 25vh;
            }
            #ship-detail {
                flex-direction: row;
            }
            #ship-preview {
                width: 150px;
                height: 100px;
            }
            
            #pilot-joystick {
                width: 80px;
                height: 80px;
                bottom: 10px;
                left: 10px;
            }
            #joystick-knob {
                width: 35px;
                height: 35px;
            }
            
            .pilot-ctrl-btn {
                width: 44px;
                height: 44px;
                font-size: 12px;
            }
            #pilot-stop-btn {
                width: 42px;
                height: 42px;
                font-size: 9px;
            }
            
            #focus-distance-panel {
                bottom: 50px;
                padding: 5px 8px;
            }
        }

        /* 터치 디바이스 최적화 */
        @media (hover: none) and (pointer: coarse) {
            .mode-btn, .pilot-console-btn, .pilot-ctrl-btn, #board-ship-btn, #reset-cam {
                min-height: 44px;  /* 터치 타겟 최소 크기 */
            }
            .ship-card {
                min-height: 80px;
            }
            .nav-item {
                min-height: 44px;
                display: flex;
                align-items: center;
            }
        }
        
        /* 세로 모드 경고 오버레이 */
        #landscape-warning {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: var(--z-topmost);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--hud-text-bright);
            font-family: 'Orbitron', sans-serif;
        }
        #landscape-warning .rotate-icon {
            font-size: 80px;
            margin-bottom: 20px;
            animation: rotate-hint 2s ease-in-out infinite;
        }
        @keyframes rotate-hint {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(90deg); }
        }
        #landscape-warning .rotate-text {
            font-size: 24px;
            color: var(--hud-primary);
            margin-bottom: 10px;
        }
        #landscape-warning .rotate-sub {
            font-size: 14px;
            color: var(--hud-text-muted);
        }
        
        /* UI 겹침 방지 - 상단 바 */
        #top-bar {
            position: relative;
            z-index: var(--z-hud);
            flex-wrap: nowrap;
        }
        #top-bar h1 {
            flex-shrink: 0;
            white-space: nowrap;
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            letter-spacing: 2px;
            color: #00d4ff;
            text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
        }
        .control-group {
            flex-shrink: 1;
            min-width: 0;
        }
        #user-area {
            flex-shrink: 0;
            z-index: var(--z-hud);
            pointer-events: auto;  /* 클릭 가능 */
        }
        
        /* 모바일에서 UI 겹침 방지 */
        @media (max-width: 768px) {
            #top-bar {
                flex-wrap: wrap;
                padding: 5px 8px;
                gap: 5px;
            }
            #top-bar h1 {
                order: 1;
                flex: 0 0 auto;
                font-size: 12px !important;
            }
            .control-group {
                order: 3;
                flex: 1 1 100%;
                justify-content: center;
            }
            #user-area {
                order: 2;
                position: static !important;
                margin-left: auto;
                pointer-events: auto;  /* 클릭 가능 */
            }
            #user-coins {
                padding: 3px 8px;
                font-size: 11px;
            }
            #btn-login, #btn-logout, #btn-register {
                padding: 4px 8px;
                font-size: 10px;
            }
        }
        
        @media (max-width: 480px) {
            #top-bar h1 {
                font-size: 10px !important;
            }
            #user-coins {
                padding: 2px 6px;
                font-size: 10px;
            }
            .mode-btn {
                padding: 4px 6px;
                font-size: 8px;
            }
            #btn-login, #btn-logout, #btn-register {
                padding: 3px 6px;
                font-size: 9px;
            }
        }
        
        /* 정거장 선택 모달 */
        #station-modal {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.8);
            z-index: var(--z-topmost);
            justify-content: center;
            align-items: center;
            overflow-y: auto;
            padding: 20px 0;
        }
        #station-modal.open { display: flex; }
        #station-modal-content {
            background: linear-gradient(135deg, rgba(0,30,60,0.98), rgba(0,50,80,0.95));
            border: 2px solid #4fc3f7;
            border-radius: 15px;
            padding: 20px;
            width: 90%;
            max-width: 500px;
            max-height: 85vh;
            overflow-y: auto;
            margin: auto;
            box-shadow: 0 0 30px rgba(79,195,247,0.3);
        }
        #station-modal h2 {
            color: #4fc3f7;
            margin: 0 0 15px 0;
            font-size: 18px;
            text-align: center;
            border-bottom: 1px solid rgba(79,195,247,0.3);
            padding-bottom: 10px;
        }
        .station-category {
            margin-bottom: 15px;
        }
        .station-category h3 {
            color: #ffd700;
            font-size: 12px;
            margin: 0 0 8px 0;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .station-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .station-item {
            background: rgba(0,60,100,0.5);
            border: 1px solid rgba(79,195,247,0.3);
            border-radius: 8px;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        .station-item:hover {
            background: rgba(0,100,150,0.5);
            border-color: #4fc3f7;
            transform: translateX(5px);
        }
        .station-info {
            flex: 1;
        }
        .station-name {
            color: var(--hud-text-bright);
            font-size: 13px;
            font-weight: bold;
        }
        .station-desc {
            color: var(--hud-text-muted);
            font-size: 10px;
            margin-top: 2px;
        }
        .station-item.fuel-depot .station-name {
            color: #ff6600;
        }
        .station-actions {
            display: flex;
            gap: 5px;
        }
        .station-btn {
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            font-size: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .station-btn.go {
            background: #4fc3f7;
            color: #000;
        }
        .station-btn.go:hover { background: #81d4fa; }
        .station-btn.dock {
            background: #4caf50;
            color: var(--hud-text-bright);
        }
        .station-btn.dock:hover { background: #66bb6a; }
        
        /* 잠긴 정거장 스타일 */
        .station-item.locked {
            opacity: 0.6;
            background: rgba(50, 50, 60, 0.5);
            border-color: rgba(150, 100, 50, 0.3);
        }
        .station-item.locked:hover {
            background: rgba(60, 50, 40, 0.5);
            border-color: rgba(200, 150, 50, 0.5);
            transform: none;
        }
        .station-item.locked .station-name {
            color: #a88;
        }
        .station-btn.go.disabled {
            background: rgba(100, 80, 50, 0.5);
            color: #a88;
            cursor: not-allowed;
        }
        .station-btn.go.disabled:hover {
            background: rgba(100, 80, 50, 0.5);
        }
        .station-btn.dock.disabled {
            background: rgba(100, 80, 50, 0.5);
            color: #a88;
            cursor: not-allowed;
        }
        .station-btn.dock.disabled:hover {
            background: rgba(100, 80, 50, 0.5);
        }
        
        #station-close {
            position: absolute;
            top: 10px;
            right: 15px;
            background: none;
            border: none;
            color: #ff6b6b;
            font-size: 24px;
            cursor: pointer;
        }
        #station-modal-content { position: relative; }
        
        /* 연료 충전 UI */
        #refuel-panel {
            display: none;
            position: fixed;
            bottom: 150px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,40,60,0.95);
            border: 2px solid #ff6600;
            border-radius: 10px;
            padding: 15px 25px;
            z-index: var(--z-system);
            text-align: center;
        }
        #refuel-panel.show { display: block; }
        #refuel-panel h3 {
            color: #ff6600;
            margin: 0 0 10px 0;
            font-size: 14px;
        }
        #refuel-bar {
            width: 200px;
            height: 20px;
            background: #222;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        #refuel-progress {
            height: 100%;
            background: linear-gradient(90deg, #ff6600, #ffaa00);
            width: 0%;
            transition: width 0.3s;
        }
        #refuel-text {
            color: var(--hud-text-bright);
            font-size: 12px;
        }
        
        /* ========== 드래그 가능 UI 시스템 ========== */
        .draggable-ui {
            cursor: grab;
            transition: transform 0.1s, box-shadow 0.2s;
        }
        .draggable-ui.drag-ready {
            animation: dragReady 0.3s ease;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.8) !important;
            border-color: var(--hud-primary) !important;
        }
        .draggable-ui.dragging {
            cursor: grabbing;
            opacity: 0.85;
            transform: scale(1.05);
            z-index: var(--z-system) !important;
            box-shadow: 0 0 30px rgba(0, 255, 255, 1) !important;
        }
        
        /* ========== SSIL 미션 시스템 ========== */
        #ssil-mission-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(8, 12, 24, 0.95);
            border: 1px solid rgba(6, 182, 212, 0.3);
            border-radius: 8px;
            padding: 10px;
            max-width: 240px;
            width: 85%;
            max-height: 80vh;
            overflow-y: auto;
            z-index: var(--z-topmost);
            display: none;
            font-family: 'Orbitron', sans-serif;
            color: var(--hud-text-bright);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.15), inset 0 0 10px rgba(6, 182, 212, 0.03);
            backdrop-filter: blur(15px);
            font-size: 11px;
        }
        #ssil-mission-panel.open { display: block; }
        #ssil-mission-panel h2 {
            text-align: center;
            color: var(--hud-primary);
            margin: 0 0 6px 0;
            font-size: 0.95em;
            text-shadow: 0 0 10px var(--sf-cyan-glow);
        }
        .ssil-logo {
            text-align: center;
            font-size: 1.2em;
            margin-bottom: 4px;
        }
        .ssil-subtitle {
            text-align: center;
            color: var(--hud-text-muted);
            font-size: 0.6em;
            margin-bottom: 8px;
        }
        .mission-table {
            width: 100%;
            border-collapse: collapse;
            margin: 6px 0;
        }
        .mission-table th {
            background: rgba(0, 255, 255, 0.2);
            color: var(--hud-primary);
            padding: 4px 3px;
            text-align: left;
            font-size: 0.6em;
            border-bottom: 1px solid var(--hud-primary);
        }
        .mission-table td {
            padding: 4px 3px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-size: 0.55em;
        }
        .mission-table tr.completed {
            background: rgba(0, 255, 136, 0.15);
        }
        .mission-table tr.completed td {
            color: #0f8;
            text-decoration: line-through;
        }
        .mission-status {
            width: 30px;
            text-align: center;
        }
        .mission-reward {
            color: #ffd700;
            text-align: right;
        }
        .mission-close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            background: none;
            border: none;
            color: #f66;
            font-size: 1.5em;
            cursor: pointer;
        }
        
        /* 일일 미션 이메일 아이콘 */
        #daily-mission-icon {
            position: fixed;
            top: 100px;
            right: 40px;
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #2c3e50, #34495e);
            border: 2px solid #f90;
            border-radius: 50%;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 1.3em;
            z-index: var(--z-modal);
            animation: emailPulse 2s infinite;
        }
        #daily-mission-icon.has-mission { display: flex; }
        #daily-mission-icon .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #f00;
            color: var(--hud-text-bright);
            font-size: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        @keyframes emailPulse {
            0%, 100% { box-shadow: 0 0 5px #f90; }
            50% { box-shadow: 0 0 20px #f90; }
        }
        
        /* 일일 미션 모달 */
        #daily-mission-modal {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.85);
            display: none;
            justify-content: center;
            align-items: center;
            overflow-y: auto;
            padding: 20px 0;
            z-index: var(--z-topmost);
        }
        #daily-mission-modal.open { display: flex; }
        .daily-mission-content {
            background: rgba(8, 12, 24, 0.95);
            border: 1px solid rgba(6, 182, 212, 0.3);
            border-radius: 8px;
            padding: 10px;
            max-width: 200px;
            width: 85%;
            backdrop-filter: blur(15px);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.15), inset 0 0 10px rgba(6, 182, 212, 0.03);
            max-height: 85vh;
            overflow-y: auto;
            margin: auto;
            color: var(--hud-text-bright);
            font-family: 'Orbitron', sans-serif;
            font-size: 11px;
        }
        .daily-mission-header {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 6px;
            padding-bottom: 5px;
            border-bottom: 1px solid rgba(255,153,0,0.3);
        }
        .daily-mission-header .icon { font-size: 1.1em; }
        .daily-mission-header h3 {
            margin: 0;
            color: #f90;
            font-size: 0.8em;
        }
        .daily-mission-header .date {
            margin-left: auto;
            font-size: 0.55em;
            color: var(--hud-text-muted);
        }
        .daily-mission-body {
            margin: 6px 0;
            line-height: 1.4;
            font-size: 0.7em;
        }
        .daily-mission-rewards {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 6px 0;
            padding: 5px;
            background: rgba(0,0,0,0.3);
            border-radius: 5px;
        }
        .daily-reward-item {
            text-align: center;
        }
        .daily-reward-item .value {
            font-size: 0.85em;
            color: #ffd700;
        }
        .daily-reward-item .label {
            font-size: 0.65em;
            color: var(--hud-text-muted);
        }
        .daily-mission-btns {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        .daily-mission-btns button {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-family: 'Orbitron', sans-serif;
            font-size: 0.8em;
        }
        .daily-btn-accept {
            background: linear-gradient(135deg, #27ae60, #2ecc71);
            color: var(--hud-text-bright);
        }
        .daily-btn-decline {
            background: rgba(255,255,255,0.1);
            color: var(--hud-text-muted);
            border: 1px solid #444 !important;
        }
        
        /* 미션 포인트 표시 */
        #mission-points-display {
            position: fixed;
            top: 145px;
            right: 10px;
            background: linear-gradient(135deg, rgba(128, 0, 255, 0.3), rgba(75, 0, 130, 0.3));
            border: 1px solid #a855f7;
            border-radius: 20px;
            padding: 5px 12px;
            color: #a855f7;
            font-size: 11px;
            font-family: 'Orbitron', sans-serif;
            display: none;
            z-index: var(--z-modal);
        }
        #mission-points-display.visible { display: block; }
        
        /* 미션 완료 알림 */
        .mission-complete-toast {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, rgba(0, 255, 136, 0.9), rgba(0, 200, 100, 0.9));
            border: 2px solid #0f8;
            border-radius: 15px;
            padding: 20px 40px;
            color: var(--hud-text-bright);
            font-family: 'Orbitron', sans-serif;
            text-align: center;
            z-index: var(--z-topmost);
            animation: missionToastIn 0.5s ease;
        }
        .mission-complete-toast h3 {
            margin: 0 0 10px 0;
            font-size: 1.2em;
        }
        .mission-complete-toast .reward {
            color: #ffd700;
            font-size: 1.5em;
        }
        @keyframes missionToastIn {
            from { opacity: 0; transform: translateX(-50%) translateY(-30px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        @keyframes dragReady {
            0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }
            50% { box-shadow: 0 0 25px rgba(0, 255, 255, 1); }
        }
        
        /* UI 설정 버튼 */
        #ui-settings-btn {
            position: fixed !important;
            top: 10px !important;
            right: 10px !important;
            width: 48px;
            height: 48px;
            background: rgba(0, 40, 80, 0.95);
            border: 2px solid var(--hud-primary);
            border-radius: 50%;
            color: var(--hud-primary);
            font-size: 1.5em;
            cursor: pointer;
            z-index: var(--z-warnings);  /* z-index 정리 */
            display: none;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
            pointer-events: auto !important;
        }
        #ui-settings-btn:hover {
            background: rgba(0, 80, 120, 0.95);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
            transform: scale(1.1);
        }
        /* 조종석 모드에서 독립 settings 버튼은 슬라이드 패널에서 처리 */

        /* ★★★ 조종석 모드 좌측 프로필 ★★★ */
        #pilot-profile {
            position: fixed;
            top: 10px;
            left: 10px;
            display: none;
            align-items: center;
            gap: 10px;
            padding: 8px 14px;
            background: linear-gradient(135deg, rgba(0, 50, 80, 0.9), rgba(0, 30, 50, 0.9));
            border: 2px solid var(--hud-primary);
            border-radius: 25px;
            z-index: var(--z-overlay);  /* z-index 정리 */
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
            pointer-events: auto;
            cursor: pointer;
        }
        body.pilot-mode #pilot-profile {
            display: none !important;
        }
        /* 가로 모드 모바일에서 프로필 축소 */
        @media (max-height: 500px) and (orientation: landscape) {
            #pilot-profile {
                padding: 5px 10px;
                gap: 6px;
            }
            .pilot-profile-avatar {
                width: 28px;
                height: 28px;
                font-size: 14px;
            }
            .pilot-profile-name {
                font-size: 11px;
            }
            .pilot-profile-stats {
                font-size: 9px;
            }
        }
        .pilot-profile-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1a5276, #2980b9);
            border: 2px solid var(--hud-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            overflow: hidden;
        }
        .pilot-profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .pilot-profile-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .pilot-profile-name {
            color: var(--hud-primary);
            font-size: 13px;
            font-weight: bold;
            text-shadow: 0 0 5px var(--sf-cyan-glow);
        }
        .pilot-profile-stats {
            display: flex;
            gap: 10px;
            color: #8cf;
            font-size: 11px;
        }

        /* ★★★ 조종석 모드 우측 버튼 컨테이너 (통일) ★★★ */
        #pilot-right-btns {
            position: fixed;
            top: 10px;
            top: calc(10px + env(safe-area-inset-top));
            right: 10px;
            right: calc(10px + env(safe-area-inset-right));
            display: none;
            flex-direction: column;
            gap: 8px;
            z-index: var(--z-warnings);  /* z-index 정리: HUD/전투버튼 위, 모달 아래 */
            pointer-events: auto;
        }
        body.pilot-mode #pilot-right-btns {
            display: flex !important;
        }
        /* 가로 모드 모바일에서 버튼 작게 */
        @media (max-height: 500px) and (orientation: landscape) {
            #pilot-right-btns {
                gap: 6px;
            }
            .pilot-unified-btn {
                width: 38px !important;
                height: 38px !important;
                font-size: 1.1em !important;
            }
        }

        /* ★★★ 통일된 조종석 버튼 스타일 ★★★ */
        .pilot-unified-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-border-active);
            color: var(--hud-primary);
            font-size: 1.3em;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--hud-primary-glow);
            transition: all 0.3s ease;
            pointer-events: auto;
        }
        .pilot-unified-btn:hover {
            background: var(--hud-primary-ghost);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
            transform: scale(1.1);
        }
        .pilot-unified-btn.active {
            background: var(--hud-success-ghost);
            border-color: var(--hud-success);
            color: var(--hud-success);
            box-shadow: var(--hud-success-glow);
        }

        /* ★ 개별 버튼이 컨테이너 안에 있을 때 위치 초기화 */
        #pilot-right-btns #ui-settings-btn,
        #pilot-right-btns #radio-toggle-btn,
        #pilot-right-btns #ad-menu-toggle,
        #pilot-right-btns #mission-float-btn {
            position: static !important;
            transform: none !important;
            animation: none !important;
        }

        /* ★★★ 모바일 발사/역추진 버튼 ★★★ */
        /* ===== 전투 버튼 (HUD 통일) ===== */
        #mobile-combat-btns {
            display: none;
            position: fixed;
            right: 40px;
            right: calc(40px + env(safe-area-inset-right));
            top: 50%;
            transform: translateY(-50%);
            flex-direction: column;
            gap: 12px;
            z-index: var(--z-combat, 400);
        }
        body.pilot-mode #mobile-combat-btns {
            display: flex !important;
        }
        @media (min-width: 1024px) {
            #mobile-combat-btns {
                /* PC에서도 발사 버튼 표시 (마우스 클릭 발사) */
                right: 24px;
                bottom: 24px;
                gap: 8px;
            }
            .mobile-combat-btn {
                width: 48px;
                height: 48px;
                opacity: 0.7;
            }
            .mobile-combat-btn:hover {
                opacity: 1;
                transform: scale(1.1);
            }
        }
        .mobile-combat-btn {
            width: 64px;
            height: 64px;
            border-radius: 0;
            clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
            font-size: 13px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            touch-action: none;
            user-select: none;
            font-family: 'Share Tech Mono', monospace;
            transition: all 0.15s ease;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .mobile-combat-btn::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, currentColor, transparent);
            opacity: 0.6;
        }
        .mobile-combat-btn::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, currentColor, transparent);
            opacity: 0.3;
        }
        .mobile-combat-btn svg,
        .combat-btn-label {
            pointer-events: none;
        }
        .combat-btn-label {
            font-size: 9px;
            letter-spacing: 2px;
            font-weight: 600;
            opacity: 0.9;
        }
        @media (min-height: 600px) {
            .mobile-combat-btn {
                width: 72px;
                height: 72px;
            }
            .combat-btn-label { font-size: 9px; }
        }
        /* FIRE - danger 색상 */
        .mobile-combat-btn.fire {
            background: linear-gradient(180deg, var(--hud-danger-ghost) 0%, rgba(239, 68, 68, 0.35) 100%);
            border: 1px solid var(--hud-danger);
            color: var(--hud-danger-bright);
            box-shadow: 0 0 15px var(--hud-danger-ghost), inset 0 0 20px var(--hud-danger-ghost);
        }
        .mobile-combat-btn.fire:active, .mobile-combat-btn.fire.firing {
            background: linear-gradient(180deg, rgba(239, 68, 68, 0.5) 0%, rgba(239, 68, 68, 0.7) 100%);
            border-color: var(--hud-danger-bright);
            box-shadow: var(--hud-danger-glow), 0 0 40px var(--hud-danger-ghost);
            transform: scale(0.93);
        }
        /* BRAKE - caution 색상 */
        .mobile-combat-btn.brake {
            background: linear-gradient(180deg, var(--hud-caution-ghost) 0%, rgba(234, 179, 8, 0.3) 100%);
            border: 1px solid var(--hud-caution);
            color: var(--hud-caution);
            box-shadow: 0 0 15px var(--hud-caution-ghost), inset 0 0 20px var(--hud-caution-ghost);
        }
        .mobile-combat-btn.brake:active, .mobile-combat-btn.brake.braking {
            background: linear-gradient(180deg, rgba(234, 179, 8, 0.45) 0%, rgba(234, 179, 8, 0.6) 100%);
            border-color: var(--hud-caution);
            box-shadow: var(--hud-caution-glow), 0 0 40px var(--hud-caution-ghost);
            transform: scale(0.93);
        }

        /* ★★★ 조종 모드에서 기존 개별 버튼 숨기기 (통일된 버튼으로 대체) ★★★ */
        body.pilot-mode #ad-rewards-panel,
        body.pilot-mode #mission-float-btn {
            display: none !important;
        }
        /* 조종 모드에서 라디오 패널의 토글 버튼 숨김 (통일 버튼 사용) */
        body.pilot-mode #cockpit-radio.collapsed {
            display: none !important;
        }
        body.pilot-mode #cockpit-radio:not(.collapsed) {
            display: block !important;
        }
        body.pilot-mode #cockpit-radio #radio-toggle-btn {
            display: none !important;
        }

        /* 조종 모드에서 통합 채팅 패널 표시 */
        body.pilot-mode #unified-chat-panel {
            display: block;
        }
        
        /* UI 설정 패널 */
        #ui-settings-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(5, 5, 8, 0.97);
            border: 1px solid rgba(6, 182, 212, 0.4);
            border-radius: 6px;
            padding: 10px;
            z-index: var(--z-topmost);
            width: 240px;
            max-width: 85vw;
            max-height: 85vh;
            overflow-y: auto;
            overflow-x: visible;
            display: none;
            color: white;
            font-family: 'Share Tech Mono', 'Orbitron', monospace;
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.2), 0 0 40px rgba(6, 182, 212, 0.08), inset 0 0 15px rgba(6, 182, 212, 0.03);
            box-sizing: border-box;
            font-size: 10px;
        }
        #ui-settings-panel.open { display: block; }
        #ui-settings-panel h3 {
            color: var(--sf-cyan);
            margin: 0 0 6px 0;
            text-align: center;
            font-size: 11px;
            text-shadow: 0 0 8px var(--sf-cyan-glow), 0 0 20px rgba(6, 182, 212, 0.3);
            animation: neon-text-glow 4s infinite;
        }
        /* 스크롤바 스타일 */
        #ui-settings-panel::-webkit-scrollbar {
            width: 6px;
        }
        #ui-settings-panel::-webkit-scrollbar-track {
            background: rgba(0, 30, 60, 0.5);
            border-radius: 3px;
        }
        #ui-settings-panel::-webkit-scrollbar-thumb {
            background: var(--hud-primary);
            border-radius: 3px;
        }
        .ui-preset-btn {
            width: 100%;
            padding: 5px;
            margin: 3px 0;
            background: rgba(0,100,150,0.5);
            border: 1px solid var(--hud-primary);
            border-radius: 4px;
            color: white;
            cursor: pointer;
            font-size: 0.75em;
        }
        .ui-preset-btn:hover { background: rgba(0,150,200,0.7); }
        .ui-preset-btn.danger { border-color: #f55; color: #f55; }
        .ui-preset-btn.danger:hover { background: rgba(255,50,50,0.3); }
        #ui-settings-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: var(--hud-text-bright);
            font-size: 1.5em;
            cursor: pointer;
        }

        /* ★★★ 설정 섹션 스타일 ★★★ */
        #ui-settings-panel .settings-section {
            display: flex !important;
            flex-direction: column !important;
            background: rgba(0, 40, 80, 0.4);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 14px;
        }
        #ui-settings-panel .settings-section-title {
            color: var(--hud-primary);
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
            text-align: left;
            letter-spacing: 0.5px;
            width: 100%;
        }
        /* ★ 설정 아이템: 한 줄에 하나씩 */
        #ui-settings-panel .setting-item {
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            min-height: 40px;
            gap: 12px;
            width: 100%;
        }
        #ui-settings-panel .setting-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        #ui-settings-panel .setting-item:first-child {
            padding-top: 0;
        }
        /* ★ 레이블: 왼쪽 정렬 */
        #ui-settings-panel .setting-item label {
            color: #aaddff;
            font-size: 13px;
            font-weight: 400;
            line-height: 1.4;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        /* ★ 슬라이더 */
        #ui-settings-panel .setting-item input[type="range"] {
            width: 100px;
            height: 6px;
            -webkit-appearance: none;
            appearance: none;
            background: linear-gradient(to right, rgba(0, 200, 255, 0.3), rgba(0, 100, 150, 0.5));
            border-radius: 3px;
            outline: none;
            cursor: pointer;
            flex-shrink: 0;
        }
        #ui-settings-panel .setting-item input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            background: linear-gradient(135deg, #0ff, #08c);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 6px rgba(0, 255, 255, 0.5);
        }
        /* ★ 셀렉트 박스 */
        #ui-settings-panel .setting-item select {
            background: rgba(0, 50, 100, 0.9);
            border: 1px solid rgba(0, 255, 255, 0.4);
            border-radius: 6px;
            color: var(--hud-text-bright);
            padding: 7px 12px;
            font-size: 12px;
            font-family: inherit;
            cursor: pointer;
            min-width: 80px;
            flex-shrink: 0;
        }
        #ui-settings-panel .setting-item select:hover {
            border-color: rgba(0, 255, 255, 0.7);
            background: rgba(0, 70, 120, 0.9);
        }
        #ui-settings-panel .setting-item select:focus {
            outline: none;
            border-color: var(--hud-primary);
            box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
        }
        /* ★ 값 표시 (슬라이더 옆) */
        #ui-settings-panel .setting-item span {
            color: var(--hud-primary);
            font-size: 12px;
            min-width: 40px;
            text-align: right;
            font-family: 'Orbitron', monospace;
            flex-shrink: 0;
        }

        /* ★★★ 설정 도움말 버튼 ★★★ */
        #ui-settings-panel .setting-help-btn {
            width: 20px;
            height: 20px;
            min-width: 20px;
            background: rgba(0, 100, 150, 0.4);
            border: 1px solid rgba(0, 255, 255, 0.4);
            border-radius: 50%;
            color: var(--hud-primary);
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 0;
        }
        #ui-settings-panel .setting-help-btn:hover {
            background: rgba(0, 200, 255, 0.5);
            border-color: var(--hud-primary);
        }

        /* 도움말 팝업 오버레이 */
        .setting-tooltip-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100dvh;
            z-index: calc(var(--z-topmost) + 10);
            display: none;
        }
        .setting-tooltip-overlay.active {
            display: block;
        }

        /* 도움말 팝업 */
        .setting-tooltip {
            position: fixed;
            background: rgba(5, 15, 35, 0.98);
            border: 2px solid var(--hud-primary);
            border-radius: 10px;
            padding: 12px 16px;
            max-width: 280px;
            z-index: calc(var(--z-topmost) + 11);
            box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
            animation: tooltipFadeIn 0.2s ease;
        }
        @keyframes tooltipFadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        .setting-tooltip-title {
            color: var(--hud-primary);
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
        }
        .setting-tooltip-content {
            color: #cef;
            font-size: 12px;
            line-height: 1.5;
        }
        .setting-tooltip-arrow {
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
        }
        .setting-tooltip-arrow.left {
            right: -8px;
            top: 50%;
            transform: translateY(-50%);
            border-width: 8px 0 8px 8px;
            border-color: transparent transparent transparent #0ff;
        }
        .setting-tooltip-arrow.bottom {
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 8px 8px 0 8px;
            border-color: var(--hud-primary) transparent transparent transparent;
        }

        /* UI 슬롯 시스템 */
        .ui-slots-container {
            margin: 15px 0;
        }
        .ui-slots-title {
            font-size: 12px;
            color: var(--hud-primary);
            margin-bottom: 10px;
            text-align: center;
        }
        .ui-slot {
            display: flex;
            align-items: center;
            background: rgba(0, 30, 60, 0.8);
            border: 1px solid #345;
            border-radius: 8px;
            padding: 10px;
            margin: 8px 0;
            cursor: pointer;
            transition: all 0.2s;
        }
        .ui-slot:hover {
            border-color: var(--hud-primary);
            background: rgba(0, 50, 80, 0.8);
        }
        .ui-slot.empty {
            opacity: 0.5;
        }
        .ui-slot-preview {
            width: 80px;
            height: 50px;
            background: #000;
            border: 1px solid #456;
            border-radius: 4px;
            margin-right: 12px;
            position: relative;
            overflow: hidden;
        }
        .ui-slot-preview .preview-dot {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 2px;
            background: var(--hud-primary);
        }
        .ui-slot-info {
            flex: 1;
        }
        .ui-slot-name {
            font-size: 13px;
            color: var(--hud-text-bright);
            margin-bottom: 3px;
        }
        .ui-slot-date {
            font-size: 10px;
            color: var(--hud-text-muted);
        }
        .ui-slot-actions {
            display: flex;
            gap: 5px;
        }
        .ui-slot-btn {
            padding: 5px 10px;
            border-radius: 4px;
            border: 1px solid;
            background: transparent;
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s;
        }
        .ui-slot-btn.load {
            border-color: var(--hud-success);
            color: var(--hud-success);
        }
        .ui-slot-btn.load:hover {
            background: rgba(0, 255, 0, 0.2);
        }
        .ui-slot-btn.save {
            border-color: var(--hud-primary);
            color: var(--hud-primary);
        }
        .ui-slot-btn.save:hover {
            background: rgba(0, 255, 255, 0.2);
        }
        .ui-slot-btn.delete {
            border-color: #f55;
            color: #f55;
        }
        .ui-slot-btn.delete:hover {
            background: rgba(255, 50, 50, 0.2);
        }
        
        /* ========== UI 재배치 모드 ========== */
        #ui-rearrange-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.3);
            z-index: var(--z-system);
            display: none;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
        }
        #ui-rearrange-overlay.active {
            display: flex;
        }
        .rearrange-header {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, rgba(155, 89, 182, 0.9), rgba(142, 68, 173, 0.9));
            border: 2px solid var(--hud-accent);
            border-radius: 25px;
            padding: 10px 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            color: white;
            font-family: 'Orbitron', sans-serif;
            font-size: 14px;
            z-index: var(--z-topmost);
            pointer-events: auto;
            box-shadow: 0 0 30px rgba(155, 89, 182, 0.5);
        }
        #ui-rearrange-done {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #27ae60, #2ecc71);
            border: 2px solid #2ecc71;
            border-radius: 25px;
            padding: 15px 40px;
            color: white;
            font-size: 16px;
            font-family: 'Orbitron', sans-serif;
            cursor: pointer;
            z-index: var(--z-topmost);
            pointer-events: auto;
            box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
        }
        #ui-rearrange-done:hover {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            transform: translateX(-50%) scale(1.05);
        }
        
        /* 재배치 모드에서 UI 하이라이트 */
        body.ui-rearrange-mode .rearrangeable-ui {
            outline: 2px dashed #9b59b6 !important;
            outline-offset: 3px;
            cursor: move !important;
            animation: rearrangeGlow 1.5s ease-in-out infinite;
            pointer-events: auto !important;
            touch-action: none !important;
        }
        body.ui-rearrange-mode .rearrangeable-ui:hover {
            outline-color: var(--hud-primary) !important;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5) !important;
        }
        body.ui-rearrange-mode .rearrangeable-ui.dragging {
            outline-color: #f90 !important;
            z-index: var(--z-topmost) !important;
            opacity: 0.9;
        }
        /* 재배치 모드에서 다른 터치 이벤트 비활성화 */
        body.ui-rearrange-mode #touch-area-left,
        body.ui-rearrange-mode #touch-area-right,
        body.ui-rearrange-mode canvas {
            pointer-events: none !important;
        }
        @keyframes rearrangeGlow {
            0%, 100% { outline-color: var(--hud-accent); }
            50% { outline-color: #bb8fce; }
        }
        
        /* ========== 온보딩 시퀀스 (비주얼 노벨 스타일) ========== */
        #onboarding-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: var(--z-topmost);
            display: none;
            flex-direction: column;
            justify-content: flex-end;
            align-items: stretch;
            pointer-events: auto;
            overflow: hidden;
        }
        #onboarding-overlay.active {
            display: flex;
        }
        #onboarding-bg {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: linear-gradient(180deg, rgba(0,5,20,0.6) 0%, rgba(0,10,30,0.4) 50%, rgba(0,15,40,0.7) 100%);
        }
        #onboarding-rank-display {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Orbitron', sans-serif;
            font-size: 28px;
            color: #00ffff;
            text-shadow: 0 0 20px rgba(0,255,255,0.6), 0 0 40px rgba(0,255,255,0.3);
            text-align: center;
            opacity: 0;
            transition: opacity 0.8s ease;
            pointer-events: none;
            z-index: 2;
        }
        #onboarding-rank-display.visible {
            opacity: 1;
        }
        #onboarding-rank-display .rank-stars {
            display: block;
            font-size: 36px;
            margin-top: 8px;
            letter-spacing: 4px;
            color: #ffd700;
            text-shadow: 0 0 15px rgba(255,215,0,0.6);
        }
        #onboarding-dialog {
            position: relative;
            width: 100%;
            background: linear-gradient(180deg, rgba(0,20,50,0.95) 0%, rgba(0,10,30,0.98) 100%);
            border-top: 2px solid rgba(0,200,255,0.6);
            padding: 16px 24px 14px;
            padding-left: max(38%, 280px);
            margin-bottom: 0;
            box-shadow: 0 -5px 30px rgba(0,100,200,0.2), inset 0 1px 0 rgba(0,200,255,0.1);
            display: flex;
            flex-direction: column;
            min-height: 120px;
        }
        #onboarding-portrait {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 95%;
            width: auto;
            max-width: 40%;
            object-fit: contain;
            object-position: bottom left;
            z-index: 3;
            filter: drop-shadow(4px 0 20px rgba(0,100,200,0.3));
            pointer-events: none;
        }
        #onboarding-dialog-content {
            flex: 1;
            min-width: 0;
        }
        #onboarding-name {
            font-family: 'Orbitron', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: #00ccff;
            background: rgba(0,100,180,0.3);
            border: 1px solid rgba(0,180,255,0.4);
            border-radius: 4px;
            padding: 4px 12px;
            display: inline-block;
            margin-bottom: 10px;
            text-shadow: 0 0 8px rgba(0,200,255,0.4);
        }
        #onboarding-text {
            font-family: 'Rajdhani', sans-serif;
            font-size: 17px;
            line-height: 1.6;
            color: #e0e8f0;
            min-height: 50px;
            padding-right: 10px;
        }
        #onboarding-text .cursor {
            display: inline-block;
            width: 2px;
            height: 17px;
            background: #00ccff;
            margin-left: 2px;
            vertical-align: text-bottom;
            animation: onboardingBlink 0.6s step-end infinite;
        }
        @keyframes onboardingBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        #onboarding-controls {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
            margin-top: 12px;
        }
        #onboarding-next {
            font-family: 'Orbitron', sans-serif;
            font-size: 13px;
            padding: 8px 24px;
            background: linear-gradient(135deg, rgba(0,100,180,0.6), rgba(0,60,120,0.8));
            border: 1px solid rgba(0,200,255,0.5);
            border-radius: 4px;
            color: #00eeff;
            cursor: pointer;
            transition: all 0.2s;
            min-height: 44px;
            touch-action: manipulation;
        }
        #onboarding-next:hover, #onboarding-next:active {
            background: linear-gradient(135deg, rgba(0,130,220,0.8), rgba(0,80,150,0.9));
            box-shadow: 0 0 15px rgba(0,200,255,0.4);
        }
        #onboarding-skip {
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            padding: 6px 14px;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 4px;
            color: rgba(255,255,255,0.4);
            cursor: pointer;
            transition: all 0.2s;
            min-height: 44px;
            touch-action: manipulation;
        }
        #onboarding-skip:hover {
            color: rgba(255,255,255,0.7);
            border-color: rgba(255,255,255,0.4);
        }
        @media (max-width: 600px) {
            #onboarding-text {
                font-size: 15px;
                line-height: 1.5;
            }
            #onboarding-rank-display {
                font-size: 22px;
                top: 20%;
            }
            #onboarding-rank-display .rank-stars {
                font-size: 28px;
            }
            #onboarding-dialog {
                padding: 10px 12px 8px;
                padding-left: max(32%, 200px);
            }
            #onboarding-portrait {
                height: 90%;
                max-width: 30%;
            }
        }
        @media (max-height: 500px) {
            #onboarding-rank-display {
                top: 15%;
            }
            #onboarding-portrait {
                height: 90%;
                max-width: 35%;
            }
        }

        /* ========== 모바일 최적화 CSS ========== */
        /* 터치 친화적 기본 설정 */
        * {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        
        /* 모바일 세로 모드 */
        @media (max-width: 480px) {
            #top-bar {
                padding: 5px 8px !important;
                flex-wrap: wrap;
                gap: 4px;
            }
            #top-bar h1 {
                font-size: 12px !important;
                width: 100%;
                text-align: center;
                margin-bottom: 5px;
            }
            .mode-btn {
                padding: 6px 8px !important;
                font-size: 10px !important;
                min-width: 50px;
            }
            #nav-container {
                width: 140px !important;
                max-height: 50vh !important;
            }
            .nav-item {
                padding: 10px 8px !important;
                font-size: 11px !important;
            }
            #chat-toggle {
                width: 44px !important;
                height: 44px !important;
                bottom: 15px !important;
                left: 10px !important;
            }
            #chat-panel {
                width: calc(100vw - 20px) !important;
                height: 50vh !important;
                left: 10px !important;
                bottom: 70px !important;
            }
            #msg-box {
                font-size: 12px !important;
                bottom: 60px !important;
            }
            #reset-cam {
                padding: 8px 16px !important;
                font-size: 11px !important;
            }
            /* 광고 버튼 */
            #ad-rewards-panel {
                top: auto !important;
                bottom: 15px !important;
                right: 10px !important;
            }
            #ad-menu-toggle {
                width: 44px !important;
                height: 44px !important;
            }
            /* 사운드 패널 */
            #sound-slide {
                bottom: 70px !important;
            }
        }
        
        /* 모바일 가로 모드 */
        @media (max-height: 500px) and (orientation: landscape) {
            #top-bar {
                padding: 3px 10px !important;
            }
            #top-bar h1 {
                font-size: 11px !important;
            }
            .mode-btn {
                padding: 4px 8px !important;
                font-size: 9px !important;
            }
            #nav-container {
                max-height: 70vh !important;
            }
            #chat-panel {
                height: 80vh !important;
            }
            /* ★★★ 설정 패널 모바일/가로모드 최적화 ★★★ */
            #ui-settings-panel {
                max-height: calc(100dvh - 20px) !important;
                width: 75vw !important;
                max-width: 230px !important;
                padding: 8px !important;
                font-size: 9px !important;
            }
            #ui-settings-panel h3 {
                font-size: 10px !important;
                margin-bottom: 5px !important;
            }
            #ui-settings-panel .settings-section {
                display: flex !important;
                flex-direction: column !important;
                padding: 6px !important;
                margin-bottom: 5px !important;
            }
            #ui-settings-panel .settings-section-title {
                font-size: 9px !important;
                margin-bottom: 5px !important;
                width: 100% !important;
            }
            /* ★ 모바일: 한 줄에 하나씩 */
            #ui-settings-panel .setting-item {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 4px !important;
                padding: 3px 0 !important;
                min-height: 36px !important;
                width: 100% !important;
            }
            #ui-settings-panel .setting-item label {
                font-size: 8px !important;
                flex-shrink: 0 !important;
            }
            #ui-settings-panel .setting-item select {
                font-size: 8px !important;
                padding: 2px 4px !important;
                min-width: 50px !important;
                flex-shrink: 0 !important;
            }
            #ui-settings-panel .setting-item input[type="range"] {
                width: 40px !important;
                flex-shrink: 0 !important;
            }
            #ui-settings-panel .setting-item span {
                font-size: 8px !important;
                min-width: 20px !important;
                flex-shrink: 0 !important;
            }
            #ui-settings-panel .setting-help-btn {
                width: 14px !important;
                height: 14px !important;
                min-width: 14px !important;
                font-size: 8px !important;
                flex-shrink: 0 !important;
            }
            #ui-settings-panel .ui-preset-btn {
                padding: 4px !important;
                font-size: 8px !important;
            }
            /* 슬롯 컨테이너 모바일 */
            .ui-slot {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 8px !important;
            }
            .ui-slot-preview {
                width: 100% !important;
                height: 40px !important;
                margin-right: 0 !important;
                margin-bottom: 8px !important;
            }
            .ui-slot-info {
                width: 100% !important;
            }
            .ui-slot-actions {
                width: 100% !important;
                justify-content: flex-end !important;
            }
        }
        
        /* 조종석 UI 모바일 최적화 */
        @media (max-width: 768px) {
            #pilot-console {
                padding: 8px !important;
                gap: 6px !important;
            }
            .pilot-console-btn {
                padding: 10px 12px !important;
                font-size: 11px !important;
                min-height: 44px;
            }
            #pilot-fuel, #pilot-speed {
                width: 55px !important;
            }
            #pilot-bottom {
                gap: 8px !important;
                padding: 5px !important;
            }
            #pilot-main-speed {
                font-size: 2.7em !important;
            }
            #touch-area-left {
                width: 140px !important;
                height: 140px !important;
                bottom: 100px !important;
                left: 10px !important;
            }
            /* ETA 박스 */
            #pilot-eta-box {
                font-size: 0.8em !important;
                padding: 6px 10px !important;
            }
            /* 경고 패널 */
            #pilot-warning-panel {
                font-size: 10px !important;
            }
            .pilot-warning {
                padding: 4px 8px !important;
            }
            /* 타겟 선택 */
            #ship-target-toggle {
                font-size: 11px !important;
                padding: 6px !important;
            }
        }
        
        /* 태블릿 */
        @media (min-width: 481px) and (max-width: 1024px) {
            #top-bar {
                padding: 8px 15px;
            }
            .mode-btn {
                padding: 8px 12px;
                font-size: 11px;
            }
            #nav-container {
                width: 180px;
            }
            .nav-item {
                padding: 10px;
            }
        }
        
        /* 터치 스크린 전용 */
        @media (hover: none) and (pointer: coarse) {
            .mode-btn, .pilot-console-btn, .pilot-ctrl-btn, 
            #board-ship-btn, #reset-cam, #chat-toggle,
            .nav-item, .station-btn, .catalog-card {
                min-height: 44px;
                min-width: 44px;
            }
            /* 버튼 활성화 피드백 */
            .mode-btn:active, .pilot-console-btn:active {
                transform: scale(0.95);
                opacity: 0.8;
            }
            /* 스크롤바 숨기기 */
            ::-webkit-scrollbar {
                width: 4px;
                height: 4px;
            }
        }
        
        /* ========== 하단 탭 바 (대시보드 스타일) ========== */
        #mobile-tab-bar {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 52px;
            background: rgba(5, 8, 18, 0.96);
            border-top: 1px solid rgba(6, 182, 212, 0.3);
            z-index: var(--z-topmost);
            justify-content: space-around;
            align-items: stretch;
            padding-bottom: env(safe-area-inset-bottom);
            backdrop-filter: blur(15px);
        }

        .mobile-tab {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            height: 100%;
            color: rgba(255,255,255,0.4);
            font-size: 9px;
            cursor: pointer;
            transition: all 0.25s ease;
            border: none;
            border-top: 2px solid transparent;
            background: transparent;
            font-family: 'Orbitron', sans-serif;
            padding: 4px 0;
        }

        .mobile-tab-icon {
            font-size: 16px;
            transition: transform 0.2s;
        }

        .mobile-tab-label {
            font-size: 8px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .mobile-tab.active {
            color: var(--sf-cyan);
            border-top-color: var(--sf-cyan);
            background: rgba(6, 182, 212, 0.08);
            text-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
        }
        .mobile-tab.active .mobile-tab-icon {
            transform: scale(1.1);
            filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.5));
        }

        .mobile-tab:active {
            transform: scale(0.95);
            background: rgba(6, 182, 212, 0.12);
        }
        
        /* 모바일 탭 패널 */
        #mobile-tab-panel {
            display: none;
            position: fixed;
            bottom: 50px;
            bottom: calc(50px + env(safe-area-inset-bottom));
            left: 0;
            right: 0;
            background: rgba(0, 20, 40, 0.95);
            border-top: 1px solid var(--hud-primary);
            z-index: var(--z-topmost);
            max-height: 200px;
            overflow-y: auto;
            backdrop-filter: blur(10px);
        }
        
        #mobile-tab-panel.open {
            display: block;
        }
        
        .mobile-panel-content {
            display: none;
            padding: 15px;
        }
        
        .mobile-panel-content.active {
            display: block;
        }
        
        /* 모바일 조종 패널 */
        #mobile-control-panel {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }
        
        .mobile-gauge-group {
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }
        
        .mobile-gauge {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(135deg, rgba(0, 30, 50, 0.9) 0%, rgba(6, 182, 212, 0.06) 100%);
            border: 1px solid var(--hud-primary);
            border-radius: 8px;
            padding: 10px;
            min-width: 65px;
            box-shadow: 0 0 6px rgba(6, 182, 212, 0.2), inset 0 0 8px rgba(6, 182, 212, 0.04);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .mobile-gauge-label {
            font-size: 10px;
            color: var(--hud-primary);
            margin-bottom: 5px;
            letter-spacing: 1px;
            text-shadow: 0 0 4px rgba(6, 182, 212, 0.4);
        }
        .mobile-gauge-bar {
            width: 39px;
            height: 78px;
            background: rgba(10, 14, 26, 0.9);
            border: 1px solid var(--hud-border-subtle);
            border-radius: 2px;
            position: relative;
            overflow: hidden;
        }
        .mobile-gauge-fill {
            position: absolute;
            bottom: 0;
            width: 100%;
            border-radius: 2px;
            transition: height 0.2s;
        }
        .mobile-gauge-fill.thr {
            background: linear-gradient(0deg, var(--hud-primary), var(--hud-primary-bright));
            box-shadow: 0 0 6px rgba(6, 182, 212, 0.5);
        }
        /* 오버드라이브 네온 효과 */
        @keyframes overdrive-neon {
            0%, 100% { box-shadow: 0 0 8px #0ff, 0 0 20px #0ff, 0 0 40px #0af; }
            50% { box-shadow: 0 0 12px #0ff, 0 0 30px #0af, 0 0 60px #06f; }
        }
        .mobile-gauge.overdrive-active {
            border-color: #0ff;
            animation: overdrive-neon 1.2s ease-in-out infinite;
        }
        .mobile-gauge.overdrive-active .mobile-gauge-fill.thr {
            background: linear-gradient(0deg, #0af, #0ff, #fff);
            box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
        }
        .mobile-gauge.overdrive-active .mobile-gauge-label {
            color: #0ff;
            text-shadow: 0 0 8px #0ff;
        }
        .mobile-gauge.overdrive-active .mobile-gauge-value {
            color: #0ff;
            text-shadow: 0 0 8px #0ff;
        }
        .mobile-gauge-fill.fuel {
            background: linear-gradient(0deg, var(--hud-danger-bright), var(--hud-caution), var(--hud-success-bright));
            box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
        }
        /* HULL 게이지 (인라인 스타일 대체) */
        .mobile-gauge-fill.hull,
        #mobile-hull-fill {
            background: linear-gradient(180deg, var(--hud-secondary), var(--hud-danger-bright));
            box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
        }
        .mobile-gauge.hull .mobile-gauge-label,
        .mobile-gauge.hull .mobile-gauge-value {
            color: var(--hud-secondary);
            text-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
        }
        .mobile-gauge.hull .mobile-gauge-bar {
            border-color: var(--hud-secondary-dim);
        }
        .mobile-gauge-value {
            font-size: 14px;
            font-weight: 600;
            color: var(--hud-primary-bright);
            margin-top: 5px;
            text-shadow: 0 0 6px rgba(6, 182, 212, 0.4);
        }
        
        .mobile-speed-display {
            display: none !important; /* ★ 속도 표기 제거 */
        }
        
        .mobile-speed-value {
            font-size: 36px;
            color: var(--hud-primary);
            text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
        }
        
        .mobile-speed-unit {
            font-size: 12px;
            color: var(--hud-text-muted);
        }
        
        .mobile-speed-secondary {
            font-size: 11px;
            color: #666;
            margin-top: 3px;
        }
        
        .mobile-direction-btns {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .mobile-dir-btn {
            width: 50px;
            height: 40px;
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-border-subtle);
            border-radius: 2px;
            color: var(--hud-primary-dim);
            font-size: 18px;
            cursor: pointer;
            touch-action: manipulation;
        }
        .mobile-dir-btn:active {
            background: var(--hud-primary-ghost);
            border-color: var(--hud-primary);
        }
        /* 모바일 긴급 브레이크 (인라인 스타일 대체) */
        .mobile-dir-btn.emergency-brake {
            background: linear-gradient(145deg, rgba(239,68,68,0.4), rgba(239,68,68,0.2));
            border-color: var(--hud-danger);
            color: var(--hud-text-bright);
        }
        .mobile-dir-btn.emergency-brake:active {
            background: rgba(239,68,68,0.6);
        }
        
        .mobile-btn-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 10px;
            width: 100%;
        }
        
        /* ===== 모바일 액션 버튼 (HUD 통일) ===== */
        .mobile-action-btn {
            padding: 10px 15px;
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-border-subtle);
            border-radius: 0;
            clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
            color: var(--hud-primary-dim);
            font-size: 11px;
            cursor: pointer;
            font-family: 'Share Tech Mono', monospace;
            touch-action: manipulation;
        }
        .mobile-action-btn:hover,
        .mobile-action-btn:active {
            background: var(--hud-primary-ghost);
            border-color: var(--hud-primary);
            color: var(--hud-primary);
        }
        .mobile-action-btn.autopilot {
            border-color: var(--hud-border-subtle);
            color: var(--hud-primary-dim);
        }
        .mobile-action-btn.autopilot.engaged {
            background: var(--hud-success-ghost);
            border-color: var(--hud-success);
            color: var(--hud-success);
        }
        /* 궤도 버튼 */
        .mobile-action-btn.orbit {
            display: none;
        }
        /* 스페이스 모드 버튼 */
        #mobile-space-mode {
            padding: 6px 10px;
            font-size: 11px;
        }

        /* ★ 구버전 발사 버튼 - 숨김 (새 #mobile-combat-btns 사용) */
        #mobile-fire-btn {
            display: none !important;
        }

        /* ★ 투사체/빔 피격 플래시 */
        #weapon-hit-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,100,0,0.4), transparent 70%);
            pointer-events: none;
            opacity: 0;
            z-index: var(--z-critical);
            transition: opacity 0.1s;
        }

        #weapon-hit-overlay.active {
            opacity: 1;
        }

        /* 모바일 상태 패널 */
        #mobile-status-panel {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .mobile-status-item {
            background: rgba(0, 30, 50, 0.9);
            border: 1px solid var(--hud-primary);
            border-radius: 8px;
            padding: 10px;
            text-align: center;
        }
        
        .mobile-status-label {
            font-size: 9px;
            color: var(--hud-primary);
            margin-bottom: 5px;
        }
        
        .mobile-status-value {
            font-size: 14px;
            color: var(--hud-text-bright);
        }
        
        /* 모바일 라디오 패널 */
        #mobile-radio-panel {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 10px;
        }

        .mobile-radio-station {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(0, 30, 50, 0.9);
            border: 1px solid #456;
            border-radius: 4px;
            padding: 6px;
            cursor: pointer;
        }

        .mobile-radio-station:active,
        .mobile-radio-station.active {
            border-color: var(--hud-success);
            background: rgba(0, 100, 50, 0.5);
        }

        .mobile-radio-name {
            font-size: 10px;
            color: var(--hud-text-bright);
        }

        .mobile-radio-status {
            font-size: 8px;
            color: var(--hud-text-muted);
        }

        .mobile-radio-volume {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 5px;
            padding: 5px;
            background: rgba(0, 30, 50, 0.9);
            border: 1px solid var(--hud-primary);
            border-radius: 8px;
        }
        
        .mobile-radio-volume input {
            flex: 1;
        }
        
        /* 모바일 채팅 패널 */
        #mobile-chat-panel {
            display: flex;
            flex-direction: column;
            height: 180px;
        }
        
        .mobile-chat-messages {
            flex: 1;
            overflow-y: auto;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 12px;
        }
        
        .mobile-chat-input-row {
            display: flex;
            gap: 8px;
        }
        
        .mobile-chat-input-row input {
            flex: 1;
            padding: 10px;
            background: rgba(0, 50, 80, 0.8);
            border: 1px solid var(--hud-primary);
            border-radius: 8px;
            color: var(--hud-text-bright);
            font-size: 14px;
        }
        
        .mobile-chat-input-row button {
            padding: 10px 20px;
            background: var(--hud-primary);
            border: none;
            border-radius: 8px;
            color: #000;
            font-weight: bold;
            cursor: pointer;
        }
        
        /* 모바일 ARIA 패널 */
        #mobile-aria-panel {
            display: flex;
            flex-direction: column;
            height: 180px;
        }
        
        .mobile-aria-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .mobile-aria-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .mobile-aria-info {
            flex: 1;
        }
        
        .mobile-aria-name {
            font-size: 14px;
            color: var(--hud-primary);
            font-weight: bold;
        }
        
        .mobile-aria-status {
            font-size: 10px;
            color: var(--hud-success);
        }
        
        .mobile-aria-messages {
            flex: 1;
            overflow-y: auto;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 13px;
            color: var(--hud-text-bright);
            line-height: 1.4;
        }
        
        .mobile-aria-input-row {
            display: flex;
            gap: 8px;
        }
        
        .mobile-aria-input-row input {
            flex: 1;
            padding: 10px;
            background: rgba(0, 50, 80, 0.8);
            border: 1px solid var(--hud-primary);
            border-radius: 8px;
            color: var(--hud-text-bright);
            font-size: 14px;
        }
        
        .mobile-aria-input-row button {
            padding: 10px 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 8px;
            color: var(--hud-text-bright);
            font-weight: bold;
            cursor: pointer;
        }
        
        /* ★★★ 모바일 전용 미니 HUD만 데스크톱에서 숨김 ★★★ */
        #mobile-mini-hud {
            display: none !important;
        }

        /* ★ 조종석 모드에서 2D HUD 숨기기 (3D 유리 HUD로 대체) */
        body.pilot-mode #pilot-right,
        body.pilot-mode #pilot-target-info,
        body.pilot-mode #pilot-autopilot-info,
        body.pilot-mode #pilot-coords-panel,
        body.pilot-mode #mobile-mini-hud,
        body.pilot-mode #touch-area-left,
        body.pilot-mode #pilot-joystick,
        body.pilot-mode #pilot-left-console,
        body.pilot-mode #pilot-main-speed {
            display: none !important;
        }
        /* pilot-radar 조종석 CSS 제거됨 */

        /* ★ 조종석 모드에서도 목표 선택 드롭다운은 표시 (상단 중앙) */
        body.pilot-mode #pilot-target-select {
            display: block !important;
            position: fixed !important;
            top: 42px !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            z-index: var(--z-modal);
        }

        /* ★ 조종석 모드에서 유지할 UI */
        body.pilot-mode #cockpit-radio,
        body.pilot-mode #ui-settings-btn,
        body.pilot-mode #global-header-btns,
        body.pilot-mode #pilot-right-console,
        body.pilot-mode #pilot-center-console,
        body.pilot-mode #pilot-btn-row {
            display: flex !important;
        }

        /* ★ 조종석 모드에서 하단 버튼 레이아웃 조정 */
        body.pilot-mode #pilot-bottom {
            justify-content: center;
        }
        body.pilot-mode #pilot-center-console {
            flex: 0 0 auto;
        }

        /* 모바일에서도 데스크톱 UI 표시 (크기 조정) */
        @media (max-width: 768px) {
            body.pilot-mode #pilot-bottom {
                transform: scale(0.85);
                transform-origin: center bottom;
            }

            /* 2D HUD 숨김 (모바일에서도) — #pilot-radar 제외 (터치 오버레이 필요) */
            body.pilot-mode #pilot-right,
            body.pilot-mode #pilot-target-info,
            body.pilot-mode #pilot-autopilot-info {
                display: none !important;
            }
            
            /* 미니 HUD - 상단 */
            #mobile-mini-hud {
                display: flex;
                position: fixed;
                top: 5px;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(0, 20, 40, 0.9);
                border: 1px solid var(--hud-primary);
                border-radius: 20px;
                padding: 5px 15px;
                gap: 15px;
                z-index: var(--z-panels);
                align-items: center;
            }
            
            .mini-hud-item {
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: 12px;
            }
            
            .mini-hud-icon {
                font-size: 14px;
            }
            
            .mini-hud-value {
                color: var(--hud-primary);
                font-weight: bold;
            }
            
            .mini-hud-bar {
                width: 50px;
                height: 6px;
                background: #222;
                border-radius: 3px;
                overflow: hidden;
            }
            
            .mini-hud-bar-fill {
                height: 100%;
                background: linear-gradient(90deg, #f00, #ff0, #0f0);
                transition: width 0.3s;
            }
        }
        
        @media (min-width: 769px) {
            #mobile-mini-hud {
                display: none !important;
            }
            /* PC: 탭바 하단 중앙 정렬 */
            #mobile-tab-bar {
                max-width: 480px;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 10px 10px 0 0;
            }
        }

        /* ★★★ 시네마틱 인트로 스타일 ★★★ */
        #intro-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #000 url('/loding.jpg') center center / cover no-repeat;
            z-index: var(--z-topmost);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        #intro-overlay.fade-out {
            animation: intro-fadeout 1.5s ease-in-out forwards;
        }
        @keyframes intro-fadeout {
            0% { opacity: 1; }
            100% { opacity: 0; pointer-events: none; }
        }
        #intro-canvas {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            opacity: 0.3;
        }
        
        /* 레터박스 (시네마틱 바) */
        .letterbox {
            position: absolute;
            left: 0; width: 100%;
            height: 12%;
            background: #000;
            z-index: var(--z-base);
            transform: scaleY(0);
        }
        .letterbox-top { top: 0; transform-origin: top; }
        .letterbox-bottom { bottom: 0; transform-origin: bottom; }
        .letterbox.active {
            animation: letterbox-in 1s ease-out forwards;
        }
        @keyframes letterbox-in {
            0% { transform: scaleY(0); }
            100% { transform: scaleY(1); }
        }
        
        /* 렌즈 플레어 */
        #lens-flare {
            position: absolute;
            top: 30%; left: 50%;
            width: 300px; height: 300px;
            transform: translate(-50%, -50%);
            background: radial-gradient(ellipse, rgba(255,200,100,0.3) 0%, transparent 60%);
            opacity: 0;
            z-index: var(--z-base);
            pointer-events: none;
        }
        #lens-flare.active {
            animation: flare-pulse 3s ease-in-out infinite;
        }
        @keyframes flare-pulse {
            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.2); }
        }
        
        /* 메인 컨텐츠 */
        #intro-content {
            position: relative;
            z-index: var(--z-base);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 40px;
        }
        
        /* 스튜디오 로고 */
        #studio-logo {
            display: none !important;
        }
        #studio-logo.visible {
            animation: studio-in 2s ease-out forwards;
        }
        #studio-logo.fadeout {
            animation: studio-out 1s ease-in forwards;
        }
        @keyframes studio-in {
            0% { opacity: 0; transform: scale(0.8); }
            100% { opacity: 1; transform: scale(1); }
        }
        @keyframes studio-out {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.1); }
        }
        .studio-icon {
            font-size: 48px;
            color: var(--hud-text-bright);
            text-shadow: 0 0 30px rgba(255,255,255,0.5);
            animation: icon-rotate 10s linear infinite;
        }
        @keyframes icon-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .studio-text {
            font-family: 'Rajdhani', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            letter-spacing: 8px;
        }
        
        /* 메인 타이틀 */
        #main-title {
            display: none !important;
        }
        #main-title.visible {
            display: flex;
            animation: title-in 1.5s ease-out forwards;
        }
        @keyframes title-in {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .title-line {
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0,255,255,0.8), transparent);
        }
        .title-line.expand {
            animation: line-expand 1.5s ease-out forwards;
        }
        @keyframes line-expand {
            0% { width: 0; }
            100% { width: 400px; }
        }
        .title-text {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(28px, 8vw, 56px);
            font-weight: 900;
            color: transparent;
            letter-spacing: 6px;
            display: flex;
            gap: 2px;
        }
        .title-text .char {
            opacity: 0;
            color: var(--hud-text-bright);
            text-shadow: 0 0 20px rgba(0,255,255,0.5);
        }
        .title-text .char.visible {
            animation: char-in 0.5s ease-out forwards;
        }
        .title-text .char.dot {
            color: var(--hud-primary);
            margin: 0 8px;
        }
        @keyframes char-in {
            0% { opacity: 0; transform: translateY(-20px) scale(1.5); filter: blur(10px); }
            100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }
        .title-tagline {
            font-family: 'Rajdhani', sans-serif;
            font-size: clamp(10px, 2.5vw, 16px);
            color: rgba(0,255,255,0.6);
            letter-spacing: 10px;
            opacity: 0;
        }
        .title-tagline.visible {
            animation: tagline-in 1s ease-out 0.5s forwards;
        }
        @keyframes tagline-in {
            0% { opacity: 0; letter-spacing: 20px; }
            100% { opacity: 1; letter-spacing: 10px; }
        }
        
        /* 원형 로더 */
        #intro-loader {
            display: none;
            position: absolute;
            bottom: 16%;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 80px;
            z-index: var(--z-base);
        }
        #intro-loader.visible {
            display: block;
            animation: loader-in 0.5s ease-out forwards;
            transform: translateX(-50%);
        }
        @keyframes loader-in {
            0% { opacity: 0; transform: scale(0.5); }
            100% { opacity: 1; transform: scale(1); }
        }
        .loader-ring {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }
        .loader-bg {
            fill: none;
            stroke: rgba(255,255,255,0.1);
            stroke-width: 2;
        }
        .loader-progress {
            fill: none;
            stroke: url(#loader-gradient);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-dasharray: 283;
            stroke-dashoffset: 283;
            transition: stroke-dashoffset 0.3s ease-out;
            filter: drop-shadow(0 0 6px rgba(0,255,255,0.8));
        }
        .loader-percent {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            color: var(--hud-text-bright);
        }
        
        /* 시작 버튼 */
        #intro-start {
            display: none;
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translateX(-50%);
            z-index: var(--z-base);
        }
        #intro-start.visible {
            display: block;
            animation: start-in 1.2s ease-out forwards;
        }
        @keyframes start-in {
            0% { opacity: 0; transform: translateX(-50%) translateY(30px); }
            100% { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        #intro-start-btn {
            position: relative;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(0,200,255,0.3);
            border-radius: 30px;
            padding: 14px 48px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s;
        }
        #intro-start-btn::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0,200,255,0.15), transparent);
            animation: btn-shimmer 3s ease-in-out infinite;
        }
        @keyframes btn-shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        #intro-start-btn .btn-border {
            display: none;
        }
        #intro-start-btn:hover, #intro-start-btn:active {
            background: rgba(0,150,255,0.25);
            border-color: rgba(0,200,255,0.6);
            box-shadow: 0 0 30px rgba(0,200,255,0.2), inset 0 0 15px rgba(0,200,255,0.05);
        }
        #intro-start-btn .btn-text {
            font-family: 'Orbitron', sans-serif;
            font-size: 13px;
            color: rgba(200,230,255,0.9);
            letter-spacing: 5px;
            transition: all 0.3s;
        }
        #intro-start-btn:hover .btn-text {
            color: #80dfff;
            text-shadow: 0 0 15px rgba(0,200,255,0.5);
        }
        
        /* 스킵 */
        #intro-skip {
            position: absolute;
            bottom: 14%;
            right: 40px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 12px;
            color: rgba(255,255,255,0.3);
            letter-spacing: 2px;
            cursor: pointer;
            z-index: var(--z-base);
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        #intro-skip:hover {
            color: rgba(255,255,255,0.7);
        }
        .skip-arrow {
            transition: transform 0.3s;
        }
        #intro-skip:hover .skip-arrow {
            transform: translateX(3px);
        }
        
        /* 하단 텍스트 */
        #intro-bottom-text {
            position: absolute;
            bottom: 14%;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Rajdhani', sans-serif;
            font-size: 10px;
            color: rgba(255,255,255,0.2);
            letter-spacing: 2px;
            z-index: var(--z-base);
        }
        
        /* ★★★ 가로모드 회전 안내 ★★★ */
        #rotate-screen-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
            z-index: var(--z-topmost);
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .rotate-content {
            text-align: center;
            animation: rotate-float 3s ease-in-out infinite;
        }
        @keyframes rotate-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .rotate-icon {
            font-size: 80px;
            animation: rotate-phone 2s ease-in-out infinite;
            display: inline-block;
        }
        @keyframes rotate-phone {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(90deg); }
        }
        .rotate-arrow {
            font-size: 40px;
            color: var(--hud-primary);
            margin: 20px 0;
            animation: rotate-pulse 1.5s ease-in-out infinite;
        }
        @keyframes rotate-pulse {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }
        .rotate-text {
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            color: var(--hud-text-bright);
            letter-spacing: 2px;
            margin-bottom: 10px;
        }
        .rotate-subtext {
            font-family: 'Rajdhani', sans-serif;
            font-size: 14px;
            color: rgba(255,255,255,0.5);
            letter-spacing: 1px;
        }
        
        /* ★★★ 고정 헤더 버튼 스타일 ★★★ */
        #global-header-btns {
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: var(--z-topmost);
            display: none;  /* ★ 기본 숨김 (메인 메뉴에서) */
            gap: 10px;
        }
        /* ★ 게임 진입 후에만 표시 */
        body.game-started #global-header-btns {
            display: flex;
        }
        .global-header-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(10, 20, 40, 0.8);
            border: 1px solid rgba(0, 255, 255, 0.3);
            color: var(--hud-text-bright);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            backdrop-filter: blur(10px);
        }
        .global-header-btn:hover {
            background: rgba(0, 150, 200, 0.4);
            border-color: var(--hud-primary);
            transform: scale(1.1);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
        }
        .global-header-btn .btn-icon {
            line-height: 1;
        }
        /* ★ 공지 버튼 깜박임 */
        #notice-btn.has-new {
            animation: notice-blink 1.5s ease-in-out infinite;
            border-color: #ff6600;
        }
        #notice-btn.has-new .btn-icon { animation: notice-icon-pulse 1.5s ease-in-out infinite; }
        @keyframes notice-blink {
            0%, 100% { box-shadow: 0 0 5px rgba(255,102,0,0.5); }
            50% { box-shadow: 0 0 15px rgba(255,102,0,0.8), 0 0 30px rgba(255,102,0,0.3); }
        }
        @keyframes notice-icon-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
        /* 조종 모드에서는 공지 버튼만 표시 */
        body.pilot-mode #global-header-btns {
            display: flex;
        }
        body.pilot-mode #global-header-btns #global-settings-btn,
        body.pilot-mode #global-header-btns #global-profile-btn {
            display: none;
        }
        
        /* 게임 모드 진입 시 세로모드면 안내 표시 */
        @media screen and (orientation: portrait) {
            body.game-mode #rotate-screen-overlay {
                display: flex !important;
            }
        }
        @media screen and (orientation: landscape) {
            body.game-mode #rotate-screen-overlay {
                display: none !important;
            }
        }

        /* ★★★ 조종석 모드 모바일 종합 최적화 ★★★ */
        @media (max-width: 1024px) {
            /* 조종석 전투 버튼 */
            body.pilot-mode #mobile-combat-btns {
                display: flex !important;
            }
            /* 가로 모드에서 더 나은 버튼 위치 */
            @media (max-height: 500px) and (orientation: landscape) {
                #mobile-combat-btns {
                    bottom: 120px !important;
                    right: calc(15px + env(safe-area-inset-right)) !important;
                    gap: 8px !important;
                }
                .mobile-combat-btn {
                    width: 52px !important;
                    height: 52px !important;
                }
                .combat-btn-label { font-size: 9px !important; }
            }
        }

        /* ★★★ z-index 계층 정리 (참고용 주석) ★★★ */
        /*
         * z-index 계층 구조:
         * 1-10: 배경 효과 (scanlines, grid)
         * 100-200: 일반 HUD 요소
         * 250-300: 조이스틱, 프롬프트
         * 400-600: 조종석 UI (프로필, 버튼, 전투버튼)
         * 1000-3000: 패널, 드롭다운
         * 9000+: 모달, 경고 오버레이
         * 10000+: 설정 패널, 긴급 UI
         * 99999: 세로모드 경고 (최상위)
         */

        /* ★★★ 오른쪽 슬라이드 메뉴 (컨테이너 구조) ★★★ */
        #right-slide-container {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%) translateX(calc(100% - 44px));
            display: flex;
            align-items: center;
            z-index: var(--z-overlay);
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            pointer-events: none;
            max-height: calc(100dvh - 20px);
        }
        #right-slide-container.open {
            transform: translateY(-50%) translateX(0);
        }
        body.pilot-mode #right-slide-container {
            z-index: var(--z-overlay);
        }
        body.pilot-mode #right-menu-toggle {
            pointer-events: auto;
            z-index: var(--z-overlay);
        }
        #right-slide-container.open .toggle-arrow {
            transform: rotate(180deg);
        }

        #right-menu-toggle {
            width: 44px;
            height: 80px;
            background: linear-gradient(135deg, #0a1628, #0d2137);
            border: 1px solid rgba(0,255,255,0.2);
            border-right: none;
            border-radius: 12px 0 0 12px;
            color: #0ff;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            flex-shrink: 0;
            pointer-events: auto;
            box-shadow: -3px 0 15px rgba(0,255,255,0.08);
            touch-action: manipulation;
        }
        #right-menu-toggle:hover, #right-menu-toggle:active {
            background: linear-gradient(135deg, #0d2137, #122a45);
            box-shadow: -5px 0 20px rgba(0,255,255,0.15);
        }

        #right-slide-panel {
            width: 150px;
            background: linear-gradient(135deg, #0a1628, #0d2137);
            border: 1px solid rgba(0,255,255,0.2);
            border-right: none;
            border-radius: 12px 0 0 12px;
            padding: 12px 10px;
            overflow-y: auto;
            overflow-x: hidden;
            max-height: calc(100dvh - 20px);
            pointer-events: auto;
            box-shadow: -5px 0 20px rgba(0,255,255,0.08);
        }

        /* 프로필 섹션 */
        #slide-profile-section {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            padding-bottom: 10px;
        }
        #slide-profile-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #06b6d4, #0891b2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            border: 2px solid rgba(0,255,255,0.3);
            box-shadow: 0 0 10px rgba(0,255,255,0.1);
        }
        #slide-profile-info {
            flex: 1;
        }
        #slide-profile-name {
            color: var(--sf-text-bright);
            font-family: 'Share Tech Mono', 'Orbitron', monospace;
            font-size: 12px;
            font-weight: 600;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        }
        #slide-profile-stats {
            color: var(--sf-orange);
            font-family: 'Share Tech Mono', monospace;
            font-size: 10px;
            margin-top: 2px;
            text-shadow: 0 0 5px var(--sf-orange-glow);
        }

        .slide-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0,255,255,0.3), transparent);
            margin: 8px 0;
        }

        /* 메뉴 버튼 - ARIA 카드 스타일 */
        .slide-menu-btn {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 10px;
            margin-bottom: 4px;
            background: rgba(0,255,255,0.04);
            border: 1px solid rgba(0,255,255,0.15);
            border-radius: 8px;
            color: #cde;
            font-family: 'Share Tech Mono', 'Orbitron', monospace;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(0,255,255,0.2);
            min-height: 44px;
            position: relative;
            z-index: var(--z-base);
            overflow: hidden;
        }
        .slide-menu-btn::before {
            content: '';
            position: absolute;
            left: 0; top: 0;
            width: 2px; height: 100%;
            background: #0ff;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .slide-menu-btn:hover::before,
        .slide-menu-btn:active::before {
            opacity: 1;
        }
        .slide-menu-btn:hover,
        .slide-menu-btn:active {
            background: rgba(0,255,255,0.1);
            border-color: rgba(0,255,255,0.3);
            color: #0ff;
            box-shadow: 0 0 15px rgba(0,255,255,0.08);
        }
        /* 슬라이드 패널 SETTINGS 버튼 - 항상 표시 */
        #slide-settings-btn {
            display: flex !important;
        }
        .slide-btn-icon {
            font-size: 16px;
            width: 20px;
            text-align: center;
            pointer-events: none;
        }
        .slide-btn-text {
            flex: 1;
            text-align: left;
            letter-spacing: 1px;
            pointer-events: none;
        }

        /* ★★★ 채팅 상단 슬라이드 ★★★ */
        #chat-slide-toggle {
            position: fixed;
            left: 15px;
            top: 10px;
            width: 44px;
            height: 44px;
            background: rgba(0, 20, 40, 0.8);
            border: 1px solid var(--sf-cyan);
            border-radius: 8px;
            color: var(--sf-cyan);
            font-size: 18px;
            cursor: pointer;
            z-index: var(--z-overlay);
            transition: all 0.3s ease;
            touch-action: manipulation;
        }
        #chat-slide-toggle:hover, #chat-slide-toggle:active {
            background: rgba(0, 255, 255, 0.2);
            box-shadow: var(--sf-glow-cyan);
        }
        body.chat-open #chat-slide-toggle {
            top: 160px;
        }

        #unified-chat-panel {
            position: fixed !important;
            left: 10px !important;
            top: -160px !important;
            width: 200px !important;
            max-width: 60vw;
            transition: top 0.3s ease !important;
            z-index: var(--z-overlay) !important;
        }
        #unified-chat-panel.chat-expanded {
            width: 300px !important;
            max-width: 75vw;
        }
        #unified-chat-panel.chat-expanded .chat-content-box {
            max-height: 120px;
        }
        #unified-chat-panel.chat-open {
            top: 10px !important;
        }
        body.pilot-mode #unified-chat-panel {
            top: 10px !important;
            display: block !important;
        }

        /* 기존 프로필 패널 숨김 */
        #user-profile-panel {
            display: none !important;
        }
        #global-header-btns {
            display: none !important;
        }

        /* 기존 pilot-right-btns 숨김 */
        #pilot-right-btns {
            display: none !important;
        }

        /* 왼쪽 볼륨 슬라이더 숨김 */
        #sound-slide {
            display: none !important;
        }

        /* ★★★ 커스텀 Confirm 모달 ★★★ */
        .custom-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100000;
            backdrop-filter: blur(5px);
        }
        .custom-modal-overlay.show {
            display: flex;
        }
        .custom-modal-box {
            background: linear-gradient(145deg, rgba(10, 20, 40, 0.98), rgba(5, 15, 30, 0.98));
            border: 2px solid var(--sf-cyan);
            border-radius: 15px;
            padding: 30px 40px;
            max-width: 400px;
            width: 90%;
            text-align: center;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), inset 0 0 20px rgba(0, 255, 255, 0.05);
            animation: modalAppear 0.3s ease;
        }
        @keyframes modalAppear {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .custom-modal-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
        .custom-modal-message {
            color: var(--sf-text-bright);
            font-family: 'Orbitron', sans-serif;
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 25px;
            white-space: pre-line;
        }
        .custom-modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        .custom-modal-btn {
            padding: 12px 30px;
            border-radius: 8px;
            font-family: 'Orbitron', sans-serif;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 100px;
        }
        .custom-modal-btn.confirm {
            background: linear-gradient(145deg, var(--sf-cyan), var(--sf-cyan-dim));
            border: none;
            color: #000;
        }
        .custom-modal-btn.confirm:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0, 255, 255, 0.4);
        }
        .custom-modal-btn.cancel {
            background: transparent;
            border: 2px solid var(--sf-text-dim);
            color: var(--sf-text-dim);
        }
        .custom-modal-btn.cancel:hover {
            border-color: var(--sf-red);
            color: var(--sf-red);
        }

        /* ★★★ 시간 게이지 바 (상단바 아래 별도 행) ★★★ */
        #time-bar {
            position: absolute;
            top: var(--top-bar-height);
            left: 0;
            width: 100%;
            height: 28px;
            background: linear-gradient(180deg, rgba(10, 15, 25, 0.85) 0%, rgba(10, 15, 25, 0.4) 80%, transparent 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 0 15px;
            box-sizing: border-box;
            z-index: var(--z-hud);
            pointer-events: none;
        }
        #time-bar .slider-container {
            display: flex;
            flex-direction: row;
            gap: 14px;
            pointer-events: auto;
        }
        #time-bar .slider-row {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        #time-bar #time-val {
            display: block;
            pointer-events: auto;
            margin-left: 6px;
        }
        .time-step-btn {
            width: 28px;
            height: 28px;
            border: 1px solid rgba(0, 255, 255, 0.4);
            background: rgba(0, 255, 255, 0.1);
            color: var(--sf-cyan);
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            touch-action: manipulation;
            padding: 0;
            line-height: 1;
            transition: background 0.15s;
            -webkit-tap-highlight-color: rgba(0,255,255,0.2);
        }
        .time-step-btn:hover {
            background: rgba(0, 255, 255, 0.25);
        }
        .time-step-btn:active {
            background: rgba(0, 255, 255, 0.4);
            transform: scale(0.9);
        }

        /* ★★★ 정거장 상점 모달 ★★★ */
        #station-shop-modal {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.88);
            z-index: var(--z-topmost);
            justify-content: center;
            align-items: center;
            pointer-events: auto;
            touch-action: none;
        }
        #station-shop-modal.show { display: flex; }
        .shop-inner {
            position: relative;
            background: rgba(4, 8, 18, 0.95);
            border: 1px solid rgba(6, 182, 212, 0.3);
            border-radius: 2px;
            padding: 18px;
            max-width: 520px;
            width: 92%;
            max-height: 85vh;
            overflow-y: auto;
            color: var(--hud-text-bright);
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            pointer-events: auto;
            touch-action: auto;
            box-shadow: 0 0 40px rgba(6, 182, 212, 0.08), inset 0 0 40px rgba(6, 182, 212, 0.02);
        }
        .shop-inner::before {
            content: '';
            position: absolute;
            top: 0; left: 10%; right: 10%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--hud-primary), transparent);
        }
        .shop-close-x {
            position: absolute;
            top: 8px; right: 10px;
            background: none; border: none;
            color: var(--hud-danger); font-size: 16px;
            cursor: pointer; z-index: var(--z-base);
            padding: 6px;
            touch-action: manipulation;
        }
        .shop-title {
            text-align: center;
            color: var(--hud-primary);
            margin: 0 0 10px 0;
            font-size: 14px;
            letter-spacing: 2px;
        }
        .shop-coins {
            text-align: center;
            margin-bottom: 10px;
            font-size: 11px;
            color: var(--hud-text-normal);
        }
        .shop-tabs {
            display: flex;
            gap: 6px;
            margin-bottom: 10px;
            justify-content: center;
        }
        .shop-tab-btn {
            padding: 5px 12px;
            background: transparent;
            color: var(--hud-text-dim);
            border: 1px solid rgba(6, 182, 212, 0.15);
            border-radius: 2px;
            cursor: pointer;
            font-size: 10px;
            font-family: 'Orbitron', sans-serif;
            touch-action: manipulation;
            transition: all 0.2s;
        }
        .shop-tab-btn.active {
            background: rgba(6, 182, 212, 0.12);
            color: var(--hud-primary-bright);
            border-color: var(--hud-primary);
        }
        .shop-item-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .shop-item {
            border: 1px solid rgba(6, 182, 212, 0.12);
            border-radius: 8px;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s;
            background: rgba(6, 182, 212, 0.04);
        }
        .shop-item:hover, .shop-item:active {
            border-color: var(--hud-primary-dim);
            background: rgba(6, 182, 212, 0.08);
        }
        .shop-item-icon { font-size: 22px; opacity: 0.8; }
        .shop-item-info { flex: 1; }
        .shop-item-name { font-size: 11px; font-weight: bold; color: var(--hud-text-bright); }
        .shop-item-desc { font-size: 9px; color: var(--hud-text-dim); margin-top: 2px; }
        .shop-item-action { text-align: right; font-size: 10px; }
        .shop-item-price { color: var(--hud-secondary); font-weight: bold; font-size: 11px; }
        .shop-item-owned { color: var(--hud-primary-dim); font-size: 10px; }
        .shop-equip-btn, .shop-buy-btn {
            margin-top: 4px;
            padding: 6px 14px;
            color: var(--hud-text-bright);
            border: 1px solid rgba(6, 182, 212, 0.3);
            border-radius: 6px;
            cursor: pointer;
            font-size: 10px;
            font-family: 'Orbitron', sans-serif;
            touch-action: manipulation;
            min-height: 44px;
            transition: all 0.2s;
        }
        .shop-equip-btn {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.3);
            color: var(--hud-success);
        }
        .shop-buy-btn {
            background: rgba(6, 182, 212, 0.1);
            border-color: rgba(6, 182, 212, 0.3);
            color: var(--hud-primary);
        }
        .shop-buy-btn:hover, .shop-buy-btn:active {
            background: rgba(6, 182, 212, 0.2);
            border-color: var(--hud-primary);
        }
        .shop-empty-tab {
            text-align: center;
            padding: 20px;
            color: var(--hud-text-muted);
            font-size: 11px;
        }
        .shop-empty-tab > div:first-child { font-size: 28px; margin-bottom: 8px; }
        /* ★ 상점 열려있을 때 FIRE/BRAKE 숨김 */
        #station-shop-modal.show ~ #mobile-combat-btns,
        #station-shop-modal.show ~ .pilot-combat-btn { display: none !important; }

        /* ★★★ 전체화면 버튼 숨김 ★★★ */
        #btn-fullscreen { display: none !important; }

        /* ★★★ 광고 모달 display 제어 ★★★ */
        #ad-modal-menu { display: none; }
        #ad-modal-menu.open { display: block; }

        /* ★★★ 광고 즉시/캡슐 선택 팝업 ★★★ */
        #ad-choice-popup {
            display: none;
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: var(--hud-bg-panel);
            border: 1px solid var(--hud-primary-dim);
            border-radius: 10px;
            padding: 16px;
            width: 240px;
            z-index: 10001;
            text-align: center;
            font-family: 'Orbitron', sans-serif;
            box-shadow: 0 0 30px rgba(6, 182, 212, 0.2);
            backdrop-filter: blur(15px);
        }
        #ad-choice-popup.open { display: block; animation: fadeIn 0.2s ease; }
        .ad-choice-icon { font-size: 28px; margin-bottom: 6px; }
        .ad-choice-title { color: var(--hud-text-bright); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
        .ad-choice-warning {
            color: #ff8800; font-size: 9px; margin-bottom: 12px;
            padding: 4px 8px; background: rgba(255,136,0,0.1);
            border: 1px solid rgba(255,136,0,0.3); border-radius: 4px;
        }
        .ad-choice-btn {
            display: block; width: 100%; padding: 10px; margin-bottom: 6px;
            border: none; border-radius: 6px; cursor: pointer;
            font-family: 'Share Tech Mono', monospace; font-size: 12px;
            min-height: 44px; touch-action: manipulation;
            transition: transform 0.1s, box-shadow 0.1s;
        }
        .ad-choice-btn:active { transform: scale(0.97); }
        .ad-choice-btn span { pointer-events: none; }
        .ad-choice-btn small { display: block; font-size: 9px; opacity: 0.7; margin-top: 2px; pointer-events: none; }
        .ad-choice-btn.instant {
            background: linear-gradient(135deg, #0a84ff, #0066cc);
            color: #fff; font-weight: 600;
            box-shadow: 0 2px 10px rgba(10, 132, 255, 0.3);
        }
        .ad-choice-btn.capsule {
            background: linear-gradient(135deg, #a855f7, #7c3aed);
            color: #fff;
            box-shadow: 0 2px 10px rgba(168, 85, 247, 0.3);
        }
        .ad-choice-btn.capsule.disabled {
            opacity: 0.4; pointer-events: none;
        }
        .ad-choice-btn.cancel {
            background: transparent; color: #888; font-size: 11px;
            border: 1px solid #444; min-height: 44px;
        }

        /* ★★★ 캡슐 HUD ★★★ */
        #capsule-hud {
            display: none;
            position: absolute;
            top: 8px; right: 60px;
            z-index: var(--z-hud);
            gap: 4px;
            pointer-events: auto;
        }
        .capsule-slot {
            width: 32px; height: 32px;
            background: rgba(8, 12, 24, 0.85);
            border: 1px solid #333;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            opacity: 0.3;
            transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s;
            touch-action: manipulation;
        }
        .capsule-slot .capsule-icon { font-size: 14px; pointer-events: none; }
        .capsule-slot.has-capsule {
            opacity: 1;
            border-color: var(--hud-primary);
            box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
            animation: capsulePulse 2s infinite;
        }
        .capsule-slot.has-capsule:active {
            transform: scale(0.9);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.8);
        }
        @keyframes capsulePulse {
            0%, 100% { box-shadow: 0 0 6px rgba(6, 182, 212, 0.3); }
            50% { box-shadow: 0 0 12px rgba(6, 182, 212, 0.6); }
        }

        /* ★★★ 프로필 패널 display 제어 ★★★ */
        #profile-panel { display: none; }
        #profile-panel.open { display: block; }
        #slide-profile-section {
            cursor: pointer;
            transition: background 0.2s;
            border-radius: 6px;
        }
        #slide-profile-section:active {
            background: rgba(0, 255, 255, 0.15);
        }

        /* ★★★ 모든 팝업/모달 중앙 배치 + 모바일 크기 제한 ★★★ */
        #ssil-mission-panel,
        #daily-mission-modal,
        #ad-rewards-panel,
        #ad-modal-menu,
        #profile-panel,
        #mobile-radio-panel,
        #cockpit-radio,
        #ui-settings-panel,
        .modal-overlay,
        .popup-panel {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            max-height: 80vh !important;
            max-width: 220px !important;
            overflow-y: auto !important;
            font-size: 10px !important;
        }

        /* 모바일 가로모드 - 모든 모달 축소 */
        @media (max-height: 500px) and (orientation: landscape) {
            #ssil-mission-panel,
            #daily-mission-modal .daily-mission-content,
            #ad-modal-menu,
            #mobile-radio-panel,
            #cockpit-radio,
            #ui-settings-panel,
            .custom-modal-box,
            .modal-overlay > div,
            .popup-panel {
                max-height: calc(100dvh - 16px) !important;
                max-width: 200px !important;
                padding: 6px !important;
                overflow-y: auto !important;
                font-size: 9px !important;
            }

            /* 광고 보상 모달 */
            #ad-modal-menu .ad-reward-item {
                padding: 4px !important;
                margin-bottom: 4px !important;
            }
            #ad-modal-menu button {
                padding: 4px !important;
                font-size: 0.65em !important;
            }
            #ad-modal-menu h3 {
                margin-bottom: 5px !important;
                font-size: 0.85em !important;
            }

            /* 모달 내부 컨텐츠 축소 */
            #ssil-mission-panel h2,
            #daily-mission-modal h3,
            .custom-modal-icon {
                font-size: 0.85em !important;
                margin-bottom: 5px !important;
            }

            .custom-modal-message {
                font-size: 10px !important;
                margin-bottom: 8px !important;
            }

            .custom-modal-btn {
                padding: 5px 10px !important;
                font-size: 9px !important;
            }

            /* 미션 테이블 컴팩트 */
            .mission-table th,
            .mission-table td {
                padding: 2px 2px !important;
                font-size: 0.55em !important;
            }
        }

        /* 아주 납작한 화면 (높이 400px 이하) */
        @media (max-height: 400px) {
            #ssil-mission-panel,
            #daily-mission-modal .daily-mission-content,
            #ad-modal-menu,
            #ui-settings-panel,
            .custom-modal-box {
                max-height: calc(100dvh - 12px) !important;
                max-width: 180px !important;
                padding: 5px !important;
                font-size: 8px !important;
            }

            .custom-modal-icon {
                font-size: 16px !important;
                margin-bottom: 3px !important;
            }

            .custom-modal-message {
                font-size: 12px !important;
                margin-bottom: 10px !important;
            }

            .custom-modal-buttons {
                gap: 10px !important;
            }

            .custom-modal-btn {
                padding: 8px 15px !important;
                font-size: 11px !important;
                min-width: 70px !important;
            }
        }

        /* ★★★ 모바일 UI 전체 2배 축소 (가로모드) ★★★ */
        @media (max-width: 1024px) and (orientation: landscape) {
            :root {
                --top-bar-height: 30px;
            }
            /* 상단 바 축소 */
            #top-bar {
                height: 30px !important;
                padding: 2px 6px !important;
                gap: 3px !important;
            }
            #time-bar {
                top: 30px !important;
            }
            .control-group {
                gap: 2px !important;
            }
            .mode-btn {
                padding: 2px 5px !important;
                font-size: 9px !important;
                letter-spacing: 0 !important;
            }
            #lang-select {
                padding: 2px 4px !important;
                font-size: 9px !important;
            }
            #user-area {
                gap: 3px !important;
            }
            #user-coins {
                padding: 2px 5px !important;
                font-size: 8px !important;
            }
            #btn-login, .login-status {
                padding: 2px 5px !important;
                font-size: 9px !important;
            }
            #mobile-time-controls button {
                padding: 2px 4px !important;
                font-size: 9px !important;
            }

            /* 왼쪽 천체 목록 패널 축소 + 잘림 수정 */
            #nav-container {
                top: 54px !important;
                bottom: 5px !important;
                overflow: visible !important;
            }
            #nav-panel {
                width: 100px !important;
                max-height: calc(100dvh - 45px) !important;
                padding: 6px 4px !important;
                gap: 2px !important;
            }
            .nav-header {
                font-size: 9px !important;
                margin-bottom: 3px !important;
                padding-left: 4px !important;
            }
            .nav-item {
                padding: 5px 5px !important;
                font-size: 8px !important;
                min-height: 36px !important;
            }
            .nav-item.satellite {
                padding-left: 10px !important;
                font-size: 9px !important;
            }
            .nav-item .body-icon {
                font-size: 10px !important;
            }
            #nav-toggle {
                width: 32px !important;
                font-size: 9px !important;
                padding: 8px 3px !important;
            }
            #nav-container.closed {
                transform: translateX(-100px) !important;
            }

            /* 오른쪽 행성 미니맵 축소 */
            #spawn-dock {
                top: 54px !important;
                right: 24px !important;
                width: 35px !important;
                max-height: calc(100dvh - 45px) !important;
                padding: 6px 4px !important;
                border-radius: 8px !important;
            }
            .spawn-btn {
                width: 32px !important;
                height: 32px !important;
                border-radius: 5px !important;
                border-width: 1px !important;
            }

            /* 채팅 버튼 축소 */
            #chat-toggle {
                width: 40px !important;
                height: 40px !important;
                font-size: 14px !important;
                bottom: 8px !important;
                left: 8px !important;
            }
            #chat-panel {
                bottom: 45px !important;
                left: 8px !important;
                max-height: calc(100dvh - 60px) !important;
            }

            /* 오른쪽 슬라이드 메뉴 축소 */
            #right-slide-container {
                top: 50% !important;
                transform: translateY(-50%) translateX(calc(100% - 32px)) !important;
                max-height: calc(100dvh - 10px) !important;
            }
            #right-slide-container.open {
                transform: translateY(-50%) translateX(0) !important;
            }
            #right-slide-panel {
                width: 100px !important;
                padding: 6px 5px !important;
                max-height: calc(100dvh - 10px) !important;
                overflow-y: auto !important;
            }
            #right-menu-toggle {
                width: 32px !important;
                height: 50px !important;
                font-size: 11px !important;
                padding: 0 !important;
            }
            #slide-profile-section {
                margin-bottom: 4px !important;
                padding-bottom: 4px !important;
                gap: 6px !important;
            }
            #slide-profile-avatar {
                width: 22px !important;
                height: 22px !important;
                font-size: 11px !important;
            }
            #slide-profile-name {
                font-size: 8px !important;
            }
            #slide-profile-stats {
                font-size: 8px !important;
            }
            .slide-menu-btn {
                padding: 6px 6px !important;
                font-size: 8px !important;
                min-height: 36px !important;
                gap: 5px !important;
                margin-bottom: 2px !important;
            }
            .slide-btn-icon {
                font-size: 10px !important;
            }
            .slide-divider {
                margin: 4px 0 !important;
            }

            /* 하단 버튼들 */
            #board-ship-btn {
                padding: 5px 12px !important;
                font-size: 9px !important;
                bottom: 40px !important;
            }
            #reset-cam {
                padding: 4px 10px !important;
                font-size: 8px !important;
                bottom: 8px !important;
            }
            #msg-box {
                font-size: 9px !important;
                bottom: 50px !important;
            }

            /* 거리 패널 */
            #focus-distance-panel {
                font-size: 8px !important;
                bottom: 8px !important;
                right: 45px !important;
            }

            /* 일일 미션 아이콘 */
            #daily-mission-icon {
                font-size: 14px !important;
                width: 28px !important;
                height: 28px !important;
            }
            #mission-points-display {
                font-size: 8px !important;
                padding: 2px 5px !important;
            }

            /* FPS/성능 표시 */
            #fps-display, .fine-fps {
                font-size: 9px !important;
            }

            /* ★ 도킹 메뉴 모바일 최적화 */
            .docking-menu-btn {
                padding: 10px 16px !important;
                font-size: 11px !important;
                width: 200px !important;
            }
            .docking-menu-title {
                font-size: 9px !important;
            }
            #undock-btn {
                padding: 10px 16px !important;
                font-size: 11px !important;
                width: 200px !important;
            }
            #docking-center-btn {
                padding: 10px 20px !important;
                font-size: 11px !important;
            }

            /* ★ 상점 모달 - 1.3배 확대 (유저 요청) */
            .shop-inner {
                max-width: 380px !important;
                padding: 12px !important;
                font-size: 11px !important;
            }
            .shop-title {
                font-size: 13px !important;
                margin-bottom: 8px !important;
            }
            .shop-coins {
                font-size: 10px !important;
                margin-bottom: 6px !important;
            }
            .shop-tabs {
                gap: 4px !important;
                margin-bottom: 8px !important;
            }
            .shop-tab-btn {
                padding: 5px 10px !important;
                font-size: 9px !important;
                min-height: 40px !important;
            }
            .shop-item {
                padding: 8px !important;
                gap: 8px !important;
            }
            .shop-item-icon { font-size: 20px !important; }
            .shop-item-name { font-size: 10px !important; }
            .shop-item-desc { font-size: 8px !important; }
            .shop-item-action { font-size: 9px !important; }
            .shop-equip-btn, .shop-buy-btn {
                padding: 5px 10px !important;
                font-size: 9px !important;
                min-height: 40px !important;
            }
            .shop-item-list { gap: 6px !important; }
        }

        /* ★★★ 튜토리얼 모달 모바일 축소 ★★★ */
        @media (max-width: 1024px) {
            #tutorial-box {
                max-width: 200px !important;
                padding: 10px !important;
                max-height: calc(100dvh - 40px) !important;
            }
            #tutorial-title {
                font-size: 11px !important;
                margin-bottom: 8px !important;
            }
            #tutorial-content {
                font-size: 9px !important;
                line-height: 1.4 !important;
            }
            #tutorial-content p { margin: 4px 0 !important; }
            #tutorial-content ul { margin: 4px 0 !important; }
            #tutorial-content li { margin: 2px 0 !important; }
            #tutorial-step {
                font-size: 8px !important;
                top: 5px !important;
                right: 8px !important;
            }
            #tutorial-buttons {
                margin-top: 10px !important;
                gap: 8px !important;
            }
            .tutorial-btn {
                padding: 6px 10px !important;
                font-size: 8px !important;
                letter-spacing: 0.5px !important;
            }
            #tutorial-dots {
                margin-top: 8px !important;
            }
            #tutorial-dots .dot {
                width: 6px !important;
                height: 6px !important;
            }
        }

        /* ★★★ 로비 모바일 반응형 ★★★ */
        @media (max-height: 500px) and (orientation: landscape) {
            #lobby-left-panel, #lobby-right-panel { width: 170px; }
            #lobby-top-bar { padding: 4px 10px; height: 36px; }
            .lobby-title { font-size: 12px; }
            #lobby-top-right { font-size: 10px; }
            #lobby-avatar { width: 36px; height: 36px; font-size: 18px; }
            #lobby-nickname { font-size: 11px; }
            .lobby-section-title { font-size: 9px; }
            .lobby-mission-name { font-size: 9px; }
            #lobby-ship-preview { height: 60px; }
            #lobby-ship-name { font-size: 11px; }
            #lobby-bottom-bar { gap: 5px; padding: 6px 10px; }
            .lobby-action-btn { padding: 6px 8px; min-width: 50px; }
            .lobby-btn-icon { font-size: 15px; }
            .lobby-btn-label { font-size: 8px; }
            #lobby-mission-section, #lobby-equip-section { max-height: calc(100dvh - 200px); }
        }
        @media (max-width: 480px) {
            #lobby-left-panel, #lobby-right-panel { width: 140px; }
            .lobby-action-btn { min-width: 44px; padding: 5px 6px; }
            .lobby-btn-label { display: none; }
        }

        /* ★★★ 멀티모드 로딩 오버레이 ★★★ */
        #multi-loading-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(ellipse at center, #0a0e1a 0%, #000005 100%);
            z-index: var(--z-topmost);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: 'Orbitron', 'Noto Sans KR', monospace;
            color: #e0e8ff;
        }
        #multi-loading-overlay.active { display: flex; }

        .loading-logo {
            font-size: 28px;
            letter-spacing: 6px;
            color: #0af;
            text-shadow: 0 0 20px #0af, 0 0 40px #06c;
            margin-bottom: 40px;
            animation: loadingPulse 2s ease-in-out infinite;
        }
        @keyframes loadingPulse {
            0%, 100% { opacity: 1; text-shadow: 0 0 20px #0af, 0 0 40px #06c; }
            50% { opacity: 0.7; text-shadow: 0 0 10px #0af, 0 0 20px #06c; }
        }

        .loading-steps {
            width: 320px;
            max-width: 90vw;
        }
        .loading-step {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
            font-size: 13px;
            color: #556;
            transition: color 0.3s;
        }
        .loading-step.active { color: #0af; }
        .loading-step.done { color: #0f8; }
        .loading-step .step-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #334;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            flex-shrink: 0;
            transition: all 0.3s;
        }
        .loading-step.active .step-icon {
            border-color: #0af;
            box-shadow: 0 0 8px #0af;
            animation: stepSpin 1s linear infinite;
        }
        .loading-step.done .step-icon {
            border-color: #0f8;
            background: #0f8;
            color: #000;
        }
        @keyframes stepSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-gauge-container {
            width: 320px;
            max-width: 90vw;
            height: 6px;
            background: #1a1e2e;
            border-radius: 3px;
            margin-top: 30px;
            overflow: hidden;
            border: 1px solid #223;
        }
        .loading-gauge-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #06c, #0af, #0ff);
            border-radius: 3px;
            transition: width 0.4s ease;
            box-shadow: 0 0 10px #0af;
        }
        .loading-percent {
            margin-top: 10px;
            font-size: 12px;
            color: #668;
            letter-spacing: 3px;
        }

        /* ===== 고급 미션 시스템 스타일 ===== */

        /* 활성 미션 HUD */
        #adv-mission-hud {
            position: fixed;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            z-index: var(--z-warnings, 600);
            display: flex;
            pointer-events: auto;
        }
        .adv-mission-hud-inner {
            background: var(--hud-bg-panel, rgba(8, 12, 24, 0.92));
            border: 1px solid var(--hud-primary-dim, #0891b2);
            border-radius: 6px;
            padding: 6px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Orbitron', monospace;
            font-size: 11px;
            color: var(--hud-text-bright, #fff);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
        }
        #adv-mission-icon { font-size: 18px; }
        #adv-mission-title { color: var(--hud-primary-bright, #22d3ee); font-weight: 600; }
        #adv-mission-timer { color: var(--hud-secondary, #f59e0b); font-family: 'Share Tech Mono', monospace; }
        #adv-mission-objective { color: var(--hud-text-normal, #ddd); font-size: 10px; max-width: 200px; }
        #adv-mission-distance { color: var(--hud-text-dim, #aaa); font-size: 10px; font-family: 'Share Tech Mono', monospace; }
        #adv-mission-abandon {
            background: none; border: 1px solid var(--hud-danger, #ef4444);
            color: var(--hud-danger, #ef4444); border-radius: 3px;
            padding: 2px 6px; cursor: pointer; font-size: 10px;
        }
        #adv-mission-abandon:hover { background: rgba(239, 68, 68, 0.2); }

        /* 고급 미션 카드 */
        .adv-mission-card {
            background: linear-gradient(135deg, rgba(12, 18, 32, 0.9), rgba(20, 30, 50, 0.8));
            border: 1px solid rgba(6, 182, 212, 0.25);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
            transition: border-color 0.3s;
        }
        .adv-mission-card:hover { border-color: rgba(6, 182, 212, 0.6); }
        .adv-mission-card.active-mission { border-color: var(--hud-success, #10b981); box-shadow: 0 0 12px rgba(16, 185, 129, 0.2); }
        .adv-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .adv-card-icon { font-size: 28px; }
        .adv-card-info { flex: 1; }
        .adv-card-title { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 600; color: #fff; }
        .adv-card-diff { font-size: 11px; color: var(--hud-secondary, #f59e0b); margin-top: 2px; }
        .adv-card-category {
            font-size: 9px; text-transform: uppercase; padding: 2px 8px;
            border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 10px;
            color: var(--hud-primary-dim, #0891b2); letter-spacing: 1px;
        }
        .adv-card-body { margin-bottom: 8px; }
        .adv-card-desc { font-size: 11px; color: var(--hud-text-normal, #ddd); line-height: 1.4; margin-bottom: 4px; }
        .adv-card-coords { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--hud-secondary, #f59e0b); }
        .adv-card-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        .adv-card-cp { color: var(--hud-primary, #06b6d4); font-size: 12px; font-weight: 600; }
        .adv-card-coins { color: #ffd700; font-size: 12px; font-weight: 600; }
        .adv-card-rank { font-size: 10px; color: var(--hud-text-dim, #aaa); }
        .adv-card-btn {
            margin-left: auto; padding: 5px 16px;
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(6, 182, 212, 0.1));
            border: 1px solid var(--hud-primary, #06b6d4); color: var(--hud-primary-bright, #22d3ee);
            border-radius: 4px; cursor: pointer; font-family: 'Orbitron', sans-serif;
            font-size: 11px; transition: all 0.2s;
        }
        .adv-card-btn:hover { background: rgba(6, 182, 212, 0.4); }
        .adv-card-active-badge {
            margin-left: auto; padding: 3px 12px;
            background: rgba(16, 185, 129, 0.2); border: 1px solid var(--hud-success, #10b981);
            color: var(--hud-success-bright, #34d399); border-radius: 4px;
            font-size: 10px; font-weight: 600;
        }

        /* 모바일 가로모드 대응 */
        @media (max-height: 500px) {
            .adv-mission-hud-inner { padding: 4px 10px; font-size: 10px; gap: 6px; }
            #adv-mission-icon { font-size: 14px; }
            #adv-mission-objective { max-width: 150px; }
            .adv-mission-card { padding: 8px; margin-bottom: 6px; }
            .adv-card-icon { font-size: 22px; }
            .adv-card-title { font-size: 11px; }
        }

/* ★★★ 공지 모달 ★★★ */
.notice-modal-content {
    max-width: 480px !important;
    width: 94vw;
    max-height: 80vh;
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    background: rgba(8, 12, 24, 0.95) !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.1), inset 0 0 15px rgba(6, 182, 212, 0.03) !important;
    position: relative;
    overflow: hidden;
}
/* ★ 로비 스타일 스캔라인 오버레이 */
.notice-modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(6, 182, 212, 0.012) 3px,
        rgba(6, 182, 212, 0.012) 6px
    );
    pointer-events: none;
    z-index: 1;
}
.notice-modal-content > * {
    position: relative;
    z-index: 2;
}
.notice-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 18px !important;
}
.notice-welcome-msg {
    color: #b8d8f8;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(6, 182, 212, 0.06);
    border-left: 3px solid rgba(6, 182, 212, 0.4);
    border-radius: 4px;
}
.notice-early-msg {
    color: #f0d080;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: rgba(255, 200, 0, 0.05);
    border-left: 3px solid rgba(255, 200, 0, 0.25);
    border-radius: 4px;
}
.notice-section-title {
    color: #06b6d4;
    font-size: 13px;
    font-weight: bold;
    margin: 12px 0 6px;
    letter-spacing: 0.5px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
}
.notice-feature-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.notice-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    border-bottom: 1px solid rgba(6, 182, 212, 0.06);
    font-size: 12.5px;
    color: #ccc;
}
.notice-feature-item.coming {
    color: #889;
    font-style: italic;
}
.notice-feature-item:last-child { border-bottom: none; }
.notice-feature-icon {
    font-size: 16px;
    min-width: 26px;
    text-align: center;
}
.notice-feature-text {
    flex: 1;
    line-height: 1.3;
}
.notice-new-badge {
    background: #ff3355;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    animation: newBadgePulse 1.5s infinite;
}
@keyframes newBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.notice-feedback-section {
    margin-top: 4px;
}
.notice-feedback-label {
    font-size: 13px;
    color: #88ccff;
    margin-bottom: 6px;
}
#notice-feedback {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(0, 200, 255, 0.3);
    border-radius: 8px;
    color: #eee;
    font-size: 12px;
    padding: 8px 10px;
    resize: none;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s;
}
#notice-feedback:focus {
    border-color: rgba(0, 200, 255, 0.7);
}
.notice-feedback-btn {
    margin-top: 6px;
    width: 100%;
    padding: 8px;
    background: linear-gradient(135deg, #0066aa, #0088cc);
    border: 1px solid rgba(0, 200, 255, 0.4);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.3s;
}
.notice-feedback-btn:active {
    background: linear-gradient(135deg, #004488, #0066aa);
}
#notice-feedback-result {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    color: #44ffaa;
    padding: 6px;
}
.notice-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid rgba(6, 182, 212, 0.2);
}
.notice-dont-show-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
    cursor: pointer;
}
.notice-dont-show-label input[type="checkbox"] {
    accent-color: #0088cc;
    width: 14px;
    height: 14px;
}
.notice-confirm-btn {
    padding: 8px 24px;
    background: linear-gradient(135deg, #0066aa, #0088cc);
    border: 1px solid rgba(0, 200, 255, 0.4);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    touch-action: manipulation;
}

/* ★★★ 관리자 패널 ★★★ */
.admin-panel-content {
    max-width: 500px !important;
    width: 95vw;
    max-height: 85vh;
}
.admin-panel-body {
    max-height: calc(85vh - 120px);
    overflow-y: auto;
    padding: 10px 16px !important;
}
.admin-section-title {
    font-size: 14px;
    color: #88ccff;
    margin-bottom: 10px;
    font-weight: bold;
}
.admin-feedback-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-feedback-row {
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 200, 255, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-feedback-date {
    font-size: 10px;
    color: #667;
}
.admin-feedback-text {
    font-size: 12px;
    color: #ccc;
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-feedback-delete {
    align-self: flex-end;
    background: rgba(255, 50, 50, 0.2);
    border: 1px solid rgba(255, 50, 50, 0.4);
    border-radius: 4px;
    color: #ff5555;
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
}
.admin-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 200, 255, 0.1);
}
#admin-feedback-count {
    font-size: 11px;
    color: #888;
}
.admin-clear-btn {
    background: rgba(255, 50, 50, 0.2);
    border: 1px solid rgba(255, 50, 50, 0.4);
    border-radius: 6px;
    color: #ff5555;
    font-size: 11px;
    padding: 4px 12px;
    cursor: pointer;
}
.admin-no-feedback {
    text-align: center;
    color: #666;
    font-size: 12px;
    padding: 20px;
}

/* ★ 관리자 오디오 볼륨 섹션 */
.admin-audio-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.admin-audio-row {
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 200, 255, 0.12);
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-audio-row.is-bgm {
    border-left: 3px solid rgba(0, 200, 255, 0.4);
}
.admin-audio-row.is-sfx {
    border-left: 3px solid rgba(255, 180, 0, 0.4);
}
.admin-audio-row.no-url {
    opacity: 0.35;
}
.admin-audio-name {
    font-size: 11px;
    color: #aac;
    min-width: 100px;
    flex-shrink: 0;
}
.admin-audio-name .audio-type-tag {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
}
.admin-audio-name .tag-bgm {
    background: rgba(0, 150, 255, 0.25);
    color: #6bf;
}
.admin-audio-name .tag-sfx {
    background: rgba(255, 160, 0, 0.25);
    color: #fb4;
}
.admin-audio-vol-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-audio-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    outline: none;
}
.admin-audio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00ccff;
    cursor: pointer;
    border: 2px solid rgba(0,0,0,0.3);
}
.admin-audio-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00ccff;
    cursor: pointer;
    border: 2px solid rgba(0,0,0,0.3);
}
.admin-audio-vol-val {
    font-size: 10px;
    color: #88ccff;
    min-width: 28px;
    text-align: right;
}
.admin-audio-preview {
    background: rgba(0, 200, 255, 0.15);
    border: 1px solid rgba(0, 200, 255, 0.3);
    border-radius: 4px;
    color: #0cf;
    font-size: 11px;
    padding: 2px 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.admin-audio-preview:hover {
    background: rgba(0, 200, 255, 0.3);
}
.admin-audio-preview:disabled {
    opacity: 0.3;
    cursor: default;
}
.admin-audio-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.admin-audio-save-btn {
    background: rgba(0, 200, 100, 0.2);
    border: 1px solid rgba(0, 200, 100, 0.4);
    border-radius: 6px;
    color: #0c8;
    font-size: 11px;
    padding: 5px 14px;
    cursor: pointer;
    flex: 1;
}
.admin-audio-save-btn:hover { background: rgba(0, 200, 100, 0.35); }
.admin-audio-stop-btn {
    background: rgba(255, 100, 50, 0.2);
    border: 1px solid rgba(255, 100, 50, 0.4);
    border-radius: 6px;
    color: #f85;
    font-size: 11px;
    padding: 5px 14px;
    cursor: pointer;
}

/* 모바일 가로모드 */
@media (max-height: 500px) {
    .notice-modal-content { max-height: calc(100dvh - 16px) !important; display: flex; flex-direction: column; }
    .notice-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px !important; }
    .notice-feature-item { padding: 5px 4px; font-size: 11px; }
    .notice-feature-icon { font-size: 14px; min-width: 22px; }
    #notice-feedback { font-size: 11px; }
    .admin-panel-content { max-height: calc(100dvh - 16px) !important; }
}

/* ★★★ 연료 소진 추락 오버레이 ★★★ */
#fuel-crash-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9998;
    transition: opacity 0.3s;
}

/* ★★★ 2주 접속 보상 팝업 ★★★ */
#daily-reward-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 10001; /* 인트로(10000)보다 위 */
    align-items: center;
    justify-content: center;
}
#daily-reward-overlay.open {
    display: flex;
}
#daily-reward-panel {
    background: linear-gradient(160deg, #0a0a1a 0%, #0d1a2e 100%);
    border: 1px solid var(--hud-primary-dim, #007a7a);
    border-radius: 16px;
    padding: 24px 20px 20px;
    width: min(360px, 90vw);
    max-height: 90dvh;
    overflow-y: auto;
    color: #e0f7f7;
    font-family: 'Orbitron', monospace, sans-serif;
    text-align: center;
    box-shadow: 0 0 40px rgba(0,255,255,0.15);
}
#daily-reward-panel h2 {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: var(--hud-primary, #00ffff);
    letter-spacing: 1px;
}
#daily-reward-panel .dr-sub {
    font-size: 0.72rem;
    color: #7ae7e7;
    margin-bottom: 18px;
}
/* 14일 달력 그리드 */
.dr-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 18px;
}
.dr-cell {
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    border: 1px solid #1a3a3a;
    background: #060f1a;
    transition: all 0.2s;
    position: relative;
    gap: 2px;
}
.dr-cell .dr-day {
    font-size: 0.55rem;
    color: #446a6a;
}
.dr-cell .dr-coin {
    font-size: 0.58rem;
    color: #558888;
    line-height: 1;
}
/* 완료한 날 */
.dr-cell.done {
    background: #062020;
    border-color: #1a5a5a;
}
.dr-cell.done::after {
    content: '✓';
    position: absolute;
    font-size: 1rem;
    color: #00ffcc;
    font-weight: bold;
}
/* 오늘 (수령 대기) */
.dr-cell.today {
    background: linear-gradient(135deg, #001f3f 0%, #003a3a 100%);
    border-color: var(--hud-primary, #00ffff);
    box-shadow: 0 0 10px rgba(0,255,255,0.3);
}
.dr-cell.today .dr-day { color: #00ffcc; }
.dr-cell.today .dr-coin { color: #00ffff; font-weight: bold; font-size: 0.65rem; }
/* 오늘 (건너뜀 - 광고 이어가기) */
.dr-cell.bridge {
    background: #1a1200;
    border-color: #b8860b;
    box-shadow: 0 0 8px rgba(255,200,0,0.2);
}
.dr-cell.bridge .dr-day { color: #c8a000; }
/* 14일 (레이서 아이콘) */
.dr-cell.racer .dr-coin { display: none; }
.dr-cell.racer::before {
    content: '🏎️';
    font-size: 1rem;
    position: absolute;
}
.dr-cell.racer.done::before { content: ''; }
/* 보상 표시 영역 */
.dr-reward-info {
    background: rgba(0,255,255,0.06);
    border: 1px solid rgba(0,255,255,0.2);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
}
.dr-reward-info .dr-reward-label {
    font-size: 0.7rem;
    color: #7ae7e7;
    margin-bottom: 4px;
}
.dr-reward-info .dr-reward-coins {
    font-size: 1.5rem;
    color: #ffd700;
    font-weight: bold;
    letter-spacing: 1px;
}
/* 버튼 영역 */
.dr-btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dr-btn-primary {
    background: linear-gradient(90deg, #006060, #00a0a0);
    border: 1px solid var(--hud-primary, #00ffff);
    color: #fff;
    border-radius: 8px;
    padding: 12px;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.dr-btn-primary:hover { background: linear-gradient(90deg, #008080, #00c0c0); }
.dr-btn-secondary {
    background: transparent;
    border: 1px solid #1a5a5a;
    color: #558888;
    border-radius: 8px;
    padding: 8px;
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.dr-btn-secondary:hover { border-color: #558888; color: #7ab8b8; }

/* ========== SCALE EXPERIENCE MODE ========== */
/* ========== Scale Mode v2 - Zone UI ========== */
#scale-throttle-display {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    border: 1px solid rgba(0,255,180,0.3);
    border-radius: 8px;
    padding: 8px 18px;
    z-index: 10000;
    text-align: center;
    min-width: 200px;
    backdrop-filter: blur(8px);
    font-family: 'Orbitron', monospace;
    pointer-events: none;
}
.scale-throttle-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.scale-throttle-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.2s ease, background 0.3s ease;
}
.scale-throttle-value {
    color: #00ffbb;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0,255,187,0.5);
}
.scale-throttle-hint {
    color: #556;
    font-size: 8px;
    margin-top: 2px;
}

#scale-info-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(0,200,255,0.3);
    border-radius: 8px;
    padding: 12px 16px;
    z-index: 10000;
    min-width: 180px;
    max-width: 280px;
    backdrop-filter: blur(8px);
    font-family: 'Orbitron', monospace;
}
.scale-info-name {
    color: #00ccff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 0 0 8px rgba(0,200,255,0.4);
}
.scale-info-size {
    color: #aaddff;
    font-size: 12px;
    margin-bottom: 3px;
}
.scale-info-comp {
    color: #ffcc44;
    font-size: 11px;
    margin-bottom: 3px;
}
.scale-info-desc {
    color: #8899aa;
    font-size: 11px;
    line-height: 1.3;
}

/* Zone navigation */
#scale-zone-nav {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 10001;
    font-family: 'Orbitron', monospace;
}
.scale-zone-btn {
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.15);
    color: #889;
    padding: 6px 12px;
    font-size: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap;
}
.scale-zone-btn:hover {
    border-color: rgba(0,255,180,0.4);
    color: #ccc;
}
.scale-zone-btn.active {
    background: rgba(0,100,80,0.4);
    border-color: #00ffbb;
    color: #00ffbb;
    text-shadow: 0 0 8px rgba(0,255,180,0.5);
}

/* Zone transition overlay */
#scale-zone-transition {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* 모바일 대응 */
@media (max-height: 500px) {
    #scale-throttle-display {
        bottom: 60px;
        padding: 5px 12px;
        min-width: 160px;
    }
    .scale-throttle-value { font-size: 13px; }
    #scale-info-panel {
        top: 50px;
        right: 8px;
        padding: 8px 10px;
        min-width: 140px;
    }
    .scale-info-name { font-size: 12px; }
    #scale-zone-nav { top: 35px; }
    .scale-zone-btn { padding: 4px 8px; font-size: 8px; }
}

/* ========== 릴 드라이브 스테이션 UI ========== */

/* 장력 게이지 */
#reel-tension-gauge {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 24px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(0,200,255,0.3);
    border-radius: 4px;
    z-index: 1200;
    display: none;
    overflow: hidden;
    font-family: 'Share Tech Mono', monospace;
}
#reel-tension-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0066ff, #00ccff, #ff8800, #ff2200);
    transition: width 0.15s ease;
    border-radius: 3px;
}
#reel-tension-gauge.glow #reel-tension-fill {
    box-shadow: 0 0 12px rgba(255,100,0,0.6), 0 0 24px rgba(255,100,0,0.3);
}
#reel-tension-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 11px;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
    white-space: nowrap;
}

/* 카운트다운 */
#reel-countdown {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 120px;
    font-family: 'Share Tech Mono', monospace;
    color: #00ccff;
    text-shadow: 0 0 30px rgba(0,200,255,0.6), 0 0 60px rgba(0,200,255,0.3);
    z-index: 1300;
    display: none;
    pointer-events: none;
    animation: reel-countdown-pulse 1s ease-in-out;
}
@keyframes reel-countdown-pulse {
    0% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }
    30% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* 목적지 선택 모달 */
#reel-dest-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 1250;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: 'Share Tech Mono', monospace;
}
#reel-dest-modal.open { display: flex; }
.reel-dest-panel {
    background: linear-gradient(135deg, rgba(10,15,30,0.95), rgba(5,10,20,0.98));
    border: 1px solid rgba(0,200,255,0.3);
    border-radius: 8px;
    padding: 24px;
    max-width: 380px;
    width: 90%;
    max-height: 70vh;
    overflow-y: auto;
}
.reel-dest-panel h3 {
    color: #00ccff;
    font-size: 14px;
    margin: 0 0 16px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.reel-dest-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin: 4px 0;
    border: 1px solid rgba(100,100,150,0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    color: #aab;
}
.reel-dest-item:hover {
    border-color: rgba(0,200,255,0.4);
    background: rgba(0,200,255,0.05);
}
.reel-dest-item.selected {
    border-color: #00ccff;
    background: rgba(0,200,255,0.1);
    color: #fff;
    box-shadow: 0 0 8px rgba(0,200,255,0.2);
}
.reel-dest-icon { font-size: 20px; margin-right: 10px; }
.reel-dest-name { flex: 1; font-size: 13px; }
.reel-dest-dist { font-size: 10px; color: #667; }
.reel-dest-confirm {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    background: rgba(0,200,255,0.15);
    border: 1px solid #00ccff;
    color: #00ccff;
    font-family: inherit;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s;
}
.reel-dest-confirm:hover {
    background: rgba(0,200,255,0.25);
}
.reel-dest-confirm:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ARIA 릴드라이브 소개 팝업 */
#reel-intro-popup {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,15,30,0.95);
    border: 1px solid rgba(0,200,255,0.3);
    border-radius: 8px;
    padding: 12px 16px;
    z-index: 1150;
    display: none;
    max-width: 360px;
    width: 85%;
    font-family: 'Share Tech Mono', monospace;
}
#reel-intro-popup .aria-msg {
    color: #88ccee;
    font-size: 11px;
    margin-bottom: 10px;
    line-height: 1.4;
}
#reel-intro-popup .btn-row {
    display: flex;
    gap: 6px;
    justify-content: center;
}
#reel-intro-popup .btn-row button {
    padding: 6px 12px;
    font-size: 10px;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(0,200,255,0.4);
    background: rgba(0,200,255,0.1);
    color: #00ccff;
    transition: all 0.2s;
    touch-action: manipulation;
    min-height: 36px;
}
#reel-intro-popup .btn-row button:hover {
    background: rgba(0,200,255,0.2);
}

/* 릴드라이브 설명 모달 */
#reel-lore-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 1300;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: 'Share Tech Mono', monospace;
}
#reel-lore-modal.open { display: flex; }
.reel-lore-panel {
    background: linear-gradient(135deg, rgba(5,10,25,0.98), rgba(10,20,40,0.95));
    border: 1px solid rgba(0,200,255,0.2);
    border-radius: 8px;
    padding: 20px 16px;
    max-width: 500px;
    width: 92%;
    max-height: 85dvh;
    overflow-y: auto;
    color: #aab;
    font-size: 12px;
    line-height: 1.8;
    -webkit-overflow-scrolling: touch;
}
.reel-lore-panel h2 {
    color: #00ccff;
    font-size: 16px;
    margin: 0 0 16px;
    text-align: center;
    letter-spacing: 3px;
}
.reel-lore-panel .lore-section {
    margin: 12px 0;
    padding: 10px;
    border-left: 2px solid rgba(0,200,255,0.2);
}
.reel-lore-panel .lore-section h4 {
    color: #00ccff;
    font-size: 11px;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.reel-lore-panel .lore-quote {
    margin: 16px 0;
    padding: 12px 16px;
    border: 1px solid rgba(255,136,0,0.3);
    background: rgba(255,136,0,0.05);
    border-radius: 4px;
    color: #ff9944;
    font-style: italic;
    font-size: 11px;
}
.reel-lore-close {
    display: block;
    margin: 16px auto 0;
    padding: 8px 24px;
    background: rgba(0,200,255,0.1);
    border: 1px solid rgba(0,200,255,0.3);
    color: #00ccff;
    font-family: inherit;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* 릴드라이브 탑승 버튼 */
#reel-board-btn {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 24px;
    background: rgba(0,200,255,0.15);
    border: 1px solid #00ccff;
    color: #00ccff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1100;
    display: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    touch-action: manipulation;
    min-height: 44px;
    animation: reel-board-pulse 2s ease-in-out infinite;
}
@keyframes reel-board-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0,200,255,0.2); }
    50% { box-shadow: 0 0 16px rgba(0,200,255,0.5); }
}

/* 모바일 대응 */
@media (max-width: 900px) {
    #reel-tension-gauge { width: 180px; bottom: 50px; height: 20px; }
    #reel-countdown { font-size: 72px; }
    .reel-dest-panel { padding: 12px; max-height: 85dvh; }
    .reel-dest-item { padding: 8px 10px; }
    .reel-dest-icon { font-size: 16px; }
    .reel-dest-name { font-size: 12px; }
    #reel-board-btn { bottom: 70px; font-size: 11px; padding: 8px 16px; }
    #reel-intro-popup { bottom: 52px; padding: 10px 12px; max-width: 320px; }
    #reel-intro-popup .aria-msg { font-size: 10px; margin-bottom: 8px; }
    .reel-lore-panel { padding: 14px 12px; max-height: 90dvh; font-size: 11px; }
    .reel-lore-panel h2 { font-size: 14px; }
}
/* 가로모드 (높이 부족) 대응 */
@media (max-height: 500px) {
    #reel-tension-gauge { bottom: 40px; height: 18px; width: 160px; }
    #reel-countdown { font-size: 60px; }
    .reel-dest-panel { max-height: 90dvh; padding: 10px; }
    .reel-dest-item { padding: 6px 8px; margin: 2px 0; }
    #reel-board-btn { bottom: 60px; padding: 6px 14px; font-size: 10px; min-height: 36px; }
    #reel-intro-popup { bottom: 44px; padding: 8px 10px; }
    #reel-intro-popup .aria-msg { font-size: 9px; }
    #reel-intro-popup .btn-row button { padding: 4px 10px; font-size: 9px; min-height: 32px; }
    .reel-lore-panel { max-height: 92dvh; padding: 10px 8px; font-size: 10px; line-height: 1.6; }
}