:root {
    /* Neon Palette (Single Source of Truth) */
    --neon-cyan: #00E5FF;
    --neon-purple: #7C3AED;
    --neon-pink: #FF0055;
    --neon-gold: #D4AF37;
}

/* custom scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #121317;
}

::-webkit-scrollbar-thumb {
    background: #3b494b;
}

::-webkit-scrollbar-thumb:hover {
    background: #00dbe9;
}

/* Decryption Micro-interactions */
.card-decrypt-out {
    animation: decryptOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.card-decrypt-in {
    animation: decryptIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes decryptOut {
    0% {
        transform: scale(1);
        filter: blur(0px) brightness(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.92);
        filter: blur(8px) brightness(1.8);
        opacity: 0;
    }
}

@keyframes decryptIn {
    0% {
        transform: scale(0.92);
        filter: blur(8px) brightness(1.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.04);
        filter: blur(2px) brightness(1.2);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        filter: blur(0px) brightness(1);
        opacity: 1;
    }
}

/* Material Symbols Adjustments */
.material-symbols-outlined {
    font-variation-settings: 'wght' 200, 'opsz' 24;
}

/* Ambient & Grid Backgrounds */
body {
    background-color: #000000;
    /* Pure black background */
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
    color: #e3e2e8;
}

.ambient-glow {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 77, 64, 0.05) 0%, transparent 80%);
    pointer-events: none;
    z-index: -2;
}

.grid-bg {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
}

.hud-grid {
    background-image:
        linear-gradient(to right, rgba(0, 219, 233, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 219, 233, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.geo-pattern {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 141px 141px, 141px 141px;
}

/* Glassmorphism Panels */
.glass-panel {
    background-color: rgba(18, 19, 23, 0.15);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.glass-card {
    background-color: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 255, 102, 0.15);
    border-radius: 12px;
}

.glass-card-elevated {
    background: rgba(18, 19, 23, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 219, 233, 0.3);
    box-shadow: 0 0 15px rgba(0, 219, 233, 0.1);
}

.glass-panel-luxury {
    background: rgba(30, 15, 25, 0.5);
    /* Deep Burgundy/Purple glassmorphism */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 80, 110, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(120, 20, 50, 0.3);
}

/* Z-Axis Edge Highlights */
.z-edge-highlight {
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Neon Borders & Glows */
.neon-border {
    border-right: 1px solid #00dbe9;
    border-bottom: 1px solid #00dbe9;
    box-shadow: 0 0 4px #00dbe9, inset 0 0 4px #00dbe9;
}

.neon-border-pink {
    border-right: 1px solid #ff506e;
    border-bottom: 1px solid #ff506e;
    box-shadow: 0 0 4px #ff506e, inset 0 0 4px #ff506e;
}

.neon-danger {
    color: #FF0055;
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.7);
}

.neon-stable {
    color: #00E5FF;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
}

.text-glow-cyan {
    text-shadow: 0 0 10px rgba(0, 219, 233, 0.7);
}

.text-glow-pink {
    text-shadow: 0 0 10px rgba(255, 80, 110, 0.7);
}

.luxury-text-glow {
    text-shadow: 0 0 15px #ff506e;
    color: #ffffff;
}

/* Cyber Button */
.cyber-btn {
    background: transparent;
    border: 1px solid #00E5FF;
    color: #E0E0E0;
    transition: all 0.3s ease;
}

.cyber-btn:hover {
    background-color: #00E5FF;
    color: #0B0C10;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.7);
}

/* Scan Line Animations */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00dbe9;
    box-shadow: 0 0 10px #00dbe9;
    animation: scan 2s linear infinite;
    opacity: 0;
}

.dropzone:hover .scan-line {
    opacity: 1;
}

@keyframes scan {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-slow-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes pulse-border {

    0%,
    100% {
        border-color: rgba(255, 180, 171, 0.2);
        box-shadow: 0 0 10px rgba(255, 180, 171, 0.1);
    }

    50% {
        border-color: rgba(255, 180, 171, 0.8);
        box-shadow: 0 0 20px rgba(255, 180, 171, 0.4);
    }
}

/* Scanline animation for inputs/cards */
@keyframes scanline {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

.scan-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 219, 233, 0.2), transparent);
    animation: scanline 3s linear infinite;
    pointer-events: none;
    opacity: 0.5;
}

/* Premium Unlock Scanline */
@keyframes scanline-premium {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

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

.unlock-scan {
    position: relative;
    overflow: hidden;
}

.unlock-scan::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(to bottom, transparent, #ff506e, transparent);
    animation: scanline-premium 2.5s infinite linear;
    pointer-events: none;
}

/* Focus Input Line */
@keyframes input-scanline {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }

    50% {
        transform: scaleX(1);
        transform-origin: left;
    }

    50.1% {
        transform: scaleX(1);
        transform-origin: right;
    }

    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

.input-focus-line:focus-within::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #00f0ff;
    animation: input-scanline 1.5s infinite;
}

/* Transition classes */
.page-transition {
    animation: page-fade-in 0.3s ease-out forwards;
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* Glitch classes */
.glitch-active {
    animation: glitch-anim 0.3s infinite steps(2);
}

@keyframes glitch-anim {
    0% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }

    50% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg) contrast(1.2);
    }

    100% {
        transform: translate(2px, -2px);
        filter: hue-rotate(180deg);
    }
}

/* ============================================================
   NEXUS RADAR — Sweep, Nodes, Overlay
   ============================================================ */

/* Radar sweep beam — 6s rotation */
.radar-sweep {
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(0, 229, 255, 0.08) 15deg,
            rgba(0, 229, 255, 0.15) 25deg,
            rgba(0, 229, 255, 0.03) 40deg,
            transparent 50deg);
    animation: radarSweep 6s linear infinite;
}

@keyframes radarSweep {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Node base state */
.nexus-node {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nexus-node>div:first-child {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Node active state — selected */
.nexus-node-active {
    z-index: 25 !important;
}

.nexus-node-active>div:first-child {
    transform: scale(1.25);
    box-shadow: 0 0 25px var(--node-color, rgba(0, 229, 255, 0.5));
}

/* Node dimmed — not selected */
.nexus-node-dimmed {
    opacity: 0.25;
    pointer-events: none;
}

/* Node swept — sweep beam pass pulse */
.nexus-node-swept>div:first-child {
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.35);
    transform: scale(1.08);
}

/* Status bar mini-bar pulse */
.radar-bar-pulse {
    animation: barPulse 3s ease-in-out infinite alternate;
}

@keyframes barPulse {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
    }
}

/* ============================================================
   DUAL MODE — Glitch Transition System
   ============================================================ */

/* Mode switch glitch-out */
.mode-glitch-out {
    animation: modeGlitchOut 0.4s ease forwards;
}

@keyframes modeGlitchOut {
    0% {
        transform: translateY(0);
        opacity: 1;
        filter: none;
    }

    15% {
        transform: translate(-3px, 1px);
        filter: hue-rotate(90deg) saturate(2);
    }

    30% {
        transform: translate(3px, -2px);
        filter: hue-rotate(180deg) contrast(1.5);
    }

    50% {
        transform: translate(-1px, 3px);
        filter: invert(0.3) hue-rotate(270deg);
        opacity: 0.6;
    }

    70% {
        transform: translate(2px, -1px) scaleY(0.98);
        filter: hue-rotate(360deg);
        opacity: 0.3;
    }

    100% {
        transform: translateY(-10px) scaleY(0.95);
        opacity: 0;
        filter: blur(4px);
    }
}

/* Mode switch glitch-in */
.mode-glitch-in {
    animation: modeGlitchIn 0.6s ease forwards;
}

@keyframes modeGlitchIn {
    0% {
        transform: translateY(10px) scaleY(1.05);
        opacity: 0;
        filter: blur(4px) hue-rotate(180deg);
    }

    20% {
        transform: translate(-2px, 5px);
        opacity: 0.3;
        filter: hue-rotate(270deg) contrast(1.3);
    }

    40% {
        transform: translate(2px, 2px);
        opacity: 0.6;
        filter: hue-rotate(90deg);
    }

    60% {
        transform: translate(-1px, 0);
        opacity: 0.8;
        filter: hue-rotate(45deg);
    }

    80% {
        transform: translate(1px, 0);
        opacity: 0.95;
        filter: none;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: none;
    }
}

/* ============================================================
   NEXUS CORE — Breathing Pulse
   ============================================================ */
.nexus-core-pulse {
    animation: nexusPulse 3s ease-in-out infinite;
}

@keyframes nexusPulse {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(0, 229, 255, 0.2), 0 0 30px rgba(0, 229, 255, 0.1);
    }

    50% {
        box-shadow: 0 0 25px rgba(0, 229, 255, 0.4), 0 0 50px rgba(0, 229, 255, 0.2);
    }
}

/* ============================================================
   EMOTION QUESTION — Slide Animations
   ============================================================ */
.emotion-slide-in {
    animation: emotionSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes emotionSlideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* ============================================================
   PEEK PREVIEW — Scan Animation
   ============================================================ */
@keyframes peekScan {
    0% {
        transform: translateY(-100%);
    }

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

/* ============================================================
   NEMESIS — Warning Sequence Animations
   ============================================================ */
@keyframes nemFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes nemFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes nemBar {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes nemBtnShake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    50% {
        transform: translateX(2px);
    }

    75% {
        transform: translateX(-1px);
    }

    100% {
        transform: translateX(1px);
    }
}

.nemesis-stage {
    animation: nemStageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nemStageIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================
   SOCIAL TICKER — Slide Animation
   ============================================================ */
@keyframes tickerSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* ============================================================
   CARD COLLECTION — Shimmer Effect
   ============================================================ */
@keyframes cardShimmer {
    0% {
        background-position: -200% 0;
    }

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

.card-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    background-size: 200% 100%;
    animation: cardShimmer 2s infinite;
}

/* Vibe Glitch Synthesis Animations */
@keyframes vibe-glitch {
    0% {
        filter: hue-rotate(0deg) contrast(1);
        transform: translate(0);
    }

    10% {
        filter: hue-rotate(90deg) contrast(2) invert(0.2);
        transform: translate(-10px, 5px) scale(1.1);
    }

    20% {
        filter: hue-rotate(-90deg) contrast(3) invert(0);
        transform: translate(15px, -5px) scale(0.9) skewX(10deg);
    }

    30% {
        filter: hue-rotate(180deg) contrast(1.5) blur(2px);
        transform: translate(-5px, 10px) skewX(-15deg);
    }

    40% {
        filter: hue-rotate(45deg) contrast(2.5) invert(0.4);
        transform: translate(20px, -15px) scale(1.2);
    }

    50% {
        filter: hue-rotate(-45deg) contrast(1);
        transform: translate(-15px, 5px) skewY(5deg);
    }

    60% {
        filter: hue-rotate(135deg) contrast(3) invert(0.1);
        transform: translate(10px, 15px) scale(0.8);
    }

    70% {
        filter: hue-rotate(-135deg) contrast(1.5) blur(1px);
        transform: translate(-20px, -10px) skewY(-5deg);
    }

    80% {
        filter: hue-rotate(225deg) contrast(2) invert(0.3);
        transform: translate(5px, 5px) scale(1.1) skewX(20deg);
    }

    90% {
        filter: hue-rotate(-225deg) contrast(2.5);
        transform: translate(-10px, -15px) scale(0.9) skewX(-20deg);
    }

    100% {
        filter: hue-rotate(0deg) contrast(1);
        transform: translate(0);
    }
}

@keyframes flash-neon {

    0%,
    100% {
        box-shadow: inset 0 0 0 transparent;
        background-color: transparent;
    }

    25% {
        box-shadow: inset 0 0 100px #00FF00;
        background-color: rgba(0, 255, 0, 0.3);
    }

    50% {
        box-shadow: inset 0 0 100px #8A2BE2;
        background-color: rgba(138, 43, 226, 0.3);
    }

    75% {
        box-shadow: inset 0 0 100px #00FF00;
        background-color: rgba(0, 255, 0, 0.3);
    }
}

@keyframes glitch-horizontal {
    0% {
        clip-path: inset(10% 0 80% 0);
        transform: translateX(-5px);
    }

    20% {
        clip-path: inset(40% 0 20% 0);
        transform: translateX(5px);
    }

    40% {
        clip-path: inset(80% 0 5% 0);
        transform: translateX(-10px);
    }

    60% {
        clip-path: inset(20% 0 50% 0);
        transform: translateX(10px);
    }

    80% {
        clip-path: inset(60% 0 30% 0);
        transform: translateX(-5px);
    }

    100% {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
}

.vibe-glitch-active {
    animation: vibe-glitch 0.3s infinite, glitch-horizontal 0.15s infinite !important;
    mix-blend-mode: color-dodge;
    z-index: 50;
}

.portal-flash-active {
    animation: flash-neon 0.15s infinite !important;
}

@keyframes merge-left {
    0% {
        transform: translateX(0) scale(1);
    }

    100% {
        transform: translateX(110%) scale(1.2) rotate(15deg);
        opacity: 0;
        filter: blur(5px);
    }
}

@keyframes merge-right {
    0% {
        transform: translateX(0) scale(1);
    }

    100% {
        transform: translateX(-110%) scale(1.2) rotate(-15deg);
        opacity: 0;
        filter: blur(5px);
    }
}

.merge-center-left {
    animation: merge-left 1.5s cubic-bezier(0.8, 0, 0.2, 1) forwards !important;
}

.merge-center-right {
    animation: merge-right 1.5s cubic-bezier(0.8, 0, 0.2, 1) forwards !important;
}

/* Pulse Animation for Dropzone Placeholder */
@keyframes dropzone-pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

.dropzone-pulse {
    animation: dropzone-pulse 2s ease-in-out infinite !important;
}

/* Marquee Border Animations */
@keyframes marquee-offset {
    0% {
        stroke-dashoffset: 20;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.marquee-rect-cyan {
    stroke-dasharray: 8, 4;
    animation: marquee-offset 1.5s linear infinite;
    filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.8));
    transition: all 0.3s ease;
}

.marquee-rect-crimson {
    stroke-dasharray: 8, 4;
    animation: marquee-offset 1.5s linear infinite;
    filter: drop-shadow(0 0 3px rgba(255, 0, 85, 0.8));
    transition: all 0.3s ease;
}

.dropzone:hover .marquee-rect-cyan {
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 1));
    stroke-width: 2px;
}

.dropzone:hover .marquee-rect-crimson {
    filter: drop-shadow(0 0 6px rgba(255, 0, 85, 1));
    stroke-width: 2px;
}

/* Custom scrollbar for terminal text panels */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.3);
    border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.6);
}

/* High-end Web Optimization: BlurHash style skeleton gradient */
@keyframes skeleton-pulse {
    0% {
        background-position: 100% 50%;
    }

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

.skeleton-gradient {
    background: linear-gradient(90deg, rgba(20, 20, 25, 0.8) 25%, rgba(0, 229, 255, 0.1) 50%, rgba(20, 20, 25, 0.8) 75%);
    background-size: 400% 100%;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    position: relative;
    overflow: hidden;
}

.media-fade-in {
    transition: opacity 0.5s ease;
}

/* ⚡ CSS Glitch Hover */
.glitch-hover {
    position: relative;
    transition: all 0.2s;
}

.glitch-hover:hover {
    animation: neon-glitch 0.15s linear infinite;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.8), inset 0 0 10px rgba(0, 242, 254, 0.5);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(0, 242, 254, 0.8);
}

@keyframes neon-glitch {
    0% {
        transform: translate(0) skew(0deg);
        filter: hue-rotate(0deg);
    }

    20% {
        transform: translate(-2px, 1px) skew(-2deg);
        filter: hue-rotate(90deg);
    }

    40% {
        transform: translate(2px, -1px) skew(2deg);
        filter: hue-rotate(-90deg);
    }

    60% {
        transform: translate(-1px, 2px) skew(-1deg);
        filter: hue-rotate(45deg);
    }

    80% {
        transform: translate(1px, -2px) skew(1deg);
        filter: hue-rotate(-45deg);
    }

    100% {
        transform: translate(0) skew(0deg);
        filter: hue-rotate(0deg);
    }
}

/* 🔥 Overclock Screen Mode */
.overclock-mode::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    box-shadow: inset 0 0 50px rgba(255, 0, 50, 0.8), 0 0 20px rgba(255, 0, 50, 0.4);
    transition: all 0.2s ease-in-out;
}

.overclock-shake-active {
    animation: overclock-shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes overclock-shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* ================================================
   🌐 Global Layout Container Width Utilities
   일반 인터랙션 섹션: 1100–1200px
   대형 대시보드 / 결제 그리드: 1400–1440px
================================================ */
.max-w-container-max {
    max-width: 1200px;
}

.max-w-container-max-lg {
    max-width: 1440px;
}

/* ==========================================
   GNB 메인 탭 & 서브 토글 완벽 복원 스타일
   ========================================== */

/* 1. 상단 GNB 영역 내부 버튼 공통 알약 스타일 */
header button,
nav button,
.gnb-tab-btn,
/* ==========================================
   GNB 메인 탭 & 서브 토글 통합 스타일 (레이아웃 붕괴 방지 버전)
   ========================================== */

/* 1. GNB 메인 탭 공통 규격 (min-width를 제거하여 상단 헤더 겹침 방지) */
.gnb-tab-btn,
.po1,
.po2,
button[class*="po1"],
button[class*="po2"],
button[class*="dual"],
button[class*="solo"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    height: 36px !important;
    /* 헤더 높이에 맞게 조절 */
    padding: 0 16px !important;
    /* 패딩으로 자연스러운 여백 확보 */
    width: auto !important;
    /* 고정 너비 해제 (로고 겹침 방지) */
    min-width: unset !important;
    /* 강제 최소너비 삭제 */
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
}

/* DUAL (2P) 탭 - 활성화 */
.gnb-tab-btn.dual.active,
.gnb-tab-btn.dual.is-active,
.gnb-tab-btn.dual.on,
.gnb-tab-btn.dual[aria-selected="true"],
.po1.active,
.po1.is-active,
.po1.on,
.po1[aria-selected="true"],
button[class*="po1"].active,
button[class*="po1"].is-active,
button[class*="po1"].on,
button[class*="dual"].active,
button[class*="dual"].is-active,
button[class*="dual"].on {
    background-color: #008ba3 !important;
    color: #ffffff !important;
    border: 1px solid #00e5ff !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.7) !important;
}

/* DUAL (2P) 탭 - 비활성화 */
.gnb-tab-btn.dual:not(.active):not(.is-active):not(.on):not([aria-selected="true"]),
.po1:not(.active):not(.is-active):not(.on):not([aria-selected="true"]),
button[class*="po1"]:not(.active):not(.is-active):not(.on),
button[class*="dual"]:not(.active):not(.is-active):not(.on) {
    background: rgba(0, 60, 75, 0.35) !important;
    color: #80e2ec !important;
    border: 1px solid #005f73 !important;
    box-shadow: none !important;
}

/* SOLO (1P SCAN) 탭 - 활성화 */
.gnb-tab-btn.solo.active,
.gnb-tab-btn.solo.is-active,
.gnb-tab-btn.solo.on,
.gnb-tab-btn.solo[aria-selected="true"],
.po2.active,
.po2.is-active,
.po2.on,
.po2[aria-selected="true"],
button[class*="po2"].active,
button[class*="po2"].is-active,
button[class*="po2"].on,
button[class*="solo"].active,
button[class*="solo"].is-active,
button[class*="solo"].on {
    background-color: #7c3aed !important;
    color: #ffffff !important;
    border: 1px solid #a78bfa !important;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.7) !important;
}

/* SOLO (1P SCAN) 탭 - 비활성화 */
.gnb-tab-btn.solo:not(.active):not(.is-active):not(.on):not([aria-selected="true"]),
.po2:not(.active):not(.is-active):not(.on):not([aria-selected="true"]),
button[class*="po2"]:not(.active):not(.is-active):not(.on),
button[class*="solo"]:not(.active):not(.is-active):not(.on) {
    background: rgba(76, 29, 149, 0.25) !important;
    color: #c4b5fd !important;
    border: 1px solid #4c1d95 !important;
    box-shadow: none !important;
}

/* 2. 하단 서브 토글 바 전체 감싸는 오버레이 */
.gnb-sub-toggle,
.po-sub-wrapper,
div:has(> .po3),
div:has(> .po5) {
    display: inline-flex !important;
    align-items: center !important;
    background: #090d12 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50px !important;
    padding: 3px 8px !important;
    gap: 4px !important;
}

/* 하단 서브 토글 내부 버튼 기본 규격 */
.po3,
.po4,
.po5,
.gnb-sub-toggle button,
.po-sub-wrapper button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #8b949e !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.25s ease !important;
}

/* CLASSIC 활성화 */
.po3.active,
.po3.is-active,
.po3.on,
.po3[aria-selected="true"],
.po4.active,
.po4.is-active,
.po4.on,
.po4[aria-selected="true"],
.gnb-sub-toggle .classic.active,
.gnb-sub-toggle .classic.is-active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
}

/* MATRIX 활성화 */
.po5.active,
.po5.is-active,
.po5.on,
.po5[aria-selected="true"],
.gnb-sub-toggle .matrix.active,
.gnb-sub-toggle .matrix.is-active {
    color: #ff2a85 !important;
    background: rgba(255, 42, 133, 0.2) !important;
    border: 1px solid #ff2a85 !important;
    box-shadow: 0 0 10px rgba(255, 42, 133, 0.6) !important;
}

/* ==========================================
   [최종] CSS 우선순위 강제 적용 (GNB & 서브토글)
   ========================================== */

/* 1. DUAL (2P) 활성화 - 최상위 명시도 선언 */
html body button.gnb-mode-btn[data-gnb-mode="dual"].gnb-mode-btn--active-dual,
html body button.gnb-mode-btn[data-gnb-mode="dual"].active,
html body button.gnb-mode-btn[data-gnb-mode="dual"].is-active,
html body button.gnb-mode-btn[data-gnb-mode="dual"].on {
    background: #008ba3 !important;
    background-color: #008ba3 !important;
    color: #ffffff !important;
    border: 1px solid #00e5ff !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.8) !important;
}

/* 2. SOLO (1P SCAN) 활성화 - 최상위 명시도 선언 */
html body button.gnb-mode-btn[data-gnb-mode="solo"].gnb-mode-btn--active-solo,
html body button.gnb-mode-btn[data-gnb-mode="solo"].active,
html body button.gnb-mode-btn[data-gnb-mode="solo"].is-active,
html body button.gnb-mode-btn[data-gnb-mode="solo"].on {
    background: #7c3aed !important;
    background-color: #7c3aed !important;
    color: #ffffff !important;
    border: 1px solid #a78bfa !important;
    box-shadow: 0 0 14px rgba(124, 58, 237, 0.8) !important;
}

/* 3. CLASSIC 서브 토글 활성화 */
html body #unscrolled-submode-toggle button.active,
html body #unscrolled-submode-toggle button.is-active,
html body #unscrolled-submode-toggle button.on {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

/* 4. MATRIX 서브 토글 활성화 */
html body #unscrolled-submode-toggle button.matrix-active,
html body #unscrolled-submode-toggle button[data-submode="matrix"].active,
html body #unscrolled-submode-toggle button[data-submode="matrix"].is-active {
    color: #ff2a85 !important;
    background: rgba(255, 42, 133, 0.25) !important;
    border: 1px solid #ff2a85 !important;
    box-shadow: 0 0 12px rgba(255, 42, 133, 0.7) !important;
}