diff --git a/frontend/src/lib/components/DocumentCard.svelte b/frontend/src/lib/components/DocumentCard.svelte
index 9f6a3c1..aa3443a 100644
--- a/frontend/src/lib/components/DocumentCard.svelte
+++ b/frontend/src/lib/components/DocumentCard.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { goto } from '$app/navigation';
   import FormatIcon from './FormatIcon.svelte';
   import TagPill from './TagPill.svelte';
 
@@ -21,13 +22,18 @@
     if (bytes < 1048576) return `${(bytes / 1024).toFixed(0)}KB`;
     return `${(bytes / 1048576).toFixed(1)}MB`;
   }
+
+  function handleClick() {
+    if (onselect) {
+      onselect(doc);
+    } else {
+      goto(`/documents/${doc.id}`);
+    }
+  }
 </script>
 
-{@const Tag = onselect ? 'button' : 'a'}
-<svelte:element
-  this={Tag}
-  href={onselect ? undefined : `/documents/${doc.id}`}
-  onclick={onselect ? (e) => { e.preventDefault(); onselect(doc); } : undefined}
+<button
+  onclick={handleClick}
   class="flex items-start gap-3 p-3 bg-[var(--surface)] border rounded-lg hover:border-[var(--accent)] transition-colors group w-full text-left
     {selected ? 'border-[var(--accent)] bg-[var(--accent)]/5' : 'border-[var(--border)]'}"
 >
@@ -38,17 +44,12 @@
 
   <!-- 메인 콘텐츠 -->
   <div class="flex-1 min-w-0">
-    <!-- 제목 -->
     <p class="text-sm font-medium truncate group-hover:text-[var(--accent)]">
       {doc.title || '제목 없음'}
     </p>
-
-    <!-- AI 요약 -->
     {#if doc.ai_summary}
       <p class="text-xs text-[var(--text-dim)] truncate mt-0.5">{doc.ai_summary.slice(0, 100)}</p>
     {/if}
-
-    <!-- 메타 행: domain 경로 + 태그 -->
     <div class="flex items-center gap-2 mt-1.5 flex-wrap">
       {#if showDomain && doc.ai_domain}
         <span class="text-[10px] text-[var(--text-dim)]">
@@ -80,4 +81,4 @@
       <span class="text-[var(--text-dim)]">{formatSize(doc.file_size)}</span>
     {/if}
   </div>
-</svelte:element>
+</button>