@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); :root { /* Dark foundation */ --bg-deep:#080d14; --surface:#111827; --surface-2:#1a2537; --surface-3:#243044; --border:#1e293b; --border-bright:#334155; /* --text-muted lands on every surface from --bg-deep to --surface-3; the old #64748b only reached 2.79 against the lightest of them. */ --text:#f1f5f9; --text-muted:#94a3b8; --text-dim:#334155; /* Semantic */ --accent:#38bdf8; --accent-glow:rgba(56,189,248,0.12); --on-accent:#080d14; --success:#34d399; --warn:#fbbf24; --danger:#f87171; --info:#818cf8; /* Legacy aliases (기존 코드 호환) */ --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-700:#334155; --slate-900:#0f172a; --blue-50:#eff6ff; --blue-500:#3b82f6; --sky-400:#38bdf8; --green-50:#f0fdf4; --green-500:#22c55e; --green-600:#16a34a; --amber-50:#fffbeb; --amber-400:#fbbf24; --amber-500:#f59e0b; --red-50:#fef2f2; --red-500:#ef4444; /* Group accent colors */ --group-1:#38bdf8; --group-2:#818cf8; --group-3:#34d399; --group-4:#fb923c; --group-5:#f472b6; /* Typography */ --text-xs:0.72rem; --text-sm:0.82rem; --text-base:0.9rem; --text-md:1rem; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px; --radius-full:9999px; --shadow-sm:0 1px 4px rgba(0,0,0,0.4); --shadow-md:0 4px 16px rgba(0,0,0,0.5); --shadow-lg:0 8px 32px rgba(0,0,0,0.6); --btn-h-sm:28px; --btn-h-base:32px; --btn-h-lg:40px; --notepad-header:var(--surface-2); --notepad-line:var(--border); } /* Light theme — activated by data-theme="light" on (toggle, localStorage) */ :root[data-theme="light"] { /* Guide v2, direction A "Deep Sky" — accent only on buttons/links/active tabs/badges, never body text. Status colors are a separate axis. */ --bg-deep:#F6F7F9; --surface:#FFFFFF; --surface-2:#EFF1F4; --surface-3:#E6EAF0; --border:#E2E6EC; --border-bright:#CBD5E1; --text:#1B2330; --text-muted:#5F6B7A; --text-dim:#98A2B0; --accent:#0269A6; --accent-glow:rgba(2,105,166,0.10); --on-accent:#FFFFFF; --success:#177E42; --warn:#B45309; --danger:#D33A3A; --info:#4F46E5; /* Group accents keep their hue but darken — the dark-theme values wash out on white (Deal Desk vendor chips, home category bars). */ --group-1:#0369A1; --group-2:#4F46E5; --group-3:#177E42; --group-4:#C2410C; --group-5:#BE185D; --slate-50:#111827; --slate-100:#1C2430; --slate-200:#334155; --slate-300:#475569; --slate-400:#66707E; --slate-500:#5A6472; --slate-700:#CBD5E1; --shadow-sm:0 1px 4px rgba(28,36,48,0.08); --shadow-md:0 4px 16px rgba(28,36,48,0.10); --shadow-lg:0 8px 32px rgba(28,36,48,0.14); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Reserve the scrollbar gutter so short views (0-item filters etc.) don't shift the layout sideways when the vertical scrollbar disappears. */ html { scrollbar-gutter: stable; } input, textarea, select, button { font-family: inherit; font-size: inherit; } body { font-family: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; background: var(--bg-deep); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } /* Nav */ nav { background: rgba(15,23,42,0.92); backdrop-filter: blur(12px); padding: 13px 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.07); } /* The bar stays dark in both themes, so the palette inside it does too — under the light theme the text tokens darken and disappear into their own bar (.nav-user fell to 2.42). Scoped overrides, not new global values. */ /* :not(.app-tabs) — the Momentum tab bar is also a