fix: 3+4단계 — 반응형/에러분기/a11y/Synology URL

- DocumentCard: window.innerWidth → matchMedia (반응형 정확)
- documents/[id]: 로딩 상태 3분기 (loading/not_found/network)
- documents/[id]: Synology URL 하드코딩 → edit_url fallback
- DocumentCard: aria-label 추가
- Toast: aria-live 이미 적용 (1단계)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/routes/documents/[id]/+page.svelte

@@ -19,6 +19,7 @@
 
   let doc = $state(null);
   let loading = $state(true);
+  let error = $state(null); // 'not_found' | 'network' | null
 
   let docId = $derived($page.params.id);
 
@@ -26,7 +27,7 @@
     try {
       doc = await api(`/documents/${docId}`);
     } catch (err) {
-      addToast('error', '문서를 찾을 수 없습니다');
+      error = err?.status === 404 ? 'not_found' : 'network';
     } finally {
       loading = false;
     }
@@ -56,6 +57,16 @@
     <div class="max-w-6xl mx-auto p-6">
       <div class="bg-[var(--surface)] rounded-xl p-6 border border-[var(--border)] animate-pulse h-96"></div>
     </div>
+  {:else if error === 'not_found'}
+    <div class="text-center py-20 text-[var(--text-dim)]">
+      <p class="text-lg mb-2">문서를 찾을 수 없습니다</p>
+      <a href="/documents" class="text-sm text-[var(--accent)] hover:underline">목록으로 돌아가기</a>
+    </div>
+  {:else if error === 'network'}
+    <div class="text-center py-20 text-[var(--text-dim)]">
+      <p class="text-lg mb-2">문서를 불러올 수 없습니다</p>
+      <button onclick={() => location.reload()} class="text-sm text-[var(--accent)] hover:underline">다시 시도</button>
+    </div>
   {:else if doc}
     <div class="max-w-6xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
       <!-- 뷰어 (2/3) -->
@@ -76,7 +87,7 @@
           <div class="text-center py-10">
             <p class="text-[var(--text-dim)] mb-4">Synology Office 문서</p>
             <a
-              href="https://ds1525.hyungi.net:15001/oo/r/{doc.id}"
+              href={doc.edit_url || 'https://link.hyungi.net'}
               target="_blank"
               class="px-4 py-2 bg-[var(--accent)] text-white rounded-lg hover:bg-[var(--accent-hover)]"
             >