feat: Tailwind v4 @theme 토큰 도입 — 디자인 시스템 기반 마련

UX/UI 개편 Phase A-1. CSS 변수를 Tailwind 유틸리티로 노출해서
이후 컴포넌트가 bg-surface / text-dim / border-default 형태로 작성될
수 있도록 한다. bg-[var(--*)] 임의값 패턴은 후속 lint 규칙으로 차단 예정.

- app.css에 @theme 블록 추가 (color/radius/z/spacing/domain 토큰)
- 기존 :root 변수는 .markdown-body 호환 위해 공존 유지
- +layout.svelte nav 한 줄 swap으로 v4 빌드/HMR 인식 검증 (동일 색상값)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/app.css

@@ -1,5 +1,52 @@
 @import "tailwindcss";
 
+/* Tailwind v4 theme tokens — 모든 color/radius/z/spacing은 여기서 노출 */
+/* 이후 컴포넌트는 bg-surface, text-dim, border-default, bg-success/10, */
+/* bg-domain-engineering, rounded-card, z-modal, w-rail 형태로 작성한다. */
+/* 새 코드에서 bg-[var(--*)] 작성 금지 (lint:tokens 으로 차단). */
+@theme {
+  --color-bg: #0f1117;
+  --color-surface: #1a1d27;
+  --color-surface-hover: #222636;
+  --color-surface-active: #2a2f42;
+  --color-sidebar: #141720;
+  --color-default: #2a2d3a;
+  --color-border-strong: #3a3e52;
+  --color-text: #e4e4e7;
+  --color-dim: #8b8d98;
+  --color-faint: #5e616c;
+  --color-accent: #6c8aff;
+  --color-accent-hover: #859dff;
+  --color-accent-ring: #6c8aff80;
+  --color-error: #f5564e;
+  --color-success: #4ade80;
+  --color-warning: #fbbf24;
+  --color-scrim: #00000099;
+
+  --color-domain-philosophy: #a78bfa;
+  --color-domain-language: #f472b6;
+  --color-domain-engineering: #38bdf8;
+  --color-domain-safety: #fb923c;
+  --color-domain-programming: #34d399;
+  --color-domain-general: #94a3b8;
+  --color-domain-reference: #fbbf24;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-card: 12px;
+
+  --z-dropdown: 30;
+  --z-drawer: 40;
+  --z-modal: 50;
+  --z-toast: 60;
+
+  --spacing-sidebar: 320px;
+  --spacing-rail: 320px;
+}
+
+/* 기존 :root 변수는 .markdown-body와의 호환을 위해 유지 (공존 layer). */
+/* 후속 phase에서 markdown-body도 토큰 마이그레이션 검토 가능. */
 :root {
   --bg: #0f1117;
   --surface: #1a1d27;

frontend/src/routes/+layout.svelte

@@ -60,7 +60,7 @@
   {#if showChrome}
     <div class="h-screen flex flex-col">
       <!-- 상단 nav -->
-      <nav class="flex items-center justify-between px-4 py-2 border-b border-[var(--border)] bg-[var(--surface)] shrink-0">
+      <nav class="flex items-center justify-between px-4 py-2 border-b border-default bg-surface shrink-0">
         <div class="flex items-center gap-3">
           {#if !$page.url.pathname.startsWith('/news')}
           <button