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/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