refactor(tokens): A-8 Batch 2 — Sidebar / DocumentCard / DocumentTable

목록/사이드바 영역의 var() 토큰을 의미 토큰으로 swap. Phase A 디자인
시스템 정착의 두 번째 mechanical refactor batch (8 파일 중 5/8 누적).

Sidebar:
- bg-[var(--sidebar-bg)]  → bg-sidebar  (이름 변경)
- border-[var(--border)]  → border-default
- text-[var(--text)]      → text-text
- text-[var(--text-dim)]  → text-dim
- bg-[var(--accent)]/15   → bg-accent/15
- hover:bg-[var(--surface)] → hover:bg-surface
- domain 색상 inline style (DOMAIN_COLORS)은 그대로 유지

DocumentCard:
- bg/border/text/hover 토큰 일괄 swap
- DOMAIN_COLORS의 var(--domain-*) 유지 (plan B2 비고)
- blue-400/blue-900/30 (news icon, data_origin work) 그대로
  (lint:tokens 미검출 + plan 명시 없음)

DocumentTable:
- 헤더 + 행 + selected 상태 + 컬럼 텍스트 일괄 swap
- border-l-[var(--accent)] → border-l-accent
- border-default/30 opacity suffix (행 구분선) v4 시각 검증 필요

검증:
- npm run lint:tokens : 407 → 360 (-47, B2 파일 0 hit)
- npm run build       : ✅
- npx svelte-check    : ✅ 0 errors
- ⚠ 3-risk grep       : hover/border-border/var() 잔여 0건

플랜: ~/.claude/plans/compressed-churning-dragon.md §A.4 Batch 2

frontend/src/lib/components/Sidebar.svelte

@@ -68,9 +68,9 @@
   let totalCount = $derived(tree.reduce((sum, n) => sum + n.count, 0));
 </script>
 
-<aside class="h-full flex flex-col bg-[var(--sidebar-bg)] border-r border-[var(--border)] overflow-y-auto">
-  <div class="px-4 py-3 border-b border-[var(--border)]">
-    <h2 class="text-sm font-semibold text-[var(--text-dim)] uppercase tracking-wider">분류</h2>
+<aside class="h-full flex flex-col bg-sidebar border-r border-default overflow-y-auto">
+  <div class="px-4 py-3 border-b border-default">
+    <h2 class="text-sm font-semibold text-dim uppercase tracking-wider">분류</h2>
   </div>
 
   <!-- 전체 문서 -->
@@ -78,14 +78,14 @@
     <button
       onclick={() => navigate(null)}
       class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
-        {!activeDomain ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text)] hover:bg-[var(--surface)]'}"
+        {!activeDomain ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface'}"
     >
       <span class="flex items-center gap-2">
         <FolderOpen size={16} />
         전체 문서
       </span>
       {#if totalCount > 0}
-        <span class="text-xs text-[var(--text-dim)]">{totalCount}</span>
+        <span class="text-xs text-dim">{totalCount}</span>
       {/if}
     </button>
   </div>
@@ -94,7 +94,7 @@
   <nav class="flex-1 px-2 py-2">
     {#if loading}
       {#each Array(5) as _}
-        <div class="h-8 bg-[var(--surface)] rounded-md animate-pulse mx-1 mb-1"></div>
+        <div class="h-8 bg-surface rounded-md animate-pulse mx-1 mb-1"></div>
       {/each}
     {:else}
       {#each tree as node}
@@ -109,7 +109,7 @@
             {#if hasChildren}
               <button
                 onclick={() => toggleExpand(n.path)}
-                class="p-0.5 rounded hover:bg-[var(--surface)] text-[var(--text-dim)]"
+                class="p-0.5 rounded hover:bg-surface text-dim"
               >
                 {#if isExpanded}
                   <ChevronDown size={14} />
@@ -124,7 +124,7 @@
             <button
               onclick={() => navigate(n.path)}
               class="flex-1 flex items-center justify-between px-2 py-1.5 rounded-md text-sm transition-colors
-                {isActive ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : isParent ? 'text-[var(--text)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]'}"
+                {isActive ? 'bg-accent/15 text-accent' : isParent ? 'text-text' : 'text-dim hover:bg-surface hover:text-text'}"
             >
               <span class="flex items-center gap-2">
                 {#if depth === 0}
@@ -132,7 +132,7 @@
                 {/if}
                 <span class="truncate">{n.name}</span>
               </span>
-              <span class="text-xs text-[var(--text-dim)] shrink-0 ml-2">{n.count}</span>
+              <span class="text-xs text-dim shrink-0 ml-2">{n.count}</span>
             </button>
           </div>
 
@@ -148,33 +148,33 @@
   </nav>
 
   <!-- 스마트 그룹 -->
-  <div class="px-2 py-2 border-t border-[var(--border)]">
-    <h3 class="px-3 py-1 text-[10px] font-semibold text-[var(--text-dim)] uppercase tracking-wider">스마트 그룹</h3>
+  <div class="px-2 py-2 border-t border-default">
+    <h3 class="px-3 py-1 text-[10px] font-semibold text-dim uppercase tracking-wider">스마트 그룹</h3>
     <button
       onclick={() => goto('/documents', { noScroll: true })}
-      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]"
+      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-dim hover:bg-surface hover:text-text"
     >
       <Clock size={14} /> 최근 7일
     </button>
     <button
       onclick={() => { const p = new URLSearchParams(); p.set('source', 'law_monitor'); goto(`/documents?${p}`, { noScroll: true }); }}
-      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]"
+      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-dim hover:bg-surface hover:text-text"
     >
       <Scale size={14} /> 법령 알림
     </button>
     <button
       onclick={() => { const p = new URLSearchParams(); p.set('source', 'email'); goto(`/documents?${p}`, { noScroll: true }); }}
-      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]"
+      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-dim hover:bg-surface hover:text-text"
     >
       <Mail size={14} /> 이메일
     </button>
   </div>
 
   <!-- Inbox -->
-  <div class="px-2 py-2 border-t border-[var(--border)]">
+  <div class="px-2 py-2 border-t border-default">
     <a
       href="/inbox"
-      class="flex items-center justify-between px-3 py-2 rounded-md text-sm text-[var(--text)] hover:bg-[var(--surface)] transition-colors"
+      class="flex items-center justify-between px-3 py-2 rounded-md text-sm text-text hover:bg-surface transition-colors"
     >
       <span class="flex items-center gap-2">
         <Inbox size={16} />