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/DocumentCard.svelte

@@ -57,8 +57,8 @@
 <button
   onclick={handleClick}
   aria-label={doc.title || '문서 선택'}
-  class="flex items-stretch bg-[var(--surface)] border rounded-lg hover:border-[var(--accent)] transition-colors group w-full text-left overflow-hidden
-    {selected ? 'border-[var(--accent)] bg-[var(--accent)]/5' : 'border-[var(--border)]'}"
+  class="flex items-stretch bg-surface border rounded-lg hover:border-accent transition-colors group w-full text-left overflow-hidden
+    {selected ? 'border-accent bg-accent/5' : 'border-default'}"
 >
   <!-- domain 색상 바 -->
   <div class="w-1 shrink-0 rounded-l-lg" style="background: {domainColor}"></div>
@@ -66,21 +66,21 @@
   <!-- 콘텐츠 -->
   <div class="flex items-start gap-3 p-3 flex-1 min-w-0">
   <!-- 포맷 아이콘 -->
-  <div class="shrink-0 mt-0.5 text-[var(--text-dim)] group-hover:text-[var(--accent)]">
+  <div class="shrink-0 mt-0.5 text-dim group-hover:text-accent">
     <FormatIcon format={doc.file_format} size={18} />
   </div>
 
   <!-- 메인 콘텐츠 -->
   <div class="flex-1 min-w-0">
-    <p class="text-sm font-medium truncate group-hover:text-[var(--accent)]">
+    <p class="text-sm font-medium truncate group-hover:text-accent">
       {doc.title || '제목 없음'}
     </p>
     {#if doc.ai_summary}
-      <p class="text-xs text-[var(--text-dim)] truncate mt-0.5">{doc.ai_summary.replace(/[*#_`~]/g, '').slice(0, 100)}</p>
+      <p class="text-xs text-dim truncate mt-0.5">{doc.ai_summary.replace(/[*#_`~]/g, '').slice(0, 100)}</p>
     {/if}
     <div class="flex items-center gap-2 mt-1.5 flex-wrap">
       {#if showDomain && doc.ai_domain}
-        <span class="text-[10px] text-[var(--text-dim)]">
+        <span class="text-[10px] text-dim">
           {doc.ai_domain.replace('Knowledge/', '')}{doc.ai_sub_group ? ` / ${doc.ai_sub_group}` : ''}
         </span>
       {/if}
@@ -100,16 +100,16 @@
       <span class="text-blue-400">📰</span>
     {/if}
     {#if doc.score !== undefined}
-      <span class="text-[var(--accent)] font-medium">{(doc.score * 100).toFixed(0)}%</span>
+      <span class="text-accent font-medium">{(doc.score * 100).toFixed(0)}%</span>
     {/if}
     {#if doc.data_origin}
       <span class="px-1.5 py-0.5 rounded {doc.data_origin === 'work' ? 'bg-blue-900/30 text-blue-400' : 'bg-gray-800 text-gray-400'}">
         {doc.data_origin}
       </span>
     {/if}
-    <span class="text-[var(--text-dim)]">{formatDate(doc.created_at)}</span>
+    <span class="text-dim">{formatDate(doc.created_at)}</span>
     {#if doc.file_size}
-      <span class="text-[var(--text-dim)]">{formatSize(doc.file_size)}</span>
+      <span class="text-dim">{formatSize(doc.file_size)}</span>
     {/if}
   </div>
   </div>