From b6c5c133bcae0d0c6d1a3560a3ae8e18e825edc2 Mon Sep 17 00:00:00 2001
From: hyungi <hyun49196@gmail.com>
Date: Mon, 8 Jun 2026 08:56:14 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=EB=B0=80=EC=A7=91=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=8D=B0?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=ED=83=91=20=ED=8F=AD=20=EC=B1=84=EC=9A=B0?=
 =?UTF-8?q?=EA=B8=B0=20(=EB=B0=98=EC=9D=91=ED=98=95=20=EC=9C=A0=EB=8F=99?=
 =?UTF-8?q?=20~1680/1240=20=EC=BA=A1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

데스크탑에서 콘텐츠가 ~1024~1400px로 가운데 몰려 좌우 공백이 크던 문제 해소.
밀집/격자/대시보드형은 max-w-[1680px], 단일컬럼 list형은 max-w-[1240px]로 확장(좌우 패딩 유지·구조 보존).
- dashboard: max-w-5xl→1680, 우측 레일 320→360px
- digest: .app max-width 1180→1680
- ask·library·audio·video: →1680  / inbox·events: →1240(events 반응형 패딩 보강)
읽기/폼(memos·settings·events상세·study reading)·신문형(news)·3-pane(documents)는 좁은 폭 유지.
감사 18p→수정 8p, 페이지별 적대 검증(토큰/이모지/반응형/오버플로/구조) 전부 PASS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/routes/+page.svelte         | 6 +++---
 frontend/src/routes/ask/+page.svelte     | 4 ++--
 frontend/src/routes/audio/+page.svelte   | 2 +-
 frontend/src/routes/digest/+page.svelte  | 2 +-
 frontend/src/routes/events/+page.svelte  | 2 +-
 frontend/src/routes/inbox/+page.svelte   | 2 +-
 frontend/src/routes/library/+page.svelte | 4 ++--
 frontend/src/routes/video/+page.svelte   | 2 +-
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 66abf66..ef1de11 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -195,7 +195,7 @@
 </script>
 
 <div class="p-4 lg:p-8">
-  <div class="max-w-5xl mx-auto">
+  <div class="max-w-[1680px] mx-auto">
 
     <!-- ═══ 인사 헤더 ═══ -->
     <div class="flex items-baseline gap-2.5 flex-wrap">
@@ -211,7 +211,7 @@
         <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="grid grid-cols-1 lg:grid-cols-[1fr_360px] 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>
@@ -280,7 +280,7 @@
       </div>
 
       <!-- ═══ 2열 본문 ═══ -->
-      <div class="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-5 items-start">
+      <div class="grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-5 items-start">
 
         <!-- ─── 왼쪽 ─── -->
         <div class="space-y-5">
diff --git a/frontend/src/routes/ask/+page.svelte b/frontend/src/routes/ask/+page.svelte
index 377e116..03e0098 100644
--- a/frontend/src/routes/ask/+page.svelte
+++ b/frontend/src/routes/ask/+page.svelte
@@ -204,7 +204,7 @@
 <div class="h-full overflow-auto">
   <!-- 상단 검색바 (sticky) -->
   <div class="sticky top-0 z-10 bg-bg/80 backdrop-blur border-b border-default px-4 py-3">
-    <div class="flex items-center gap-2 max-w-5xl mx-auto">
+    <div class="flex items-center gap-2 max-w-[1680px] mx-auto">
       <div class="relative flex-1">
         <Search
           size={14}
@@ -261,7 +261,7 @@
   </div>
 
   <!-- 본문 -->
-  <div class="max-w-5xl mx-auto p-4">
+  <div class="max-w-[1680px] mx-auto p-4">
     {#if backendUnavailable}
       <div class="py-16">
         <EmptyState
diff --git a/frontend/src/routes/audio/+page.svelte b/frontend/src/routes/audio/+page.svelte
index cedb471..60e4aef 100644
--- a/frontend/src/routes/audio/+page.svelte
+++ b/frontend/src/routes/audio/+page.svelte
@@ -53,7 +53,7 @@
   }
 </script>
 
-<div class="p-6 max-w-[1200px] mx-auto">
+<div class="p-6 max-w-[1680px] mx-auto">
   <header class="flex items-center gap-2 mb-4">
     <Mic size={20} />
     <h1 class="text-xl font-semibold">Audio</h1>
diff --git a/frontend/src/routes/digest/+page.svelte b/frontend/src/routes/digest/+page.svelte
index bf282af..12a4003 100644
--- a/frontend/src/routes/digest/+page.svelte
+++ b/frontend/src/routes/digest/+page.svelte
@@ -428,7 +428,7 @@
 
   /* ── App shell ── */
   .app {
-    max-width: 1180px;
+    max-width: 1680px;
     margin: 0 auto;
     background: var(--surface);
     min-height: 100vh;
diff --git a/frontend/src/routes/events/+page.svelte b/frontend/src/routes/events/+page.svelte
index 7d6da5d..d00c9e8 100644
--- a/frontend/src/routes/events/+page.svelte
+++ b/frontend/src/routes/events/+page.svelte
@@ -223,7 +223,7 @@
   <title>events · hyungi PKM</title>
 </svelte:head>
 
-<div class="mx-auto max-w-3xl space-y-6 px-4 py-6">
+<div class="mx-auto max-w-[1240px] space-y-6 px-4 py-6 sm:px-6 lg:px-8">
   <header class="flex items-end justify-between gap-3">
     <div class="space-y-1">
       <h1 class="text-2xl font-semibold">events</h1>
diff --git a/frontend/src/routes/inbox/+page.svelte b/frontend/src/routes/inbox/+page.svelte
index ff19ba2..aa8afe4 100644
--- a/frontend/src/routes/inbox/+page.svelte
+++ b/frontend/src/routes/inbox/+page.svelte
@@ -229,7 +229,7 @@
   }
 </script>
 
-<div class="p-4 lg:p-6 max-w-5xl mx-auto">
+<div class="p-4 lg:p-6 max-w-[1240px] mx-auto">
   <!-- 헤더 -->
   <div class="flex items-center justify-between mb-4">
     <div class="flex items-center gap-3">
diff --git a/frontend/src/routes/library/+page.svelte b/frontend/src/routes/library/+page.svelte
index 66c3210..3a421e1 100644
--- a/frontend/src/routes/library/+page.svelte
+++ b/frontend/src/routes/library/+page.svelte
@@ -457,14 +457,14 @@
   </div>
 
   <!-- 승인 대기함 (§2) — ai_suggestion.proposed_category='library' 문서 -->
-  <div class="max-w-7xl mx-auto mb-4">
+  <div class="max-w-[1680px] mx-auto mb-4">
     <SuggestionReview
       proposedCategory="library"
       onChange={handleSuggestionChange}
     />
   </div>
 
-  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6">
+  <div class="max-w-[1680px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6">
     <!-- 왼쪽: 트리 (5/12) -->
     <aside class="lg:col-span-5 xl:col-span-4">
       <div class="bg-surface border border-default rounded-card p-3">
diff --git a/frontend/src/routes/video/+page.svelte b/frontend/src/routes/video/+page.svelte
index 9cd3498..b3d0661 100644
--- a/frontend/src/routes/video/+page.svelte
+++ b/frontend/src/routes/video/+page.svelte
@@ -50,7 +50,7 @@
   }
 </script>
 
-<div class="p-6 max-w-[1400px] mx-auto">
+<div class="p-6 max-w-[1680px] mx-auto">
   <header class="flex items-center gap-2 mb-4">
     <Film size={20} />
     <h1 class="text-xl font-semibold">Video</h1>