/* =====================================================================
 * NEONIX Theme System (SSOT) — Linear Obsidian Dark / Light Engine
 * ===================================================================== */

/* ── Dark Mode Root Tokens (Default SSOT) ───────────────────────────── */
:root,
html[data-theme="dark"],
body[data-theme="dark"] {
    color-scheme: dark;
    --bg-main: #08090a;
    --bg-base: #08090a;
    --bg-card: #0f1012;
    --bg-sub: #08090a;
    --bg-panel: #0f1012;
    --surface-1: #0f1012;
    --surface-2: #17181c;
    --surface-3: #22242a;
    --hairline: rgba(255, 255, 255, 0.07);
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-bg: rgba(15, 16, 18, 0.88);
    --glass-bg-solid: #0f1012;

    --text-main: #f7f8f8;
    --text-sub: #8a8f98;
    --text-dim: #5c6068;

    /* 문짝(door) 다크 토큰 */
    --dr-bg: #08090a;
    --dr-surface: #0f1012;
    --dr-surface2: #17181c;
    --dr-line: rgba(255, 255, 255, 0.08);
    --dr-txt: #f7f8f8;
    --dr-muted: #8a8f98;
    --dr-faint: #5c6068;
    --dr-brand: #38bdf8;
    --dr-warn: #fbbf24;
    --dr-danger: #f87171;
    --dr-success: #34d399;

    /* 카카오 가이드 다크 토큰 */
    --kg-surface: #0f1012;
    --kg-surface2: #17181c;
    --kg-line: rgba(255, 255, 255, 0.08);
    --kg-txt: #f7f8f8;
    --kg-muted: #8a8f98;
    --kg-faint: #5c6068;
    --kg-brand: #38bdf8;

    /* Linear 스타일 네온/상태 컬러 */
    --neon-cyan: #38bdf8;
    --neon-blue: #38bdf8;
    --neon-green: #34d399;
    --neon-gold: #fbbf24;
    --neon-amber: #fbbf24;
    --neon-red: #f87171;
    --neon-purple: #a855f7;
    --linear-indigo: #5e6ad2;
}

/* ── Light Mode Root Tokens ─────────────────────────────────────────── */
html[data-theme="light"],
body[data-theme="light"] {
    color-scheme: light;
    --bg-main: #f4f6f9;
    --bg-base: #f4f6f9;
    --bg-card: #ffffff;
    --bg-sub: #ffffff;
    --bg-panel: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --hairline: #e2e8f0;
    --border-color: #cbd5e1;
    --glass-border: #cbd5e1;
    --glass-bg: rgba(255, 255, 255, 0.94);
    --glass-bg-solid: #ffffff;

    --text-main: #0f172a;
    --text-sub: #475569;
    --text-dim: #64748b;

    /* 문짝(door) 라이트 토큰 */
    --dr-bg: #f4f6f9;
    --dr-surface: #ffffff;
    --dr-surface2: #f8fafc;
    --dr-line: #cbd5e1;
    --dr-txt: #0f172a;
    --dr-muted: #475569;
    --dr-faint: #94a3b8;
    --dr-brand: #0284c7;

    /* 카카오 가이드 라이트 토큰 */
    --kg-surface: #ffffff;
    --kg-surface2: #f8fafc;
    --kg-line: #cbd5e1;
    --kg-txt: #0f172a;
    --kg-muted: #475569;
    --kg-faint: #94a3b8;
    --kg-brand: #0284c7;

    /* 라이트 모드 고대비 상태 컬러 */
    --neon-cyan: #0284c7;
    --neon-blue: #2563eb;
    --neon-green: #059669;
    --neon-gold: #d97706;
    --neon-amber: #d97706;
    --neon-red: #dc2626;
    --neon-purple: #7c3aed;
}

/* ── 1. General & Layout ────────────────────────────────────────────── */
html[data-theme="light"] body,
html[data-theme="light"] body.gate-body {
    background-color: #f4f6f9 !important;
    background-image: none !important;
    color: #0f172a !important;
}
html[data-theme="light"] .gate-main::before {
    display: none !important;
}

/* Scrollbars */
html[data-theme="light"] ::-webkit-scrollbar-track,
body[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f5f9;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb,
body[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Header & Nav */
html[data-theme="light"] header {
    background: rgba(244, 246, 249, 0.94) !important;
    border-bottom-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .header-nav {
    border-bottom-color: #cbd5e1 !important;
}
html[data-theme="light"] .logo {
    color: #0f172a !important;
}
html[data-theme="light"] .shell-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .day-badge {
    background: #e2e8f0 !important;
    color: #334155 !important;
}
html[data-theme="light"] .nav-btn-v2 {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .nav-btn-v2:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* ── 2. Door Pages (Login, Register, Recovery, Pending) ──────────────── */
html[data-theme="light"] .gate-card,
html[data-theme="light"] .login-container,
html[data-theme="light"] .register-container,
html[data-theme="light"] .recovery-container {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .door-title,
html[data-theme="light"] .title-main {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: none !important;
}
html[data-theme="light"] .door-sub,
html[data-theme="light"] .title-sub {
    color: #475569 !important;
}
html[data-theme="light"] .door-label,
html[data-theme="light"] .label-text,
html[data-theme="light"] .form-group label {
    color: #334155 !important;
}
html[data-theme="light"] .gate-card input[type="text"],
html[data-theme="light"] .gate-card input[type="password"],
html[data-theme="light"] .gate-card input[type="email"],
html[data-theme="light"] .gate-card input[type="tel"],
html[data-theme="light"] .gate-card input[type="number"],
html[data-theme="light"] .gate-card select,
html[data-theme="light"] .form-group input {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .gate-card input:focus,
html[data-theme="light"] .gate-card select:focus,
html[data-theme="light"] .form-group input:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
    background: #ffffff !important;
}
html[data-theme="light"] .gate-card input::placeholder,
html[data-theme="light"] .form-group input::placeholder {
    color: #94a3b8 !important;
}
html[data-theme="light"] .pw-toggle-btn {
    color: #64748b !important;
}
html[data-theme="light"] .pw-toggle-btn:hover {
    color: #0f172a !important;
}
html[data-theme="light"] .door-foot {
    border-top-color: #e2e8f0 !important;
}
html[data-theme="light"] .door-foot a,
html[data-theme="light"] .recovery-link {
    color: #475569 !important;
}
html[data-theme="light"] .door-foot a:hover,
html[data-theme="light"] .recovery-link:hover {
    color: #0284c7 !important;
}

/* Agree / Terms Block in Register */
html[data-theme="light"] .agree-all {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .agree-list {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
}
html[data-theme="light"] .agree-item {
    color: #1e293b !important;
}
html[data-theme="light"] .agree-item + .agree-item {
    border-top: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .agree-text b {
    color: #0284c7 !important;
}
html[data-theme="light"] .agree-more {
    color: #64748b !important;
}
html[data-theme="light"] .agree-body {
    background: #f8fafc !important;
    color: #475569 !important;
    border-top: 1px solid #e2e8f0;
}
html[data-theme="light"] .agree-body strong {
    color: #0f172a !important;
}

/* ── 3. Settings Page ───────────────────────────────────────────────── */
html[data-theme="light"] .settings-module,
html[data-theme="light"] .nx-patchnote-bar-btn,
html[data-theme="light"] .kakao-promo {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .settings-module:hover,
html[data-theme="light"] .nx-patchnote-bar-btn:hover {
    background: #ffffff !important;
    border-color: #94a3b8 !important;
}
html[data-theme="light"] .module-title {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .module-sub {
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
}
html[data-theme="light"] .module-accent svg {
    color: #0f172a !important;
}
html[data-theme="light"] .module-accent-purple svg {
    color: #7c3aed !important;
}
html[data-theme="light"] .module-accent-cyan svg {
    color: #0284c7 !important;
}
html[data-theme="light"] .module-accent-green svg {
    color: #059669 !important;
}
html[data-theme="light"] .module-accent-gold svg {
    color: #d97706 !important;
}
html[data-theme="light"] .module-preview .pill {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .module-chevron {
    color: #475569 !important;
}

/* 요금 카드 (Refactored Billing Card) */
.billing-grid-sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .billing-grid-sub {
        grid-template-columns: 1fr;
    }
}

html[data-theme="light"] .billing-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    border-radius: 14px !important;
}
html[data-theme="light"] .billing-price {
    color: #0f172a !important;
    text-shadow: none !important;
}
html[data-theme="light"] .billing-vat {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}
html[data-theme="light"] .billing-tier {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .billing-tier--vip {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}
html[data-theme="light"] .billing-summary-sub {
    color: #475569 !important;
}
html[data-theme="light"] .billing-status--active {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .billing-panel {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 4px 16px !important;
}
html[data-theme="light"] .billing-line {
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .billing-line--total {
    border-top: 2px solid #cbd5e1 !important;
}
html[data-theme="light"] .bl-term {
    color: #0f172a !important;
}
html[data-theme="light"] .billing-line-detail {
    color: #64748b !important;
}
html[data-theme="light"] .billing-line-amount {
    color: #0f172a !important;
}
html[data-theme="light"] .billing-line-amount--free {
    color: #059669 !important;
}

html[data-theme="light"] .va-row {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
}
html[data-theme="light"] .va-number-no {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .va-number-bank {
    color: #475569 !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .btn-copy,
html[data-theme="light"] .btn-va-copy {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .btn-copy:hover,
html[data-theme="light"] .btn-va-copy:hover {
    background: #f1f5f9 !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}
html[data-theme="light"] .billing-period-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
}
html[data-theme="light"] .billing-period-label {
    color: #64748b !important;
}
html[data-theme="light"] .billing-period-value {
    color: #0f172a !important;
}
html[data-theme="light"] .billing-notice-list {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    color: #475569 !important;
    padding: 12px 16px 12px 28px !important;
}
html[data-theme="light"] .billing-notice-list strong {
    color: #0f172a !important;
}

/* ── 3-1. 지사 관제 (Branch Cards & Mini Cards) ───────────────────────── */
html[data-theme="light"] .branch-card-v2 {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 0 !important;
}
html[data-theme="light"] .branch-card-v2:hover {
    background: #ffffff !important;
    border-color: #94a3b8 !important;
}
html[data-theme="light"] .branch-name-v2 {
    color: #0f172a !important;
    font-weight: 900 !important;
    font-size: 1.05rem !important;
}
/* ⛔ VIP=보라 / 단독=파랑 으로 되돌리지 말 것 — 이건 상태가 아니라 이름표다.
   무슨 지사인지는 글자가 말한다 (2026-09-02 전면 톤 개편). */
html[data-theme="light"] .vip-label-v2,
html[data-theme="light"] .solo-label-v2 {
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .solo-meta-line {
    color: #64748b !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .vip-summary {
    color: #475569 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .vip-branch-tags {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-top: 10px !important;
}
html[data-theme="light"] .branch-mini-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    padding: 10px 14px !important;
    margin-bottom: 6px !important;
}
html[data-theme="light"] .branch-mini-card:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}
html[data-theme="light"] .mini-card-name {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
}

/* 카카오톡 미니 버튼 — 카카오 노랑을 그대로 썼다. 지사 카드 한 줄에
   [세트(파랑)] [카톡(노랑)] [케밥(회색)] 이 나란히 서서 신호등이 됐다.
   ⛔ 브랜드 노랑을 되돌리지 말 것 — 켜짐(.is-on)만 먹색 slab 으로 구분한다. */
html[data-theme="light"] .btn-mini-kakao {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .btn-mini-kakao:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .btn-mini-kakao.is-on {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid #0f172a !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
html[data-theme="light"] .set-chip {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .set-chip b {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .btn-kebab {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}
html[data-theme="light"] .btn-kebab:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ── 3-2. 내 계정 (My Account Readonly & Cards) ───────────────────────── */
html[data-theme="light"] .profile-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 18px !important;
    margin-bottom: 14px !important;
}
html[data-theme="light"] .profile-card-title {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    margin-bottom: 12px !important;
}
html[data-theme="light"] .profile-readonly-item label,
html[data-theme="light"] .profile-form-row label {
    color: #475569 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}
html[data-theme="light"] .profile-readonly-grid {
    background: transparent !important;
    border: none !important;
}
html[data-theme="light"] .profile-readonly-item {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
}
html[data-theme="light"] .profile-readonly-val,
html[data-theme="light"] .profile-card .profile-readonly-grid .profile-readonly-val,
html[data-theme="light"] .profile-readonly-grid .profile-readonly-val,
html[data-theme="light"] .profile-readonly-item .profile-readonly-val {
    background: transparent !important;
    border: none !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
}
html[data-theme="light"] .profile-plan {
    font-weight: 800 !important;
}
html[data-theme="light"] .profile-plan--basic,
html[data-theme="light"] .profile-plan--starter,
html[data-theme="light"] .profile-plan--pro {
    color: #0f172a !important;
}
html[data-theme="light"] .profile-plan--vip {
    color: #d97706 !important;
}
html[data-theme="light"] .btn-profile-save {
    background: #0284c7 !important;
    border: 1px solid #0284c7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}
html[data-theme="light"] .btn-profile-save:hover {
    background: #0369a1 !important;
}

/* Settings Form Controls */
html[data-theme="light"] input,
html[data-theme="light"] select {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus {
    border-color: #0284c7 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}
html[data-theme="light"] select {
    color-scheme: light !important;
}
html[data-theme="light"] select optgroup {
    background: #f1f5f9 !important;
    color: #475569 !important;
}
html[data-theme="light"] select option {
    background: #ffffff !important;
    color: #0f172a !important;
}
html[data-theme="light"] .btn-action,
html[data-theme="light"] .btn-inline-close {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .btn-action:hover,
html[data-theme="light"] .btn-inline-close:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
html[data-theme="light"] .btn-platform,
html[data-theme="light"] .checkbox-item label,
html[data-theme="light"] .kakao-toggle-row,
html[data-theme="light"] .link-progress-title,
html[data-theme="light"] .info-values,
html[data-theme="light"] .reauth-panel-text-main,
html[data-theme="light"] .info-tip-body .info-em {
    color: #0f172a !important;
}

/* ── 4. Kakao Guide Page (Crisp Warm Amber & High Contrast) ─────────── */
html[data-theme="light"] .kg {
    background: #f4f6f9 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .kg-h1 {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .kg-h1 .g {
    color: #b45309 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .kg-badge {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .kg-badge .dot {
    background: #d97706 !important;
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.5) !important;
}
html[data-theme="light"] .kg-eyebrow i {
    background: #d97706 !important;
}
html[data-theme="light"] .kg-sub {
    color: #475569 !important;
}
html[data-theme="light"] .kg-sub b {
    color: #0f172a !important;
}
html[data-theme="light"] .kg-btn--primary {
    background: #FEE500 !important;
    color: #191600 !important;
    font-weight: 900 !important;
    border: 1px solid #eab308 !important;
    box-shadow: 0 4px 14px rgba(254, 229, 0, 0.45) !important;
}
html[data-theme="light"] .kg-btn--ghost {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .kg-btn--ghost:hover {
    background: #f1f5f9 !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}
html[data-theme="light"] .kg-eyebrow {
    color: #b45309 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .kg-feat-h {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .kg-feat-p {
    color: #475569 !important;
}
html[data-theme="light"] .kg-feat-p b {
    color: #0f172a !important;
}
html[data-theme="light"] .kg-li {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}
html[data-theme="light"] .kg-li svg {
    color: #d97706 !important;
}
html[data-theme="light"] .kg-li b {
    color: #0f172a !important;
}
html[data-theme="light"] .kg-li span {
    color: #64748b !important;
}

/* ── 5. Multi & Single Dashboards (Coupang / Baemin / Multi) ────────── */
/* FONT SIZE 버튼 공통 */
.btn-font {
    background: var(--surface-2);
    color: var(--text-main);
    border: 1px solid var(--hairline);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    transition: 0.15s ease;
}
.btn-font:hover {
    background: var(--surface-3);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme="light"] .btn-font {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] .btn-font:hover {
    background: #f1f5f9 !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

/* 관제판 카드 기본 틀 및 좌측 상태 컬러 바 복원 */
html[data-theme="light"] .branch-card,
html[data-theme="light"] .peak-card,
html[data-theme="light"] .bm-card,
html[data-theme="light"] .cp-card,
html[data-theme="light"] .card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 4.5px solid var(--st, #7c3aed) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* 상태별 왼쪽 테두리 & 내부 은은한 컬러 앰비언트 글로우 */
html[data-theme="light"] .branch-card.st-short,
html[data-theme="light"] .peak-card.st-short {
    --st: #dc2626 !important;
    border-left: 4.5px solid #dc2626 !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.06) !important;
}
html[data-theme="light"] .branch-card.st-tight,
html[data-theme="light"] .peak-card.st-tight {
    --st: #d97706 !important;
    border-left: 4.5px solid #d97706 !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.06) !important;
}
html[data-theme="light"] .branch-card.st-ok,
html[data-theme="light"] .peak-card.st-ok {
    --st: #0284c7 !important;
    border-left: 4.5px solid #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.06) !important;
}
html[data-theme="light"] .branch-card.st-done,
html[data-theme="light"] .peak-card.st-done {
    --st: #059669 !important;
    border-left: 4.5px solid #059669 !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.06) !important;
}
html[data-theme="light"] .branch-card.st-none,
html[data-theme="light"] .peak-card.st-none {
    --st: #64748b !important;
    border-left: 4.5px solid #94a3b8 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* 상태 칩 (달성, 여유, 집중, 마감/부족) 고대비 선명한 배지 */
html[data-theme="light"] .chip {
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 7px !important;
    letter-spacing: -0.2px !important;
}
html[data-theme="light"] .branch-card.st-short .chip,
html[data-theme="light"] .peak-card.st-short .chip {
    color: #b91c1c !important;
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
}
html[data-theme="light"] .branch-card.st-tight .chip,
html[data-theme="light"] .peak-card.st-tight .chip {
    color: #b45309 !important;
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
}
html[data-theme="light"] .branch-card.st-ok .chip,
html[data-theme="light"] .peak-card.st-ok .chip {
    color: #0369a1 !important;
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
}
html[data-theme="light"] .branch-card.st-done .chip,
html[data-theme="light"] .peak-card.st-done .chip {
    color: #047857 !important;
    background: #d1fae5 !important;
    border: 1px solid #a7f3d0 !important;
}
html[data-theme="light"] .branch-card.st-none .chip,
html[data-theme="light"] .peak-card.st-none .chip {
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

/* 게이지 바 및 진행률 채우기 컬러 */
html[data-theme="light"] .bar {
    background: #e2e8f0 !important;
}
html[data-theme="light"] .bar-prog {
    background: #cbd5e1 !important;
}
html[data-theme="light"] .branch-card.st-short .bar-fill,
html[data-theme="light"] .peak-card.st-short .bar-fill {
    background: linear-gradient(90deg, #dc2626, #ef4444) !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.4) !important;
}
html[data-theme="light"] .branch-card.st-tight .bar-fill,
html[data-theme="light"] .peak-card.st-tight .bar-fill {
    background: linear-gradient(90deg, #d97706, #f59e0b) !important;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.4) !important;
}
html[data-theme="light"] .branch-card.st-ok .bar-fill,
html[data-theme="light"] .peak-card.st-ok .bar-fill {
    background: linear-gradient(90deg, #0284c7, #38bdf8) !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.4) !important;
}
html[data-theme="light"] .branch-card.st-done .bar-fill,
html[data-theme="light"] .peak-card.st-done .bar-fill {
    background: linear-gradient(90deg, #059669, #10b981) !important;
    box-shadow: 0 0 10px rgba(5, 150, 105, 0.4) !important;
}

/* B마트, 개인실적, 라이더미터 카드 왼쪽 바 색상 유지 */
html[data-theme="light"] .bmart-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 4px solid #0284c7 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}
html[data-theme="light"] .bm-tag {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}

html[data-theme="light"] .branch-name,
html[data-theme="light"] .branch-name .nm,
html[data-theme="light"] .branch-name .pk,
html[data-theme="light"] .name-line .pk,
html[data-theme="light"] .pk {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .hero-peak {
    color: #334155 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .hero-pct {
    color: var(--st) !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .figs span,
html[data-theme="light"] .daily span:not(.rej-badge),
html[data-theme="light"] .bm-figs span {
    color: #0f172a !important;
    font-weight: 700 !important;
}
/* 거절 배지(빨강/골드/초록)는 흰 배경에서 원색 그대로면 쨍해 보인다(2026-08-25 제보).
   채도·명도만 살짝 낮춰 톤을 죽인다 — 색 자체(위험도 구분)는 그대로 유지. */
html[data-theme="light"] .rej-badge {
    filter: saturate(0.72) brightness(0.92);
}
html[data-theme="light"] .figs span i,
html[data-theme="light"] .daily span i,
html[data-theme="light"] .bm-figs i {
    color: #64748b !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .daily span b,
html[data-theme="light"] .bm-figs b {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .daily span b.dim {
    color: #94a3b8 !important;
}
html[data-theme="light"] .pill {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
html[data-theme="light"] .pill .dim {
    color: #64748b !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .stat-val {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .kebab-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}
html[data-theme="light"] .kebab-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .kebab-menu {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    z-index: 9999 !important;
}
html[data-theme="light"] .kebab-menu a,
html[data-theme="light"] .kebab-menu button {
    color: #0f172a !important;
}
html[data-theme="light"] .kebab-menu a:hover,
html[data-theme="light"] .kebab-menu button:hover {
    background: #f1f5f9 !important;
}
html[data-theme="light"] .sync {
    color: #64748b !important;
}
html[data-theme="light"] .sync .t {
    color: #475569 !important;
}
html[data-theme="light"] .idle-peak {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .idle-head {
    color: #475569 !important;
}
html[data-theme="light"] .idle-pct,
html[data-theme="light"] .idle-figs {
    color: #0f172a !important;
}
html[data-theme="light"] .idle-figs i {
    color: #64748b !important;
}
html[data-theme="light"] #btn-peak-fold,
html[data-theme="light"] #btn-toggle {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] #btn-peak-fold:hover,
html[data-theme="light"] #btn-toggle:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #0284c7 !important;
}

/* Weather Bar Styling */
.wx-temp { color: #fff; font-size: 0.85rem; font-weight: 800; }
.wx-desc { color: #e4e4e7; font-size: 0.78rem; font-weight: 700; }
.wx-feel { color: #fff; font-weight: 800; }
.wx-humid, .wx-wind { color: #d4d4d8; font-weight: 600; }

html[data-theme="light"] .weather-bar {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .wx-temp {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .wx-desc {
    color: #475569 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .wx-feel {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .wx-humid,
html[data-theme="light"] .wx-wind {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* =====================================================================
 * Light Mode High-Contrast Vivid Weather Effects (관제판 화이트모드 날씨 애니메이션)
 * 관제 글자를 가리지 않도록 글자 뒤(z-index: 2) 배치 및 섬세한 스카이블루 톤 적용
 * ===================================================================== */

/* 관제판 텍스트/숫자 z-index 보장 (날씨 입자가 글자 뒤에만 머물도록 고정) */
.peak-card > *,
.branch-card > *,
.card > * {
    position: relative;
    z-index: 2;
}

/* 1. 배경 앰비언스 (Weather Card Atmosphere Ambient) */
html[data-theme="light"] .peak-card.weather-bg-rain,
html[data-theme="light"] .peak-card.weather-bg-rain-light,
html[data-theme="light"] .peak-card.weather-bg-rain-heavy,
html[data-theme="light"] .card.weather-bg-rain,
html[data-theme="light"] .card.weather-bg-rain-light,
html[data-theme="light"] .card.weather-bg-rain-heavy,
html[data-theme="light"] .branch-card.weather-bg-rain,
html[data-theme="light"] .branch-card.weather-bg-rain-light,
html[data-theme="light"] .branch-card.weather-bg-rain-heavy {
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%) !important;
    border-top: 2px solid #38bdf8 !important;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.12) !important;
}

html[data-theme="light"] .peak-card.weather-bg-snow,
html[data-theme="light"] .peak-card.weather-bg-snow-light,
html[data-theme="light"] .peak-card.weather-bg-snow-heavy,
html[data-theme="light"] .card.weather-bg-snow,
html[data-theme="light"] .card.weather-bg-snow-light,
html[data-theme="light"] .card.weather-bg-snow-heavy,
html[data-theme="light"] .branch-card.weather-bg-snow,
html[data-theme="light"] .branch-card.weather-bg-snow-light,
html[data-theme="light"] .branch-card.weather-bg-snow-heavy {
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%) !important;
    border-top: 2px solid #0284c7 !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.12) !important;
}

html[data-theme="light"] .peak-card.weather-bg-wind,
html[data-theme="light"] .peak-card.weather-bg-wind-heavy,
html[data-theme="light"] .card.weather-bg-wind,
html[data-theme="light"] .card.weather-bg-wind-heavy,
html[data-theme="light"] .branch-card.weather-bg-wind,
html[data-theme="light"] .branch-card.weather-bg-wind-heavy {
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%) !important;
    border-top: 2.5px solid #0d9488 !important;
    box-shadow: 0 -2px 14px rgba(13, 148, 136, 0.25) !important;
}

html[data-theme="light"] .peak-card.weather-bg-rainstorm,
html[data-theme="light"] .card.weather-bg-rainstorm,
html[data-theme="light"] .branch-card.weather-bg-rainstorm {
    background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%) !important;
    border-top: 2.5px solid #0284c7 !important;
    box-shadow: 0 -2px 16px rgba(2, 132, 199, 0.28) !important;
}

html[data-theme="light"] .peak-card.weather-bg-thunder,
html[data-theme="light"] .card.weather-bg-thunder,
html[data-theme="light"] .branch-card.weather-bg-thunder {
    background: linear-gradient(180deg, #f5f0ff 0%, #ffffff 100%) !important;
    border-top: 2.5px solid #7c3aed !important;
    box-shadow: 0 -2px 16px rgba(124, 58, 237, 0.28) !important;
}

html[data-theme="light"] .peak-card.weather-bg-sleet,
html[data-theme="light"] .card.weather-bg-sleet,
html[data-theme="light"] .branch-card.weather-bg-sleet {
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%) !important;
    border-top: 2.5px solid #0284c7 !important;
    box-shadow: 0 -2px 14px rgba(2, 132, 199, 0.22) !important;
}

html[data-theme="light"] .peak-card.weather-bg-heatwave,
html[data-theme="light"] .card.weather-bg-heatwave,
html[data-theme="light"] .branch-card.weather-bg-heatwave {
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%) !important;
    border-top: 2.5px solid #f59e0b !important;
    box-shadow: 0 -2px 14px rgba(245, 158, 11, 0.25) !important;
}

/* 2. 섬세한 빗방울 (Clean Delicate Raindrops) */
html[data-theme="light"] .weather-bg-rain::after {
    background-image: 
        radial-gradient(ellipse 0.8px 8px at 20% 30%, rgba(2, 132, 199, 0.28) 0%, transparent 100%),
        radial-gradient(ellipse 0.9px 11px at 60% 70%, rgba(3, 105, 161, 0.32) 0%, transparent 100%),
        radial-gradient(ellipse 1.1px 14px at 40% 20%, rgba(2, 132, 199, 0.38) 0%, transparent 100%),
        radial-gradient(ellipse 1.2px 18px at 80% 50%, rgba(14, 116, 144, 0.42) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.85 !important;
}

html[data-theme="light"] .weather-bg-rain-light::after {
    background-image:
        radial-gradient(ellipse 0.6px 5px at 20% 30%, rgba(2, 132, 199, 0.18) 0%, transparent 100%),
        radial-gradient(ellipse 0.7px 7px at 60% 70%, rgba(3, 105, 161, 0.22) 0%, transparent 100%),
        radial-gradient(ellipse 0.8px 9px at 40% 20%, rgba(2, 132, 199, 0.26) 0%, transparent 100%),
        radial-gradient(ellipse 0.9px 12px at 80% 50%, rgba(14, 116, 144, 0.30) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.75 !important;
}

html[data-theme="light"] .weather-bg-rain-heavy::after {
    background-image: 
        radial-gradient(ellipse 1.0px 10px at 20% 30%, rgba(2, 132, 199, 0.40) 0%, transparent 100%),
        radial-gradient(ellipse 1.1px 14px at 60% 70%, rgba(3, 105, 161, 0.45) 0%, transparent 100%),
        radial-gradient(ellipse 1.3px 18px at 40% 20%, rgba(2, 132, 199, 0.50) 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 22px at 80% 50%, rgba(14, 116, 144, 0.55) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.95 !important;
}

/* 3. 섬세한 3D 눈송이 (Delicate Snow Particles) */
html[data-theme="light"] .weather-bg-snow::before {
    background-image:
        radial-gradient(circle 1.4px at 10% 20%, rgba(14, 116, 144, 0.35) 0%, transparent 100%),
        radial-gradient(circle 1.8px at 30% 60%, rgba(2, 132, 199, 0.40) 0%, transparent 100%),
        radial-gradient(circle 1.2px at 70% 30%, rgba(14, 116, 144, 0.30) 0%, transparent 100%),
        radial-gradient(circle 2.0px at 90% 80%, rgba(2, 132, 199, 0.35) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.85 !important;
}

html[data-theme="light"] .weather-bg-snow::after {
    background-image:
        radial-gradient(circle 3.2px at 20% 15%, rgba(56, 189, 248, 0.55) 0%, rgba(14, 116, 144, 0.25) 70%, transparent 100%),
        radial-gradient(circle 2.6px at 50% 45%, rgba(14, 116, 144, 0.45) 0%, rgba(56, 189, 248, 0.2) 80%, transparent 100%),
        radial-gradient(circle 3.8px at 75% 75%, rgba(56, 189, 248, 0.55) 0%, rgba(14, 116, 144, 0.25) 75%, transparent 100%),
        radial-gradient(circle 2.8px at 85% 20%, rgba(14, 116, 144, 0.45) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.85 !important;
}

html[data-theme="light"] .weather-bg-snow-light::before {
    background-image:
        radial-gradient(circle 1.2px at 15% 20%, rgba(14, 116, 144, 0.25) 0%, transparent 100%),
        radial-gradient(circle 1.0px at 45% 65%, rgba(2, 132, 199, 0.20) 0%, transparent 100%),
        radial-gradient(circle 1.4px at 75% 30%, rgba(14, 116, 144, 0.25) 0%, transparent 100%),
        radial-gradient(circle 0.9px at 85% 85%, rgba(2, 132, 199, 0.20) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.75 !important;
}

html[data-theme="light"] .weather-bg-snow-light::after {
    background-image:
        radial-gradient(circle 2.4px at 25% 10%, rgba(56, 189, 248, 0.45) 0%, rgba(14, 116, 144, 0.2) 70%, transparent 100%),
        radial-gradient(circle 2.8px at 65% 55%, rgba(14, 116, 144, 0.40) 0%, transparent 100%),
        radial-gradient(circle 2.0px at 80% 25%, rgba(56, 189, 248, 0.45) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.75 !important;
}

html[data-theme="light"] .weather-bg-snow-heavy::before {
    background-image:
        radial-gradient(ellipse 1.8px 5px at 15% 20%, rgba(14, 116, 144, 0.45) 0%, transparent 100%),
        radial-gradient(ellipse 1.4px 4px at 45% 65%, rgba(2, 132, 199, 0.40) 0%, transparent 100%),
        radial-gradient(ellipse 2.2px 7px at 75% 30%, rgba(14, 116, 144, 0.50) 0%, transparent 100%),
        radial-gradient(ellipse 1.8px 5px at 85% 85%, rgba(2, 132, 199, 0.45) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.90 !important;
}

html[data-theme="light"] .weather-bg-snow-heavy::after {
    background-image:
        radial-gradient(circle 4.0px at 20% 10%, rgba(56, 189, 248, 0.65) 0%, rgba(14, 116, 144, 0.35) 70%, transparent 100%),
        radial-gradient(circle 5.0px at 60% 50%, rgba(14, 116, 144, 0.55) 0%, rgba(56, 189, 248, 0.25) 80%, transparent 100%),
        radial-gradient(circle 3.5px at 85% 30%, rgba(56, 189, 248, 0.60) 0%, transparent 100%),
        radial-gradient(circle 4.5px at 40% 85%, rgba(14, 116, 144, 0.50) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.90 !important;
}

/* 4. 강풍 제트 기류 (Wind Jet Streams) */
html[data-theme="light"] .weather-bg-wind::before {
    background-image:
        radial-gradient(ellipse 90px 2.2px at 20% 40%, rgba(13, 148, 136, 0.55) 0%, rgba(20, 184, 166, 0.25) 70%, transparent 100%),
        radial-gradient(ellipse 140px 2.6px at 70% 70%, rgba(15, 118, 110, 0.45) 0%, transparent 100%) !important;
    filter: drop-shadow(0 0 3px rgba(13, 148, 136, 0.35));
    opacity: 0.85 !important;
}

/* 5. 비바람 복합 (Rainstorm) */
html[data-theme="light"] .weather-bg-rainstorm::before {
    background-image:
        radial-gradient(ellipse 1.0px 10px at 20% 30%, rgba(2, 132, 199, 0.35) 0%, transparent 100%),
        radial-gradient(ellipse 1.2px 14px at 60% 70%, rgba(3, 105, 161, 0.40) 0%, transparent 100%),
        radial-gradient(ellipse 1.4px 18px at 40% 20%, rgba(2, 132, 199, 0.45) 0%, transparent 100%),
        radial-gradient(ellipse 1.6px 22px at 80% 50%, rgba(14, 116, 144, 0.50) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.90 !important;
}

html[data-theme="light"] .weather-bg-rainstorm::after {
    background-image:
        radial-gradient(ellipse 100px 2.2px at 20% 40%, rgba(2, 132, 199, 0.55) 0%, rgba(3, 105, 161, 0.25) 70%, transparent 100%),
        radial-gradient(ellipse 150px 2.6px at 70% 70%, rgba(14, 116, 144, 0.45) 0%, transparent 100%) !important;
    filter: drop-shadow(0 0 3px rgba(2, 132, 199, 0.35));
    opacity: 0.85 !important;
}

/* 6. 뇌우 / 낙뢰 (Thunder & Lightning) */
html[data-theme="light"] .weather-bg-thunder::before {
    background-image:
        radial-gradient(ellipse 1.2px 14px at 10% 25%, rgba(124, 58, 237, 0.45) 0%, transparent 100%),
        radial-gradient(ellipse 1.6px 22px at 50% 60%, rgba(147, 51, 234, 0.55) 0%, transparent 100%),
        radial-gradient(ellipse 2.0px 30px at 80% 35%, rgba(124, 58, 237, 0.50) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.85 !important;
}

html[data-theme="light"] .weather-bg-thunder::after {
    background: 
        radial-gradient(ellipse 90px 200px at 65% 0%, rgba(147, 51, 234, 0.35) 0%, rgba(124, 58, 237, 0.2) 40%, transparent 80%),
        radial-gradient(ellipse 140% 100% at 50% -20%, rgba(216, 180, 254, 0.3) 0%, transparent 75%) !important;
}

/* 7. 진눈깨비 (Sleet) */
html[data-theme="light"] .weather-bg-sleet::before {
    background-image:
        radial-gradient(ellipse 1.0px 8px  at 20% 30%, rgba(2, 132, 199, 0.35) 0%, transparent 100%),
        radial-gradient(ellipse 1.2px 11px at 70% 60%, rgba(3, 105, 161, 0.40) 0%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.80 !important;
}

html[data-theme="light"] .weather-bg-sleet::after {
    background-image:
        radial-gradient(circle 2.4px at 30% 15%, rgba(56, 189, 248, 0.55) 0%, rgba(14, 116, 144, 0.25) 70%, transparent 100%),
        radial-gradient(circle 3.4px at 80% 65%, rgba(14, 116, 144, 0.45) 0%, rgba(56, 189, 248, 0.2) 80%, transparent 100%) !important;
    filter: none !important;
    opacity: 0.80 !important;
}

/* 8. 곧 비 (Pre-rain Cloud) */
html[data-theme="light"] .weather-bg-prerain::after {
    opacity: 0.85 !important;
    filter: drop-shadow(0 1px 2px rgba(71, 85, 105, 0.25)) !important;
}

@media (max-width: 599px) {
    .hero-peak {
        font-size: 0.82rem !important;
        letter-spacing: -0.3px !important;
    }
}

/* ── 5-1. Ranking, Admin Tabs, Rider Lists & Mission Explorer ─────── */
html[data-theme="light"] .rider-item {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .r-name {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .r-rank {
    color: #475569 !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .r-done {
    color: #0284c7 !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .r-rej {
    color: #64748b !important;
}
html[data-theme="light"] .st-offline {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .st-online {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .st-idle {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .rank-val {
    color: #d97706 !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .admin-summary-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .admin-summary-row {
    color: #0f172a !important;
}
html[data-theme="light"] .admin-summary-row span:first-child {
    color: #475569 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .admin-summary-row span:last-child {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .admin-summary-divider {
    background: #e2e8f0 !important;
}
html[data-theme="light"] button[onclick*="setDailySort"],
html[data-theme="light"] button[onclick*="setWeeklySort"],
html[data-theme="light"] #btn-daily-sort-done,
html[data-theme="light"] #btn-daily-sort-rej,
html[data-theme="light"] #btn-daily-sort-offline,
html[data-theme="light"] #btn-weekly-sort-done,
html[data-theme="light"] #btn-weekly-sort-rej {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}
html[data-theme="light"] button[onclick*="setDailySort('done')"][style*="var(--neon-blue)"],
html[data-theme="light"] button[onclick*="setDailySort('done')"][style*="rgba(0,240,255"],
html[data-theme="light"] button[onclick*="setWeeklySort('done')"][style*="var(--neon-blue)"],
html[data-theme="light"] button[onclick*="setWeeklySort('done')"][style*="rgba(0,240,255"],
html[data-theme="light"] #btn-daily-sort-done[style*="var(--neon-blue)"],
html[data-theme="light"] #btn-daily-sort-done[style*="rgba(0,240,255"],
html[data-theme="light"] #btn-weekly-sort-done[style*="var(--neon-blue)"],
html[data-theme="light"] #btn-weekly-sort-done[style*="rgba(0,240,255"] {
    background: #e0f2fe !important;
    border: 1px solid #0284c7 !important;
    color: #0284c7 !important;
}
html[data-theme="light"] button[onclick*="setDailySort('rej')"][style*="var(--neon-red)"],
html[data-theme="light"] button[onclick*="setDailySort('rej')"][style*="rgba(239,68,68"],
html[data-theme="light"] button[onclick*="setWeeklySort('rej')"][style*="var(--neon-red)"],
html[data-theme="light"] button[onclick*="setWeeklySort('rej')"][style*="rgba(239,68,68"],
html[data-theme="light"] #btn-daily-sort-rej[style*="var(--neon-red)"],
html[data-theme="light"] #btn-daily-sort-rej[style*="rgba(239,68,68"],
html[data-theme="light"] #btn-weekly-sort-rej[style*="var(--neon-red)"],
html[data-theme="light"] #btn-weekly-sort-rej[style*="rgba(239,68,68"] {
    background: #fee2e2 !important;
    border: 1px solid #dc2626 !important;
    color: #dc2626 !important;
}
html[data-theme="light"] button[onclick*="setDailySort('offline')"][style*="var(--neon-gold)"],
html[data-theme="light"] button[onclick*="setDailySort('offline')"][style*="rgba(245,158,11"],
html[data-theme="light"] #btn-daily-sort-offline[style*="var(--neon-gold)"],
html[data-theme="light"] #btn-daily-sort-offline[style*="rgba(245,158,11"] {
    background: #fef3c7 !important;
    border: 1px solid #d97706 !important;
    color: #b45309 !important;
}

/* 기사 서브 뱃지 (거절률 및 상태) 라이트 모드 선명화 */
html[data-theme="light"] .r-sub .r-status {
    font-weight: 800 !important;
}
html[data-theme="light"] .r-sub .r-status[style*="rgba(16,185,129"],
html[data-theme="light"] .r-sub .r-status[style*="var(--neon-green)"],
html[data-theme="light"] .r-sub .r-status[style*="#27272a"],
html[data-theme="light"] .r-sub .r-status[style*="var(--text-sub)"] {
    color: #047857 !important;
    background: #d1fae5 !important;
    border: 1px solid #a7f3d0 !important;
}
html[data-theme="light"] .r-sub .r-status[style*="rgba(245,158,11"],
html[data-theme="light"] .r-sub .r-status[style*="var(--neon-gold)"] {
    color: #b45309 !important;
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
}
html[data-theme="light"] .r-sub .r-status[style*="rgba(255,77,77"],
html[data-theme="light"] .r-sub .r-status[style*="#ff4d4d"] {
    color: #e11d48 !important;
    background: #ffe4e6 !important;
    border: 1px solid #fecdd3 !important;
}
html[data-theme="light"] .r-sub .r-status[style*="rgba(239,68,68"],
html[data-theme="light"] .r-sub .r-status[style*="var(--neon-red)"] {
    color: #dc2626 !important;
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
}

/* 미션 성공 뱃지 */
.m-success-badge {
    color: #000;
    background: #00f0ff;
    border: 1px solid #00f0ff;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
    font-weight: 900;
    border-radius: 5px;
    padding: 2px 7px;
}
html[data-theme="light"] .m-title span[style*="var(--neon-blue)"],
html[data-theme="light"] .m-title span[style*="color:#000"],
html[data-theme="light"] .mini-mission-card span[style*="var(--neon-blue)"],
html[data-theme="light"] .m-success-badge {
    color: #047857 !important;
    background: #ecfdf5 !important;
    border: 1.5px solid #059669 !important;
    font-weight: 900 !important;
    border-radius: 5px !important;
    padding: 2px 7px !important;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.1) !important;
}

/* 관리자 미션 & 종료미션 탐색기 */
html[data-theme="light"] .mission-item,
html[data-theme="light"] #mission-history-list > div,
html[data-theme="light"] #mission-list-ongoing > div,
html[data-theme="light"] #mission-list-upcoming > div {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .m-title {
    color: #0284c7 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .m-price {
    color: #d97706 !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .btn-mission-copy {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}
html[data-theme="light"] #m-nav-bar {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] #m-nav-bar button {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] #m-nav-bar div {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

/* ── 5-2. Rider Self-Lookup (개인실적 확인 화면) ──────────────────── */
html[data-theme="light"] #sl-overlay {
    background: #f8fafc !important;
}
html[data-theme="light"] #sl-overlay .peak-card.mega-active {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 4.5px solid #059669 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] #sl-overlay .peak-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] #sl-overlay .peak-detail {
    color: #475569 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] #sl-overlay .mini-mission-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] #sl-gate input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* ── 6. Master Room (master.html) ───────────────────────────────────── */
html[data-theme="light"] .gate-body--master {
    background: #f4f6f9 !important;
}
html[data-theme="light"] .master-page-title {
    background: linear-gradient(135deg, #0f172a 0%, #b45309 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] .me-strip {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .me-meta {
    color: #475569 !important;
}
html[data-theme="light"] .user-card,
html[data-theme="light"] .ledger-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .drawer-panel {
    background: #ffffff !important;
    border-left: 1px solid #cbd5e1 !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .drawer-header {
    border-bottom: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .drawer-header h2 {
    color: #0f172a !important;
}
html[data-theme="light"] .drawer-close {
    color: #64748b !important;
}
html[data-theme="light"] .drawer-close:hover {
    color: #0f172a !important;
}
html[data-theme="light"] .drawer-meta-block {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .drawer-meta-sub {
    color: #64748b !important;
}
html[data-theme="light"] .drawer-usage-cell {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .drawer-usage-label {
    color: #64748b !important;
}
html[data-theme="light"] .drawer-price-row {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .drawer-price-total {
    color: #0f172a !important;
}
html[data-theme="light"] .drawer-price-breakdown {
    color: #475569 !important;
}

/* ── 7. Modals & Overlays ───────────────────────────────────────────── */
html[data-theme="light"] .nx-patchnote-modal,
html[data-theme="light"] .kakao-modal,
html[data-theme="light"] .setcount-modal,
html[data-theme="light"] .tos-container {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .nx-patchnote-head,
html[data-theme="light"] .tos-header {
    border-bottom: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .nx-patchnote-head h3,
html[data-theme="light"] .tos-title {
    color: #0f172a !important;
}
html[data-theme="light"] .nx-patchnote-close {
    color: #64748b !important;
}
html[data-theme="light"] .nx-patchnote-title {
    color: #0f172a !important;
}
html[data-theme="light"] .nx-patchnote-items li {
    color: #334155 !important;
}
html[data-theme="light"] .tos-body {
    color: #334155 !important;
}
html[data-theme="light"] .tos-section {
    color: #475569 !important;
}
html[data-theme="light"] .tos-sec-title {
    color: #0284c7 !important;
}
html[data-theme="light"] .tos-footer {
    border-top: 1px solid #cbd5e1 !important;
}

/* ── 8. Neon Glass Theme Toggle Component ───────────────────────────── */
.nx-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 48px;
    height: 26px;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    outline: none;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    box-sizing: border-box;
}
.nx-theme-toggle:hover {
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
}
.nx-theme-toggle:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 2px;
}

.nx-theme-toggle__track {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.nx-theme-toggle__thumb {
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface-2, #17181c);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 6px rgba(56, 189, 248, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.nx-theme-toggle__icon {
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.25s ease;
}

/* Dark mode (default): Moon icon visible, slider at left */
.nx-theme-toggle__icon--sun {
    display: none;
}
.nx-theme-toggle__icon--moon {
    display: inline-block;
    filter: drop-shadow(0 0 2px rgba(34, 211, 238, 0.8));
}

/* Light mode: Slider moves to right, Sun icon active */
html[data-theme="light"] .nx-theme-toggle {
    background: #e2e8f0;
    border-color: #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .nx-theme-toggle:hover {
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}
html[data-theme="light"] .nx-theme-toggle__thumb {
    transform: translateY(-50%) translateX(22px);
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15), 0 0 8px rgba(245, 158, 11, 0.4);
}
html[data-theme="light"] .nx-theme-toggle__icon--moon {
    display: none;
}
html[data-theme="light"] .nx-theme-toggle__icon--sun {
    display: inline-block;
    filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.8));
}

@media (max-width: 600px) {
    .nx-theme-toggle {
        width: 42px;
        height: 22px;
    }
    .nx-theme-toggle__thumb {
        width: 16px;
        height: 16px;
    }
    html[data-theme="light"] .nx-theme-toggle__thumb {
        transform: translateY(-50%) translateX(19px);
    }
    .nx-theme-toggle__icon {
        font-size: 9.5px;
    }
}

/* ── 8. Legal Pages (Terms & Privacy) ────────────────────────────────── */
html[data-theme="light"] body:has(.legal-wrap),
html[data-theme="light"] .legal-wrap {
    background: #f8fafc !important;
    color: #0f172a !important;
}
html[data-theme="light"] .legal-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .legal-nav .logo {
    background: linear-gradient(135deg, #0f172a, #0284c7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] .legal-wrap h1 {
    color: #0f172a !important;
}
html[data-theme="light"] .legal-wrap h2 {
    color: #0f172a !important;
    border-left-color: #0284c7 !important;
}
html[data-theme="light"] .legal-wrap p,
html[data-theme="light"] .legal-wrap li {
    color: #1e293b !important;
}
html[data-theme="light"] .legal-meta {
    color: #64748b !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] .legal-table th {
    background: #f1f5f9 !important;
    color: #0284c7 !important;
    border-color: #cbd5e1 !important;
}
html[data-theme="light"] .legal-table td {
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
html[data-theme="light"] .legal-note {
    background: #f5f3ff !important;
    border-color: #ddd6fe !important;
    color: #4338ca !important;
}
html[data-theme="light"] .legal-back {
    color: #475569 !important;
}
html[data-theme="light"] .legal-back:hover {
    color: #0284c7 !important;
}

/* ── 9. Marketing Landing Page (neonixops.com) ────────────────────────── */
html[data-theme="light"] body {
    background: #f8fafc !important;
    color: #0f172a !important;
}
html[data-theme="light"] .hd {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .hd-logo {
    color: #0f172a !important;
}
html[data-theme="light"] .hd-nav a,
html[data-theme="light"] .hd-tel {
    color: #475569 !important;
}
html[data-theme="light"] .hd-nav a:hover,
html[data-theme="light"] .hd-tel:hover {
    color: #0284c7 !important;
}
html[data-theme="light"] .hd-burger i {
    background: #0f172a !important;
}
html[data-theme="light"] .hd-drawer {
    background: #ffffff !important;
    border-top: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .hd-drawer a {
    color: #0f172a !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 히어로 */
html[data-theme="light"] .hero h1 {
    color: #0f172a !important;
}
html[data-theme="light"] .hero h1 .g {
    color: #0284c7 !important;
}
html[data-theme="light"] .hero-sub {
    color: #334155 !important;
}
html[data-theme="light"] .hero-sub b {
    color: #0f172a !important;
}
html[data-theme="light"] .hero-note {
    color: #64748b !important;
}
html[data-theme="light"] .hero-note b {
    color: #059669 !important;
}
html[data-theme="light"] .badge {
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
    color: #0369a1 !important;
}
html[data-theme="light"] .badge .dot {
    background: #0284c7 !important;
    box-shadow: 0 0 6px rgba(2, 132, 199, 0.4) !important;
}

/* 버튼 */
html[data-theme="light"] .btn--primary {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
}
html[data-theme="light"] .btn--ghost {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .btn--ghost:hover {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    background: #f0f9ff !important;
}

/* 3-up 가치 제안 카드 */
html[data-theme="light"] .value {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .value .ico {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}
html[data-theme="light"] .value h4 {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .value p {
    color: #334155 !important;
}

/* 기능 투어 섹션 */
html[data-theme="light"] .sec-head h2 {
    color: #0f172a !important;
}
html[data-theme="light"] .sec-head p {
    color: #475569 !important;
}
html[data-theme="light"] .show-tabs {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .show-tabs button {
    color: #475569 !important;
}
html[data-theme="light"] .show-tabs button.on {
    color: #0284c7 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .show-tabs .ink {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light"] .feat-h {
    color: #0f172a !important;
}
html[data-theme="light"] .feat-p {
    color: #334155 !important;
}
html[data-theme="light"] .feat-p b {
    color: #0f172a !important;
}
html[data-theme="light"] .feat-li {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
html[data-theme="light"] .feat-li b {
    color: #0f172a !important;
}
html[data-theme="light"] .feat-li span {
    color: #475569 !important;
}

/* 달라지는 점 카드 */
html[data-theme="light"] .swap-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .swap-card:hover {
    border-color: #0284c7 !important;
}
html[data-theme="light"] .swap-old {
    color: #64748b !important;
}
html[data-theme="light"] .swap-old .tag {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}
html[data-theme="light"] .swap-line {
    background: #e2e8f0 !important;
}
html[data-theme="light"] .swap-new {
    color: #0f172a !important;
}
html[data-theme="light"] .swap-new .tick {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.3) !important;
}

/* 요금 카드 */
html[data-theme="light"] .price-box {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .price-box--feature {
    border-color: #0284c7 !important;
    background: linear-gradient(180deg, #f0f9ff, #ffffff) !important;
}
html[data-theme="light"] .plan-name {
    color: #475569 !important;
}
html[data-theme="light"] .plan-amt {
    color: #0f172a !important;
}
html[data-theme="light"] .plan-desc {
    color: #334155 !important;
}
html[data-theme="light"] .plan-addon {
    color: #0284c7 !important;
}
html[data-theme="light"] .plan-trial {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #059669 !important;
}
html[data-theme="light"] .price-foot {
    color: #475569 !important;
}

/* 도입 절차 */
html[data-theme="light"] .step {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .step .n {
    background: #0284c7 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .step strong {
    color: #0f172a !important;
}
html[data-theme="light"] .step p {
    color: #334155 !important;
}
html[data-theme="light"] .steps-foot {
    color: #475569 !important;
}

/* 푸터 */
html[data-theme="light"] footer {
    background: #f1f5f9 !important;
    border-top: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .foot-brand {
    color: #0f172a !important;
}
html[data-theme="light"] .foot-desc {
    color: #475569 !important;
}
html[data-theme="light"] .foot-links a {
    color: #0f172a !important;
}
html[data-theme="light"] .foot-links a:hover {
    color: #0284c7 !important;
}
html[data-theme="light"] .foot-contact {
    color: #64748b !important;
}
html[data-theme="light"] .foot-copy {
    color: #94a3b8 !important;
}

/* [배민]/[쿠팡] 플랫폼 배지 — 라이트모드 가독성 (2026-08-26).
   배지는 글자 #0a0e14(거의 검정) + 배경 var(--neon-blue) 인데, 라이트에서 그 변수가
   #2563eb(진한 파랑)로 바뀌어 **검정 글자가 안 보였다**. 한 색으로 양쪽을 못 맞추므로
   라이트에서만 글자를 흰색으로 뒤집는다. 인라인 스타일이라 속성 선택자로 잡는다
   (이 파일의 다른 오버라이드와 같은 방식). 템플릿 3곳이 같은 마크업을 쓴다. */
html[data-theme="light"] span[style*="color:#0a0e14"][style*="var(--neon-blue)"] {
    color: #ffffff !important;
    box-shadow: none !important;
}

/* 셀프조회 게이트 입력칸 — 포커스 링을 명시한다.
   ⛔ 안 주면 크롬의 기본 링이 나오는데, 다크 배경에선 주황으로 보여서
   파란 [확인] 버튼 바로 위에 엉뚟한 색이 하나 더 생긴다 (2026-09-01 실측).
   이 줄은 dashboard.html · baemin_dashboard.html 이 같이 쓴다. */
.sl-gate-input:focus {
    outline: none;
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 225, 255, 0.14);
}

/* ── 9. Header Notification Bell & Dropdown (Q2. A) ───────────────────────── */
.nx-noti-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nx-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--surface-1, #131418);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-sub, #94a3b8);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.nx-bell-btn:hover {
    background: var(--surface-2, #1c1d22);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-main, #f8fafc);
}

.nx-bell-btn:active {
    transform: scale(0.96);
}

.nx-bell-icon {
    width: 17px;
    height: 17px;
}

.nx-bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface-0, #0a0e16);
    pointer-events: none;
}

/* Notification Dropdown Panel */
.nx-noti-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: var(--surface-1, #131418);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
    animation: nxNotiFadeIn 0.15s ease-out;
}

@keyframes nxNotiFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.nx-noti-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--surface-2, #18191e);
}

.nx-noti-title {
    font-size: var(--fs-xs, 12px);
    font-weight: 800;
    color: var(--text-main, #f8fafc);
}

.nx-noti-read-all {
    background: transparent;
    border: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--neon-cyan, #06b6d4);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}
.nx-noti-read-all:hover {
    text-decoration: underline;
}

.nx-noti-body {
    max-height: 380px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nx-noti-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: var(--fs-2xs, 11px);
    color: var(--text-sub, #64748b);
    font-weight: 600;
}

.nx-noti-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.12s ease;
}

.nx-noti-item:last-child {
    border-bottom: none;
}

.nx-noti-item:hover {
    background: var(--surface-2, #1a1b20);
}

.nx-noti-item.is-unread {
    background: rgba(6, 182, 212, 0.04);
}

.nx-noti-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.nx-noti-dot--danger { background: #ef4444; }
.nx-noti-dot--warn { background: #f59e0b; }
.nx-noti-dot--info { background: #06b6d4; }

.nx-noti-content {
    flex: 1;
    min-width: 0;
}

.nx-noti-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}

.nx-noti-item-title {
    font-size: var(--fs-2xs, 11px);
    font-weight: 800;
    color: var(--text-main, #f8fafc);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nx-noti-item-time {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-sub, #64748b);
    flex-shrink: 0;
}

.nx-noti-item-msg {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-sub, #94a3b8);
    line-height: 1.35;
    word-break: break-word;
}

/* Light mode overrides */
html[data-theme="light"] .nx-bell-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .nx-bell-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}
html[data-theme="light"] .nx-bell-badge {
    box-shadow: 0 0 0 2px #ffffff;
}
html[data-theme="light"] .nx-noti-dropdown {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .nx-noti-header {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}
html[data-theme="light"] .nx-noti-title {
    color: #0f172a;
}
html[data-theme="light"] .nx-noti-read-all {
    color: #0284c7;
}
html[data-theme="light"] .nx-noti-item {
    border-bottom-color: #f1f5f9;
}
html[data-theme="light"] .nx-noti-item:hover {
    background: #f8fafc;
}
html[data-theme="light"] .nx-noti-item.is-unread {
    background: #f0f9ff;
}
html[data-theme="light"] .nx-noti-item-title {
    color: #0f172a;
}
html[data-theme="light"] .nx-noti-item-msg {
    color: #475569;
}