diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 2b8d6a1..66abf66 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,76 +1,124 @@
 <script lang="ts">
-  // 대시보드 — 상황판. 사용자 지시서 기반 재설계.
-  // 정보 위계: 헤더 → 핀 메모 → 카드 4개 → 최근 활동 → 파이프라인.
-  // 단일 흐름 레이아웃, 모바일 우선, 행동 유도는 승인 대기에만.
+  // 홈 대시보드 — 데일리 홈 cockpit (확정 시안 dashboard-sage-3 안1 골격 + 안2 검토/파이프라인 위젯 + 안3 도메인 분포 한 줄).
+  // 정보 흐름: 인사 → 오늘 요약 띠(검토 대기 + 디제스트 + 스탯) → 2열(좌: 빠른 캡처·활동 / 우: 학습·도메인 분포·고정).
+  // 데이터는 전부 기존 엔드포인트 wiring(백엔드 변경 0). 학습 streak/복습 마감은 전용 엔드포인트 부재라 링크형으로 degrade.
   import { onMount } from 'svelte';
   import {
     dashboardSummary,
+    refresh,
     type DashboardSummary,
     type PipelineStatus,
     type QueueLag,
   } from '$lib/stores/system';
   import { domainBgClass, domainLabel } from '$lib/utils/domainSlug';
+  import { user } from '$lib/stores/auth';
   import { api } from '$lib/api';
-  import Card from '$lib/components/ui/Card.svelte';
   import EmptyState from '$lib/components/ui/EmptyState.svelte';
   import Skeleton from '$lib/components/ui/Skeleton.svelte';
   import {
-    Inbox, Scale, FileText, Activity, StickyNote, Newspaper, Pin, ChevronRight, Pencil,
-    Library, Mic, Video, Sparkles,
+    Scale, FileText, Pin, ChevronRight, GraduationCap, Upload, Newspaper,
   } from 'lucide-svelte';
-  import { renderMemoHtml, countHiddenTasks, DEFAULT_HIDE_AFTER_MS } from '$lib/utils/memoRenderer';
   import { addToast } from '$lib/stores/toast';
 
   let summary = $derived<DashboardSummary | null>($dashboardSummary);
   let loading = $derived(summary === null);
 
-  // ─── 핀 고정 메모 ───
-  let pinnedMemos = $state<any[]>([]);
-  // 메모별 "완료 항목 펼침" 토글 — key: memo.id, value: true 면 숨겨진 체크 항목 노출
-  let showHiddenByMemo = $state<Record<number, boolean>>({});
-  // 자동 숨김 tick. 1초 해상도로 충분 (hideAfter 10초라 오차 수용).
-  let nowTick = $state(new Date());
+  // ─── 인사 헤더 ───
+  const greetingName = $derived($user?.username ?? 'hyungi');
+  const todayLabel = new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric', month: 'long', day: 'numeric', weekday: 'long',
+  }).format(new Date());
 
-  $effect(() => {
-    const id = setInterval(() => { nowTick = new Date(); }, 1000);
-    return () => clearInterval(id);
-  });
+  // ─── 디제스트 헤드라인 (best-effort, 기존 /digest) ───
+  interface DigestLead {
+    topic_label: string;
+    article_count: number;
+    importance_score: number;
+    country: string;
+    date: string;
+  }
+  let digestLead = $state<DigestLead | null>(null);
 
-  onMount(async () => {
+  const COUNTRY_KO: Record<string, string> = {
+    KR: '한국', JP: '일본', US: '미국', CN: '중국', DE: '독일',
+    FR: '프랑스', GB: '영국', TW: '대만',
+  };
+  function countryKo(c: string): string {
+    return COUNTRY_KO[c?.toUpperCase?.()] ?? c ?? '';
+  }
+
+  // ─── 도메인 분포 (best-effort, 기존 /documents/tree) ───
+  interface DomainDist { name: string; count: number; }
+  let domainDist = $state<DomainDist[]>([]);
+  let domainTotal = $derived(domainDist.reduce((s, d) => s + d.count, 0));
+  function domainCount(slugLike: string): number {
+    // domainBgClass 와 동일 매핑 기준으로 특정 도메인 건수 추출 (스탯 띠용)
+    const target = domainBgClass(slugLike);
+    return domainDist.find((d) => domainBgClass(d.name) === target)?.count ?? 0;
+  }
+
+  // ─── 빠른 캡처 (기존 POST /memos) ───
+  let captureText = $state('');
+  let capturing = $state(false);
+  async function quickCapture() {
+    const content = captureText.trim();
+    if (!content || capturing) return;
+    capturing = true;
     try {
-      const res = await api<any>('/memos/?pinned=true&page_size=3&archived=false');
-      pinnedMemos = res.items || [];
-    } catch { /* 실패 시 빈 배열 유지 */ }
-  });
-
-  // ─── 핀 메모 체크박스 토글 ───
-  async function handlePinCheckbox(e: MouseEvent, memo: any) {
-    const target = e.target as HTMLElement;
-    if (target.tagName !== 'INPUT' || (target as HTMLInputElement).type !== 'checkbox') return;
-    e.preventDefault();
-    e.stopPropagation(); // details 토글 충돌 방지
-    const input = target as HTMLInputElement;
-    const taskIndex = parseInt(input.dataset.taskIndex || '', 10);
-    if (isNaN(taskIndex)) return;
-
-    const checked = input.checked;
-    try {
-      const updated = await api<any>(`/memos/${memo.id}/tasks/${taskIndex}`, {
-        method: 'PATCH',
-        body: JSON.stringify({ checked }),
-      });
-      pinnedMemos = pinnedMemos.map((m) => (m.id === memo.id ? updated : m));
+      await api('/memos/', { method: 'POST', body: JSON.stringify({ content }) });
+      captureText = '';
+      addToast('success', '메모 저장됨');
+      void refresh(); // 메모 수 등 요약 즉시 갱신(60s 폴 기다리지 않음)
     } catch {
-      input.checked = !checked; // 롤백
-      addToast('error', '체크박스 변경 실패');
+      addToast('error', '메모 저장 실패');
+    } finally {
+      capturing = false;
     }
   }
-
-  function toggleShowHidden(memoId: number) {
-    showHiddenByMemo = { ...showHiddenByMemo, [memoId]: !showHiddenByMemo[memoId] };
+  function onCaptureKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); void quickCapture(); }
   }
 
-  // ─── 파이프라인 ───
+  // ─── 핀 고정 메모 (기존 /memos?pinned) ───
+  let pinnedMemos = $state<any[]>([]);
+  function pinTitle(memo: any): string {
+    const firstLine = memo.content?.split('\n')[0]?.replace(/^#+\s*/, '').trim();
+    return memo.title || firstLine || '메모';
+  }
+
+  onMount(async () => {
+    // 핀 메모
+    try {
+      const res = await api<any>('/memos/?pinned=true&page_size=4&archived=false');
+      pinnedMemos = res.items || [];
+    } catch { /* 빈 배열 유지 */ }
+    // 디제스트 최신 — countries→topics flatten 후 중요도 desc(동률 시 기사수 desc) top
+    try {
+      const d = await api<any>('/digest');
+      const topics = (d.countries || []).flatMap((c: any) =>
+        (c.topics || []).map((t: any) => ({ ...t, country: c.country })));
+      topics.sort((a: any, b: any) =>
+        (b.importance_score - a.importance_score) || (b.article_count - a.article_count));
+      if (topics[0]) {
+        digestLead = {
+          topic_label: topics[0].topic_label,
+          article_count: topics[0].article_count,
+          importance_score: topics[0].importance_score,
+          country: topics[0].country,
+          date: d.digest_date,
+        };
+      }
+    } catch { /* 디제스트 없으면 블록 자동 생략 */ }
+    // 도메인 분포 — 트리 top-level 노드 건수
+    try {
+      const tree = await api<any[]>('/documents/tree');
+      domainDist = (tree || [])
+        .map((n) => ({ name: n.name as string, count: n.count as number }))
+        .sort((a, b) => b.count - a.count);
+    } catch { /* 분포 없으면 카드 자동 생략 */ }
+  });
+
+  // ─── 파이프라인 (기존 로직 재사용, 칩 요약 + 상세 접힘) ───
   const STAGE_ORDER = ['extract', 'stt', 'classify', 'embed', 'preview', 'thumbnail'] as const;
   const STAGE_LABEL: Record<string, string> = {
     extract: '추출', stt: '전사', classify: '분류', embed: '임베딩',
@@ -80,13 +128,10 @@
   interface PipelineRow {
     stage: string; label: string;
     pending: number; processing: number; failed: number; total: number;
-    // §4 — queue_lag 의 oldest_pending_age_sec (적체 신호용)
     oldestPendingAgeSec: number | null;
   }
 
   function buildPipelineRows(items: PipelineStatus[], lag: QueueLag[]): PipelineRow[] {
-    // §4 — 24h 누적 (pipeline_status) + 현재 시점 lag (queue_lag) 두 소스 머지.
-    // queue_lag 가 있으면 stage 별 pending/processing/failed 는 그쪽 (정확) 사용.
     const lagMap = new Map(lag.map((l) => [l.stage, l]));
     const grouped = new Map<string, { pending: number; processing: number; failed: number; ageSec: number | null }>();
     for (const it of items) {
@@ -96,14 +141,12 @@
       else if (it.status === 'failed') cur.failed += it.count;
       grouped.set(it.stage, cur);
     }
-    // queue_lag 로 덮어쓰기 (현재 시점 신호가 우선)
     for (const l of lag) {
       grouped.set(l.stage, {
         pending: l.pending, processing: l.processing, failed: l.failed,
         ageSec: l.oldest_pending_age_sec,
       });
     }
-    // queue_lag 만 있는 stage 도 전부 포함
     const allStages = new Set([...grouped.keys(), ...lagMap.keys()]);
     const orderedStages = [
       ...STAGE_ORDER.filter((s) => allStages.has(s)),
@@ -126,13 +169,10 @@
   let pipelineMax = $derived(Math.max(1, ...pipelineRows.map((r) => r.total)));
   let totalFailed = $derived(summary?.failed_count ?? 0);
   let totalPending = $derived(pipelineRows.reduce((s, r) => s + r.pending, 0));
+  let totalProcessing = $derived(pipelineRows.reduce((s, r) => s + r.processing, 0));
 
-  // §4 — 카테고리 mini-card 데이터
-  const CATEGORY_CARDS: { key: string; label: string; href: string; icon: any }[] = [
-    { key: 'library', label: '자료실', href: '/library', icon: Library },
-    { key: 'audio', label: '오디오', href: '/audio', icon: Mic },
-    { key: 'video', label: '비디오', href: '/video', icon: Video },
-  ];
+  let pipelineManualClosed = $state(false);
+  let pipelineOpen = $derived(pipelineManualClosed ? false : totalFailed > 0);
 
   function formatAge(sec: number | null): string {
     if (sec == null || sec <= 0) return '';
@@ -142,23 +182,9 @@
     return `${Math.floor(sec / 86400)}일 전`;
   }
 
-  // 파이프라인 접힘 상태
-  let pipelineManualClosed = $state(false);
-  let pipelineOpen = $derived(pipelineManualClosed ? false : totalFailed > 0);
-
-  // ─── 시스템 상태 ───
-  function pickSystemTone(s: DashboardSummary) {
-    if (s.failed_count > 0) return { label: `실패 ${s.failed_count}`, tone: 'error' as const };
-    const backlog = s.pipeline_status.some((p) => p.status === 'pending' && p.count > 10);
-    if (backlog) return { label: '대기열 적체', tone: 'warning' as const };
-    return { label: '정상', tone: 'success' as const };
-  }
-  const TONE_DOT: Record<string, string> = { success: 'bg-success', warning: 'bg-warning', error: 'bg-error' };
-  const TONE_TEXT: Record<string, string> = { success: 'text-success', warning: 'text-warning', error: 'text-error' };
-  let systemView = $derived(summary ? pickSystemTone(summary) : null);
-
   function formatTime(dateStr: string) {
     const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return ''; // 빈 문자열/유효하지 않은 created_at → 'Invalid Date' 회피
     const diff = Date.now() - d.getTime();
     if (diff < 60000) return '방금';
     if (diff < 3600000) return `${Math.floor(diff / 60000)}분 전`;
@@ -168,351 +194,251 @@
   }
 </script>
 
-<div class="p-4 lg:p-6">
-  <div class="max-w-4xl mx-auto">
+<div class="p-4 lg:p-8">
+  <div class="max-w-5xl mx-auto">
 
-    <!-- ═══ 1. 헤더 + 시스템 상태 ═══ -->
-    <div class="flex items-center justify-between mb-5">
-      <h2 class="text-xl font-bold text-text">대시보드</h2>
-      {#if systemView}
-        <span class="text-xs text-dim flex items-center gap-1.5 select-none">
-          {systemView.label}
-          <span class="w-2 h-2 rounded-full {TONE_DOT[systemView.tone]}"></span>
-        </span>
-      {/if}
+    <!-- ═══ 인사 헤더 ═══ -->
+    <div class="flex items-baseline gap-2.5 flex-wrap">
+      <h1 class="text-2xl font-bold text-text tracking-tight">안녕하세요, {greetingName}</h1>
+      <span class="text-sm text-dim">오늘도 지식 쌓는 날.</span>
     </div>
+    <div class="text-xs text-faint mt-1 mb-6 tracking-wide">{todayLabel}</div>
 
     {#if loading}
       <!-- 스켈레톤 -->
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-5">
-        {#each Array(4) as _}
-          <Card><Skeleton w="w-20" h="h-3" /><Skeleton w="w-16" h="h-8" class="mt-3" /><Skeleton w="w-24" h="h-3" class="mt-2" /></Card>
-        {/each}
+      <div class="bg-surface border border-default rounded-card p-5 mb-5">
+        <Skeleton w="w-40" h="h-10" />
+        <Skeleton w="w-full" h="h-4" class="mt-4" />
+        <Skeleton w="w-2/3" h="h-4" class="mt-2" />
+      </div>
+      <div class="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-5">
+        <div class="space-y-5">
+          <div class="bg-surface border border-default rounded-card p-5"><Skeleton w="w-24" h="h-4" /><Skeleton w="w-full" h="h-10" class="mt-3" /></div>
+          <div class="bg-surface border border-default rounded-card p-5"><Skeleton w="w-24" h="h-4" /><Skeleton w="w-full" h="h-40" class="mt-3" /></div>
+        </div>
+        <div class="space-y-5">
+          <div class="bg-surface border border-default rounded-card p-5"><Skeleton w="w-full" h="h-24" /></div>
+          <div class="bg-surface border border-default rounded-card p-5"><Skeleton w="w-full" h="h-32" /></div>
+        </div>
       </div>
-      <Card class="mb-4"><Skeleton w="w-24" h="h-4" /><Skeleton w="w-full" h="h-40" class="mt-3" /></Card>
-      <Card><Skeleton w="w-24" h="h-4" /><Skeleton w="w-full" h="h-20" class="mt-3" /></Card>
 
     {:else if summary}
 
-      <!-- ═══ 2. 핀 고정 메모 (조건부, 펼침/접힘) ═══ -->
-      {#if pinnedMemos.length > 0}
-        <div class="mb-5 space-y-1.5">
-          {#each pinnedMemos as memo (memo.id)}
-            <details class="group/pin">
-              <summary class="flex items-center gap-2.5 px-3 py-2 bg-surface border border-default/50 rounded-lg
-                hover:bg-surface-hover transition-colors text-sm cursor-pointer select-none list-none">
-                <Pin size={13} class="text-accent shrink-0" />
-                <span class="text-text truncate flex-1">
-                  {memo.title && memo.title !== memo.content?.split('\n')[0]?.replace(/^#+\s*/, '').slice(0, 80)
-                    ? memo.title
-                    : memo.content?.split('\n')[0] || '메모'}
-                </span>
-                <ChevronRight size={13} class="text-dim shrink-0 transition-transform group-open/pin:rotate-90" />
-              </summary>
-              <!-- svelte-ignore a11y_click_events_have_key_events -->
-              <!-- svelte-ignore a11y_no_static_element_interactions -->
-              <div
-                class="mt-1 px-3 py-2.5 bg-surface/50 border border-default/30 rounded-lg text-sm text-text"
-                onclick={(e) => handlePinCheckbox(e, memo)}
-              >
-                <div
-                  class="prose prose-sm max-w-none memo-content-pin"
-                  class:show-hidden={showHiddenByMemo[memo.id]}
-                >
-                  {@html renderMemoHtml(memo.content || '', {
-                    compact: true,
-                    interactive: true,
-                    taskStates: memo.memo_task_state ?? {},
-                    now: nowTick,
-                  })}
-                </div>
-                <div class="flex items-center gap-3 mt-2">
-                  {#if countHiddenTasks(memo.memo_task_state, nowTick, DEFAULT_HIDE_AFTER_MS) > 0 || showHiddenByMemo[memo.id]}
-                    <button
-                      type="button"
-                      class="text-[11px] text-dim hover:text-text underline-offset-2 hover:underline"
-                      onclick={(e) => { e.stopPropagation(); toggleShowHidden(memo.id); }}
-                    >
-                      {#if showHiddenByMemo[memo.id]}
-                        완료 항목 숨기기
-                      {:else}
-                        완료 {countHiddenTasks(memo.memo_task_state, nowTick, DEFAULT_HIDE_AFTER_MS)}개 보기
-                      {/if}
-                    </button>
-                  {/if}
-                  <a href="/memos" class="text-[11px] text-accent hover:underline">메모함에서 보기 →</a>
-                </div>
+      <!-- ═══ 오늘 요약 띠 ═══ -->
+      <div class="bg-surface border border-default rounded-card p-5 lg:p-6 mb-5">
+        <!-- 검토 대기 + 디제스트 -->
+        <div class="flex flex-col sm:flex-row items-stretch gap-5">
+          <!-- 검토 대기 강조 -->
+          <div class="flex flex-col justify-center sm:pr-6 sm:border-r border-default sm:min-w-[150px]">
+            <span class="text-4xl font-extrabold tracking-tight leading-none {summary.inbox_count > 0 ? 'text-warning' : 'text-success'}">
+              {summary.inbox_count.toLocaleString()}
+            </span>
+            <span class="text-[11px] text-dim mt-1.5 uppercase tracking-wide">검토 대기 문서</span>
+            {#if summary.inbox_count > 0}
+              <a href="/inbox" class="text-[11px] text-accent font-semibold mt-2 hover:underline">검토 시작 →</a>
+            {:else}
+              <span class="text-[11px] text-dim mt-2">미분류 없음</span>
+            {/if}
+          </div>
+
+          <!-- 디제스트 톱 (best-effort) -->
+          {#if digestLead}
+            <a href="/digest" class="flex-1 flex flex-col justify-center gap-1.5 group">
+              <div class="flex items-center gap-2">
+                <span class="text-[10px] font-bold text-error bg-error/10 rounded px-1.5 py-0.5 uppercase tracking-wide">속보</span>
+                <span class="text-[11px] text-faint">{digestLead.date} 브리핑</span>
               </div>
-            </details>
-          {/each}
-          {#if pinnedMemos.length >= 3}
-            <a href="/memos" class="text-[11px] text-accent hover:underline pl-8">더보기 →</a>
+              <div class="text-[15px] font-semibold text-text leading-snug group-hover:text-accent transition-colors">
+                {digestLead.topic_label}
+              </div>
+              <div class="text-[11px] text-dim">
+                관련 기사 <strong class="text-text">{digestLead.article_count}건</strong>
+                · 중요도 {digestLead.importance_score.toFixed(2)}
+                · {countryKo(digestLead.country)}
+              </div>
+            </a>
+          {:else}
+            <a href="/news" class="flex-1 flex items-center gap-2 text-sm text-dim hover:text-accent transition-colors">
+              <Newspaper size={16} /> 오늘의 뉴스 브리핑 보기 →
+            </a>
           {/if}
         </div>
-      {/if}
 
-      <!-- ═══ 3. 핵심 카드 4개 ═══ -->
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-5">
-        <!-- 문서함 -->
-        <a href="/documents" class="block">
-          <Card interactive class="h-full">
-            <div class="flex items-start justify-between">
-              <p class="text-sm text-dim">문서함</p>
-              <FileText size={18} class="text-faint" />
-            </div>
-            <p class="text-3xl font-bold mt-2 text-text">{(summary.documents_count ?? 0).toLocaleString()}</p>
-            <p class="text-xs text-dim mt-1">
-              {#if summary.today_added > 0}
-                <span class="text-accent">+{summary.today_added} 오늘</span>
-              {:else}
-                일반 문서
-              {/if}
-            </p>
-          </Card>
-        </a>
-
-        <!-- 메모 -->
-        <a href="/memos" class="block">
-          <Card interactive class="h-full">
-            <div class="flex items-start justify-between">
-              <p class="text-sm text-dim">메모</p>
-              <StickyNote size={18} class="text-faint" />
-            </div>
-            <p class="text-3xl font-bold mt-2 text-text">{(summary.memos_count ?? 0).toLocaleString()}</p>
-            <p class="text-xs text-dim mt-1">직접 작성</p>
-          </Card>
-        </a>
-
-        <!-- 뉴스 -->
-        <a href="/news" class="block">
-          <Card interactive class="h-full">
-            <div class="flex items-start justify-between">
-              <p class="text-sm text-dim">뉴스</p>
-              <Newspaper size={18} class="text-faint" />
-            </div>
-            <p class="text-3xl font-bold mt-2 text-text">{(summary.news_count ?? 0).toLocaleString()}</p>
-            <p class="text-xs text-dim mt-1">수집 기사</p>
-          </Card>
-        </a>
-
-        <!-- 승인 대기 (액션형) -->
-        <a href="/inbox" class="block">
-          <Card interactive class="h-full">
-            <div class="flex items-start justify-between">
-              <p class="text-sm text-dim">승인 대기</p>
-              <Inbox size={18} class="text-faint" />
-            </div>
-            <p class="text-3xl font-bold mt-2 {summary.inbox_count > 0 ? 'text-warning' : 'text-success'}">
-              {summary.inbox_count}
-            </p>
-            {#if summary.inbox_count > 0}
-              <p class="text-xs text-accent mt-1">검토하기 →</p>
-            {:else}
-              <p class="text-xs text-dim mt-1">미분류 없음</p>
-            {/if}
-          </Card>
-        </a>
+        <!-- 스탯 띠 -->
+        <div class="flex flex-nowrap overflow-x-auto border-t border-default mt-4 pt-4">
+          {@render stat((summary.documents_count ?? 0).toLocaleString(), '문서', 'text-accent')}
+          {@render stat((summary.news_count ?? 0).toLocaleString(), '뉴스')}
+          {#if domainTotal > 0}
+            {@render stat(domainCount('Industrial_Safety').toLocaleString(), '산업안전', 'text-domain-safety')}
+            {@render stat(domainCount('Engineering').toLocaleString(), '엔지니어링', 'text-domain-engineering')}
+          {/if}
+          {#if summary.category_counts?.library}
+            {@render stat(summary.category_counts.library.toLocaleString(), '자료실')}
+          {/if}
+          {@render stat((summary.memos_count ?? 0).toLocaleString(), '메모')}
+        </div>
       </div>
 
-      <!-- ═══ 3.5. 카테고리 + 자료실 제안 (§4) ═══ -->
-      {#if summary.category_counts && (Object.keys(summary.category_counts).length > 0 || summary.library_pending_suggestions > 0)}
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-5">
-          {#each CATEGORY_CARDS as cat}
-            {@const count = summary.category_counts?.[cat.key] ?? 0}
-            <a href={cat.href} class="block">
-              <Card interactive class="h-full">
-                <div class="flex items-start justify-between">
-                  <p class="text-sm text-dim">{cat.label}</p>
-                  <cat.icon size={18} class="text-faint" />
-                </div>
-                <p class="text-2xl font-bold mt-2 text-text">{count.toLocaleString()}</p>
-                <p class="text-xs text-dim mt-1">카테고리</p>
-              </Card>
-            </a>
-          {/each}
+      <!-- ═══ 2열 본문 ═══ -->
+      <div class="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-5 items-start">
 
-          <!-- 자료실 제안 (action card) -->
-          <a href="/library" class="block">
-            <Card interactive class="h-full">
-              <div class="flex items-start justify-between">
-                <p class="text-sm text-dim">자료실 제안</p>
-                <Sparkles size={18} class="text-faint" />
-              </div>
-              <p class="text-2xl font-bold mt-2 {summary.library_pending_suggestions > 0 ? 'text-warning' : 'text-success'}">
-                {summary.library_pending_suggestions}
-              </p>
-              {#if summary.library_pending_suggestions > 0}
-                <p class="text-xs text-accent mt-1">검토하기 →</p>
-              {:else}
-                <p class="text-xs text-dim mt-1">대기 없음</p>
-              {/if}
-            </Card>
-          </a>
-        </div>
-      {/if}
+        <!-- ─── 왼쪽 ─── -->
+        <div class="space-y-5">
 
-      <!-- ═══ 3.6. tier 관측성 3종 카드 (B-3) ═══ -->
-      {#if summary.tier_health && summary.tier_health.triage_total > 0}
-        {@const th = summary.tier_health}
-        {@const esc_rate = th.triage_total > 0 ? th.escalated_total / th.triage_total : 0}
-        {@const json_rate = th.triage_total > 0 ? th.triage_json_invalid / th.triage_total : 0}
-        {@const sup_rate = th.triage_total > 0 ? th.suppressed_total / th.triage_total : 0}
-        {@const deep_total = th.deep_total ?? 0}
-        {@const deep_err_rate = deep_total > 0 ? (th.deep_err_total ?? 0) / deep_total : 0}
-        <!-- Day 4 튜닝 (2026-04-27): 운영 패턴 실측 후 임계치 재조정.
-             3일 telemetry 기준 escalate 97% 가 정상 (safety 정책 의도) → <80% 가 진짜 신호. -->
-        {@const esc_tone = esc_rate < 0.80 ? 'text-error' : 'text-text'}
-        {@const json_tone = json_rate > 0.05 ? 'text-error' : 'text-text'}
-        {@const sup_tone = sup_rate > 0.10 ? 'text-warning' : 'text-text'}
-        {@const deep_tone = deep_err_rate > 0.05 ? 'text-error' : 'text-text'}
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
-          <!-- 에스컬레이션 비율 -->
-          <Card class="h-full">
-            <div class="flex items-start justify-between">
-              <p class="text-sm text-dim">에스컬레이션 비율 (24h)</p>
-              <Sparkles size={18} class="text-faint" />
+          <!-- 빠른 캡처 -->
+          <div class="bg-surface border border-default rounded-card p-5">
+            <div class="text-[11px] font-bold text-dim uppercase tracking-wider mb-3">빠른 캡처</div>
+            <div class="flex gap-2 items-center">
+              <input
+                class="flex-1 h-9 border border-default rounded-md bg-bg text-text text-sm px-3.5 outline-none focus:border-accent transition-colors placeholder:text-faint"
+                type="text"
+                placeholder="메모 한 줄 남기기…"
+                bind:value={captureText}
+                onkeydown={onCaptureKeydown}
+                disabled={capturing}
+              />
+              <button
+                class="h-9 px-4 rounded-md bg-accent text-white text-xs font-semibold hover:bg-accent-hover transition-colors disabled:opacity-50 shrink-0"
+                onclick={quickCapture}
+                disabled={capturing || !captureText.trim()}
+              >저장</button>
             </div>
-            <p class="text-2xl font-bold mt-2 {esc_tone}">
-              {(esc_rate * 100).toFixed(1)}%
-            </p>
-            <p class="text-xs text-dim mt-1">
-              {th.escalated_total} / {th.triage_total}
-              {#if esc_rate < 0.80}<span class="text-error ml-1">(매칭 실패 증가)</span>{/if}
-            </p>
-            <p class="text-[10px] text-faint mt-1">safety 정책상 95~100% 가 정상</p>
-            {#if Object.keys(th.escalation_by_reason).length > 0}
-              <div class="mt-2 flex flex-wrap gap-1">
-                {#each Object.entries(th.escalation_by_reason).slice(0, 4) as [reason, n]}
-                  <span class="text-[10px] px-1.5 py-0.5 rounded bg-surface-muted text-dim">
-                    {reason} {n}
-                  </span>
+            <div class="flex gap-2 mt-2.5">
+              <a href="/documents" class="inline-flex items-center gap-1.5 text-[11px] text-accent-hover bg-accent/10 rounded-md px-2.5 py-1 hover:bg-accent/20 transition-colors">
+                <Upload size={11} /> 파일 업로드
+              </a>
+            </div>
+          </div>
+
+          <!-- 최근 활동 타임라인 -->
+          <div class="bg-surface border border-default rounded-card p-5">
+            <div class="flex items-baseline justify-between mb-3">
+              <span class="text-[11px] font-bold text-dim uppercase tracking-wider">최근 활동</span>
+              <div class="flex items-center gap-3">
+                {#if summary.law_alerts > 0}
+                  <a href="/documents?source=law_monitor"
+                    class="text-[11px] flex items-center gap-1 px-2.5 py-1 rounded-full bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors">
+                    <Scale size={11} /> 법령 {summary.law_alerts}
+                  </a>
+                {/if}
+                <a href="/documents" class="text-[11px] text-accent hover:underline">전체 보기 →</a>
+              </div>
+            </div>
+
+            {#if summary.recent_documents.length > 0}
+              <div class="flex flex-col">
+                {#each summary.recent_documents as doc, i (doc.id)}
+                  <a href="/documents/{doc.id}"
+                    class="grid grid-cols-[auto_14px_1fr] gap-x-3 py-2.5 {i > 0 ? 'border-t border-default' : ''} group">
+                    <div class="text-[10px] text-faint text-right pt-1 whitespace-nowrap tabular-nums w-14">{formatTime(doc.created_at)}</div>
+                    <div class="flex flex-col items-center">
+                      <span class="w-2 h-2 rounded-full mt-1.5 shrink-0 {domainBgClass(doc.ai_domain)}"></span>
+                      {#if i < summary.recent_documents.length - 1}<span class="flex-1 w-px bg-default mt-1"></span>{/if}
+                    </div>
+                    <div class="pb-1">
+                      <div class="text-[10px] font-bold uppercase tracking-wide text-dim mb-0.5">{domainLabel(doc.ai_domain)}</div>
+                      <div class="text-[13px] text-text leading-snug group-hover:text-accent transition-colors truncate">{doc.title || '제목 없음'}</div>
+                    </div>
+                  </a>
                 {/each}
               </div>
-            {/if}
-          </Card>
-
-          <!-- triage JSON 건강도 -->
-          <Card class="h-full">
-            <div class="flex items-start justify-between">
-              <p class="text-sm text-dim">triage JSON 건강도 (24h)</p>
-              <Sparkles size={18} class="text-faint" />
-            </div>
-            <p class="text-2xl font-bold mt-2 {json_tone}">
-              {(json_rate * 100).toFixed(1)}%
-            </p>
-            <p class="text-xs text-dim mt-1">
-              깨짐 {th.triage_json_invalid} 건
-              {#if json_rate > 0.05}<span class="text-error ml-1">(프롬프트 이슈 의심)</span>{/if}
-            </p>
-            <p class="text-[10px] text-faint mt-1">5% 초과 시 4B 프롬프트·모델 재검토</p>
-          </Card>
-
-          <!-- Backlog Suppression -->
-          <Card class="h-full">
-            <div class="flex items-start justify-between">
-              <p class="text-sm text-dim">Backlog Suppression (24h)</p>
-              <Sparkles size={18} class="text-faint" />
-            </div>
-            <p class="text-2xl font-bold mt-2 {sup_tone}">
-              {(sup_rate * 100).toFixed(1)}%
-            </p>
-            <p class="text-xs text-dim mt-1">
-              억제 {th.suppressed_total} 건
-              {#if sup_rate > 0.10}<span class="text-warning ml-1">(임계치 재조정 신호)</span>{/if}
-            </p>
-            <p class="text-[10px] text-faint mt-1">10% 초과 시 ratio/pending threshold 조정</p>
-          </Card>
-
-          <!-- Deep summary 안정성 (Day 4 신규) -->
-          <Card class="h-full">
-            <div class="flex items-start justify-between">
-              <p class="text-sm text-dim">Deep summary 안정성 (24h)</p>
-              <Sparkles size={18} class="text-faint" />
-            </div>
-            <p class="text-2xl font-bold mt-2 {deep_tone}">
-              {(deep_err_rate * 100).toFixed(1)}%
-            </p>
-            <p class="text-xs text-dim mt-1">
-              실패 {th.deep_err_total ?? 0} / {deep_total}
-              {#if deep_err_rate > 0.05}<span class="text-error ml-1">(MLX 안정성 점검)</span>{/if}
-            </p>
-            <p class="text-[10px] text-faint mt-1">call_failed / parse:* 합계, 5% 초과 시 점검</p>
-          </Card>
-        </div>
-      {/if}
-
-      <!-- ═══ 4. 최근 활동 ═══ -->
-      <Card class="mb-4">
-        <div class="flex items-center justify-between mb-3">
-          <h3 class="text-sm font-semibold text-text">최근 활동</h3>
-          <div class="flex items-center gap-3">
-            {#if summary.law_alerts > 0}
-              <a
-                href="/documents?source=law_monitor"
-                class="text-[11px] flex items-center gap-1 px-2.5 py-1 rounded-full
-                  bg-warning/10 text-warning border border-warning/20
-                  hover:bg-warning/20 transition-colors"
-              >
-                <Scale size={11} /> 법령 {summary.law_alerts}
-              </a>
+            {:else}
+              <EmptyState
+                icon={FileText}
+                title="아직 문서가 없습니다"
+                description="NAS PKM 폴더에 파일을 추가하면 자동으로 인덱싱됩니다."
+              />
             {/if}
           </div>
         </div>
 
-        {#if summary.recent_documents.length > 0}
-          <div class="divide-y divide-default/50">
-            {#each summary.recent_documents as doc (doc.id)}
-              <a
-                href="/documents/{doc.id}"
-                class="block py-2.5 first:pt-0 last:pb-0 hover:bg-surface-hover -mx-5 px-5 transition-colors"
-              >
-                <div class="flex items-center justify-between gap-3">
-                  <span class="text-sm text-text truncate">{doc.title || '제목 없음'}</span>
-                  <span class="text-[11px] text-dim shrink-0">{formatTime(doc.created_at)}</span>
-                </div>
-                <div class="flex items-center gap-1.5 mt-1">
-                  <span class="w-1.5 h-1.5 rounded-full shrink-0 {domainBgClass(doc.ai_domain)}"></span>
-                  <span class="text-[11px] text-dim truncate">{domainLabel(doc.ai_domain)}</span>
-                </div>
-              </a>
-            {/each}
-          </div>
-        {:else}
-          <EmptyState
-            icon={FileText}
-            title="아직 문서가 없습니다"
-            description="NAS PKM 폴더에 파일을 추가하면 자동으로 인덱싱됩니다."
-          />
-        {/if}
-      </Card>
+        <!-- ─── 오른쪽 ─── -->
+        <div class="space-y-5">
 
-      <!-- ═══ 5. 파이프라인 (접힘) ═══ -->
+          <!-- 학습 (streak/복습 마감은 백엔드 부재로 링크형 degrade) -->
+          <a href="/study" class="block bg-surface border border-default rounded-card p-5 hover:bg-surface-hover transition-colors group">
+            <div class="flex items-center justify-between">
+              <span class="text-[11px] font-bold text-dim uppercase tracking-wider">학습</span>
+              <GraduationCap size={16} class="text-faint" />
+            </div>
+            <div class="text-[15px] font-semibold text-text mt-3 group-hover:text-accent transition-colors">암기 노트 학습 시작 →</div>
+            <div class="text-[11px] text-dim mt-1">검수함 · 복습함 · 암기카드</div>
+          </a>
+
+          <!-- 도메인 분포 + 파이프라인 -->
+          {#if domainDist.length > 0}
+            <div class="bg-surface border border-default rounded-card p-5">
+              <div class="text-[11px] font-bold text-dim uppercase tracking-wider mb-2">도메인 분포</div>
+              <div class="text-[11px] text-faint mb-3">전체 <strong class="text-base font-bold text-text tracking-tight align-baseline">{domainTotal.toLocaleString()}</strong>건</div>
+
+              <!-- 분포 막대 -->
+              <div class="flex gap-0.5 h-2 rounded mb-4 overflow-hidden">
+                {#each domainDist as d (d.name)}
+                  <div class="h-full rounded-sm {domainBgClass(d.name)}" style="width:{domainTotal > 0 ? (d.count / domainTotal) * 100 : 0}%"></div>
+                {/each}
+              </div>
+
+              <div class="flex flex-col gap-1.5">
+                {#each domainDist.slice(0, 6) as d (d.name)}
+                  <a href="/documents?domain={encodeURIComponent(d.name)}" class="flex items-center gap-2 text-xs hover:text-accent transition-colors group">
+                    <span class="w-2.5 h-2.5 rounded-sm shrink-0 {domainBgClass(d.name)}"></span>
+                    <span class="flex-1 text-text truncate group-hover:text-accent">{domainLabel(d.name)}</span>
+                    <span class="font-semibold text-dim tabular-nums">{d.count.toLocaleString()}</span>
+                  </a>
+                {/each}
+              </div>
+
+              <!-- 파이프라인 칩 (안2 흡수) -->
+              <div class="flex items-center gap-1.5 flex-wrap mt-4 pt-3.5 border-t border-default">
+                <span class="text-[10px] text-faint uppercase tracking-wide mr-1">파이프라인</span>
+                {#if totalFailed > 0}<span class="text-[10px] font-bold rounded px-2 py-0.5 text-error bg-error/10">실패 {totalFailed}</span>{/if}
+                {#if totalPending > 0}<span class="text-[10px] font-bold rounded px-2 py-0.5 text-warning bg-warning/10">대기 {totalPending}</span>{/if}
+                {#if totalProcessing > 0}<span class="text-[10px] font-bold rounded px-2 py-0.5 text-success bg-success/10">처리중 {totalProcessing}</span>{/if}
+                {#if totalFailed === 0 && totalPending === 0 && totalProcessing === 0}<span class="text-[10px] font-bold rounded px-2 py-0.5 text-success bg-success/10">정상</span>{/if}
+              </div>
+            </div>
+          {/if}
+
+          <!-- 고정 항목 -->
+          {#if pinnedMemos.length > 0}
+            <div class="bg-surface border border-default rounded-card p-5">
+              <div class="flex items-baseline justify-between mb-3">
+                <span class="text-[11px] font-bold text-dim uppercase tracking-wider">고정 항목</span>
+                <a href="/memos" class="text-[11px] text-accent hover:underline">관리 →</a>
+              </div>
+              <div class="flex flex-col gap-2">
+                {#each pinnedMemos as memo (memo.id)}
+                  <a href="/memos" class="flex items-start gap-2.5 px-3 py-2.5 rounded-lg bg-bg hover:bg-surface-hover transition-colors">
+                    <span class="text-[9px] font-bold rounded px-1.5 py-0.5 uppercase tracking-wide shrink-0 mt-0.5 text-accent-hover bg-accent/10">메모</span>
+                    <span class="text-xs text-text leading-snug flex-1">{pinTitle(memo)}</span>
+                    <Pin size={11} class="text-faint shrink-0 mt-0.5" />
+                  </a>
+                {/each}
+              </div>
+            </div>
+          {/if}
+        </div>
+      </div>
+
+      <!-- ═══ 파이프라인 상세 (실패 있을 때 자동 펼침) ═══ -->
       <details
+        class="mt-5"
         open={pipelineOpen}
         ontoggle={(e) => { if (!e.currentTarget.open) pipelineManualClosed = true; }}
       >
-        <summary
-          class="flex items-center justify-between px-5 py-3.5 bg-surface border border-default rounded-lg
-            cursor-pointer hover:bg-surface-hover transition-colors select-none list-none"
-        >
+        <summary class="flex items-center justify-between px-5 py-3.5 bg-surface border border-default rounded-card cursor-pointer hover:bg-surface-hover transition-colors select-none list-none">
           <span class="text-sm font-semibold text-text flex items-center gap-2">
             <ChevronRight size={14} class="transition-transform details-chevron" />
-            파이프라인
+            파이프라인 상세
           </span>
           <span class="text-xs text-dim flex items-center gap-2.5">
-            {#if totalFailed > 0}
-              <span class="text-error font-medium">실패 {totalFailed}</span>
-            {/if}
-            {#if totalPending > 0}
-              <span>대기 {totalPending}</span>
-            {/if}
-            {#if totalFailed === 0 && totalPending === 0}
-              <span>처리 완료</span>
-            {/if}
+            {#if totalFailed > 0}<span class="text-error font-medium">실패 {totalFailed}</span>{/if}
+            {#if totalPending > 0}<span>대기 {totalPending}</span>{/if}
+            {#if totalFailed === 0 && totalPending === 0}<span>처리 완료</span>{/if}
           </span>
         </summary>
 
-        <div class="mt-2 px-5 py-4 bg-surface border border-default rounded-lg">
+        <div class="mt-2 px-5 py-4 bg-surface border border-default rounded-card">
           <p class="text-xs text-dim mb-3">최근 24시간</p>
           {#if pipelineRows.length > 0}
             <div class="space-y-3">
@@ -522,9 +448,7 @@
                     <span class="text-dim">
                       {row.label}
                       {#if row.oldestPendingAgeSec && row.oldestPendingAgeSec > 600}
-                        <span class="ml-1 text-warning" title="가장 오래된 pending 의 경과 시간">
-                          ({formatAge(row.oldestPendingAgeSec)})
-                        </span>
+                        <span class="ml-1 text-warning" title="가장 오래된 pending 의 경과 시간">({formatAge(row.oldestPendingAgeSec)})</span>
                       {/if}
                     </span>
                     <span class="text-dim tabular-nums">
@@ -551,22 +475,14 @@
   </div>
 </div>
 
+{#snippet stat(value: string, label: string, colorClass = 'text-text')}
+  <div class="flex flex-col items-start px-4 first:pl-0 border-l border-default first:border-l-0 min-w-[64px]">
+    <span class="text-xl font-bold tracking-tight leading-none {colorClass}">{value}</span>
+    <span class="text-[10px] text-faint mt-1 uppercase tracking-wide">{label}</span>
+  </div>
+{/snippet}
+
 <style>
-  details[open] .details-chevron { transform: rotate(90deg); }
+  details[open] :global(.details-chevron) { transform: rotate(90deg); }
   details summary::-webkit-details-marker { display: none; }
-  .memo-content-pin :global(p) { margin: 0.2em 0; }
-  .memo-content-pin :global(ul), .memo-content-pin :global(ol) { margin: 0.2em 0; padding-left: 1.5em; }
-  .memo-content-pin :global(code) { background: var(--bg); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; }
-  .memo-content-pin :global(a) { color: var(--accent); }
-  .memo-content-pin :global(.memo-checkbox) { cursor: pointer; width: 14px; height: 14px; accent-color: var(--accent); vertical-align: middle; margin-right: 3px; }
-  .memo-content-pin :global(li:has(.memo-checkbox)) { list-style: none; margin-left: -1.5em; }
-  .memo-content-pin :global(.memo-task-done) { opacity: 0.5; text-decoration: line-through; }
-  /* 체크 후 10초 경과 항목 자동 숨김 (`show-hidden` 클래스로 토글 해제) */
-  .memo-content-pin :global(.memo-task-hidden) { display: none; }
-  .memo-content-pin.show-hidden :global(.memo-task-hidden) { display: list-item; }
-  .memo-content-pin :global(.due-badge) { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 8px; margin-left: 3px; }
-  .memo-content-pin :global(.due-overdue) { background: rgba(245, 86, 78, 0.15); color: var(--error); }
-  .memo-content-pin :global(.due-soon) { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
-  .memo-content-pin :global(.due-normal) { background: var(--surface); color: var(--text-dim); }
-  .memo-content-pin :global(.due-done) { background: var(--surface); color: var(--text-dim); opacity: 0.6; }
 </style>
diff --git a/frontend/src/routes/digest/+page.svelte b/frontend/src/routes/digest/+page.svelte
index c150f91..bf282af 100644
--- a/frontend/src/routes/digest/+page.svelte
+++ b/frontend/src/routes/digest/+page.svelte
@@ -410,20 +410,20 @@
 </div><!-- /.digest-page -->
 
 <style>
-  /* ── 웜 팔레트 로컬 재정의 ──
+  /* ── 세이지 팔레트 로컬 재정의 ──
      앱 :root 다크 토큰(--surface:#1a1d27, --accent:파랑 등)이 하위 var() 로 새지 않도록
-     이 subtree 에서 웜값으로 덮어쓴다. 하위 모든 var(--surface/--card/--line/--brand …)는
+     이 subtree 에서 세이지값으로 덮어쓴다. 하위 모든 var(--surface/--card/--line/--brand …)는
      여기서 해석된다. 검정(#000/#1f2024) 미사용. */
   .digest-page {
-    --brand: #d97757;
-    --brand-d: #c2603f;
-    --surface: #f0eee6;
+    --brand: #4f8a6b;
+    --brand-d: #3d7256;
+    --surface: #ecf0e8;
     --card: #fff;
-    --ink: #2e2420;
-    --muted: #6b6f76;
-    --line: #e3e0d6;
+    --ink: #23291f;
+    --muted: #697061;
+    --line: #dde3d6;
     font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
-    color: #3a322a;
+    color: #333a2d;
   }
 
   /* ── App shell ── */
@@ -437,14 +437,14 @@
 
   /* ── Masthead ── */
   header.bar {
-    background: #faf7f1;
+    background: #f4f7f1;
     border-bottom: 3px solid var(--brand);
     padding: 0 32px;
     display: flex;
     align-items: center;
     gap: 0;
     min-height: 56px;
-    box-shadow: 0 1px 0 #e3e0d6;
+    box-shadow: 0 1px 0 #dde3d6;
   }
   header.bar .mark {
     display: flex;
@@ -467,7 +467,7 @@
   header.bar h1 {
     font-size: 15px;
     font-weight: 700;
-    color: #3a322a;
+    color: #333a2d;
     margin: 0;
     letter-spacing: -0.01em;
     white-space: nowrap;
@@ -493,11 +493,11 @@
   header.bar .stat-val {
     font-size: 13px;
     font-weight: 700;
-    color: #3a322a;
+    color: #333a2d;
   }
   header.bar .stat-lbl {
     font-size: 10px;
-    color: #9a8e84;
+    color: #9aa090;
     letter-spacing: 0.04em;
   }
 
@@ -508,20 +508,20 @@
     gap: 4px;
   }
   .date-btn {
-    background: #f0eee6;
-    border: 1px solid #d8d3c8;
+    background: #ecf0e8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     width: 26px;
     height: 28px;
     font-size: 14px;
     font-weight: 700;
-    color: #5a4f46;
+    color: #4a5142;
     cursor: pointer;
     line-height: 1;
     transition: background 0.15s, color 0.15s;
   }
   .date-btn:hover:not(:disabled) {
-    background: #e7e2d6;
+    background: #e3ebdf;
     color: var(--brand-d);
   }
   .date-btn:disabled {
@@ -529,13 +529,13 @@
     cursor: not-allowed;
   }
   .date-select {
-    background: #f0eee6;
-    border: 1px solid #d8d3c8;
+    background: #ecf0e8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     padding: 4px 8px;
     font-size: 12px;
     font-weight: 600;
-    color: #5a4f46;
+    color: #4a5142;
     letter-spacing: 0.02em;
     max-width: 220px;
     cursor: pointer;
@@ -561,7 +561,7 @@
     padding: 10px 14px;
     font-size: 12px;
     font-weight: 600;
-    color: #7a6e64;
+    color: #697061;
     cursor: pointer;
     border: none;
     background: none;
@@ -571,8 +571,8 @@
     font-family: inherit;
   }
   .country-nav .nav-item:hover {
-    color: #3a322a;
-    border-bottom-color: #d8d3c8;
+    color: #333a2d;
+    border-bottom-color: #cfd7c6;
   }
   .country-nav .nav-item.active {
     color: var(--brand);
@@ -586,16 +586,16 @@
     border-radius: 2px;
     letter-spacing: 0.05em;
     background: var(--surface);
-    color: #7a6e64;
+    color: #697061;
   }
   .country-nav .nav-item.active .cc-chip {
-    background: rgba(217, 119, 87, 0.15);
+    background: rgba(79, 138, 107, 0.15);
     color: var(--brand);
   }
   .country-nav .topic-count {
     font-size: 10px;
     font-weight: 400;
-    color: #9a8e84;
+    color: #9aa090;
   }
 
   /* ── Body ── */
@@ -626,7 +626,7 @@
   .edition-line .edition-date {
     font-size: 12px;
     font-weight: 600;
-    color: #7a6e64;
+    color: #697061;
     letter-spacing: 0.04em;
   }
   .edition-line .edition-sep {
@@ -636,13 +636,13 @@
   }
   .edition-line .edition-sub {
     font-size: 11px;
-    color: #9a8e84;
+    color: #9aa090;
   }
 
   /* ── Lead story block ── */
   .lead-block {
     background: var(--card);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     border-top: 4px solid var(--brand);
     border-radius: 4px;
     padding: 28px 32px 24px;
@@ -657,7 +657,7 @@
     right: 0;
     width: 200px;
     height: 100%;
-    background: linear-gradient(to left, rgba(217, 119, 87, 0.05), transparent);
+    background: linear-gradient(to left, rgba(79, 138, 107, 0.05), transparent);
     pointer-events: none;
   }
   .lead-meta {
@@ -683,9 +683,9 @@
     gap: 5px;
     font-size: 11px;
     font-weight: 600;
-    color: #3a322a;
+    color: #333a2d;
     background: var(--surface);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     padding: 3px 8px;
     border-radius: 3px;
   }
@@ -700,27 +700,27 @@
   }
   .lead-meta .cnt-badge {
     font-size: 11px;
-    color: #7a6e64;
+    color: #697061;
     display: flex;
     align-items: center;
     gap: 4px;
   }
   .lead-meta .cnt-badge strong {
-    color: #3a322a;
+    color: #333a2d;
     font-weight: 700;
   }
   .lead-headline {
     font-size: 28px;
     font-weight: 800;
     line-height: 1.25;
-    color: #2e2420;
+    color: #23291f;
     letter-spacing: -0.02em;
     margin: 0 0 14px;
   }
   .lead-summary {
     font-size: 14px;
     line-height: 1.75;
-    color: #5a4f46;
+    color: #4a5142;
     margin: 0 0 20px;
     max-width: 680px;
   }
@@ -747,7 +747,7 @@
   .lead-articles a {
     font-size: 13px;
     font-weight: 600;
-    color: #3a322a;
+    color: #333a2d;
     text-decoration: none;
     line-height: 1.45;
   }
@@ -766,7 +766,7 @@
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    color: #9a8e84;
+    color: #9aa090;
     white-space: nowrap;
   }
   .lead-imp-bar .bar-track {
@@ -800,7 +800,7 @@
     font-weight: 800;
     letter-spacing: 0.12em;
     text-transform: uppercase;
-    color: #9a8e84;
+    color: #9aa090;
     white-space: nowrap;
   }
   .section-head .sh-line {
@@ -820,7 +820,7 @@
   /* ── Story card ── */
   .story-card {
     background: var(--card);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     padding: 18px 20px 16px;
     display: flex;
@@ -829,7 +829,7 @@
     transition: box-shadow 0.15s;
   }
   .story-card:hover {
-    box-shadow: 0 2px 12px rgba(90, 70, 55, 0.09);
+    box-shadow: 0 2px 12px rgba(74, 81, 66, 0.09);
   }
   .story-card.featured {
     border-top: 3px solid var(--brand-d);
@@ -846,9 +846,9 @@
     gap: 5px;
     font-size: 10px;
     font-weight: 600;
-    color: #3a322a;
+    color: #333a2d;
     background: var(--surface);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     padding: 2px 7px;
     border-radius: 3px;
   }
@@ -863,21 +863,21 @@
   }
   .card-meta .cnt-tag {
     font-size: 10px;
-    color: #9a8e84;
+    color: #9aa090;
     margin-left: auto;
   }
   .card-title {
     font-size: 15px;
     font-weight: 700;
     line-height: 1.35;
-    color: #2e2420;
+    color: #23291f;
     letter-spacing: -0.01em;
     margin: 0;
   }
   .card-summary {
     font-size: 12px;
     line-height: 1.65;
-    color: #5a4f46;
+    color: #4a5142;
     margin: 0;
     flex: 1;
   }
@@ -891,7 +891,7 @@
   .card-articles a {
     font-size: 11px;
     font-weight: 600;
-    color: #3a322a;
+    color: #333a2d;
     text-decoration: none;
     line-height: 1.4;
     display: flex;
@@ -904,7 +904,7 @@
     width: 3px;
     height: 3px;
     border-radius: 50%;
-    background: #b8a898;
+    background: #9aa090;
     flex-shrink: 0;
     margin-top: 5px;
   }
@@ -923,7 +923,7 @@
   .card-imp .imp-val {
     font-size: 10px;
     font-weight: 600;
-    color: #9a8e84;
+    color: #9aa090;
   }
 
   /* ── Sidebar stack ── */
@@ -934,7 +934,7 @@
   }
   .sidebar-card {
     background: var(--card);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     padding: 14px 16px;
     display: flex;
@@ -958,24 +958,24 @@
   .sidebar-card .cc-name {
     font-size: 10px;
     font-weight: 600;
-    color: #7a6e64;
+    color: #697061;
   }
   .sidebar-card .sc-cnt {
     font-size: 10px;
-    color: #9a8e84;
+    color: #9aa090;
     margin-left: auto;
   }
   .sidebar-card .s-title {
     font-size: 13px;
     font-weight: 700;
     line-height: 1.35;
-    color: #2e2420;
+    color: #23291f;
     margin: 0;
   }
   .sidebar-card .s-summary {
     font-size: 11px;
     line-height: 1.55;
-    color: #5a4f46;
+    color: #4a5142;
     margin: 0;
   }
   .sidebar-card .s-link {
@@ -995,7 +995,7 @@
   }
   .compact-card {
     background: var(--card);
-    border: 1px solid #d8d3c8;
+    border: 1px solid #cfd7c6;
     border-radius: 4px;
     padding: 14px 16px;
     display: flex;
@@ -1019,24 +1019,24 @@
   .compact-card .c-ko {
     font-size: 10px;
     font-weight: 600;
-    color: #7a6e64;
+    color: #697061;
   }
   .compact-card .c-cnt {
     font-size: 10px;
-    color: #9a8e84;
+    color: #9aa090;
     margin-left: auto;
   }
   .compact-card .c-title {
     font-size: 13px;
     font-weight: 700;
     line-height: 1.35;
-    color: #2e2420;
+    color: #23291f;
     margin: 0;
   }
   .compact-card .c-summary {
     font-size: 11px;
     line-height: 1.55;
-    color: #5a4f46;
+    color: #4a5142;
     margin: 0;
     flex: 1;
   }
@@ -1056,11 +1056,11 @@
   .compact-card .c-imp-fill {
     height: 100%;
     border-radius: 1px;
-    background: rgba(217, 119, 87, 0.6);
+    background: rgba(79, 138, 107, 0.6);
   }
 
   /* ── Importance swatches ── */
-  .imp-high { background: rgba(217, 119, 87, 0.85); }
+  .imp-high { background: rgba(79, 138, 107, 0.85); }
 
   /* 극단적 긴 무공백 토큰(연속 CJK·URL) 가로 오버플로 방어 */
   .lead-headline, .lead-summary, .card-title, .card-summary,
diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte
index 567708c..0aad960 100644
--- a/frontend/src/routes/documents/+page.svelte
+++ b/frontend/src/routes/documents/+page.svelte
@@ -1,13 +1,15 @@
 <script>
+  // 문서 /documents — 확정 시안 'DEVONthink 컬럼 브라우저' 전면 재작성.
+  // 레이아웃: [리스트 컬럼 ~340px] [리더(DocumentViewer) 1fr] [인스펙터 ~300px, ⓘ 토글].
+  // 데스크탑=3-pane / 모바일=흐름형(리스트 → 풀스크린 리더 + 정보 하단시트 Drawer).
+  // 기존 기능(검색·모드·AI답변·필터칩·일괄작업·키보드내비·업로드·페이지네이션)은 전부 흡수.
+  // See Also(관련 문서)는 벡터 유사도 엔드포인트 부재(코드 TODO)라 degrade — eid 세션 후 백엔드.
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
   import { addToast } from '$lib/stores/toast';
-  import { Info, List, LayoutGrid, ChevronLeft, X, Plus, Trash2, Tag, FolderTree, Rows3, Rows2, Sparkles } from 'lucide-svelte';
-  import DocumentCard from '$lib/components/DocumentCard.svelte';
-  import DocumentTable from '$lib/components/DocumentTable.svelte';
+  import { Info, X, Plus, Trash2, Tag, FolderTree, Sparkles, ChevronLeft, ArrowUpDown } from 'lucide-svelte';
   import DocumentViewer from '$lib/components/DocumentViewer.svelte';
-  import DocumentMetaRail from '$lib/components/DocumentMetaRail.svelte';
   import UploadDropzone from '$lib/components/UploadDropzone.svelte';
   import Drawer from '$lib/components/ui/Drawer.svelte';
   import Modal from '$lib/components/ui/Modal.svelte';
@@ -20,13 +22,11 @@
   import { useListKeyboardNav } from '$lib/composables/useListKeyboardNav.svelte';
   import { pLimit } from '$lib/utils/pLimit';
   import { isQuestion } from '$lib/utils/isQuestion';
+  import { domainBgClass, domainLabel } from '$lib/utils/domainSlug';
   import AskAnswerCard from '$lib/components/AskAnswerCard.svelte';
 
-  // D.2: 필터 칩에서 사용할 format 화이트리스트.
-  // 백엔드 `GET /documents/?format=...` 파라미터가 이미 받음.
   const FORMATS = ['pdf', 'hwp', 'hwpx', 'md', 'docx', 'xlsx', 'png', 'jpg'];
 
-  // D.3: bulk 도메인 옵션 (Sidebar DOMAIN_COLORS와 일치)
   const DOMAIN_OPTIONS = [
     { value: 'Knowledge/Philosophy', label: 'Knowledge / Philosophy' },
     { value: 'Knowledge/Language', label: 'Knowledge / Language' },
@@ -39,24 +39,6 @@
 
   const MAX_SELECTION = 50;
 
-  // 뷰 모드 (localStorage 기억)
-  let viewMode = $state(typeof localStorage !== 'undefined' ? (localStorage.getItem('viewMode') || 'card') : 'card');
-  function toggleViewMode() {
-    viewMode = viewMode === 'card' ? 'table' : 'card';
-    if (typeof localStorage !== 'undefined') localStorage.setItem('viewMode', viewMode);
-  }
-
-  // D.5: 테이블 밀도 (localStorage 기억)
-  let tableDensity = $state(
-    typeof localStorage !== 'undefined'
-      ? (localStorage.getItem('tableDensity') || 'comfortable')
-      : 'comfortable'
-  );
-  function toggleDensity() {
-    tableDensity = tableDensity === 'compact' ? 'comfortable' : 'compact';
-    if (typeof localStorage !== 'undefined') localStorage.setItem('tableDensity', tableDensity);
-  }
-
   let documents = $state([]);
   let total = $state(0);
   let loading = $state(true);
@@ -65,22 +47,18 @@
   let searchResults = $state(null);
   let selectedDoc = $state(null);
 
-  // Phase D: 이드 답변 상태
+  // 이드 답변 상태 (질문형 검색)
   let askData = $state(null);
   let askLoading = $state(false);
   let askError = $state(false);
   let askDismissed = $state(false);
 
-  /** ask 호출 래퍼 — 향후 GET→POST 전환 시 여기만 수정 */
   async function askSearch(q) {
-    askLoading = true;
-    askError = false;
-    askData = null;
+    askLoading = true; askError = false; askData = null;
     try {
       askData = await api(`/search/ask?q=${encodeURIComponent(q)}&limit=10`);
     } catch {
-      askError = true;
-      askData = null;
+      askError = true; askData = null;
     } finally {
       askLoading = false;
     }
@@ -93,45 +71,25 @@
     )
   );
 
-  // D.1: 3-패널 레이아웃 상태.
-  // - xl+ : inline rail 사용 (metaRailOpen, localStorage persistent)
-  // - < xl: Drawer 프리미티브 사용 (ui.openDrawer('meta'))
+  // 인스펙터(우측) 토글 — xl+ inline, < xl Drawer.
   const isXl = useIsXl();
-
-  let metaRailOpen = $state(
-    typeof localStorage !== 'undefined'
-      ? localStorage.getItem('metaRailOpen') !== 'false'
-      : true
+  let inspectorOpen = $state(
+    typeof localStorage !== 'undefined' ? localStorage.getItem('inspectorOpen') !== 'false' : true
   );
-
-  function setMetaRailOpen(v) {
-    metaRailOpen = v;
-    if (typeof localStorage !== 'undefined') {
-      localStorage.setItem('metaRailOpen', String(v));
-    }
+  function setInspectorOpen(v) {
+    inspectorOpen = v;
+    if (typeof localStorage !== 'undefined') localStorage.setItem('inspectorOpen', String(v));
   }
-
   function toggleInfoPanel() {
     if (!selectedDoc) return;
-    if (isXl.current) {
-      setMetaRailOpen(!metaRailOpen);
-    } else {
-      if (ui.isDrawerOpen('meta')) ui.closeDrawer();
-      else ui.openDrawer('meta');
-    }
+    if (isXl.current) setInspectorOpen(!inspectorOpen);
+    else { if (ui.isDrawerOpen('meta')) ui.closeDrawer(); else ui.openDrawer('meta'); }
   }
-
-  function handleDocDelete() {
-    selectedDoc = null;
-    if (ui.isDrawerOpen('meta')) ui.closeDrawer();
-    loadDocuments();
-  }
-
-  // xl+ 진입 시 열려있던 drawer는 자동으로 닫는다 (rail로 승계).
+  let isPanelActive = $derived(
+    selectedDoc ? (isXl.current ? inspectorOpen : ui.isDrawerOpen('meta')) : false
+  );
   $effect(() => {
-    if (isXl.current && ui.isDrawerOpen('meta')) {
-      ui.closeDrawer();
-    }
+    if (isXl.current && ui.isDrawerOpen('meta')) ui.closeDrawer();
   });
 
   // URL params → filter
@@ -143,69 +101,53 @@
   let filterFormat = $derived($page.url.searchParams.get('format') || '');
   let filterCategory = $derived($page.url.searchParams.get('category') || '');
 
-  // D.2: 필터 칩 popover 상태
+  // 필터 칩 popover
   let tagPopoverOpen = $state(false);
   let formatPopoverOpen = $state(false);
 
-  // D.3: 다중 선택 + bulk action 상태
+  // 다중 선택 + bulk
   let selectedIds = $state(new Set());
   let bulkDomainValue = $state('');
   let bulkTagValue = $state('');
   let bulkBusy = $state(false);
 
-  // D.4: 키보드 네비게이션
-  let kbIndex = $state(0);
-
-  function scrollSelectedIntoView() {
-    // 다음 tick에 DOM 업데이트 후 선택 행으로 스크롤
-    queueMicrotask(() => {
-      const el = document.querySelector('[data-kb-selected="true"]');
-      if (el instanceof HTMLElement) {
-        el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      }
-    });
+  // 정렬 (클라이언트, 현재 페이지 한정) — 시안 제목/수정 sortable
+  let sortKey = $state(null); // 'title' | 'updated' | null(서버순서)
+  let sortDir = $state('asc');
+  function toggleSort(key) {
+    if (sortKey === key) sortDir = sortDir === 'asc' ? 'desc' : 'asc';
+    else { sortKey = key; sortDir = key === 'updated' ? 'desc' : 'asc'; }
   }
 
+  // 키보드 네비게이션
+  let kbIndex = $state(0);
+  function scrollSelectedIntoView() {
+    queueMicrotask(() => {
+      const el = document.querySelector('[data-kb-selected="true"]');
+      if (el instanceof HTMLElement) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    });
+  }
   useListKeyboardNav({
-    get items() {
-      return items;
-    },
-    get index() {
-      return kbIndex;
-    },
-    setIndex(i) {
-      kbIndex = i;
-      scrollSelectedIntoView();
-    },
-    onenter(doc) {
-      if (doc) selectDoc(doc);
-    },
+    get items() { return sortedItems; },
+    get index() { return kbIndex; },
+    setIndex(i) { kbIndex = i; scrollSelectedIntoView(); },
+    onenter(doc) { if (doc) selectDoc(doc); },
   });
 
   $effect(() => {
-    const _p = currentPage;
-    const _d = filterDomain;
-    const _s = filterSubGroup;
-    const _t = filterTag;
-    const _src = filterSource;
-    const _f = filterFormat;
-    const _c = filterCategory;
+    const _p = currentPage, _d = filterDomain, _s = filterSubGroup, _t = filterTag,
+      _src = filterSource, _f = filterFormat, _c = filterCategory;
     const urlQ = $page.url.searchParams.get('q') || '';
     const urlMode = $page.url.searchParams.get('mode') || 'hybrid';
-
     searchQuery = urlQ;
     searchMode = urlMode;
     selectedDoc = null;
-    selectedIds = new Set(); // D.3: URL/필터 변경 시 선택 초기화
-    kbIndex = 0; // D.4: 키보드 커서 초기화
+    selectedIds = new Set();
+    kbIndex = 0;
     askData = null; askLoading = false; askError = false; askDismissed = false;
     if (ui.isDrawerOpen('meta')) ui.closeDrawer();
-
-    if (urlQ) {
-      doSearch(urlQ, urlMode);
-    } else {
-      loadDocuments();
-    }
+    if (urlQ) doSearch(urlQ, urlMode);
+    else loadDocuments();
   });
 
   async function loadDocuments() {
@@ -214,18 +156,17 @@
     try {
       const params = new URLSearchParams();
       params.set('page', String(currentPage));
-      params.set('page_size', '20');
+      params.set('page_size', '50');
       if (filterDomain) params.set('domain', filterDomain);
       if (filterSubGroup) params.set('sub_group', filterSubGroup);
       if (filterTag) params.set('tag', filterTag);
       if (filterSource) params.set('source', filterSource);
       if (filterFormat) params.set('format', filterFormat);
       if (filterCategory) params.set('category', filterCategory);
-
       const data = await api(`/documents/?${params}`);
       documents = data.items;
       total = data.total;
-    } catch (err) {
+    } catch {
       addToast('error', '문서 목록 로딩 실패');
     } finally {
       loading = false;
@@ -235,44 +176,26 @@
   function submitSearch() {
     const params = new URLSearchParams($page.url.searchParams);
     params.delete('page');
-    if (searchQuery.trim()) {
-      params.set('q', searchQuery.trim());
-    } else {
-      params.delete('q');
-    }
-    if (searchMode !== 'hybrid') {
-      params.set('mode', searchMode);
-    } else {
-      params.delete('mode');
-    }
-    for (const [key, val] of [...params.entries()]) {
-      if (!val) params.delete(key);
-    }
+    if (searchQuery.trim()) params.set('q', searchQuery.trim()); else params.delete('q');
+    if (searchMode !== 'hybrid') params.set('mode', searchMode); else params.delete('mode');
+    for (const [key, val] of [...params.entries()]) if (!val) params.delete(key);
     const qs = params.toString();
     goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
   }
-
   function handleSearchKeydown(e) {
     if (e.key === 'Enter' && !e.isComposing) {
-      e.preventDefault();
-      e.stopPropagation(); // 키보드 nav의 Enter(selectDoc) 차단
-      submitSearch();
+      e.preventDefault(); e.stopPropagation(); submitSearch();
     }
   }
 
   async function doSearch(q, mode) {
     loading = true;
-
-    // 질문형이면 ask 병렬 호출 (검색 결과와 독립)
-    if (isQuestion(q)) {
-      askSearch(q); // fire-and-forget, 자체적으로 askLoading/askData 관리
-    }
-
+    if (isQuestion(q)) askSearch(q);
     try {
       const data = await api(`/search/?q=${encodeURIComponent(q)}&mode=${mode}&limit=50`);
       searchResults = data.results;
       total = data.total;
-    } catch (err) {
+    } catch {
       addToast('error', '검색 실패');
       searchResults = [];
     } finally {
@@ -282,11 +205,7 @@
 
   function changePage(p) {
     const params = new URLSearchParams($page.url.searchParams);
-    if (p > 1) {
-      params.set('page', String(p));
-    } else {
-      params.delete('page');
-    }
+    if (p > 1) params.set('page', String(p)); else params.delete('page');
     const qs = params.toString();
     goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
   }
@@ -296,144 +215,128 @@
     searchQuery = '';
   }
 
-  // D.2: 필터 add/remove 헬퍼 — URL 라운드트립으로 필터 상태 관리.
   function addFilter(key, value) {
     const params = new URLSearchParams($page.url.searchParams);
     params.set(key, value);
     params.delete('page');
     const qs = params.toString();
     goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
-    tagPopoverOpen = false;
-    formatPopoverOpen = false;
+    tagPopoverOpen = false; formatPopoverOpen = false;
   }
-
   function removeFilter(key) {
     const params = new URLSearchParams($page.url.searchParams);
     params.delete(key);
-    // domain 제거 시 sub_group도 함께 제거 (의존성)
     if (key === 'domain') params.delete('sub_group');
     const qs = params.toString();
     goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
   }
 
-  function selectDoc(doc) {
-    selectedDoc = selectedDoc?.id === doc.id ? null : doc;
+  async function selectDoc(doc) {
+    if (selectedDoc?.id === doc.id) { selectedDoc = null; return; }
+    selectedDoc = doc; // 즉시 표시(리더 + 기본 인스펙터)
+    // 인스펙터 풀 메타 하이드레이션 — 검색 결과(SearchResult)는 메타가 빈약(태그/크기/하위/md상태/읽음 없음).
+    // 풀 문서를 조회해 채운다(기존 GET /documents/{id}, 백엔드 무변). 리스트 모드도 md상태 등 보강.
+    try {
+      const full = await api(`/documents/${doc.id}`);
+      if (selectedDoc?.id === doc.id) selectedDoc = { ...doc, ...full };
+    } catch { /* 실패 시 기본 정보 유지 */ }
   }
 
-  // D.3: 다중 선택 핸들러
-  function handleSelectionChange(next) {
+  // bulk 선택
+  function toggleRowSelect(id, checked) {
+    const next = new Set(selectedIds);
+    if (checked) next.add(id); else next.delete(id);
     selectedIds = next;
   }
+  function selectAll() { selectedIds = new Set(sortedItems.map((d) => d.id)); }
+  function clearSelection() { selectedIds = new Set(); }
 
-  function selectAll() {
-    selectedIds = new Set(items.map((d) => d.id));
-  }
-
-  function clearSelection() {
-    selectedIds = new Set();
-  }
-
-  // D.3: bulk action 실행기 — pLimit(5) + Promise.allSettled.
-  // TODO(backend): POST /documents/batch-update — 단일 트랜잭션으로 교체.
   async function runBulk(label, taskFn) {
     const ids = [...selectedIds];
     if (ids.length === 0 || ids.length > MAX_SELECTION) return;
     bulkBusy = true;
     const limit = pLimit(5);
-    const results = await Promise.allSettled(
-      ids.map((id) => limit(() => taskFn(id)))
-    );
+    const results = await Promise.allSettled(ids.map((id) => limit(() => taskFn(id))));
     bulkBusy = false;
     const success = results.filter((r) => r.status === 'fulfilled').length;
     const failed = results.length - success;
-    if (failed > 0) {
-      addToast('error', `${label}: ${failed}건 실패`);
-    }
-    if (success > 0) {
-      addToast('success', `${label}: ${success}건 완료`);
-    }
+    if (failed > 0) addToast('error', `${label}: ${failed}건 실패`);
+    if (success > 0) addToast('success', `${label}: ${success}건 완료`);
     clearSelection();
     loadDocuments();
   }
-
   async function bulkApplyDomain() {
     if (!bulkDomainValue) return;
     const domain = bulkDomainValue;
     await runBulk('도메인 변경', (id) =>
-      api(`/documents/${id}`, {
-        method: 'PATCH',
-        body: JSON.stringify({ ai_domain: domain }),
-      })
-    );
+      api(`/documents/${id}`, { method: 'PATCH', body: JSON.stringify({ ai_domain: domain }) }));
     bulkDomainValue = '';
     ui.closeModal('bulk-domain');
   }
-
   async function bulkAddTag() {
     const tag = bulkTagValue.trim();
     if (!tag) return;
     await runBulk('태그 추가', async (id) => {
-      const doc = items.find((d) => d.id === id);
-      const existing = Array.isArray(doc?.ai_tags) ? doc.ai_tags : [];
-      if (existing.includes(tag)) return; // 이미 있으면 skip
-      const nextTags = [...existing, tag];
-      return api(`/documents/${id}`, {
-        method: 'PATCH',
-        body: JSON.stringify({ ai_tags: nextTags }),
-      });
+      const doc = sortedItems.find((d) => d.id === id);
+      // ★ 검색 결과(SearchResult)는 ai_tags 가 없음 → 빈 배열로 PATCH 하면 기존 태그 전체 유실(덮어쓰기).
+      //   미확인이면 풀 문서를 조회해 실제 태그를 머지(데이터 손실 방지).
+      let existing = Array.isArray(doc?.ai_tags) ? doc.ai_tags : null;
+      if (existing == null) {
+        try { const full = await api(`/documents/${id}`); existing = Array.isArray(full?.ai_tags) ? full.ai_tags : []; }
+        catch { return; } // 현재 태그를 못 읽으면 덮어쓰지 않고 건너뜀
+      }
+      if (existing.includes(tag)) return;
+      return api(`/documents/${id}`, { method: 'PATCH', body: JSON.stringify({ ai_tags: [...existing, tag] }) });
     });
     bulkTagValue = '';
     ui.closeModal('bulk-tag');
   }
-
   async function bulkDelete() {
-    await runBulk('삭제', (id) =>
-      api(`/documents/${id}?delete_file=true`, { method: 'DELETE' })
-    );
-    // ConfirmDialog가 자체적으로 닫힘
+    await runBulk('삭제', (id) => api(`/documents/${id}?delete_file=true`, { method: 'DELETE' }));
   }
 
   function handleKeydown(e) {
     if (e.key === 'Escape') {
-      ui.handleEscape(); // drawer/modal stack 우선순위로 중앙 처리
+      if (selectedDoc && !ui.isDrawerOpen('meta') && !isXl.current) { selectedDoc = null; return; }
+      ui.handleEscape();
     }
   }
 
-  let totalPages = $derived(Math.ceil(total / 20));
+  let totalPages = $derived(Math.ceil(total / 50));
   let items = $derived(searchResults || documents);
+  let sortedItems = $derived.by(() => {
+    // 검색 모드는 서버 관련도순 유지 + SearchResult 에 updated_at 부재(NaN 비교=무의미) → 클라 정렬 비활성
+    if (!sortKey || searchResults) return items;
+    const arr = [...items];
+    const dir = sortDir === 'asc' ? 1 : -1;
+    arr.sort((a, b) => {
+      if (sortKey === 'title') return dir * String(a.title || '').localeCompare(String(b.title || ''), 'ko');
+      const ad = new Date(a.updated_at || a.created_at).getTime();
+      const bd = new Date(b.updated_at || b.created_at).getTime();
+      return dir * (ad - bd);
+    });
+    return arr;
+  });
   let hasActiveFilters = $derived(
     !!filterDomain || !!filterSubGroup || !!filterTag || !!filterSource || !!filterFormat || !!searchQuery
   );
-
-  // D.3 derived
   let selectionCount = $derived(selectedIds.size);
   let selectionOverLimit = $derived(selectionCount > MAX_SELECTION);
   let allVisibleSelected = $derived(
-    items.length > 0 && items.every((d) => selectedIds.has(d.id))
+    sortedItems.length > 0 && sortedItems.every((d) => selectedIds.has(d.id))
   );
 
-  // D.4: 키보드 nav 커서 ID (scrollIntoView 대상)
-  // items가 변경되면 kbIndex를 범위 내로 clamp
   $effect(() => {
-    if (kbIndex >= items.length && items.length > 0) {
-      kbIndex = items.length - 1;
-    } else if (items.length === 0) {
-      kbIndex = 0;
-    }
+    if (kbIndex >= sortedItems.length && sortedItems.length > 0) kbIndex = sortedItems.length - 1;
+    else if (sortedItems.length === 0) kbIndex = 0;
   });
-  let kbSelectedId = $derived(items[kbIndex]?.id ?? null);
+  let kbSelectedId = $derived(sortedItems[kbIndex]?.id ?? null);
 
-  // D.2: 현재 결과 집계 — 상위 20개 태그 (클라이언트 집계, 백엔드 변경 없음).
+  // 현재 결과 상위 태그 (클라 집계)
   let topTags = $derived.by(() => {
     const counts = new Map();
-    for (const d of items) {
-      for (const t of d.ai_tags || []) {
-        counts.set(t, (counts.get(t) || 0) + 1);
-      }
-    }
-    return [...counts.entries()]
-      .sort((a, b) => b[1] - a[1])
-      .slice(0, 20);
+    for (const d of items) for (const t of d.ai_tags || []) counts.set(t, (counts.get(t) || 0) + 1);
+    return [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 20);
   });
 
   // 바깥 클릭으로 popover 닫기
@@ -442,35 +345,58 @@
     function onDocClick(e) {
       const target = e.target;
       if (!(target instanceof Element)) return;
-      if (!target.closest('[data-popover-root]')) {
-        tagPopoverOpen = false;
-        formatPopoverOpen = false;
-      }
+      if (!target.closest('[data-popover-root]')) { tagPopoverOpen = false; formatPopoverOpen = false; }
     }
     document.addEventListener('click', onDocClick);
     return () => document.removeEventListener('click', onDocClick);
   });
+
+  // ─── 표시 헬퍼 ───
+  function formatBadge(fmt) {
+    const f = (fmt || '').toLowerCase();
+    const label = f === 'md' ? 'MD' : `${(f || '?').toUpperCase()}→MD`;
+    let cls = 'bg-surface-active text-dim';
+    if (f === 'md') cls = 'bg-success/15 text-success';
+    else if (f === 'pdf') cls = 'bg-error/10 text-error';
+    else if (f === 'hwp' || f === 'hwpx') cls = 'bg-warning/15 text-warning';
+    else if (f === 'xlsx' || f === 'docx' || f === 'pptx') cls = 'bg-domain-engineering/15 text-domain-engineering';
+    return { label, cls };
+  }
+  function shortDate(iso) {
+    if (!iso) return '';
+    const d = new Date(iso);
+    const now = new Date();
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    return d.getFullYear() === now.getFullYear()
+      ? `${mm}-${dd}`
+      : `${String(d.getFullYear()).slice(2)}-${mm}-${dd}`;
+  }
+  function fileSizeLabel(bytes) {
+    if (bytes == null) return null;
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  }
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
 
-<div class="flex h-full">
-  <!-- 가운데: 기존 list + viewer 세로 split (변경 없음) -->
-  <div class="flex-1 min-w-0 flex flex-col min-h-0">
-  <!-- 상단 영역 -->
-  <div class="{selectedDoc ? 'h-[30%] shrink-0 border-b border-default' : 'flex-1'} flex flex-col min-h-0">
-    <!-- 업로드 드롭존 -->
+<div class="flex h-full min-h-0">
+
+  <!-- ═══ 좌: 리스트 컬럼 ═══ -->
+  <div class="{selectedDoc ? 'hidden lg:flex' : 'flex'} flex-col w-full lg:w-[340px] lg:shrink-0 lg:border-r border-default min-h-0">
     <UploadDropzone onupload={loadDocuments} />
 
-    <!-- 검색바 + 정보 버튼 (고정) -->
-    <div class="flex gap-2 px-4 py-2 shrink-0">
+    <!-- 검색바 -->
+    <div class="flex gap-2 px-3 py-2 shrink-0">
       <input
         data-search-input
         type="text"
         bind:value={searchQuery}
         onkeydown={handleSearchKeydown}
-        placeholder="검색어 입력 후 Enter (/ 키로 포커스)"
-        class="flex-1 px-3 py-1.5 bg-surface border border-default rounded-lg text-text text-sm focus:border-accent outline-none"
+        placeholder="검색 후 Enter (/ 포커스)"
+        class="flex-1 min-w-0 px-3 py-1.5 bg-surface border border-default rounded-lg text-text text-sm focus:border-accent outline-none"
       />
       <select
         bind:value={searchMode}
@@ -485,144 +411,53 @@
       {#if searchQuery.trim()}
         <a
           href={`/ask?q=${encodeURIComponent(searchQuery.trim())}`}
-          class="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-default text-dim hover:text-accent hover:border-accent transition-colors text-xs"
-          title="이 쿼리로 AI 답변 보기"
-        >
-          <Sparkles size={14} /> <span class="hidden sm:inline">AI 답변</span>
-        </a>
-      {/if}
-      <button
-        onclick={toggleViewMode}
-        class="p-1.5 rounded-lg border border-default text-dim hover:text-accent hover:border-accent transition-colors"
-        aria-label="뷰 모드 전환"
-        title={viewMode === 'card' ? '테이블 뷰' : '카드 뷰'}
-      >
-        {#if viewMode === 'card'}
-          <List size={16} />
-        {:else}
-          <LayoutGrid size={16} />
-        {/if}
-      </button>
-      {#if viewMode === 'table'}
-        <button
-          type="button"
-          onclick={toggleDensity}
-          class="p-1.5 rounded-lg border border-default text-dim hover:text-accent hover:border-accent transition-colors"
-          aria-label="밀도 전환"
-          title={tableDensity === 'compact' ? '여유 있게' : '촘촘하게'}
-        >
-          {#if tableDensity === 'compact'}
-            <Rows2 size={16} />
-          {:else}
-            <Rows3 size={16} />
-          {/if}
-        </button>
-      {/if}
-      {#if selectedDoc}
-        {@const isPanelActive = isXl.current ? metaRailOpen : ui.isDrawerOpen('meta')}
-        <button
-          type="button"
-          onclick={toggleInfoPanel}
-          class="p-1.5 rounded-lg border transition-colors {isPanelActive
-            ? 'border-accent text-accent bg-accent/10'
-            : 'border-default text-dim hover:text-accent hover:border-accent'}"
-          aria-label="문서 정보"
-          aria-pressed={isPanelActive}
-          title="문서 정보"
-        >
-          <Info size={16} />
-        </button>
+          class="flex items-center px-2 py-1.5 rounded-lg border border-default text-dim hover:text-accent hover:border-accent transition-colors"
+          title="이 쿼리로 AI 답변"
+        ><Sparkles size={14} /></a>
       {/if}
     </div>
 
-    <!-- D.2: 필터 칩 row -->
-    <div class="flex flex-wrap items-center gap-1.5 px-4 pb-2 shrink-0">
+    <!-- 필터 칩 row -->
+    <div class="flex flex-wrap items-center gap-1.5 px-3 pb-2 shrink-0">
       {#if filterDomain}
         <span class="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded bg-accent/15 text-accent border border-accent/30">
           {filterDomain.replace('Knowledge/', '')}{filterSubGroup ? ` / ${filterSubGroup}` : ''}
-          <button
-            type="button"
-            onclick={() => removeFilter('domain')}
-            class="hover:text-error -mr-0.5 ml-0.5"
-            aria-label="도메인 필터 제거"
-          >
-            <X size={10} />
-          </button>
+          <button type="button" onclick={() => removeFilter('domain')} class="hover:text-error -mr-0.5 ml-0.5" aria-label="도메인 필터 제거"><X size={10} /></button>
         </span>
       {/if}
-
       {#if filterTag}
         <span class="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded bg-surface text-text border border-default">
           #{filterTag}
-          <button
-            type="button"
-            onclick={() => removeFilter('tag')}
-            class="hover:text-error -mr-0.5 ml-0.5"
-            aria-label="태그 필터 제거"
-          >
-            <X size={10} />
-          </button>
+          <button type="button" onclick={() => removeFilter('tag')} class="hover:text-error -mr-0.5 ml-0.5" aria-label="태그 필터 제거"><X size={10} /></button>
         </span>
       {/if}
-
       {#if filterFormat}
         <span class="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded bg-surface text-text border border-default uppercase">
           {filterFormat}
-          <button
-            type="button"
-            onclick={() => removeFilter('format')}
-            class="hover:text-error -mr-0.5 ml-0.5"
-            aria-label="형식 필터 제거"
-          >
-            <X size={10} />
-          </button>
+          <button type="button" onclick={() => removeFilter('format')} class="hover:text-error -mr-0.5 ml-0.5" aria-label="형식 필터 제거"><X size={10} /></button>
         </span>
       {/if}
-
       {#if filterSource}
         <span class="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded bg-surface text-text border border-default">
           {filterSource}
-          <button
-            type="button"
-            onclick={() => removeFilter('source')}
-            class="hover:text-error -mr-0.5 ml-0.5"
-            aria-label="소스 필터 제거"
-          >
-            <X size={10} />
-          </button>
+          <button type="button" onclick={() => removeFilter('source')} class="hover:text-error -mr-0.5 ml-0.5" aria-label="소스 필터 제거"><X size={10} /></button>
         </span>
       {/if}
 
-      <!-- + 태그 popover -->
+      <!-- + 태그 -->
       <div class="relative" data-popover-root>
-        <button
-          type="button"
-          onclick={() => { tagPopoverOpen = !tagPopoverOpen; formatPopoverOpen = false; }}
+        <button type="button" onclick={() => { tagPopoverOpen = !tagPopoverOpen; formatPopoverOpen = false; }}
           class="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded bg-surface text-dim border border-default border-dashed hover:text-text hover:border-accent transition-colors"
-          aria-haspopup="listbox"
-          aria-expanded={tagPopoverOpen}
-        >
-          <Plus size={10} /> 태그
-        </button>
+          aria-haspopup="listbox" aria-expanded={tagPopoverOpen}><Plus size={10} /> 태그</button>
         {#if tagPopoverOpen}
-          <div
-            class="absolute top-full left-0 mt-1 z-dropdown bg-surface border border-default rounded-md shadow-lg min-w-[180px] max-h-[280px] overflow-y-auto py-1"
-            role="listbox"
-            aria-label="태그 선택"
-          >
+          <div class="absolute top-full left-0 mt-1 z-dropdown bg-surface border border-default rounded-md shadow-lg min-w-[180px] max-h-[280px] overflow-y-auto py-1" role="listbox" aria-label="태그 선택">
             {#if topTags.length === 0}
               <p class="text-[10px] text-dim px-3 py-2">현재 결과에 태그 없음</p>
             {:else}
               {#each topTags as [tag, count]}
-                <button
-                  type="button"
-                  role="option"
-                  aria-selected={filterTag === tag}
-                  onclick={() => addFilter('tag', tag)}
-                  class="flex items-center justify-between w-full text-left text-[11px] px-3 py-1 text-text hover:bg-surface-hover"
-                >
-                  <span>#{tag}</span>
-                  <span class="text-dim ml-2 tabular-nums">{count}</span>
+                <button type="button" role="option" aria-selected={filterTag === tag} onclick={() => addFilter('tag', tag)}
+                  class="flex items-center justify-between w-full text-left text-[11px] px-3 py-1 text-text hover:bg-surface-hover">
+                  <span>#{tag}</span><span class="text-dim ml-2 tabular-nums">{count}</span>
                 </button>
               {/each}
             {/if}
@@ -630,118 +465,146 @@
         {/if}
       </div>
 
-      <!-- + 형식 popover -->
+      <!-- + 형식 -->
       <div class="relative" data-popover-root>
-        <button
-          type="button"
-          onclick={() => { formatPopoverOpen = !formatPopoverOpen; tagPopoverOpen = false; }}
+        <button type="button" onclick={() => { formatPopoverOpen = !formatPopoverOpen; tagPopoverOpen = false; }}
           class="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded bg-surface text-dim border border-default border-dashed hover:text-text hover:border-accent transition-colors"
-          aria-haspopup="listbox"
-          aria-expanded={formatPopoverOpen}
-        >
-          <Plus size={10} /> 형식
-        </button>
+          aria-haspopup="listbox" aria-expanded={formatPopoverOpen}><Plus size={10} /> 형식</button>
         {#if formatPopoverOpen}
-          <div
-            class="absolute top-full left-0 mt-1 z-dropdown bg-surface border border-default rounded-md shadow-lg min-w-[140px] py-1"
-            role="listbox"
-            aria-label="형식 선택"
-          >
+          <div class="absolute top-full left-0 mt-1 z-dropdown bg-surface border border-default rounded-md shadow-lg min-w-[140px] py-1" role="listbox" aria-label="형식 선택">
             {#each FORMATS as fmt}
-              <button
-                type="button"
-                role="option"
-                aria-selected={filterFormat === fmt}
-                onclick={() => addFilter('format', fmt)}
-                class="flex items-center w-full text-left text-[11px] px-3 py-1 text-text hover:bg-surface-hover uppercase"
-              >
-                {fmt}
-              </button>
+              <button type="button" role="option" aria-selected={filterFormat === fmt} onclick={() => addFilter('format', fmt)}
+                class="flex items-center w-full text-left text-[11px] px-3 py-1 text-text hover:bg-surface-hover uppercase">{fmt}</button>
             {/each}
           </div>
         {/if}
       </div>
 
       {#if hasActiveFilters}
-        <button
-          type="button"
-          onclick={clearAllFilters}
-          class="text-[10px] text-dim hover:text-text px-2 py-0.5 ml-auto"
-        >
-          초기화
+        <button type="button" onclick={clearAllFilters} class="text-[10px] text-dim hover:text-text px-2 py-0.5 ml-auto">초기화</button>
+      {/if}
+    </div>
+
+    <!-- 선택 toolbar -->
+    {#if selectionCount > 0}
+      <div class="flex flex-wrap items-center gap-2 px-3 py-2 shrink-0 bg-accent/10 border-y border-accent/30">
+        <span class="text-xs font-medium {selectionOverLimit ? 'text-error' : 'text-accent'}">
+          {selectionCount}건 선택{#if selectionOverLimit}<span class="ml-1">(최대 {MAX_SELECTION} 초과)</span>{/if}
+        </span>
+        <button type="button" onclick={selectAll} disabled={allVisibleSelected} class="text-[11px] text-dim hover:text-text disabled:opacity-40">전체</button>
+        <button type="button" onclick={clearSelection} class="text-[11px] text-dim hover:text-text">해제</button>
+        <div class="flex-1"></div>
+        <button type="button" title="일괄 도메인" disabled={selectionOverLimit || bulkBusy} onclick={() => ui.openModal('bulk-domain')}
+          class="p-1.5 rounded-lg border border-default text-dim hover:text-accent hover:border-accent disabled:opacity-40"><FolderTree size={15} /></button>
+        <button type="button" title="일괄 태그" disabled={selectionOverLimit || bulkBusy} onclick={() => ui.openModal('bulk-tag')}
+          class="p-1.5 rounded-lg border border-default text-dim hover:text-accent hover:border-accent disabled:opacity-40"><Tag size={15} /></button>
+        <button type="button" title="일괄 삭제" disabled={selectionOverLimit || bulkBusy} onclick={() => ui.openModal('bulk-delete')}
+          class="p-1.5 rounded-lg border border-default text-dim hover:text-error hover:border-error disabled:opacity-40"><Trash2 size={15} /></button>
+      </div>
+    {/if}
+
+    <!-- 컬럼 헤더 + 결과 카운트 -->
+    <div class="flex items-center gap-2 px-3 py-1.5 shrink-0 border-b border-default bg-surface text-[10px] uppercase tracking-wide text-dim font-bold">
+      {#if searchResults}
+        <!-- 검색 모드: 서버 관련도순(클라 정렬 비활성, SearchResult 메타 부재) -->
+        <span>관련도순</span>
+        <span class="flex-1"></span>
+        {#if !loading}<span class="text-faint normal-case font-normal tracking-normal">{total}건</span>{/if}
+      {:else}
+        <button type="button" onclick={() => toggleSort('title')} class="flex items-center gap-1 hover:text-accent {sortKey === 'title' ? 'text-accent' : ''}">
+          제목 {#if sortKey === 'title'}<span>{sortDir === 'asc' ? '↑' : '↓'}</span>{:else}<ArrowUpDown size={10} class="opacity-50" />{/if}
+        </button>
+        <span class="flex-1"></span>
+        {#if !loading}<span class="text-faint normal-case font-normal tracking-normal">{total}건</span>{/if}
+        <button type="button" onclick={() => toggleSort('updated')} class="flex items-center gap-1 hover:text-accent {sortKey === 'updated' ? 'text-accent' : ''}">
+          수정 {#if sortKey === 'updated'}<span>{sortDir === 'asc' ? '↑' : '↓'}</span>{/if}
         </button>
       {/if}
     </div>
 
-    <!-- D.3: 선택 toolbar (selection.size > 0 시) -->
-    {#if selectionCount > 0}
-      <div
-        class="sticky top-0 z-dropdown flex flex-wrap items-center gap-2 px-4 py-2 shrink-0 bg-accent/10 border-y border-accent/30 backdrop-blur-sm"
-      >
-        <span class="text-xs font-medium {selectionOverLimit ? 'text-error' : 'text-accent'}">
-          {selectionCount}건 선택
-          {#if selectionOverLimit}
-            <span class="ml-1">(최대 {MAX_SELECTION}건 초과)</span>
+    <!-- 리스트 본문 -->
+    <div class="flex-1 overflow-y-auto overflow-x-hidden min-h-0">
+      {#if loading}
+        <div class="p-3 space-y-1.5">
+          {#each Array(8) as _}<div class="bg-surface rounded-lg border border-default animate-pulse h-12"></div>{/each}
+        </div>
+      {:else if sortedItems.length === 0}
+        <div class="text-center py-12 px-4 text-dim">
+          {#if searchQuery}
+            <p class="text-sm mb-2">'{searchQuery}' 결과 없음</p>
+            <button onclick={clearAllFilters} class="text-xs text-accent hover:underline">필터 초기화</button>
+          {:else if hasActiveFilters}
+            <p class="text-sm mb-2">이 분류에 문서가 없습니다</p>
+            <button onclick={clearAllFilters} class="text-xs text-accent hover:underline">필터 초기화</button>
+          {:else}
+            <p class="text-sm">등록된 문서가 없습니다</p>
           {/if}
-        </span>
-        <button
-          type="button"
-          onclick={selectAll}
-          disabled={allVisibleSelected}
-          class="text-[11px] text-dim hover:text-text disabled:opacity-40 disabled:cursor-not-allowed"
-        >
-          전체 선택
-        </button>
-        <button
-          type="button"
-          onclick={clearSelection}
-          class="text-[11px] text-dim hover:text-text"
-        >
-          선택 해제
+        </div>
+      {:else}
+        {#each sortedItems as doc (doc.id)}
+          {@const badge = formatBadge(doc.file_format)}
+          {@const isSel = selectedDoc?.id === doc.id}
+          <div
+            data-kb-selected={doc.id === kbSelectedId}
+            class="group flex items-start gap-2 px-3 py-2.5 border-b border-default cursor-pointer transition-colors
+              {isSel ? 'bg-accent/12' : 'odd:bg-surface/40 hover:bg-surface-hover'}
+              {doc.id === kbSelectedId && !isSel ? 'ring-1 ring-inset ring-accent/40' : ''}"
+            onclick={() => selectDoc(doc)}
+            onkeydown={(e) => { if (e.key === 'Enter') selectDoc(doc); }}
+            role="button"
+            tabindex="0"
+          >
+            <input
+              type="checkbox"
+              checked={selectedIds.has(doc.id)}
+              onclick={(e) => { e.stopPropagation(); toggleRowSelect(doc.id, e.currentTarget.checked); }}
+              class="mt-1 shrink-0 accent-accent {selectedIds.size > 0 ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity"
+              aria-label="선택"
+            />
+            <span class="w-2 h-2 rounded-sm mt-1.5 shrink-0 {domainBgClass(doc.ai_domain)}"></span>
+            <div class="flex-1 min-w-0">
+              <div class="text-[13px] font-medium text-text leading-snug truncate {isSel ? 'text-accent' : 'group-hover:text-accent'}">{doc.title || '제목 없음'}</div>
+              <div class="flex items-center gap-2 mt-1">
+                <span class="text-[10px] text-dim truncate">{domainLabel(doc.ai_domain)}</span>
+                <span class="text-[10px] text-faint shrink-0 tabular-nums ml-auto">{shortDate(doc.updated_at || doc.created_at)}</span>
+              </div>
+            </div>
+            <span class="text-[8.5px] font-extrabold rounded px-1.5 py-0.5 tracking-wide shrink-0 mt-0.5 {badge.cls}">{badge.label}</span>
+          </div>
+        {/each}
+
+        {#if !searchResults && totalPages > 1}
+          <div class="flex flex-wrap justify-center gap-1 p-3">
+            {#each Array(totalPages) as _, i}
+              <button onclick={() => changePage(i + 1)}
+                class="px-2.5 py-0.5 rounded text-xs transition-colors {currentPage === i + 1 ? 'bg-accent text-white' : 'bg-surface text-dim hover:text-text'}">{i + 1}</button>
+            {/each}
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </div>
+
+  <!-- ═══ 중앙: 리더 ═══ -->
+  <div class="{selectedDoc ? 'flex' : 'hidden lg:flex'} flex-1 min-w-0 flex-col min-h-0">
+    {#if selectedDoc}
+      <!-- 리더 상단 바: (모바일) 뒤로 / (lg) 인스펙터 토글 -->
+      <div class="flex items-center gap-2 px-3 py-1.5 shrink-0 border-b border-default bg-sidebar">
+        <button type="button" onclick={() => { selectedDoc = null; if (ui.isDrawerOpen('meta')) ui.closeDrawer(); }}
+          class="lg:hidden flex items-center gap-1 text-xs text-accent-hover font-medium" aria-label="목록으로">
+          <ChevronLeft size={15} /> 문서
         </button>
         <div class="flex-1"></div>
-        <Button
-          variant="secondary"
-          size="sm"
-          icon={FolderTree}
-          disabled={selectionOverLimit || bulkBusy}
-          onclick={() => ui.openModal('bulk-domain')}
-        >
-          일괄 도메인
-        </Button>
-        <Button
-          variant="secondary"
-          size="sm"
-          icon={Tag}
-          disabled={selectionOverLimit || bulkBusy}
-          onclick={() => ui.openModal('bulk-tag')}
-        >
-          일괄 태그
-        </Button>
-        <Button
-          variant="danger"
-          size="sm"
-          icon={Trash2}
-          disabled={selectionOverLimit || bulkBusy}
-          onclick={() => ui.openModal('bulk-delete')}
-        >
-          일괄 삭제
-        </Button>
+        <button type="button" onclick={toggleInfoPanel} aria-pressed={isPanelActive} title="문서 정보"
+          class="p-1.5 rounded-lg border transition-colors {isPanelActive ? 'border-accent text-accent bg-accent/10' : 'border-default text-dim hover:text-accent hover:border-accent'}">
+          <Info size={16} />
+        </button>
       </div>
-    {/if}
-
-    <!-- 스크롤 영역 (목록) -->
-    <div class="flex-1 overflow-y-auto overflow-x-hidden px-4">
-    <!-- 결과 헤더 — 카운트만. 필터는 위의 칩 row가 표시. -->
-    {#if !loading}
-      <div class="flex items-center mb-2">
-        <span class="text-[10px] text-dim">{total}건</span>
+      <div class="flex-1 min-h-0">
+        <DocumentViewer doc={selectedDoc} />
       </div>
-    {/if}
-
-    <!-- Phase D: 이드 답변 카드 (질문형 검색 시) -->
-    {#if showAskCard}
-      <div class="mb-3 min-h-[72px]">
+    {:else if showAskCard}
+      <div class="p-4 lg:p-6 overflow-y-auto">
         <AskAnswerCard
           data={askData}
           loading={askLoading}
@@ -750,162 +613,44 @@
           onDismiss={() => { askDismissed = true; }}
         />
       </div>
-    {/if}
-
-    <!-- 결과 -->
-    {#if loading}
-      <div class="space-y-1.5">
-        {#each Array(5) as _}
-          <div class="bg-surface rounded-lg p-3 border border-default animate-pulse h-14"></div>
-        {/each}
-      </div>
-    {:else if items.length === 0}
-      <div class="text-center py-12 text-dim">
-        {#if searchQuery}
-          <p class="text-sm mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
-          <button onclick={clearAllFilters} class="text-xs text-accent hover:underline">필터 초기화</button>
-        {:else if hasActiveFilters}
-          <p class="text-sm mb-2">이 분류에 문서가 없습니다</p>
-          <button onclick={clearAllFilters} class="text-xs text-accent hover:underline">필터 초기화</button>
-        {:else}
-          <p class="text-sm">등록된 문서가 없습니다</p>
-        {/if}
-      </div>
     {:else}
-      {#if viewMode === 'table'}
-        <DocumentTable
-          {items}
-          selectedId={selectedDoc?.id}
-          onselect={selectDoc}
-          selectable
-          {selectedIds}
-          onselectionchange={handleSelectionChange}
-          {kbSelectedId}
-          density={tableDensity}
-        />
-      {:else}
-        <div class="space-y-1">
-          {#each items as doc}
-            <div data-kb-selected={doc.id === kbSelectedId}>
-              <DocumentCard
-                {doc}
-                showDomain={!filterDomain}
-                selected={selectedDoc?.id === doc.id}
-                onselect={selectDoc}
-                selectable
-                {selectedIds}
-                onselectionchange={handleSelectionChange}
-              />
-            </div>
-          {/each}
-        </div>
-      {/if}
-
-      {#if !searchResults && totalPages > 1}
-        <div class="flex justify-center gap-1 mt-4">
-          {#each Array(totalPages) as _, i}
-            <button
-              onclick={() => changePage(i + 1)}
-              class="px-2.5 py-0.5 rounded text-xs transition-colors
-                {currentPage === i + 1 ? 'bg-accent text-white' : 'bg-surface text-dim hover:text-text'}"
-            >
-              {i + 1}
-            </button>
-          {/each}
-        </div>
-      {/if}
+      <div class="hidden lg:flex flex-1 items-center justify-center text-dim text-sm">
+        왼쪽에서 문서를 선택하세요
+      </div>
     {/if}
-    </div>
   </div>
 
-  <!-- 하단: 뷰어 (70%, 전체 너비) -->
-  {#if selectedDoc}
-    <div class="flex-1 min-h-0">
-      <DocumentViewer doc={selectedDoc} />
-    </div>
-  {/if}
-  </div>
-  <!-- /가운데 컬럼 -->
-
-  <!-- 우측: xl+ persistent rail (hidden xl:flex) -->
-  {#if selectedDoc}
-    <aside
-      class="hidden xl:flex shrink-0 border-l border-default {metaRailOpen ? 'w-rail' : 'w-10'}"
-      aria-label="문서 정보 rail"
-    >
-      {#if metaRailOpen}
-        <DocumentMetaRail
-          doc={selectedDoc}
-          onclose={() => setMetaRailOpen(false)}
-          ondelete={handleDocDelete}
-        />
-      {:else}
-        <button
-          type="button"
-          onclick={() => setMetaRailOpen(true)}
-          class="w-10 h-full flex items-center justify-center text-dim hover:text-text hover:bg-surface-hover transition-colors"
-          aria-label="정보 패널 펼치기"
-          title="정보 패널 펼치기"
-        >
-          <ChevronLeft size={16} />
-        </button>
-      {/if}
+  <!-- ═══ 우: 인스펙터 (xl+ inline) ═══ -->
+  {#if selectedDoc && inspectorOpen}
+    <aside class="hidden xl:flex flex-col w-[300px] shrink-0 border-l border-default bg-sidebar overflow-y-auto" aria-label="문서 정보">
+      {@render inspector(selectedDoc)}
     </aside>
   {/if}
 </div>
 
-<!-- < xl 폴백: Drawer primitive (우측 슬라이드) -->
+<!-- < xl 폴백: Drawer (정보 하단/측면 시트) -->
 <Drawer id="meta" side="right" width="rail" aria-label="문서 정보">
   {#if selectedDoc}
-    <DocumentMetaRail
-      doc={selectedDoc}
-      onclose={() => ui.closeDrawer()}
-      ondelete={handleDocDelete}
-    />
+    <div class="overflow-y-auto h-full bg-sidebar">{@render inspector(selectedDoc)}</div>
   {/if}
 </Drawer>
 
-<!-- D.3: Bulk action modals -->
+<!-- Bulk modals -->
 <Modal id="bulk-domain" title="일괄 도메인 변경" size="sm">
   <p class="text-xs text-dim mb-3">{selectionCount}건의 문서에 새 도메인을 지정합니다.</p>
-  <Select
-    bind:value={bulkDomainValue}
-    options={DOMAIN_OPTIONS}
-    placeholder="도메인 선택"
-    label="도메인"
-  />
+  <Select bind:value={bulkDomainValue} options={DOMAIN_OPTIONS} placeholder="도메인 선택" label="도메인" />
   {#snippet footer()}
     <Button variant="ghost" size="sm" onclick={() => ui.closeModal('bulk-domain')}>취소</Button>
-    <Button
-      variant="primary"
-      size="sm"
-      disabled={!bulkDomainValue}
-      loading={bulkBusy}
-      onclick={bulkApplyDomain}
-    >
-      적용
-    </Button>
+    <Button variant="primary" size="sm" disabled={!bulkDomainValue} loading={bulkBusy} onclick={bulkApplyDomain}>적용</Button>
   {/snippet}
 </Modal>
 
 <Modal id="bulk-tag" title="일괄 태그 추가" size="sm">
   <p class="text-xs text-dim mb-3">{selectionCount}건의 문서에 태그를 추가합니다. 이미 같은 태그가 있으면 건너뜁니다.</p>
-  <TextInput
-    bind:value={bulkTagValue}
-    placeholder="태그 입력"
-    label="태그"
-  />
+  <TextInput bind:value={bulkTagValue} placeholder="태그 입력" label="태그" />
   {#snippet footer()}
     <Button variant="ghost" size="sm" onclick={() => ui.closeModal('bulk-tag')}>취소</Button>
-    <Button
-      variant="primary"
-      size="sm"
-      disabled={!bulkTagValue.trim()}
-      loading={bulkBusy}
-      onclick={bulkAddTag}
-    >
-      추가
-    </Button>
+    <Button variant="primary" size="sm" disabled={!bulkTagValue.trim()} loading={bulkBusy} onclick={bulkAddTag}>추가</Button>
   {/snippet}
 </Modal>
 
@@ -918,3 +663,54 @@
   loading={bulkBusy}
   onconfirm={bulkDelete}
 />
+
+<!-- 인스펙터 콘텐츠 (데스크탑 aside + 모바일 drawer 공용) -->
+{#snippet inspector(doc)}
+  {@const fmt = formatBadge(doc.file_format)}
+  {@const size = fileSizeLabel(doc.file_size)}
+  <div class="flex flex-col gap-5 p-4">
+    <!-- 정보 -->
+    <div>
+      <div class="text-[10px] font-extrabold uppercase tracking-wide text-faint mb-2">정보</div>
+      <div class="flex flex-col">
+        <div class="flex justify-between gap-2 text-xs py-1"><span class="text-dim">종류</span><span class="text-text font-medium text-right">{fmt.label}</span></div>
+        {#if doc.ai_domain}<div class="flex justify-between gap-2 text-xs py-1"><span class="text-dim">도메인</span><span class="text-text font-medium text-right truncate">{domainLabel(doc.ai_domain)}</span></div>{/if}
+        {#if doc.ai_sub_group}<div class="flex justify-between gap-2 text-xs py-1"><span class="text-dim">하위</span><span class="text-text font-medium text-right truncate">{doc.ai_sub_group}</span></div>{/if}
+        <div class="flex justify-between gap-2 text-xs py-1"><span class="text-dim">수정</span><span class="text-text font-medium text-right">{shortDate(doc.updated_at || doc.created_at)}</span></div>
+        {#if size}<div class="flex justify-between gap-2 text-xs py-1"><span class="text-dim">원본</span><span class="text-text font-medium text-right">{size}</span></div>{/if}
+        {#if doc.md_status}<div class="flex justify-between gap-2 text-xs py-1"><span class="text-dim">md 상태</span><span class="font-medium text-right {doc.md_status === 'completed' ? 'text-success' : 'text-warning'}">{doc.md_status}</span></div>{/if}
+        {#if doc.read_count}<div class="flex justify-between gap-2 text-xs py-1"><span class="text-dim">읽음</span><span class="text-text font-medium text-right">{doc.read_count}회</span></div>{/if}
+      </div>
+    </div>
+
+    <!-- 태그 -->
+    {#if doc.ai_tags && doc.ai_tags.length > 0}
+      <div>
+        <div class="text-[10px] font-extrabold uppercase tracking-wide text-faint mb-2">태그</div>
+        <div class="flex flex-wrap gap-1.5">
+          {#each doc.ai_tags as t}
+            <button type="button" onclick={() => addFilter('tag', t)} class="text-[10.5px] text-accent-hover bg-accent/12 rounded-full px-2.5 py-0.5 hover:bg-accent/20 transition-colors">{t}</button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <!-- See Also (벡터 유사도 엔드포인트 부재 — 준비 중) -->
+    <div>
+      <div class="text-[10px] font-extrabold uppercase tracking-wide text-faint mb-2">See Also (관련 문서)</div>
+      <p class="text-[11px] text-faint leading-relaxed">벡터 유사도 기반 관련 문서 — 준비 중</p>
+    </div>
+
+    <!-- AI 분류 -->
+    {#if doc.ai_domain}
+      <div>
+        <div class="text-[10px] font-extrabold uppercase tracking-wide text-faint mb-2">AI 분류</div>
+        <div class="bg-surface border border-default rounded-lg p-3 text-xs leading-relaxed text-text">
+          도메인 <strong>{domainLabel(doc.ai_domain)}</strong>{#if doc.ai_sub_group} · 하위 <strong>{doc.ai_sub_group}</strong>{/if}
+          {#if doc.ai_confidence != null}<br /><span class="text-success font-bold mt-1 inline-block">신뢰도 {doc.ai_confidence.toFixed(2)}</span>{/if}
+          {#if doc.ai_analysis_tier}<span class="text-faint ml-1">· {doc.ai_analysis_tier}</span>{/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+{/snippet}
diff --git a/frontend/src/routes/memos/+page.svelte b/frontend/src/routes/memos/+page.svelte
index c17a0c5..8f3a3dd 100644
--- a/frontend/src/routes/memos/+page.svelte
+++ b/frontend/src/routes/memos/+page.svelte
@@ -292,10 +292,10 @@
   };
   const KIND_BADGE_CLASS = {
     note: 'bg-surface text-dim',
-    task: 'bg-indigo-100 text-indigo-700',
-    calendar_event: 'bg-blue-100 text-blue-700',
-    activity_log: 'bg-emerald-100 text-emerald-700',
-    reference: 'bg-amber-100 text-amber-700',
+    task: 'bg-accent/15 text-accent-hover',
+    calendar_event: 'bg-domain-engineering/15 text-domain-engineering',
+    activity_log: 'bg-success/15 text-success',
+    reference: 'bg-domain-reference/15 text-domain-reference',
   };
 
   async function handleCheckboxClick(e, memo) {
@@ -400,9 +400,9 @@
     </div>
   {/if}
 
-  <!-- ═══ 빠른 입력 ═══ -->
+  <!-- ═══ 빠른 입력 (상단 고정) ═══ -->
   {#if !showArchived}
-    <Card class="mb-5">
+    <Card class="mb-5 sticky top-0 z-10 shadow-sm">
       <!-- 선택적 제목 -->
       {#if showTitle}
         <input
@@ -526,7 +526,7 @@
               {#if memo.source_channel === 'voice' || memo.ai_event_kind || memo._last_promoted}
                 <div class="flex flex-wrap items-center gap-1.5 mb-1.5">
                   {#if memo.source_channel === 'voice'}
-                    <span class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] bg-rose-100 text-rose-700" title="음성 메모">
+                    <span class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] bg-domain-philosophy/15 text-domain-philosophy" title="음성 메모">
                       <Mic size={10} /> 음성
                     </span>
                   {/if}
@@ -536,7 +536,7 @@
                     </span>
                   {/if}
                   {#if memo._last_promoted}
-                    <a href={`/events/${memo._last_promoted.event_id}`} class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] bg-emerald-100 text-emerald-700 hover:bg-emerald-200">
+                    <a href={`/events/${memo._last_promoted.event_id}`} class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] bg-success/15 text-success hover:bg-success/25">
                       <ArrowRight size={10} /> events #{memo._last_promoted.event_id}
                     </a>
                   {/if}
@@ -586,13 +586,13 @@
             <!-- PR-2B: AI triage 결과 → 1-click promote 버튼 (분류 결과 있고 dismissed 아닌 메모) -->
             {#if editingId !== memo.id && memo.ai_event_kind && memo.ai_event_kind !== 'note' && !memo._last_promoted && !showArchived}
               <div class="flex flex-wrap gap-1 mt-2 pt-2 border-t border-default/30">
-                <button onclick={() => promoteMemo(memo.id, 'task')} class={`inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors ${memo.ai_event_kind === 'task' ? 'bg-indigo-500 text-white hover:bg-indigo-600' : 'bg-surface text-dim hover:bg-surface-hover hover:text-text'}`}>
+                <button onclick={() => promoteMemo(memo.id, 'task')} class={`inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors ${memo.ai_event_kind === 'task' ? 'bg-accent text-white hover:bg-accent-hover' : 'bg-surface text-dim hover:bg-surface-hover hover:text-text'}`}>
                   <FileText size={11} /> 할 일로
                 </button>
-                <button onclick={() => promoteMemo(memo.id, 'calendar_event')} class={`inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors ${memo.ai_event_kind === 'calendar_event' ? 'bg-blue-500 text-white hover:bg-blue-600' : 'bg-surface text-dim hover:bg-surface-hover hover:text-text'}`}>
+                <button onclick={() => promoteMemo(memo.id, 'calendar_event')} class={`inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors ${memo.ai_event_kind === 'calendar_event' ? 'bg-domain-engineering text-white hover:opacity-90' : 'bg-surface text-dim hover:bg-surface-hover hover:text-text'}`}>
                   <Calendar size={11} /> 일정으로
                 </button>
-                <button onclick={() => promoteMemo(memo.id, 'activity_log')} class={`inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors ${memo.ai_event_kind === 'activity_log' ? 'bg-emerald-500 text-white hover:bg-emerald-600' : 'bg-surface text-dim hover:bg-surface-hover hover:text-text'}`}>
+                <button onclick={() => promoteMemo(memo.id, 'activity_log')} class={`inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors ${memo.ai_event_kind === 'activity_log' ? 'bg-success text-white hover:opacity-90' : 'bg-surface text-dim hover:bg-surface-hover hover:text-text'}`}>
                   <Activity size={11} /> 활동으로
                 </button>
                 <button onclick={() => dismissEventSuggestion(memo.id)} class="inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] bg-surface text-dim hover:bg-surface-hover hover:text-text transition-colors">
diff --git a/frontend/src/routes/news/+page.svelte b/frontend/src/routes/news/+page.svelte
index 1dfcc10..7f92075 100644
--- a/frontend/src/routes/news/+page.svelte
+++ b/frontend/src/routes/news/+page.svelte
@@ -1,101 +1,59 @@
 <script lang="ts">
-  // 야간 수집 뉴스 브리핑 (Morning Briefing) — 매일 KST 05:10 cron 으로 만들어진
-  // topic×country 비교 분석 1페이지 카드. 기존 article list / source tree /
-  // 북마크 / 노트 / 필터 UI 는 폐기 (PR-MorningBriefing-2 swap).
+  // 모닝브리핑 /news — 확정 시안 '편집 신문 1면'. 야간(KST 0~5h) 수집 뉴스를
+  // topic×country 비교 분석. 전 기능 보존(국가 관점·기사ID·차이/공통·인용·지난흐름·읽음/별표·날짜).
+  // 이모지 국기 → 국가 색칩(no-emoji 규칙). 데이터·API 는 기존 /briefing 그대로.
   import { onMount } from 'svelte';
   import { api, type ApiError } from '$lib/api';
-  import Card from '$lib/components/ui/Card.svelte';
-
-  type CountryPerspective = {
-    country: string;
-    summary: string;
-    article_ids: number[];
-  };
-
-  type KeyQuote = {
-    country: string;
-    source: string;
-    quote: string;
-  };
 
+  type CountryPerspective = { country: string; summary: string; article_ids: number[] };
+  type KeyQuote = { country: string; source: string; quote: string };
   type BriefingTopic = {
-    id: number;
-    topic_rank: number;
-    topic_label: string;
-    headline: string;
-    country_perspectives: CountryPerspective[];
-    divergences: string[];
-    convergences: string[];
-    key_quotes: KeyQuote[];
-    historical_context: string | null;
-    cluster_members: number[];
-    article_count: number;
-    country_count: number;
-    importance_score: number;
-    llm_fallback_used: boolean;
-    is_read: boolean;
-    read_at: string | null;
-    highlighted: boolean;
-    highlighted_at: string | null;
+    id: number; topic_rank: number; topic_label: string; headline: string;
+    country_perspectives: CountryPerspective[]; divergences: string[]; convergences: string[];
+    key_quotes: KeyQuote[]; historical_context: string | null; cluster_members: number[];
+    article_count: number; country_count: number; importance_score: number; llm_fallback_used: boolean;
+    is_read: boolean; read_at: string | null; highlighted: boolean; highlighted_at: string | null;
   };
-
   type BriefingDateSummary = {
-    briefing_date: string;
-    total_topics: number;
-    total_articles: number;
-    status: string;
-    read_count: number;
-    highlighted_count: number;
+    briefing_date: string; total_topics: number; total_articles: number;
+    status: string; read_count: number; highlighted_count: number;
   };
-
   type Briefing = {
-    briefing_date: string;
-    window_start: string;
-    window_end: string;
-    total_articles: number;
-    total_countries: number;
-    total_topics: number;
-    llm_calls: number;
-    llm_failures: number;
+    briefing_date: string; window_start: string; window_end: string;
+    total_articles: number; total_countries: number; total_topics: number;
+    llm_calls: number; llm_failures: number;
     status: 'success' | 'partial' | 'failed' | 'empty';
-    headline_oneliner: string | null;
-    topics: BriefingTopic[];
+    headline_oneliner: string | null; topics: BriefingTopic[];
   };
 
-  const COUNTRY_META: Record<string, { flag: string; label: string }> = {
-    KR: { flag: '🇰🇷', label: '한국' },
-    US: { flag: '🇺🇸', label: '미국' },
-    JP: { flag: '🇯🇵', label: '일본' },
-    CN: { flag: '🇨🇳', label: '중국' },
-    HK: { flag: '🇭🇰', label: '홍콩' },
-    TW: { flag: '🇹🇼', label: '대만' },
-    DE: { flag: '🇩🇪', label: '독일' },
-    FR: { flag: '🇫🇷', label: '프랑스' },
-    GB: { flag: '🇬🇧', label: '영국' },
-    UK: { flag: '🇬🇧', label: '영국' },
-    IN: { flag: '🇮🇳', label: '인도' },
-    RU: { flag: '🇷🇺', label: '러시아' },
-    IR: { flag: '🇮🇷', label: '이란' },
-    IL: { flag: '🇮🇱', label: '이스라엘' },
-    PH: { flag: '🇵🇭', label: '필리핀' },
-    AU: { flag: '🇦🇺', label: '호주' },
-    NL: { flag: '🇳🇱', label: '네덜란드' },
+  // 국가 라벨(한국어, 이모지 없음) + 색칩 토큰
+  const COUNTRY_LABEL: Record<string, string> = {
+    KR: '한국', US: '미국', JP: '일본', CN: '중국', HK: '홍콩', TW: '대만',
+    DE: '독일', FR: '프랑스', GB: '영국', UK: '영국', IN: '인도', RU: '러시아',
+    IR: '이란', IL: '이스라엘', PH: '필리핀', AU: '호주', NL: '네덜란드',
+  };
+  const COUNTRY_CHIP: Record<string, string> = {
+    KR: 'bg-warning', US: 'bg-domain-engineering', JP: 'bg-domain-reference',
+    DE: 'bg-accent-hover', HK: 'bg-domain-philosophy', CN: 'bg-error',
+    TW: 'bg-domain-general', GB: 'bg-domain-engineering', UK: 'bg-domain-engineering',
+    FR: 'bg-domain-philosophy', IN: 'bg-domain-reference', RU: 'bg-error',
+    IL: 'bg-accent', IR: 'bg-warning',
   };
   function countryLabel(code: string): string {
-    const meta = COUNTRY_META[code?.toUpperCase()];
-    return meta ? `${meta.flag} ${meta.label}` : code;
+    return COUNTRY_LABEL[code?.toUpperCase?.()] ?? code;
+  }
+  function countryChip(code: string): string {
+    return COUNTRY_CHIP[code?.toUpperCase?.()] ?? 'bg-dim';
   }
 
   let briefing = $state<Briefing | null>(null);
   let loading = $state(true);
   let errorMsg = $state<string | null>(null);
-  // 2026-05-13 추가 — 날짜 선택 + 카드 액션
   let availableDates = $state<BriefingDateSummary[]>([]);
-  let selectedDate = $state<string>('');  // YYYY-MM-DD ('' = 최신)
+  let selectedDate = $state<string>('');
 
   async function loadBriefing(dateStr: string) {
-    loading = true;
-    errorMsg = null;
+    loading = true; errorMsg = null;
     try {
       const path = dateStr ? `/briefing?date=${dateStr}` : '/briefing/latest';
       briefing = await api<Briefing>(path);
@@ -109,216 +67,238 @@
       loading = false;
     }
   }
-
   async function loadDates() {
-    try {
-      availableDates = await api<BriefingDateSummary[]>('/briefing/dates');
-    } catch {
-      availableDates = [];
-    }
-  }
-
-  function onDateChange() {
-    loadBriefing(selectedDate);
+    try { availableDates = await api<BriefingDateSummary[]>('/briefing/dates'); }
+    catch { availableDates = []; }
   }
+  function onDateChange() { loadBriefing(selectedDate); }
 
   async function toggleRead(topic: BriefingTopic) {
     if (!briefing) return;
     const next = !topic.is_read;
     try {
-      const r = await api<{ id: number; is_read: boolean; read_at: string | null; highlighted: boolean; highlighted_at: string | null }>(
-        `/briefing/topics/${topic.id}/read`,
-        { method: 'PATCH', body: JSON.stringify({ value: next }) }
-      );
-      topic.is_read = r.is_read;
-      topic.read_at = r.read_at;
-    } catch (e) {
-      console.error('toggleRead failed', e);
-    }
+      const r = await api<{ is_read: boolean; read_at: string | null }>(
+        `/briefing/topics/${topic.id}/read`, { method: 'PATCH', body: JSON.stringify({ value: next }) });
+      topic.is_read = r.is_read; topic.read_at = r.read_at;
+    } catch (e) { console.error('toggleRead failed', e); }
   }
-
   async function toggleHighlight(topic: BriefingTopic) {
     if (!briefing) return;
     const next = !topic.highlighted;
     try {
-      const r = await api<{ id: number; is_read: boolean; read_at: string | null; highlighted: boolean; highlighted_at: string | null }>(
-        `/briefing/topics/${topic.id}/highlight`,
-        { method: 'PATCH', body: JSON.stringify({ value: next }) }
-      );
-      topic.highlighted = r.highlighted;
-      topic.highlighted_at = r.highlighted_at;
-    } catch (e) {
-      console.error('toggleHighlight failed', e);
-    }
+      const r = await api<{ highlighted: boolean; highlighted_at: string | null }>(
+        `/briefing/topics/${topic.id}/highlight`, { method: 'PATCH', body: JSON.stringify({ value: next }) });
+      topic.highlighted = r.highlighted; topic.highlighted_at = r.highlighted_at;
+    } catch (e) { console.error('toggleHighlight failed', e); }
   }
 
-  onMount(async () => {
-    await Promise.all([loadDates(), loadBriefing('')]);
-  });
+  onMount(async () => { await Promise.all([loadDates(), loadBriefing('')]); });
 
   const fallbackPct = $derived(
-    briefing && briefing.llm_calls > 0
-      ? Math.round((briefing.llm_failures / briefing.llm_calls) * 100)
-      : 0
+    briefing && briefing.llm_calls > 0 ? Math.round((briefing.llm_failures / briefing.llm_calls) * 100) : 0
   );
+  const highlightedCount = $derived(briefing ? briefing.topics.filter((t) => t.highlighted).length : 0);
+  const leadTopic = $derived(briefing && briefing.topics.length > 0 ? briefing.topics[0] : null);
+  const restTopics = $derived(briefing ? briefing.topics.slice(1) : []);
+  function folio(rank: number) { return String(rank).padStart(2, '0'); }
 </script>
 
-<div class="mx-auto max-w-3xl px-4 py-6 space-y-4">
-  <header class="space-y-2">
-    <div class="flex items-center justify-between gap-3 flex-wrap">
-      <h1 class="text-xl font-semibold">야간 뉴스 브리핑</h1>
-      {#if availableDates.length > 0}
-        <div class="flex items-center gap-2">
-          <label for="briefing-date" class="text-xs text-dim">날짜</label>
-          <select
-            id="briefing-date"
-            bind:value={selectedDate}
-            onchange={onDateChange}
-            class="text-sm border border-default rounded-md px-2 py-1 bg-surface"
-          >
-            <option value="">최신</option>
-            {#each availableDates as d}
-              <option value={d.briefing_date}>
-                {d.briefing_date} · {d.total_topics}토픽
-                {#if d.highlighted_count > 0}⭐{d.highlighted_count}{/if}
-              </option>
+<div class="nws bg-bg min-h-full p-4 lg:p-6">
+  <div class="max-w-[1240px] mx-auto">
+
+    <!-- ═══ 마스트헤드 ═══ -->
+    <header class="bg-surface border border-default rounded-lg relative overflow-hidden px-5 lg:px-7 pt-5 pb-4">
+      <span class="absolute left-0 top-0 bottom-0 w-[5px] bg-accent"></span>
+      <div class="flex justify-between items-end flex-wrap gap-3 border-b-2 border-text pb-2.5 mb-3">
+        <div class="nws-serif font-extrabold tracking-tight text-text text-3xl lg:text-4xl leading-none">모닝브리핑</div>
+        <div class="flex items-center gap-2.5 flex-wrap text-xs text-dim font-mono">
+          {#if availableDates.length > 0}
+            <select
+              bind:value={selectedDate}
+              onchange={onDateChange}
+              class="bg-bg border border-default rounded-md px-2 py-1 text-xs text-text"
+              aria-label="브리핑 날짜"
+            >
+              <option value="">최신</option>
+              {#each availableDates as d}
+                <option value={d.briefing_date}>{d.briefing_date} · {d.total_topics}토픽{#if d.highlighted_count > 0} · ★{d.highlighted_count}{/if}</option>
+              {/each}
+            </select>
+          {:else if briefing}
+            <span class="font-bold text-text">{briefing.briefing_date}</span>
+          {/if}
+          {#if briefing}
+            <span>{briefing.total_topics}토픽{#if highlightedCount > 0} · 별표 <span class="text-warning font-bold">{highlightedCount}</span>{/if}</span>
+            <span>새벽 수집</span>
+          {/if}
+        </div>
+      </div>
+
+      {#if briefing?.headline_oneliner}
+        <div class="nws-serif text-text font-semibold text-lg lg:text-[22px] leading-snug tracking-tight mb-3.5">
+          <span class="block font-mono text-xs font-bold text-accent-hover uppercase tracking-wider mb-1">오늘의 한 줄</span>
+          {briefing.headline_oneliner}
+        </div>
+      {/if}
+
+      {#if briefing}
+        <div class="flex flex-wrap border-t border-default pt-3">
+          <div class="flex flex-col gap-0.5 pr-6 border-r border-default">
+            <span class="nws-serif text-2xl font-extrabold text-text leading-none">{briefing.total_articles}</span>
+            <span class="text-[11px] text-dim uppercase tracking-wide">총 기사</span>
+          </div>
+          <div class="flex flex-col gap-0.5 px-6 border-r border-default">
+            <span class="nws-serif text-2xl font-extrabold text-text leading-none">{briefing.total_countries}</span>
+            <span class="text-[11px] text-dim uppercase tracking-wide">개국</span>
+          </div>
+          <div class="flex flex-col gap-0.5 px-6">
+            <span class="nws-serif text-2xl font-extrabold text-text leading-none">{briefing.total_topics}</span>
+            <span class="text-[11px] text-dim uppercase tracking-wide">토픽</span>
+          </div>
+        </div>
+      {/if}
+
+      {#if briefing && (briefing.status === 'partial' || briefing.status === 'failed')}
+        <div class="flex items-center gap-2.5 mt-3.5 px-3.5 py-2 rounded-md text-[13px]
+          {briefing.status === 'failed' ? 'bg-error/10 border border-error/30 text-error' : 'bg-warning/10 border border-warning/30 text-warning'}">
+          <span class="w-2 h-2 rounded-full shrink-0 {briefing.status === 'failed' ? 'bg-error' : 'bg-warning'}"></span>
+          {#if briefing.status === 'failed'}
+            LLM 분석 실패율이 높습니다 ({briefing.llm_failures}/{briefing.llm_calls}, {fallbackPct}%). 일부 토픽이 원문 묶음으로 표시됩니다.
+          {:else}
+            일부 토픽 LLM 실패 ({briefing.llm_failures}/{briefing.llm_calls}). 다른 토픽은 정상 분석되었습니다.
+          {/if}
+        </div>
+      {/if}
+    </header>
+
+    <!-- ═══ 본문 ═══ -->
+    {#if loading}
+      <div class="bg-surface border border-default rounded-lg p-5 mt-4 text-sm text-dim">불러오는 중…</div>
+    {:else if errorMsg}
+      <div class="bg-surface border border-default rounded-lg p-5 mt-4 text-sm text-text">{errorMsg}</div>
+    {:else if briefing}
+      {#if briefing.status === 'empty'}
+        <div class="bg-surface border border-default rounded-lg p-5 mt-4">
+          <p class="text-sm text-text">오늘 새벽({briefing.briefing_date}) 다국 비교 가능한 토픽이 없습니다.</p>
+          <p class="mt-2 text-xs text-dim">(수집 뉴스 0건 또는 2개국 이상 다룬 주제 없음)</p>
+        </div>
+      {:else}
+        <!-- 리드 토픽 (전체 너비, 관점 2열) -->
+        {#if leadTopic}
+          {@render topicCard(leadTopic, true)}
+        {/if}
+        <!-- 나머지 토픽 (2열 그리드) -->
+        {#if restTopics.length > 0}
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+            {#each restTopics as topic (topic.id)}
+              {@render topicCard(topic, false)}
             {/each}
-          </select>
+          </div>
+        {/if}
+      {/if}
+    {/if}
+  </div>
+</div>
+
+{#snippet topicCard(topic, isLead)}
+  <article class="bg-surface border rounded-lg overflow-hidden relative transition-opacity
+    {isLead ? 'mt-4' : ''}
+    {topic.highlighted ? 'border-accent ring-2 ring-accent/25' : 'border-default'}
+    {topic.is_read ? 'opacity-50 hover:opacity-80' : ''}">
+    {#if topic.is_read}
+      <span class="absolute top-3 right-[88px] text-[10px] font-mono font-bold tracking-widest text-error border border-error rounded px-1.5 py-0.5 -rotate-6 opacity-70 pointer-events-none uppercase select-none">읽음</span>
+    {/if}
+    <!-- head -->
+    <div class="flex items-start gap-3.5 px-5 pt-4 pb-3.5 border-b border-default">
+      <div class="nws-serif font-extrabold leading-none text-text shrink-0 text-center pt-0.5 min-w-[42px]
+        {topic.highlighted ? 'text-white bg-accent rounded-md px-1 py-1.5' : ''} {isLead ? 'text-3xl' : 'text-2xl'}">{folio(topic.topic_rank)}</div>
+      <div class="flex-1 min-w-0">
+        <div class="font-mono text-[11px] tracking-wide uppercase text-accent-hover font-bold mb-1">
+          {topic.topic_label}{#if topic.llm_fallback_used}<span class="text-dim ml-1 normal-case">(원문 묶음)</span>{/if}
+        </div>
+        <div class="nws-serif font-bold leading-tight text-text tracking-tight {isLead ? 'text-[23px]' : 'text-[19px]'}">{topic.headline}</div>
+        <div class="inline-flex items-center gap-1.5 mt-2 text-xs text-dim font-mono">
+          <span>{topic.country_count}개국</span><span class="w-1 h-1 rounded-full bg-faint"></span><span>{topic.article_count}건</span>
+        </div>
+      </div>
+      <div class="flex gap-1.5 shrink-0">
+        <button type="button" onclick={() => toggleHighlight(topic)} aria-label="별표 토글" title={topic.highlighted ? '별표 해제' : '별표'}
+          class="w-[34px] h-[30px] rounded-md border flex items-center justify-center transition-colors
+            {topic.highlighted ? 'bg-accent border-accent text-white' : 'bg-bg border-default text-dim hover:text-text hover:bg-surface-hover'}">★</button>
+        <button type="button" onclick={() => toggleRead(topic)} aria-label="읽음 토글" title={topic.is_read ? '읽지 않음으로' : '읽음 처리'}
+          class="w-[34px] h-[30px] rounded-md border flex items-center justify-center text-xs transition-colors
+            {topic.is_read ? 'bg-accent/15 border-accent text-accent-hover' : 'bg-bg border-default text-dim hover:text-text hover:bg-surface-hover'}">✓</button>
+      </div>
+    </div>
+
+    <!-- body -->
+    <div class="px-5 pt-4 pb-4.5">
+      {#if topic.country_perspectives.length > 0}
+        <div class="nws-rule font-mono text-[10px] tracking-wider uppercase text-faint flex items-center gap-2 mb-2">국가별 관점</div>
+        <div class="grid gap-2.5 {isLead ? 'lg:grid-cols-2' : 'grid-cols-1'}">
+          {#each topic.country_perspectives as cp}
+            <div class="border-l-[3px] border-border-strong pl-3 py-0.5">
+              <div class="flex items-center gap-2 flex-wrap mb-1">
+                <span class="font-mono text-[10.5px] font-extrabold tracking-wide text-white rounded px-1.5 py-0.5 {countryChip(cp.country)}">{countryLabel(cp.country)}</span>
+                {#if cp.article_ids.length > 0}
+                  <span class="inline-flex gap-1.5 flex-wrap">
+                    {#each cp.article_ids as id}
+                      <a href={`/documents/${id}`} class="font-mono text-[11px] text-accent-hover bg-accent/12 rounded px-1.5 py-px border border-transparent hover:border-accent transition-colors">#{id}</a>
+                    {/each}
+                  </span>
+                {/if}
+              </div>
+              <div class="text-[13.5px] text-text leading-relaxed">{cp.summary}</div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+
+      {#if topic.divergences.length > 0 || topic.convergences.length > 0}
+        <div class="grid gap-2.5 mt-3.5 {isLead && topic.divergences.length > 0 && topic.convergences.length > 0 ? 'lg:grid-cols-2' : 'grid-cols-1'}">
+          {#if topic.divergences.length > 0}
+            <div class="rounded-lg px-3.5 py-3 text-[13px] leading-relaxed bg-error/[0.06] border border-error/20">
+              <span class="block font-mono text-[10px] font-bold tracking-wide uppercase mb-1.5 text-error">차이</span>
+              <span class="text-text">{topic.divergences.join(' · ')}</span>
+            </div>
+          {/if}
+          {#if topic.convergences.length > 0}
+            <div class="rounded-lg px-3.5 py-3 text-[13px] leading-relaxed bg-accent/12 border border-accent/25">
+              <span class="block font-mono text-[10px] font-bold tracking-wide uppercase mb-1.5 text-accent-hover">공통</span>
+              <span class="text-text">{topic.convergences.join(' · ')}</span>
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      {#if topic.key_quotes.length > 0}
+        <div class="mt-3.5 flex flex-col gap-2.5">
+          {#each topic.key_quotes as q}
+            <div class="nws-quote relative pl-6">
+              <div class="nws-serif italic text-[15px] leading-snug text-text">{q.quote}</div>
+              <div class="text-[11px] text-dim font-mono mt-1 flex items-center gap-1.5 flex-wrap">
+                {#if q.country}<span class="text-[9.5px] font-extrabold tracking-wide text-white rounded px-1.5 py-0.5 {countryChip(q.country)}">{countryLabel(q.country)}</span>{/if}
+                <span class="font-bold text-text">{q.source}</span>
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+
+      {#if topic.historical_context}
+        <div class="mt-3.5 px-3 py-2.5 rounded-md bg-bg border border-default text-[12.5px] text-dim leading-relaxed">
+          <span class="font-mono text-[10px] font-bold tracking-wide uppercase text-faint mr-1.5">지난 흐름</span>{topic.historical_context}
         </div>
       {/if}
     </div>
-    <p class="text-sm text-dim">
-      {#if briefing}
-        {briefing.briefing_date} 새벽 수집 · 총 {briefing.total_articles}건 / {briefing.total_countries}개국 / {briefing.total_topics}개 토픽
-      {:else}
-        매일 KST 자정~05:00 누적 뉴스를 주제별로 다국 비교 분석합니다.
-      {/if}
-    </p>
-  </header>
+  </article>
+{/snippet}
 
-  {#if loading}
-    <Card>
-      <p class="text-sm text-dim">불러오는 중…</p>
-    </Card>
-  {:else if errorMsg}
-    <Card>
-      <p class="text-sm">{errorMsg}</p>
-    </Card>
-  {:else if briefing}
-    {#if briefing.status === 'empty'}
-      <Card>
-        <p class="text-sm">
-          오늘 새벽({briefing.briefing_date}) 다국 비교 가능한 토픽이 없습니다.
-        </p>
-        <p class="mt-2 text-xs text-dim">
-          (수집 뉴스 0건 또는 2개국 이상 다룬 주제 없음)
-        </p>
-      </Card>
-    {:else}
-      {#if briefing.status === 'failed'}
-        <div class="border border-error/40 bg-error/10 text-sm rounded-md px-4 py-3">
-          ⚠ LLM 분석 실패율이 높습니다 ({briefing.llm_failures}/{briefing.llm_calls}, {fallbackPct}%). 일부 토픽이 원문 묶음으로 표시됩니다.
-        </div>
-      {:else if briefing.status === 'partial'}
-        <div class="border border-warning/40 bg-warning/10 text-sm rounded-md px-4 py-3">
-          일부 토픽 LLM 실패 ({briefing.llm_failures}/{briefing.llm_calls}). 다른 토픽은 정상 분석되었습니다.
-        </div>
-      {/if}
-
-      {#each briefing.topics as topic (topic.id)}
-        <div class:opacity-60={topic.is_read}>
-        <Card class={topic.highlighted ? "ring-2 ring-yellow-400" : ""}>
-          <div class="space-y-3">
-            <div class="flex items-start gap-2">
-              <span class="text-xs text-faint shrink-0 pt-1">#{topic.topic_rank}</span>
-              <div class="flex-1 min-w-0">
-                <h2 class="text-base font-semibold leading-snug">
-                  {topic.topic_label}
-                  {#if topic.llm_fallback_used}
-                    <span class="ml-1 text-xs text-dim">(원문 묶음)</span>
-                  {/if}
-                </h2>
-                <p class="text-sm text-dim mt-1">{topic.headline}</p>
-                <p class="text-xs text-faint mt-1">
-                  {topic.country_count}개국 · {topic.article_count}건
-                </p>
-              </div>
-              <div class="flex flex-col items-end gap-1 shrink-0">
-                <button
-                  type="button"
-                  onclick={() => toggleHighlight(topic)}
-                  class="text-base leading-none px-1.5 py-0.5 rounded hover:bg-surface"
-                  class:text-yellow-500={topic.highlighted}
-                  class:text-faint={!topic.highlighted}
-                  title={topic.highlighted ? '하이라이트 해제' : '하이라이트'}
-                  aria-label="하이라이트 토글"
-                >★</button>
-                <button
-                  type="button"
-                  onclick={() => toggleRead(topic)}
-                  class="text-xs px-1.5 py-0.5 rounded border border-default hover:bg-surface"
-                  title={topic.is_read ? '읽지 않음으로' : '읽음 처리'}
-                  aria-label="읽음 토글"
-                >{topic.is_read ? '✓읽음' : '읽음'}</button>
-              </div>
-            </div>
-
-            {#if topic.country_perspectives.length > 0}
-              <div class="space-y-1.5">
-                {#each topic.country_perspectives as cp}
-                  <div class="text-sm leading-relaxed">
-                    <span class="font-medium">{countryLabel(cp.country)}</span>
-                    <span class="text-dim mx-1">·</span>
-                    <span>{cp.summary}</span>
-                    {#if cp.article_ids.length > 0}
-                      <span class="ml-1 text-xs text-faint">
-                        {#each cp.article_ids as id, i}
-                          {#if i > 0}<span class="mx-0.5">·</span>{/if}<a
-                            href={`/documents/${id}`}
-                            class="hover:text-accent"
-                          >#{id}</a>
-                        {/each}
-                      </span>
-                    {/if}
-                  </div>
-                {/each}
-              </div>
-            {/if}
-
-            {#if topic.divergences.length > 0}
-              <div class="text-xs">
-                <span class="text-dim">차이 </span>
-                <span class="text-text">{topic.divergences.join(' · ')}</span>
-              </div>
-            {/if}
-
-            {#if topic.convergences.length > 0}
-              <div class="text-xs">
-                <span class="text-dim">공통 </span>
-                <span class="text-text">{topic.convergences.join(' · ')}</span>
-              </div>
-            {/if}
-
-            {#if topic.key_quotes.length > 0}
-              <ul class="text-xs space-y-1 border-l-2 border-default pl-3">
-                {#each topic.key_quotes as q}
-                  <li>
-                    <span class="text-dim">{countryLabel(q.country)} · {q.source}</span>
-                    <span class="text-text">"{q.quote}"</span>
-                  </li>
-                {/each}
-              </ul>
-            {/if}
-
-            {#if topic.historical_context}
-              <p class="text-xs text-faint italic">
-                ↩ 지난 흐름 · {topic.historical_context}
-              </p>
-            {/if}
-          </div>
-        </Card>
-        </div>
-      {/each}
-    {/if}
-  {/if}
-</div>
+<style>
+  .nws-serif { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; }
+  .nws-rule::after { content: ""; flex: 1; height: 1px; background: var(--border); }
+  .nws-quote::before {
+    content: "\201C"; font-family: Georgia, serif; font-size: 36px; line-height: 0;
+    color: var(--accent); position: absolute; left: 0; top: 16px;
+  }
+</style>