/* =============================================
   AMA - Premium Cryptocurrency Platform
   Luxury Dark Theme Design System
   ============================================= */

/* ─── CSS Variables ─── */
:root {
    /* Background System - Deep layered */
    --bg-primary: #06090f;
    --bg-secondary: #0a0e18;
    --bg-card: #0f1520;
    --bg-card-hover: #151c2a;
    --bg-input: #141b28;
    --bg-elevated: #181f2e;
    --border: #1e2a3a;
    --border-light: #253345;
    --border-glow: rgba(232, 168, 56, 0.12);

    /* Typography */
    --text-primary: #edf2f7;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Journal-local muted label token (>=4.5:1 on journal surfaces, both themes) */
    --journal-label: #838e9e;

    /* Accent - Refined Gold */
    --accent: #9ca3af;
    --accent-hover: #94a1ac;
    --accent-glow: rgba(232, 168, 56, 0.25);
    --accent-soft: rgba(232, 168, 56, 0.06);
    --accent-bg: rgba(232, 168, 56, 0.08);

    /* Status Colors - Refined */
    --green: #10b981;
    --green-bg: rgba(16, 185, 129, 0.1);
    --red: #ef4444;
    --red-bg: rgba(239, 68, 68, 0.08);
    --blue: #3b82f6;
    --yellow: #c9ced6;
    --purple: #8b5cf6;

    /* Layout */
    --nav-height: 64px;
    --ticker-height: 38px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Shadows - Premium layered */
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-premium: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --glow: 0 0 24px rgba(232, 168, 56, 0.12);
    --glow-strong: 0 0 40px rgba(200, 208, 220, 0.30), 0 0 8px rgba(232, 168, 56, 0.1);

    /* Glassmorphism - Optimized (blur only on nav/modals) */
    --glass-bg: rgba(15, 21, 32, 0.95);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-blur: none;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* Transition */
    --ease-premium: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    --transition-smooth: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* ─── Light Theme ─── */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fb;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f7fa;
    --bg-input: #f5f7fa;
    --bg-elevated: #ffffff;
    --border: #c4cdd8;
    --border-light: #a8b5c4;
    --border-glow: rgba(200, 208, 220, 0.25);

    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;

    /* Journal-local muted label token (>=4.5:1 on light journal surfaces) */
    --journal-label: #5f6b7f;

    --accent: #94a1ac;
    --accent-hover: #c0841f;
    --accent-glow: rgba(212, 149, 46, 0.25);
    --accent-soft: rgba(212, 149, 46, 0.06);
    --accent-bg: rgba(212, 149, 46, 0.08);

    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-premium: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --glow: 0 0 16px rgba(212, 149, 46, 0.08);
    --glow-strong: 0 0 24px rgba(212, 149, 46, 0.12);

    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-blur: none;
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .price-ticker {
    background: #f8f9fb !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .main-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .main-nav.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .hero-section {
    background: linear-gradient(135deg, #f0f4f8 0%, #e8edf5 50%, #f5f0e8 100%) !important;
}
[data-theme="light"] .hero-section::before { opacity: 0 !important; }
[data-theme="light"] .hero-section::after { opacity: 0 !important; }
[data-theme="light"] .hero-bg-chart { opacity: 0.08 !important; }
[data-theme="light"] .dropdown-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .dropdown-menu a { color: var(--text-primary) !important; }
[data-theme="light"] .dropdown-menu a:hover { background: rgba(0, 0, 0, 0.04) !important; }
[data-theme="light"] .main-footer {
    background: #1a202c !important;
    color: #e2e8f0 !important;
}
[data-theme="light"] .main-footer a { color: #cbd5e1 !important; }
[data-theme="light"] .main-footer a:hover { color: var(--accent) !important; }
/* 알림 스크롤바 커스텀 */
#notiList::-webkit-scrollbar { width: 5px; }
#notiList::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 5px; margin: 4px 0; }
#notiList::-webkit-scrollbar-thumb { background: rgba(180,190,205,0.25); border-radius: 5px; transition: background 0.2s; }
#notiList::-webkit-scrollbar-thumb:hover { background: rgba(180,190,205,0.45); }
#notiList { scrollbar-width: thin; scrollbar-color: rgba(180,190,205,0.25) transparent; }
[data-theme="light"] #notiList::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); }
[data-theme="light"] #notiList::-webkit-scrollbar-thumb { background: rgba(180,190,205,0.2); }
[data-theme="light"] #notiList::-webkit-scrollbar-thumb:hover { background: rgba(180,190,205,0.4); }
[data-theme="light"] #notiList { scrollbar-color: rgba(180,190,205,0.2) transparent; }
#notiPrefList::-webkit-scrollbar { width: 4px; }
#notiPrefList::-webkit-scrollbar-track { background: transparent; }
#notiPrefList::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

[data-theme="light"] .noti-dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .info-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .price-card-mini {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .hero-price-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] canvas { filter: none; }

/* ─── Light Theme: Trade Page ─── */
[data-theme="light"] .trade-page { background: #f5f7fa; }
[data-theme="light"] .trade-chart-col { background: #ffffff; }
[data-theme="light"] .symbol-top-bar { background: #ffffff; border-bottom-color: var(--border); }
[data-theme="light"] .trade-body { border-bottom-color: var(--border); }
[data-theme="light"] .trade-chart-col { border-right-color: var(--border); }
[data-theme="light"] .trade-chart-col.expanded { background: #ffffff; }
[data-theme="light"] .chart-toolbar { background: #ffffff; border-bottom-color: var(--border); }
[data-theme="light"] .ct-btn:hover, [data-theme="light"] .ct-ind:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .ct-btn.active { color: var(--accent); background: rgba(160,170,185,0.1); }
[data-theme="light"] .ct-ind.active { color: #2979ff; background: rgba(41,121,255,0.08); }
[data-theme="light"] .of-input { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .of-input:focus { border-color: var(--accent); }
[data-theme="light"] .pos-level-bar { background: #f8f9fb; border-bottom-color: var(--border); }
[data-theme="light"] .chart-mode-btn { border-color: var(--border); color: var(--text-muted); }
[data-theme="light"] .chart-mode-btn.active { background: rgba(160,170,185,0.1); color: var(--accent); border-color: rgba(160,170,185,0.3); }
[data-theme="light"] .chart-mode-btn:hover:not(.active) { color: var(--text-primary); }
[data-theme="light"] .lw-interval-bar { background: #ffffff; border-bottom-color: var(--border); }
[data-theme="light"] .lw-interval-btn.active { background: rgba(160,170,185,0.1); color: var(--accent); }
[data-theme="light"] .lw-interval-btn:hover:not(.active) { color: var(--text-primary); }
[data-theme="light"] .lw-draw-btn:hover:not(.active) { color: var(--text-primary); background: rgba(0,0,0,0.04); }
[data-theme="light"] .draw-color-picker { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .lw-draw-sep { background: var(--border); }

/* Light: Order Book & Right Panel */
[data-theme="light"] .ob-col-header, [data-theme="light"] .rt-col-header { background: #f5f7fa; border-color: var(--border); }
[data-theme="light"] .ob-row:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .ob-mid-price { background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .ob-header-row { background: #f5f7fa; border-color: var(--border); }

/* Light: Order Form */
[data-theme="light"] .order-form { background: #ffffff; }
[data-theme="light"] .order-account { background: #f8f9fb; border-color: var(--border); }
[data-theme="light"] .order-type-btn { color: var(--text-muted); }
[data-theme="light"] .order-type-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="light"] .confirm-box { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .confirm-title { color: var(--text-primary); }
[data-theme="light"] .confirm-body { color: var(--text-secondary); }
[data-theme="light"] .confirm-body .cb-val { color: var(--text-primary); }
[data-theme="light"] .confirm-body .cb-row { border-bottom-color: var(--border); }
[data-theme="light"] .confirm-cancel { background: rgba(0,0,0,0.04); color: var(--text-secondary); }
[data-theme="light"] .confirm-cancel:hover { background: rgba(0,0,0,0.08); color: var(--text-primary); }
[data-theme="light"] .refill-btn { border-color: rgba(160,170,185,0.25); background: rgba(160,170,185,0.06); }
[data-theme="light"] .refill-btn:hover { background: rgba(160,170,185,0.1); }

/* Light: Position Table */
[data-theme="light"] .pos-table th { color: var(--text-muted); }
[data-theme="light"] .pos-table td { color: var(--text-primary); }

/* Light: Popups & Modals on Trade */
[data-theme="light"] .lev-popup { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .tpsl-popup { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .margin-mode-popup { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .mmp-warn { background: rgba(245,158,11,0.06); color: var(--text-secondary); }
[data-theme="light"] .mmp-opt { background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .mmp-opt:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .tut-tooltip { background: #ffffff; border-color: rgba(160,170,185,0.25); }
[data-theme="light"] .tut-tooltip p { color: var(--text-secondary); }
[data-theme="light"] .tut-skip { background: rgba(0,0,0,0.04); color: var(--text-secondary); }
[data-theme="light"] .upgrade-box { background: #ffffff; border-color: rgba(160,170,185,0.15); }
[data-theme="light"] .upgrade-box h3 { color: var(--text-primary); }
[data-theme="light"] .upgrade-box p { color: var(--text-secondary); }
[data-theme="light"] .btn-upgrade-close { background: rgba(0,0,0,0.04); color: var(--text-secondary); }

/* Light: Symbol Dropdown */
[data-theme="light"] .symbol-dropdown { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .dd-coin:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .dd-coin.active { background: rgba(160,170,185,0.06); }

/* ─── Light Theme: News Room (inline CSS overrides) ─── */
[data-theme="light"] .nr-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .nr-card:hover { background: #f8f9fb; border-color: var(--border-light); }
[data-theme="light"] .nr-glass { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .nr-tabs { background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .nr-sort-btn { border-color: var(--border); }
[data-theme="light"] .nr-sort-btn.active { border-color: rgba(91,154,255,0.3); background: rgba(91,154,255,0.06); }
[data-theme="light"] .nr-modal { background: rgba(255,255,255,0.98) !important; border-color: var(--border); }
[data-theme="light"] .nr-comment-input { background: rgba(0,0,0,0.03); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .nr-comment-input:focus { border-color: rgba(41,121,255,0.4); }
[data-theme="light"] .nr-action-btn { background: rgba(0,0,0,0.03); border-color: var(--border); }
[data-theme="light"] .nr-action-btn:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .nr-report-box { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .nr-report-box textarea { background: rgba(0,0,0,0.03); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .nr-report-cancel { background: rgba(0,0,0,0.04); }
[data-theme="light"] .nr-card-thumb { background: rgba(0,0,0,0.03); }
[data-theme="light"] .nr-hot-item { border-bottom-color: var(--border); }
[data-theme="light"] .nr-pag-btn { background: rgba(0,0,0,0.03); border-color: var(--border); }
[data-theme="light"] .nr-pag-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
[data-theme="light"] .nr-pag-btn.active { background: rgba(41,121,255,0.1); border-color: rgba(41,121,255,0.3); color: #2979ff; }
[data-theme="light"] .nr-comment { border-bottom-color: var(--border); }
[data-theme="light"] .nr-comment-avatar-ph { background: rgba(0,0,0,0.05); }
[data-theme="light"] .nr-modal-img-ph { background: linear-gradient(135deg,rgba(91,154,255,0.06),rgba(180,190,205,0.06)); }
[data-theme="light"] .nr-modal-close { background: rgba(0,0,0,0.1); color: #333; }

/* ─── Light Theme: Community ─── */
[data-theme="light"] .category-card, [data-theme="light"] .community-stats-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .post-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .post-card:hover { background: #f8f9fb; border-color: var(--border-light); }
[data-theme="light"] .write-modal-content { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .write-modal-content input,
[data-theme="light"] .write-modal-content textarea,
[data-theme="light"] .write-modal-content select { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .post-detail-modal { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .comment-input-wrap input { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }

/* ─── Light Theme: Mypage ─── */
[data-theme="light"] .mp-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .mp-card:hover { border-color: var(--border-light); }
[data-theme="light"] .mp-stat-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .mp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="light"] .mp-avatar-circle { border-color: var(--border); }

/* ─── Light Theme: Plans/Subscription ─── */
[data-theme="light"] .plan-card { background: linear-gradient(165deg, rgba(255,255,255,0.95) 0%, rgba(248,249,251,0.9) 100%); border-color: rgba(0,0,0,0.08); backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9); }
[data-theme="light"] .plan-card:hover { border-color: var(--border-light); box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
[data-theme="light"] .plan-card.featured { border-color: var(--accent); }
[data-theme="light"] .plan-card.popular { border-color: rgba(160,170,185,0.4); box-shadow: 0 4px 16px rgba(0,0,0,0.05), 0 0 12px rgba(160,170,185,0.06); }
[data-theme="light"] .plan-card.premium-card { border-color: rgba(170,0,255,0.25); box-shadow: 0 4px 16px rgba(0,0,0,0.05), 0 0 12px rgba(170,0,255,0.04); }
[data-theme="light"] .plan-card-right { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .plan-period-btn { color: var(--text-muted); }
[data-theme="light"] .plan-period-btn.active { background: rgba(0,0,0,0.06) !important; color: var(--text-primary) !important; }
[data-theme="light"] .plans-hero h1 { color: var(--text-primary); }
[data-theme="light"] .plans-hero p { color: var(--text-secondary); }
[data-theme="light"] .plan-features li { color: var(--text-secondary); }
[data-theme="light"] .plan-features li .feat-limit { color: var(--text-primary); }
[data-theme="light"] .plan-price-amount { color: var(--text-primary); }
[data-theme="light"] .plan-card .plan-tier-badge { color: var(--text-primary); }
[data-theme="light"] .faq-acc-toggle { color: var(--text-primary); }
[data-theme="light"] .faq-acc-answer p { color: var(--text-secondary); }
[data-theme="light"] .faq-acc-item { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] #purchaseCrownImg { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12)) !important; }
[data-theme="light"] .plan-card img[src*="crown"] { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.1)) !important; }

/* ─── Light Theme: Admin ─── */
[data-theme="light"] .admin-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .admin-tab.active { background: rgba(160,170,185,0.08); }
[data-theme="light"] .admin-table th { background: #f5f7fa; color: var(--text-muted); }
[data-theme="light"] .admin-table td { border-bottom-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .admin-panel { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .admin-panel-header { border-bottom-color: var(--border); }
[data-theme="light"] .admin-sidebar { background: #ffffff; border-right-color: var(--border); }
[data-theme="light"] .admin-nav-item { color: var(--text-secondary); }
[data-theme="light"] .admin-nav-item:hover { background: rgba(0,0,0,0.03); color: var(--text-primary); }
[data-theme="light"] .admin-nav-item.active { background: rgba(160,170,185,0.08); color: var(--accent); }
[data-theme="light"] .admin-section-header h2 { color: var(--text-primary); }
[data-theme="light"] .admin-section-subtitle { color: var(--text-muted); }
[data-theme="light"] .admin-search-input { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .admin-search-input:focus { border-color: var(--accent); }
[data-theme="light"] .btn-action { border-color: var(--border); }
[data-theme="light"] .status-badge { border-color: var(--border); }
[data-theme="light"] .admin-pay-stat { background: #f8f9fb; border-color: var(--border); }
[data-theme="light"] .admin-pay-stat-label { color: var(--text-muted); }
[data-theme="light"] .admin-grant-sub { color: var(--text-primary); }

/* ─── Light Theme: Analysis ─── */
[data-theme="light"] .analysis-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .ax { color: var(--text-primary); }
[data-theme="light"] .ax-glass { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .ax-glass:hover { border-color: var(--border-light); }
[data-theme="light"] .ax-glass-h { color: var(--text-secondary); border-bottom-color: var(--border); }
[data-theme="light"] .ax-glass-h .sub { color: var(--text-muted); }
[data-theme="light"] .ax-particles .ax-particle { opacity: 0.08; }
[data-theme="light"] .ax-top { border-bottom-color: var(--border); }
[data-theme="light"] .ax-title h1 { color: var(--text-primary); }
[data-theme="light"] .ax-status { color: var(--text-muted); }
[data-theme="light"] .ax-hero { background: linear-gradient(135deg, rgba(91,154,255,0.05) 0%, #fff 40%, #fff 100%) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .ax-hero-left h2 { color: #1a1a2e; }
[data-theme="light"] .ax-hero-left p { color: #4b5563; }
[data-theme="light"] .ax-hero-feat { background: rgba(160,170,185,0.06); border-color: rgba(160,170,185,0.15); color: #374151; }
[data-theme="light"] .ax-hero-orb { background: none !important; border: none !important; }
[data-theme="light"] .ax-hero-ring { border-color: rgba(91,154,255,0.06) !important; display: block !important; }
[data-theme="light"] .ax-hero-particle { display: block !important; opacity: 1 !important; }
[data-theme="light"] .ax-hero-particle:nth-child(1) { background: #5b9aff !important; }
[data-theme="light"] .ax-hero-particle:nth-child(2) { background: #818cf8 !important; }
[data-theme="light"] .ax-hero-particle:nth-child(3) { background: rgba(91,154,255,0.4) !important; }
[data-theme="light"] .ax-hero-particle:nth-child(4) { background: #93c5fd !important; }
[data-theme="light"] .ax-hero-particle:nth-child(5) { background: #5b9aff !important; }
[data-theme="light"] .ax-hero-particle:nth-child(6) { background: rgba(129,140,248,0.4) !important; }
/* Analysis: Level Bar */
[data-theme="light"] .ax-lvl-bar { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .ax-lvl-bar::after { background: linear-gradient(90deg,transparent,rgba(160,170,185,0.12),transparent); }
[data-theme="light"] .ax-lvl-title { color: var(--text-primary); }
[data-theme="light"] .ax-lvl-desc { color: var(--text-muted); }
[data-theme="light"] .ax-lvl-name { color: var(--text-secondary); }
[data-theme="light"] .ax-lvl-icon { background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .ax-lvl-node.locked .ax-lvl-icon::after { background: #f0f2f5; border-color: var(--border); }
[data-theme="light"] .ax-lvl-connector-line { background: var(--border); }
[data-theme="light"] .ax-lvl-connector-line::before { background: var(--text-muted); border-color: var(--border); }
[data-theme="light"] .ax-lvl-connector .arrow { border-left-color: var(--text-muted); }
/* Analysis: Level Popup */
[data-theme="light"] .ax-lvl-popup { background: linear-gradient(145deg,#ffffff,#f8f9fb); box-shadow: 0 24px 80px rgba(0,0,0,0.15); }
[data-theme="light"] .ax-lvl-popup-close { background: rgba(0,0,0,0.04); border-color: var(--border); color: var(--text-muted); }
[data-theme="light"] .ax-lvl-popup-close:hover { background: rgba(246,70,93,0.08); }
[data-theme="light"] .ax-lvl-popup-title { color: var(--text-primary) !important; }
[data-theme="light"] .ax-lvl-popup-desc { color: var(--text-secondary); }
[data-theme="light"] .ax-lvl-popup-status.locked { background: rgba(0,0,0,0.04); color: var(--text-muted); border-color: var(--border); }
[data-theme="light"] .ax-lvl-popup-feat { color: var(--text-secondary); }
[data-theme="light"] .ax-lvl-popup-book { background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .ax-lvl-popup-permanent { color: var(--text-muted); }
[data-theme="light"] .ax-lvl-popup-book-form input { background: rgba(0,0,0,0.03); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .ax-lvl-popup-book-form button { background: rgba(0,0,0,0.04); color: var(--text-secondary); }
[data-theme="light"] .ax-lvl-popup-buy.owned-btn { background: rgba(0,0,0,0.04); color: var(--text-muted); border-color: var(--border); }
/* Analysis: Paywall (미구매자) */
[data-theme="light"] .ax-pw h3 { color: var(--text-primary); }
[data-theme="light"] .ax-pw p { color: var(--text-secondary); }
[data-theme="light"] .ax-pw-item { background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .ax-pw-item:hover { border-color: rgba(160,170,185,0.2); }
[data-theme="light"] .ax-pw-item strong { color: var(--text-primary); }
[data-theme="light"] .ax-pw-item small { color: var(--text-muted); }
/* Analysis: Signal Panel (LONG/SHORT) */
[data-theme="light"] .ax-ls-panel { color: var(--text-primary); }
[data-theme="light"] .ax-ls-conf-text { color: var(--text-secondary); }
[data-theme="light"] .ax-ls-item { background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .ax-ls-item:hover { border-color: rgba(160,170,185,0.15); }
[data-theme="light"] .ax-ls-item-label { color: var(--text-muted); }
[data-theme="light"] .ax-ls-item-val { color: var(--text-primary); }
[data-theme="light"] .ax-ls-bar { background: rgba(0,0,0,0.04); }
[data-theme="light"] .ax-ls-updated { color: var(--text-muted); }
[data-theme="light"] .ax-ls-lock-overlay { background: rgba(255,255,255,0.6); backdrop-filter: blur(4px); }
[data-theme="light"] .ax-ls-lock-content h4 { color: var(--text-primary); }
[data-theme="light"] .ax-ls-lock-content p { color: var(--text-secondary); }
[data-theme="light"] .ax-ls-locked-icon { background: rgba(160,170,185,0.06); border-color: rgba(160,170,185,0.15); }
/* Analysis: TA Section */
[data-theme="light"] .ax-ta-title { color: var(--text-primary); }
[data-theme="light"] .ta-iv { color: var(--text-muted); background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .ta-iv.active, [data-theme="light"] .ta-iv:hover { color: #94a1ac; background: rgba(160,170,185,0.06); border-color: rgba(160,170,185,0.15); }
[data-theme="light"] .ta-updated { color: var(--text-muted); }
[data-theme="light"] .ta-gauge-box { background: rgba(0,0,0,0.01); border-color: var(--border); }
[data-theme="light"] .ta-gauge-box:hover { border-color: rgba(160,170,185,0.15); }
[data-theme="light"] .ta-gauge-label { color: var(--text-muted); }
[data-theme="light"] .ta-gauge-value { color: var(--text-secondary); }
[data-theme="light"] .ta-table th { color: var(--text-muted); border-bottom-color: var(--border); }
[data-theme="light"] .ta-table td { color: var(--text-secondary); border-bottom-color: var(--border); }
[data-theme="light"] .ta-table tr:hover td { background: rgba(160,170,185,0.02); }
/* Analysis: Tutorial */
[data-theme="light"] .ax-tutorial { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .ax-tutorial-header { border-bottom-color: var(--border); }
[data-theme="light"] .ax-tutorial-close { color: var(--text-muted); }
[data-theme="light"] .ax-tutorial-close:hover { color: var(--text-primary); }
[data-theme="light"] .ax-tut-step { border-right-color: var(--border); }
[data-theme="light"] .ax-tut-step:hover { background: rgba(160,170,185,0.02); }
[data-theme="light"] .ax-tut-content strong { color: var(--text-primary); }
[data-theme="light"] .ax-tut-content p { color: var(--text-secondary); }
/* Analysis: AI Learning Animation */
[data-theme="light"] .ai-learn-overlay { background: rgba(245,247,250,0.97); }
[data-theme="light"] .ai-learn-status { color: var(--text-secondary); }
[data-theme="light"] .ai-learn-pct { color: var(--text-primary); }
/* Analysis: Upload Area */
[data-theme="light"] .ax-upload { background: rgba(0,0,0,0.01); }
[data-theme="light"] .ax-upload:hover { background: rgba(160,170,185,0.02); }
[data-theme="light"] .ax-upload .u-icon { color: var(--text-muted); }
[data-theme="light"] .ax-upload .u-icon .upload-circle { background: rgba(160,170,185,0.04); border-color: rgba(160,170,185,0.15); }
/* Analysis: Dashboard Cards */
[data-theme="light"] .rx .v { color: var(--text-primary); }
[data-theme="light"] .rx .l { color: var(--text-muted); }
[data-theme="light"] .rx .lb { color: var(--text-secondary); }
[data-theme="light"] .rx .sub { color: var(--text-muted); }
[data-theme="light"] .rx h4 { color: var(--text-muted); }
[data-theme="light"] .rx { color: var(--text-primary); }
[data-theme="light"] .rx-grid { background: transparent; }

/* ─── Light Theme: General UI ─── */
[data-theme="light"] .modal-overlay .modal-content { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .toast-notification { background: rgba(255,255,255,0.95); color: var(--text-primary); border-color: var(--border); }
[data-theme="light"] .pos-lv .lv-val { color: var(--text-primary); }
[data-theme="light"] .pos-lv .lv-label { color: var(--text-muted); }

/* Light: inline trade page styles override */
[data-theme="light"] .trade-book-col { background: #ffffff; }
[data-theme="light"] .order-col { background: #ffffff; }

/* Light: Trade Bottom (positions/orders/history) */
[data-theme="light"] .trade-bottom { background: #ffffff; border-top-color: var(--border); }
[data-theme="light"] .tab-btn { color: var(--text-muted); }
[data-theme="light"] .tab-btn:hover { color: var(--text-primary); }
[data-theme="light"] .tab-btn.active { color: var(--accent); }
[data-theme="light"] .trade-table thead th { background: #f5f7fa; color: var(--text-muted); border-bottom-color: var(--border); }
[data-theme="light"] .trade-table tbody td { color: var(--text-primary); border-bottom-color: var(--border); }
[data-theme="light"] .trade-table tbody tr:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .trade-table tbody tr:hover td { background: rgba(0,0,0,0.02); }
[data-theme="light"] .trade-table tbody tr.empty-row td { color: var(--text-muted); }
[data-theme="light"] .pos-pnl.up { color: #059669; }
[data-theme="light"] .pos-pnl.down { color: #dc2626; }
[data-theme="light"] .pos-pnl strong { color: inherit; }
[data-theme="light"] .pos-act-btn { color: var(--text-secondary); border-color: var(--border); }
[data-theme="light"] .pos-act-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="light"] .trade-order-col { background: #ffffff; border-left-color: var(--border); }
[data-theme="light"] .order-mode-bar { background: #f8f9fb; border-bottom-color: var(--border); }
/* Light theme: bright silver gradient face → near-black text (#0a0e14). */
[data-theme="light"] .mode-btn,
[data-theme="light"] .lev-mode-btn { background: linear-gradient(160deg, #f3f4f6, #e5e7eb); border-color: rgba(180,190,205,0.75); color: #0a0e14; }
[data-theme="light"] .mode-btn:hover,
[data-theme="light"] .lev-mode-btn:hover { background: linear-gradient(160deg, #e5e7eb, #c9ced6); border-color: #c9ced6; color: #0a0e14; }
[data-theme="light"] .mode-btn.active,
[data-theme="light"] .lev-mode-btn.active { background: linear-gradient(160deg, #c9ced6, rgba(180,190,205,1)); border-color: rgba(180,190,205,1); color: #0a0e14; }
[data-theme="light"] .oa-row span:last-child { color: var(--text-primary); }
[data-theme="light"] .oa-row.total span:last-child { color: var(--accent); }
[data-theme="light"] #unrealizedPnl.up { color: #059669; }
[data-theme="light"] #unrealizedPnl.down { color: #dc2626; }
[data-theme="light"] .pos-lv .lv-val { color: var(--text-primary); }
[data-theme="light"] .pos-lv .lv-pnl.up { color: #059669; }
[data-theme="light"] .pos-lv .lv-pnl.down { color: #dc2626; }
[data-theme="light"] .tab-count { background: rgba(0,0,0,0.06); color: var(--text-muted); }
[data-theme="light"] .ranking-table .rank-sort-th { color: var(--text-muted); }
[data-theme="light"] .ranking-table .rank-sort-th.active { color: var(--accent); }

/* Light: Trade Slider & Percentage */
[data-theme="light"] .of-slider { background: #e2e8f0; }
[data-theme="light"] .pct-bar span { background: rgba(0,0,0,0.06); color: var(--text-secondary); border-color: var(--border); }
[data-theme="light"] .pct-bar span:hover, [data-theme="light"] .pct-bar span.active { background: rgba(160,170,185,0.1); color: var(--accent); border-color: rgba(160,170,185,0.3); }

/* Light: AI Chat in Trade */
[data-theme="light"] .ai-mgr-result { background: #f8f9fb; border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .ai-pos-select { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .ai-pos-select-title { color: var(--text-primary); }
[data-theme="light"] .ai-pos-select-cancel { background: rgba(0,0,0,0.04); color: var(--text-secondary); }
[data-theme="light"] .ai-pos-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-chart-img { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ai-chart-blur-cta { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-local-block { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-rating-comment { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-score-bar-wrap { background: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-stars .star.empty { color: rgba(0,0,0,0.15); }
[data-theme="light"] .ai-cta-link { background: linear-gradient(135deg, rgba(123,97,255,0.06), rgba(123,97,255,0.03)); border-color: rgba(123,97,255,0.15); }
[data-theme="light"] .ai-cta-link:hover { background: linear-gradient(135deg, rgba(123,97,255,0.12), rgba(123,97,255,0.06)); border-color: rgba(123,97,255,0.3); }
[data-theme="light"] .ai-cta-link strong { color: #1a1a2e; }
[data-theme="light"] .ai-pos-select-all { background: rgba(123,97,255,0.08); }
[data-theme="light"] .ai-pos-select-all:hover { background: rgba(123,97,255,0.15); }
[data-theme="light"] .ai-pos-select-item { background: rgba(123,97,255,0.03); border-color: rgba(123,97,255,0.1); }
[data-theme="light"] .ai-pos-select-item:hover { background: rgba(123,97,255,0.08); }
[data-theme="light"] .ai-mgr-btn.analyzing { background: linear-gradient(135deg, #f5f5fa 0%, #eef0f5 100%); border-color: rgba(123,97,255,0.3); }
[data-theme="light"] .ai-promote-section { background: linear-gradient(135deg, rgba(180,190,205,0.05), rgba(123,97,255,0.05)); border-color: rgba(180,190,205,0.15); }
[data-theme="light"] .ai-beta-badge { background: rgba(123,97,255,0.08); border-color: rgba(123,97,255,0.15); }

/* Light: Confirm/Popup text colors */
[data-theme="light"] .confirm-title { color: var(--text-primary) !important; }
[data-theme="light"] .confirm-body { color: var(--text-secondary) !important; }
[data-theme="light"] .confirm-body .cb-val { color: var(--text-primary) !important; }
[data-theme="light"] .confirm-body div { color: var(--text-primary) !important; }
[data-theme="light"] .confirm-cancel { background: rgba(0,0,0,0.04) !important; color: var(--text-secondary) !important; }
[data-theme="light"] .confirm-cancel:hover { background: rgba(0,0,0,0.08) !important; color: var(--text-primary) !important; }
[data-theme="light"] .upgrade-box h3 { color: var(--text-primary) !important; }
[data-theme="light"] .upgrade-box p { color: var(--text-secondary) !important; }

/* Light: Tutorial tooltip */
[data-theme="light"] .tut-tooltip h4 { color: var(--text-primary) !important; }
[data-theme="light"] .tut-skip { color: var(--text-muted) !important; }
[data-theme="light"] .tut-skip:hover { color: var(--text-primary) !important; background: rgba(0,0,0,0.04) !important; }

/* Light: Leverage popup body */
[data-theme="light"] .lev-popup-body { color: var(--text-primary); }
[data-theme="light"] .lev-ctrl input { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .lev-btn { background: rgba(0,0,0,0.04); color: var(--text-secondary); border-color: var(--border); }
[data-theme="light"] .lev-marks span { color: var(--text-muted); }
[data-theme="light"] .btn-confirm-lev { background: linear-gradient(135deg, #4a5568, #2d3748); border-color: rgba(0,0,0,0.10); color: #ffffff; }
[data-theme="light"] .lev-popup-overlay { background: rgba(0,0,0,0.3); }
[data-theme="light"] .lev-popup { border-color: rgba(0,0,0,0.08); box-shadow: 0 16px 48px rgba(0,0,0,0.12); }
[data-theme="light"] .lev-popup-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .lev-ctrl .lev-btn:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .lev-info { color: var(--text-secondary); }

/* Light: TP/SL Popup */
[data-theme="light"] .tpsl-popup-body { color: var(--text-primary); }
[data-theme="light"] .tpsl-popup-info { color: var(--text-secondary); }
[data-theme="light"] .tpsl-field-group label { color: var(--text-secondary); }

/* Light: Symbol dropdown coins */
[data-theme="light"] .dd-coin { color: var(--text-primary); }
[data-theme="light"] .dd-coin .dd-name { color: var(--text-primary); }
[data-theme="light"] .dd-coin .dd-vol { color: var(--text-muted); }
[data-theme="light"] .dd-search { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }

/* Light: Order Book text */
[data-theme="light"] .ob-row .ob-price { font-weight: 600; }

/* Light: Chatbot */
[data-theme="light"] .chatbot-window { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .chatbot-header { background: #f8f9fb; border-bottom-color: var(--border); }
[data-theme="light"] .chatbot-header-title { color: var(--text-primary); }
[data-theme="light"] .chatbot-messages { background: #ffffff; }
[data-theme="light"] .chatbot-welcome p { color: var(--text-secondary); }
[data-theme="light"] .chatbot-quick-btn { background: rgba(0,0,0,0.04); border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .chatbot-quick-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
[data-theme="light"] .chatbot-input { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .chatbot-msg-bubble.user { background: rgba(160,170,185,0.1); color: var(--text-primary); }
[data-theme="light"] .chatbot-msg-bubble.assistant { background: rgba(0,0,0,0.04); color: var(--text-primary); }
[data-theme="light"] .chatbot-msg-bubble.system { color: var(--text-muted); }
[data-theme="light"] .chatbot-input-area { background: #ffffff; border-top-color: var(--border); }

/* Light: Ranking */
[data-theme="light"] .rank-avatar { border-color: var(--border); }

/* Light: Plans page */
[data-theme="light"] .plan-features li { color: var(--text-secondary); }
[data-theme="light"] .plan-price { color: var(--text-primary); }
[data-theme="light"] .plan-name { color: var(--text-primary); }

/* ═══════════════════════════════════════════
   Light Theme: COMPREHENSIVE PATCH
   ═══════════════════════════════════════════ */

/* ── Community Page ── */
[data-theme="light"] .c-hero h1 { background: linear-gradient(135deg, #1a1a2e, rgba(30,30,60,0.8)); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .c-glass { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.08); backdrop-filter: blur(20px); }
[data-theme="light"] .c-card { background: #ffffff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .c-card:hover { background: #f8f9fb; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .c-sort { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .c-sort-btn { color: var(--text-secondary); }
[data-theme="light"] .c-sort-btn.active { color: var(--text-primary); background: #ffffff; }
[data-theme="light"] .c-cat-item:hover { background: rgba(0,0,0,0.04); color: var(--text-primary); }
[data-theme="light"] .c-cat-item.active { background: rgba(41,121,255,0.08); }
[data-theme="light"] .c-news-item { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.05); }
[data-theme="light"] .c-news-item:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .c-news-opinion-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: var(--text-secondary); }
[data-theme="light"] .c-news-opinion-btn:hover { background: rgba(41,121,255,0.06); }
[data-theme="light"] .c-news-divider { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .c-stat-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .c-avatar-ph { background: rgba(0,0,0,0.06); color: var(--text-muted); }
[data-theme="light"] .c-profile-avatar-ph { background: rgba(0,0,0,0.06); color: var(--text-muted); }
[data-theme="light"] .c-avatar { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .c-card-img { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .c-follow-sm { border-color: rgba(41,121,255,0.25); }
[data-theme="light"] .c-follow-sm.following { border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.03); }
[data-theme="light"] .c-confirm-box { background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .c-confirm-cancel { background: rgba(0,0,0,0.04); color: var(--text-secondary); }
[data-theme="light"] .c-confirm-cancel:hover { background: rgba(0,0,0,0.08); }
[data-theme="light"] .c-rpt-cancel { background: rgba(0,0,0,0.04); color: var(--text-secondary); }
[data-theme="light"] .c-rpt-cancel:hover { background: rgba(0,0,0,0.08); }
[data-theme="light"] .c-like-btn:hover { background: rgba(255,82,82,0.06); }
[data-theme="light"] .c-share-btn:hover { background: rgba(41,121,255,0.06); }
[data-theme="light"] .c-del-btn:hover { background: rgba(255,82,82,0.06); }
[data-theme="light"] .c-report-btn:hover { background: rgba(200,208,220,0.06); }
[data-theme="light"] .c-pag-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); color: var(--text-secondary); }
[data-theme="light"] .c-pag-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
[data-theme="light"] .c-pag-btn.active { background: rgba(41,121,255,0.1); border-color: rgba(41,121,255,0.3); color: #2979ff; }

/* ── Analysis Page Inline Styles Override ── */
[data-theme="light"] .ax-hero-left p { color: #374151 !important; }
[data-theme="light"] .ax-hero-left p span { color: #7d8790 !important; }
[data-theme="light"] .ax-hero-stat .lbl { color: #374151 !important; }
[data-theme="light"] .ax-q input { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.1) !important; color: var(--text-primary) !important; }
[data-theme="light"] .ax-q input::placeholder { color: var(--text-muted); }
[data-theme="light"] .ax-ind { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); color: #1f2937; }
[data-theme="light"] .ax-ind:hover:not(.locked) { background: rgba(160,170,185,0.06); border-color: rgba(160,170,185,0.2); }
[data-theme="light"] .ax-ind.on { background: rgba(160,170,185,0.1); border-color: rgba(160,170,185,0.3); color: #7d8790; }
[data-theme="light"] .ax-ind.locked { color: #aaa; border-color: rgba(0,0,0,0.04); }
[data-theme="light"] .ax-ind .lock { color: #aaa; }
[data-theme="light"] .ax-ind-info { background: #f8f9fb; border-color: rgba(160,170,185,0.15); }
[data-theme="light"] .ax-ind-info-text p { color: #374151; }
[data-theme="light"] .ax-ind-info-text .tip { color: #1f2937; background: rgba(0,0,0,0.02); }
[data-theme="light"] .ax-ind-info-visual { background: #141a28; border-color: rgba(255,255,255,0.06); }
[data-theme="light"] .ax-ind-tab { color: var(--text-muted); }
[data-theme="light"] .ax-ind-tab:hover { color: var(--text-secondary); background: rgba(0,0,0,0.02); }
[data-theme="light"] .ax-ind-tab.active { color: #7d8790; background: rgba(160,170,185,0.04); border-bottom-color: #94a1ac; }
[data-theme="light"] .ax-ind-tab.tab-locked-green { color: #999; }
[data-theme="light"] .ax-ind-tab.tab-locked-blue { color: #999; }
[data-theme="light"] .ax-ind-subcat { color: #4a5568; border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ax-ind-panel-overlay { background: rgba(255,255,255,0.4); }
[data-theme="light"] .ax-eval-empty { color: var(--text-muted); }
[data-theme="light"] .ax-eval-empty i { color: #ccc; }
[data-theme="light"] .ax-eval-body { color: #333; background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ax-eval-body .eval-heading { color: #7d8790; }
[data-theme="light"] .ax-eval-body strong { color: var(--text-primary) !important; }
[data-theme="light"] .ax-eval-detail-popup { background: linear-gradient(145deg,#ffffff,#f8f9fb); border-color: rgba(139,92,246,0.15); }
[data-theme="light"] .ax-eval-detail-popup .ax-resp-body { color: #333; }
[data-theme="light"] .ax-eval-detail-popup .ax-resp-body strong { color: var(--text-primary); }
[data-theme="light"] .ax-eval-detail-popup .ax-resp-time { color: var(--text-muted); }
[data-theme="light"] .ax-eval-detail-popup .section-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ax-eval-detail-popup .section-card:hover { background: rgba(139,92,246,0.03); border-color: rgba(139,92,246,0.12); }
[data-theme="light"] .ax-eval-detail-close { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: var(--text-muted); }
[data-theme="light"] .ax-eval-detail-close:hover { background: rgba(246,70,93,0.08); color: #dc2626; }
[data-theme="light"] .ax-eval-chart { background: #f0f2f5; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ax-loading-step { color: #4a5568; background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ax-loading { color: #4a5568; }
[data-theme="light"] .ax-loading-connector { background: rgba(0,0,0,0.08); }
[data-theme="light"] .ax-loading-bar { background: rgba(0,0,0,0.06); }
[data-theme="light"] .eval-signal-accuracy { background: rgba(0,0,0,0.03); }
[data-theme="light"] .eval-acc-label { color: var(--text-muted); }
[data-theme="light"] .eval-acc-level { background: rgba(0,0,0,0.04); color: var(--text-muted); }
[data-theme="light"] .eval-signal-upgrade { background: rgba(160,170,185,0.06); border-color: rgba(160,170,185,0.12); }

/* ── Trade Page Inline Styles Override ── */
[data-theme="light"] .confirm-body .cb-label { color: var(--text-muted) !important; }
[data-theme="light"] .tut-tooltip p { color: var(--text-secondary) !important; }
[data-theme="light"] .tut-step { color: var(--text-muted) !important; }
[data-theme="light"] .pos-lv .lv-side.long { background: rgba(14,203,129,0.08); border-color: rgba(14,203,129,0.2); }
[data-theme="light"] .pos-lv .lv-side.short { background: rgba(246,70,93,0.08); border-color: rgba(246,70,93,0.2); }

/* ── Index Page ── */
[data-theme="light"] .idx-br-item:hover { background: rgba(0,0,0,0.03); }

/* ── General: Improve contrast of muted elements ── */
[data-theme="light"] .main-nav { background: rgba(255,255,255,0.92) !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; backdrop-filter: blur(20px) !important; }
[data-theme="light"] .main-nav a,
[data-theme="light"] .nav-link { color: #333 !important; }
[data-theme="light"] .nav-link:hover { color: var(--accent) !important; }
[data-theme="light"] .nav-link.active { color: var(--accent) !important; }
[data-theme="light"] .dropdown-menu { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; }
[data-theme="light"] .dropdown-menu a { color: #333 !important; }
[data-theme="light"] .dropdown-menu a:hover { background: rgba(0,0,0,0.04) !important; color: var(--accent) !important; }
[data-theme="light"] .price-ticker { background: #f8f9fb !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; }
[data-theme="light"] .ticker-name { color: #666 !important; }
[data-theme="light"] .ticker-price { color: #1a202c !important; }
[data-theme="light"] .ticker-change.up { color: #059669 !important; text-shadow: none !important; }
[data-theme="light"] .ticker-change.down { color: #dc2626 !important; text-shadow: none !important; }
[data-theme="light"] .noti-dropdown { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .hero-section h1 { color: var(--text-primary); }
[data-theme="light"] .hero-section p { color: var(--text-secondary); }

/* ── Mypage ── */
[data-theme="light"] .journal-calendar { background: #ffffff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .cal-day { background: #f8f9fb; border-color: rgba(0,0,0,0.04); }
[data-theme="light"] .cal-day:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .cal-day.has-entry { background: #f0f4f8; border-color: rgba(180,190,205,0.12); }
[data-theme="light"] .cal-count { background: rgba(0,0,0,0.04); color: var(--text-secondary); }  /* 4.36:1 미달이었다 — 배경을 밝히고 글자를 진하게 (7.0:1) */
[data-theme="light"] .journal-stats-bar { }
[data-theme="light"] .journal-stat-item { background: #ffffff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .journal-pie-card { background: #ffffff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .journal-chart-card { background: #ffffff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .jchart-zero-line { background: rgba(0,0,0,0.1); }
[data-theme="light"] .jchart-col:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .jchart-col.bar-selected { background: rgba(0,0,0,0.05); }
[data-theme="light"] .jchart-tooltip { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: 0 6px 24px rgba(0,0,0,0.12); }

/* ── Purchase/Plans Modal ── */
[data-theme="light"] .purchase-modal { background: #ffffff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .purchase-modal-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .purchase-modal-body { color: var(--text-primary); }
[data-theme="light"] .purchase-modal-overlay { background: rgba(0,0,0,0.3); }
[data-theme="light"] .purchase-plan-summary { border-color: transparent; background: transparent; }
[data-theme="light"] .purchase-detail-row { border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="light"] .purchase-modal-footer .btn-outline { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: var(--text-secondary); }
[data-theme="light"] .purchase-modal-footer .btn-outline:hover { background: rgba(0,0,0,0.06); }

/* ── Write Modal (Community) ── */
[data-theme="light"] .write-modal-content { box-shadow: 0 24px 80px rgba(0,0,0,0.15); }

/* ── General: All remaining rgba(255,255,255,...) patterns ── */
[data-theme="light"] .badge-ama { color: #7d8790; }
/* News popup */
[data-theme="light"] .news-popup { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
[data-theme="light"] .news-popup-header h3 { color: var(--text-primary); }
[data-theme="light"] .news-popup-close:hover { color: var(--text-primary); }
[data-theme="light"] .news-popup-original { color: var(--text-muted); }
[data-theme="light"] .news-popup-meta { color: var(--text-muted); }
[data-theme="light"] .news-popup-link { border-color: rgba(0,0,0,0.08); color: var(--text-secondary); }
[data-theme="light"] .news-popup-link:hover { color: var(--text-primary); border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .news-popup-overlay { background: rgba(0,0,0,0.3); }
[data-theme="light"] .news-analysis-body { color: var(--text-secondary); }
/* Info list items */
[data-theme="light"] .info-list-item a { border-bottom-color: rgba(0,0,0,0.04); }
/* Patch timeline */
[data-theme="light"] .patch-timeline { scrollbar-color: rgba(0,0,0,0.1) transparent; }
[data-theme="light"] .patch-timeline::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }
/* Leverage slider line */
[data-theme="light"] .lev-slider-line { background: rgba(0,0,0,0.08); }
/* Journal overview */
[data-theme="light"] .jov-stat-box { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .jov-stat-box:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .jov-divider { background: rgba(0,0,0,0.06); }
[data-theme="light"] .pie-section-divider { background: rgba(0,0,0,0.06); }
[data-theme="light"] .jchart-col:hover { background: rgba(0,0,0,0.03); }
/* Order book & recent trades */
[data-theme="light"] .ob-row:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .rt-row:hover { background: rgba(0,0,0,0.02); }
/* Table accounts */
[data-theme="light"] .ta-table td { border-bottom-color: rgba(0,0,0,0.04); }
/* Nav badges */
[data-theme="light"] .nav-plan-badge.badge-free { background: linear-gradient(145deg, rgba(107,114,128,0.08), rgba(107,114,128,0.03)); border-color: rgba(107,114,128,0.15); box-shadow: 0 2px 6px rgba(0,0,0,0.04); }

/* ─── Theme Toggle Button ─── */
.theme-toggle {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    color: var(--accent);
}
.theme-toggle .theme-icon { width: 16px; height: 16px; transition: transform 0.3s ease; }
.theme-toggle:hover .theme-icon { transform: rotate(30deg); }
[data-theme="light"] .theme-toggle {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
    padding-top: calc(var(--nav-height) + var(--ticker-height));
    cursor: default;
}

/* Non-index pages: nav/ticker not fixed */
body:not(.page-index) {
    padding-top: 0 !important;
}
body:not(.page-index) .price-ticker {
    position: relative !important;
    top: auto !important;
}
body:not(.page-index) .main-nav {
    position: relative !important;
    top: auto !important;
}
body {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
a { color: var(--accent); text-decoration: none; transition: var(--transition-fast); cursor: pointer; }
a:hover { color: var(--accent-hover); }
a:focus, button:focus, [tabindex]:focus { outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; cursor: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

/* ─── Scroll Reveal Utility ─── */
.premium-reveal { opacity: 1; transform: translateY(0); }
.premium-reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── Page Entrance Animation ─── */
.page-enter {
    opacity: 0;
    transform: translateY(18px);
    animation: pageEnterIn 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes pageEnterIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Price Ticker (Top Bar) ─── */
.price-ticker {
    background: rgba(6, 9, 15, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    height: var(--ticker-height);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}
.ticker-wrap {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 32px;
    padding: 0 18px;
    width: max-content;
    /* 컨텐츠를 2배(이상) 복제했을 때만 -50%로 루프하면 끊김 없음.
       JS가 자동 복제 후 실행됨. 복제 전엔 애니메이션 정지 (jankless start). */
    animation: tickerScroll 110s linear infinite;
    animation-play-state: paused;
    will-change: transform;
}
.ticker-wrap.ready { animation-play-state: running; }
@keyframes tickerScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
/* hover 해도 티커는 계속 흘러감 (pause 제거) */
.price-ticker:hover .ticker-wrap { animation-play-state: running; }
.ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.ticker-icon { font-size: 14px; color: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }
.ticker-icon-img { width: 18px; height: 18px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
.ticker-name { color: var(--text-muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.ticker-price { color: var(--text-primary); font-weight: 700; font-size: 12px; }
.ticker-change { font-weight: 700; font-size: 11px; }
.ticker-change.up { color: var(--green); text-shadow: 0 0 8px rgba(16, 185, 129, 0.3); }
.ticker-change.down { color: var(--red); text-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }

/* ─── Navigation ─── */
.main-nav {
    background: rgba(6, 9, 15, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    height: var(--nav-height);
    position: fixed;
    top: var(--ticker-height);
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.main-nav.scrolled {
    background: rgba(6, 9, 15, 0.96);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    border-bottom-color: rgba(232, 168, 56, 0.06);
}
.nav-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 36px;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
    gap: 16px;
}
.nav-container > .nav-brand { justify-self: start; }
.nav-container > .nav-links { justify-self: center; flex: 0 0 auto; }
.nav-container > .nav-right { justify-self: end; }
.nav-container > .mobile-hamburger { justify-self: start; grid-column: 1; }
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    flex-shrink: 0;
    min-width: 180px;
}
.nav-brand img {
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(160,170,185,0.15));
}
.nav-brand:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 16px rgba(160,170,185,0.3));
}
.nav-brand i { color: var(--accent); font-size: 24px; }
.nav-brand:hover { color: var(--text-primary); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
/* 관리자 전용 nav 버튼 — 가운데 정렬 그룹과 분리, 오른쪽 끝 (nav-right 직전) */
.nav-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: #c9ced6;
    background: rgba(180,190,205,0.08);
    border: 1px solid rgba(180,190,205,0.25);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
    flex-shrink: 0;
    margin-right: 12px;
    white-space: nowrap;
}
.nav-admin-link:hover { background: rgba(180,190,205,0.16); border-color: rgba(180,190,205,0.45); }
.nav-admin-link.active { background: rgba(180,190,205,0.2); border-color: #c9ced6; color: #c9ced6; }
.nav-admin-link i,
.nav-admin-link svg { width: 14px; height: 14px; }
@media (max-width: 768px) { .nav-admin-link { display: none; } }
.nav-link {
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
    letter-spacing: 0.02em;
}
/* ─── Nav link — 간결한 hover/active ─── */
.nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}
.nav-link.active {
    color: var(--accent);
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

/* ─── Nav More Dropdown ─── */
.nav-more-wrap { position: relative; }
.nav-more-trigger { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 2px; }
.nav-more-trigger .nav-more-arrow { display: inline-block; font-size: 10px; margin-left: 1px; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.nav-more-wrap.open .nav-more-trigger .nav-more-arrow,
.nav-more-wrap:hover .nav-more-trigger .nav-more-arrow { transform: none; }
.nav-more-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: rgba(12, 16, 28, 0.95);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 10px;
    box-shadow:
        0 16px 48px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 0 30px rgba(99,102,241,0.08);
    z-index: 1001;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    margin-top: 0;
    /* Hover transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1), visibility 0.25s;
}
.nav-more-dropdown::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
    background: transparent;
}
.nav-more-dropdown::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(139,92,246,0.04) 50%, transparent 100%);
    pointer-events: none;
}
.nav-more-dropdown::-webkit-scrollbar { width: 5px; }
.nav-more-dropdown::-webkit-scrollbar-track { background: transparent; }
.nav-more-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.nav-more-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
/* Show on hover (desktop) */
@media (min-width: 769px) {
    .nav-more-wrap:hover .nav-more-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
}
/* Click-based fallback: show when .open class is present */
.nav-more-wrap.open .nav-more-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.nav-more-item::after {
    content: '›';
    margin-left: auto;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.5;
    transition: all 0.2s;
}
.nav-more-item:hover::after {
    opacity: 1;
    transform: translateX(3px);
    color: #818cf8;
}
/* ── 더보기 항목 하나씩 등장 (stagger reveal) ── */
@keyframes navMoreItemIn {
    from { opacity: 0; transform: translateX(-10px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.nav-more-wrap:hover .nav-more-item,
.nav-more-wrap.open .nav-more-item {
    animation: navMoreItemIn 0.34s cubic-bezier(0.22,1,0.36,1) both;
}
.nav-more-wrap:hover .nav-more-item:nth-child(1),.nav-more-wrap.open .nav-more-item:nth-child(1){ animation-delay: 0.02s; }
.nav-more-wrap:hover .nav-more-item:nth-child(2),.nav-more-wrap.open .nav-more-item:nth-child(2){ animation-delay: 0.07s; }
.nav-more-wrap:hover .nav-more-item:nth-child(3),.nav-more-wrap.open .nav-more-item:nth-child(3){ animation-delay: 0.12s; }
.nav-more-wrap:hover .nav-more-item:nth-child(4),.nav-more-wrap.open .nav-more-item:nth-child(4){ animation-delay: 0.17s; }
.nav-more-wrap:hover .nav-more-item:nth-child(5),.nav-more-wrap.open .nav-more-item:nth-child(5){ animation-delay: 0.22s; }
.nav-more-wrap:hover .nav-more-item:nth-child(6),.nav-more-wrap.open .nav-more-item:nth-child(6){ animation-delay: 0.27s; }
@media (prefers-reduced-motion: reduce){
    .nav-more-wrap:hover .nav-more-item,.nav-more-wrap.open .nav-more-item{ animation: none; }
}
.nav-more-item img {
    width: 34px !important;
    height: 34px !important;
}
.nav-more-item:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
    color: #fff;
    transform: translateX(4px);
    box-shadow: 0 2px 12px rgba(99,102,241,0.15);
}
.nav-more-emoji {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nav-more-item:hover .nav-more-emoji {
    transform: scale(1.12);
    background: rgba(99,102,241,0.12);
    box-shadow: 0 0 10px rgba(99,102,241,0.2);
}
/* Light mode */
[data-theme="light"] .nav-more-dropdown {
    background: rgba(255,255,255,0.97);
    border-color: rgba(0,0,0,0.08);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.12),
        0 0 0 1px rgba(0,0,0,0.03) inset;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
[data-theme="light"] .nav-more-dropdown::after {
    background: linear-gradient(135deg, rgba(99,102,241,0.04) 0%, transparent 100%);
}
[data-theme="light"] .nav-more-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] .nav-more-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
[data-theme="light"] .nav-more-item { color: #4a5568; }
[data-theme="light"] .nav-more-item:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.06));
    color: #2979ff;
}
[data-theme="light"] .nav-more-emoji { background: rgba(0,0,0,0.03); }
[data-theme="light"] .nav-more-item:hover .nav-more-emoji { background: rgba(99,102,241,0.08); }
.nav-link i { font-size: 13px; }

.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 180px; justify-content: flex-end; }
.nav-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
}
.nav-balance i { color: var(--accent); }
.nav-balance small { color: var(--text-muted); font-weight: 400; }

.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}
.nav-user:hover { background: rgba(255, 255, 255, 0.04); }
.nav-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(200, 208, 220, 0.30);
    box-sizing: border-box;
    transition: var(--transition-smooth), background 0.25s ease;
}
.nav-user:hover .nav-avatar { border-color: rgba(232, 168, 56, 0.4); box-shadow: 0 0 12px rgba(200, 208, 220, 0.25); }
.nav-avatar-placeholder {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    transition: var(--transition-smooth);
}
.nav-user:hover .nav-avatar-placeholder { border-color: rgba(232, 168, 56, 0.3); }
.nav-username { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.nav-plan-badge { font-size: 11px; font-weight: 800; padding: 5px 20px; border-radius: 8px; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; letter-spacing: 1.2px; margin-left: 6px; position: relative; text-transform: uppercase; }
.nav-plan-badge.badge-premium { background: linear-gradient(145deg, rgba(170,0,255,0.25), rgba(170,0,255,0.08)); color: #d4a0ff; border: 1px solid rgba(170,0,255,0.35); box-shadow: 0 2px 8px rgba(170,0,255,0.2), 0 0 16px rgba(170,0,255,0.1), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.15); text-shadow: 0 0 10px rgba(170,0,255,0.5), 0 1px 2px rgba(0,0,0,0.3); }
.nav-plan-badge.badge-pro { background: linear-gradient(145deg, rgba(180,190,205,0.25), rgba(180,190,205,0.08)); color: #ffc462; border: 1px solid rgba(180,190,205,0.35); box-shadow: 0 2px 8px rgba(180,190,205,0.2), 0 0 16px rgba(180,190,205,0.1), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.15); text-shadow: 0 0 10px rgba(180,190,205,0.5), 0 1px 2px rgba(0,0,0,0.3); }
.nav-plan-badge.badge-tester { background: linear-gradient(145deg, rgba(59,130,246,0.25), rgba(59,130,246,0.08)); color: #93bbfd; border: 1px solid rgba(59,130,246,0.35); box-shadow: 0 2px 8px rgba(59,130,246,0.2), 0 0 16px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.15); text-shadow: 0 0 10px rgba(59,130,246,0.5), 0 1px 2px rgba(0,0,0,0.3); }
.nav-plan-badge.badge-beginner { background: linear-gradient(145deg, rgba(14,203,129,0.2), rgba(14,203,129,0.05)); color: #34d399; border: 1px solid rgba(14,203,129,0.3); box-shadow: 0 2px 8px rgba(14,203,129,0.15), 0 0 12px rgba(14,203,129,0.08), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.12); text-shadow: 0 0 8px rgba(14,203,129,0.4), 0 1px 2px rgba(0,0,0,0.3); }
.nav-plan-badge.badge-free { background: linear-gradient(145deg, rgba(107,114,128,0.15), rgba(107,114,128,0.04)); color: #9ca3af; border: 1px solid rgba(107,114,128,0.2); box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.1); }
[data-theme="light"] .nav-plan-badge.badge-premium { background: linear-gradient(145deg, rgba(170,0,255,0.12), rgba(170,0,255,0.04)); color: #7c3aed; border-color: rgba(170,0,255,0.35); box-shadow: 0 2px 8px rgba(170,0,255,0.12); text-shadow: none; }
[data-theme="light"] .nav-plan-badge.badge-pro { background: linear-gradient(145deg, rgba(180,190,205,0.15), rgba(180,190,205,0.06)); color: #c47a10; border-color: rgba(180,190,205,0.4); box-shadow: 0 2px 8px rgba(180,190,205,0.15); text-shadow: none; }
[data-theme="light"] .nav-plan-badge.badge-tester { background: linear-gradient(145deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04)); color: #2563eb; border-color: rgba(59,130,246,0.35); box-shadow: 0 2px 8px rgba(59,130,246,0.12); text-shadow: none; }
[data-theme="light"] .nav-plan-badge.badge-beginner { background: linear-gradient(145deg, rgba(14,203,129,0.12), rgba(14,203,129,0.04)); color: #059669; border-color: rgba(14,203,129,0.35); box-shadow: 0 2px 8px rgba(14,203,129,0.12); text-shadow: none; }
[data-theme="light"] .nav-plan-badge.badge-free { background: linear-gradient(145deg, rgba(107,114,128,0.1), rgba(107,114,128,0.03)); color: #6b7280; border-color: rgba(107,114,128,0.25); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.nav-user i.fa-chevron-down { font-size: 10px; color: var(--text-muted); }

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    margin-top: 8px;
    background: rgba(15, 21, 32, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    min-width: 200px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 100;
    animation: dropdownFadeIn 0.2s var(--ease-premium);
    padding: 4px;
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-menu.show { display: block; }
.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 13px;
    transition: var(--transition-fast);
    border-radius: var(--radius-xs);
    position: relative;
}
.dropdown-menu a:hover {
    background: rgba(232, 168, 56, 0.06);
    color: var(--accent);
}
.dropdown-menu a:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    background: var(--accent);
    border-radius: 1px;
}
.dropdown-menu a.text-danger { color: var(--red); }
.dropdown-menu a.text-danger:hover { background: var(--red-bg); color: var(--red); }
.dropdown-menu a.text-danger:hover::before { background: var(--red); }
.dropdown-divider { border-top: 1px solid rgba(255, 255, 255, 0.05); margin: 4px 0; }

.nav-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
}

/* ─── Main Content ─── */
.main-content {
    min-height: calc(100vh - var(--nav-height) - var(--ticker-height));
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    border: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
}
.btn:hover { filter: brightness(1.08); }
.btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-lg { padding: 14px 30px; font-size: 16px; font-weight: 700; }
.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 25%, #c9ced6 55%, #9ca3af 100%);
    color: #0a0e14;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow:
        0 8px 24px rgba(180,190,205,0.55),
        0 2px 6px rgba(180,190,205,0.30),
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -2px 0 rgba(0,0,0,0.10);
    text-shadow: 0 1px 0 rgba(255,255,255,0.55);
    font-weight: 800;
}
/* 회전하는 conic 광선 (내부 은은한 halo) — btn-lg 에만 적용 (작은 버튼/모바일 로그인 X) */
.btn-primary.btn-lg::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 300%;
    transform: translate(-50%,-50%) rotate(0deg);
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(255,255,255,0.35) 20deg,
        transparent 40deg,
        transparent 90deg,
        rgba(255,255,255,0.25) 110deg,
        transparent 130deg,
        transparent 180deg,
        rgba(255,255,255,0.35) 200deg,
        transparent 220deg,
        transparent 270deg,
        rgba(255,255,255,0.25) 290deg,
        transparent 310deg,
        transparent 360deg);
    opacity: 0.55;
    animation: btnPrimSpin 8s linear infinite;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: overlay;
}
.btn-primary > * { position: relative; z-index: 1; }
@keyframes btnPrimSpin {
    to { transform: translate(-50%,-50%) rotate(360deg); }
}
.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 12px 32px rgba(180,190,205,0.70),
        0 4px 10px rgba(180,190,205,0.40),
        inset 0 1px 0 rgba(255,255,255,0.90),
        inset 0 -2px 0 rgba(0,0,0,0.12);
    color: #0a0e14;
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
/* Login Bubble — 우측 끝 정렬, 뷰포트 안 잘리게 */
.login-bubble-wrap { position:relative; }
.login-bubble {
    position:absolute; top:calc(100% + 6px); right:0; left:auto;
    padding:8px 14px; border-radius:10px;
    background:linear-gradient(135deg,#e5e7eb,#c9ced6); color:#0a0e14;
    font-size:12px; font-weight:800; z-index:100;
    box-shadow:0 6px 20px rgba(180,190,205,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
    animation:bubbleBounce 2s ease-in-out infinite, bubbleFadeIn 0.5s ease;
    display:flex; align-items:center; gap:6px;
    max-width:calc(100vw - 24px); white-space:nowrap;
    text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
.login-bubble i { color:#0a0e14 !important; }
.login-bubble-arrow {
    position:absolute; top:-6px; right:18px; left:auto; transform:none;
    width:0; height:0;
    border-left:6px solid transparent; border-right:6px solid transparent;
    border-bottom:6px solid #e5e7eb;
}
@keyframes bubbleBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes bubbleFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.btn-outline:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: none; }
.btn-ghost:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }
.btn-premium {
    background: linear-gradient(135deg, var(--accent), #f0c060, var(--accent));
    background-size: 200% auto;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(232, 168, 56, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    animation: shimmerBg 3s ease infinite;
}
.btn-premium:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(232, 168, 56, 0.4); }
@keyframes shimmerBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ─── Hero Section (Home) ─── */
.hero-section {
    padding: 100px 20px 80px;
    min-height: 600px;
    background: radial-gradient(ellipse at 15% 45%, rgba(232, 168, 56, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 55%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 100%, rgba(139, 92, 246, 0.03) 0%, transparent 40%);
    position: relative;
}
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 60px;
    align-items: center;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: var(--accent-soft);
    border: 1px solid rgba(200, 208, 220, 0.30);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 22px;
    letter-spacing: 0.02em;
}
.hero-title {
    font-size: 50px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.03em;
}
.text-gradient {
    background: linear-gradient(90deg, #ffffff 0%, #c9ced6 20%, #ffffff 40%, #9ca3af 60%, #ffffff 80%, #c9ced6 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGradientShift 4s ease-in-out infinite;
    filter: drop-shadow(0 2px 20px rgba(200,208,220,0.35));
}
@keyframes textGradientShift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.hero-desc {
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 34px;
    max-width: 540px;
    line-height: 1.7;
}
.hero-actions { display: flex; gap: 14px; }

/* Hero Price Card */
.hero-price-card {
    background:
        radial-gradient(ellipse 100% 60% at 20% 0%, rgba(180,190,205,0.14), transparent 60%),
        radial-gradient(ellipse 90% 80% at 100% 100%, rgba(139,92,246,0.08), transparent 60%),
        linear-gradient(145deg, rgba(15,21,32,0.85), rgba(10,16,26,0.92));
    border: 1px solid rgba(180,190,205,0.2);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow:
        var(--shadow-premium),
        0 0 40px -10px rgba(180,190,205,0.25),
        inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* 상단 스캔 라인 (주황 → 블루 그라데이션) */
.hero-price-card::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(180,190,205,0.65) 30%, rgba(91,154,255,0.5) 60%, transparent);
    opacity: 0.8;
    z-index: 1;
}
/* 코너 라디얼 글로우 + 그리드 패턴 */
.hero-price-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(180,190,205,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180,190,205,0.035) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 70%);
    pointer-events: none;
    opacity: 0.7;
}
.price-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.price-coin { display: flex; align-items: center; gap: 12px; }
.coin-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}
.btc-icon { background: rgba(247, 147, 26, 0.15); color: var(--accent); }
.eth-icon { background: rgba(98, 126, 234, 0.15); color: #627eea; }
.sol-icon { background: rgba(0, 209, 178, 0.15); color: #00d1b2; }
.xrp-icon { background: rgba(35, 41, 47, 0.15); color: #fff; }
.doge-icon { background: rgba(186, 155, 56, 0.15); color: #ba9b38; }
.price-coin h3 { font-size: 18px; font-weight: 700; }
.coin-pair { font-size: 13px; color: var(--text-muted); }
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--green);
    padding: 5px 11px;
    background: rgba(14,203,129,0.12);
    border: 1px solid rgba(14,203,129,0.25);
    border-radius: 100px;
}
.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(14,203,129,0.6);
    animation: livePulseRing 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes livePulseRing {
    0%,100%{box-shadow:0 0 0 0 rgba(14,203,129,0.5);}
    50%{box-shadow:0 0 0 5px rgba(14,203,129,0);}
}

.main-price {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #fff 40%, rgba(180,190,205,0.95) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}
.price-change { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; position: relative; z-index: 1; }
.change-value, .change-pct { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.up { color: var(--green); }
.down { color: var(--red); }

.price-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
}
[data-theme="light"] .price-card-stats { border-top-color: rgba(0,0,0,0.06); }
.price-card-stats .stat {
    text-align: center;
    padding: 10px 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    transition: border-color .2s, background .2s;
}
[data-theme="light"] .price-card-stats .stat { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.04); }
.price-card-stats .stat:hover { border-color: rgba(180,190,205,0.15); background: rgba(180,190,205,0.03); }
.price-card-stats .stat-label { display: block; font-size: 10px; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; letter-spacing: 0.3px; text-transform: uppercase; }
.price-card-stats .stat-value { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ─── Sections ─── */
.section { padding: 48px 20px; }
.section-container { max-width: 1400px; margin: 0 auto; }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.section-header h2 {
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.02em;
    position: relative;
    padding-left: 14px;
}
.section-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--accent);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--accent-glow);
}
.section-header h2 i { color: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }
.section-header.center { flex-direction: column; text-align: center; gap: 8px; }
.section-header.center h2 { padding-left: 0; }
.section-header.center h2::before { display: none; }
.section-header.center p { color: var(--text-secondary); }
.section-link { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 4px; transition: var(--transition-fast); }
.section-link:hover { gap: 8px; }

/* ─── Price Grid (Home) ─── */
.price-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.price-card-mini {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.price-card-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 208, 220, 0.25), transparent);
    opacity: 0;
    transition: var(--transition-smooth);
}
.price-card-mini:hover { border-color: rgba(200, 208, 220, 0.30); transform: translateY(-3px); box-shadow: var(--shadow-premium); }
.price-card-mini:hover::before { opacity: 1; }
.mini-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.coin-icon-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.mini-name { font-size: 14px; font-weight: 600; flex: 1; }
.mini-pair { font-size: 12px; color: var(--text-muted); }
.mini-price { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.mini-change { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.mini-change.up { color: var(--green); }
.mini-change.down { color: var(--red); }
.mini-chart { height: 40px; }

/* ─── TradingView Chart Section ─── */
.chart-section { padding-top: 0; }
.tradingview-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.chart-controls { display: flex; gap: 4px; }
.chart-btn {
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.chart-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.chart-btn.active { background: rgba(247, 147, 26, 0.1); border-color: var(--accent); color: var(--accent); }

/* ─── News & Patch Notes ─── */
.news-patch-section { padding-top: 0; }
.news-patch-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: stretch;
}
.info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.news-column .info-card + .info-card { margin-top: 16px; }
.info-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}
.info-card-header h3 {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.info-card-header h3 i { color: var(--accent); font-size: 14px; }
.info-more {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}
.info-more:hover { color: var(--accent); }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.15s;
}
.info-list-item a:hover { background: rgba(180,190,205,0.04); }
.info-list-item:last-child a { border-bottom: none; }
.info-title {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.info-date {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 12px;
}
.info-new-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 3px;
    flex-shrink: 0;
}
.news-source {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(180,190,205,0.1);
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.info-list-loading, .info-list-empty {
    padding: 24px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.info-list-loading i { margin-right: 6px; }

/* Patch Notes */
.patch-column { display: flex; flex-direction: column; min-height: 0; }
.patch-card { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.patch-timeline {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.patch-timeline::-webkit-scrollbar { width: 5px; }
.patch-timeline::-webkit-scrollbar-track { background: transparent; }
.patch-timeline::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.patch-timeline::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.patch-item {
    position: relative;
    padding-left: 20px;
    padding-bottom: 20px;
    border-left: 2px solid rgba(255,255,255,0.06);
}
.patch-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.patch-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    border: 2px solid var(--bg-card);
}
.patch-item.latest::before { background: var(--accent); box-shadow: 0 0 8px rgba(180,190,205,0.4); }
.patch-item.latest { border-left-color: rgba(180,190,205,0.2); }
.patch-version-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.patch-version {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.patch-date {
    font-size: 11px;
    color: var(--text-muted);
}
.patch-tag {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.patch-tag.tag-new { background: rgba(180,190,205,0.15); color: #c9ced6; }
.patch-tag.tag-fix { background: rgba(255,23,68,0.12); color: #ff6b6b; }
.patch-changes { display: flex; flex-direction: column; gap: 4px; }
.patch-change {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.patch-change i { font-size: 9px; width: 14px; text-align: center; flex-shrink: 0; }
.patch-change.add i { color: #0ecb81; }
.patch-change.improve i { color: #818cf8; }
.patch-change.fix i { color: #ff6b6b; }
.patch-change.remove i { color: #f6465d; }
.patch-change.security i { color: #c9ced6; }

/* News Translated Tag */
.news-translated-tag { font-size: 9px; color: #818cf8; font-weight: 600; margin-left: 2px; }

/* News Popup */
.news-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: npFadeIn .2s; }
@keyframes npFadeIn { from { opacity: 0; } to { opacity: 1; } }
.news-popup { background: #141b2d; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; width: 520px; max-width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.6); animation: npSlide .25s; }
@keyframes npSlide { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.news-popup-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 24px 12px; gap: 12px; }
.news-popup-header h3 { font-size: 16px; font-weight: 700; color: #e5e7eb; line-height: 1.5; }
.news-popup-close { background: transparent; border: none; color: #6b7280; font-size: 18px; cursor: pointer; padding: 4px; flex-shrink: 0; }
.news-popup-close:hover { color: #e5e7eb; }
.news-popup-original { padding: 0 24px 8px; font-size: 12px; color: #6b7280; font-style: italic; }
.news-popup-meta { display: flex; gap: 16px; padding: 0 24px 16px; font-size: 12px; color: #6b7280; }
.news-popup-meta i { margin-right: 4px; }
.news-popup-analysis { margin: 0 24px 20px; background: rgba(180,190,205,0.05); border: 1px solid rgba(180,190,205,0.15); border-radius: 10px; overflow: hidden; }
.news-analysis-header { padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--accent); border-bottom: 1px solid var(--accent-soft); display: flex; align-items: center; gap: 6px; }
.news-analysis-body { padding: 14px 16px; font-size: 13px; color: #9ca3af; line-height: 1.7; }
.news-analysis-body p { margin: 0; }
.sentiment { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.sentiment.positive { background: rgba(14,203,129,0.12); color: #0ecb81; }
.sentiment.negative { background: rgba(246,70,93,0.12); color: #f6465d; }
.sentiment.neutral { background: rgba(107,114,128,0.12); color: #9ca3af; }
.news-popup-actions { padding: 0 24px 20px; }
.news-popup-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; text-decoration: none; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; transition: all .15s; }
.news-popup-link:hover { color: #e5e7eb; border-color: rgba(255,255,255,0.15); }

@media (max-width: 900px) {
    .news-patch-grid { grid-template-columns: 1fr; align-items: start; }
    .patch-card { position: static; max-height: 400px; }
    .patch-column { min-height: auto; }
}

/* ─── Features Grid ─── */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.feature-card {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 28px;
    transition: all 0.3s;
    box-shadow: var(--glass-shadow);
}
.feature-card:hover { border-color: rgba(247, 147, 26, 0.3); transform: translateY(-4px); box-shadow: var(--glow); }
.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(247, 147, 26, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent);
    margin-bottom: 16px;
}
.feature-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-secondary); }

/* ─── CTA Section ─── */
.cta-section { padding: 60px 20px; }
.cta-box {
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.08) 0%, rgba(41, 121, 255, 0.04) 100%);

    border: 1px solid rgba(247, 147, 26, 0.15);
    border-radius: var(--radius-lg);
    padding: 60px 40px;
    text-align: center;
    box-shadow: var(--glass-shadow);
}
.cta-box h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.cta-box p { color: var(--text-secondary); margin-bottom: 24px; font-size: 16px; }

/* ─── Pricing Section ─── */
.pricing-section { padding: 60px 20px; }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.pricing-card {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    position: relative;
    transition: all 0.3s;
    box-shadow: var(--glass-shadow);
}
.pricing-card:hover { border-color: rgba(255,255,255,0.1); transform: translateY(-3px); }
.pricing-card.popular {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(247, 147, 26, 0.15);
}
.pricing-popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.pricing-header { text-align: center; margin-bottom: 24px; }
.pricing-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
}
.pricing-badge.basic { background: rgba(139,148,158,0.15); color: var(--text-secondary); }
.pricing-badge.pro { background: rgba(180,190,205,0.15); color: var(--accent); }
.pricing-badge.premium { background: rgba(170,0,255,0.15); color: var(--purple); }
.pricing-price { margin-top: 8px; }
.pricing-amount { font-size: 32px; font-weight: 800; color: var(--text-primary); }
.pricing-period { font-size: 14px; color: var(--text-muted); }
.pricing-features {
    list-style: none;
    margin-bottom: 24px;
}
.pricing-features li {
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pricing-features li i.fa-check {
    color: #0ecb81;
    font-size: 9px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 203, 129, 0.1);
    border: 1px solid rgba(14, 203, 129, 0.2);
    border-radius: 50%;
}
.pricing-features li i.fa-times {
    color: var(--text-muted);
    font-size: 9px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.pricing-features li.disabled { color: var(--text-muted); }
.btn-block { display: flex; width: 100%; justify-content: center; }

@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
}

/* ─── Trade Page (Binance Futures Style) ─── */
.trade-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--nav-height) - var(--ticker-height));
    background: var(--bg-primary);
    max-width: 100%;
    overflow-x: hidden;
    margin-top: 6px;
}

/* Symbol Top Bar (차트 컬럼 내부, 1줄) */
.symbol-top-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 12px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow: visible;
}
.symbol-selector-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    transition: background 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.symbol-selector-wrap:hover {
    background: var(--bg-card);
    box-shadow: inset 0 0 0 1px rgba(200,208,220,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
}
.symbol-selector-wrap:hover .symbol-name-display { color: #f3f4f6; }
.symbol-name-display {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
}
.symbol-dd-icon {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.symbol-selector-wrap:hover .symbol-dd-icon { transform: rotate(180deg); color: #c9ced6; }

/* Symbol Dropdown */
.symbol-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    width: 360px;
    max-height: 480px;
    background: var(--bg-card);
    border: 1px solid rgba(200,208,220,0.32);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
    z-index: 500;
    overflow: hidden;
    flex-direction: column;
}
.symbol-dropdown.show { display: flex; }
.symbol-dd-search:focus-within i { color: #c9ced6; }
.symbol-dd-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.symbol-dd-search i { color: var(--text-muted); font-size: 12px; }
.symbol-dd-search input {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    width: 100%;
    outline: none;
}
/* 코인 정렬 탭 */
.symbol-dd-sort {
    display: flex; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.dd-sort-btn {
    padding: 3px 10px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.06);
    background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
}
.dd-sort-btn.active { background: rgba(160,170,185,0.1); color: #9ca3af; border-color: rgba(160,170,185,0.2); }
.dd-sort-btn:hover:not(.active) { color: var(--text-primary); }
[data-theme="light"] .dd-sort-btn { border-color: rgba(0,0,0,0.06); }
.symbol-dd-list {
    overflow-y: auto;
    flex: 1;
}
.dd-coin {
    display: grid;
    grid-template-columns: 20px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 13px;
}
.dd-coin:hover { background: var(--bg-card-hover); }
.dd-coin.active {
    background: linear-gradient(90deg, rgba(200,208,220,0.14), rgba(160,170,185,0.05));
    box-shadow: inset 2px 0 0 #c9ced6;
}
.dd-coin.active .dd-coin-name strong,
.dd-coin.active .dd-coin-price { color: #f3f4f6; }
.dd-coin.active .dd-coin-name small { color: #c9ced6; }
[data-theme="light"] .dd-coin.active { box-shadow: inset 2px 0 0 #6b7280; }
[data-theme="light"] .dd-coin.active .dd-coin-name strong,
[data-theme="light"] .dd-coin.active .dd-coin-price { color: #1a1f2e; }
[data-theme="light"] .dd-coin.active .dd-coin-name small { color: #4b5563; }
.dd-coin-name { white-space: nowrap; }
.dd-coin-name strong { font-size: 13px; font-weight: 700; }
.dd-coin-name small { color: var(--text-muted); font-size: 11px; margin-left: 2px; }
.dd-coin-price { font-size: 12px; text-align: right; font-family: 'Pretendard', sans-serif; color: var(--text-primary); }
.dd-coin-change { font-size: 12px; text-align: right; font-weight: 600; min-width: 56px; }
.dd-coin-change.up { color: var(--green); }
.dd-coin-change.down { color: var(--red); }

/* Symbol Stats */
.symbol-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.stat-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
}
.stat-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
    min-width: 0;
    white-space: nowrap;
}
.stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.stat-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Pretendard', sans-serif;
    white-space: nowrap;
}

/* Mark Price */
.current-mark-price {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Pretendard', sans-serif;
}
.mark-change { font-size: 14px; font-weight: 600; }

/* Trade Body (3-column grid) - 심볼바 없이 바로 시작 */
.trade-body {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(220px, 260px) minmax(240px, 300px);
    height: calc(100vh - var(--nav-height) - var(--ticker-height) - 120px);
    min-height: 600px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
/* 좁은 뷰포트 (브라우저 확대 110~140% 등) → 안전 폴백 */
@media (max-width: 1100px) and (min-width: 901px) {
    .trade-body {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
    }
    /* .trade-book-col 숨김은 @media (max-width:1400px) 한 곳에서만 처리 (중복 제거) */
}
@media (max-width: 900px) and (min-width: 769px) {
    .trade-body {
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .trade-book-col { display: none !important; }
    /* .trade-body 가 height:auto 라 차트 컬럼이 내용 높이로 접힐 수 있다 — ≤768px 와 동일하게 바닥을 깔아준다 */
    .trade-chart-col { min-height: 400px; }
    /* 769~900px 사각지대 복구: 주문창을 숨기지 말고 차트 아래로 쌓는다.
       (이 구간은 innerWidth>768 이라 모바일 탭 바도 안 나와서, 숨기면 주문·레버리지·
        총자산·리필에 접근할 방법이 아예 없어진다) */
    .trade-order-col {
        display: flex !important;
        width: auto !important;
        max-width: none !important;
        border-left: none !important;
        border-top: 1px solid var(--border);
    }
}

/* Chart Column */
.trade-chart-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    padding: 0 0 0 4px;
    transition: all 0.3s;
    position: relative;
    overflow: visible;
    min-width: 0;
    background: var(--bg-primary);
}
.trade-chart-wrapper {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
.trade-chart-wrapper .trade-chart {
    width: 100%;
    height: 100%;
}
/* Chart Toolbar (Interval + Indicators + Legend) */
.chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
}
.ct-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ct-intervals {
    display: flex;
    gap: 2px;
}
.ct-sep {
    color: var(--border); font-size: 14px; margin: 0 2px;
}
.ct-indicators {
    display: flex;
    gap: 2px;
}
.ct-btn, .ct-ind {
    padding: 3px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.ct-btn:hover, .ct-ind:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.ct-btn.active { color: var(--accent); background: rgba(180,190,205,0.12); }
.ct-ind.active { color: #2979ff; background: rgba(41,121,255,0.12); }
.ct-legend {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}
.ct-legend .cl-o, .ct-legend .cl-h, .ct-legend .cl-l, .ct-legend .cl-c {
    margin-right: 8px;
}
.ct-legend .cl-c.up b { color: var(--green); }
.ct-legend .cl-c.dn b { color: var(--red); }

/* Chart Expanded Mode */
.trade-chart-col.expanded {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: var(--bg-primary);
    padding: 0;
    border: none;
    min-height: unset;
    display: flex;
    flex-direction: column;
}
.trade-chart-col.expanded .symbol-top-bar {
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.trade-chart-col.expanded .trade-chart-wrapper {
    flex: 1;
    height: auto;
}

/* Book Column (Orderbook + Recent Trades) */
.trade-book-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--bg-primary);
    overflow: hidden;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
}
.trade-book-col .ob-col-header {
    flex-shrink: 0;
}
.trade-book-col .orderbook-asks,
.trade-book-col .orderbook-bids {
    overflow: hidden;
    height: 200px;
    max-height: 200px;
    min-height: 200px;
}
.trade-book-col .orderbook-asks { margin-top: 5px; }
.trade-book-col .orderbook-bids { margin-top: 5px; }
.trade-book-col .orderbook-asks {
    display: flex;
    flex-direction: column-reverse;
}
/* PC 전용: 호가창 10줄 + 체결 4줄, 차트 아래 빈공간 제거 */
@media (min-width: 769px) {
    /* trade-body 높이 — trades 안 잘리도록 약간 늘림 */
    .trade-body {
        height: calc(100vh - var(--nav-height) - var(--ticker-height) - 160px) !important;
        min-height: 680px !important;
    }
    .trade-book-col .orderbook-asks .ob-row,
    .trade-book-col .orderbook-bids .ob-row {
        flex-shrink: 0 !important;
        height: 20px !important;
        line-height: 15px !important;
        padding: 2.5px 10px !important;
        box-sizing: border-box !important;
    }
    body .trade-book-col .orderbook-asks,
    body .trade-book-col .orderbook-bids {
        height: 200px !important;
        max-height: 200px !important;
        min-height: 200px !important;
    }
    .trade-book-col .rt-row:nth-child(n+5) { display: none !important; }
    /* AI 매니저 — 매수/매도 버튼과 살짝만 떨어뜨림 */
    .order-form .ai-manager-section {
        margin-top: 16px !important;
        padding-top: 10px !important;
    }
}
.trade-book-col .orderbook-mid {
    flex-shrink: 0;
}
.rt-divider {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.rt-divider span,
.rt-divider .rt-divider-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.trade-book-col .rt-col-header {
    flex-shrink: 0;
}
.trade-book-col .recent-trades-body {
    flex: 1 1 0;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.trade-book-col .recent-trades-body::-webkit-scrollbar { display: none; }

/* Order Column */
.trade-order-col {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow-y: auto;
}

/* Account Info */
.order-account {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}
.oa-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 12px;
}
.oa-row span:first-child { color: var(--text-muted); }
.oa-row span:last-child { font-weight: 600; color: var(--text-primary); font-family: 'Pretendard', sans-serif; font-size: 12px; }
.oa-row.total { margin-top: 0; padding-top: 2px; }
.oa-row.total span:last-child { color: var(--accent); font-size: 13px; }

/* Order Form */
.order-form {
    padding: 10px 14px;
    flex: 0 0 auto;
}
.order-form .order-type-tabs { margin-bottom: 12px; }
.order-form .order-type-btn { padding: 7px; font-size: 12px; cursor: pointer; }
.of-field {
    margin-bottom: 12px;
}
.of-field label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: 500;
}
.of-input {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.of-input:focus { border-color: var(--accent); }
.of-slider {
    --thumb-w: 14px;                 /* JS(syncSliderMarks)와 CSS 의사요소의 단일 진실원 */
    --track-h: 4px;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: var(--track-h);
    background: var(--border);
    border-radius: 2px;
    outline: none;
    position: relative;
    cursor: pointer;
    margin: 8px 0;
}
.of-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    width: var(--thumb-w, 14px);
    height: var(--thumb-w, 14px);
    border-radius: 2px;
    background: linear-gradient(135deg, #e5e7eb, var(--accent));
    cursor: pointer;
    border: 1.5px solid var(--bg-secondary);
    box-shadow: 0 0 6px rgba(180,190,205,0.5), 0 1px 3px rgba(0,0,0,0.4);
    transform: rotate(45deg);
    margin-top: calc((var(--track-h, 4px) - var(--thumb-w, 14px)) / 2);
    transition: box-shadow 0.15s;
}
.of-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 12px rgba(180,190,205,0.8), 0 2px 6px rgba(0,0,0,0.5);
}
.of-slider::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--thumb-w, 14px);
    height: var(--thumb-w, 14px);
    border-radius: 2px;
    background: linear-gradient(135deg, #e5e7eb, var(--accent));
    cursor: pointer;
    border: 1.5px solid var(--bg-secondary);
    box-shadow: 0 0 6px rgba(180,190,205,0.5), 0 1px 3px rgba(0,0,0,0.4);
    transform: rotate(45deg);
}
.of-slider::-webkit-slider-runnable-track {
    height: var(--track-h, 4px);
    border-radius: 2px;
}
.of-slider::-moz-range-track {
    height: var(--track-h, 4px);
    border-radius: 2px;
    background: var(--border);
}

/* Leverage Control */
.lev-ctrl {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}
.lev-ctrl .lev-btn {
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.lev-ctrl .lev-btn:hover { color: #c9ced6; background: rgba(180,190,205,0.06); }
.lev-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-left: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
}
.lev-ctrl input[type="number"] {
    width: 50px;
    text-align: center;
    padding: 10px 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
    outline: none;
    -moz-appearance: textfield;
}
.lev-ctrl input[type="number"]::-webkit-inner-spin-button,
.lev-ctrl input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.lev-input-x { color: var(--text-muted); font-size: 14px; font-weight: 600; }
/* Slider Area */
.lev-slider-area { padding: 4px 0; }
.lev-slider-track { position: relative; height: 28px; cursor: pointer; margin: 0 4px; }
.lev-slider-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.08); border-radius: 1px; transform: translateY(-50%); }
.lev-slider-fill { position: absolute; top: 50%; left: 0; height: 2px; background: var(--accent, #c9ced6); border-radius: 1px; transform: translateY(-50%); transition: width 0.08s; }
.lev-slider-thumb { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #e5e7eb, #9ca3af); border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 2px 8px rgba(180,190,205,0.4), 0 0 0 3px rgba(180,190,205,0.1); transform: translate(-50%,-50%); cursor: grab; z-index: 2; transition: left 0.08s linear, box-shadow 0.15s, transform 0.15s; }
.lev-slider-thumb:hover { box-shadow: 0 2px 12px rgba(180,190,205,0.5), 0 0 0 6px rgba(180,190,205,0.12); transform: translate(-50%,-50%) scale(1.1); }
.lev-slider-thumb:active { cursor: grabbing; }
.lev-slider-dots { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; padding: 0; }
.lev-sdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 2px solid var(--bg-card, #1e2329); z-index: 1; transition: background 0.15s; }
.lev-sdot.filled { background: var(--accent, #c9ced6); }
.lev-marks { display: flex; justify-content: space-between; padding: 0; margin-top: 4px; }
.lev-marks span { font-size: 10px; color: var(--text-muted); font-weight: 600; cursor: pointer; transition: color 0.15s; user-select: none; text-align: center; width: 0; display: flex; justify-content: center; }
.lev-marks span::before { display: none; }
.lev-marks span:hover { color: var(--accent); }
.btn-confirm-lev { width: 100%; padding: 14px; border-radius: 10px; border: none; background: var(--accent, #c9ced6); color: #000; font-size: 15px; font-weight: 800; cursor: pointer; transition: all 0.2s; }
.btn-confirm-lev:hover { opacity: 0.9; transform: translateY(-1px); }
.lev-learn-link { font-size: 12px; font-weight: 600; color: var(--accent, #c9ced6); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: opacity 0.2s; }
.lev-learn-link:hover { opacity: 0.7; }

/* Seed Control */
.seed-ctrl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.slider-marks-wrap {
    flex: 1;
    position: relative;
}
.slider-marks-wrap .of-slider { width: 100%; }
.seed-val {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-top: 4px;
}
.seed-num {
    width: 46px;
    text-align: center;
    padding: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    outline: none;
}
.seed-val span { color: var(--text-muted); font-size: 12px; }
.seed-info {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.seed-info strong { color: var(--text-primary); }

/* Fee Info */
.fee-info { margin-top: 2px; }
.fee-info span { font-size: 11px; color: var(--text-muted); }
.fee-info strong { color: var(--yellow); font-size: 11px; }
.fee-benefit { display:flex; align-items:center; gap:5px; }
.fee-benefit i { font-size:10px; }
.fee-benefit-premium { background:linear-gradient(135deg,rgba(180,190,205,0.08),rgba(224,64,251,0.06)); border:1px solid rgba(180,190,205,0.2); border-radius:8px; padding:4px 10px !important; }
.fee-benefit-premium .fee-benefit { color:#e5e7eb; font-size:11px; font-weight:600; }
.fee-benefit-pro { background:rgba(79,70,229,0.08); border:1px solid rgba(99,102,241,0.2); border-radius:8px; padding:4px 10px !important; }
.fee-benefit-pro .fee-benefit { color:#818cf8; font-size:11px; font-weight:600; }

/* TP/SL Order Panel */
.tpsl-order-wrap { margin-top: 6px; }
.tpsl-toggle-label { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: #9ca3af; user-select: none; padding: 6px 0; }
.tpsl-toggle-label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; pointer-events: none; }
.tpsl-toggle-label input:checked ~ .reduce-only-check { background: linear-gradient(180deg, #f3f4f6, #c9ced6); border-color: #e5e7eb; box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 8px rgba(200,208,220,0.55); }
.tpsl-toggle-label input:checked ~ .reduce-only-check::after { content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 11px; color: #0a0e14; }
.tpsl-toggle-label input:focus-visible ~ .reduce-only-check { outline: 2px solid #f3f4f6; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(200,208,220,0.28); }
.tpsl-toggle-label input:checked ~ span:last-child { color: #e5e7eb; }
.tpsl-toggle-label input:checked ~ span:last-child small { color: #c9ced6; }
.tpsl-toggle-label small { color: #6b7280; }
.tpsl-order-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; animation: fadeIn 0.2s ease; }
.tpsl-order-row { flex: 1; min-width: 0; }
.tpsl-order-fields .tpsl-apply-btn { flex-basis: 100%; }
.tpsl-order-row label { font-size: 11px; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; color: var(--text-muted); }
.tpsl-order-row .tp-dot { width: 7px; height: 7px; border-radius: 50%; background: #0ecb81; display: inline-block; }
.tpsl-order-row .sl-dot { width: 7px; height: 7px; border-radius: 50%; background: #f6465d; display: inline-block; }
.tpsl-order-row .of-input { width: 100%; padding: 7px 10px; font-size: 12px; }

/* Reduce-Only */
.reduce-only-wrap { margin-top: 6px; }
.reduce-only-label { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: #9ca3af; user-select: none; padding: 6px 0; }
.reduce-only-label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; pointer-events: none; }
.reduce-only-check { width: 16px; height: 16px; background: rgba(255,255,255,0.04); border: 1.5px solid #6b7280; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.reduce-only-label input:checked ~ .reduce-only-check { background: linear-gradient(180deg, #f3f4f6, #c9ced6); border-color: #e5e7eb; box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 8px rgba(200,208,220,0.55); }
.reduce-only-label input:checked ~ .reduce-only-check::after { content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 11px; color: #0a0e14; }
.reduce-only-label input:focus-visible ~ .reduce-only-check { outline: 2px solid #f3f4f6; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(200,208,220,0.28); }
.reduce-only-label input:checked ~ span:last-child { color: #e5e7eb; }
.reduce-only-label small { color: #6b7280; }
/* Light theme: silver fill would vanish on white — use slate ink with white glyph */
[data-theme="light"] .reduce-only-check { background: rgba(0,0,0,0.02); border-color: #64748b; }
[data-theme="light"] .tpsl-toggle-label input:checked ~ .reduce-only-check,
[data-theme="light"] .reduce-only-label input:checked ~ .reduce-only-check { background: linear-gradient(180deg, #6b7280, #4b5563); border-color: #4b5563; box-shadow: 0 0 0 1px rgba(0,0,0,0.10); }
[data-theme="light"] .tpsl-toggle-label input:checked ~ .reduce-only-check::after,
[data-theme="light"] .reduce-only-label input:checked ~ .reduce-only-check::after { color: #ffffff; }
[data-theme="light"] .tpsl-toggle-label input:checked ~ span:last-child,
[data-theme="light"] .reduce-only-label input:checked ~ span:last-child { color: #1a1f2e; }
[data-theme="light"] .tpsl-toggle-label input:focus-visible ~ .reduce-only-check,
[data-theme="light"] .reduce-only-label input:focus-visible ~ .reduce-only-check { outline-color: #1a1f2e; box-shadow: 0 0 0 4px rgba(60,70,85,0.22); }

/* Order Buttons */
.order-btns {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.order-btns .btn-long,
.order-btns .btn-short {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

/* Order Info Grid (Liq, Cost, Max) */
.order-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.oi-item {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 11px;
}
.oi-item:nth-child(odd) { padding-right: 8px; border-right: 1px solid var(--border); }
.oi-item:nth-child(even) { padding-left: 8px; }
.oi-label {
    color: var(--text-muted);
    font-size: 11px;
}
.oi-val {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 11px;
    font-family: 'Pretendard', sans-serif;
}
.order-fee-level {
    display: flex;
    justify-content: space-between;
    padding: 6px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    font-size: 11px;
}
.oi-fee-val {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
}

/* AI Manager */
.ai-manager-section {
    margin-top: 20px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.ai-mgr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.ai-mgr-header span i { color: #7b61ff; margin-right: 6px; }
.ai-mgr-usage { font-size: 10px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.ai-mgr-usage.warn { color: #f6465d; }
.ai-mgr-usage.unlimited { color: #0ecb81; }
.ai-mgr-arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.ai-mgr-body { padding: 0 0 8px; }
.ai-no-pos { font-size: 11px; color: var(--text-muted); }
.ai-pos-summary { font-size: 11px; }
.ai-pos-line { padding: 3px 0; color: var(--text-secondary); font-family: 'Pretendard', monospace; }
.ai-mgr-btn {
    width: 100%;
    padding: 8px;
    margin-top: 6px;
    background: linear-gradient(135deg, #7b61ff 0%, #5b3de6 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ai-mgr-btn:hover { opacity: 0.85; }
.ai-mgr-btn:disabled { cursor: default; opacity: 0.7; }
.ai-mgr-btn i { margin-right: 4px; }
.ai-mgr-btn.analyzing { background: linear-gradient(135deg, #1a1a2e 0%, #16162a 100%); border: 1px solid rgba(123,97,255,0.3); animation: mgrPulse 1.5s ease infinite; }
.ai-mgr-btn.analyzing:disabled { opacity: 1; }
.ai-mgr-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(123,97,255,0.3); border-top-color: #7b61ff; border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes mgrPulse { 0%,100% { box-shadow: 0 0 6px rgba(123,97,255,0.1); } 50% { box-shadow: 0 0 20px rgba(123,97,255,0.35); } }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-mgr-result { margin-top: 8px; }
.ai-loading { text-align: center; padding: 12px; color: var(--text-muted); font-size: 12px; }
.ai-result-content { font-size: 12px; line-height: 1.7; }
.ai-pos-analysis { padding: 8px 10px; margin-bottom: 6px; background: var(--bg-primary); border-radius: var(--radius-xs); border-left: 2px solid #7b61ff; }
.ai-pos-analysis strong { font-size: 13px; color: var(--text-primary); }
.ai-warn { color: #f0b90b; font-size: 11px; display: block; margin-top: 3px; padding-left: 4px; border-left: 2px solid rgba(240,185,11,0.3); }
.ai-tip { color: var(--text-secondary); font-size: 11px; display: block; margin-top: 3px; padding-left: 4px; border-left: 2px solid rgba(14,203,129,0.3); }
.ai-summary { padding: 6px 0; margin-top: 6px; border-top: 1px solid var(--border); font-size: 12px; }
.ai-portfolio-summary { padding: 8px 10px; margin-top: 8px; background: var(--bg-primary); border-radius: var(--radius-xs); border-left: 2px solid var(--accent); }
.ai-portfolio-summary strong { font-size: 13px; color: var(--text-primary); display: block; margin-bottom: 4px; }
.ai-result-time { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 6px; }
/* AI 구조화 결과 */
.ai-result-structured { display: flex; flex-direction: column; gap: 10px; }
.ai-section { background: var(--bg-primary); border-radius: var(--radius-xs); padding: 6px 8px; }
.ai-section-title { font-size: 11px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; padding-bottom: 0; border-bottom: none; line-height: 1.2; }
.ai-section-title i { color: #7b61ff; font-size: 13px; }
.ai-pos-card { background: rgba(255,255,255,0.02); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid rgba(255,255,255,0.04); }
.ai-pos-card:last-child { margin-bottom: 0; }
.ai-pos-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ai-pos-card-header strong { font-size: 13px; color: var(--text-primary); }
.ai-pos-side { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.ai-pos-side.long { background: rgba(14,203,129,0.15); color: #0ecb81; }
.ai-pos-side.short { background: rgba(246,70,93,0.15); color: #f6465d; }
.ai-pos-card-row { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; color: var(--text-secondary); }
.ai-pos-card-row .up { color: #0ecb81; font-weight: 600; }
.ai-pos-card-row .down { color: #f6465d; font-weight: 600; }
.ai-pos-card-row .ai-liq { color: #f0b90b; }
.ai-chart-wrap { position: relative; margin: 4px -4px 2px; min-height: 0; }
/* min-height 를 두면 캡처가 주문 컬럼(약 280px) 폭에서 자연 높이보다 낮아질 때
   object-fit:contain 이 남는 위아래를 배경색으로 채워 레터박스 띠가 생긴다. */
.ai-chart-img { width: 100%; height: auto; max-height: 360px; object-fit: contain; background: transparent; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); display: block; }
.ai-chart-img[src=""] { display: none; }
.ai-chart-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-legend-item { font-size: 11px; padding: 3px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s; }
.ai-legend-item.support { background: rgba(14,203,129,0.1); color: #0ecb81; border: 1px solid rgba(14,203,129,0.2); }
.ai-legend-item.resist { background: rgba(246,70,93,0.1); color: #f6465d; border: 1px solid rgba(246,70,93,0.2); }
.ai-legend-item.blurred .ai-blur-price,
.ai-legend-item.blurred .ai-blur-label { filter: blur(4px); pointer-events: none; user-select: none; opacity: 0.6; }
.ai-legend-item.blurred { cursor: default; opacity: 0.7; }
/* BETA 뱃지 */
.ai-beta-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: rgba(123,97,255,0.2); color: #a78bfa; border: 1px solid rgba(123,97,255,0.3); letter-spacing: 1px; margin-left: 6px; vertical-align: middle; }
/* 차트 블러 CTA */
.ai-chart-blur-cta { margin-top: 6px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 8px; }
.ai-blur-items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-cta-link { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: linear-gradient(135deg, rgba(123,97,255,0.12), rgba(123,97,255,0.06)); border: 1px solid rgba(123,97,255,0.25); border-radius: 6px; color: #a78bfa; font-size: 11px; text-decoration: none; transition: all 0.2s; cursor: pointer; }
.ai-cta-link:hover { background: linear-gradient(135deg, rgba(123,97,255,0.2), rgba(123,97,255,0.1)); border-color: rgba(123,97,255,0.4); color: #c4b5fd; }
.ai-cta-link strong { color: #e5e7eb; font-weight: 600; }
.ai-analysis-text { font-size: 12px; line-height: 1.4; color: var(--text-secondary); margin: 0; padding: 0; }
.ai-analysis-text br + br { display: none; }
.ai-analysis-text .ai-bullet { color: #7b61ff; font-weight: 700; margin-right: 2px; }
.ai-usage-info { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 4px; }
/* 포지션 선택 팝업 */
.ai-pos-select { background: var(--bg-primary); border: 1px solid rgba(123,97,255,0.4); border-radius: 6px; padding: 10px; margin-top: 8px; position: relative; z-index: 10; animation: aiPopIn 0.2s ease-out; box-shadow: 0 4px 24px rgba(123,97,255,0.2); }
@keyframes aiPopIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.ai-pos-select-title { font-size: 12px; font-weight: 600; color: #a78bfa; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(123,97,255,0.15); animation: aiPulseText 1.5s ease-in-out infinite; }
@keyframes aiPulseText { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.ai-pos-select-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ai-pos-select-item { background: rgba(123,97,255,0.04); border: 1px solid rgba(123,97,255,0.15); border-radius: 6px; padding: 8px 10px; cursor: pointer; transition: all 0.15s; animation: aiItemGlow 2s ease-in-out infinite; }
@keyframes aiItemGlow { 0%,100% { border-color: rgba(123,97,255,0.15); box-shadow: none; } 50% { border-color: rgba(123,97,255,0.5); box-shadow: 0 0 12px rgba(123,97,255,0.15); } }
.ai-pos-select-item:hover { background: rgba(123,97,255,0.12); border-color: rgba(123,97,255,0.5); box-shadow: 0 0 16px rgba(123,97,255,0.2); animation: none; }
.ai-pos-select-item strong { font-size: 13px; color: var(--text-primary); }
.ai-ps-info { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.ai-ps-side { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 2px; }
.ai-ps-side.long { background: rgba(14,203,129,0.12); color: #0ecb81; }
.ai-ps-side.short { background: rgba(246,70,93,0.12); color: #f6465d; }
.ai-pos-select-btns { display: flex; gap: 6px; }
.ai-pos-select-cancel { flex: 1; padding: 7px; border: none; border-radius: 4px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.06); color: var(--text-muted); cursor: pointer; }
.ai-pos-select-cancel:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.ai-pos-select-all { flex: 1; padding: 7px; border: none; border-radius: 4px; font-size: 11px; font-weight: 600; background: rgba(123,97,255,0.15); color: #a78bfa; cursor: pointer; }
.ai-pos-select-all:hover { background: rgba(123,97,255,0.25); }
/* AI 로컬 분석 블록 */
.ai-local-block { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; font-size: 12px; line-height: 1.8; color: var(--text-secondary); }
.ai-local-block:last-child { margin-bottom: 0; }
.ai-local-block strong { color: var(--text-primary); font-size: 12px; }
.ai-local-block .ai-tip { color: #0ecb81; display: block; }
.ai-local-block .ai-warn { color: #f6465d; display: block; }
/* AI 분석 유도 CTA */
.ai-promote-section { background: linear-gradient(135deg, rgba(180,190,205,0.08), rgba(123,97,255,0.08)); border: 1px solid rgba(180,190,205,0.2); text-align: center; padding: 10px 12px; }
.ai-promote-text { font-size: 12px; color: var(--text-primary); margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ai-promote-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: linear-gradient(135deg, #c9ced6, #e8820a); color: #fff !important; font-size: 12px; font-weight: 700; border-radius: 6px; text-decoration: none; transition: all 0.2s; }
.ai-promote-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(180,190,205,0.3); background: linear-gradient(135deg, #ffaa33, #c9ced6); color: #fff !important; }
/* AI 별점 평가 */
.ai-rating-section { border: 1px solid rgba(123,97,255,0.15); }
.ai-rating-wrap { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.ai-stars { display: flex; gap: 2px; }
.ai-stars .star { font-size: 22px; }
.ai-stars .star.filled { color: #f0b90b; text-shadow: 0 0 8px rgba(240,185,11,0.4); }
.ai-stars .star.half { color: #f0b90b; opacity: 0.5; text-shadow: 0 0 6px rgba(240,185,11,0.3); }
.ai-stars .star.empty { color: rgba(255,255,255,0.15); }
.ai-score { font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.ai-score small { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.ai-rating-comment { font-size: 12px; color: var(--text-secondary); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 8px; }
.ai-score-details { display: flex; flex-direction: column; gap: 6px; }
.ai-score-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.ai-score-label { width: 70px; color: var(--text-muted); flex-shrink: 0; }
.ai-score-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.ai-score-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.ai-score-val { width: 24px; text-align: right; color: var(--text-secondary); font-weight: 600; }

/* Position Actions Bar */
.pos-actions-bar {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
}
.pos-act-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.15s;
}
.pos-act-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--accent); }
.pos-act-btn i { margin-right: 4px; font-size: 10px; }

/* Position Table - Binance Style */
.pos-table th { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: none; padding: 6px 8px; white-space: nowrap; }
.pos-table td { padding: 8px 8px; font-size: 12px; vertical-align: middle; }
.pos-sym strong { font-size: 12px; }
.side-badge-sm { font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.side-badge-sm.long { color: #0ecb81; background: rgba(14,203,129,0.1); }
.side-badge-sm.short { color: #f6465d; background: rgba(246,70,93,0.1); }
.pos-mr { font-weight: 600; }
.pos-mr.warn { color: #f0b90b; }
.pos-mr.danger { color: #f6465d; }
.pos-tpsl { font-size: 11px; white-space: nowrap; }
.pos-tpsl .tpsl-btn-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    border: none;
    transition: all 0.15s;
    margin: 1px 0;
}
.pos-tpsl .tp-btn-inline {
    background: rgba(14,203,129,0.1);
    color: #0ecb81;
}
.pos-tpsl .tp-btn-inline:hover { background: rgba(14,203,129,0.25); }
.pos-tpsl .sl-btn-inline {
    background: rgba(246,70,93,0.1);
    color: #f6465d;
}
.pos-tpsl .sl-btn-inline:hover { background: rgba(246,70,93,0.25); }
.pos-tpsl .tpsl-add-btn {
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    border: 1px dashed var(--border);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.pos-tpsl .tpsl-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.tp-val { color: #0ecb81; }
.sl-val { color: #f6465d; }
.pos-actions { white-space: nowrap; }
.pos-actions .btn-close-pos {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(246,70,93,0.15);
    color: #f6465d;
    border: 1px solid rgba(246,70,93,0.3);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}
.pos-actions .btn-close-pos:hover { background: #f6465d; color: #fff; }

/* TP/SL Edit Popup */
.tpsl-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tpsl-popup {
    width: 460px;
    max-width: 94vw;
    background: linear-gradient(160deg, #1a1d28 0%, #0d1017 100%);
    border: 1px solid rgba(200,208,220,0.32);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    position: relative;
    animation: tpslPopIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.tpsl-popup::before {
    content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(243,244,246,0.9) 35%, rgba(200,208,220,0.9) 65%, transparent);
    pointer-events: none; z-index: 3;
}
@keyframes tpslPopIn { from { opacity:0; transform:scale(0.9) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
.tpsl-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(200,208,220,0.14);
    background: transparent;
}
.tpsl-popup-header span {
    font-size: 15px; font-weight: 900; letter-spacing: -0.3px;
    background: linear-gradient(180deg, #f3f4f6, #c9ced6);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.tpsl-popup-close {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(200,208,220,0.16);
    color: #94a3b8; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.tpsl-popup-close:hover { background: rgba(200,208,220,0.12); color: #f3f4f6; border-color: rgba(200,208,220,0.4); }
.tpsl-popup-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tpsl-popup-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    font-size: 12px;
    color: #c9ced6;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(200,208,220,0.09), rgba(160,170,185,0.03));
    border: 1px solid rgba(200,208,220,0.24);
    border-radius: 10px;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.tpsl-popup-info .pos-side-tag {
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.tpsl-popup-info .pos-side-tag.long { color: #0ecb81; background: rgba(14,203,129,0.12); border: 1px solid rgba(14,203,129,0.2); }
.tpsl-popup-info .pos-side-tag.short { color: #f6465d; background: rgba(246,70,93,0.12); border: 1px solid rgba(246,70,93,0.2); }
.tpsl-field-group { display: flex; flex-direction: column; gap: 6px; }
.tpsl-field-group label {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 8px;
    color: #e5e7eb;
}
.tpsl-apply-btn {
    width: 100%; padding: 8px; margin-top: 6px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.5);
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 30%, #c9ced6 70%, #aab1bd 100%);
    color: #0a0e14;
    font-size: 12px; font-weight: 800; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(200,208,220,0.28), inset 0 1px 0 rgba(255,255,255,0.75);
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.tpsl-apply-btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(200,208,220,0.42), inset 0 1px 0 rgba(255,255,255,0.85); }
.tpsl-field-group label .tp-dot { width: 8px; height: 8px; border-radius: 50%; background: #0ecb81; box-shadow: 0 0 6px rgba(14,203,129,0.4); }
.tpsl-field-group label .sl-dot { width: 8px; height: 8px; border-radius: 50%; background: #f6465d; box-shadow: 0 0 6px rgba(246,70,93,0.4); }
.tpsl-field-group .of-input {
    padding: 12px 14px;
    font-size: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(200,208,220,0.20);
    border-radius: 10px;
    color: #f3f4f6;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.tpsl-field-group .of-input:hover { border-color: rgba(200,208,220,0.35); }
.tpsl-field-group .of-input:focus {
    border-color: rgba(200,208,220,0.7); outline: none;
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 0 3px rgba(200,208,220,0.14), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tpsl-field-group .of-input::placeholder { color: #6b7280; }
.tpsl-popup-btns {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.tpsl-popup-btns .btn-tpsl-confirm {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 30%, #c9ced6 70%, #aab1bd 100%);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 10px;
    color: #0a0e14;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 6px 20px rgba(200,208,220,0.35), inset 0 1px 0 rgba(255,255,255,0.75);
}
.tpsl-popup-btns .btn-tpsl-confirm:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 12px 32px rgba(200,208,220,0.5), inset 0 1px 0 rgba(255,255,255,0.85); }
.tpsl-popup-btns .btn-tpsl-cancel {
    padding: 12px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(200,208,220,0.20);
    border-radius: 10px;
    color: #c9ced6;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.tpsl-popup-btns .btn-tpsl-cancel:hover { background: rgba(200,208,220,0.12); border-color: rgba(200,208,220,0.45); color: #f3f4f6; }
.text-muted { color: var(--text-muted); }

/* Trade Bottom (Full Width) */
.trade-bottom {
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.trade-bottom .trade-tabs { padding: 0 16px 16px; }
.trade-bottom .position-levels-bar { margin: 8px 16px 0; }

/* Trade Chart — TradingView iframe 배경/테두리 완전 제거 */
.trade-chart {
    width: 100%;
    height: 100%;
    background: #060910 !important;
}
[data-theme="light"] .trade-chart { background: #ffffff !important; }
#tradeChartWidget,
#tradeChartWidget > div,
#tradeChartWidget > div > div,
#tradeChartWidget > div > div > div,
#tradeChartWidget > div > div > div > div {
    background: #060910 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-color: #060910 !important;
    outline: none !important;
    box-shadow: none !important;
}
[data-theme="light"] #tradeChartWidget,
[data-theme="light"] #tradeChartWidget > div,
[data-theme="light"] #tradeChartWidget > div > div,
[data-theme="light"] #tradeChartWidget > div > div > div,
[data-theme="light"] #tradeChartWidget > div > div > div > div {
    background: #ffffff !important;
    border-color: #ffffff !important;
}
#tradeChartWidget iframe,
.trade-chart-wrapper iframe,
#tradeChartWidget > div > iframe,
#tradeChartWidget > div > div > iframe {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.trade-chart-wrapper {
    background: #060910 !important;
}
/* TradingView 자체 생성 클래스 타겟 */
.tradingview-widget-container,
.tradingview-widget-container > div,
.tradingview-widget-container__widget {
    background: #060910 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}
[data-theme="light"] .tradingview-widget-container,
[data-theme="light"] .tradingview-widget-container > div,
[data-theme="light"] .tradingview-widget-container__widget {
    background: #ffffff !important;
}
[data-theme="light"] .trade-chart-wrapper { background: #ffffff !important; }
.trade-chart-col {
    background: #060910 !important;
}
[data-theme="light"] .trade-chart-col { background: #ffffff !important; }

/* Chart Toolbar Buttons */
.chart-interval-btns {
    display: flex;
    gap: 2px;
}
.intv-btn {
    padding: 2px 7px;
    font-size: 11px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.intv-btn:hover { color: var(--text-primary); background: var(--bg-card); }
.intv-btn.active { color: var(--accent); font-weight: 700; }
.chart-indicator-btns {
    display: flex;
    gap: 2px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--border);
}
.indi-btn {
    padding: 2px 7px;
    font-size: 10px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 3px;
}
.indi-btn:hover { color: var(--text-primary); background: var(--bg-card); }
.indi-btn.active { color: var(--accent); font-weight: 600; }
.indi-btn i { font-size: 10px; }
.chart-toolbar .chart-expand-btn { margin-left: auto; padding: 2px 10px; font-size: 11px; }

/* Trade Tabs */
.trade-tabs { padding: 0 20px 20px; }
.tab-header {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.tab-btn {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Trade Table */
.table-responsive { overflow-x: auto; }
.trade-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.trade-table thead th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--bg-primary);
}
.trade-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(30, 45, 61, 0.4);
    white-space: nowrap;
    font-size: 12px;
}
.trade-table tbody tr:hover:not(.empty-row) { background: var(--bg-card-hover); }
.empty-row td { text-align: center; color: var(--text-muted); padding: 40px 12px !important; cursor: default; }
.empty-row:hover td, .empty-row:hover { background: transparent !important; }

.side-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}
.side-badge.long { background: var(--green-bg); color: var(--green); }
.side-badge.short { background: var(--red-bg); color: var(--red); }

.close-type { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.close-type.manual { background: rgba(41, 121, 255, 0.1); color: var(--blue); }
.close-type.tp { background: var(--green-bg); color: var(--green); }
.close-type.sl { background: var(--red-bg); color: var(--red); }
.close-type.liq { background: rgba(170, 0, 255, 0.1); color: var(--purple); }

.btn-cancel-order {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--text-muted);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.btn-cancel-order:hover { background: var(--bg-card); }

/* Account Card (Sidebar) */
.account-card, .order-card, .orderbook-card {
    padding: 20px;
    border-bottom: 1px solid var(--border);
}
.account-header h3, .order-header h3, .orderbook-header h3 {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.account-header h3 i, .order-header h3 i, .orderbook-header h3 i { color: var(--accent); }
.account-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}
.account-row span:first-child { color: var(--text-muted); }
.account-value { font-weight: 600; }
.account-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; }
.account-row.total .account-value { color: var(--accent); font-size: 15px; }

/* Order Form */
.order-type-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.order-type-btn {
    flex: 1;
    padding: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}
.order-type-btn.active {
    background: linear-gradient(135deg, rgba(200,208,220,0.16), rgba(160,170,185,0.07));
    border-color: rgba(200,208,220,0.55);
    color: #f3f4f6;
    box-shadow: 0 0 10px -2px rgba(200,208,220,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
}
[data-theme="light"] .order-type-btn.active {
    background: linear-gradient(135deg, rgba(60,70,85,0.10), rgba(60,70,85,0.04));
    border-color: rgba(60,70,85,0.35);
    color: #1a1f2e;
    box-shadow: none;
}

.order-field { margin-bottom: 16px; }
.order-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; }
.order-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.order-input:focus { border-color: var(--accent); }

.leverage-control {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lev-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.lev-btn:hover { border-color: var(--accent); }
.leverage-control input[type="number"] {
    width: 60px;
    text-align: center;
    padding: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    outline: none;
}
.lev-suffix { color: var(--text-muted); font-size: 14px; }
.leverage-slider, .seed-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    margin-top: 8px;
}
.leverage-slider::-webkit-slider-thumb, .seed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-secondary);
}

.seed-control { display: flex; align-items: center; gap: 12px; }
.seed-control .seed-slider { flex: 1; }
.seed-display { display: flex; align-items: center; gap: 2px; }
.seed-input {
    width: 50px;
    text-align: center;
    padding: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    outline: none;
}
.seed-display span { color: var(--text-muted); font-size: 13px; }
.seed-info {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.seed-info strong { color: var(--text-primary); }

.order-actions { display: flex; gap: 8px; }
.btn-long, .btn-short {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    cursor: pointer;
}
.btn-long { background: #0ecb81; color: #fff; }
.btn-long:hover { background: #0bb573; }
.btn-short { background: #f6465d; color: #fff; }
.btn-short:hover { background: #e03b52; }

/* Order Book */
.ob-col-header, .rt-col-header {
    display: grid;
    grid-template-columns: 85px 1fr 1fr;
    padding: 4px 10px;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}
.rt-col-header { grid-template-columns: 1fr 1fr 1fr; }
.ob-col-header span:last-child, .rt-col-header span:last-child { text-align: right; }
.ob-col-header span:nth-child(2), .rt-col-header span:nth-child(2) { text-align: right; }
.orderbook-body { font-size: 11px; font-family: 'Pretendard', sans-serif; }
.ob-row {
    display: grid;
    grid-template-columns: 85px 1fr 1fr;
    align-items: center;
    padding: 2.5px 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.1s;
    overflow: hidden;
}
.ob-row:hover { background: rgba(255,255,255,0.03); }
.ob-row .ob-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ob-row.ask .ob-bar { background: rgba(246,70,93,0.10); }
.ob-row.bid .ob-bar { background: rgba(14,203,129,0.10); }
/* 단위 선택 드롭다운 */
.ob-tick-select {
    padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); cursor: pointer; outline: none;
}
.ob-tick-select:focus { border-color: rgba(160,170,185,0.3); }
[data-theme="light"] .ob-tick-select { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
/* PC: 호가창 + 체결내역 공존 */
.trade-book-col .rt-divider { flex-shrink: 0; }
.trade-book-col .rt-col-header { flex-shrink: 0; }
.trade-book-col .recent-trades-body { flex: 0 0 auto; overflow: hidden; }
/* 매수/매도 경쟁 게이지바 */
.ob-power-bar {
    display: flex; align-items: center; gap: 4px; padding: 4px 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.ob-power-label { font-size: 10px; font-weight: 800; min-width: 32px; }
.ob-power-buy { color: #0ecb81; text-align: left; }
.ob-power-sell { color: #f6465d; text-align: right; }
.ob-power-track {
    flex: 1; height: 6px; border-radius: 3px; display: flex; overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.ob-power-fill-buy {
    height: 100%; background: linear-gradient(90deg, #0ecb81, #10b981);
    border-radius: 3px 0 0 3px; transition: width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ob-power-fill-sell {
    height: 100%; background: linear-gradient(90deg, #e8364e, #f6465d);
    border-radius: 0 3px 3px 0; transition: width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
[data-theme="light"] .ob-power-track { background: rgba(0,0,0,0.04); }
.ob-row.ask .ob-price { color: var(--red); }
.ob-row.bid .ob-price { color: var(--green); }
.ob-price { font-weight: 600; z-index: 1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-qty { color: var(--text-secondary); z-index: 1; text-align: right; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-cumul { color: var(--text-muted); z-index: 1; text-align: right; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orderbook-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(247, 147, 26, 0.03);
}
.ob-mid-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
    font-family: 'Pretendard', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.orderbook-mid .ob-mid-mark {
    font-size: 10px;
    color: var(--text-muted);
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: 'Pretendard', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mark Price Color */
.current-mark-price.up { color: var(--green); }
.current-mark-price.down { color: var(--red); }

/* Funding Rate */
.funding-value { font-family: 'Pretendard', sans-serif; font-weight: 700; }
.funding-value.up { color: var(--green); }
.funding-value.down { color: var(--red); }

/* Recent Trades */
.recent-trades-card {
    border-top: 1px solid var(--border);
}
.recent-trades-header {
    padding: 12px 20px 8px;
}
.recent-trades-header h3 {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.recent-trades-header h3 i { color: var(--yellow); }
.recent-trades-body {
    overflow-y: auto;
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    padding-top: 6px;
}
.rt-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 1px 10px;
    transition: background 0.1s;
}
.rt-row:hover { background: rgba(255,255,255,0.02); }
.rt-price { font-weight: 600; }
.rt-row.up .rt-price { color: var(--green); }
.rt-row.down .rt-price { color: var(--red); }
.rt-qty { color: var(--text-secondary); text-align: right; }
.rt-time { color: var(--text-muted); text-align: right; font-size: 10px; }

/* ─── Analysis Page ─── */
.analysis-layout { max-width: 1400px; margin: 0 auto; }

/* Hero Split: left image + right text */
.analysis-hero-split {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 40px 20px;
    min-height: 420px;
}
.hero-split-img {
    flex-shrink: 0;
    width: 400px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(180,190,205,0.08) 0%, rgba(41,121,255,0.06) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-split-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-gif-placeholder {
    background: linear-gradient(135deg, rgba(180,190,205,0.12), rgba(41,121,255,0.08));
}
.hero-split-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero-split-text h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 4px;
    line-height: 1.3;
}
.hero-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}
.hero-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.hero-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}
.hero-feat i {
    color: var(--accent);
    width: 18px;
    text-align: center;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
}
@media (max-width: 900px) {
    .analysis-hero-split { flex-direction: column; gap: 24px; text-align: center; }
    .hero-split-img { width: 280px; height: 280px; }
    .hero-features { align-items: center; }
    .hero-cta { align-self: center; }
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(41, 121, 255, 0.1);
    border: 1px solid rgba(41, 121, 255, 0.3);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
}

.analysis-section { padding: 30px 20px; }
.analysis-section h2 { font-size: 20px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.analysis-section h2 i { color: var(--accent); }

.market-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.overview-card {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    box-shadow: var(--glass-shadow);
}
.overview-card h3 { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; text-transform: uppercase; }
.big-stat { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.stat-desc { font-size: 12px; color: var(--text-muted); }

/* Fear & Greed */
.fear-greed-gauge { position: relative; display: flex; flex-direction: column; align-items: center; }
.fg-value { font-size: 32px; font-weight: 800; margin-top: -10px; }
.fg-label { font-size: 14px; font-weight: 600; }
.fg-label.fear { color: var(--red); }
.fg-label.neutral { color: var(--yellow); }
.fg-label.greed { color: var(--green); }

/* TA Grid */
.ta-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
}
.ta-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.ta-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.ta-summary-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.ta-indicator {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(30, 45, 61, 0.5);
}
.ta-label { flex: 1; font-size: 13px; color: var(--text-secondary); }
.ta-value { font-size: 13px; font-weight: 600; margin-right: 12px; }
.ta-signal {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}
.ta-signal.buy { background: var(--green-bg); color: var(--green); }
.ta-signal.sell { background: var(--red-bg); color: var(--red); }
.ta-signal.neutral { background: rgba(255, 171, 0, 0.1); color: var(--yellow); }

.ta-overall { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; }
.ta-overall h4 { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.ta-overall-signal { font-size: 18px; }
.signal-buy { color: var(--green); font-weight: 800; }
.signal-sell { color: var(--red); font-weight: 800; }
.signal-neutral { color: var(--yellow); font-weight: 800; }

/* AI Insights */
.ai-insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.insight-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.insight-card.full-width { grid-column: 1 / -1; }
.insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.insight-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 700;
}
.insight-type.bullish { background: var(--green-bg); color: var(--green); }
.insight-type.bearish { background: var(--red-bg); color: var(--red); }
.insight-type.neutral { background: rgba(255, 171, 0, 0.1); color: var(--yellow); }
.insight-time { font-size: 12px; color: var(--text-muted); }
.insight-body p { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; }
.insight-body p i { margin-top: 3px; flex-shrink: 0; }
.insight-body .fa-check-circle { color: var(--green); }
.insight-body .fa-exclamation-circle { color: var(--red); }
.insight-body .fa-exclamation-triangle { color: var(--yellow); }
.insight-loading { color: var(--text-muted); text-align: center; padding: 20px; }

/* Key Levels */
.levels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.level-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.level-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.level-card.resistance h3 { color: var(--red); }
.level-card.support h3 { color: var(--green); }
.level-card.current { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.current-price-large { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.current-change { font-size: 16px; font-weight: 700; }
.level-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(30, 45, 61, 0.5);
    font-size: 13px;
}
.level-item span:first-child { color: var(--text-muted); font-weight: 500; }
.level-price { font-weight: 600; }

/* Custom Technical Analysis Widget */
.ta-pair { font-size: 14px; color: var(--accent); font-weight: 600; margin-left: 8px; }
.ta-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}
.ta-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.ta-intervals { display: flex; gap: 4px; }
.ta-iv {
    padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px;
    background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.ta-iv:hover { color: var(--text-primary); border-color: var(--text-muted); }
.ta-iv.active { color: var(--accent); border-color: var(--accent); background: rgba(180,190,205,0.1); }
.ta-updated { font-size: 11px; color: var(--text-muted); }
.ta-summary-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--border);
}
.ta-gauge-box {
    background: var(--bg-card); padding: 20px 16px; text-align: center;
}
.ta-gauge-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.ta-gauge { margin-bottom: 8px; }
.ta-gauge-bar {
    position: relative; height: 6px; border-radius: 3px; margin: 0 auto; max-width: 200px;
    background: linear-gradient(to right, #f6465d 0%, #f6465d 20%, #c9ced6 20%, #c9ced6 40%, #8b949e 40%, #8b949e 60%, #4caf50 60%, #4caf50 80%, #0ecb81 80%, #0ecb81 100%);
}
.ta-gauge-fill { display: none; }
.ta-gauge-needle {
    position: absolute; top: -4px; width: 3px; height: 14px; background: #fff;
    border-radius: 2px; transform: translateX(-50%); transition: left 0.5s ease;
    box-shadow: 0 0 6px rgba(255,255,255,0.5); left: 50%;
}
.ta-gauge-labels {
    display: flex; justify-content: space-between; font-size: 9px; color: var(--text-muted);
    margin-top: 6px; max-width: 220px; margin-left: auto; margin-right: auto;
}
.ta-gauge-value {
    font-size: 16px; font-weight: 700; margin-top: 4px;
}
.ta-gauge-value.strong-buy { color: #0ecb81; }
.ta-gauge-value.buy { color: #4caf50; }
.ta-gauge-value.neutral { color: #8b949e; }
.ta-gauge-value.sell { color: #c9ced6; }
.ta-gauge-value.strong-sell { color: #f6465d; }
.ta-tables-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: var(--border); border-top: 1px solid var(--border);
}
.ta-table-box { background: var(--bg-card); padding: 16px; }
.ta-table-box h4 { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; font-weight: 600; }
.ta-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ta-table th { color: var(--text-muted); font-weight: 500; padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); font-size: 11px; }
.ta-table td { padding: 5px 8px; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.03); }
.ta-sig { font-weight: 700; text-align: center; }
.ta-sig.buy { color: #0ecb81; }
.ta-sig.sell { color: #f6465d; }
.ta-sig.neutral { color: var(--text-muted); }
.ta-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(10,14,23,0.8); color: var(--text-muted); font-size: 14px; z-index: 5;
}
@media (max-width: 768px) {
    .ta-summary-row { grid-template-columns: 1fr; }
    .ta-tables-row { grid-template-columns: 1fr; }
}

/* ─── Ranking Page ─── */
.ranking-layout { max-width: 1200px; margin: 0 auto; }
.ranking-hero {
    text-align: center;
    padding: 40px 20px 20px;
    background: radial-gradient(ellipse at 50% 50%, rgba(247, 147, 26, 0.08) 0%, transparent 60%);
}
.ranking-hero h1 { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.ranking-hero h1 i { color: var(--accent); }
.ranking-hero p { color: var(--text-secondary); }

.podium { margin-bottom: 40px; }
.podium-grid { display: flex; justify-content: center; gap: 20px; }
.podium-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    width: 220px;
    transition: transform 0.3s;
}
.podium-card:hover { transform: translateY(-4px); }
.podium-card.rank-1 { order: 2; transform: scale(1.05); }
.podium-card.rank-2 { order: 1; }
.podium-card.rank-3 { order: 3; }
.podium-medal { font-size: 36px; margin-bottom: 8px; }
.podium-rank { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.podium-avatar { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 12px; border: 3px solid var(--border); object-fit: cover; }
.podium-avatar-placeholder {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; background: var(--bg-input);
    display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-muted);
}
.podium-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.podium-roi { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.podium-equity { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.podium-trades { font-size: 12px; color: var(--text-muted); }

.ranking-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.ranking-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.ranking-table-header h3 { font-size: 16px; font-weight: 700; }
.rank-sort-th { user-select: none; transition: color 0.15s; color: var(--text-secondary); }
.rank-sort-th:hover { color: var(--accent); }
.rank-sort-th.active { color: var(--accent); }
.rank-sort-th i { font-size: 10px; margin-left: 3px; }

.ranking-table td { padding: 12px 20px; vertical-align: middle; }
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-input);
    color: var(--text-secondary);
    vertical-align: middle;
}
.rank-badge.rank-1, .rank-badge.rank-2, .rank-badge.rank-3 { background: none; border-radius: 0; }
.trader-cell { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.rank-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.08); }
.rank-avatar-placeholder {
    width: 32px; height: 32px; border-radius: 50%; background: var(--bg-input);
    display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-muted); flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.06);
}
.top-rank { background: rgba(247, 147, 26, 0.03); }

/* ─── Community Page ─── */
.community-layout { max-width: 1200px; margin: 0 auto; }
.community-hero {
    text-align: center;
    padding: 40px 20px 20px;
    background: radial-gradient(ellipse at 50% 50%, rgba(41, 121, 255, 0.05) 0%, transparent 60%);
}
.community-hero h1 { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.community-hero h1 i { color: var(--blue); }
.community-hero p { color: var(--text-secondary); }

.community-grid { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.category-card, .community-stats-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.category-card h3, .community-stats-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.cat-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 13px;
    transition: all 0.2s;
    margin-bottom: 2px;
}
.cat-link:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.cat-link.active { color: var(--accent); background: rgba(247, 147, 26, 0.1); }
.cat-count { margin-left: auto; font-size: 11px; background: var(--bg-input); padding: 1px 6px; border-radius: 8px; }
.comm-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.comm-stat span { margin-left: auto; font-weight: 600; color: var(--text-primary); }
.comm-stat i { color: var(--accent); width: 16px; text-align: center; }

.posts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.posts-header h2 { font-size: 18px; font-weight: 700; }

.new-post-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}
.post-title-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    outline: none;
}
.post-title-input:focus { border-color: var(--accent); }
.post-content-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 14px;
    resize: vertical;
    outline: none;
    margin-bottom: 12px;
}
.post-content-input:focus { border-color: var(--accent); }
.post-form-actions { display: flex; justify-content: space-between; align-items: center; }
.post-category-select {
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}
.post-form-actions div { display: flex; gap: 8px; }

.post-item {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 12px;
    transition: all 0.3s;
    box-shadow: var(--glass-shadow);
}
.post-item:hover { border-color: rgba(255,255,255,0.1); }
.post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.post-category {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}
.cat-free { background: rgba(41, 121, 255, 0.1); color: var(--blue); }
.cat-analysis { background: rgba(247, 147, 26, 0.1); color: var(--accent); }
.cat-news { background: rgba(0, 200, 83, 0.1); color: var(--green); }
.cat-qna { background: rgba(170, 0, 255, 0.1); color: var(--purple); }
.post-author { color: var(--text-secondary); font-weight: 500; }
.post-date { color: var(--text-muted); }
.post-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.post-title a { color: var(--text-primary); }
.post-title a:hover { color: var(--accent); }
.post-preview { font-size: 14px; color: var(--text-secondary); margin-bottom: 10px; }
.post-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.post-stats i { margin-right: 4px; }

.pagination { display: flex; justify-content: center; gap: 4px; margin-top: 20px; }
.page-btn {
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 13px;
    transition: all 0.2s;
}
.page-btn.active { background: rgba(247, 147, 26, 0.1); border-color: var(--accent); color: var(--accent); }

/* ─── MyPage ─── */
.mypage-layout { max-width: 1200px; margin: 0 auto; }
.mypage-hero {
    padding: 40px 20px 16px;
    /* 프로필 헤더 배경 틴트 제거 — 아바타+이름 주위 이상한 네모 색으로 보임 (유저 요청) */
    background: none;
}
.mypage-profile { display: flex; align-items: center; gap: 20px; }
.mypage-avatar-wrap { width: 86px; height: 86px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s, border-color 0.3s; position: relative; box-sizing: border-box; box-shadow: none !important; }
.mypage-avatar-edit { position:absolute; bottom:0; right:0; width:26px; height:26px; border-radius:50%; border:2px solid var(--bg-primary,#0d1117); background:rgba(160,170,185,0.9); color:#fff; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; z-index:3; }
.mypage-avatar-edit:hover { background:#9ca3af; transform:scale(1.1); }
/* 아바타 — 기본 테두리 없음 (착용한 테두리 아이템은 wrap 에 적용됨) */
.mypage-avatar, .mypage-avatar-placeholder {
    width: 80px; height: 80px; border-radius: 50%;
    border: none;
    box-sizing: border-box;
    object-fit: cover; object-position: center;
    overflow: hidden;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    display: block;
}
.mypage-avatar-placeholder {
    background: var(--bg-card);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--text-muted);
}
.mypage-info h1 { font-size: 24px; font-weight: 800; }
.mypage-info p { color: var(--text-secondary); font-size: 14px; }
.mypage-since { font-size: 12px; color: var(--text-muted); }
.mypage-follow-stats { display: flex; gap: 16px; margin-top: 10px; }
.mypage-follow-item { font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; cursor: pointer; }
.mypage-follow-item:hover { color: var(--text-primary); }
.mypage-follow-num { font-weight: 800; color: var(--text-primary); font-size: 15px; margin-right: 2px; }

.mypage-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.mypage-stat-card {
    background: linear-gradient(135deg, rgba(20,26,38,0.72), rgba(10,14,22,0.92));
    border: 1px solid rgba(200,208,220,0.32);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 12px rgba(0,0,0,0.18);
    position: relative;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
/* 상단 실버 헤어라인 */
.mypage-stat-card::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg,transparent,rgba(243,244,246,0.55) 45%,rgba(200,208,220,0.55) 55%,transparent);
    pointer-events: none;
}
.mypage-stat-card:hover {
    border-color: rgba(210,215,225,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 20px rgba(0,0,0,0.28);
}
.stat-icon {
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(200,208,220,0.16), rgba(160,170,185,0.06));
    border: 1px solid rgba(200,208,220,0.22);
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #e5e7eb;
}
.stat-content { flex: 1; }
.stat-content .stat-label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 4px; }
.stat-content .stat-value { font-size: 18px; font-weight: 700; color: #f3f4f6; }
/* 손익 시맨틱 컬러 — 실버로 덮지 않는다 */
.stat-content .stat-value.up { color: var(--green); }
.stat-content .stat-value.down { color: var(--red); }

.mypage-section { margin-top: 24px; }
.mypage-section h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.mypage-section h2 i { color: var(--accent); }

/* ─── Login Page ─── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    position: relative;
}
#bgCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.login-container {
    display: grid;
    grid-template-columns: 1fr 440px;
    max-width: 1000px;
    width: 100%;
    margin: 0 20px;
    position: relative;
    z-index: 1;
}
.login-left { padding: 40px; }
.login-brand { margin-bottom: 40px; text-align: left; }
.login-logo { height: 80px; width: auto; object-fit: contain; margin-bottom: 16px; display: block; }
.brand-tagline { color: var(--text-secondary); font-size: 16px; }

.login-features { display: flex; flex-direction: column; gap: 20px; }
.feature-item { display: flex; align-items: flex-start; gap: 14px; }
.feature-item i {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(247, 147, 26, 0.1); color: var(--accent); font-size: 16px; flex-shrink: 0;
}
.feature-item h3 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.feature-item p { font-size: 13px; color: var(--text-secondary); }

.login-right { padding: 40px; }
.login-box {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--glass-shadow);
}
.login-box h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.login-subtitle { color: var(--text-secondary); font-size: 14px; margin-bottom: 28px; }

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    background: #fff;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    transition: all 0.2s;
}
.btn-google:hover { background: #f1f1f1; color: #333; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.btn-google svg { flex-shrink: 0; }

.login-divider {
    text-align: center;
    margin: 14px 0 12px;
    position: relative;
}
.login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}
.login-divider span {
    position: relative;
    background: var(--bg-card);
    padding: 0 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.btn-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}
.btn-demo:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Social Login Circle Buttons ─── */
.social-login-circles {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
}
.social-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
}
.social-circle:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.social-circle svg { flex-shrink: 0; }
.social-circle.google { background: #fff; }
.social-circle.google:hover { border-color: rgba(66,133,244,0.4); box-shadow: 0 6px 20px rgba(66,133,244,0.2); }
.social-circle.kakao { background: #FEE500; }
.social-circle.kakao:hover { border-color: rgba(245,220,0,0.5); box-shadow: 0 6px 20px rgba(254,229,0,0.2); }
.social-circle.naver { background: #03C75A; }
.social-circle.naver:hover { border-color: rgba(3,199,90,0.4); box-shadow: 0 6px 20px rgba(3,199,90,0.2); }
.social-circle.discord { background: #5865F2; }
.social-circle.discord:hover { border-color: rgba(88,101,242,0.4); box-shadow: 0 6px 20px rgba(88,101,242,0.2); }

/* ─── Email Auth Tabs ─── */
.email-auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.auth-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.auth-tab:hover { color: var(--text-primary); }
.auth-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ─── Auth Form ─── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.form-input {
    width: 100%;
    padding: 13px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    transition: var(--transition-smooth);
    box-sizing: border-box;
}
.form-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.08), 0 0 12px rgba(232, 168, 56, 0.06);
}
.form-input::placeholder {
    color: var(--text-muted);
}
.btn-email-submit {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #000;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
}
.btn-email-submit:hover {
    background: #e58a16;
    transform: translateY(-1px);
}

/* ─── Login Error ─── */
.login-error {
    background: rgba(246,70,93,0.1);
    border: 1px solid rgba(246,70,93,0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #f6465d;
}

.login-terms {
    margin-top: 20px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.login-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 24px;
}
.login-stats .stat-item { text-align: center; }
.login-stats .stat-number { display: block; font-size: 20px; font-weight: 800; color: var(--accent); }
.login-stats .stat-label { font-size: 12px; color: var(--text-muted); }

/* ─── Toast Notifications ─── */
/* ─── 커스텀 툴팁 (브라우저 기본 title 대체) ─── */
[data-tip] { position: relative; }
[data-tip]::before, [data-tip]::after {
    position: absolute; left: 50%;
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
[data-tip]::before {
    content: attr(data-tip);
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    padding: 8px 12px;
    background: rgba(15,19,32,0.97); color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1.5;
    border-radius: 10px;
    border: 1px solid rgba(180,190,205,0.25);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    white-space: pre-line; max-width: 280px; width: max-content;
    text-align: center;
    z-index: 300000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-tip]::after {
    content: '';
    bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: rgba(15,19,32,0.97);
    z-index: 300000;
}
[data-tip]:hover::before, [data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-theme="light"] [data-tip]::before {
    background: rgba(255,255,255,0.98); color: #1a1a2e;
    border-color: rgba(180,190,205,0.35);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
[data-theme="light"] [data-tip]::after { border-top-color: rgba(255,255,255,0.98); }

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 14px 20px;
    background: var(--glass-bg);
    /* 반투명은 유지하되 뒤를 흐려서 글자가 배경과 섞이지 않게 한다.
       라이트 테마의 --glass-bg 는 0.85 라 blur 가 없으면 뒤 내용이 그대로 비쳐 읽을 수 없었다.
       색을 명시하지 않으면 부모에서 상속돼 배경과 대비가 무너지는 경우가 있어 함께 고정한다. */
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--glass-shadow);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s;
    z-index: 300000; /* 모달(100000) + 인터스티셜(200000) 위 */
}
.toast.show { transform: translateY(0); opacity: 1; }
/* 모바일: 토스트가 상단 메뉴 아래로 뜨도록 (사용자가 잘 보이게) */
@media (max-width:600px){
    .toast{bottom:auto!important;right:auto!important;top:64px!important;left:50%!important;transform:translate(-50%,-100px);max-width:calc(100vw - 24px);width:fit-content;}
    .toast.show{transform:translate(-50%,0);}
}
.toast-success { border-left: 3px solid var(--green); }
.toast-success i { color: var(--green); }
.toast-error { border-left: 3px solid var(--red); }
.toast-error i { color: var(--red); }
.toast-info { border-left: 3px solid var(--blue); }
.toast-info i { color: var(--blue); }
/* showToast(..., 'warning') 을 쓰는 곳이 있는데(예: trade.php 리필 한도 안내)
   대응 규칙이 없어 강조선도 아이콘 색도 안 나왔다. */
.toast-warning { border-left: 3px solid #f0b90b; }
.toast-warning i { color: #f0b90b; }
/* backdrop-filter 를 지원하지 않는 브라우저에서는 반투명이 곧 가독성 붕괴다.
   그런 환경에서만 배경을 불투명으로 올린다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .toast { background: rgba(15,21,32,0.99); }
    [data-theme="light"] .toast { background: rgba(255,255,255,0.99); }
}

/* ─── Footer ─── */
.main-footer {
    background: rgba(6, 9, 15, 0.98);
    border-top: 1px solid transparent;
    padding: 36px 20px 24px;
    margin-top: 16px;
    position: relative;
}
.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 208, 220, 0.30), transparent);
}
.footer-container { max-width: 1400px; margin: 0 auto; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 48px;
    margin-bottom: 44px;
    align-items: start;
}
.footer-links-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 40px;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}
.footer-logo i { color: var(--accent); font-size: 24px; }
.footer-brand p { color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--transition-smooth);
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 12px var(--accent-glow); transform: translateY(-2px); }
.footer-links h4 { font-size: 13px; font-weight: 700; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.footer-links a {
    display: block; color: var(--text-secondary); font-size: 14px; padding: 5px 0; transition: var(--transition-fast);
    position: relative;
}
.footer-links a:hover { color: var(--accent); padding-left: 8px; }
.footer-bottom {
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    text-align: center;
}
.footer-bottom p { color: var(--text-muted); font-size: 12px; letter-spacing: 0.01em; }

/* ─── Order Mode Row (Cross/Isolated + Leverage in Order Panel) ─── */
.order-mode-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
/* Silver scheme — dark theme resting face is DARK silver, so text must be light
   (#e5e7eb / #f3f4f6). The .active face is a BRIGHT silver gradient, so text
   flips to near-black (#0a0e14). Never grey-on-silver. */
.mode-btn {
    flex: 1;
    padding: 6px 10px;
    background: linear-gradient(160deg, rgba(200,208,220,0.13), rgba(180,190,205,0.06));
    border: 1px solid rgba(200,208,220,0.30);
    border-radius: 4px;
    color: #e5e7eb;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s;
    text-align: center;
    cursor: pointer;
}
.mode-btn:hover {
    background: linear-gradient(160deg, rgba(200,208,220,0.20), rgba(180,190,205,0.10));
    border-color: rgba(200,208,220,0.55);
    color: #f3f4f6;
}
.mode-btn.active {
    background: linear-gradient(160deg, #e5e7eb, #c9ced6);
    border-color: #c9ced6;
    color: #0a0e14;
}
/* Leverage button shares the silver face exactly — kept as its own rule only so
   existing selectors that target .lev-mode-btn keep resolving. */
.lev-mode-btn {
    background: linear-gradient(160deg, rgba(200,208,220,0.13), rgba(180,190,205,0.06));
    border: 1px solid rgba(200,208,220,0.30);
    color: #e5e7eb;
}
.lev-mode-btn:hover {
    background: linear-gradient(160deg, rgba(200,208,220,0.20), rgba(180,190,205,0.10));
    border-color: rgba(200,208,220,0.55);
    color: #f3f4f6;
}
.lev-mode-btn.active {
    background: linear-gradient(160deg, #e5e7eb, #c9ced6);
    border-color: #c9ced6;
    color: #0a0e14;
}

/* ─── Chart Expand Button (Large) ─── */
.chart-expand-btn {
    padding: 4px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: auto;
}
.chart-expand-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--accent); }
.chart-expand-btn i { font-size: 13px; }
/* Expand button now lives in the indicator row (#posLevelBar), right before .chart-mode-toggle.
   Exactly ONE auto margin in that row: the button carries it and pushes the button+toggle
   pair to the right edge; the 14px gap between them comes from .pos-level-bar's gap. */
#posLevelBar #chartExpandBtn { margin-left: 0; padding: 4px 10px; font-size: 11px; }
#posLevelBar .chart-mode-toggle { margin-left: auto; }

/* ─── Leverage Popup Overlay ─── */
.lev-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}
.lev-popup {
    width: 380px;
    max-width: 92vw;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    animation: levPopIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes levPopIn { from { opacity:0; transform:translateY(-20px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
.lev-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}
.lev-popup-header span {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
}
.lev-popup-header span::before {
    content: ''; width: 3px; height: 16px; border-radius: 2px;
    background: linear-gradient(180deg, #e5e7eb, #9ca3af);
}
.lev-popup-close {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.2s;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
}
.lev-popup-close:hover { color: #f6465d; background: rgba(246,70,93,0.1); border-color: rgba(246,70,93,0.2); }
.lev-popup-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lev-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.lev-info { font-size: 11px; color: var(--text-muted); line-height: 1.6; }
.lev-info p { margin: 0 0 2px; }
.lev-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 2px;
}
.lev-marks span {
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
    user-select: none;
    font-weight: 600;
}
.lev-marks span::before { display: none; }
.lev-marks span:hover { color: var(--accent); }
.seed-marks {
    position: relative;
    height: 22px;
    margin-top: 2px;
}
.seed-marks span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 9px;
    color: var(--text-muted);
    transition: color 0.15s;
    user-select: none;
}
.seed-marks span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--border);
    transform: rotate(45deg);
    transition: background 0.15s;
}
.seed-marks span:hover { color: var(--accent); }
.lev-marks span:hover::before, .seed-marks span:hover::before {
    background: var(--accent);
}
.lev-marks span.active, .seed-marks span.active {
    color: var(--accent);
}
.lev-marks span.active::before, .seed-marks span.active::before {
    background: var(--accent);
}
.btn-confirm-lev {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 30%, #c9ced6 70%, #aab1bd 100%);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    color: #0a0e14;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 6px 20px rgba(200,208,220,0.35), inset 0 1px 0 rgba(255,255,255,0.75);
}
.btn-confirm-lev:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(200,208,220,0.5), inset 0 1px 0 rgba(255,255,255,0.85);
    filter: brightness(1.04);
}

/* ─── Orderbook Header (Binance Style) ─── */
.ob-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ob-header-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ─── Margin Mode Popup ─── */
.margin-mode-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.margin-mode-popup {
    width: 380px;
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.mmp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}
.mmp-header span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.mmp-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}
.mmp-close:hover { color: var(--text-primary); }
.mmp-body {
    padding: 16px 18px;
}
.mmp-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 171, 0, 0.08);
    border: 1px solid rgba(255, 171, 0, 0.2);
    border-radius: var(--radius-xs);
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--yellow);
    line-height: 1.5;
}
.mmp-warn i { flex-shrink: 0; margin-top: 2px; }
.mmp-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mmp-opt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.mmp-opt:hover { border-color: var(--accent); background: var(--bg-card-hover); }
.mmp-opt.active {
    border-color: rgba(200,208,220,0.55);
    background: linear-gradient(135deg, rgba(200,208,220,0.16), rgba(160,170,185,0.07));
    box-shadow: 0 0 10px -2px rgba(200,208,220,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
}
.mmp-opt strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.mmp-opt small {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}
.mmp-opt.active strong { color: var(--accent); }

/* ─── Orderbook Mid (Binance Style) ─── */
.ob-mid-arrow {
    font-size: 14px;
}
.ob-mid-arrow.up { color: var(--green); }
.ob-mid-arrow.down { color: var(--red); }

/* ─── Recent Trades Divider (Binance Style) ─── */
.rt-divider-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ─── Position Table Live Cells ─── */
.pos-mark {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 13px;
}
.pos-pnl {
    font-family: 'Pretendard', sans-serif;
}
.pos-pnl strong {
    font-weight: 700;
    font-size: 13px;
}
.pos-pnl small {
    font-size: 11px;
    opacity: 0.8;
}
.pos-pnl.up { color: var(--green); }
.pos-pnl.down { color: var(--red); }

/* ─── Hide footer on trade page ─── */
.trade-page ~ .main-footer,
body.trade-active .main-footer { display: none; }

/* ─── No Data ─── */
.no-data { text-align: center; color: var(--text-muted); padding: 40px; font-size: 14px; }
.podium-loading { text-align: center; color: var(--text-muted); padding: 40px; }

/* ─── Responsive ─── */

/* Nav: reduce padding at medium widths */
@media (max-width: 1400px) {
    .nav-link { padding: 10px 12px; font-size: 14px; }
    .nav-container { padding: 0 20px; }
}
@media (max-width: 1200px) {
    .nav-link { padding: 8px 8px; font-size: 13px; gap: 4px; }
    .nav-container { padding: 0 14px; }
}
@media (max-width: 1024px) {
    .nav-link { padding: 8px 6px; font-size: 12px; letter-spacing: 0; }
}

/* Trade Page: 2-column layout */
@media (max-width: 1400px) {
    .trade-body {
        grid-template-columns: minmax(0, 1fr) 300px;
        height: calc(100vh - var(--nav-height) - var(--ticker-height) - 100px);
        min-height: 500px;
    }
    .trade-book-col {
        /* 호가창 숨김 단일 출처: 769~1400px 전 구간. ≤768px 는 mobile.css 에서 복구 */
        display: none;
    }
    .trade-order-col {
        max-height: none;
    }
    .symbol-stats { gap: 10px; overflow: hidden; }
    .symbol-stats .stat-item:nth-child(n+3) { display: none; }
}

@media (max-width: 1024px) {
    .hero-container { grid-template-columns: 1fr; gap: 30px; }
    .price-grid { grid-template-columns: repeat(3, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .trade-layout { grid-template-columns: 1fr; }
    .ta-grid { grid-template-columns: 1fr; }
    .market-overview-grid { grid-template-columns: repeat(2, 1fr); }
    .ai-insight-grid { grid-template-columns: 1fr; }
    .levels-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .mypage-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .roi-period-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Trade Page: 1-column layout */
@media (max-width: 768px) {
    .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 16px; gap: 4px; flex: none; }
    .nav-links.show { display: flex; }
    .nav-mobile-toggle { display: block; }
    /* Mobile: 더보기 dropdown adjustments */
    .nav-more-dropdown { position: static; transform: none !important; min-width: auto; width: 100%; border-radius: 10px; margin-top: 4px; max-height: 40vh; box-shadow: none; border: 1px solid rgba(255,255,255,0.06); opacity: 0; visibility: hidden; }
    .nav-more-dropdown::before { display: none; }
    .nav-more-dropdown::after { display: none; }
    .nav-more-wrap.open .nav-more-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: none !important; }
    .nav-more-item:hover { transform: none; }
    .nav-balance { display: none; }
    .hero-title { font-size: 32px; }
    .hero-desc { font-size: 15px; }
    .hero-actions { flex-direction: column; }
    .price-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: 1fr; }
    .login-container { grid-template-columns: 1fr; }
    .login-left { display: none; }
    .podium-grid { flex-direction: column; align-items: center; }
    .podium-card.rank-1 { order: 1; }
    .podium-card.rank-2 { order: 2; }
    .podium-card.rank-3 { order: 3; }
    .community-grid { grid-template-columns: 1fr; }
    .community-sidebar { display: none; }
    .symbol-selector { overflow-x: auto; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .main-footer { padding: 32px 18px 90px; }
    .main-footer::before { width: 50%; }
    /* 브랜드/SNS는 가운데, 링크 섹션은 2열 그리드로 */
    .footer-brand { display: flex; flex-direction: column; align-items: center; }
    .footer-brand p { font-size: 13px; line-height: 1.7; max-width: 320px; margin: 0 auto; }
    .footer-logo { justify-content: center; margin-bottom: 12px; }
    .footer-social { justify-content: center; margin-top: 16px; }
    /* 링크들: Platform / Support 두 컬럼이 한 줄에 2개씩, 각 컬럼 내부에서 좌측정렬 */
    .footer-links-row {
        display: grid; grid-template-columns: repeat(2, 1fr);
        gap: 18px 14px; padding: 0 8px;
    }
    .footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
    .footer-links h4 { margin-bottom: 8px; font-size: 12px; }
    .footer-links a { padding: 3px 0; font-size: 13px; }
    .footer-links a:hover { padding-left: 0; }
    .footer-bottom { padding-top: 22px; }
    .footer-bottom p { font-size: 11.5px; line-height: 1.55; }
    .footer-bottom p:last-child { font-size: 9.5px !important; line-height: 1.55 !important; padding: 0 4px; }
    .footer-business-info {
        display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
        gap: 4px 6px; line-height: 1.6; font-size: 10.5px; padding: 14px 8px 0;
    }
    .footer-business-info .sep { margin: 0 2px; }
    .mypage-stats-grid { grid-template-columns: 1fr; }
    .roi-period-grid { grid-template-columns: repeat(2, 1fr); }
    .roi-period-value { font-size: 15px; }

    /* Trade Page mobile (PC 원본) */
    .trade-body {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }
    .trade-book-col { display: none; }
    .trade-order-col {
        max-height: none;
        border-right: none;
    }
    .trade-chart-col {
        border-right: none;
        min-height: 400px;
    }
    .symbol-top-bar { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
    .symbol-stats { gap: 8px; font-size: 11px; }
    .symbol-stats .stat-item { display: none; }
    .stat-price { flex-shrink: 0; }
    .chart-expand-btn { font-size: 10px !important; padding: 2px 6px !important; }
    .stat-price .current-mark-price { font-size: 16px; }
    .symbol-dropdown { width: 300px; }
    .order-btns { flex-direction: column; }
    .trade-bottom .trade-tabs { padding: 0 8px 8px; }
    .trade-table { font-size: 11px; }
    .trade-table thead th { padding: 8px 6px; font-size: 10px; }
    .trade-table tbody td { padding: 8px 6px; }
    .lev-popup { width: 280px; }
    .margin-mode-popup { width: 300px; }
    .order-mode-row { gap: 4px; }
    .mode-btn { padding: 5px 8px; font-size: 11px; }
    .order-info-grid { grid-template-columns: 1fr; }
    .oi-item:nth-child(odd) { padding-right: 0; border-right: none; }
    .oi-item:nth-child(even) { padding-left: 0; }
}

/* ─── Nav Logo ─── (SVG-based, see bottom of file) */

/* ─── AIMA Paywall ─── */
.paywall-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 60px 40px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
.paywall-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(247, 147, 26, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: var(--accent);
}
.paywall-card h2 { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.paywall-card > p { color: var(--text-secondary); font-size: 15px; margin-bottom: 24px; }
.paywall-price { margin-bottom: 24px; }
.price-amount { font-size: 36px; font-weight: 900; color: var(--accent); }
.price-period { font-size: 16px; color: var(--text-muted); }
.paywall-features {
    list-style: none;
    text-align: left;
    max-width: 340px;
    margin: 0 auto 28px;
}
.paywall-features li {
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.paywall-features li i { color: var(--green); font-size: 13px; }
.paywall-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; }

/* Inline AIMA Paywall (inside chat card) */
.aima-paywall {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.aima-paywall-inner {
    padding: 32px 24px;
    text-align: center;
    background: linear-gradient(135deg, rgba(180,190,205,0.04) 0%, rgba(170,0,255,0.04) 100%);
}
.aima-paywall-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(180,190,205,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 20px;
    color: var(--accent);
}
.aima-paywall-inner h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.aima-paywall-inner p { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
.aima-paywall-plans {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.aima-plan-option {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    text-align: center;
    min-width: 160px;
    box-shadow: var(--glass-shadow);
}
.aima-plan-option .plan-badge { margin-bottom: 8px; }
.aima-plan-option strong { display: block; font-size: 18px; margin-bottom: 4px; color: var(--text-primary); }
.aima-plan-option span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.aima-plan-option .btn { width: 100%; }

@media (max-width: 480px) {
    .aima-paywall-plans { flex-direction: column; align-items: center; }
    .aima-plan-option { width: 100%; max-width: 240px; }
}

/* ─── AIMA Upload ─── */
.aima-chat-card {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--glass-shadow);
}
.aima-upload-area {
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-sm);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 16px;
    position: relative;
}
.aima-upload-area:hover, .aima-upload-area.drag-over {
    border-color: var(--accent);
    background: rgba(247, 147, 26, 0.03);
}
.upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}
.upload-prompt i { font-size: 36px; color: var(--accent); margin-bottom: 8px; }
.upload-prompt p { font-size: 15px; color: var(--text-secondary); }
.upload-prompt span { font-size: 12px; }
.upload-preview { position: relative; }
.upload-preview img { max-height: 300px; border-radius: var(--radius-sm); }
/* .btn-remove-img 중복 선언 제거 — 정본은 아래 한 곳 (J8e) */
.aima-input-row {
    display: flex;
    gap: 12px;
}
.aima-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}
.aima-input:focus { border-color: var(--accent); }
.aima-loading {
    text-align: center;
    padding: 24px;
    color: var(--accent);
    font-size: 15px;
}
.aima-response {
    margin-top: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.aima-response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
}
.aima-response-header i { color: var(--accent); margin-right: 6px; }
.aima-time { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.aima-response-body {
    padding: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ─── News Cards ─── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.news-card {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px;
    transition: all 0.3s;
    box-shadow: var(--glass-shadow);
}
.news-card:hover { border-color: rgba(255,255,255,0.1); transform: translateY(-1px); }
.news-impact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
}
.news-impact.bullish { background: var(--green-bg); color: var(--green); }
.news-impact.bearish { background: var(--red-bg); color: var(--red); }
.news-impact.neutral { background: rgba(255,171,0,0.1); color: var(--yellow); }
.news-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.news-card p { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.news-time { font-size: 12px; color: var(--text-muted); }
.news-time i { margin-right: 4px; }
.news-loading { grid-column: 1/-1; text-align: center; padding: 30px; color: var(--text-muted); }

/* ─── MyPage Tabs ─── */
.mypage-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.mypage-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.mypage-tab:hover { color: var(--text-primary); background:linear-gradient(180deg,transparent 60%,rgba(210,215,225,0.03) 100%); }
.mypage-tab.active {
    color: transparent;
    background:linear-gradient(90deg,#f3f4f6,#c9ced6,#9ca3af) text;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg,transparent 5%,#f3f4f6 25%,#c9ced6 50%,#9ca3af 75%,transparent 95%) 1;
    text-shadow:0 0 12px rgba(200,208,220,0.35);
    font-weight:800;
    position:relative;
}
.mypage-tab.active::after{
    content:'';
    position:absolute;
    left:8%;right:8%;bottom:-2px;height:2px;
    background:linear-gradient(90deg,transparent 0%,#e5e7eb 30%,#c9ced6 50%,#9ca3af 70%,transparent 100%);
    box-shadow:0 0 10px rgba(210,215,225,0.6);
    border-radius:100px;
}
.mypage-tab-content { display: none; }
.mypage-tab-content.active { display: block; }

/* ROI 기간별 분석 카드 */
.roi-period-card {
    background: linear-gradient(135deg, rgba(20,26,38,0.72), rgba(10,14,22,0.92));
    border: 1px solid rgba(200,208,220,0.32);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 12px rgba(0,0,0,0.18);
    position: relative;
    overflow: hidden;
}
.roi-period-card::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg,transparent,rgba(243,244,246,0.55) 45%,rgba(200,208,220,0.55) 55%,transparent);
    pointer-events: none;
}
.roi-period-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}
.roi-period-title i { color: var(--accent); }
.roi-period-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.roi-period-item {
    background: linear-gradient(135deg, rgba(200,208,220,0.07), rgba(160,170,185,0.02));
    border: 1px solid rgba(200,208,220,0.18);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
    transition: border-color .2s;
}
.roi-period-item:hover { border-color: rgba(210,215,225,0.38); }
.roi-period-label {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 6px;
    font-weight: 500;
}
.roi-period-value {
    display: block;
    font-size: 18px;
    font-weight: 800;
    font-family: 'Inter', monospace;
}
.roi-period-value.up { color: var(--green); }
.roi-period-value.down { color: var(--red); }

/* ─── MyPage 실버 — 라이트 테마 대응 (up/down 시맨틱 컬러는 건드리지 않음) ─── */
[data-theme="light"] .mypage-hero {
    background: none;
}
[data-theme="light"] .mypage-stat-card,
[data-theme="light"] .roi-period-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(238,241,246,0.92));
    border-color: rgba(0,0,0,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 10px rgba(0,0,0,0.06);
}
[data-theme="light"] .mypage-stat-card::before,
[data-theme="light"] .roi-period-card::before {
    background: linear-gradient(90deg,transparent,rgba(60,70,85,0.16) 45%,rgba(60,70,85,0.16) 55%,transparent);
}
[data-theme="light"] .mypage-stat-card:hover {
    border-color: rgba(60,70,85,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 18px rgba(0,0,0,0.10);
}
[data-theme="light"] .stat-icon {
    background: linear-gradient(135deg, rgba(60,70,85,0.10), rgba(60,70,85,0.04));
    border-color: rgba(0,0,0,0.10);
    color: #3c4655;
}
[data-theme="light"] .stat-content .stat-label { color: #52607a; }
[data-theme="light"] .stat-content .stat-value { color: #1a1f2e; }
[data-theme="light"] .roi-period-item {
    background: rgba(60,70,85,0.035);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .roi-period-item:hover { border-color: rgba(60,70,85,0.24); }
[data-theme="light"] .roi-period-label { color: #52607a; }

.roi-pnl-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    opacity: 0.7;
}

/* 구독 + 결제 통합 섹션 */
.sub-payments-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.sub-payments-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}
.sub-payments-title i { color: var(--accent); }

.mypage-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}
.mypage-badge.badge-premium {
    background: linear-gradient(135deg, rgba(180,190,205,0.12), rgba(224,64,251,0.12), rgba(99,102,241,0.12));
    background-size: 200% auto;
    animation: premiumShift 4s ease infinite;
    color: #e5e7eb;
    border: 1px solid rgba(180,190,205,0.35);
    box-shadow: 0 0 12px rgba(180,190,205,0.15);
}
.mypage-badge.badge-pro {
    background: linear-gradient(135deg, rgba(79,70,229,0.15), rgba(129,140,248,0.2));
    color: #818cf8;
    border: 1px solid rgba(99,102,241,0.3);
    box-shadow: 0 0 10px rgba(99,102,241,0.12);
}
.mypage-badge.badge-beginner {
    background: rgba(14,203,129,0.1);
    color: #0ecb81;
    border: 1px solid rgba(14,203,129,0.3);
}
.mypage-badge.badge-free,
.mypage-badge.user-badge.badge-free {
    background: rgba(107,114,128,0.08);
    color: #9ca3af;
    border: 1px solid rgba(107,114,128,0.15);
}
.badge-cancel { color: var(--red); font-size: 11px; }

/* ─── Journal Stats Row (Apple Style) ─── */
/* ─── Journal Period Tabs ─── */
.journal-period-tabs {
    display: flex; gap: 4px; margin-bottom: 16px; padding: 4px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; width: fit-content;
}
.journal-period-tab {
    padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
    color: var(--journal-label); border: none; background: none; cursor: pointer; transition: all 0.2s;
}
.journal-period-tab:hover { color: var(--text-primary); }
.journal-period-tab.active { color: #0a0e14; background: linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 30%,#c9ced6 60%,#9ca3af 100%); box-shadow:0 4px 14px rgba(180,190,205,0.4),inset 0 1px 0 rgba(255,255,255,0.7); text-shadow:0 1px 0 rgba(255,255,255,0.45); font-weight:800; }
[data-theme="light"] .journal-period-tabs { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .journal-period-tab.active { color: #0a0e14; }

.journal-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
    align-items: stretch;
}
.journal-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    flex: 1;
}
.journal-stat-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.journal-stat-item:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.journal-stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}
.journal-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -0.5px;
}
.journal-stat-value.up { color: var(--green); }
.journal-stat-value.down { color: var(--red); }

/* ─── Journal Overview Card (통합 카드) ─── */
.journal-overview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.jov-stats-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.jov-stat-box {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px; padding: 12px 10px; text-align: center;
    transition: all 0.2s;
}
.jov-stat-box:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .jov-stat-box { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.05); }
.jov-stat-label {
    display: block; font-size: 11px; color: var(--journal-label); font-weight: 600;
    margin-bottom: 6px; letter-spacing: 0.3px; text-transform: none; white-space: nowrap;
}
.jov-stat-value {
    display: block; font-size: 15px; font-weight: 700; color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -0.5px;
    line-height: 1.15; word-break: keep-all;
}
/* 통계 타일 위계: 누적 수익/승률 = primary, 거래 횟수/평균 PNL = secondary */
.jov-stat-value.jov-stat-primary { font-size: 18px; font-weight: 800; }
.jov-stat-value.jov-stat-secondary { font-size: 14px; font-weight: 700; }
.jov-stat-value.up { color: var(--green); }
.jov-stat-value.down { color: var(--red); }
.jov-divider {
    height: 1px; background: rgba(255,255,255,0.06); margin: 14px 0;
}
[data-theme="light"] .jov-divider { background: rgba(0,0,0,0.06); }
.jov-pies-row {
    display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
}
.jov-pie-section {
    display: flex; align-items: center; gap: 14px; flex: 1; min-width: 180px;
}
.jov-pie-section canvas { display: block; flex-shrink: 0; }
.pie-section-divider { width: 1px; height: 60px; background: rgba(255,255,255,0.06); flex-shrink: 0; }
[data-theme="light"] .pie-section-divider { background: rgba(0,0,0,0.06); }

/* ─── Journal Combined Stats Card (legacy) ─── */
.journal-stat-combined {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
    display: flex; align-items: center; justify-content: center; gap: 20px;
}
.journal-stat-combined:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-color: rgba(255,255,255,0.1); }
.journal-stat-combined .stat-pair { text-align: center; }
.journal-stat-combined .stat-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
[data-theme="light"] .journal-stat-combined { background: #ffffff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .journal-stat-combined .stat-divider { background: rgba(0,0,0,0.08); }

/* ─── Journal Pie Charts ─── */
.journal-pies-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
.journal-pie-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.journal-pie-card canvas { display: block; flex-shrink: 0; }
.pie-legend { display: flex; flex-direction: column; gap: 6px; }
.pie-leg-item { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; font-weight: 500; }
.pie-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pie-card-title { font-size: 11px; font-weight: 700; color: var(--journal-label); margin-bottom: 10px; letter-spacing: 0.3px; }

/* ─── Journal Share Button ─── */
.journal-share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 10px; font-size: 12px; font-weight: 700;
    background: linear-gradient(135deg, #c9ced6, #f5a623); color: #0a0e14;
    border: none; cursor: pointer; transition: all 0.2s;
}
.journal-share-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(180,190,205,0.3); }

/* ─── Journal Chart (Apple Style) ─── */
.journal-chart-card {
    background: linear-gradient(165deg, rgba(20,24,33,0.85) 0%, rgba(10,12,17,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    margin-bottom: 18px;
    overflow: visible;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.04);
    width: 100%;
    /* 항상 표시 (예전엔 .loaded 없으면 숨겨져 렌더 실패 시 차트가 통째로 안 보였음) */
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
    pointer-events: auto;
}
.journal-chart-card.loaded {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.journal-chart-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.journal-chart-header h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.journal-chart-header h4 i { color: var(--accent); font-size: 12px; }
.journal-chart { padding: 22px 16px 16px 28px; position: relative; overflow: hidden; }
.jchart-cum-canvas {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
}
.jchart-legend{display:flex;gap:14px;font-size:10px;color:var(--journal-label);margin-left:auto;}
.jchart-legend-item{display:flex;align-items:center;gap:4px;}
.jchart-legend-dot{width:8px;height:3px;border-radius:2px;}
.tip-cum { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.tip-cum.tip-up { color: var(--green); }
.tip-cum.tip-down { color: var(--red); }
/* 달력 셀 L/S 비율 스트립 — 위 줄: 라벨, 아래 줄: 게이지 (전체 너비) */
.cal-ls-strip { display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.cal-ls-strip .cal-ls-labels { display:flex; justify-content:space-between; align-items:center; line-height:1; }
.cal-ls-strip .ls-tag { font-size:10px; font-weight:800; letter-spacing:0.3px; }
.cal-ls-strip .ls-l { color:#22c55e; }
.cal-ls-strip .ls-s { color:#ef4444; }
.cal-ls-strip .cal-side-gauge { width:100%; }

/* Journal LONG/SHORT 비율 레전드 (L 왼쪽 / S 오른쪽) */
.pie-ls-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; font-size:13px; font-weight:800; }
.pie-ls-row .pls-side { display:flex; align-items:center; gap:5px; letter-spacing:0.2px; }
.pie-ls-row .pls-l { color:#22c55e; }
.pie-ls-row .pls-s { color:#ef4444; }
.pie-ls-row .pls-letter { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px; color:#fff; font-size:11px; font-weight:900; }
.pie-ls-row .pls-l .pls-letter { background:#22c55e; }
.pie-ls-row .pls-s .pls-letter { background:#ef4444; }
.pie-ls-row .pls-pct { font-variant-numeric: tabular-nums; }
/* L/S 색 사각박스 제거 → 글자 색으로만 표시 (박스 안 글자 어색함 해소) */
.pie-ls-row .pls-letter { background: none !important; width: auto; height: auto; border-radius: 0; color: inherit; font-size: inherit; font-weight: inherit; margin-right: 2px; }

/* Journal 폼 LONG/SHORT 토글 */
.j-side-toggle { display:flex; gap:5px; background:rgba(255,255,255,0.04); border:1.5px solid rgba(255,255,255,0.1); border-radius:10px; padding:3px; }
.j-side-toggle .j-side-btn { flex:1; padding:7px 10px; border:0; border-radius:7px; background:transparent; color:var(--text-muted); font-weight:700; cursor:pointer; transition:all .15s; font-family:inherit; font-size:12.5px; letter-spacing:0.3px; }
.j-side-toggle .j-side-btn:hover { background:rgba(255,255,255,0.05); color:var(--text-primary); }
.j-side-toggle .j-side-btn.active.j-side-long { background:#22c55e; color:#fff; box-shadow:0 2px 6px rgba(34,197,94,0.35); }
.j-side-toggle .j-side-btn.active.j-side-short { background:#ef4444; color:#fff; box-shadow:0 2px 6px rgba(239,68,68,0.35); }
.j-side-toggle .j-side-btn.active.j-side-none { background:rgba(255,255,255,0.08); color:var(--text-primary); }
[data-theme="light"] .j-side-toggle { background:rgba(0,0,0,0.025); border-color:rgba(0,0,0,0.08); }
[data-theme="light"] .j-side-toggle .j-side-btn:hover { background:rgba(0,0,0,0.05); }

.jchart-bidirectional { position: relative; }
.jchart-area {
    display: flex;
    gap: 1px;
    height: 80px;
}
.jchart-top { align-items: flex-end; }
.jchart-bottom { align-items: flex-start; }
.jchart-zero-line {
    height: 1px;
    background: rgba(255,255,255,0.55);
    width: 100%;
    position: relative;
}
.jchart-zero-line::after {
    content: '0';
    position: absolute;
    left: -22px;
    top: -6px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
}
.jchart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    cursor: pointer;
    transition: background 0.15s;
    min-width: 0;
    position: relative;
}
.jchart-top .jchart-col { justify-content: flex-end; }
.jchart-bottom .jchart-col { justify-content: flex-start; }
.jchart-col:hover { background: rgba(255,255,255,0.04); }
.jchart-col.bar-selected { background: rgba(255,255,255,0.06); }
.jchart-bar {
    width: 28%;
    min-height: 0;
    transition: filter 0.18s, background 0.18s;
}
/* 월별(3/6/12개월): 막대 수가 적으니 적당 폭으로 (일별처럼 얇지 않게). 레이아웃은 건드리지 않음(렌더 안정) */
.jchart-monthly .jchart-bar { width: 40%; max-width: 13px; }
.jchart-top .jchart-bar { border-radius: 2px 2px 0 0; }
.jchart-bottom .jchart-bar { border-radius: 0 0 2px 2px; }
/* 상승 — 흰색 그라데이션 (위쪽 밝음 → 아래쪽 부드러운 회백) */
.jchart-bar.bar-up {
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f5 70%, #d4d7dc 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(0,0,0,0.08);
}
/* 하락 — 다크 그라데이션 (위쪽 회색 → 아래쪽 검정), 흰 테두리로 윤곽 */
.jchart-bar.bar-down {
    background: linear-gradient(180deg, #3a3f4b 0%, #1a1d28 60%, #050608 100%);
    border: 1px solid rgba(255,255,255,0.4);
    border-top: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.jchart-col:hover .jchart-bar.bar-up {
    filter: brightness(1.03);
}
.jchart-col:hover .jchart-bar.bar-down {
    background: linear-gradient(180deg, #4a4f5b 0%, #1a1d28 60%, #050608 100%);
    border-color: rgba(255,255,255,0.6);
}
.jchart-col.bar-selected .jchart-bar.bar-up {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    outline: 1px solid rgba(255,255,255,0.6);
    outline-offset: -1px;
}
.jchart-col.bar-selected .jchart-bar.bar-down {
    background: linear-gradient(180deg, #5a5f6b 0%, #1a1d28 60%, #050608 100%);
    border-color: rgba(255,255,255,0.85);
}
[data-theme="light"] .jchart-bar.bar-up {
    background: #fff;
    border: 1px solid #000;
    border-bottom: none;
}
[data-theme="light"] .jchart-bar.bar-down {
    background: #000;
}
.jchart-labels {
    display: flex;
    gap: 1px;
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
}
[data-theme="light"] .jchart-labels { border-top-color: rgba(0,0,0,0.06); }
.jchart-day {
    flex: 1;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1;
    font-weight: 600;
    position: relative;
}
.jchart-day.show {
    color: var(--text-primary);
    font-weight: 700;
}
.jchart-day.show::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 1px;
    height: 4px;
    background: rgba(180,190,205,0.5);
    transform: translateX(-50%);
}
/* Line overlay SVG */
.jchart-line-svg {
    position: absolute;
    top: 22px;
    left: 28px;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
/* Tooltip — 호버된 막대 우측에 동적 표시 */
.jchart-tooltip {
    position: absolute;
    background: linear-gradient(160deg, rgba(15,18,24,0.92), rgba(10,12,16,0.96));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s, transform 0.18s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    min-width: 130px;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}
.jchart-tooltip.show { opacity: 1; transform: translateX(0); }
.tip-date { color: rgba(255,255,255,0.55); font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; margin-bottom: 4px; text-transform: uppercase; }
.tip-pnl { font-weight: 800; font-size: 16px; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.tip-pnl.tip-up { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,0.25); }
.tip-pnl.tip-down { color: #9ca3af; }
.tip-cum { color: rgba(255,255,255,0.5); font-size: 10.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tip-cum.tip-up { color: rgba(255,255,255,0.85); }
.tip-cum.tip-down { color: rgba(255,255,255,0.45); }
.tip-count { color: rgba(255,255,255,0.4); font-size: 10px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,0.06); }

@media (max-width: 768px) {
    .journal-stats-row { flex-direction: column; }
    .journal-stats-bar { grid-template-columns: 1fr 1fr !important; }
    .journal-stat-combined { grid-column: span 2; }
    .journal-pies-row { grid-template-columns: 1fr; }
    .jov-stats-row { grid-template-columns: 1fr 1fr; }
    .jov-pies-row { flex-direction: column; }
    .pie-section-divider { display: none; }
    .jchart-day { font-size: 7px; }
    /* .jchart-area 높이는 renderJournalChart 가 폭 기준 인라인으로 지정한다 (J11d) */
    .journal-cal-top { flex-direction: column; gap: 12px; }
    .journal-cal-top-left { order: 1; }
    .journal-cal-top-right { order: 2; justify-content: center; }
}
@media (max-width: 480px) {
    .journal-stats-bar { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .journal-stat-item { padding: 12px; border-radius: 12px; }
    .journal-stat-value { font-size: 16px; }
    .jov-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .jov-stat-value { font-size: 13px; }
    .jov-stat-value.jov-stat-primary { font-size: 15px; }
    .jov-stat-value.jov-stat-secondary { font-size: 12px; }
    /* .jchart-area 높이는 renderJournalChart 가 폭 기준 인라인으로 지정한다 (J11d) */
    .jchart-day { font-size: 6px; }
    .journal-pie-card { padding: 10px; }
    .cal-thumb { aspect-ratio: 16/9; }
    .btn-sns-share span.sns-btn-text { display: none; }
    .btn-sns-share { padding: 8px 12px; }
    .btn-monthly-analysis span { display: none; }
    .btn-monthly-analysis { padding: 8px 12px; }
}

/* ─── Trading Journal Calendar ─── */
.journal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}
.journal-header h3 { font-size: 18px; font-weight: 700; min-width: 140px; text-align: center; }
/* ─── Journal Calendar Top (two-column) ─── */
.journal-cal-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.journal-cal-top-left {
    display: flex; align-items: center; gap: 8px;
}
.journal-cal-top-right {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.journal-cal-top-left h3 {
    font-size: 18px; font-weight: 700; min-width: 140px; text-align: center; margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -0.3px;
}

/* ─── SNS Share Button ─── */
.btn-sns-share {
    padding: 8px 18px; border-radius: 10px; font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: linear-gradient(135deg, rgba(91,154,255,0.1), rgba(59,130,246,0.1));
    border: 1px solid rgba(91,154,255,0.2); color: #5b9aff;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1); white-space: nowrap;
}
.btn-sns-share:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(91,154,255,0.2); }
.btn-sns-share:active { transform: scale(0.97); }

/* ─── Journal Calendar - Apple Style ─── */
.journal-calendar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.cal-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.cal-head {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.cal-day {
    min-height: 130px;
    background: linear-gradient(135deg,rgba(200,208,220,0.06),rgba(160,170,185,0.02));
    border: 1px solid rgba(200,208,220,0.12);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cal-day:hover { transform: scale(1.03); box-shadow: 0 4px 16px rgba(0,0,0,0.15); border-color: rgba(200,208,220,0.28); }
.cal-day.empty { background: transparent; cursor: default; border: none; min-height: 0; }
.cal-day.empty:hover { transform: none; box-shadow: none; border-color: transparent; }
.cal-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-day.has-entry { background: var(--bg-secondary); border-color: rgba(180,190,205,0.15); }
.cal-day.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 4px 16px rgba(180,190,205,0.15); }
.cal-date {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    padding: 5px 7px; z-index: 1;
}
.cal-day.today .cal-date { color: var(--accent); }
.cal-day.has-entry .cal-date { color: var(--text-primary); }
.cal-thumb {
    width: 100%; aspect-ratio: 16/9; object-fit: contain;
    background: rgba(0,0,0,0.28);
    border-radius: 0; opacity: 0.85;
    transition: opacity 0.25s; flex-shrink: 0;
}
.cal-day:hover .cal-thumb { opacity: 1; }
.cal-entry {
    flex: 1; display: flex; flex-direction: column; padding: 4px 7px 6px; gap: 3px;
}
.cal-top-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 4px;
}
.cal-top-row .cal-date {
    padding: 0; font-size: 11px; font-weight: 700; color: var(--journal-label);
}
.cal-pnl {
    display: inline-block; font-size: 9px; font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: -0.3px; white-space: normal; line-height: 1.15;
    max-width: 100%; box-sizing: border-box; word-break: keep-all;
    padding: 1px 5px; border-radius: 4px;
}
.cal-pnl.up { color: var(--green); background: rgba(14,203,129,0.1); }
.cal-pnl.down { color: var(--red); background: rgba(246,70,93,0.1); }
/* .cal-meta / .cal-stars / .cal-side-tag / .cal-emotion 은 renderCalendar 가
   출력하지 않는 죽은 셀렉터라 삭제했다 (J12b). .cal-count 정본은 아래 한 곳. */
.cal-count {
    font-size: 9px; color: var(--journal-label); font-weight: 700;
    background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 8px;
    margin-left: 4px; line-height: 1.4; white-space: nowrap;
}

/* ─── Journal Form ─── */
.journal-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 24px;
    margin-bottom: 20px;
}
.journal-form-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--accent); }
.journal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 14px;
    margin-bottom: 12px;
}
.journal-field label {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 500;
}
.journal-field.full { grid-column: 1 / -1; margin-bottom: 12px; }
/* J7b: 취소/저장은 스크롤되는 .jmodal-body 안에 있고, 고정 .jmodal-footer 에는
   '새 기록 추가'/'하루 통합 AI 피드백' 만 있다. 폼을 열면 showJournalForm 이 전자를 숨기므로
   데스크톱에서 폼이 길어지면 "고정 바는 보이는데 저장 버튼은 스크롤 아래로 사라진" 상태가 됐다.
   DOM 을 옮기지 않고 sticky 로 해소한다. 모바일 래퍼(m_mypage.php:634)가 이미 !important 로
   같은 선언을 하고 있어 충돌이 아니라 일치다.
   좌우 여백은 음수 마진 대신 box-shadow 복제로 덮는다 — 음수 마진은 .jmodal-body 의
   가로 스크롤을 유발하지만 그림자는 잉크 오버플로라 스크롤 영역을 넓히지 않는다. */
.journal-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 18px;
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--bg-card);
    border-top: 1px solid rgba(200,208,220,0.50);
    box-shadow: -24px 0 0 var(--bg-card), 24px 0 0 var(--bg-card), 0 24px 0 var(--bg-card);
}
[data-theme="light"] .journal-form-actions {
    /* 1.26:1 이라 사실상 안 보였다. 스티키 액션바의 유일한 경계라
       장식이 아니라 기능적 구분선이다 — 비텍스트 3:1 을 맞춘다(실측 3.36:1). */
    border-top-color: rgba(0,0,0,0.45);
}
.journal-form-actions .text-danger { margin-right: auto; margin-left: 0; }
.journal-form-actions .btn {
    justify-content: center;
    text-align: center;
}
.journal-form-actions .btn-ghost {
    min-width: 100px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 11px 22px;
}
.journal-form-actions .btn-ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--text-muted);
    color: var(--text-primary);
}
[data-theme="light"] .journal-form-actions .btn-ghost {
    background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .journal-form-actions .btn-ghost:hover {
    background: rgba(0,0,0,0.05);
}
.journal-form-actions .btn-primary { min-width: 140px; }

/* 별점은 AI 가 자동 채점한다 — 수동 입력 위젯(.star-rating)과 .star-empty 는
   대응 마크업이 없는 죽은 셀렉터라 삭제했다 (J12c). 카드 표시용만 남긴다. */
.entry-stars { color: #c9ced6; letter-spacing: 2px; font-size: 13px; }

/* ─── Subscription Card ─── */
.sub-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 500px;
}
.sub-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(247, 147, 26, 0.03);
}
.sub-plan {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sub-plan > i { font-size: 24px; color: var(--accent); }
.sub-plan h3 { font-size: 16px; font-weight: 700; }
.sub-plan span { font-size: 12px; color: var(--text-muted); }
.sub-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.status-active { background: var(--green-bg); color: var(--green); }
.status-cancelled { background: var(--red-bg); color: var(--red); }
.sub-card-body { padding: 20px 24px; }
.sub-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(30,45,61,0.3);
}
.sub-info-row span { color: var(--text-muted); }
.sub-cancelled-notice {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255,23,68,0.05);
    border: 1px solid rgba(255,23,68,0.15);
    border-radius: var(--radius-xs);
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.sub-cancelled-notice i { color: var(--red); }
.sub-card-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
}
.sub-cancel-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}
.text-danger { color: var(--red) !important; }

.no-sub-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.no-sub-card {
    text-align: center;
    padding: 40px 20px 24px;
    max-width: 500px;
}
.no-sub-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(247, 147, 26, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
    color: var(--accent);
}
.no-sub-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.no-sub-card p { color: var(--text-secondary); font-size: 14px; margin-bottom: 0; }

/* Mypage Plans Grid */
.mypage-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 700px;
    margin-top: 24px;
}
.mypage-plan-card {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--glass-shadow);
}
.mypage-plan-card.highlight {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(180,190,205,0.1);
}
.plan-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}
.plan-badge.basic { background: rgba(139,148,158,0.15); color: var(--text-secondary); }
.plan-badge.pro { background: rgba(180,190,205,0.15); color: var(--accent); }
.plan-badge.premium { background: rgba(170,0,255,0.15); color: var(--purple); }
.plan-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.plan-price small { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.mypage-plan-card ul {
    list-style: none;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}
.mypage-plan-card ul li { padding: 3px 0; }
.plan-current {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}
@media (max-width: 768px) {
    .mypage-plans-grid { grid-template-columns: 1fr; max-width: 300px; }
}

/* ─── Payment Status ─── */
.payment-status {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}
.status-paid { background: var(--green-bg); color: var(--green); }
.status-refunded { background: rgba(41, 121, 255, 0.1); color: var(--blue); }
.status-failed { background: var(--red-bg); color: var(--red); }

/* ─── Community Sorting & Enhancements ─── */
.posts-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sort-buttons {
    display: flex;
    gap: 4px;
}
.sort-btn {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.sort-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.sort-btn.active { background: rgba(247, 147, 26, 0.1); border-color: var(--accent); color: var(--accent); }

.link-warning {
    padding: 10px 14px;
    background: rgba(255, 171, 0, 0.08);
    border: 1px solid rgba(255, 171, 0, 0.2);
    border-radius: var(--radius-xs);
    font-size: 12px;
    color: var(--yellow);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.community-notice-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.community-notice-card h3 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--accent);
}
.notice-text { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

.post-author-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 4px;
}

.posts-loading, .no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    font-size: 14px;
}
.no-data i { font-size: 32px; display: block; margin-bottom: 12px; color: var(--border-light); }
.no-data p { margin: 0; }

/* ─── Position Levels Bar (TP/SL/Liq on Trade Page) ─── */
.position-levels-bar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}
.position-levels-bar .level-label {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 12px;
    min-width: 60px;
}
.level-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.entry-tag {
    background: rgba(41, 121, 255, 0.1);
    color: var(--blue);
    border: 1px solid rgba(41, 121, 255, 0.2);
}
.tp-tag {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid rgba(0, 230, 118, 0.2);
}
.sl-tag {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid rgba(255, 23, 68, 0.2);
}
.liq-tag {
    background: rgba(255, 171, 0, 0.08);
    color: var(--yellow);
    border: 1px solid rgba(255, 171, 0, 0.2);
}
.pnl-tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-left: auto;
}
.pnl-tag.positive {
    background: var(--green-bg);
    color: var(--green);
}
.pnl-tag.negative {
    background: var(--red-bg);
    color: var(--red);
}
.no-position-msg {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* ─── Footer Business Info (최하단) ─── */
.footer-business-info {
    text-align: center;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.5;
    line-height: 2;
    letter-spacing: 0.01em;
}
.footer-business-info .sep {
    margin: 0 8px;
    opacity: 0.3;
}

/* ─── Google Translate Bar ─── */
.translate-bar {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.translate-bar i { color: var(--accent); }

/* ─── Close Type Labels in Trade History ─── */
.close-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.close-type-manual { background: rgba(41, 121, 255, 0.1); color: var(--blue); }
.close-type-tp { background: var(--green-bg); color: var(--green); }
.close-type-sl { background: var(--red-bg); color: var(--red); }
.close-type-liq { background: rgba(255, 171, 0, 0.08); color: var(--yellow); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Number Input Arrows ─── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ─── Additional Responsive for New Components ─── */
@media (max-width: 1024px) {
    .news-grid { grid-template-columns: 1fr; }
    .journal-form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .mypage-tabs { overflow-x: auto; }
    .mypage-tab { white-space: nowrap; font-size: 13px; padding: 10px 14px; }
    .journal-form-grid { grid-template-columns: 1fr; }
    .cal-day { min-height: 50px; }
    .cal-pnl { font-size: 10px; }
    .aima-input-row { flex-direction: column; }
    .paywall-card { padding: 40px 20px; }
    .posts-header-right { flex-wrap: wrap; }
    .position-levels-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
    .pnl-tag { margin-left: 0; }
    .translate-bar { bottom: 8px; left: 8px; font-size: 12px; padding: 8px 12px; }
}

/* ═══════════════════════════════════════════════════════
   Community Write Page
   ═══════════════════════════════════════════════════════ */
.community-write-layout { max-width: 800px; margin: 0 auto; }
.write-field { margin-bottom: 20px; }
.write-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.write-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.image-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--bg-card);
}
.image-upload-area:hover, .image-upload-area.dragover {
    border-color: var(--accent);
    background: rgba(247, 147, 26, 0.03);
}
.image-upload-area i { font-size: 32px; color: var(--text-muted); margin-bottom: 8px; display: block; }
.image-upload-area p { color: var(--text-secondary); margin: 8px 0 4px; font-size: 14px; }
.image-upload-area span { font-size: 12px; color: var(--text-muted); }
.image-preview { position: relative; margin-top: 12px; }
.image-preview img { max-width: 100%; max-height: 400px; border-radius: var(--radius); border: 1px solid var(--border); display: block; }
/* .btn-remove-img 중복 선언 제거 — 정본은 아래 한 곳 (J8e) */

/* ═══════════════════════════════════════════════════════
   Post View Page
   ═══════════════════════════════════════════════════════ */
.post-view-layout { max-width: 800px; margin: 0 auto; }
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-secondary); font-size: 14px; margin-bottom: 20px;
    text-decoration: none;
}
.back-link:hover { color: var(--accent); }
.post-view-header { margin-bottom: 24px; }
.post-view-title { font-size: 24px; font-weight: 800; margin: 12px 0; line-height: 1.4; }
.post-view-meta {
    display: flex; align-items: center; gap: 16px;
    font-size: 13px; color: var(--text-muted); flex-wrap: wrap;
}
.post-view-content {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
}
.post-image { margin-bottom: 20px; }
.post-image img { width: 100%; border-radius: var(--radius); display: block; }
.post-body-text { font-size: 15px; line-height: 1.8; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }

/* Post thumbnail in list */
.post-item-body { display: flex; gap: 16px; align-items: flex-start; }
.post-item-text { flex: 1; min-width: 0; }
.post-thumb { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Like & Share Buttons */
.post-actions { display: flex; gap: 12px; margin-bottom: 32px; }
.like-btn, .share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-secondary); font-size: 14px;
    cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.like-btn:hover { border-color: #ff1744; color: #ff1744; }
.like-btn.liked { background: rgba(255,23,68,0.1); border-color: #ff1744; color: #ff1744; }
.share-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   Comments Section
   ═══════════════════════════════════════════════════════ */
.comments-section { margin-top: 20px; }
.comments-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.comment-form { margin-bottom: 20px; }
.comment-form textarea { margin-bottom: 8px; }
.comment-form .btn { float: right; }
.comment-form::after { content: ''; display: block; clear: both; }
.comments-list { margin-top: 16px; }
.comment-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.comment-admin { border-left: 3px solid var(--accent); background: rgba(247, 147, 26, 0.03); }
.comment-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; margin-bottom: 8px; flex-wrap: wrap;
}
.admin-badge {
    background: rgba(247, 147, 26, 0.1); color: var(--accent);
    padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
}
.comment-date { color: var(--text-muted); margin-left: auto; }
.comment-body { font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.qna-notice, .login-notice {
    color: var(--text-muted); font-size: 13px; padding: 12px;
    background: var(--bg-card); border-radius: var(--radius);
    border: 1px solid var(--border); margin-bottom: 16px;
}
.login-notice a { color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   Admin Dashboard - Sidebar Layout
   ═══════════════════════════════════════════════════════ */

/* Sidebar Layout */
.admin-sidebar-layout {
    display: flex; min-height: calc(100vh - var(--nav-height) - var(--ticker-height));
}

/* Left Sidebar */
.admin-sidebar {
    width: 240px; min-width: 240px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: sticky; top: calc(var(--nav-height) + var(--ticker-height));
    height: calc(100vh - var(--nav-height) - var(--ticker-height));
    overflow-y: auto; z-index: 50;
}
.admin-sidebar-header {
    padding: 20px 18px; display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; color: var(--accent);
    border-bottom: 1px solid var(--border);
}
.admin-sidebar-header i { font-size: 18px; }

.admin-sidebar-nav { padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.admin-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 14px; font-weight: 500;
    transition: all 0.15s; text-decoration: none;
    white-space: nowrap; overflow: hidden;
}
.admin-nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.admin-nav-item.active { background: rgba(180,190,205,0.1); color: var(--accent); font-weight: 600; }
.admin-nav-item i { width: 18px; min-width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.admin-nav-item span { overflow: hidden; text-overflow: ellipsis; }
.admin-nav-item span:first-of-type { flex: 1; }
.admin-nav-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px;
    border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--text-muted);
}
.admin-nav-badge.badge-alert {
    background: rgba(255,23,68,0.15); color: #ff1744;
}
.admin-nav-divider {
    height: 1px; background: var(--border); margin: 8px 14px;
}

/* Main Content Area */
.admin-main {
    flex: 1; padding: 24px 28px; min-width: 0; overflow-x: hidden;
}

/* Section Show/Hide */
.admin-section { display: none; }
.admin-section.active { display: block; }

/* Section Header */
.admin-section-header {
    margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.admin-section-header h2 {
    font-size: 22px; font-weight: 700; margin-bottom: 4px;
}
.admin-section-header h2 i { color: var(--accent); margin-right: 8px; }
.admin-section-subtitle { font-size: 13px; color: var(--text-muted); }

/* Dashboard Stats */
.admin-dashboard-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-bottom: 28px;
}
.admin-stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px;
    display: flex; align-items: center; gap: 14px;
}
.admin-stat-icon {
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; background: rgba(247, 147, 26, 0.1); color: var(--accent);
    flex-shrink: 0;
}
.admin-stat-content { display: flex; flex-direction: column; }
.admin-stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.admin-stat-value { font-size: 22px; font-weight: 800; line-height: 1.2; }
.admin-stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Admin Panel (card with header) */
.admin-panel {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 20px; overflow: hidden;
}
.admin-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.admin-panel-header h3 { font-size: 14px; font-weight: 600; }
.admin-panel-header h3 i { color: var(--accent); margin-right: 6px; }
.admin-panel-link {
    font-size: 12px; color: var(--accent); background: none; border: none;
    cursor: pointer; font-weight: 500;
}
.admin-panel-link:hover { text-decoration: underline; }

/* Admin Search */
.admin-search-bar {
    display: flex; gap: 8px; margin-bottom: 16px; align-items: center;
}
.admin-search-input {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 14px;
    color: var(--text-primary); font-size: 14px; flex: 1; max-width: 400px;
}
.admin-search-input:focus { border-color: var(--accent); outline: none; }

/* Admin Tools Bar */
.admin-tools-bar {
    display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
    padding: 14px; background: rgba(255,23,68,0.03);
    border: 1px solid rgba(255,23,68,0.1); border-radius: var(--radius);
}

/* Admin Table */
.admin-table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.admin-table th {
    padding: 10px 12px; font-size: 12px; font-weight: 600;
    color: var(--text-muted); text-align: left;
    background: var(--bg-secondary); border-bottom: 1px solid var(--border);
}
.admin-table td {
    padding: 10px 12px; font-size: 13px;
    border-bottom: 1px solid var(--border); color: var(--text-primary);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }
.table-responsive { overflow-x: auto; }

/* Status & Role Badges */
.status-badge {
    padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
}
.status-active { background: rgba(0,200,83,0.1); color: #00c853; }
.status-banned { background: rgba(255,23,68,0.1); color: #ff1744; }
.role-badge {
    padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
}
.role-admin { background: rgba(180,190,205,0.1); color: var(--accent); }
.role-user { background: rgba(136,153,166,0.1); color: var(--text-muted); }
.plan-badge {
    padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
    background: rgba(41,121,255,0.1); color: #2979ff;
}

/* Action Buttons */
.btn-action {
    padding: 4px 10px; border-radius: var(--radius-xs); border: 1px solid var(--border);
    font-size: 11px; cursor: pointer; background: var(--bg-secondary);
    color: var(--text-secondary); transition: all 0.15s; margin-right: 4px;
}
.btn-action:hover { border-color: var(--text-muted); }
.btn-ban { color: #ff1744; border-color: rgba(255,23,68,0.3); }
.btn-ban:hover { background: rgba(255,23,68,0.1); border-color: #ff1744; }
.btn-unban { color: #00c853; border-color: rgba(0,200,83,0.3); }
.btn-unban:hover { background: rgba(0,200,83,0.1); border-color: #00c853; }
.btn-delete { color: #ff1744; border-color: rgba(255,23,68,0.3); }
.btn-delete:hover { background: rgba(255,23,68,0.15); border-color: #ff1744; }

/* Q&A Items in Admin */
.qna-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.qna-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.qna-preview { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.qna-actions { display: flex; align-items: center; justify-content: space-between; }

/* Q&A Filter */
.admin-qna-filter {
    display: flex; gap: 6px; margin-bottom: 16px;
}
.admin-filter-btn {
    padding: 8px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-card);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; gap: 6px;
}
.admin-filter-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.admin-filter-btn.active { background: rgba(180,190,205,0.1); color: var(--accent); border-color: var(--accent); }

/* Payment Stats */
.admin-payment-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 20px;
}
.admin-pay-stat {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.admin-pay-stat-label { font-size: 11px; color: var(--text-muted); }
.admin-pay-stat-value { font-size: 18px; font-weight: 700; }

/* Grant Subscription */
.admin-grant-sub {
    display: flex; gap: 8px; align-items: center; padding: 14px 18px; flex-wrap: wrap;
}

/* Settings Grid */
.admin-settings-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.admin-setting-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
}
.admin-setting-card h4 {
    font-size: 15px; font-weight: 600; margin-bottom: 6px;
}
.admin-setting-card h4 i { color: var(--accent); margin-right: 6px; }
.admin-setting-card p { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.admin-setting-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Mobile Sidebar Toggle */
.admin-sidebar-toggle {
    display: none; position: fixed; bottom: 20px; right: 20px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--accent); color: #000; border: none;
    font-size: 18px; z-index: 100; box-shadow: var(--shadow-lg);
    cursor: pointer;
}

/* Page Dots for Pagination */
.page-dots { color: var(--text-muted); padding: 0 4px; font-size: 12px; }

/* ─── Responsive Admin ─── */
@media (max-width: 1200px) {
    .admin-dashboard-stats { grid-template-columns: repeat(2, 1fr); }
    .admin-payment-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .admin-sidebar {
        position: fixed; left: -260px; top: 0; height: 100vh;
        z-index: 1000; transition: left 0.3s;
        padding-top: calc(var(--nav-height) + var(--ticker-height));
    }
    .admin-sidebar.open { left: 0; box-shadow: var(--shadow-lg); }
    .admin-sidebar-toggle { display: flex; align-items: center; justify-content: center; }
    .admin-main { padding: 16px; }
    .admin-dashboard-stats { grid-template-columns: 1fr; }
    .admin-payment-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .admin-search-bar { flex-wrap: wrap; }
    .admin-search-input { max-width: 100%; }
    .admin-tools-bar { flex-direction: column; }
    .admin-grant-sub { flex-direction: column; }
    .admin-grant-sub .admin-search-input { max-width: 100%; }
    .post-view-title { font-size: 20px; }
    .post-actions { flex-wrap: wrap; }
}

/* ==============================================
   Plans Page - Premium Glass Design
   ============================================== */
.plans-layout { max-width: 1400px; margin: 0 auto; }
.plans-hero {
    text-align: center; padding: 24px 20px 10px;
}
.plans-hero h1 { font-size: 28px; margin-bottom: 6px; }
.plans-hero p { color: var(--text-secondary); font-size: 15px; }

.plans-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; padding: 0 16px; margin-bottom: 32px;
}
.plan-card {
    background: linear-gradient(165deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.0) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg); padding: 22px 18px 18px;
    display: flex; flex-direction: column; position: relative;
    transition: all 0.35s var(--ease-premium);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.02);
    overflow: visible;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.plan-card::after { overflow: hidden; border-radius: inherit; }
/* ═══ PLAN CARD EFFECTS v10 — sweep + 궤도형 내부 광선 ═══ */

/* ── 공통 자식 z-index (glow 위에 콘텐츠) ── */
.plan-card.popular > *,
.plan-card.premium-card > * { position: relative; z-index: 1; }

/* ── 1) 빛 sweep (::after) — 대각선 ── */
.plan-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background-size: 400% 400%;
    background-position: 100% 100%;
    opacity: 0;
    animation: sweepDiag 4s ease-in-out infinite;
    overflow: hidden;
}
@keyframes sweepDiag {
    0%   { background-position: 100% 100%; opacity: 0; }
    5%   { opacity: 0.8; }
    38%  { opacity: 0.8; }
    50%  { background-position: 0% 0%; opacity: 0; }
    100% { background-position: 0% 0%; opacity: 0; }
}
/* FREE — sweep + 잔상 완전 제거 */
.plan-card:not(.popular):not(.premium-card):not(.beginner-card)::after {
    content: none !important;
    display: none !important;
}
.plan-card:not(.popular):not(.premium-card):not(.beginner-card) {
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.03);
    isolation: isolate;
    z-index: 3;
}
/* BEGINNER */
.plan-card.beginner-card::after {
    background-image: linear-gradient(135deg, transparent 20%, rgba(96,165,250,0.05) 40%, rgba(59,130,246,0.12) 50%, rgba(96,165,250,0.05) 60%, transparent 80%);
}
/* PRO */
.plan-card.popular::after {
    background-image: linear-gradient(135deg, transparent 20%, rgba(160,170,185,0.06) 40%, rgba(180,190,205,0.14) 50%, rgba(160,170,185,0.06) 60%, transparent 80%);
}
/* PREMIUM */
.plan-card.premium-card::after {
    background-image: linear-gradient(135deg, transparent 20%, rgba(170,100,255,0.06) 40%, rgba(187,134,252,0.14) 50%, rgba(170,100,255,0.06) 60%, transparent 80%);
}

/* ── Plan card wrapper (badge 카드 밖으로 돌출) ── */
.plan-card-wrap { position: relative; display: flex; flex-direction: column; overflow: visible; border-radius: var(--radius-lg); }
.plan-card-wrap > .plan-card { flex: 1; }
.plan-card-wrap > .popular-tag {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    z-index: 10;
}
/* ── 카드별 외부 광선 영역 통일 (모두 0 0 24px 0.12) ── */
.plan-card.beginner-card {
    border-color: rgba(96,165,250,0.30);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 24px rgba(96,165,250,0.12), inset 0 1px 0 rgba(96,165,250,0.10);
}
/* ── 2) PRO — 골드 회전 글로우 ── */
.plan-card.popular {
    overflow: hidden;
    border-color: rgba(180,190,205,0.35);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 24px rgba(180,190,205,0.12), inset 0 1px 0 rgba(180,190,205,0.12);
}
/* 회전 코닉 글로우 — 카드 안에서 빛이 부드럽게 돌아감 */
.plan-card.popular::before,
.plan-card.premium-card::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    border-radius: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    transition: none;
}
.plan-card.popular::before {
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(180,190,205,0.06) 0deg,
        rgba(247,175,50,0.20) 40deg,
        rgba(255,220,100,0.28) 70deg,
        rgba(247,175,50,0.14) 100deg,
        rgba(180,190,205,0.06) 130deg,
        rgba(255,200,80,0.10) 160deg,
        rgba(247,175,50,0.22) 200deg,
        rgba(255,220,100,0.14) 240deg,
        rgba(180,190,205,0.08) 280deg,
        rgba(255,200,80,0.18) 320deg,
        rgba(180,190,205,0.06) 360deg
    );
    filter: blur(45px);
    animation: proSpin 7s linear infinite;
}

/* ── 3) PREMIUM — 보라 회전 글로우 ── */
.plan-card.premium-card {
    overflow: hidden;
    border-color: rgba(170,0,255,0.35);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 24px rgba(170,0,255,0.12), inset 0 1px 0 rgba(170,0,255,0.1);
}
.plan-card.premium-card::before {
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(170,0,255,0.06) 0deg,
        rgba(170,100,255,0.20) 35deg,
        rgba(220,160,255,0.28) 65deg,
        rgba(187,134,252,0.14) 95deg,
        rgba(170,0,255,0.06) 125deg,
        rgba(200,100,255,0.12) 160deg,
        rgba(140,60,220,0.22) 200deg,
        rgba(187,134,252,0.16) 240deg,
        rgba(170,0,255,0.08) 275deg,
        rgba(200,140,255,0.20) 310deg,
        rgba(160,80,240,0.12) 345deg,
        rgba(170,0,255,0.06) 360deg
    );
    filter: blur(45px);
    animation: premSpin 9s linear infinite;
}

/* PRO 회전 — 부드러운 연속 회전 */
@keyframes proSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* PREMIUM 회전 — 약간 느린 회전 */
@keyframes premSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Light theme overrides ── */
[data-theme="light"] .plan-card {
    background: linear-gradient(165deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
    backdrop-filter: blur(8px);
}
[data-theme="light"] .plan-card:not(.popular):not(.premium-card):not(.beginner-card)::after {
    background-image: linear-gradient(135deg, transparent 20%, rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0.02) 60%, transparent 80%);
}
[data-theme="light"] .plan-card.beginner-card::after {
    background-image: linear-gradient(135deg, transparent 20%, rgba(96,165,250,0.03) 40%, rgba(59,130,246,0.06) 50%, rgba(96,165,250,0.03) 60%, transparent 80%);
}
[data-theme="light"] .plan-card.popular::after {
    background-image: linear-gradient(135deg, transparent 20%, rgba(160,170,185,0.03) 40%, rgba(180,190,205,0.06) 50%, rgba(160,170,185,0.03) 60%, transparent 80%);
}
[data-theme="light"] .plan-card.premium-card::after {
    background-image: linear-gradient(135deg, transparent 20%, rgba(170,100,255,0.03) 40%, rgba(187,134,252,0.06) 50%, rgba(170,100,255,0.03) 60%, transparent 80%);
}
[data-theme="light"] .plan-card.popular::before,
[data-theme="light"] .plan-card.premium-card::before { opacity: 0.35; filter: blur(40px); }
.plan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 16px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.plan-card.popular:hover {
    border-color: rgba(180,190,205,0.5);
    box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 30px rgba(180,190,205,0.15), inset 0 1px 0 rgba(180,190,205,0.2);
}
.plan-card.popular:hover::before { filter: blur(32px); opacity: 1.1; }
.plan-card.premium-card:hover {
    border-color: rgba(170,0,255,0.5);
    box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 30px rgba(170,0,255,0.15), inset 0 1px 0 rgba(170,0,255,0.2);
}
.plan-card.premium-card:hover::before { filter: blur(32px); opacity: 1.1; }
.plan-card.current { border-color: var(--green); }
.popular-tag {
    background: var(--accent); color: #000; font-size: 11px; font-weight: 700;
    padding: 3px 14px; border-radius: 20px;
    box-shadow: 0 2px 12px rgba(180,190,205,0.4);
    z-index: 10; white-space: nowrap;
}
.plan-card .current-tag {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--green); color: #000; font-size: 11px; font-weight: 700;
    padding: 3px 14px; border-radius: 20px;
}
.plan-card-left {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; position: relative; min-height: 160px; justify-content: center;
}
.plan-card-right {
    display: flex; flex-direction: column; flex: 1;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 12px;
    margin-top: 4px;
}
/* 모든 카드 동일한 구분선 */
.plan-tier { text-align: center; margin-bottom: 8px; }
.plan-tier-badge {
    display: inline-block; padding: 4px 16px; border-radius: 20px;
    font-size: 13px; font-weight: 600;
}
.plan-tier-badge.free { background: rgba(139,148,158,0.12); color: var(--text-secondary); }
.plan-tier-badge.beginner { background: rgba(41,121,255,0.12); color: var(--blue); }
.plan-tier-badge.pro { background: var(--accent-glow); color: var(--accent); }
.plan-tier-badge.premium {
    background: linear-gradient(135deg, rgba(170,0,255,0.2), rgba(236,72,153,0.12));
    color: #d580ff;
}
.plan-price-block { text-align: center; margin-bottom: 10px; }
.plan-price-amount { font-size: 28px; font-weight: 800; }
.plan-price-period { font-size: 13px; color: var(--text-secondary); }
.plan-features { list-style: none; padding: 0; margin: 0 0 10px; flex: 1; display:flex; flex-direction:column; justify-content:space-around; gap:2px; }
.plan-features li {
    padding: 4px 0; font-size: 12px; color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.plan-features li i.fa-check {
    color: var(--green); font-size: 8px;
    width: 18px; height: 18px; min-width: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(14, 203, 129, 0.1);
    border: 1px solid rgba(14, 203, 129, 0.2);
    border-radius: 50%;
}
.plan-features li i.fa-times {
    color: var(--text-muted); font-size: 8px;
    width: 18px; height: 18px; min-width: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.plan-features li.disabled { color: var(--text-muted); }
.plan-features li.excluded { color: var(--text-muted); }
.plan-card-action { margin-top: 14px; padding-top: 6px; padding-bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; }
.plan-card-action .btn { width: 100%; }
.plan-current-label {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--green); font-size: 13px; font-weight: 600; padding: 8px 0;
}
.plan-info-label {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 13px; padding: 8px 0;
}
.feat-limit {
    font-size: 10.5px; color: var(--text-primary); font-weight: 700;
    margin-left: 4px; padding: 2px 8px; border-radius: 6px;
    background: rgba(180,190,205,0.12); border: 1px solid rgba(180,190,205,0.20);
    letter-spacing: -.01em;
}
[data-theme="light"] .feat-limit {
    color: #7d8790; background: rgba(180,190,205,0.10); border-color: rgba(180,190,205,0.25);
}
/* Pro 카드 — 골드 톤 */
.plan-card.popular .feat-limit {
    color: #c9ced6; background: rgba(180,190,205,0.16); border-color: rgba(180,190,205,0.30);
}
/* Premium 카드 — 퍼플 톤 */
.plan-card.premium-card .feat-limit {
    color: #d580ff; background: rgba(170,0,255,0.16); border-color: rgba(170,0,255,0.30);
}
/* Beginner 카드 — 블루 톤 */
.plan-card.beginner-card .feat-limit {
    color: #7db5ff; background: rgba(91,154,255,0.16); border-color: rgba(91,154,255,0.30);
}
[data-theme="light"] .plan-card.popular .feat-limit { color:#7d8790; background:rgba(180,190,205,0.12); }
[data-theme="light"] .plan-card.premium-card .feat-limit { color:#9333ea; background:rgba(170,0,255,0.10); }
[data-theme="light"] .plan-card.beginner-card .feat-limit { color:#3b82f6; background:rgba(91,154,255,0.10); }
/* Premium card feature checkmarks - purple tint */
.plan-card.premium-card .plan-features li i.fa-check {
    color: #d580ff;
    background: rgba(170,0,255,0.1);
    border-color: rgba(170,0,255,0.2);
}
/* Pro card feature checkmarks - gold tint */
.plan-card.popular .plan-features li i.fa-check {
    color: var(--accent);
    background: rgba(160,170,185,0.1);
    border-color: rgba(160,170,185,0.2);
}

/* Plans FAQ - Accordion Q&A */
.plans-faq { padding: 0 20px 40px; max-width: 800px; }
.plans-faq h3 {
    font-size: 22px; margin-bottom: 20px; text-align: left;
    display: flex; align-items: center; gap: 10px;
}
.plans-faq h3 i { color: var(--accent); font-size: 20px; }
.faq-accordion { display: flex; flex-direction: column; gap: 0; }
.faq-acc-item {
    border-bottom: 1px solid var(--border);
}
.faq-acc-item:first-child {
    border-top: 1px solid var(--border);
}
.faq-acc-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 4px; background: none; border: none; cursor: pointer;
    text-align: left; gap: 12px;
}
/* Q. / A. 라벨 — 동일 너비로 시작 위치 정렬 */
.faq-acc-q {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    line-height: 1.5; flex: 1;
    display: flex; align-items: flex-start; gap: 10px;
}
.faq-acc-q::before {
    content: 'Q.';
    color: var(--accent);
    font-weight: 800;
    flex-shrink: 0;
    width: 22px;
    display: inline-block;
}
.faq-acc-icon {
    font-size: 12px; color: var(--text-muted); transition: transform 0.3s;
    flex-shrink: 0;
}
.faq-acc-item.open .faq-acc-icon { transform: rotate(180deg); color: var(--accent); }
.faq-acc-item.open .faq-acc-q { color: var(--accent); }
.faq-acc-answer {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 4px;
}
.faq-acc-item.open .faq-acc-answer {
    max-height: 280px; padding: 0 4px 16px;
}
.faq-acc-answer p {
    font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin: 0;
    display: flex; align-items: flex-start; gap: 10px;
}
.faq-acc-answer p::before {
    content: 'A.';
    color: #0ecb81;
    font-weight: 800;
    flex-shrink: 0;
    width: 22px;
    display: inline-block;
}

/* Pricing 4-column grid */
.pricing-grid.four-col { grid-template-columns: repeat(4, 1fr); }
.pricing-badge.beginner { background: rgba(41,121,255,0.15); color: var(--blue); }
.plan-badge.beginner { background: rgba(41,121,255,0.15); color: var(--blue); }

@media (max-width: 1200px) {
    .plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .plans-grid { grid-template-columns: 1fr; }
    .pricing-grid.four-col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .pricing-grid.four-col { grid-template-columns: 1fr; }
}

/* ==============================================
   Journal Rework
   ============================================== */

/* AI Usage Badge */
.journal-ai-usage {
    margin-left: auto; padding: 5px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.3px; white-space: nowrap;
    flex-shrink: 0; min-width: max-content;
}
@media(max-width:600px){
    .journal-ai-usage{font-size:11px;padding:4px 10px;}
    .journal-cal-top-right{flex-wrap:wrap;}
}
.journal-ai-usage.ai-active { background: rgba(0,200,83,0.12); color: var(--green); }
.journal-ai-usage.ai-exhausted { background: var(--red-bg); color: var(--red); }
.journal-ai-usage.ai-locked { background: rgba(139,148,158,0.1); color: var(--text-muted); }

/* Calendar selected day */
.cal-day.selected { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-glow); }
/* .cal-count 중복 선언 제거 — 정본은 위쪽 한 곳 (J12a) */

/* ─── Journal Modal Popup ─── */
.jmodal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* ※ 배경색은 ::before 가 담당한다. 이 요소에는 opacity 애니메이션을 걸지 않는다 —
       backdrop-filter 가 있는 레이어의 opacity 를 매 프레임 바꾸면 뒤 화면 전체를
       매 프레임 다시 블러하게 되어 프레임이 떨어진다(달력·차트가 많은 마이페이지에서 특히). */
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 100000;
    align-items: center; justify-content: center; padding: 20px;
}
/* 어두워지는 연출은 필터 없는 별도 레이어에서 — GPU 합성만 하면 되므로 저렴하다 */
.jmodal-overlay::before {
    content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.65);
    opacity: 0; pointer-events: none;
}
.jmodal-overlay.open::before { animation: jmodalDim 0.22s ease forwards; }
@keyframes jmodalDim { from { opacity: 0; } to { opacity: 1; } }
/* 모바일: 하단 nav 가 뜨는 동안에도 jmodal 이 그 위로 올라와야 함 */
@media(max-width:768px){
    .jmodal-overlay.open ~ .mobile-bottom-nav,
    body:has(.jmodal-overlay.open) .mobile-bottom-nav{display:none!important;}
}
.jmodal-overlay.open { display: flex; }
.jmodal {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 2px; width: 100%; max-width: 600px; max-height: 85vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(160,170,185,0.06);
    position: relative;   /* ::before 딤 레이어 위로 */
    animation: jmodalSlideUp 0.3s cubic-bezier(0.22,1,0.36,1);
    will-change: transform, opacity;
}
@keyframes jmodalSlideUp {
    from { transform: translateY(24px) scale(.985); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
    .jmodal-overlay.open::before { animation: none; opacity: 1; }
    .jmodal { animation: none; }
}
.jmodal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid var(--border);
    /* J7a: .jmodal 이 flex column 이라 flex 기본값(1)으로 눌렸다.
       세로가 짧은 창(노트북 가로모드)에서 제목줄이 찌그러지던 원인.
       모바일 래퍼(m_mypage.php)는 이미 !important 로 같은 선언을 주입하고 있었다. */
    flex-shrink: 0;
    /* J7c: 스크롤되는 본문의 위쪽 경계를 은은한 그림자로 알린다 */
    position: relative; z-index: 1;
    box-shadow: 0 6px 12px -8px rgba(0,0,0,0.55);
}
[data-theme="light"] .jmodal-header { box-shadow: 0 6px 12px -8px rgba(0,0,0,0.14); }
.jmodal-header h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.jmodal-header h3 i { color: var(--accent); font-size: 14px; }
.jmodal-close {
    background: none; border: none; color: var(--text-muted); font-size: 16px;
    cursor: pointer; width: 40px; height: 40px; border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.jmodal-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.jmodal-body { flex: 1; overflow-y: auto; padding: 20px 24px; min-height: 0; }
/* J7c: 5px 짜리 거의 안 보이는 스크롤바라 "더 아래에 내용이 있다" 를 알 수 없었다 */
.jmodal-body::-webkit-scrollbar { width: 8px; }
.jmodal-body::-webkit-scrollbar-track { background: transparent; }
.jmodal-body::-webkit-scrollbar-thumb { background: rgba(200,208,220,0.28); border-radius: 4px; }
.jmodal-body::-webkit-scrollbar-thumb:hover { background: rgba(200,208,220,0.42); }
.jmodal-body { scrollbar-width: thin; scrollbar-color: rgba(200,208,220,0.28) transparent; }
.jmodal-entries .no-data { padding: 32px 16px; }
.jmodal-footer {
    padding: 14px 24px; border-top: 1px solid var(--border);
    display: flex; justify-content: center;
    /* J7a: header 와 같은 이유 — flex 기본 1 로 눌려 버튼줄이 찌그러졌다 */
    flex-shrink: 0;
    /* J7c: 스크롤되는 본문의 아래쪽 경계 */
    position: relative; z-index: 1;
    box-shadow: 0 -6px 12px -8px rgba(0,0,0,0.55);
}
[data-theme="light"] .jmodal-footer { box-shadow: 0 -6px 12px -8px rgba(0,0,0,0.14); }
.jmodal-form-divider {
    text-align: center; margin: 4px 0 10px; position: relative;
}
.jmodal-form-divider::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 100%; height: 1px; background: var(--border);
}
.jmodal-form-divider span {
    position: relative; background: var(--bg-card); padding: 0 14px;
    font-size: 12px; font-weight: 600; color: var(--accent);
}
@media (max-width: 640px) {
    .jmodal { max-width: 100%; max-height: 90vh; border-radius: 2px; }
    .jmodal-body { padding: 16px; }
    .jmodal-header { padding: 14px 16px; }
    .jmodal-footer { padding: 12px 16px; }
}
.journal-dblclick-hint { font-size: 11px; color: var(--journal-label); display: flex; align-items: center; justify-content: center; gap: 4px; }

/* Entry Cards */
.journal-entry-card {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 2px; padding: 16px; margin-bottom: 12px;
}
.entry-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.entry-trade-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entry-symbol {
    font-weight: 700; font-size: 14px; color: var(--text-primary);
    background: rgba(180,190,205,0.1); padding: 2px 8px; border-radius: 2px;
}
.entry-side {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px;
}
.entry-side.side-long { background: var(--green-bg); color: var(--green); }
.entry-side.side-short { background: var(--red-bg); color: var(--red); }
.entry-leverage { font-size: 11px; color: var(--journal-label); }
.entry-pnl { font-size: 18px; font-weight: 800; }
.entry-pnl.up { color: var(--green); }
.entry-pnl.down { color: var(--red); }
.entry-prices {
    display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary);
    margin-bottom: 8px;
}
.entry-meta-row {
    display: flex; align-items: center; gap: 12px; font-size: 12px;
    color: var(--text-secondary); margin-bottom: 8px; flex-wrap: wrap;
}
.entry-notes {
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
    padding: 8px 12px; background: rgba(139,148,158,0.06);
    border-radius: 2px; margin-bottom: 10px;
}

/* AI Feedback */
.entry-feedback {
    background: rgba(41,121,255,0.06); border: 1px solid rgba(41,121,255,0.15);
    border-radius: 2px; padding: 12px; margin-bottom: 10px;
}
.feedback-header {
    font-size: 12px; font-weight: 600; color: var(--blue);
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.feedback-body { font-size: 13px; color: var(--text-primary); line-height: 1.7; }

.btn-ai-feedback {
    border-color: var(--blue) !important; color: var(--blue) !important;
}
.btn-ai-feedback:hover { background: rgba(41,121,255,0.1) !important; }

/* Entry Actions */
.entry-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.05); }
[data-theme="light"] .entry-actions { border-top-color: rgba(0,0,0,0.06); }
.btn-xs { padding: 3px 10px; font-size: 11px; }
/* 일지 카드 — 수정/삭제 차별화 */
.entry-actions .btn-edit, .entry-actions .btn-delete {
    padding: 6px 13px; font-size: 11.5px; font-weight: 700; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    cursor: pointer; transition: all .15s cubic-bezier(.4,0,.2,1);
    letter-spacing: 0.2px;
}
.entry-actions .btn-edit i, .entry-actions .btn-delete i { font-size: 10.5px; }
.entry-actions .btn-edit {
    background: linear-gradient(135deg, rgba(91,154,255,0.14), rgba(91,154,255,0.06));
    color: #5b9aff;
    border: 1px solid rgba(91,154,255,0.28);
}
.entry-actions .btn-edit:hover {
    background: linear-gradient(135deg, rgba(91,154,255,0.22), rgba(91,154,255,0.1));
    border-color: rgba(91,154,255,0.5);
    color: #7eb1ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(91,154,255,0.18);
}
.entry-actions .btn-delete {
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.08);
}
.entry-actions .btn-delete:hover {
    background: rgba(246,70,93,0.12);
    color: #f6465d;
    border-color: rgba(246,70,93,0.32);
    transform: translateY(-1px);
}
[data-theme="light"] .entry-actions .btn-delete {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.08);
}

/* Journal Image Upload — 강조 디자인 */
.journal-image-upload { margin-top: 8px; }
.journal-image-placeholder {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 32px 24px;
    border: 2px dashed rgba(200,208,220,0.62);
    border-radius: 14px;
    cursor: pointer;
    color: var(--journal-label);
    background: linear-gradient(160deg, rgba(160,170,185,0.04), rgba(160,170,185,0.01));
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
.journal-image-placeholder::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(160,170,185,0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.journal-image-placeholder:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(160,170,185,0.12);
}
.journal-image-placeholder:hover::before { opacity: 1; }
.journal-image-placeholder i {
    font-size: 32px;
    color: #9ca3af;
    filter: drop-shadow(0 2px 6px rgba(160,170,185,0.35));
    animation: jImgPulse 2.4s ease-in-out infinite;
}
@keyframes jImgPulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50%     { transform: scale(1.08); opacity: 0.85; }
}
.journal-image-placeholder span {
    font-size: 13.5px; font-weight: 700; color: var(--text-primary);
    letter-spacing: -0.2px;
}
.journal-image-placeholder .jimg-hint {
    font-size: 11px; font-weight: 600; color: var(--journal-label);
    margin-top: -4px;
}

/* 감정 이미지 — PC 동일 크기 보장 (PNG 좌우 여백 잘림, 얼굴이 박스 가득) */
.mood-icon, .entry-mood-img {
    width: 32px; height: 32px;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
/* 드롭다운 트리거는 좀 더 큼 */
.mood-trigger .mood-icon { width: 34px; height: 34px; }
[data-theme="light"] .mood-icon, [data-theme="light"] .entry-mood-img {
    background: rgba(0,0,0,0.025);
}
/* ─── 이미지 크롭 UI: 원본 + 어두운 오버레이 + 드래그/리사이즈 프레임 ─── */
.journal-image-preview {
    position: relative; display: block;
    width: 100%; max-width: 480px;
    background: #000;
    border-radius: 10px; overflow: hidden;
    user-select: none;
}
[data-theme="light"] .journal-image-preview { background: #1a1a1a; }
.crop-stage {
    position: relative; width: 100%;
    display: flex; align-items: center; justify-content: center;
    max-height: 420px; min-height: 180px; overflow: hidden;
}
.crop-stage img {
    display: block; max-width: 100%; max-height: 420px;
    width: auto; height: auto;
    -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.journal-image-preview .btn-remove-img {
    top: 8px; right: 8px; z-index: 3;
    background: rgba(0,0,0,0.75);
}

/* ─── PNL 입력 행 ─── */
.pnl-input-row { display: flex; gap: 6px; align-items: stretch; width: 100%; }
.pnl-sign-toggle, .pnl-unit-toggle {
    display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 8px; padding: 2px; flex-shrink: 0;
}
.pnl-sign-btn, .pnl-unit-btn {
    background: transparent; border: none; cursor: pointer;
    padding: 0 10px; font-size: 14px; font-weight: 700;
    color: var(--text-muted); border-radius: 6px;
    transition: all 0.18s; min-width: 30px; display: flex; align-items: center; justify-content: center;
}
.pnl-sign-btn.pnl-plus { color: #0ecb81; }
.pnl-sign-btn.pnl-minus { color: #f6465d; }
.pnl-sign-btn.pnl-plus.active { background: rgba(14,203,129,0.15); box-shadow: inset 0 0 0 1px rgba(14,203,129,0.35); }
.pnl-sign-btn.pnl-minus.active { background: rgba(246,70,93,0.15); box-shadow: inset 0 0 0 1px rgba(246,70,93,0.35); }
.pnl-unit-btn { font-size: 12px; min-width: 26px; padding: 0 6px; }
.pnl-unit-btn.active { background: var(--accent); color: #111; }
.pnl-val-input { flex: 1; min-width: 0; text-align: right; font-weight: 700; font-size: 15px; }
.pnl-val-input.pnl-input-plus { color: #0ecb81; }
.pnl-val-input.pnl-input-minus { color: #f6465d; }
[data-theme="light"] .pnl-sign-toggle, [data-theme="light"] .pnl-unit-toggle { background: rgba(0,0,0,0.03); }

/* ─── 레버리지 게이지 ─── */
.lev-display { margin-left: auto; color: var(--accent); font-weight: 700; font-size: 12px; }
.lev-input-row { display: flex; gap: 10px; align-items: center; }
.lev-number { width: 70px; flex-shrink: 0; text-align: center; font-weight: 700; }
.lev-range {
    -webkit-appearance: none; appearance: none;
    flex: 1; height: 6px; border-radius: 999px;
    background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--lev-progress, 7%), rgba(255,255,255,0.08) var(--lev-progress, 7%), rgba(255,255,255,0.08) 100%);
    outline: none; cursor: pointer;
}
[data-theme="light"] .lev-range { background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--lev-progress, 7%), rgba(0,0,0,0.08) var(--lev-progress, 7%), rgba(0,0,0,0.08) 100%); }
.lev-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent); border: 3px solid var(--bg-card);
    box-shadow: 0 2px 8px rgba(160,170,185,0.4); cursor: grab;
    transition: transform 0.15s;
}
.lev-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
.lev-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent); border: 3px solid var(--bg-card);
    box-shadow: 0 2px 8px rgba(160,170,185,0.4); cursor: grab;
}
.lev-presets { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.lev-preset {
    flex: 1; min-width: 40px; padding: 5px 6px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text-muted); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.lev-preset:hover { background: rgba(160,170,185,0.08); color: var(--accent); border-color: var(--accent); }
.lev-preset.active { background: rgba(160,170,185,0.15); color: var(--accent); border-color: var(--accent); }
[data-theme="light"] .lev-preset { background: rgba(0,0,0,0.02); }

/* ─── 달력 Long/Short 비율 게이지 ─── */
.cal-side-gauge {
    display: flex; height: 4px; border-radius: 2px; overflow: hidden;
    background: rgba(255,255,255,0.06); margin-top: 3px;
}
.cal-side-gauge .cs-long { background: #0ecb81; }
.cal-side-gauge .cs-short { background: #f6465d; }
[data-theme="light"] .cal-side-gauge { background: rgba(0,0,0,0.06); }

/* 상세 정보 적기 토글 버튼 */
.jdetails-toggle {
    width: 100%; margin: 10px 0 4px;
    padding: 10px 14px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px dashed var(--border);
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.jdetails-toggle:hover { background: rgba(160,170,185,0.05); color: var(--accent); border-color: var(--accent); }
.jdetails-toggle .jdt-chev { transition: transform 0.25s; font-size: 10px; }
.jdetails-toggle.open .jdt-chev { transform: rotate(180deg); }
[data-theme="light"] .jdetails-toggle { background: rgba(0,0,0,0.02); }
.jdetails-wrap { animation: jdetailsFade 0.25s ease; }
@keyframes jdetailsFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* ── J8e: 사진 제거 버튼 정본 (4중 선언을 하나로) ──
   36×36 + 여백으로 44px 터치 타깃에 근접시킨다. 접근 가능한 이름은
   마크업의 aria-label/title 이 제공한다. */
.btn-remove-img {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,0.72); color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; line-height: 1;
    z-index: 3; padding: 0;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-remove-img:hover { background: var(--red); border-color: var(--red); transform: scale(1.06); }
/* 유저 사진 위에 떠서 배경을 예측할 수 없다. 어두운 링 + 밝은 링 2겹으로
   흰 스크린샷·검은 차트 어느 쪽에서도 한쪽이 보이게 한다. */
.btn-remove-img:focus-visible {
    outline: 2px solid #0a0e14; outline-offset: 2px;
    box-shadow: 0 0 0 4px #f3f4f6;
}

/* Journal header flex fix */
.journal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.journal-header h3 { margin: 0; }

/* ─── Hero Background Chart ─── */
.hero-section { position: relative; overflow: hidden; }
.hero-bg-chart {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    /* 마우스 인터랙션을 위해 캔버스가 이벤트를 받지만, 클릭은 통과 */
    pointer-events: none;
    opacity: 0.65;
}
.hero-container { position: relative; z-index: 1; }

/* ─── AMA Logo (Nav & Footer) ─── */
.nav-logo-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-logo-icon svg { display: block; }
.footer-logo-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-logo-icon svg { display: block; }

/* ─── 광고 슬롯 (라벨 표시 — 식별/평가용) ─── */
.site-ad-slot {
    position: relative;
    margin: 24px auto;
    max-width: 970px;
    min-height: 90px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 16px;
    box-sizing: border-box;
}
.site-ad-slot.size-rect { max-width: 336px; min-height: 280px; }
.site-ad-slot.size-sky { max-width: 160px; min-height: 600px; }
.site-ad-slot.size-half { max-width: 728px; min-height: 90px; }
.site-ad-slot::before {
    content: attr(data-ad-label);
    position: absolute;
    top: 6px; left: 10px;
    font-size: 10px;
    font-weight: 800;
    color: #c9ced6;
    background: rgba(180,190,205,0.12);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.site-ad-slot .site-ad-body {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.55;
    text-align: center;
    line-height: 1.6;
}
[data-theme="light"] .site-ad-slot { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.12); }
@media (max-width: 768px) { .site-ad-slot { display: none; } }

/* ─── 플랜 뱃지 전체 숨김 — 전 유저 무료 전환 ─── */
.user-badge.badge-premium,
.user-badge.badge-pro,
.user-badge.badge-beginner,
.nav-plan-badge.badge-premium,
.nav-plan-badge.badge-pro,
.nav-plan-badge.badge-beginner,
.nav-plan-badge.badge-tester,
.mypage-badge.badge-premium,
.mypage-badge.badge-pro,
.mypage-badge.badge-beginner,
.mypage-badge.badge-free,
.mypage-badge.user-badge.badge-free {
    display: none !important;
}

/* ─── Community Badges ─── */
.user-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 18px;
}
.user-badge.badge-beginner {
    background: linear-gradient(135deg, rgba(14,203,129,0.1), rgba(14,203,129,0.2));
    color: #0ecb81;
    border: 1px solid rgba(14,203,129,0.3);
}
.badge-influencer {
    background: linear-gradient(135deg, rgba(170,0,255,0.12), rgba(170,0,255,0.22));
    color: #d580ff;
    border: 1px solid rgba(170,0,255,0.3);
}
.badge-ama {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, rgba(160,170,185,0.2), rgba(180,190,205,0.12));
    color: #9ca3af;
    border: 1px solid rgba(160,170,185,0.35);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 18px;
}
.badge-ama:hover {
    background: linear-gradient(135deg, rgba(160,170,185,0.3), rgba(180,190,205,0.2));
    border-color: rgba(160,170,185,0.5);
    box-shadow: 0 2px 12px rgba(160,170,185,0.25);
    transform: translateY(-1px);
}
.badge-ama i { font-size: 9px; }
[data-theme="light"] .badge-ama {
    background: linear-gradient(135deg, rgba(160,170,185,0.12), rgba(180,190,205,0.06));
    color: #7d8790;
    border-color: rgba(160,170,185,0.4);
}
[data-theme="light"] .badge-ama:hover {
    background: linear-gradient(135deg, rgba(160,170,185,0.2), rgba(180,190,205,0.12));
    box-shadow: 0 2px 12px rgba(160,170,185,0.15);
}
.user-badge.badge-free {
    background: rgba(107,114,128,0.1);
    color: #9ca3af;
    border: 1px solid rgba(107,114,128,0.2);
}

/* ─── PRO Verified Badge (3D 인스타그램 스타일) ─── */
.user-badge.badge-pro {
    background: none;
    border: none;
    padding: 0;
    margin-left: 3px;
    position: relative;
}
.badge-pro .verified-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #6366f1, #818cf8);
    box-shadow:
        0 2px 8px rgba(99,102,241,0.45),
        0 0 0 1.5px rgba(99,102,241,0.2),
        inset 0 1px 1px rgba(255,255,255,0.3);
    position: relative;
    flex-shrink: 0;
}
.badge-pro .verified-icon::after {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
.badge-pro .verified-label {
    font-size: 9px;
    font-weight: 800;
    color: #818cf8;
    margin-left: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(99,102,241,0.3);
}

/* ─── PREMIUM Verified Badge (3D 무지개 + 글로우) ─── */
@keyframes premiumShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes premiumGlow {
    0%, 100% { box-shadow: 0 2px 10px rgba(180,190,205,0.5), 0 0 0 1.5px rgba(180,190,205,0.15), inset 0 1px 1px rgba(255,255,255,0.35); }
    33%      { box-shadow: 0 2px 12px rgba(170,0,255,0.5), 0 0 0 1.5px rgba(170,0,255,0.15), inset 0 1px 1px rgba(255,255,255,0.35); }
    66%      { box-shadow: 0 2px 12px rgba(59,130,246,0.5), 0 0 0 1.5px rgba(59,130,246,0.15), inset 0 1px 1px rgba(255,255,255,0.35); }
}
@keyframes premiumSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.user-badge.badge-premium {
    background: none;
    border: none;
    padding: 0;
    margin-left: 3px;
    position: relative;
}
.badge-premium .verified-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9ced6, #e040fb, #6366f1, #3b82f6, #0ecb81, #e5e7eb, #c9ced6);
    background-size: 300% 300%;
    animation: premiumShift 4s ease infinite, premiumGlow 3s ease infinite;
    position: relative;
    flex-shrink: 0;
}
.badge-premium .verified-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(#c9ced6, #e040fb, #6366f1, #3b82f6, #0ecb81, #e5e7eb, #c9ced6);
    animation: premiumSpin 6s linear infinite;
    z-index: -1;
    opacity: 0.3;
    filter: blur(3px);
}
.badge-premium .verified-icon::after {
    content: '';
    width: 9px;
    height: 5.5px;
    border-left: 2.2px solid #fff;
    border-bottom: 2.2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.badge-premium .verified-label {
    font-size: 9px;
    font-weight: 800;
    margin-left: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #c9ced6, #e040fb, #818cf8, #c9ced6);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: premiumShift 3s ease infinite;
}

/* ─── 네비게이션 바 전용 Verified 뱃지 ─── */
.nav-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: 2px;
    vertical-align: middle;
}
.nav-verified-badge .verified-icon {
    width: 14px;
    height: 14px;
}
.nav-verified-badge .verified-icon::after {
    width: 6px;
    height: 3.5px;
    border-width: 1.5px;
}
.nav-verified-badge.badge-premium .verified-icon {
    width: 15px;
    height: 15px;
}
.nav-verified-badge.badge-premium .verified-icon::after {
    width: 7px;
    height: 4px;
    border-width: 1.8px;
}
.nav-verified-badge .verified-label { display: none; }

/* ─── Plans Page - Premium Card Override ─── */
.plan-card.premium-card {
    border: 1px solid rgba(170,0,255,0.3) !important;
    background: linear-gradient(165deg, rgba(170,0,255,0.08) 0%, rgba(236,72,153,0.03) 30%, rgba(255,255,255,0.02) 60%, rgba(210,215,225,0.03) 100%) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 24px rgba(170,0,255,0.08), 0 0 12px rgba(210,215,225,0.04), inset 0 1px 0 rgba(170,0,255,0.15);
}
.plan-card.premium-card:hover {
    border-color: rgba(170,0,255,0.5) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 40px rgba(170,0,255,0.15), 0 0 20px rgba(210,215,225,0.06), inset 0 1px 0 rgba(170,0,255,0.25) !important;
}
.btn-premium {
    background: linear-gradient(135deg, #aa00ff, #7c4dff, #c9ced6) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(170, 0, 255, 0.3);
}
.btn-premium:hover {
    background: linear-gradient(135deg, #c040ff, #9c6bff, #ffa733) !important;
    box-shadow: 0 6px 24px rgba(170, 0, 255, 0.4);
    transform: translateY(-1px);
}
.plan-required-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    background: var(--accent-glow); color: var(--accent);
    padding: 2px 8px; border-radius: 10px; margin-left: 6px;
    vertical-align: middle;
}
.plan-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ─── Admin Influencer Badge Button ─── */
.btn-influencer {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-influencer:hover {
    border-color: var(--purple);
    color: var(--purple);
}
.btn-influencer.active {
    background: rgba(170,0,255,0.15);
    border-color: var(--purple);
    color: #d580ff;
}

/* ─── AI Usage Info (Trade Bot) ─── */
.ai-usage-info {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 8px;
    margin-top: 6px;
    background: rgba(139,148,158,0.06);
    border-radius: var(--radius-xs);
    text-align: center;
}
.ai-limit-msg {
    padding: 12px;
    background: rgba(255,23,68,0.08);
    border: 1px solid rgba(255,23,68,0.2);
    border-radius: var(--radius);
    color: var(--red);
    font-size: 13px;
    text-align: center;
}
.ai-limit-msg i { margin-right: 6px; }
.ai-limit-msg a {
    color: var(--accent);
    text-decoration: underline;
    margin-left: 8px;
}

/* ==============================================
   Analysis Guide Section
   ============================================== */
.analysis-guide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 10px;
}
.guide-step {
    background: var(--glass-bg);

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    transition: all 0.3s;
    box-shadow: var(--glass-shadow);
}
.guide-step:hover { border-color: rgba(200, 208, 220, 0.30); transform: translateY(-3px); box-shadow: var(--shadow-premium); }
.guide-visual { width: 100%; }
.guide-demo-box {
    background: rgba(180,190,205,0.04);
    border: 2px dashed rgba(180,190,205,0.25);
    border-radius: 12px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 160px;
    justify-content: center;
    position: relative;
}
.guide-demo-box.ai-pulse {
    animation: guidePulse 2s ease-in-out infinite;
}
@keyframes guidePulse {
    0%, 100% { border-color: rgba(180,190,205,0.25); background: rgba(180,190,205,0.04); }
    50% { border-color: rgba(180,190,205,0.5); background: rgba(180,190,205,0.08); }
}
.guide-demo-icon {
    font-size: 28px;
    color: var(--accent);
}
.guide-demo-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    font-family: 'Pretendard', sans-serif;
}
.guide-demo-arrow {
    font-size: 20px;
    color: var(--accent);
    opacity: 0.6;
    animation: guideArrow 1.5s ease-in-out infinite;
}
@keyframes guideArrow {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(6px); opacity: 1; }
}
.guide-info { width: 100%; }
.guide-step-num {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-glow);
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.guide-info h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.guide-info p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 768px) {
    .analysis-guide { grid-template-columns: 1fr; }
}

/* ==============================================
   Trade Page - Order Mode Top Bar
   ============================================== */
.order-mode-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.order-mode-bar .mode-btn {
    flex: 1;
}

/* Trigger input with current price button */
.trigger-input-wrap {
    display: flex;
    gap: 4px;
    align-items: center;
}
.trigger-input-wrap .of-input { flex: 1; }
.btn-current-price {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--accent);
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.2s;
}
.btn-current-price:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
}

/* Orderbook - my limit order highlight */
.ob-row.my-order {
    background: rgba(180,190,205,0.08) !important;
    position: relative;
}
.ob-row.my-order::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--accent);
}

/* ═══════════════════════════════════════════
   PREMIUM GLOBAL ENHANCEMENTS
   ═══════════════════════════════════════════ */

/* ─── Premium Animations ─── */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes softGlow { 0%, 100% { box-shadow: 0 0 12px rgba(232, 168, 56, 0.08); } 50% { box-shadow: 0 0 24px rgba(200, 208, 220, 0.25); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes subtlePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* ─── Premium Card Enhancement (Global) ─── */
.premium-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.premium-card:not(.plan-card)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 208, 220, 0.30), transparent);
    opacity: 1;
    transition: var(--transition-smooth);
}
.premium-card:not(.plan-card):hover {
    border-color: rgba(232, 168, 56, 0.12);
    box-shadow: var(--shadow-premium);
    transform: translateY(-2px);
}

/* ─── Premium Text Glow ─── */
.text-glow { text-shadow: 0 0 20px currentColor; }
.text-gold { color: var(--accent); }

/* ─── Enhanced Up/Down Colors ─── */
.up, .profit { color: var(--green); }
.down, .loss { color: var(--red); }

/* ─── Table Enhancement ─── */
.admin-table tr:hover td {
    background: rgba(232, 168, 56, 0.02);
    position: relative;
}
.trade-table tbody tr:hover:not(.empty-row) td {
    background: rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .trade-table tbody tr:hover:not(.empty-row) td {
    background: rgba(0, 0, 0, 0.02);
}

/* ─── Scrollbar Premium ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
::-webkit-scrollbar-thumb { background: rgba(200, 208, 220, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232, 168, 56, 0.25); }

/* ─── Selection Color ─── */
::selection { background: rgba(200, 208, 220, 0.30); color: var(--text-primary); }
::-moz-selection { background: rgba(200, 208, 220, 0.30); color: var(--text-primary); }

/* ─── Storage Notice Banner ─── */
.storage-notice-banner {
    background: linear-gradient(135deg, rgba(180,190,205,0.08), rgba(244,63,94,0.06));
    border-bottom: 1px solid rgba(180,190,205,0.2);
    padding: 14px 20px;
    position: relative;
    z-index: 90;
}
.storage-notice-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.storage-notice-icon {
    font-size: 22px;
    color: #c9ced6;
    flex-shrink: 0;
}
.storage-notice-text {
    flex: 1;
    min-width: 200px;
}
.storage-notice-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #c9ced6;
    margin-bottom: 4px;
}
.storage-notice-text p {
    font-size: 13px;
    color: #9ca3af;
    margin: 2px 0;
    line-height: 1.5;
}
.storage-notice-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.storage-notice-btn {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: all 0.2s;
}
.storage-notice-btn.btn-accept {
    background: rgba(107,114,128,0.15);
    color: #9ca3af;
    border: 1px solid rgba(107,114,128,0.3);
}
.storage-notice-btn.btn-accept:hover {
    background: rgba(107,114,128,0.25);
    color: #e5e7eb;
}
.storage-notice-btn.btn-upgrade {
    background: linear-gradient(135deg, #c9ced6, #e8850a);
    color: #fff;
}
.storage-notice-btn.btn-upgrade:hover {
    background: linear-gradient(135deg, #e8850a, #d4770a);
}
@media (max-width: 640px) {
    .storage-notice-inner { flex-direction: column; align-items: flex-start; }
    .storage-notice-actions { width: 100%; }
    .storage-notice-btn { flex: 1; text-align: center; }
}

/* ─── Purchase Modal ─── */
.purchase-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    z-index: 10000; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.purchase-modal {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 12px; width: 100%; max-width: 480px;
    max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative; animation: purchaseSlideIn 0.3s ease;
}
@keyframes purchaseSlideIn {
    from { opacity: 0; transform: translateY(28px) scale(0.92); transform-origin: bottom right; }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.purchase-modal-close {
    position: absolute; top: 10px; right: 10px;
    background: none; border: none; color: var(--text-muted);
    font-size: 24px; cursor: pointer; line-height: 1;
    transition: color 0.15s; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; z-index: 10;
}
.purchase-modal-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
[data-theme="light"] .purchase-modal-close:hover { background: rgba(0,0,0,0.06); }
.purchase-modal-header {
    padding: 24px 28px 16px; border-bottom: 1px solid var(--border); text-align: center;
}
.purchase-modal-header h2 {
    font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; text-align: center;
}
.purchase-modal-header p { font-size: 13px; color: var(--text-muted); text-align: center; }
.purchase-modal-body { padding: 24px 28px; overflow-y: auto; flex: 1; min-height: 0; }
.purchase-plan-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 6px;
}
.purchase-plan-name { font-size: 17px; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.purchase-plan-price { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.purchase-details {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.purchase-detail-row {
    display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary);
}
.purchase-method { margin-bottom: 18px; }
.purchase-method-options { display: flex; gap: 8px; }
.purchase-method-item {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    transition: all 0.15s;
}
.purchase-method-item input { display: none; }
.purchase-method-item.active {
    border-color: var(--accent); color: var(--accent);
    background: rgba(180,190,205,0.08);
}
.purchase-method-item:hover { border-color: rgba(255,255,255,0.15); }
.purchase-terms { margin-bottom: 14px; }
.purchase-terms-box {
    max-height: 140px; overflow-y: auto; padding: 14px 16px;
    background: rgba(0,0,0,0.2); border: 1px solid var(--border);
    border-radius: 6px; font-size: 11px; color: #9ca3af; line-height: 1.7;
}
.purchase-terms-box h4 {
    font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px;
}
.purchase-terms-box ol { padding-left: 16px; }
.purchase-terms-box li { margin-bottom: 4px; }
.purchase-terms-box strong { color: var(--text-secondary); }
.purchase-agreement { margin-bottom: 4px; }
.purchase-agreement input[type="checkbox"] { accent-color: var(--accent); }
.purchase-modal-footer {
    padding: 16px 28px 24px; display: flex; gap: 12px; justify-content: center; text-align: center;
}
.purchase-modal-footer .btn { min-width: 120px; text-align: center; justify-content: center; }
@media (max-width: 480px) {
    .purchase-modal { border-radius: 8px; }
    .purchase-modal-header, .purchase-modal-body { padding-left: 20px; padding-right: 20px; }
    .purchase-modal-footer { padding-left: 20px; padding-right: 20px; }
    .purchase-method-options { flex-direction: column; }
}

/* ─── Plan Next Label ─── */
.plan-next-label {
    display: block; margin-top: 8px; padding: 6px 12px;
    background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.2);
    border-radius: 6px; font-size: 12px; font-weight: 600;
    color: #818cf8; text-align: center;
}
.btn-outline {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); padding: 8px 16px;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.btn-outline:hover { border-color: var(--text-muted); color: var(--text-primary); }

/* ─── Chatbot Widget ─── */
.chatbot-toggle {
    position: fixed; bottom: 32px; right: 32px; z-index: 9998;
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, #7b61ff 0%, #5a3fd6 100%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 24px rgba(123,97,255,0.4), 0 0 0 3px rgba(123,97,255,0.1);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; font-size: 22px;
    flex-direction: column; gap: 1px;
    animation: chatTogglePulse 3s ease-in-out infinite;
}
@keyframes chatTogglePulse { 0%,100% { box-shadow: 0 4px 24px rgba(123,97,255,0.4), 0 0 0 3px rgba(123,97,255,0.1); } 50% { box-shadow: 0 4px 30px rgba(123,97,255,0.6), 0 0 0 6px rgba(123,97,255,0.08); } }
.chatbot-toggle:hover {
    transform: scale(1.10) rotate(-5deg); box-shadow: 0 6px 32px rgba(123,97,255,0.6); animation: none;
}
.chatbot-toggle.hidden { display: none; }
/* 챗봇 열린 상태 — 토글은 \"닫기\" 버튼으로 유지, 항상 우측 하단 고정 */
.chatbot-toggle.is-open {
    transform: scale(0.92);
    box-shadow: 0 2px 14px rgba(123,97,255,0.35), 0 0 0 2px rgba(123,97,255,0.15);
    animation: none;
}
.chatbot-toggle.is-open:hover {
    transform: scale(0.98) rotate(5deg);
    box-shadow: 0 4px 22px rgba(123,97,255,0.5);
}
.chatbot-toggle i { font-size: 22px; }
.chatbot-toggle-label { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; margin-top: -2px; opacity: 0.9; }

.chatbot-window {
    position: fixed; bottom: 108px; right: 32px; z-index: 9999;
    width: 380px; height: 560px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
    opacity: 0; visibility: hidden;
    transform: translateY(28px) scale(0.92); transform-origin: bottom right;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.28s;
    overflow: hidden;
}
.chatbot-window.open {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}

.chatbot-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.chatbot-header-left { display: flex; align-items: center; gap: 10px; }
.chatbot-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #7b61ff, #5a3fd6);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px;
}
.chatbot-header-info { display: flex; flex-direction: column; }
.chatbot-header-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.chatbot-header-status { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.chatbot-online-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10b981; display: inline-block;
}
.chatbot-header-right { display: flex; align-items: center; gap: 8px; }
.chatbot-close {
    width: 30px; height: 30px; border-radius: 8px;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.chatbot-close:hover { background: var(--bg-elevated); color: var(--text-primary); }

.chatbot-mode-switch { display: flex; gap: 2px; background: var(--bg-input); border-radius: 8px; padding: 2px; }
.chatbot-mode-btn {
    padding: 5px 10px; border: none; border-radius: 6px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    background: none; color: var(--text-muted); transition: all 0.15s;
}
.chatbot-mode-btn.active { background: var(--accent); color: #000; }
.chatbot-mode-btn:hover:not(.active) { color: var(--text-primary); }

.chatbot-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

.chatbot-welcome { text-align: center; padding: 20px 0 10px; }
.chatbot-welcome-icon { font-size: 28px; margin-bottom: 8px; color: #9ca3af; }
.chatbot-welcome p { font-size: 13px; color: var(--text-secondary); margin: 2px 0; }

.chatbot-upgrade-hint {
    margin-top: 12px; padding: 8px 12px;
    background: rgba(160,170,185,0.08);
    border: 1px solid rgba(160,170,185,0.15);
    border-radius: 8px; font-size: 11px; color: #9ca3af;
}

.chatbot-quick-actions {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-top: 8px;
}
.chatbot-quick-btn {
    padding: 6px 12px; border-radius: 16px;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    transition: all 0.15s;
}
.chatbot-quick-btn:hover {
    background: var(--bg-card-hover); border-color: var(--accent);
    color: var(--accent);
}

.chatbot-msg { display: flex; gap: 8px; align-items: flex-start; }
.chatbot-msg-user { justify-content: flex-end; }
.chatbot-msg-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #9ca3af, #94a1ac);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px;
}
.chatbot-msg-bubble {
    max-width: 80%; padding: 10px 14px;
    border-radius: 14px; font-size: 13px; line-height: 1.5;
    word-break: break-word;
}
.chatbot-msg-bubble.user {
    background: var(--accent); color: #000; font-weight: 500;
    border-bottom-right-radius: 4px;
}
.chatbot-msg-bubble.assistant {
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.chatbot-msg-bubble.system {
    background: rgba(91,154,255,0.08); color: #5b9aff;
    border: 1px solid rgba(91,154,255,0.18);
    font-size: 12px; text-align: center; width: 100%;
    border-radius: 8px;
}
.chatbot-msg-bubble.system.success {
    background: rgba(16,185,129,0.10); color: #10b981;
    border-color: rgba(16,185,129,0.22);
}
.chatbot-msg-bubble.system.error {
    background: rgba(239,68,68,0.10); color: #ef4444;
    border-color: rgba(239,68,68,0.20);
}

.chatbot-nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 8px 16px; border-radius: 10px;
    background: linear-gradient(135deg, #c9ced6, #e8850a); color: #fff;
    font-size: 12px; font-weight: 700; border: none; cursor: pointer;
    transition: all 0.2s; box-shadow: 0 2px 8px rgba(180,190,205,0.3);
}
.chatbot-nav-btn:hover {
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(180,190,205,0.4);
}

.typing-dots { display: flex; gap: 4px; padding: 4px 0; }
.typing-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted); animation: typingBounce 1.4s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

.chatbot-input-area {
    padding: 10px 14px 14px; border-top: 1px solid var(--border);
    background: var(--bg-card); flex-shrink: 0;
}
.chatbot-mode-label {
    font-size: 10px; color: var(--text-muted); margin-bottom: 6px;
    padding: 0 4px; display: flex; align-items: center; gap: 4px;
}
.chatbot-mode-label.consultation { color: #818cf8; }
.chatbot-input-wrap { display: flex; gap: 8px; align-items: flex-end; }
.chatbot-input {
    flex: 1; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px;
    color: var(--text-primary); font-size: 13px; resize: none;
    font-family: inherit; line-height: 1.4;
    transition: border-color 0.15s; max-height: 80px;
}
.chatbot-input:focus { outline: none; border-color: var(--accent); }
.chatbot-input::placeholder { color: var(--text-muted); }
.chatbot-send {
    width: 38px; height: 38px; border-radius: 10px; border: none;
    background: var(--accent); color: #000; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; transition: all 0.15s; flex-shrink: 0;
}
.chatbot-send:hover { background: var(--accent-hover); }
.chatbot-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Chatbot Inquiry Buttons & Form */
.chatbot-inquiry-btns {
    display:flex; gap:6px; justify-content:center; padding:10px 16px 4px;
}
.chatbot-inq-btn {
    padding:7px 14px; border-radius:10px;
    background:rgba(129,140,248,0.1); border:1px solid rgba(129,140,248,0.2);
    color:#818cf8; font-size:12px; font-weight:600;
    cursor:pointer; transition:all 0.15s;
    display:flex; align-items:center; gap:5px;
}
.chatbot-inq-btn:hover {
    background:rgba(129,140,248,0.18); border-color:rgba(129,140,248,0.35);
}
[data-theme="light"] .chatbot-inq-btn {
    background:rgba(99,102,241,0.06); border-color:rgba(99,102,241,0.15);
}
.chatbot-inq-form {
    flex:1; display:flex; flex-direction:column; overflow-y:auto;
}
.chatbot-inq-form-head {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-bottom:1px solid var(--border);
    font-size:14px; font-weight:700;
}
.chatbot-inq-back {
    width:30px; height:30px; border-radius:8px; border:none;
    background:none; color:var(--text-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.chatbot-inq-back:hover { background:rgba(255,255,255,0.06); color:var(--text-primary); }
.chatbot-inq-fields {
    padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
.chatbot-inq-fields label {
    font-size:11px; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.5px; margin-top:2px;
}
.chatbot-inq-fields select,
.chatbot-inq-fields input,
.chatbot-inq-fields textarea {
    width:100%; padding:9px 12px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:8px; color:var(--text-primary);
    font-size:13px; font-family:inherit;
}
.chatbot-inq-fields select:focus,
.chatbot-inq-fields input:focus,
.chatbot-inq-fields textarea:focus { outline:none; border-color:var(--accent); }
.chatbot-inq-fields textarea { resize:vertical; min-height:80px; }
.chatbot-inq-submit {
    padding:11px; border-radius:10px; border:none;
    background:linear-gradient(135deg,#818cf8,#6366f1);
    color:#fff; font-size:13px; font-weight:700;
    cursor:pointer; display:flex; align-items:center;
    justify-content:center; gap:6px; transition:all 0.2s;
    margin-top:4px;
}
.chatbot-inq-submit:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(99,102,241,0.4); }

/* 챗봇 토글 회전 — 열릴 때 로봇 360도 회전 (X 아이콘으로 안 바뀜) */
.chatbot-toggle i,.chatbot-toggle svg{transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);}
.chatbot-toggle.is-open i,.chatbot-toggle.is-open svg{transform:rotate(360deg);}

/* Chatbot mobile — 컴팩트 윈도우 + 빠른메뉴/문의버튼 클러스터 */
@media (max-width: 768px) {
    .chatbot-window {
        width: min(290px, calc(100vw - 48px));
        height: min(440px, calc(100vh - 220px));
        bottom: 140px; right: 16px;
        border-radius: 14px;
        box-shadow: 0 18px 50px -10px rgba(0,0,0,0.55);
    }
    .chatbot-toggle { bottom: 76px; right: 14px; width: 44px; height: 44px; font-size: 16px; z-index: 9999; }
    .chatbot-toggle i { width:18px!important; height:18px!important; font-size:16px; }
    .chatbot-toggle-label { font-size: 7.5px; letter-spacing: 0.2px; }
    /* 빠른 메뉴 칩 — 컴팩트 (요금제 옆 한 줄) */
    .chatbot-quick-actions { gap:4px!important; padding:6px 6px 0!important; margin:0!important; }
    .chatbot-quick-btn { padding:4px 8px!important; font-size:10px!important; border-radius:13px; flex:0 1 auto; }
    .chatbot-quick-btn i { width:10px!important; height:10px!important; }
    /* 문제신고/문의하기 — 빠른메뉴 바로 아래 (간격 최소화) */
    .chatbot-inquiry-btns { gap:4px!important; padding:4px 6px 6px!important; margin:0!important; }
    .chatbot-inq-btn { padding:4px 8px!important; font-size:10px!important; border-radius:13px; }
    .chatbot-inq-btn i { width:10px!important; height:10px!important; }
    /* 입력창과 살짝 간격 */
    .chatbot-input-wrap { margin-top:2px; }
}
@media (max-width: 380px) {
    .chatbot-window { width: calc(100vw - 32px); right: 16px; height: min(420px, calc(100vh - 200px)); }
    .chatbot-quick-btn { padding:3px 7px!important; font-size:9.5px!important; }
    .chatbot-inq-btn { padding:3px 7px!important; font-size:9.5px!important; }
}

/* ─── Monthly Analysis Button ─── */
.btn-monthly-analysis {
    margin-left: auto;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.15));
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 20px;
    color: #a78bfa;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
    white-space: nowrap;
}
.btn-monthly-analysis:hover {
    background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(59,130,246,0.25));
    border-color: rgba(139,92,246,0.5);
    transform: translateY(-1px);
}
/* locked 는 journal_content.php 가 내보내는 기본 상태다 — 무엇이 잠겼는지
   읽혀야 잠금 해제 동기가 생기므로 opacity 로 텍스트를 흐리지 않는다 (J10f). */
.btn-monthly-analysis.locked {
    background: rgba(255,255,255,0.03);
    border-color: var(--border);
    color: var(--text-secondary);
}
.btn-monthly-analysis.locked:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    transform: none;
}

/* Daily Summary Button */
.btn-daily-summary {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(59,130,246,0.1)) !important;
    border-color: rgba(16,185,129,0.3) !important;
    color: #34d399 !important;
}
.btn-daily-summary:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(59,130,246,0.2)) !important;
    border-color: rgba(16,185,129,0.5) !important;
}

/* ─── AI Summary Modal ─── */
.ai-summary-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 150000; /* 트레이딩 기록 모달(100000)보다 위 */
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ai-summary-overlay.open {
    display: flex;
}
.ai-summary-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: aiModalIn 0.3s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
@keyframes aiModalIn {
    from { opacity: 0; transform: translateY(28px) scale(0.92); transform-origin: bottom right; }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.ai-summary-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai-summary-title-row i {
    font-size: 20px;
    color: #a78bfa;
}
.ai-summary-title-row h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.ai-summary-stats {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}
.ai-stat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ai-chip {
    padding: 5px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ai-chip.chip-up { color: var(--green); border-color: rgba(16,185,129,0.3); background: var(--green-bg); }
.ai-chip.chip-down { color: var(--red); border-color: rgba(239,68,68,0.3); background: var(--red-bg); }
.ai-summary-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}
.ai-feedback-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-secondary);
}
.ai-feedback-content strong {
    color: var(--text-primary);
}

/* AI Loading */
.ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}
.ai-loading p {
    color: var(--text-muted);
    font-size: 14px;
}
.ai-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: aiSpin 0.8s linear infinite;
}
@keyframes aiSpin {
    to { transform: rotate(360deg); }
}

/* AI Error */
.ai-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
.ai-error i {
    font-size: 24px;
    color: var(--yellow);
    display: block;
    margin-bottom: 12px;
}

/* Journal footer buttons */
.jmodal-footer {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;   /* J7a: 위쪽 .jmodal-footer 규칙과 동일 — 나중 선언이 되돌리지 않게 여기도 명시 */
}

@media (max-width: 480px) {
    .btn-monthly-analysis span { display: none; }
    .btn-monthly-analysis { padding: 8px 12px; }
    .ai-summary-modal { max-height: 90vh; border-radius: 12px; }
    .ai-summary-body { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE LIGHT MODE FIX — rgba(255,255,255,0.0X) overrides
   All backgrounds, borders, and text that are invisible on white
   ═══════════════════════════════════════════════════════════════ */

/* ── Theme Toggle ── */
[data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.03); }
[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.06); }

/* ── Nav: user area, balance, link hovers ── */
[data-theme="light"] .nav-user:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .nav-link:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .nav-more-emoji { background: rgba(0,0,0,0.03); }
[data-theme="light"] .dropdown-divider { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.04); }

/* ── Index: Info cards, patch notes ── */
[data-theme="light"] .info-list-item a { border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="light"] .patch-item { border-left-color: rgba(0,0,0,0.08); }
[data-theme="light"] .patch-timeline { scrollbar-color: rgba(0,0,0,0.1) transparent; }
[data-theme="light"] .patch-timeline::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }
[data-theme="light"] .patch-timeline::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }

/* ── Pricing features (index page) ── */
[data-theme="light"] .pricing-features li i.fa-times {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}

/* ── Auth / Login ── */
[data-theme="light"] .login-box { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
[data-theme="light"] .form-input { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .form-input:focus { box-shadow: 0 0 0 3px rgba(160,170,185,0.1), 0 0 12px rgba(160,170,185,0.06); }

/* ── Trade Page: Order panel, leverage, sliders ── */
[data-theme="light"] .lev-slider-line { background: rgba(0,0,0,0.1); }
[data-theme="light"] .lev-ctrl .lev-btn:hover { color: var(--accent); background: rgba(0,0,0,0.05); }
[data-theme="light"] .lev-info { background: transparent; }

/* ── Trade Page: Order book backgrounds ── */
[data-theme="light"] .ob-row:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .rt-row:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .ta-table td { border-bottom-color: rgba(0,0,0,0.04); }

/* ── Trade Page: AI position cards & analysis ── */
[data-theme="light"] .ai-pos-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-chart-img { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ai-chart-blur-cta { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-local-block { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-rating-comment { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-score-bar-wrap { background: rgba(0,0,0,0.06); }
[data-theme="light"] .ai-pos-select-cancel { background: rgba(0,0,0,0.04); color: var(--text-secondary); }

/* ── Trade Page: Position level bar signals ── */
[data-theme="light"] .pos-level-bar { background: #f8f9fb; }

/* ── Plan cards: free card override & card-left ── */
[data-theme="light"] .plan-card:not(.popular):not(.premium-card):not(.beginner-card) {
    background: rgba(0,0,0,0.01);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
[data-theme="light"] .plan-card-left { border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="light"] .plan-card .plan-desc { color: var(--text-muted); }
[data-theme="light"] .plan-next-label { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.15); color: #4f46e5; }

/* ── Plan card pseudo-elements in light ── */
[data-theme="light"] .plan-card:not(.popular):not(.premium-card):not(.beginner-card)::after { content: none !important; }
[data-theme="light"] .plan-card.beginner-card::after { opacity: 0.5; }
[data-theme="light"] .plan-card.popular::after { opacity: 0.5; }
[data-theme="light"] .plan-card.premium-card::after { opacity: 0.5; }

/* ── Plan card premium override for light ── */
[data-theme="light"] .plan-card.premium-card {
    background: linear-gradient(165deg, rgba(170,0,255,0.04) 0%, rgba(236,72,153,0.02) 30%, rgba(255,255,255,0.9) 60%, rgba(210,215,225,0.02) 100%) !important;
    border-color: rgba(170,0,255,0.2) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05), 0 0 12px rgba(170,0,255,0.04) !important;
}
[data-theme="light"] .plan-card.premium-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 0 20px rgba(170,0,255,0.06) !important;
}

/* ── Purchase modal: method items, terms ── */
[data-theme="light"] .purchase-method-item { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .purchase-method-item:hover { border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .purchase-method-item.active { background: rgba(180,190,205,0.06); border-color: var(--accent); }
[data-theme="light"] .purchase-terms-box { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); color: #4a5568; }
[data-theme="light"] .purchase-terms-box h4 { color: var(--text-primary); }
[data-theme="light"] .purchase-terms-box strong { color: var(--text-primary); }
[data-theme="light"] .purchase-modal-close:hover { background: rgba(0,0,0,0.06); }

/* ── News popup ── */
[data-theme="light"] .news-popup { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
[data-theme="light"] .news-popup-link { border-color: rgba(0,0,0,0.08); color: var(--text-secondary); }
[data-theme="light"] .news-popup-link:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
[data-theme="light"] .news-popup-overlay { background: rgba(0,0,0,0.25); }

/* ── Journal: Calendar day borders ── */
[data-theme="light"] .cal-day { border-color: rgba(0,0,0,0.04); }
[data-theme="light"] .cal-day:hover { border-color: rgba(0,0,0,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
[data-theme="light"] .cal-count { background: rgba(0,0,0,0.04); color: var(--text-secondary); }  /* 4.36:1 미달이었다 — 배경을 밝히고 글자를 진하게 (7.0:1) */

/* ── Journal: Form & fields ── */
[data-theme="light"] .journal-form-card { background: #ffffff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .journal-field label { color: var(--journal-label); }
[data-theme="light"] .entry-notes { background: rgba(0,0,0,0.03); }
[data-theme="light"] .entry-feedback { background: rgba(41,121,255,0.04); border-color: rgba(41,121,255,0.12); }
[data-theme="light"] .entry-symbol { background: rgba(180,190,205,0.08); }

/* ── Journal: Period tabs, stat combined ── */
[data-theme="light"] .journal-period-tabs { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .journal-stat-combined { background: #ffffff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .journal-stat-combined .stat-divider { background: rgba(0,0,0,0.08); }

/* ── Journal Modal (jmodal) ── */
[data-theme="light"] .jmodal-overlay { background: rgba(0,0,0,0.35); }
[data-theme="light"] .jmodal { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
[data-theme="light"] .jmodal-close:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .jmodal-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.22); }
[data-theme="light"] .jmodal-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.34); }
[data-theme="light"] .jmodal-body { scrollbar-color: rgba(0,0,0,0.22) transparent; }
[data-theme="light"] .jmodal-form-divider::before { background: rgba(0,0,0,0.06); }
[data-theme="light"] .jmodal-form-divider span { background: #ffffff; }
[data-theme="light"] .journal-entry-card { background: #f8f9fb; border-color: rgba(0,0,0,0.06); }

/* ── Ranking ── */
[data-theme="light"] .rank-avatar { border-color: rgba(0,0,0,0.08); }

/* ── Admin: Nav, table, scrollbars ── */
[data-theme="light"] .admin-nav-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .admin-table tr:hover td { background: rgba(0,0,0,0.02); }
[data-theme="light"] .admin-nav-badge { background: rgba(0,0,0,0.05); color: var(--text-muted); }

/* ── Chatbot: inquiry form, back button ── */
[data-theme="light"] .chatbot-inq-back:hover { background: rgba(0,0,0,0.04); color: var(--text-primary); }
[data-theme="light"] .chatbot-inq-form-head { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .chatbot-inq-fields select,
[data-theme="light"] .chatbot-inq-fields input,
[data-theme="light"] .chatbot-inq-fields textarea { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); }

/* ── AI Summary Modal ── */
[data-theme="light"] .ai-summary-overlay { background: rgba(0,0,0,0.25); }
[data-theme="light"] .ai-summary-modal { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
[data-theme="light"] .ai-summary-stats { background: rgba(0,0,0,0.02); }
[data-theme="light"] .ai-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }

/* ── Monthly/Daily Analysis Buttons ── */
[data-theme="light"] .btn-monthly-analysis {
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(59,130,246,0.08));
    border-color: rgba(139,92,246,0.2);
}
[data-theme="light"] .btn-monthly-analysis:hover {
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.15));
    border-color: rgba(139,92,246,0.35);
}
[data-theme="light"] .btn-monthly-analysis.locked {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .btn-daily-summary {
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(59,130,246,0.06)) !important;
    border-color: rgba(16,185,129,0.2) !important;
}
[data-theme="light"] .btn-daily-summary:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(59,130,246,0.12)) !important;
    border-color: rgba(16,185,129,0.35) !important;
}

/* ── SNS Share Button ── */
[data-theme="light"] .btn-sns-share { background: linear-gradient(135deg, rgba(91,154,255,0.06), rgba(59,130,246,0.06)); border-color: rgba(91,154,255,0.15); }
[data-theme="light"] .btn-sns-share:hover { box-shadow: 0 4px 16px rgba(91,154,255,0.12); }

/* ── Mobile nav: hamburger dropdown items ── */
[data-theme="light"] .nav-more-dropdown {
    border-color: rgba(0,0,0,0.06);
}

/* ── Plan period toggle (active bg) ── */
[data-theme="light"] .plan-period-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); }

/* ── General: Buttons with dark mode backgrounds ── */
[data-theme="light"] .btn-outline { border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .btn-outline:hover { border-color: rgba(0,0,0,0.2); color: var(--text-primary); }

/* ── General: Glass cards ── */
[data-theme="light"] .glass { background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.06); box-shadow: 0 4px 16px rgba(0,0,0,0.04); }

/* ── Trade: Orderbook quantity bars ── */
[data-theme="light"] .ob-qty-bar { opacity: 0.12; }

/* ── Analysis: Indicator grid backgrounds ── */
[data-theme="light"] .ax-ind { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ax-ind.locked { background: rgba(0,0,0,0.01); border-color: rgba(0,0,0,0.04); }

/* ── Journal chart card backgrounds ── */
[data-theme="light"] .jchart-col:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .jchart-col.bar-selected { background: rgba(0,0,0,0.04); }

/* ── Verified badge in light mode ── */
[data-theme="light"] .badge-ama { color: #7d8790; text-shadow: none; }

/* ── Plan card: FAQ accordion ── */
[data-theme="light"] .faq-acc-item { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .faq-acc-toggle:hover { background: rgba(0,0,0,0.02); }

/* ── Influencer badge button ── */
[data-theme="light"] .btn-influencer { border-color: rgba(0,0,0,0.1); color: var(--text-muted); }
[data-theme="light"] .btn-influencer:hover { border-color: var(--purple); color: var(--purple); }

/* ── General scrollbar overrides ── */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12) !important; }
[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.02) !important; }

/* ── Mobile: nav-more-dropdown border fix ── */
@media (max-width: 768px) {
    [data-theme="light"] .nav-more-dropdown { border-color: rgba(0,0,0,0.06); background: #ffffff; }
}

/* ── Plan card: required badge ── */
[data-theme="light"] .plan-required-badge { background: rgba(160,170,185,0.1); color: #7d8790; }

/* ── Trade: Empty rows & hover states ── */
[data-theme="light"] .trade-table tbody tr:hover td { background: rgba(0,0,0,0.02); }
[data-theme="light"] .trade-table tbody tr.empty-row td { color: var(--text-muted); background: transparent; }

/* ── Community: Modal overlays ── */
[data-theme="light"] .c-modal-overlay { background: rgba(0,0,0,0.25); }
[data-theme="light"] .c-detail-modal { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
[data-theme="light"] .c-write-modal { background: #ffffff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .c-modal-close:hover { background: rgba(0,0,0,0.04); }

/* ── Community: Write form inputs ── */
[data-theme="light"] .c-write-input,
[data-theme="light"] .c-write-textarea,
[data-theme="light"] .c-write-select { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); color: var(--text-primary); }
[data-theme="light"] .c-write-input:focus,
[data-theme="light"] .c-write-textarea:focus { border-color: rgba(41,121,255,0.4); }

/* ── News room: hover states ── */
[data-theme="light"] .nr-card { box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
[data-theme="light"] .nr-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

/* ── MyPage: stat card value colors ── */
[data-theme="light"] .mp-stat-value { color: var(--text-primary); }
[data-theme="light"] .mp-stat-label { color: var(--text-muted); }

/* ── Admin: status badge backgrounds ── */
[data-theme="light"] .admin-stat-card { background: #ffffff; border-color: rgba(0,0,0,0.06); }

/* ── Admin: pay stat items ── */
[data-theme="light"] .admin-pay-stat { background: #f8f9fb; border-color: rgba(0,0,0,0.06); }

/* ── General: toast notifications ── */
[data-theme="light"] .toast-notification { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

/* ── Index page: hero feature items ── */
[data-theme="light"] .hero-feature-item { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }

/* ── AI loading in light ── */
[data-theme="light"] .ai-loading-spinner { border-color: rgba(0,0,0,0.08); border-top-color: #a78bfa; }

/* ── Index: Breadcrumb hover ── */
[data-theme="light"] .idx-br-item:hover { background: rgba(0,0,0,0.03); }

/* ── Journal: Image upload placeholder ── */
[data-theme="light"] .journal-image-placeholder { border-color: rgba(10,14,20,0.48); color: var(--journal-label); }
[data-theme="light"] .journal-image-placeholder:hover { border-color: var(--accent); background: rgba(160,170,185,0.02); }

/* ── Trade: TPSL & Margin mode popups ── */
[data-theme="light"] .tpsl-popup { box-shadow: 0 16px 48px rgba(0,0,0,0.12); }
[data-theme="light"] .margin-mode-popup { box-shadow: 0 16px 48px rgba(0,0,0,0.12); }
[data-theme="light"] .lev-popup { box-shadow: 0 16px 48px rgba(0,0,0,0.12); }

/* ── Chatbot: toggle button in light ── */
[data-theme="light"] .chatbot-toggle { box-shadow: 0 4px 24px rgba(123,97,255,0.25), 0 0 0 3px rgba(123,97,255,0.06); }

/* ── General: confirm overlays ── */
[data-theme="light"] .confirm-overlay { background: rgba(0,0,0,0.25); }
[data-theme="light"] .confirm-box { box-shadow: 0 16px 48px rgba(0,0,0,0.12); }

/* ── Trade: Order form tab underline ── */
[data-theme="light"] .order-type-btn { border-bottom-color: transparent; }
[data-theme="light"] .order-type-btn.active { border-bottom-color: var(--accent); }

/* ── Plan card: beginner special ── */
[data-theme="light"] .plan-card.beginner-card {
    background: linear-gradient(165deg, rgba(59,130,246,0.04) 0%, rgba(96,165,250,0.02) 40%, rgba(255,255,255,0.9) 100%);
    border-color: rgba(59,130,246,0.15);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04), 0 0 8px rgba(59,130,246,0.04);
}

/* ── Analysis: eval chart dark bg stays dark ── */
[data-theme="light"] .ax-eval-chart { background: #1a1f2e; }

/* ── General: Badge backgrounds ── */
[data-theme="light"] .nav-plan-badge.badge-premium { text-shadow: none; }
[data-theme="light"] .nav-plan-badge.badge-pro { text-shadow: none; }
[data-theme="light"] .nav-plan-badge.badge-beginner { text-shadow: none; }
[data-theme="light"] .nav-plan-badge.badge-free { text-shadow: none; }

/* ── Light Mode: Select arrows + form elements ── */
[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
[data-theme="light"] .order-panel select,
[data-theme="light"] .trade-page select {
    background-color: #f9fafb !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #374151 !important;
}

/* ═══ PLANS PAGE — equal card heights, packed top, button anchored bottom ═══ */
.plans-grid { align-items: stretch; }
.plan-card { display: flex; flex-direction: column; }
.plan-card-wrap { display: flex; flex-direction: column; }
.plan-card-wrap > .plan-card { flex: 1; }
.plan-card-left { min-height: auto; flex: none; }
.plan-card-right { flex: 1; display: flex; flex-direction: column; }
.plan-features { flex: none; justify-content: flex-start; gap: 6px; margin-bottom: auto; }
.plan-card-action { margin-top: 18px; padding-top: 6px; }

/* ═══ TRADE PAGE — prevent text cutoff on lang sites (en/ja/zh) ═══ */
/* Tutorial / Expand buttons */
.chart-expand-btn { white-space: nowrap; flex-shrink: 0; }
.chart-expand-btn span, .chart-expand-btn { font-size: 12px; }
@media (max-width: 1480px) and (min-width: 769px) {
    .chart-expand-btn { font-size: 11px !important; padding: 6px 10px !important; }
    .symbol-stats { gap: 10px !important; }
    .stat-label { font-size: 9px !important; }
    .stat-val { font-size: 12px !important; }
}
@media (max-width: 1280px) and (min-width: 769px) {
    .chart-expand-btn span, .chart-expand-btn { font-size: 10px !important; padding: 5px 8px !important; }
    .symbol-stats { gap: 8px !important; }
    .stat-label { font-size: 8.5px !important; letter-spacing: 0 !important; }
}
/* AI Manager — keep header on single line, shrink usage badge */
.ai-mgr-header { white-space: nowrap; }
.ai-mgr-header > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ai-mgr-usage { white-space: nowrap; flex-shrink: 0; }
.ai-mgr-btn { white-space: normal; word-break: keep-all; overflow-wrap: break-word; line-height: 1.3; min-height: 36px; }
.ai-no-pos { display: block; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
@media (max-width: 1480px) and (min-width: 769px) {
    .ai-mgr-btn { font-size: 11px !important; padding: 7px !important; }
}
/* Order panel labels */
.order-account .acc-label, .order-account .acc-value { white-space: nowrap; }
/* Position table headers */
.trade-bottom th { white-space: nowrap; }

/* ═══ TRADE HEADER — progressive hide instead of cutting text ═══ */
/* Order of hide (narrowest to widest hides last):
   1. Tutorial button (entire)
   2. 24H Volume (stat 3)
   3. Funding rate (stat 4)
   4. 24H Low (stat 2)
   Always keep: 24H High (stat 1) + price + symbol selector
   (chart expand button now lives in #posLevelBar, not this bar)
*/
@media (max-width: 1500px) and (min-width: 769px) {
    /* Hide tutorial button entirely (functionality stays via header menu if any) */
    #tutorialBtn { display: none !important; }
}
@media (max-width: 1340px) and (min-width: 769px) {
    /* Hide 24H Volume (3rd stat) */
    .symbol-stats .stat-item:nth-child(3) { display: none !important; }
}
@media (max-width: 1240px) and (min-width: 769px) {
    /* Hide funding rate (4th stat) */
    .symbol-stats .stat-item:nth-child(4) { display: none !important; }
}
@media (max-width: 1140px) and (min-width: 769px) {
    /* Hide 24H Low (2nd stat), keep only 24H High */
    .symbol-stats .stat-item:nth-child(2) { display: none !important; }
}
@media (max-width: 1040px) and (min-width: 769px) {
    /* Hide all stats — only price + symbol selector remain */
    .symbol-stats .stat-item { display: none !important; }
}

/* ═══ TRADE PC ONLY: TP/SL 표시 + AI Manager 가운데 정렬 ═══ */
@media (min-width: 769px) {
    /* TP/SL 다시 표시 (이전에 숨겨놨던 거 해제) */
    .tpsl-order-wrap { display: block !important; margin-top: 8px; }
    /* Reduce-Only 컴팩트 */
    .reduce-only-wrap { margin-top: 4px !important; padding: 4px 0 !important; }
    .reduce-only-wrap .reduce-only-label small { display: none !important; }
    /* AI Manager — 위쪽 여백 추가해서 가운데 정렬 느낌 */
    .ai-manager-section { margin-top: 18px !important; padding-top: 10px !important; }
    .ai-mgr-header { padding: 6px 0 !important; font-size: 12px !important; }
    .ai-mgr-btn { padding: 11px !important; margin-top: 12px !important; }
}

/* ═══ TRADE PC: tighter spacing + full-width separators (lang sites focus) ═══ */
@media (min-width: 769px) {
    /* 1) 총자산 카드 — 아래 여백 줄임 */
    .order-account { padding-bottom: 6px !important; }
    .oa-row.total { margin-top: 0 !important; padding-top: 2px !important; }
    .oa-row.refill-row { margin: 4px 0 !important; }

    /* 2) 주문폼 위쪽 여백 축소 */
    .order-form { padding-top: 8px !important; }

    /* 3) Reduce-Only 위로 끌어올림 + AI Manager 가까이 */
    .reduce-only-wrap { margin-top: 2px !important; padding: 2px 0 !important; }
    .reduce-only-label { font-size: 11px !important; }
    .order-btns { margin-top: 6px !important; }
    .ai-manager-section { margin-top: 6px !important; padding-top: 4px !important; }
    .ai-mgr-header { padding: 4px 0 !important; }
    .ai-mgr-body { padding: 0 0 4px !important; }
    /* AI 분석 요청 버튼 잘림 방지 — 좌우 패딩만 살짝 줄여서 글자 다 보이도록 */
    .ai-mgr-btn {
        padding: 9px 6px !important;
        font-size: 11.5px !important;
        letter-spacing: -0.2px !important;
    }
}

/* ─── 모의투자(trade.php) AI Manager 분석 결과 — 칸 고정 + 내부 스크롤 ─── */
/* PC: AI Manager 내부 스크롤 제거 — trade-order-col 외부 스크롤 하나로 통합 (총 스크롤바 2개 유지) */
@media (min-width: 769px) {
    .ai-mgr-result {
        max-height: none;
        overflow: visible;
        border-radius: 6px;
    }
    /* order column 의 자체 스크롤은 유지 (전체 우측 패널 담당) */
    .trade-order-col { overflow-y: auto !important; }
    .ai-mgr-result.ai-result-fullwidth { max-height: none; }
}
[data-theme="light"] .ai-mgr-result::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }

/* ─── 이용 가이드 사이드 패널 (모든 메인 공통) ─── */
.idx-guide-panel .idx-notice-list { padding: 4px 0; }
.idx-guide-panel .idx-notice-list li {
    padding: 4px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}
.idx-guide-panel .idx-notice-list li:last-child { border-bottom: none !important; }
.idx-guide-panel .idx-notice-list li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 5px 2px;
    transition: color .15s, transform .15s;
}
.idx-guide-panel .idx-notice-list li a:hover {
    color: var(--text-primary);
    transform: translateX(2px);
}
.idx-guide-panel .idx-notice-list li a i {
    flex-shrink: 0;
    width: 18px !important;
    text-align: center;
    font-size: 11px;
}
[data-theme="light"] .idx-guide-panel .idx-notice-list li { border-bottom-color: rgba(0,0,0,0.04) !important; }

/* ─── 크리에이터 인증 체크 마크 (전 사이트 공통) ─── */
.cr-verified-check {
    display: inline-block;
    margin-left: 4px;
    color: #5b9aff;
    font-size: 0.85em;
    vertical-align: -1px;
    filter: drop-shadow(0 0 2px rgba(91,154,255,0.3));
}
.cr-verified-check::before { content: ""; }
[data-theme="light"] .cr-verified-check { color: #2563eb; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — COMPREHENSIVE SAFETY NET (added 2026-04-30)
   Catches common contrast/legibility issues across the site.
   ═══════════════════════════════════════════════════════════════ */

/* 1) Improve readability of muted/secondary text in light mode */
[data-theme="light"] {
    --text-secondary: #2d3748;
    --text-muted: #4a5568;
}

/* 2) White rgba backgrounds (used for "glass" cards) → invert to dark rgba */
[data-theme="light"] .pc-ls-more,
[data-theme="light"] .pc-liq-more {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .pc-ls-more:hover,
[data-theme="light"] .pc-liq-more:hover {
    background: rgba(0,0,0,0.08) !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.14) !important;
}
[data-theme="light"] .pc-ls-mini .bar { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .idx-yt-shorts-phone { border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .idx-yt-shorts-phone .shorts-placeholder { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .idx-yt-creator-row img { border-color: rgba(0,0,0,0.08) !important; }

/* 3) Header bolt icon — was hardcoded white, swap to accent gold */
[data-theme="light"] .idx-ev-header > i.fa-bolt {
    color: var(--accent) !important;
    filter: drop-shadow(0 0 4px rgba(160,170,185,0.4)) !important;
}

/* 4) Hot label / fire animation — strengthen for white bg */
[data-theme="light"] .idx-yt-hot-fixed .idx-yt-hot-label { text-shadow: 0 0 6px rgba(255,50,0,0.35) !important; }
[data-theme="light"] .idx-yt-hot-fixed .idx-yt-thumb { border-color: rgba(255,50,0,0.5) !important; }

/* 5) Carousel fade gradients — match light bg */
[data-theme="light"] .idx-yt-carousel-wrap::before { background: linear-gradient(to right, #ffffff, transparent) !important; }
[data-theme="light"] .idx-yt-carousel-wrap::after  { background: linear-gradient(to right, transparent, #ffffff) !important; }

/* 6) Generic .idx-* / .pc-* glass cards: replace rgba(255,255,255,X) backgrounds */
[data-theme="light"] .idx-events-panel,
[data-theme="light"] .idx-card,
[data-theme="light"] .idx-panel,
[data-theme="light"] .pc-card,
[data-theme="light"] .pc-mini-card {
    background: #ffffff !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}
[data-theme="light"] .idx-card *,
[data-theme="light"] .idx-panel *,
[data-theme="light"] .pc-card *,
[data-theme="light"] .pc-mini-card * { color: inherit; }

/* 7) Welcome coupon popup — was dark gradient with light text */
[data-theme="light"] #welcomeCouponPopup > div {
    background: linear-gradient(160deg, #fffaf0, #fff5e6) !important;
    border-color: rgba(160,170,185,0.4) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
[data-theme="light"] #welcomeCouponPopup div[style*="color:#9ca3af"],
[data-theme="light"] #welcomeCouponPopup button { color: #4a5568 !important; }
[data-theme="light"] #welcomeCouponPopup button {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* 8) Inline-styled DARK text (#fff / #e2e8f0 / #cbd5e1 / #9ca3af) on what's now a light bg */
[data-theme="light"] [style*="color:#fff"]:not(.idx-yt-play):not(.idx-yt-nav):not(.coin-dot):not(.ls-bar-l):not(.ls-bar-s):not(.idx-mkt-tab):not(.idx-exmkt-tab):not(.idx-yt-premium-badge):not(a):not(button) {
    color: var(--text-primary) !important;
}
[data-theme="light"] [style*="color: #fff"]:not(a):not(button):not(.idx-yt-play):not(.coin-dot) {
    color: var(--text-primary) !important;
}
[data-theme="light"] [style*="color:#9ca3af"] { color: #4a5568 !important; }
[data-theme="light"] [style*="color: #9ca3af"] { color: #4a5568 !important; }
[data-theme="light"] [style*="color:#e2e8f0"] { color: #2d3748 !important; }
[data-theme="light"] [style*="color:#cbd5e1"] { color: #4a5568 !important; }

/* 9) Inline rgba(255,255,255,X) backgrounds on cards/sections → dark rgba */
[data-theme="light"] [style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.04)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.08)"] {
    background: rgba(0,0,0,0.04) !important;
}

/* 10) Inline rgba(255,255,255,0.1+) borders → dark borders */
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.1)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.08)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.12)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.15)"] {
    border-color: rgba(0,0,0,0.1) !important;
}

/* 11) Common dark-only background fills inline */
[data-theme="light"] [style*="background:#0f1320"],
[data-theme="light"] [style*="background:#150f28"],
[data-theme="light"] [style*="background:#16191f"],
[data-theme="light"] [style*="background:#0a0e1a"],
[data-theme="light"] [style*="background:#1a1f2e"] {
    background: #ffffff !important;
    color: var(--text-primary) !important;
}

/* 12) Order floater (cross-site widget) */
[data-theme="light"] #orderFloater {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] #orderFloater * { color: inherit; }
[data-theme="light"] #orderFloater .of-row { border-color: var(--border) !important; }

/* 13) Modals (rewards/exchange) — body BG already dark, ensure text readable */
[data-theme="light"] .rw-modal { color: #f1f5f9 !important; }
[data-theme="light"] .rw-modal * { color: inherit; }
[data-theme="light"] .rw-modal label,
[data-theme="light"] .rw-modal .rw-modal-title { color: #ffffff !important; }
[data-theme="light"] .rw-modal input,
[data-theme="light"] .rw-modal select,
[data-theme="light"] .rw-modal textarea {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* 14) Footer remains dark in light mode (intentional) — ensure children readable */
[data-theme="light"] .main-footer * { color: inherit; }

/* 15) Hero section text (was bright on dark gradient — ensure on lighter gradient) */
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-subtitle { color: var(--text-primary) !important; }
[data-theme="light"] .hero-section .hero-stat-label { color: var(--text-muted) !important; }
[data-theme="light"] .hero-section .hero-stat-value { color: var(--text-primary) !important; }

/* 16) Buttons that rely on white text on dark bg should keep their gradient */
[data-theme="light"] a.btn-primary,
[data-theme="light"] button.btn-primary,
[data-theme="light"] .btn-cta { color: #ffffff !important; }

/* 17) AMA brand stars card — keep dark backdrop (intentional space scene) */
[data-theme="light"] .idx-iex-brand,
[data-theme="light"] .idx-iex-brand * { color: #ffffff !important; }

/* 18) Trade page side panel toolbar */
[data-theme="light"] .lw-draw-btn { color: var(--text-muted) !important; }
[data-theme="light"] .lw-interval-btn { color: var(--text-muted) !important; }

/* 19) Community/post cards inline styles  */
[data-theme="light"] .post-card,
[data-theme="light"] .comment-item,
[data-theme="light"] .reply-item {
    background: #ffffff !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .post-card .post-title,
[data-theme="light"] .post-card .post-content { color: var(--text-primary) !important; }
[data-theme="light"] .post-meta,
[data-theme="light"] .comment-meta { color: var(--text-muted) !important; }

/* 20) Mypage / profile cards */
[data-theme="light"] .mp-card,
[data-theme="light"] .mp-section {
    background: #ffffff !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .mp-card *:not(button):not(a) { color: inherit; }

/* 21) Generic h1/h2/h3 default to primary text in light mode */
[data-theme="light"] h1, [data-theme="light"] h2,
[data-theme="light"] h3, [data-theme="light"] h4 { color: var(--text-primary); }

/* 22) Force any leftover white text on hero/card text where bg is light-card-shaped */
[data-theme="light"] .card-text,
[data-theme="light"] .text-light,
[data-theme="light"] .text-white { color: var(--text-primary) !important; }

/* 23) Plans / rewards section card hover */
[data-theme="light"] .rw-card,
[data-theme="light"] .plan-card {
    background: #ffffff !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .rw-card *:not(button):not(a):not(.rw-badge),
[data-theme="light"] .plan-card *:not(button):not(a):not(.plan-badge) { color: inherit; }

/* 24) AIM / analysis page panels */
[data-theme="light"] .an-panel,
[data-theme="light"] .an-card,
[data-theme="light"] .an-section {
    background: #ffffff !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* 25) Insight panel (idx-insight-*) */
[data-theme="light"] .idx-insight-card,
[data-theme="light"] .idx-insight-header h3 { color: var(--text-primary) !important; }
[data-theme="light"] .pc-battle-body .side .lbl,
[data-theme="light"] .pc-battle-body .vs { color: var(--text-muted) !important; }

/* ─── 26) GLOBAL POPUP / MODAL SAFETY NET ─── */
/* Catch any modal/popup/dialog that uses dark-fixed bg */
[data-theme="light"] .modal-content,
[data-theme="light"] .popup-content,
[data-theme="light"] .dialog-content,
[data-theme="light"] .alert-content,
[data-theme="light"] .toast,
[data-theme="light"] .tooltip,
[data-theme="light"] .dropdown-content,
[data-theme="light"] .menu-popup,
[data-theme="light"] .ctx-menu,
[data-theme="light"] .picker-popup {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .modal-content *:not(button):not(a),
[data-theme="light"] .popup-content *:not(button):not(a),
[data-theme="light"] .dialog-content *:not(button):not(a),
[data-theme="light"] .alert-content *:not(button):not(a),
[data-theme="light"] .toast *:not(button):not(a) { color: inherit; }

/* Modal overlays — keep dark transparent */
[data-theme="light"] .modal-overlay,
[data-theme="light"] .popup-overlay,
[data-theme="light"] .dialog-overlay { background: rgba(0,0,0,0.5) !important; }

/* ─── 27) AIM ARROW / CONNECTOR (cross-page safety) ─── */
[data-theme="light"] .ax-lvl-icon {
    background: linear-gradient(135deg, #ffffff, #f5f7fa) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
[data-theme="light"] .ax-lvl-connector .arrow {
    border-left-color: #cbd5e1 !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.06)) !important;
}
[data-theme="light"] .ax-lvl-connector.active .arrow {
    border-left-color: currentColor !important;
}
[data-theme="light"] .ax-upload {
    background: radial-gradient(ellipse at top, rgba(160,170,185,0.06), transparent 60%),
                linear-gradient(145deg, #fafbfc, #f0f3f7) !important;
    border-color: rgba(160,170,185,0.45) !important;
}
[data-theme="light"] .ax-upload::after {
    background: linear-gradient(145deg, #ffffff, #f5f7fa) !important;
}
[data-theme="light"] .ax-upload .u-icon p { color: #1a202c !important; }
[data-theme="light"] .ax-upload .u-icon small { color: #4a5568 !important; }

/* ─── 28) TRADE PAGE POPUPS (lev/tpsl/margin/upgrade) ─── */
[data-theme="light"] .lev-popup,
[data-theme="light"] .tpsl-popup,
[data-theme="light"] .margin-mode-popup,
[data-theme="light"] .upgrade-box,
[data-theme="light"] .symbol-dropdown {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .lev-popup *:not(button):not(a),
[data-theme="light"] .tpsl-popup *:not(button):not(a),
[data-theme="light"] .margin-mode-popup *:not(button):not(a),
[data-theme="light"] .upgrade-box *:not(button):not(a),
[data-theme="light"] .symbol-dropdown *:not(button):not(a) { color: inherit; }

/* Silver popups in light theme: undo dark-only gradient text + silver fills */
[data-theme="light"] .tpsl-popup::before { display: none; }
[data-theme="light"] .tpsl-popup-header span {
    background: none !important;
    -webkit-text-fill-color: #1a1f2e !important;
    color: #1a1f2e !important;
}
[data-theme="light"] .tpsl-popup-header { border-bottom-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .tpsl-popup-close { border-color: rgba(0,0,0,0.10) !important; color: #4a5568 !important; }
[data-theme="light"] .tpsl-popup-close:hover { background: rgba(0,0,0,0.06) !important; color: #1a1f2e !important; }
[data-theme="light"] .tpsl-popup-info {
    background: linear-gradient(135deg, rgba(60,70,85,0.06), rgba(60,70,85,0.02)) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: #4a5568 !important;
    box-shadow: none !important;
}
[data-theme="light"] .tpsl-field-group .of-input { border-color: rgba(0,0,0,0.12); color: #1a1f2e; background: #ffffff; }
[data-theme="light"] .tpsl-field-group .of-input:focus { border-color: rgba(60,70,85,0.55); box-shadow: 0 0 0 3px rgba(60,70,85,0.10); background: #ffffff; }
[data-theme="light"] .tpsl-field-group .of-input::placeholder { color: #94a3b8; }
[data-theme="light"] .tpsl-popup-btns .btn-tpsl-confirm,
[data-theme="light"] .tpsl-apply-btn {
    background: linear-gradient(135deg, #4a5568, #2d3748) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(45,55,72,0.25) !important;
}
[data-theme="light"] .tpsl-popup-btns .btn-tpsl-cancel { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.10) !important; color: #4a5568 !important; }
[data-theme="light"] .tpsl-popup-btns .btn-tpsl-cancel:hover { background: rgba(0,0,0,0.08) !important; color: #1a1f2e !important; }

/* ─── 29) NAVIGATION DROPDOWNS & NOTIFICATIONS ─── */
[data-theme="light"] .noti-dropdown,
[data-theme="light"] .user-dropdown,
[data-theme="light"] .lang-dropdown,
[data-theme="light"] .menu-dropdown {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .noti-dropdown *:not(button):not(a),
[data-theme="light"] .user-dropdown *:not(button):not(a) { color: inherit; }
[data-theme="light"] .noti-item:hover,
[data-theme="light"] .menu-dropdown a:hover { background: rgba(0,0,0,0.04) !important; }

/* ─── 30) GLOBAL TEXT-CONTRAST GUARANTEE ─── */
/* Any element relying on default white text where parent BG is now light */
[data-theme="light"] section,
[data-theme="light"] article,
[data-theme="light"] aside,
[data-theme="light"] main {
    color: var(--text-primary);
}
/* Headings/paragraphs default to primary unless explicitly styled otherwise */
[data-theme="light"] p { color: var(--text-secondary); }
[data-theme="light"] small { color: var(--text-muted); }
[data-theme="light"] label { color: var(--text-secondary); }

/* ─── 31) NEWS / COMMUNITY / GUIDE PAGES ─── */
[data-theme="light"] .nr-card-title,
[data-theme="light"] .nr-article-title,
[data-theme="light"] .nr-article-summary { color: var(--text-primary) !important; }
[data-theme="light"] .nr-meta,
[data-theme="light"] .nr-source,
[data-theme="light"] .nr-time { color: var(--text-muted) !important; }
[data-theme="light"] .gd-card,
[data-theme="light"] .gd-article {
    background: #ffffff !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* ─── 32) MOBILE ORDER / m_trade.php injected styles ─── */
[data-theme="light"] .mob-trade-wrap,
[data-theme="light"] .mob-order-bar {
    background: #ffffff !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL LIGHT MODE OVERRIDES (comprehensive)
   - 인라인 스타일로 흰색/반투명을 깔아놓은 곳들이 화이트 모드에서 안 보이는 문제 패치
   - 다크 모드 기본값은 절대 건드리지 않음
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 본문 배경/텍스트 안전 가드 ── */
[data-theme="light"] body,
[data-theme="light"] .main-content,
[data-theme="light"] main {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ── 2. 흰색 반투명 배경을 깔아놓은 카드/패널 → 부드러운 회색 패널로 ── */
[data-theme="light"] [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="background:rgba(255, 255, 255, 0.03)"],
[data-theme="light"] [style*="background:rgba(255, 255, 255, 0.04)"],
[data-theme="light"] [style*="background:rgba(255, 255, 255, 0.05)"] {
    background: #f6f8fc !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] [style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.08)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.10)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.12)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.08)"] {
    background: #eef2f7 !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* ── 3. 어두운 카드 색을 인라인으로 박아 놓은 곳들 ── */
[data-theme="light"] [style*="background:#1a2332"],
[data-theme="light"] [style*="background:#0f1520"],
[data-theme="light"] [style*="background:#06090f"],
[data-theme="light"] [style*="background: #1a2332"],
[data-theme="light"] [style*="background: #0f1520"],
[data-theme="light"] [style*="background: #06090f"] {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ── 4. 어두운 반투명 백드롭 안에 있는 글래스 카드 — 모달 등 ── */
[data-theme="light"] [style*="background:rgba(20,27,45"],
[data-theme="light"] [style*="background:rgba(15,19,32"],
[data-theme="light"] [style*="background: rgba(20,27,45"],
[data-theme="light"] [style*="background: rgba(15,19,32"] {
    background: rgba(255,255,255,0.98) !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.12) !important;
}

/* ── 5. 흰색 텍스트(#fff) 강제 사용 곳 — 다크 그라데이션 버튼은 그대로 흰색이 OK,
       단순한 div/span에 흰색 텍스트만 박힌 경우는 보이지 않으므로 패치 ── */
[data-theme="light"] [style*="color:#fff"][style*="background:rgba(255,255,255"],
[data-theme="light"] [style*="color:#ffffff"][style*="background:rgba(255,255,255"],
[data-theme="light"] [style*="color: #fff"][style*="background: rgba(255,255,255"] {
    color: var(--text-primary) !important;
}

/* ── 6. 보더 — 흰색 반투명을 깔아놓은 곳 ── */
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.08)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.10)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.12)"],
[data-theme="light"] [style*="border:1px solid rgba(255, 255, 255, 0.08)"] {
    border-color: rgba(0,0,0,0.12) !important;
}

/* ── 7. 어두운 배경에 의존한 input/textarea 인라인 ── */
[data-theme="light"] input[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] input[style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] textarea[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] textarea[style*="background:rgba(255,255,255,0.05)"] {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* ── 8. 글로벌 모달/팝업 백드롭은 그대로 (반투명 검정 OK) — 내부 카드만 화이트화 ── */
[data-theme="light"] .modal-content,
[data-theme="light"] .jmodal,
[data-theme="light"] .cb-modal,
[data-theme="light"] .ai-summary-modal,
[data-theme="light"] .upgrade-modal .upgrade-box {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.14) !important;
}
[data-theme="light"] .modal-content *:not(button):not(a):not(.btn):not(.tag):not([class*="grad"]):not(svg):not(path),
[data-theme="light"] .jmodal *:not(button):not(a):not(.btn):not(.tag):not([class*="grad"]):not(svg):not(path) {
    color: inherit;
}
[data-theme="light"] .modal-content h1,
[data-theme="light"] .modal-content h2,
[data-theme="light"] .modal-content h3,
[data-theme="light"] .modal-content h4,
[data-theme="light"] .jmodal h1,
[data-theme="light"] .jmodal h2,
[data-theme="light"] .jmodal h3,
[data-theme="light"] .jmodal h4 {
    color: var(--text-primary) !important;
}

/* ── 9. 토스트/노티 — 다크 인라인 인 경우 화이트화 ── */
[data-theme="light"] .toast,
[data-theme="light"] .toast-stack > *,
[data-theme="light"] .notification-popup,
[data-theme="light"] .noti-dropdown,
[data-theme="light"] .ai-int-card {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

/* ── 10. 드롭다운/메뉴 (인라인으로 박힌 다크 컨테이너) ── */
[data-theme="light"] .dropdown-menu,
[data-theme="light"] [class*="-dropdown"]:not(.user-dropdown-toggle),
[data-theme="light"] [class*="-menu"][style*="background:rgba"],
[data-theme="light"] .lang-switch-menu {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .lang-switch-menu a {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .lang-switch-menu a.active {
    color: var(--text-primary) !important;
    background: rgba(180,190,205,0.10) !important;
}

/* ── 11. 푸터 국가 선택 버튼 (rgba 흰색 배경 인라인) ── */
[data-theme="light"] .footer-lang-btn {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .footer-lang-btn.active {
    background: rgba(180,190,205,0.12) !important;
    border-color: rgba(180,190,205,0.35) !important;
    color: #b06d10 !important;
}

/* ── 12. 카카오톡 플로팅 — 그림자 강화 (배경이 화이트일 때 묻힘 방지) ── */
[data-theme="light"] #floatKakaoBtn {
    box-shadow: 0 8px 22px rgba(0,0,0,0.18) !important;
}

/* ── 13. 마이페이지 아바타 모달 (인라인 다크 카드) ── */
[data-theme="light"] #avatarModal > div,
[data-theme="light"] #uploadChoiceModal > div,
[data-theme="light"] #avatarSourceChoice > div,
[data-theme="light"] #pullChoiceModal > div {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}
[data-theme="light"] #avatarModal h3,
[data-theme="light"] #uploadChoiceModal h3,
[data-theme="light"] #avatarSourceChoice h3,
[data-theme="light"] #pullChoiceModal h3 {
    color: var(--text-primary) !important;
}
[data-theme="light"] #avatarModal p,
[data-theme="light"] #uploadChoiceModal p,
[data-theme="light"] #avatarSourceChoice p,
[data-theme="light"] #pullChoiceModal p {
    color: var(--text-muted) !important;
}
[data-theme="light"] #avatarModal button,
[data-theme="light"] #uploadChoiceModal button,
[data-theme="light"] #pullChoiceModal button {
    color: var(--text-primary);
}
[data-theme="light"] #avatarModal [data-avatar-slot],
[data-theme="light"] #avatarModal [data-bg] {
    background: #f6f8fc !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ── 14. 리워드/뽑기 머신 패널 인라인 다크 ── */
[data-theme="light"] .cs-pull-overlay > div,
[data-theme="light"] .cs-pull-capsule,
[data-theme="light"] .cs-result-item {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* ── 15. 트레이딩 일지/AI 모달 인라인 ── */
[data-theme="light"] .ai-interstitial-overlay > div,
[data-theme="light"] .ai-int-overlay > div {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* ── 16. 광고 슬롯 — 화이트에서 잘 보이도록 ── */
[data-theme="light"] .site-ad-slot {
    background: #f5f7fb !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: rgba(0,0,0,0.45) !important;
}
[data-theme="light"] .site-ad-body {
    color: rgba(0,0,0,0.50) !important;
}

/* ── 17. 회색 글자(인라인 #8892a4 등)는 화이트에서 너무 옅음 ── */
[data-theme="light"] [style*="color:#8892a4"],
[data-theme="light"] [style*="color: #8892a4"],
[data-theme="light"] [style*="color:#a0a8b8"],
[data-theme="light"] [style*="color: #a0a8b8"] {
    color: #4a5568 !important;
}

/* ── 18. 헤더/네비 인라인 어두운 배경 ── */
[data-theme="light"] [style*="background:rgba(10,14,22"],
[data-theme="light"] [style*="background: rgba(10,14,22"],
[data-theme="light"] [style*="background:rgba(12,16,28"],
[data-theme="light"] [style*="background: rgba(12,16,28"] {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ── 19. 호버 시 흰색 반투명 강조 → 약한 회색으로 ── */
[data-theme="light"] *:hover[style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] *:hover[style*="background:rgba(255,255,255,0.08)"] {
    background: rgba(0,0,0,0.04) !important;
}

/* ── 20. 메인 hero 글로브 캔버스 — JS가 테마 감지해 어두운 색으로 그리므로 거의 풀 opacity ── */
[data-theme="light"] .hero-bg-chart {
    opacity: 0.9 !important;
}

/* ── 21. 거래소 카드 (메인의 idx-iex-card) ── */
[data-theme="light"] .idx-iex-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
[data-theme="light"] .idx-iex-card:hover {
    background: #f8fafc !important;
    border-color: rgba(180,190,205,0.30) !important;
}

/* ── 22. 모바일 거래소 카드 (m-ex-card) ── */
[data-theme="light"] .m-ex-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: var(--text-primary) !important;
}

/* ── 23. 코드/모노 박스 ── */
[data-theme="light"] code,
[data-theme="light"] pre {
    background: #f1f4f9 !important;
    color: #1a202c !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ── 24. select/option 화이트 모드 ── */
[data-theme="light"] select {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* ── 25. 미세한 인라인 그림자 (검정 박스 그림자가 화이트에서 너무 진함) ── */
[data-theme="light"] [style*="box-shadow:0 20px 60px rgba(0,0,0,0.5)"],
[data-theme="light"] [style*="box-shadow: 0 20px 60px rgba(0,0,0,0.5)"] {
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
[data-theme="light"] [style*="box-shadow:0 12px 40px rgba(0,0,0,0.4)"],
[data-theme="light"] [style*="box-shadow: 0 12px 40px rgba(0,0,0,0.4)"] {
    box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important;
}

/* ── 26. 텍스트 디바이더 (rgba 흰색 보더) ── */
[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border-top: 1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255"] {
    border-top-color: rgba(0,0,0,0.08) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
}

/* ── 27. 커뮤니티 인기글/티커 (인라인 다크 그라데이션) ── */
[data-theme="light"] .c-hot-item,
[data-theme="light"] .c-ticker-slide,
[data-theme="light"] .c-hl-container {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .c-hot-item:hover {
    background: #f8fafc !important;
    border-color: rgba(180,190,205,0.30) !important;
}

/* ── 28. 랭킹 — podium/hero ── */
[data-theme="light"] .ranking-hero-content {
    color: var(--text-primary);
}
[data-theme="light"] .rank-row,
[data-theme="light"] .ranking-table tbody tr {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .ranking-table tbody tr:hover {
    background: #f6f8fc !important;
}
[data-theme="light"] .ranking-table th {
    background: #f1f4f9 !important;
    color: var(--text-secondary) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* ── 29. 트레이드 상단 심볼 바 + 가격 디스플레이 ── */
[data-theme="light"] .symbol-price-display,
[data-theme="light"] .symbol-meta,
[data-theme="light"] .symbol-selector-modal {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ── 30. 분석 페이지 (AIM) — 결과 카드 ── */
[data-theme="light"] .ax-result-card,
[data-theme="light"] .ax-result-section,
[data-theme="light"] .ax-book-purchase-link {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ── 31. 가이드 페이지 (이용 가이드) ── */
[data-theme="light"] .gd-section,
[data-theme="light"] .gd-card,
[data-theme="light"] .nt-item {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .gd-card:hover,
[data-theme="light"] .nt-item:hover {
    background: #f6f8fc !important;
    border-color: rgba(0,0,0,0.12) !important;
}

/* ── 32. 헤더 호버 메뉴/네비 링크 — 화이트에선 더 진한 배경 ── */
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-menu a:hover {
    background: rgba(0,0,0,0.05) !important;
    color: var(--text-primary) !important;
}

/* ── 33. 알림 드롭다운 아이템 ── */
[data-theme="light"] .noti-item,
[data-theme="light"] #notiList > * {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .noti-item:hover {
    background: #f6f8fc !important;
}
[data-theme="light"] .noti-pref-cat-header,
[data-theme="light"] .noti-pref-sub {
    color: var(--text-primary);
}

/* ── 34. 토글 스위치 (알림 설정) ── */
[data-theme="light"] .noti-toggle-slider {
    background: rgba(0,0,0,0.18) !important;
}

/* ── 35. 모달 닫기 버튼(× 인라인) ── */
[data-theme="light"] button[style*="color:var(--text-muted)"][style*="font-size:18px"] {
    color: #4a5568 !important;
}

/* ── 36. 화이트 모드용 hero h1 그라데이션 텍스트 백업 ── */
[data-theme="light"] .hero-section h1[style*="-webkit-text-fill-color:transparent"],
[data-theme="light"] .hero-section h1 {
    color: var(--text-primary);
}

/* ── 37. 카드 안 작은 메타 텍스트 (color:var(--text-muted)) ── */
[data-theme="light"] .footer-business-info,
[data-theme="light"] .footer-business-info span {
    color: #4a5568 !important;
}
[data-theme="light"] .footer-business-info .sep {
    color: rgba(0,0,0,0.20) !important;
}

/* ── 38. 시장 패널/뉴스 패널 ── */
[data-theme="light"] .idx-market-panel,
[data-theme="light"] .idx-events-panel,
[data-theme="light"] .idx-brk-item,
[data-theme="light"] .idx-ev-item {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .idx-brk-item:hover,
[data-theme="light"] .idx-ev-item:hover {
    background: #f6f8fc !important;
}
[data-theme="light"] .idx-time-tag {
    color: #b06d10 !important;
}

/* ── 39. 미디어 카드(유튜브/책 등) ── */
[data-theme="light"] .yt-card,
[data-theme="light"] .yt-thumb-wrap,
[data-theme="light"] [class*="-card"][style*="background:rgba(255,255,255"] {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: var(--text-primary) !important;
}

/* ── 40. 라스트: 어떤 div든 흰색 텍스트(#fff)+다크 배경 없음이면 강제 검정 ── */
[data-theme="light"] div[style*="color:#fff"]:not([style*="background:linear-gradient"]):not([style*="background: linear-gradient"]):not([style*="background:#"]) {
    color: var(--text-primary) !important;
}
[data-theme="light"] span[style*="color:#fff"]:not([style*="background:linear-gradient"]):not([style*="background: linear-gradient"]):not([style*="background:#"]) {
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ULTRA AGGRESSIVE LIGHT MODE PATCH (catch-all)
   - 아직 안 보이는 곳들을 한 번에 잡는 광역 규칙
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 모든 카드/섹션이 어두운 색을 인라인으로 가지면 일괄 화이트로 */
[data-theme="light"] [style*="background:#1a"]:not([style*="background:#1a2332"]):not([style*="background:#1a0f00"]),
[data-theme="light"] [style*="background:#0a"],
[data-theme="light"] [style*="background:#0f"],
[data-theme="light"] [style*="background:#13"],
[data-theme="light"] [style*="background:#15"],
[data-theme="light"] [style*="background:#0d"],
[data-theme="light"] [style*="background: #0a"],
[data-theme="light"] [style*="background: #0f"],
[data-theme="light"] [style*="background: #13"],
[data-theme="light"] [style*="background: #15"] {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* 2) 옅은 흰색 배경(0.01~0.04)은 거의 투명 — 화이트모드에선 살짝 그레이 */
[data-theme="light"] [style*="background:rgba(255,255,255,0.01)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.02)"],
[data-theme="light"] [style*="background:rgba(255, 255, 255, 0.01)"],
[data-theme="light"] [style*="background:rgba(255, 255, 255, 0.02)"] {
    background: #fafbfd !important;
    border-color: rgba(0,0,0,0.06) !important;
}

/* 3) 어두운 반투명 검정 인라인 → 빛 회색으로 */
[data-theme="light"] [style*="background:rgba(0,0,0,0.6"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.7"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.5"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.6"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.7"] {
    background: rgba(255,255,255,0.95) !important;
    color: var(--text-primary) !important;
}

/* 4) 텍스트 인라인 #e2e8f0, #cbd5e1 (밝은 회색) → 화이트모드에선 안 보임 */
[data-theme="light"] [style*="color:#e2e8f0"],
[data-theme="light"] [style*="color: #e2e8f0"],
[data-theme="light"] [style*="color:#cbd5e1"],
[data-theme="light"] [style*="color: #cbd5e1"],
[data-theme="light"] [style*="color:#94a3b8"],
[data-theme="light"] [style*="color: #94a3b8"],
[data-theme="light"] [style*="color:#a8b5c4"] {
    color: #475569 !important;
}

/* 5) 인라인 var(--text-primary)로 안 잡힌 div들 — h1~h6는 무조건 어둡게 */
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 {
    color: var(--text-primary);
}

/* 6) 백드롭 필터로 글래스 만든 곳들 — 어두운 배경 가정이면 화이트로 */
[data-theme="light"] [style*="backdrop-filter:blur"][style*="background:rgba(20"],
[data-theme="light"] [style*="backdrop-filter:blur"][style*="background:rgba(15"],
[data-theme="light"] [style*="backdrop-filter:blur"][style*="background:rgba(10"],
[data-theme="light"] [style*="backdrop-filter: blur"][style*="background: rgba(20"] {
    background: rgba(255,255,255,0.95) !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* 7) 광고 자리 배치 — opacity 너무 낮으면 안 보임 */
[data-theme="light"] .site-ad-slot,
[data-theme="light"] [data-ad-label] {
    background: #f3f5fa !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: rgba(0,0,0,0.45) !important;
}

/* 8) 입력창 일괄 화이트 */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input:not([type]),
[data-theme="light"] textarea {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: rgba(0,0,0,0.40) !important;
}

/* 9) 동적으로 생성된 모달 백드롭 안의 카드 (DocumentElement.createElement) */
[data-theme="light"] [id$="Modal"] > div,
[data-theme="light"] [id$="modal"] > div,
[data-theme="light"] [id$="Dialog"] > div,
[data-theme="light"] [id$="dialog"] > div,
[data-theme="light"] [id$="Choice"] > div,
[data-theme="light"] [id^="ai"] > div[style*="background"],
[data-theme="light"] [id="gtDialog"] > div {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.16) !important;
}

/* 10) 동적 모달 내부의 카드/버튼들 (모두 어두운 인라인 가정 → 회색 패널로) */
[data-theme="light"] [id$="Modal"] button[style*="background:rgba(255,255,255"],
[data-theme="light"] [id$="modal"] button[style*="background:rgba(255,255,255"],
[data-theme="light"] [id$="Dialog"] button[style*="background:rgba(255,255,255"],
[data-theme="light"] [id$="dialog"] button[style*="background:rgba(255,255,255"],
[data-theme="light"] [id$="Choice"] button[style*="background:rgba(255,255,255"] {
    background: #f6f8fc !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* 11) 토스트 — toast-container 안 div들 */
[data-theme="light"] .toast-container > div,
[data-theme="light"] #toast-container > div {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
}

/* 12) AI 인터스티셜 카드 (영상 광고 모달) */
[data-theme="light"] .ai-int-card,
[data-theme="light"] .ai-int-overlay,
[data-theme="light"] [class*="interstitial"] > div {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* 13) 헤더 메뉴 어두운 배경 (네비) */
[data-theme="light"] .nav-bar,
[data-theme="light"] .navbar,
[data-theme="light"] .top-nav,
[data-theme="light"] .nav-container {
    background: rgba(255,255,255,0.95) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 14) 메인 hero 그라데이션 텍스트 — 화이트모드에선 진한 오렌지 */
[data-theme="light"] .text-gradient,
[data-theme="light"] .hero-title .text-gradient {
    background: linear-gradient(135deg,#64748b,#334155) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 15) 메인 hero 본문 흰색 텍스트 */
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-subtitle,
[data-theme="light"] .hero-content,
[data-theme="light"] .hero-section h1,
[data-theme="light"] .hero-section h2,
[data-theme="light"] .hero-section p {
    color: var(--text-primary);
}
[data-theme="light"] .hero-badge {
    background: rgba(180,190,205,0.08) !important;
    color: #b06d10 !important;
    border: 1px solid rgba(180,190,205,0.20) !important;
}

/* 16) 강력한 색 강제: 어떤 인라인 #fff든 부모가 #fff/white 이면 무조건 검정 */
[data-theme="light"] [style*="color:#fff"][style*="background:rgba(255,255,255,0.0"],
[data-theme="light"] [style*="color: #fff"][style*="background: rgba(255,255,255,0.0"],
[data-theme="light"] [style*="color:#ffffff"][style*="background:rgba(255,255,255,0.0"] {
    color: var(--text-primary) !important;
}

/* 17) 인라인 a 링크 #fff → 다크 모드 가정 → 화이트 모드 보정 */
[data-theme="light"] a[style*="color:#fff"]:not([class*="btn"]):not([class*="button"]):not([style*="background:linear-gradient"]) {
    color: var(--text-primary) !important;
}

/* 18) 카드 인라인 hover에서 흰색 강조 → 화이트모드는 회색 */
[data-theme="light"] [onmouseover*="background='rgba(255,255,255"],
[data-theme="light"] [onmouseenter*="background='rgba(255,255,255"] {
    /* hover JS는 직접 못 막지만 기본 배경 통일 */
}

/* 19) 헤더 우측 콘트롤 (테마 토글, 알림 등) - 다크 가정의 hover */
[data-theme="light"] .theme-toggle:hover,
[data-theme="light"] .noti-bell:hover {
    background: rgba(0,0,0,0.05) !important;
}

/* 20) 푸터 자체 — 어두운 배경 가정의 경우 화이트 */
[data-theme="light"] footer,
[data-theme="light"] .site-footer,
[data-theme="light"] .footer-container {
    background: #f8fafc !important;
    color: var(--text-primary) !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .footer-brand p,
[data-theme="light"] .footer-links a,
[data-theme="light"] .footer-links h4 {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .footer-links h4 {
    color: var(--text-primary) !important;
}
[data-theme="light"] .footer-social a {
    background: rgba(0,0,0,0.04) !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .footer-social a:hover {
    background: rgba(180,190,205,0.10) !important;
    color: #b06d10 !important;
}

/* 21) 푸터 언어 메뉴 — 다크 var(--bg-card) 가 화이트모드에선 흰색이라 보더 강화 */
[data-theme="light"] #footerLangMenu {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
}

/* 22) 자동 번역 다이얼로그 */
[data-theme="light"] #gtDialog > div {
    background: #ffffff !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] #gtDialog button {
    background: #f6f8fc !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.10) !important;
}
[data-theme="light"] #gtDialog button:hover {
    background: #e9eef5 !important;
    border-color: rgba(180,190,205,0.30) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   메인 페이지 좁은 화면 — 인기글/공지/유저 가이드 텍스트 점점점 처리
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 인기글 아이템: 제목 한 줄 + ... */
.c-hot-item .nt-title,
.c-hot-item .nt-meta,
.idx-yt-creator-row,
.idx-yt-shorts-info,
.nt-title,
.nt-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.nt-preview {
    /* 멀티라인 클램프(2줄) — 좁아져도 안 깨짐 */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.c-hot-item, .nt-item {
    min-width: 0;
}

/* 2) 우측 패널 (공지 / User Guide / 가이드 등) — 한 줄 ... */
.idx-notice-list a,
.idx-notice-item,
.idx-guide-item,
.idx-side-list a,
.idx-side-list-item,
[class*="-notice-"] a,
[class*="-guide-"] a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

/* 3) 컨테이너에 min-width:0 을 명시 (flex/grid 자식이 ellipsis 작동하려면 필요) */
.idx-right-area,
.idx-right-area *,
.idx-market-panel,
.idx-events-panel,
.idx-yt-fixed,
.idx-yt-hot-fixed {
    min-width: 0;
}

/* 4) 화면 1280px 이하 (US 좁은 창) → 인기글 영역 그리드 단일 컬럼으로 안전 */
@media (max-width: 1280px) {
    .c-hot-grid,
    .c-popular-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 5) 모든 nav-link, footer-lang-opt 텍스트도 안전망 */
.nav-link, .footer-lang-opt span:not([style*="font-size:15px"]):not([style*="font-size:18px"]) {
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   자동 번역 시 텍스트 길이 폭주 대응 + 인기글 점점점 강화
   - Google Translate 후 원문보다 2~3배 길어진 라벨이 영역을 깨뜨림
   - !important 안전망 + 부모 컨테이너에 min-width:0 강제
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 메인 페이지 인기글/공지 — 모든 텍스트 한 줄 줄임 */
.c-hot-item,
.c-hot-item *,
.nt-item,
.nt-item *,
.idx-yt-fixed *,
.idx-yt-hot-fixed *,
.idx-yt-creator-row *,
.idx-yt-shorts-info * {
    min-width: 0 !important;
}
.c-hot-item .nt-title,
.nt-item .nt-title,
.c-hot-item-title,
.idx-popular-title,
.idx-notice-item a {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.nt-preview,
.c-hot-preview {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* 2) 인기글 / 우측 패널 grid/flex 부모 컨테이너에 min-width:0 강제 */
.c-hot-grid > *,
.c-popular-grid > *,
.idx-right-area > *,
.idx-grid > *,
.idx-main-grid > *,
[class*="-grid"] > * {
    min-width: 0;
}

/* 3) 자동 번역 시 .nav-link 라벨이 너무 길어지면 헤더가 깨짐 → flex-wrap + ellipsis */
.nav-links {
    flex-wrap: wrap;
    row-gap: 4px;
}
.nav-link {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* 5) 챗봇 — 자동 번역 결과로 깨지지 않게 max-width 보호 */
.chatbot-toggle,
.chatbot-window,
.chatbot-toggle *,
.chatbot-window * {
    max-width: 100%;
}
/* notranslate가 적용된 곳은 Google Translate가 건드리지 않음 (HTML 속성 보조) */
.notranslate, [translate="no"] {
    /* nothing — 마커 역할 */
}

/* 6) 자동 번역 후 가격/숫자 텍스트가 늘어나면 깨지므로 number 영역 보호 */
.ticker-price, .ticker-change, .price, .roi, .pct {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   인기글 헤딩 점점점 (자동번역 후 "Postagem popular da comunidade" 같은 긴 문구 대응)
   ═══════════════════════════════════════════════════════════════════ */
.idx-pop-header,
.idx-comm-header {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.idx-pop-header h3,
.idx-comm-header h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* h3 안 텍스트 노드는 flex 아이템이 아니라 ellipsis 안 됨 — 직접 span으로 감싸지 않은 경우 부모에서 처리 */
.idx-pop-header h3 i,
.idx-comm-header h3 i {
    flex-shrink: 0 !important;
}

/* 더보기 / More 버튼은 고정 폭 — 헤딩이 그것에 안 밀리도록 */
.idx-pop-header .idx-pop-link,
.idx-comm-header .idx-pop-link,
.idx-pop-link {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* 인기글 카드(개별 게시글) — 진짜 ellipsis 작동하도록 부모/자식 모두 강제 */
.idx-pop-list,
.idx-pop-col {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.idx-hot-item {
    display: flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.idx-hot-rank {
    flex-shrink: 0 !important;
}
/* 본문(.idx-hot-body)이 핵심 — flex:1 + min-width:0 둘 다 있어야 자식 ellipsis 작동 */
.idx-hot-body {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.idx-hot-title,
.idx-hot-item .idx-hot-title,
.idx-hot-item .idx-hot-body > div:first-child {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
.idx-hot-cat, .idx-hot-cat * {
    min-width: 0 !important;
    white-space: nowrap !important;
}
.idx-hot-reactions {
    flex-wrap: wrap !important;
    min-width: 0 !important;
}

/* 화면 좁아질수록 더 엄격하게 적용 — 1100px 이하에선 single-line ellipsis 보장 */
@media (max-width: 1100px) {
    .idx-pop-header h3,
    .idx-comm-header h3 {
        font-size: 16px !important;
    }
    .idx-pop-link {
        font-size: 11px !important;
    }
}
@media (max-width: 900px) {
    .idx-pop-header h3,
    .idx-comm-header h3 {
        font-size: 15px !important;
    }
    .idx-hot-title {
        font-size: 13px !important;
    }
}


/* ─── 호가 클릭 피드백 (지정가 가격 입력) ─── */
.ob-row, .m-ob-row { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: rgba(200,208,220,0.18); }
.ob-row.ob-picked, .m-ob-row.ob-picked { background: rgba(200,208,220,0.22) !important; transition: background .1s; }
@keyframes tfFlash { 0% { box-shadow: 0 0 0 0 rgba(200,208,220,0.55); } 100% { box-shadow: 0 0 0 6px rgba(200,208,220,0); } }
.of-field.tf-flash { animation: tfFlash .5s ease-out; border-radius: 8px; }
.of-field.tf-flash .of-input { border-color: var(--accent); }


/* ═══════════════════════════════════════════════════════════════
   트레이딩 일지 — 대비 보정 / 폼 검증 표시 / 좁은 폭 안전
   (J4 · J10 · J12d) 새 색을 만들지 않고 실버 토큰과 #0a0e14 만 사용한다.
   ═══════════════════════════════════════════════════════════════ */

/* ── J4: 폼 필드 검증 실패 표시 ──
   토스트는 3.5초 뒤 사라지지만 이 표시는 값을 고칠 때까지 남는다. */
.journal-field .field-invalid,
.journal-field input.field-invalid,
.journal-field textarea.field-invalid,
input.field-invalid {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.18) !important;
}
.field-invalid-msg {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--red);
}
.field-invalid-msg::before {
    content: "\26A0\FE0E";
    margin-right: 4px;
}
[data-theme="light"] .field-invalid-msg { color: #b91c1c; }
[data-theme="light"] .journal-field .field-invalid,
[data-theme="light"] input.field-invalid {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 2px rgba(185,28,28,0.16) !important;
}

/* ── J10b: AI 피드백 사용량 배지 ── */
.journal-ai-usage.ai-locked { color: var(--journal-label); }
[data-theme="light"] .journal-ai-usage.ai-active   { background: rgba(0,200,83,0.12); color: #06714f; }
[data-theme="light"] .journal-ai-usage.ai-exhausted{ background: rgba(239,68,68,0.10); color: #b91c1c; }
[data-theme="light"] .journal-ai-usage.ai-locked   { background: rgba(139,148,158,0.12); color: var(--journal-label); }

/* ── J10c: 달력 손익 · 롱/숏 비율 (라이트) ──
   달력 셀은 10px bold 손익 숫자와 L/S 비율이 유일한 정보다. */
[data-theme="light"] .cal-pnl.up   { color: #06714f; background: rgba(14,203,129,0.14); }
[data-theme="light"] .cal-pnl.down { color: #b91c1c; background: rgba(246,70,93,0.12); }
[data-theme="light"] .cal-ls-strip .ls-l { color: #06714f; }
[data-theme="light"] .cal-ls-strip .ls-s { color: #b91c1c; }
/* cs-long 이 트랙에 녹으면 비율이 실제보다 숏 쪽으로 치우쳐 보인다 (오독 유발) */
[data-theme="light"] .cal-side-gauge .cs-long  { background: #06714f; }
[data-theme="light"] .cal-side-gauge .cs-short { background: #b91c1c; }
[data-theme="light"] .pie-ls-row .pls-l { color: #06714f; }
[data-theme="light"] .pie-ls-row .pls-s { color: #b91c1c; }

/* ── J10d: PNL 입력 +/- 대칭 (라이트) ── */
[data-theme="light"] .pnl-val-input.pnl-input-plus  { color: #06714f; }
[data-theme="light"] .pnl-val-input.pnl-input-minus { color: #b91c1c; }
[data-theme="light"] .pnl-sign-btn.pnl-plus  { color: #06714f; }
[data-theme="light"] .pnl-sign-btn.pnl-minus { color: #b91c1c; }
[data-theme="light"] .pnl-sign-btn.pnl-plus.active {
    background: rgba(6,113,79,0.14); box-shadow: inset 0 0 0 1px rgba(6,113,79,0.40);
}
[data-theme="light"] .pnl-sign-btn.pnl-minus.active {
    background: rgba(185,28,28,0.12); box-shadow: inset 0 0 0 1px rgba(185,28,28,0.38);
}

/* ── J10e: 카드 별점 (AI 자동 채점 결과) ── */
[data-theme="light"] .entry-stars { color: rgba(10,14,20,0.72); }

/* ── J10f: 월간 AI 분석 잠금 상태 (라이트) ── */
[data-theme="light"] .btn-monthly-analysis.locked {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.12);
    color: var(--text-secondary);
}
[data-theme="light"] .btn-monthly-analysis.locked:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-primary);
}

/* ── J10 보조: 일지 소형 라벨 (라이트) ── */
[data-theme="light"] .jov-stat-label,
[data-theme="light"] .journal-period-tab,
[data-theme="light"] .pie-card-title,
[data-theme="light"] .jchart-legend,
[data-theme="light"] .journal-dblclick-hint,
[data-theme="light"] .entry-leverage,
[data-theme="light"] .cal-count,
[data-theme="light"] .cal-top-row .cal-date { color: var(--journal-label); }
[data-theme="light"] .journal-period-tab.active { color: #0a0e14; }

/* ── J13b: 세로 스크린샷 레터박스 배경 (테마별) ──
   .cal-thumb 은 object-fit:contain 이라 남는 여백이 배경색으로 드러난다.
   라이트에서 rgba(0,0,0,0.28) 은 카드 안에 검은 띠로 보인다. */
[data-theme="light"] .cal-thumb { background: rgba(10,14,20,0.06); }

/* ── J12d: 좁은 폭 안전 ──
   .cal-day{overflow:hidden} 탓에 7열 유지 시 셀 폭 50px 에서 손익 숫자가
   조용히 잘린다. UA 매칭이 안 되는 태블릿·좁힌 데스크톱 창까지 커버한다. */
@media (max-width: 600px) {
    .cal-body { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .cal-day.empty { display: none; }
    .cal-header-row { display: none; }
}

/* ── 랭킹 개인정보 최소화 (2026-08-10) ──
   실현 PNL(col-pnl)·가입일(col-joined) 컬럼은 화면에서 비노출한다.
   해당 값은 api/ranking.php 응답에서도 제거됐다(계정 내부값 미노출).
   '수익 순' 정렬(data-sort="pnl")도 근거 데이터가 없어 감춘다.
   (모바일 m_ranking.php 는 자체 인라인으로 이미 숨김 — 데스크톱 커버용) */
.ranking-table .col-pnl,
.ranking-table .col-joined { display: none !important; }
.rank-filter[data-sort="pnl"] { display: none !important; }