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

@@ -94,15 +94,15 @@
 
 <div class="w-full">
   <!-- 헤더 -->
-  <div class="flex items-center gap-1 px-2 py-1.5 border-b border-[var(--border)] text-[10px] text-[var(--text-dim)] uppercase tracking-wider">
+  <div class="flex items-center gap-1 px-2 py-1.5 border-b border-default text-[10px] text-dim uppercase tracking-wider">
     {#each columns as col}
       <button
         onclick={() => toggleSort(col.key)}
-        class="flex items-center gap-1 {col.flex || col.width || ''} px-1 hover:text-[var(--text)] transition-colors text-left"
+        class="flex items-center gap-1 {col.flex || col.width || ''} px-1 hover:text-text transition-colors text-left"
       >
         {col.label}
         {#if sortKey === col.key}
-          <span class="text-[var(--accent)]">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+          <span class="text-accent">{sortOrder === 'asc' ? '↑' : '↓'}</span>
         {/if}
       </button>
     {/each}
@@ -112,29 +112,29 @@
   {#each sortedItems() as doc}
     <button
       onclick={() => handleClick(doc)}
-      class="flex items-center gap-1 px-2 py-1.5 w-full text-left border-b border-[var(--border)]/30 hover:bg-[var(--surface)] transition-colors group
-        {selectedId === doc.id ? 'bg-[var(--accent)]/5 border-l-2 border-l-[var(--accent)]' : ''}"
+      class="flex items-center gap-1 px-2 py-1.5 w-full text-left border-b border-default/30 hover:bg-surface transition-colors group
+        {selectedId === doc.id ? 'bg-accent/5 border-l-2 border-l-accent' : ''}"
     >
       <!-- 이름 -->
       <div class="flex-1 flex items-center gap-2 min-w-0">
         <span class="w-1 h-4 rounded-full shrink-0" style="background: {getDomainColor(doc.ai_domain)}"></span>
         <FormatIcon format={doc.file_format} size={14} />
-        <span class="text-xs truncate group-hover:text-[var(--accent)]">{doc.title || '제목 없음'}</span>
+        <span class="text-xs truncate group-hover:text-accent">{doc.title || '제목 없음'}</span>
       </div>
       <!-- 분류 -->
-      <div class="w-48 text-[10px] text-[var(--text-dim)] truncate">
+      <div class="w-48 text-[10px] text-dim truncate">
         {doc.ai_domain?.replace('Industrial_Safety/', 'IS/') || '-'}
       </div>
       <!-- 타입 -->
-      <div class="w-24 text-[10px] text-[var(--text-dim)]">
+      <div class="w-24 text-[10px] text-dim">
         {doc.document_type || doc.file_format?.toUpperCase() || '-'}
       </div>
       <!-- 크기 -->
-      <div class="w-20 text-[10px] text-[var(--text-dim)] text-right">
+      <div class="w-20 text-[10px] text-dim text-right">
         {formatSize(doc.file_size)}
       </div>
       <!-- 등록일 -->
-      <div class="w-20 text-[10px] text-[var(--text-dim)] text-right">
+      <div class="w-20 text-[10px] text-dim text-right">
         {formatDate(doc.created_at)}
       </div>
     </button>