:root{--bg-deep-space: #F8FAFC;--bg-surface: #FFFFFF;--bg-elevated: #F1F5F9;--text-primary: #0F172A;--text-secondary: #475569;--border-color: rgba(15, 23, 42, .1);--wood: #16A34A;--wood-muted: #4F46E5;--fire: #DC2626;--earth: #CA8A04;--metal: #64748B;--water: #1E3A5F;--bg-wood: #D1FAE5;--border-wood: #16A34A;--bg-fire: #FEE2E2;--border-fire: #DC2626;--bg-earth: #FEF3C7;--border-earth: #CA8A04;--bg-metal: #F1F5F9;--border-metal: #94A3B8;--bg-water: #0F172A;--border-water: #1E293B;--sys-primary: #5B21B6;--sys-secondary: #0369A1;--sys-positive: #7C3AED;--sys-negative: #EA580C;--sys-neutral: #64748B;--sys-on-surface: var(--text-primary);--sys-on-surface-variant: var(--text-secondary);--color-success: #10B981;--color-warning: #F59E0B;--color-info: #3B82F6;--color-danger: #EF4444;--color-samhap: #9C27B0;--color-banghap: #00796B;--color-yukhap: #1976D2;--color-chung: #C2185B;--water-dot-border: transparent;--glow-sys-primary: 0 0 10px rgba(98, 0, 234, .2);--glow-sys-positive: 0 0 10px rgba(171, 71, 188, .2);--glow-sys-negative: 0 0 10px rgba(255, 112, 67, .2);--glow-wood: 0 0 10px rgba(34, 197, 94, .2);--glow-metal: 0 0 10px rgba(148, 163, 184, .2);--shadow-sm: 0 2px 4px rgba(15, 23, 42, .05);--shadow-md: 0 4px 8px rgba(15, 23, 42, .1);--font-mono: "JetBrains Mono", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--glass-bg: rgba(255, 255, 255, .45);--glass-border: rgba(15, 23, 42, .08);--glass-blur: blur(12px);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .06);--bg-gradient: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);--theme-transition: background-color .4s cubic-bezier(.4, 0, .2, 1), color .3s ease, border-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;--z-base: 1;--z-bottom-sheet-collapsed: 1200;--z-bottom-nav: 1500;--z-drawer: 2000;--z-bottom-sheet-expanded: 2500;--z-backdrop: 3000;--z-modal: 5000;--z-fab: 6000;--z-overlay: 9000;--z-toast: 10000}[data-theme=dark]{--bg-deep-space: #080C12;--bg-surface: #0F172A;--bg-elevated: #1E293B;--text-primary: #F8FAFC;--text-secondary: #94A3B8;--border-color: rgba(148, 163, 184, .12);--wood: #4ADE80;--fire: #F87171;--earth: #FCD34D;--metal: #E2E8F0;--water: #60A5FA;--wood-muted: #818CF8;--water-dot-border: rgba(148, 163, 184, .12);--color-samhap: #C084FC;--color-banghap: #34D399;--color-yukhap: #60A5FA;--color-chung: #FB7185;--sys-primary: #818CF8;--sys-secondary: #38BDF8;--sys-on-surface: var(--text-primary);--sys-on-surface-variant: var(--text-secondary);--color-success: #34D399;--color-warning: #FCD34D;--color-info: #60A5FA;--color-danger: #F87171;--bg-wood: #052e16;--border-wood: #16A34A;--bg-fire: #450a0a;--border-fire: #DC2626;--bg-earth: #431407;--border-earth: #D97706;--bg-metal: #1e293b;--border-metal: #94A3B8;--bg-water: #020617;--border-water: #1E293B;--glow-sys-primary: 0 0 16px rgba(129, 140, 248, .45);--glow-sys-positive: 0 0 16px rgba(192, 132, 252, .4);--glow-sys-negative: 0 0 16px rgba(248, 113, 113, .4);--glow-wood: 0 0 16px rgba(74, 222, 128, .35);--glow-fire: 0 0 16px rgba(248, 113, 113, .35);--glow-earth: 0 0 16px rgba(252, 211, 77, .35);--glow-metal: 0 0 16px rgba(226, 232, 240, .3);--glow-water: 0 0 16px rgba(96, 165, 250, .4);--shadow-sm: 0 2px 6px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--glass-bg: rgba(15, 23, 42, .4);--glass-border: rgba(255, 255, 255, .07);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .5);--bg-gradient: linear-gradient(160deg, #060912 0%, #0d1120 50%, #080e1a 100%)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;overflow-x:hidden}body{font-family:var(--font-mono);background-color:var(--bg-deep-space);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}#app{width:100%;max-width:1440px;margin:0 auto;padding:var(--space-sm);padding-top:calc(var(--space-sm) + env(safe-area-inset-top));padding-left:calc(var(--space-sm) + env(safe-area-inset-left));padding-right:calc(var(--space-sm) + env(safe-area-inset-right));padding-bottom:calc(var(--space-sm) + env(safe-area-inset-bottom));position:relative}@media (min-width: 768px){#app{padding:var(--space-md);padding-top:calc(var(--space-md) + env(safe-area-inset-top))}}body.is-mobile #app{padding-bottom:80px!important}