:root{--ui-primary: #2563eb;--ui-primary-hover: #1d4ed8;--ui-primary-soft: #eff6ff;--ui-primary-border: #bfdbfe;--ui-secondary: #f6c344;--ui-secondary-hover: #eab731;--ui-secondary-ink: #422006;--ui-accent: #c2410c;--ui-accent-hover: #9a3412;--ui-page: #f8fafc;--ui-page-warm: #fffdf7;--ui-surface: #ffffff;--ui-surface-muted: #f1f5f9;--ui-surface-raised: #ffffff;--ui-ink: #0f172a;--ui-ink-strong: #1e293b;--ui-ink-muted: #64748b;--ui-ink-subtle: #94a3b8;--ui-border: #e2e8f0;--ui-border-strong: #cbd5e1;--ui-success: #15803d;--ui-success-soft: #f0fdf4;--ui-warning: #b45309;--ui-warning-soft: #fff7ed;--ui-danger: #b91c1c;--ui-danger-hover: #991b1b;--ui-danger-soft: #fef2f2;--ui-font-sans: "Noto Sans KR", "Pretendard", "Inter", system-ui, sans-serif;--ui-font-xs: .75rem;--ui-font-sm: .875rem;--ui-font-md: 1rem;--ui-font-lg: 1.25rem;--ui-font-xl: clamp(1.35rem, 2.5vw, 1.75rem);--ui-line-compact: 1.25;--ui-line-body: 1.55;--ui-space-1: 4px;--ui-space-2: 8px;--ui-space-3: 12px;--ui-space-4: 16px;--ui-space-5: 20px;--ui-space-6: 24px;--ui-space-8: 32px;--ui-space-10: 40px;--ui-radius-xs: 8px;--ui-radius-sm: 10px;--ui-radius-md: 14px;--ui-radius-lg: 18px;--ui-radius-xl: 24px;--ui-radius-pill: 999px;--ui-shadow-xs: 0 1px 3px rgba(15, 23, 42, .06);--ui-shadow-sm: 0 4px 14px rgba(15, 23, 42, .07);--ui-shadow-md: 0 12px 34px rgba(15, 23, 42, .1);--ui-shadow-modal: 0 28px 80px rgba(15, 23, 42, .34);--ui-control-xs: 30px;--ui-control-sm: 36px;--ui-control-md: 44px;--ui-control-lg: 52px;--ui-focus-ring: 0 0 0 3px rgba(37, 99, 235, .28);--ui-motion-fast: .16s ease;--ui-motion-normal: .24s cubic-bezier(.4, 0, .2, 1);--primary-color: var(--ui-primary);--primary-hover: var(--ui-primary-hover);--secondary-color: var(--ui-secondary);--secondary-hover: var(--ui-secondary-hover);--accent-color: var(--ui-accent);--bg-primary: var(--ui-page);--bg-secondary: var(--ui-primary-soft);--card-bg: var(--ui-surface);--text-primary: var(--ui-ink);--text-secondary: var(--ui-ink-muted);--border-radius-lg: var(--ui-radius-xl);--border-radius-md: var(--ui-radius-md);--border-radius-sm: var(--ui-radius-xs);--shadow-subtle: var(--ui-shadow-sm);--shadow-normal: var(--ui-shadow-md);--transition-normal: var(--ui-motion-normal)}.ui-button{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.ui-button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.02)}.ui-button:active:not(:disabled){transform:translateY(0)}.ui-button:focus-visible{outline:none;box-shadow:var(--ui-focus-ring)!important}.ui-button:disabled{opacity:.56;box-shadow:none!important}.ui-card{isolation:isolate}.ui-card--interactive{cursor:pointer;transition:transform var(--ui-motion-normal),box-shadow var(--ui-motion-normal),border-color var(--ui-motion-normal)}.ui-card--interactive:hover{transform:translateY(-2px);border-color:var(--ui-primary-border)!important;box-shadow:var(--ui-shadow-md)!important}.ui-card--interactive:focus-visible{outline:none;box-shadow:var(--ui-focus-ring),var(--ui-shadow-md)!important}.ui-icon-button{display:grid;width:var(--ui-control-md);height:var(--ui-control-md);padding:0;place-items:center;border:1px solid var(--ui-border);border-radius:50%;background:var(--ui-surface);color:var(--ui-ink-muted)}.ui-icon-button:focus-visible{outline:none;box-shadow:var(--ui-focus-ring)}.ui-icon-button:hover{box-shadow:none;filter:brightness(1.03)}@media(pointer:coarse){.ui-button{min-height:var(--ui-control-md)!important}.ui-icon-button{width:var(--ui-control-md);height:var(--ui-control-md)}}@media(prefers-reduced-motion:reduce){.ui-button,.ui-card--interactive{transition:none!important;animation:none!important}.ui-button:hover:not(:disabled),.ui-card--interactive:hover{transform:none}}*{box-sizing:border-box}:root{font-family:Noto Sans KR,Inter,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#333;background-color:#f8f8f8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;flex-direction:column;align-items:center;min-width:320px;min-height:100vh;width:100%}#root{width:100%;margin:0;padding:0}.card{background:#1e293bb3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:1.5rem;padding:2rem;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 10px 30px -10px #00000080;border-color:#60a5fa4d}h1{font-size:3.2em;line-height:1.1;background:linear-gradient(135deg,#60a5fa,#a855f7);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#2563eb;color:#fff;cursor:pointer;transition:all .25s}button:hover{background-color:#3b82f6;box-shadow:0 0 15px #2563eb66}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;width:100%}.badge{padding:.25rem .75rem;border-radius:9999px;font-size:.875rem;font-weight:600;background:#2563eb33;color:#60a5fa}.progress-bar{width:100%;height:8px;background:#1e293b;border-radius:4px;overflow:hidden;margin-top:1rem}.progress-fill{height:100%;background:linear-gradient(90deg,#60a5fa,#a855f7);transition:width .5s ease-out}