.

LOG.md

@@ -1,5 +1,15 @@
 # Work Log
 
+## 2026-06-02
+
+- Refined the public layout after desktop/mobile review: the shell now guards horizontal overflow, uses route-aware bottom padding, hides the top menubar on mobile, and opens the mobile sidebar/search panel from the Dock.
+- Reworked the Dock so mobile uses it as the primary navigation hub, while desktop keeps a folded Dock that expands on hover/focus and includes a pin toggle.
+- Rebalanced the home page around latest posts with popular posts as a supporting panel, converted the post detail page into a quieter reader surface, and hardened Markdown/code/table wrapping against mobile overflow.
+- Added a client-side archive explorer with year, month, category, and compact/comfort density controls over the existing server-fetched post list.
+- Rebuilt the chess page with safer viewport-aware board sizing, quieter puzzle panels, and enough layout clearance for the Dock.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on a local `next start` server confirmed no horizontal overflow on `/`, `/archive`, and `/play/chess` at mobile width, mobile Dock-centered navigation opens the sidebar panel without overflow, desktop CSS loads, the mobile Dock is hidden on desktop, and the desktop Dock starts folded with a pin control. The live chess board itself could not be verified because the local backend chess API was unavailable, so `/play/chess` rendered the error state.
+- Recommended next task: run a browser pass against a reachable backend API, especially one real post detail route and the populated chess puzzle board, then tune any remaining content-specific long-title or board-height edge cases.
+
 ## 2026-05-29
 
 - Fixed post detail 404s caused by double-encoding dynamic route slugs that already arrive percent-encoded from URLs such as `/posts/soft-delete%2C-hard-delete`.

src/app/archive/page.tsx

@@ -1,15 +1,10 @@
 import type { Metadata } from 'next';
-import Link from 'next/link';
+import { Archive } from 'lucide-react';
-import { Archive, Calendar, ChevronRight, FileText } from 'lucide-react';
+import { fetchPublicPosts } from '@/api/publicPosts';
-import {
+import ArchiveExplorer from '@/components/post/ArchiveExplorer';
-  fetchPublicPosts,
-} from '@/api/publicPosts';
-import EmptyState from '@/components/ui/EmptyState';
-import StatusBadge from '@/components/ui/StatusBadge';
-import Surface from '@/components/ui/Surface';
 import WindowSurface from '@/components/ui/WindowSurface';
 import { SITE_NAME } from '@/lib/site';
-import { Post, PostListResponse } from '@/types';
+import { PostListResponse } from '@/types';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 300;
@@ -31,133 +26,29 @@ const getTotalElements = (data?: PostListResponse | null) => {
   return data?.page?.totalElements ?? data?.totalElements ?? 0;
 };
 
-const formatDate = (value: string) => {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return '';
-
-  return new Intl.DateTimeFormat('ko-KR', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  }).format(date);
-};
-
-const groupPostsByMonth = (posts: Post[]) => {
-  const groups: Record<string, Record<string, Post[]>> = {};
-
-  posts.forEach((post) => {
-    const date = new Date(post.createdAt);
-    if (Number.isNaN(date.getTime())) return;
-
-    const year = date.getFullYear().toString();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-
-    groups[year] ??= {};
-    groups[year][month] ??= [];
-    groups[year][month].push(post);
-  });
-
-  return groups;
-};
-
-const sortPostsNewestFirst = (posts: Post[]) => {
-  return [...posts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-};
-
 export default async function ArchivePage() {
   const data = await fetchPublicPosts({ page: 0, size: 1000, sort: 'createdAt,desc' });
   const posts = data?.content || [];
-  const archiveGroups = groupPostsByMonth(posts);
-  const sortedYears = Object.keys(archiveGroups).sort((a, b) => Number(b) - Number(a));
   const totalPosts = getTotalElements(data);
 
   return (
-    <main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
+    <main className="mx-auto min-w-0 max-w-[1180px] px-0 py-3 md:py-6">
       <WindowSurface
         title="Archive"
         subtitle={`${totalPosts.toLocaleString()} posts`}
-        bodyClassName="p-5 md:p-8"
+        bodyClassName="p-4 md:p-7"
       >
-        <div className="mb-10 border-b border-[var(--color-line)] pb-7 text-center md:text-left">
+        <div className="mb-7 min-w-0 border-b border-[var(--color-line)] pb-6 text-center md:text-left">
-          <h1 className="mb-3 flex items-center justify-center gap-3 text-3xl font-bold tracking-normal text-[var(--color-text)] md:justify-start">
+          <h1 className="mb-3 flex min-w-0 items-center justify-center gap-3 text-3xl font-bold tracking-normal text-[var(--color-text)] md:justify-start">
-            <Archive className="text-[var(--color-accent)]" size={32} />
+            <Archive className="shrink-0 text-[var(--color-accent)]" size={32} />
-            <span>아카이브</span>
+            <span className="min-w-0 break-words">아카이브</span>
           </h1>
-          <p className="text-[var(--color-text-muted)]">
+          <p className="break-words text-sm leading-6 text-[var(--color-text-muted)] md:text-base">
-            지금까지 작성한 <span className="font-bold text-[var(--color-accent)]">{totalPosts}</span>개의 글을 시간순으로 정리했습니다.
+            지금까지 작성한 <span className="font-bold text-[var(--color-accent)]">{totalPosts.toLocaleString()}</span>개의 글을 기록 순서로 정리했습니다.
           </p>
         </div>
 
-        {sortedYears.length > 0 ? (
+        <ArchiveExplorer posts={posts} />
-          <div className="relative space-y-12">
-            <div className="absolute bottom-4 left-4 top-4 hidden w-px bg-[var(--color-line)] md:block" />
-
-            {sortedYears.map((year) => {
-              const months = archiveGroups[year];
-              const sortedMonths = Object.keys(months).sort((a, b) => Number(b) - Number(a));
-
-              return (
-                <div key={year} className="relative">
-                  <div className="mb-6 flex items-center gap-4">
-                    <div className="z-10 hidden h-9 w-9 items-center justify-center rounded-full border-4 border-[var(--window-bg-strong)] bg-[var(--color-accent-soft)] shadow-[var(--shadow-control)] md:flex">
-                      <div className="h-2.5 w-2.5 rounded-full bg-[var(--color-accent)]" />
-                    </div>
-                    <h2 className="text-2xl font-bold text-[var(--color-text)]">{year}</h2>
-                  </div>
-
-                  <div className="space-y-8 md:pl-12">
-                    {sortedMonths.map((month) => {
-                      const monthPosts = months[month];
-                      const sortedPosts = sortPostsNewestFirst(monthPosts);
-
-                      return (
-                        <div key={month} className="group">
-                          <h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-[var(--color-text-muted)]">
-                            <Calendar size={18} className="text-[var(--color-text-subtle)]" />
-                            {month}월
-                            <StatusBadge tone="neutral">{monthPosts.length}</StatusBadge>
-                          </h3>
-
-                          <div className="grid gap-3">
-                            {sortedPosts.map((post) => (
-                              <Link
-                                key={post.id}
-                                href={`/posts/${post.slug}`}
-                                className="group/item block"
-                              >
-                                <Surface interactive className="flex items-center justify-between gap-4 p-4 shadow-none">
-                                  <div className="min-w-0 flex-1">
-                                    <h4 className="truncate text-base font-semibold text-[var(--color-text)] transition-colors group-hover/item:text-[var(--color-accent)]">
-                                      {post.title}
-                                    </h4>
-                                    <div className="mt-1.5 flex items-center gap-2 text-xs text-[var(--color-text-subtle)]">
-                                      <StatusBadge tone="neutral" className="px-1.5 py-0.5">{post.categoryName || '미분류'}</StatusBadge>
-                                      <span aria-hidden="true">·</span>
-                                      <span className="tabular-nums">
-                                        {formatDate(post.createdAt)}
-                                      </span>
-                                    </div>
-                                  </div>
-                                  <ChevronRight className="text-[var(--color-text-subtle)] transition-colors group-hover/item:text-[var(--color-accent)]" size={20} />
-                                </Surface>
-                              </Link>
-                            ))}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        ) : (
-          <EmptyState
-            title="아직 작성한 글이 없습니다."
-            icon={<FileText size={48} />}
-            className="py-20"
-          />
-        )}
       </WindowSurface>
     </main>
   );

src/app/globals.css

@@ -124,9 +124,13 @@ html[data-theme="dark"] {
   color-scheme: dark;
 }
 
+html {
+  overflow-x: hidden;
+}
+
 body {
   min-height: 100vh;
-  overflow-x: hidden;
+  overflow-x: clip;
   background: var(--desktop-bg);
   background-attachment: fixed;
   color: var(--foreground);
@@ -141,6 +145,12 @@ body {
   text-rendering: optimizeLegibility;
 }
 
+pre,
+code,
+table {
+  max-width: 100%;
+}
+
 ::selection {
   background: var(--color-accent-soft);
   color: var(--color-text);

src/app/page.tsx

@@ -8,9 +8,7 @@ import {
   Search,
   TrendingUp,
 } from 'lucide-react';
-import {
+import { fetchPublicPosts } from '@/api/publicPosts';
-  fetchPublicPosts,
-} from '@/api/publicPosts';
 import EmptyState from '@/components/ui/EmptyState';
 import StatusBadge from '@/components/ui/StatusBadge';
 import Surface from '@/components/ui/Surface';
@@ -100,17 +98,17 @@ function SearchResults({
     <WindowSurface
       title="Search"
       subtitle={`"${keyword}"`}
-      bodyClassName="p-5 md:p-6"
+      bodyClassName="p-4 md:p-6"
       className="animate-in fade-in slide-in-from-bottom-2 duration-300"
     >
-      <div className="mb-6 flex flex-col gap-2 border-b border-[var(--color-line)] pb-5">
+      <div className="mb-6 flex min-w-0 flex-col gap-2 border-b border-[var(--color-line)] pb-5">
-        <div className="flex items-center gap-2 text-[var(--color-accent)]">
+        <div className="flex min-w-0 items-center gap-2 text-[var(--color-accent)]">
-          <Search size={22} />
+          <Search size={22} className="shrink-0" />
-          <h1 className="text-2xl font-bold tracking-normal text-[var(--color-text)]">
+          <h1 className="min-w-0 break-words text-2xl font-bold tracking-normal text-[var(--color-text)]">
             검색 결과
           </h1>
         </div>
-        <p className="text-sm text-[var(--color-text-muted)]">
+        <p className="break-words text-sm text-[var(--color-text-muted)]">
           검색어 <span className="font-semibold text-[var(--color-text)]">{keyword}</span>에 대한 글 {searchTotalElements.toLocaleString()}건
         </p>
       </div>
@@ -134,19 +132,19 @@ function NoticeStrip({ notices }: { notices: Post[] }) {
   return (
     <section className="space-y-2" aria-label="공지">
       {notices.slice(0, 3).map((notice) => (
-        <Link key={notice.id} href={`/posts/${notice.slug}`} className="group block">
+        <Link key={notice.id} href={`/posts/${notice.slug}`} className="group block min-w-0">
           <Surface
             interactive
-            className="flex items-center justify-between gap-4 border-red-500/10 bg-red-500/[0.045] px-4 py-3 shadow-none"
+            className="flex min-w-0 items-center justify-between gap-3 border-red-500/10 bg-red-500/[0.045] px-4 py-3 shadow-none"
           >
             <div className="flex min-w-0 items-center gap-3">
-              <StatusBadge tone="danger">공지</StatusBadge>
+              <StatusBadge tone="danger" className="shrink-0">공지</StatusBadge>
-              <span className="truncate text-sm font-semibold text-[var(--color-text)]">
+              <span className="min-w-0 truncate text-sm font-semibold text-[var(--color-text)]">
                 {notice.title}
               </span>
             </div>
             <div className="flex shrink-0 items-center gap-2 text-xs font-medium text-[var(--color-text-subtle)]">
-              <time>{formatDate(notice.createdAt)}</time>
+              <time className="hidden sm:inline">{formatDate(notice.createdAt)}</time>
               <ChevronRight size={15} className="transition group-hover:translate-x-0.5" />
             </div>
           </Surface>
@@ -160,17 +158,22 @@ function CompactPostRow({
   post,
   rank,
   showViews = false,
+  featured = false,
 }: {
   post: Post;
   rank?: number;
   showViews?: boolean;
+  featured?: boolean;
 }) {
-  const summary = getSummary(post.content, 92);
+  const summary = getSummary(post.content, featured ? 150 : 92);
 
   return (
     <Link
       href={`/posts/${post.slug}`}
-      className="group flex items-start justify-between gap-4 rounded-lg px-1 py-4 transition duration-150 hover:bg-[var(--card-bg)] hover:px-3"
+      className={clsxSafe(
+        'group flex min-w-0 items-start justify-between gap-3 rounded-lg px-1 py-4 transition duration-150 hover:bg-[var(--card-bg)] hover:px-3',
+        featured && 'md:py-5',
+      )}
     >
       {rank !== undefined && (
         <span className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--color-accent-soft)] text-xs font-bold tabular-nums text-[var(--color-accent)]">
@@ -178,24 +181,24 @@ function CompactPostRow({
         </span>
       )}
       <div className="min-w-0 flex-1">
-        <div className="mb-1.5 flex items-center gap-2">
+        <div className="mb-1.5 flex min-w-0 flex-wrap items-center gap-2">
           <StatusBadge tone={isNoticePost(post) ? 'danger' : 'neutral'} className="shrink-0">
             {post.categoryName || '미분류'}
           </StatusBadge>
-          <time className="text-xs text-[var(--color-text-subtle)]">
+          <time className="shrink-0 text-xs text-[var(--color-text-subtle)]">
             {formatDate(post.createdAt)}
           </time>
           {showViews && (
-            <span className="text-xs tabular-nums text-[var(--color-text-subtle)]">
+            <span className="shrink-0 text-xs tabular-nums text-[var(--color-text-subtle)]">
               조회 {post.viewCount.toLocaleString()}
             </span>
           )}
         </div>
-        <h3 className="line-clamp-1 text-base font-semibold text-[var(--color-text)] transition group-hover:text-[var(--color-accent)]">
+        <h3 className="line-clamp-2 break-words text-base font-semibold text-[var(--color-text)] transition group-hover:text-[var(--color-accent)]">
           {post.title}
         </h3>
         {summary && (
-          <p className="mt-1 line-clamp-2 text-sm leading-6 text-[var(--color-text-muted)]">
+          <p className="mt-1 line-clamp-2 break-words text-sm leading-6 text-[var(--color-text-muted)]">
             {summary}
           </p>
         )}
@@ -205,20 +208,26 @@ function CompactPostRow({
   );
 }
 
+function clsxSafe(...classes: Array<string | false | undefined>) {
+  return classes.filter(Boolean).join(' ');
+}
+
 function PostListPanel({
   title,
   icon,
   posts,
   isPopular = false,
+  featured = false,
 }: {
   title: string;
   icon: ReactNode;
   posts: Post[];
   isPopular?: boolean;
+  featured?: boolean;
 }) {
   return (
-    <Surface as="section" strong className="overflow-hidden">
+    <Surface as="section" strong className="min-w-0 overflow-hidden">
-      <div className="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-5 py-3">
+      <div className="flex min-h-12 min-w-0 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4 py-3 md:px-5">
         <h2 className="flex min-w-0 items-center gap-2 text-sm font-bold text-[var(--color-text)]">
           {icon}
           <span className="truncate">{title}</span>
@@ -229,7 +238,7 @@ function PostListPanel({
         </Link>
       </div>
 
-      <div className="p-5 md:p-6">
+      <div className="p-4 md:p-6">
         {posts.length > 0 ? (
           <div className="divide-y divide-[var(--color-line)]">
             {posts.map((post, index) => (
@@ -238,6 +247,7 @@ function PostListPanel({
                 post={post}
                 rank={isPopular ? index + 1 : undefined}
                 showViews={isPopular}
+                featured={featured}
               />
             ))}
           </div>
@@ -256,7 +266,7 @@ export default async function Home({ searchParams }: HomePageProps) {
     const searchData = await fetchPublicPosts({ keyword, size: 20 });
 
     return (
-      <main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
+      <main className="mx-auto min-w-0 max-w-[1180px] px-0 py-3 md:py-6">
         <SearchResults keyword={keyword} data={searchData} />
       </main>
     );
@@ -264,25 +274,25 @@ export default async function Home({ searchParams }: HomePageProps) {
 
   const [noticesData, latestData, popularData] = await Promise.all([
     fetchPublicPosts({ category: '공지', size: 3, sort: 'createdAt,desc' }),
-    fetchPublicPosts({ size: 8, sort: 'createdAt,desc' }),
+    fetchPublicPosts({ size: 10, sort: 'createdAt,desc' }),
     fetchPublicPosts({ size: 8, sort: 'viewCount,desc' }),
   ]);
 
   const notices = noticesData?.content || [];
-  const latestList = (latestData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
+  const latestList = (latestData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 7);
   const popularList = (popularData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
 
   return (
-    <main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
+    <main className="mx-auto min-w-0 max-w-[1180px] px-0 py-3 md:py-6">
       <h1 className="sr-only">{SITE_NAME}</h1>
       <WindowSurface
         title="WYPark"
         controls={(
           <Link
             href="/archive"
-            className="inline-flex h-8 items-center gap-2 rounded-full bg-[var(--color-text)] px-3 text-xs font-semibold text-[var(--color-page)] shadow-[var(--shadow-control)] transition hover:opacity-90 dark:bg-white dark:text-black"
+            className="inline-flex h-8 min-w-0 items-center gap-2 rounded-full bg-[var(--color-text)] px-3 text-xs font-semibold text-[var(--color-page)] shadow-[var(--shadow-control)] transition hover:opacity-90 dark:bg-white dark:text-black"
           >
-            전체 글
+            <span className="hidden sm:inline">전체 글</span>
             <Archive size={14} />
           </Link>
         )}
@@ -290,17 +300,18 @@ export default async function Home({ searchParams }: HomePageProps) {
       >
         <NoticeStrip notices={notices} />
 
-        <section className="grid gap-6 lg:grid-cols-2">
+        <section className="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)]">
-          <PostListPanel
-            title="인기 글"
-            icon={<TrendingUp size={18} className="text-[var(--color-accent)]" />}
-            posts={popularList}
-            isPopular
-          />
           <PostListPanel
             title="최신 글"
-            icon={<Clock size={18} className="text-[var(--color-accent)]" />}
+            icon={<Clock size={18} className="shrink-0 text-[var(--color-accent)]" />}
             posts={latestList}
+            featured
+          />
+          <PostListPanel
+            title="인기 글"
+            icon={<TrendingUp size={18} className="shrink-0 text-[var(--color-accent)]" />}
+            posts={popularList}
+            isPopular
           />
         </section>
       </WindowSurface>

src/app/play/chess/page.tsx

@@ -3,7 +3,7 @@ import ChessPuzzleClient from '@/components/chess/ChessPuzzleClient';
 
 export const metadata: Metadata = {
   title: '오늘의 체스 퍼즐 | WYPark Blog',
-  description: '오늘의 한 수 메이트 체스 퍼즐',
+  description: '오늘의 메이트 체스 퍼즐',
 };
 
 export default function ChessPuzzlePage() {

src/components/chess/ChessPuzzleClient.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { CSSProperties, ReactNode } from 'react';
 import { useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { Chess as ChessGame, type Color, type Move, type PieceSymbol, type Square } from 'chess.js';
@@ -23,6 +24,9 @@ const TIMEZONE = 'Asia/Seoul';
 const FILES = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const;
 const RANKS = [8, 7, 6, 5, 4, 3, 2, 1] as const;
 const BOARD_SQUARES = RANKS.flatMap((rank) => FILES.map((file) => `${file}${rank}` as Square));
+const BOARD_SIZE_STYLE: CSSProperties = {
+  width: 'min(100%, clamp(18rem, calc(100svh - 15rem), 42rem))',
+};
 
 const PIECE_SYMBOLS: Record<Color, Record<PieceSymbol, string>> = {
   w: {
@@ -59,7 +63,7 @@ const getReadyFeedback = (puzzle: ChessPuzzle): { tone: FeedbackTone; message: s
 
   return {
     tone: 'neutral',
-    message: `${turnLabel(game.turn())} 차례 · 체크메이트 한 수`,
+    message: `${turnLabel(game.turn())} 차례. 체크메이트를 찾으세요.`,
   };
 };
 
@@ -85,27 +89,45 @@ const formatDate = (value: string) => {
 
 function PageHeader() {
   return (
-    <section className="flex flex-col gap-2 border-b border-[var(--color-line)] pb-6">
+    <section className="flex min-w-0 flex-col gap-2 border-b border-[var(--color-line)] pb-5">
-      <div className="flex items-center gap-2 text-[var(--color-accent)]">
+      <div className="flex min-w-0 items-center gap-2 text-[var(--color-accent)]">
-        <Target size={23} />
+        <Target size={23} className="shrink-0" />
-        <h1 className="text-2xl font-bold tracking-normal text-[var(--color-text)] md:text-3xl">
+        <h1 className="min-w-0 break-words text-2xl font-bold tracking-normal text-[var(--color-text)] md:text-3xl">
           오늘의 체스 퍼즐
         </h1>
       </div>
-      <p className="max-w-2xl text-sm leading-6 text-[var(--color-text-muted)]">
+      <p className="max-w-2xl break-words text-sm leading-6 text-[var(--color-text-muted)]">
-        매일 하나씩 바뀌는 한 수 메이트 퍼즐입니다.
+        매일 하나씩 바뀌는 메이트 체스 퍼즐입니다.
       </p>
     </section>
   );
 }
 
+function ChessPageFrame({ children }: { children: ReactNode }) {
+  return (
+    <main className="mx-auto flex w-full min-w-0 max-w-[1160px] flex-col gap-5 px-0 py-3 md:py-6">
+      {children}
+    </main>
+  );
+}
+
+function BoardWindow({ children }: { children: ReactNode }) {
+  return (
+    <WindowSurface title="Board" showTrafficLights={false} bodyClassName="p-3 md:p-5">
+      <div className="mx-auto max-w-full" style={BOARD_SIZE_STYLE}>
+        {children}
+      </div>
+    </WindowSurface>
+  );
+}
+
 function LoadingState() {
   return (
-    <main className="mx-auto flex w-full flex-col gap-6 px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
+    <ChessPageFrame>
       <PageHeader />
-      <section className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_21rem]">
+      <section className="grid min-w-0 items-start gap-5 lg:grid-cols-[minmax(0,1fr)_20rem]">
-        <WindowSurface title="Board" bodyClassName="p-3 md:p-5">
+        <BoardWindow>
-          <div className="mx-auto grid aspect-square w-full max-w-[min(78vh,680px)] grid-cols-8 overflow-hidden rounded-lg border border-[var(--color-line)]">
+          <div className="grid aspect-square w-full grid-cols-8 overflow-hidden rounded-lg border border-[var(--color-line)]">
             {BOARD_SQUARES.map((square, index) => (
               <div
                 key={square}
@@ -117,25 +139,25 @@ function LoadingState() {
               />
             ))}
           </div>
-        </WindowSurface>
+        </BoardWindow>
-        <WindowSurface title="Puzzle" as="aside" bodyClassName="flex min-h-72 flex-col items-center justify-center p-5 text-center">
+        <WindowSurface title="Puzzle" showTrafficLights={false} as="aside" bodyClassName="flex min-h-72 flex-col items-center justify-center p-5 text-center">
           <Loader2 className="mb-3 animate-spin text-[var(--color-accent)]" size={28} />
           <p className="text-sm font-semibold text-[var(--color-text)]">오늘의 퍼즐을 불러오는 중입니다.</p>
         </WindowSurface>
       </section>
-    </main>
+    </ChessPageFrame>
   );
 }
 
 function ErrorState({ onRetry }: { onRetry: () => void }) {
   return (
-    <main className="mx-auto flex w-full flex-col gap-6 px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
+    <ChessPageFrame>
       <PageHeader />
-      <WindowSurface title="Puzzle" bodyClassName="flex min-h-80 flex-col items-center justify-center p-8 text-center">
+      <WindowSurface title="Puzzle" showTrafficLights={false} bodyClassName="flex min-h-80 flex-col items-center justify-center p-8 text-center">
         <AlertCircle className="mb-3 text-red-500" size={30} />
-        <h2 className="text-lg font-bold text-[var(--color-text)]">오늘의 퍼즐을 불러오지 못했습니다.</h2>
+        <h2 className="break-words text-lg font-bold text-[var(--color-text)]">오늘의 퍼즐을 불러오지 못했습니다.</h2>
-        <p className="mt-2 max-w-md text-sm leading-6 text-[var(--color-text-muted)]">
+        <p className="mt-2 max-w-md break-words text-sm leading-6 text-[var(--color-text-muted)]">
-          백엔드 API가 아직 준비되지 않았거나 잠시 응답하지 않습니다.
+          백엔드 API가 준비되지 않았거나 잠시 응답하지 않을 수 있습니다.
         </p>
         <button
           type="button"
@@ -146,7 +168,7 @@ function ErrorState({ onRetry }: { onRetry: () => void }) {
           다시 시도
         </button>
       </WindowSurface>
-    </main>
+    </ChessPageFrame>
   );
 }
 
@@ -212,7 +234,7 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
       setLastMoveSquares(null);
       setFeedback({
         tone: 'error',
-        message: `${move.san}는 아직 메이트가 아닙니다.`,
+        message: `${move.san}은 아직 메이트가 아닙니다.`,
       });
     } catch {
       setFeedback({
@@ -263,12 +285,12 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
   };
 
   return (
-    <main className="mx-auto flex w-full flex-col gap-6 px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
+    <ChessPageFrame>
       <PageHeader />
 
-      <section className="grid items-start gap-5 lg:grid-cols-[minmax(0,1fr)_21rem]">
+      <section className="grid min-w-0 items-start gap-5 lg:grid-cols-[minmax(0,1fr)_20rem]">
-        <WindowSurface title="Board" bodyClassName="p-3 md:p-5">
+        <BoardWindow>
-          <div className="mx-auto grid aspect-square w-full max-w-[min(78vh,680px)] grid-cols-8 overflow-hidden rounded-lg border border-[var(--color-line)] shadow-[var(--shadow-control)]">
+          <div className="grid aspect-square w-full grid-cols-8 overflow-hidden rounded-lg border border-[var(--color-line)] shadow-[var(--shadow-control)]">
             {BOARD_SQUARES.map((square, index) => {
               const piece = game.get(square);
               const file = square[0];
@@ -286,7 +308,7 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
                   type="button"
                   onClick={() => handleSquareClick(square)}
                   className={clsx(
-                    'relative flex aspect-square items-center justify-center overflow-hidden text-[clamp(1.75rem,8vw,4.8rem)] leading-none transition',
+                    'relative flex aspect-square items-center justify-center overflow-hidden text-[2rem] leading-none transition sm:text-[2.5rem] md:text-[3.75rem]',
                     isLight ? 'bg-[#eef0e6]' : 'bg-[#5f8d68]',
                     isSelected && 'z-10 ring-4 ring-[var(--color-accent)] ring-inset',
                     isLastMoveSquare && 'bg-[var(--color-accent-soft)]',
@@ -339,25 +361,25 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
               );
             })}
           </div>
-        </WindowSurface>
+        </BoardWindow>
 
-        <WindowSurface title="Puzzle" as="aside" bodyClassName="p-5">
+        <WindowSurface title="Puzzle" showTrafficLights={false} as="aside" bodyClassName="p-4 md:p-5">
-          <div className="mb-4 flex items-start justify-between gap-3">
+          <div className="mb-4 flex min-w-0 items-start justify-between gap-3">
-            <div>
+            <div className="min-w-0">
-              <p className="text-xs font-semibold uppercase text-[var(--color-text-subtle)]">
+              <p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">
                 {formatDate(puzzle.date)}
               </p>
-              <h2 className="mt-1 text-xl font-bold tracking-normal text-[var(--color-text)]">
+              <h2 className="mt-1 break-words text-xl font-bold tracking-normal text-[var(--color-text)]">
                 {puzzle.title}
               </h2>
-              <p className="mt-1 text-sm text-[var(--color-text-muted)]">{puzzle.theme}</p>
+              <p className="mt-1 break-words text-sm text-[var(--color-text-muted)]">{puzzle.theme}</p>
             </div>
             {solved && <CheckCircle2 size={24} className="shrink-0 text-emerald-500" />}
           </div>
 
           <div
             className={clsx(
-              'mb-4 rounded-lg border px-3 py-3 text-sm font-semibold leading-6',
+              'mb-4 break-words rounded-lg border px-3 py-3 text-sm font-semibold leading-6',
               feedback.tone === 'success' && 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
               feedback.tone === 'error' && 'border-red-500/25 bg-red-500/10 text-red-700 dark:text-red-300',
               feedback.tone === 'neutral' && 'border-[var(--color-line)] bg-black/[0.025] text-[var(--color-text-muted)] dark:bg-white/[0.06]',
@@ -367,13 +389,13 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
           </div>
 
           <dl className="grid grid-cols-2 gap-3 text-sm">
-            <div className="rounded-lg bg-black/[0.025] px-3 py-2 dark:bg-white/[0.06]">
+            <div className="min-w-0 rounded-lg bg-black/[0.025] px-3 py-2 dark:bg-white/[0.06]">
-              <dt className="text-xs text-[var(--color-text-subtle)]">난이도</dt>
+              <dt className="text-xs text-[var(--color-text-subtle)]">레이팅</dt>
-              <dd className="mt-0.5 font-semibold text-[var(--color-text)]">{puzzle.rating}</dd>
+              <dd className="mt-0.5 truncate font-semibold text-[var(--color-text)]">{puzzle.rating}</dd>
             </div>
-            <div className="rounded-lg bg-black/[0.025] px-3 py-2 dark:bg-white/[0.06]">
+            <div className="min-w-0 rounded-lg bg-black/[0.025] px-3 py-2 dark:bg-white/[0.06]">
               <dt className="text-xs text-[var(--color-text-subtle)]">정답</dt>
-              <dd className="mt-0.5 font-semibold text-[var(--color-text)]">
+              <dd className="mt-0.5 truncate font-semibold text-[var(--color-text)]">
                 {solved ? puzzle.answer : '숨김'}
               </dd>
             </div>
@@ -404,14 +426,14 @@ function ChessPuzzleBoard({ puzzle }: { puzzle: ChessPuzzle }) {
             href={puzzle.sourceUrl}
             target="_blank"
             rel="noreferrer"
-            className="mt-4 inline-flex items-center gap-1.5 text-xs font-semibold text-[var(--color-text-subtle)] transition hover:text-[var(--color-accent)]"
+            className="mt-4 inline-flex max-w-full items-center gap-1.5 break-words text-xs font-semibold text-[var(--color-text-subtle)] transition hover:text-[var(--color-accent)]"
           >
-            Lichess 원문
+            <span className="truncate">Lichess 원문</span>
-            <ExternalLink size={13} />
+            <ExternalLink size={13} className="shrink-0" />
           </a>
         </WindowSurface>
       </section>
-    </main>
+    </ChessPageFrame>
   );
 }
 

src/components/layout/DesktopDock.tsx

@@ -1,63 +1,114 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { clsx } from 'clsx';
-import { Archive, Crown, Home, LogIn, LogOut, PenLine, Settings, UserPlus } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import {
+  Archive,
+  Crown,
+  Home,
+  LogIn,
+  LogOut,
+  Menu,
+  MoreHorizontal,
+  PenLine,
+  Pin,
+  PinOff,
+  Settings,
+  UserPlus,
+} from 'lucide-react';
+import ThemeToggle from '@/components/theme/ThemeToggle';
 import { useAuthStore } from '@/store/authStore';
 
 interface DesktopDockProps {
   isSidebarCollapsed: boolean;
+  onOpenMobileMenu: () => void;
 }
 
-type DockItem = {
+type DockAction = {
   key: string;
   href?: string;
   label: string;
-  icon: typeof Home;
+  icon: LucideIcon;
   isActive?: (pathname: string) => boolean;
   onClick?: () => void;
 };
 
-export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
+const isActivePath = (target: string) => (pathname: string) => {
+  if (target === '/') return pathname === '/';
+  return pathname.startsWith(target);
+};
+
+export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: DesktopDockProps) {
   const pathname = usePathname();
   const router = useRouter();
   const { isLoggedIn, role, logout, _hasHydrated } = useAuthStore();
+  const [isPinned, setIsPinned] = useState(false);
+  const [isMoreOpen, setIsMoreOpen] = useState(false);
   const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
 
+  useEffect(() => {
+    const frameId = window.requestAnimationFrame(() => {
+      setIsPinned(window.localStorage.getItem('dock-pinned') === 'true');
+    });
+
+    return () => window.cancelAnimationFrame(frameId);
+  }, []);
+
+  useEffect(() => {
+    const frameId = window.requestAnimationFrame(() => {
+      setIsMoreOpen(false);
+    });
+
+    return () => window.cancelAnimationFrame(frameId);
+  }, [pathname]);
+
+  const handlePinnedChange = () => {
+    setIsPinned((previous) => {
+      const nextValue = !previous;
+      window.localStorage.setItem('dock-pinned', String(nextValue));
+      return nextValue;
+    });
+  };
+
   const handleLogout = () => {
     if (confirm('로그아웃 하시겠습니까?')) {
       logout();
+      setIsMoreOpen(false);
       router.push('/');
     }
   };
 
-  const items: DockItem[] = [
+  const baseItems: DockAction[] = [
     {
       key: 'home',
       href: '/',
       label: '홈',
       icon: Home,
-      isActive: (currentPath) => currentPath === '/',
+      isActive: isActivePath('/'),
     },
     {
       key: 'archive',
       href: '/archive',
       label: '아카이브',
       icon: Archive,
-      isActive: (currentPath) => currentPath.startsWith('/archive'),
+      isActive: isActivePath('/archive'),
     },
     {
       key: 'chess',
       href: '/play/chess',
       label: '체스',
       icon: Crown,
-      isActive: (currentPath) => currentPath.startsWith('/play/chess'),
+      isActive: isActivePath('/play/chess'),
     },
   ];
 
+  const authItems: DockAction[] = [];
+
   if (_hasHydrated && isAdmin) {
-    items.push(
+    authItems.push(
       {
         key: 'admin',
         href: '/admin',
@@ -70,7 +121,7 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
         href: '/admin/posts/new',
         label: '글쓰기',
         icon: PenLine,
-        isActive: (currentPath) => currentPath.startsWith('/admin/posts/new'),
+        isActive: isActivePath('/admin/posts/new'),
       },
       {
         key: 'logout',
@@ -80,43 +131,45 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
       },
     );
   } else if (_hasHydrated && isLoggedIn) {
-    items.push({
+    authItems.push({
       key: 'logout',
       label: '로그아웃',
       icon: LogOut,
       onClick: handleLogout,
     });
   } else if (_hasHydrated) {
-    items.push(
+    authItems.push(
       {
         key: 'login',
         href: '/login',
         label: '로그인',
         icon: LogIn,
-        isActive: (currentPath) => currentPath.startsWith('/login'),
+        isActive: isActivePath('/login'),
       },
       {
         key: 'signup',
         href: '/signup',
         label: '회원가입',
         icon: UserPlus,
-        isActive: (currentPath) => currentPath.startsWith('/signup'),
+        isActive: isActivePath('/signup'),
       },
     );
   }
 
-  const renderItem = (item: DockItem) => {
+  const desktopItems = [...baseItems, ...authItems];
+
+  const renderDesktopItem = (item: DockAction) => {
     const Icon = item.icon;
     const active = item.isActive?.(pathname) ?? false;
     const itemClass = clsx(
-      'group relative flex h-10 w-10 items-center justify-center rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition duration-150 hover:-translate-y-1 hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)] focus-visible:-translate-y-1 sm:h-12 sm:w-12',
+      'group/item relative flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition duration-150 hover:-translate-y-1 hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)] focus-visible:-translate-y-1',
       active && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)] ring-1 ring-[var(--color-accent-soft)]',
     );
 
     const content = (
       <>
         <Icon size={20} strokeWidth={2.1} />
-        <span className="pointer-events-none absolute -top-9 hidden whitespace-nowrap rounded-full border border-[var(--card-border)] bg-[var(--card-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition group-hover:opacity-100 sm:block">
+        <span className="pointer-events-none absolute -top-9 whitespace-nowrap rounded-full border border-[var(--card-border)] bg-[var(--card-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition group-hover/item:opacity-100">
           {item.label}
         </span>
         {active && (
@@ -154,17 +207,169 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
     );
   };
 
+  const renderMobileItem = (item: DockAction, activeOverride?: boolean) => {
+    const Icon = item.icon;
+    const active = activeOverride ?? item.isActive?.(pathname) ?? false;
+    const itemClass = clsx(
+      'flex h-12 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg border border-transparent px-1 text-[10px] font-semibold leading-none text-[var(--color-text-subtle)] transition-colors',
+      'hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] focus-visible:bg-[var(--card-bg-strong)]',
+      active && 'border-[var(--control-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]',
+    );
+    const content = (
+      <>
+        <Icon size={18} strokeWidth={2.1} />
+        <span className="max-w-full truncate">{item.label}</span>
+      </>
+    );
+
+    if (item.href) {
+      return (
+        <Link
+          key={item.key}
+          href={item.href}
+          title={item.label}
+          aria-label={item.label}
+          aria-current={active ? 'page' : undefined}
+          className={itemClass}
+          onClick={() => setIsMoreOpen(false)}
+        >
+          {content}
+        </Link>
+      );
+    }
+
+    return (
+      <button
+        key={item.key}
+        type="button"
+        title={item.label}
+        aria-label={item.label}
+        onClick={item.onClick}
+        className={itemClass}
+      >
+        {content}
+      </button>
+    );
+  };
+
   return (
-    <nav
+    <>
-      aria-label="빠른 실행 Dock"
+      <nav
-      className={clsx(
+        aria-label="빠른 실행 Dock"
-        'fixed bottom-3 left-1/2 z-40 -translate-x-1/2 transition-[left] duration-300 ease-out md:bottom-5',
+        className={clsx(
-        isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : 'md:left-[calc(50%+9rem)]',
+          'group fixed bottom-2 left-1/2 z-40 hidden -translate-x-1/2 md:bottom-4 md:block',
+          'transition-[left] duration-300 ease-out',
+          isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : 'md:left-[calc(50%+9rem)]',
+        )}
+      >
+        <div
+          className={clsx(
+            'pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-2 transition-opacity',
+            isPinned && 'opacity-0',
+          )}
+          aria-hidden="true"
+        >
+          <span className="block h-1.5 w-10 rounded-full border border-[var(--dock-border)] bg-[var(--dock-bg)] shadow-[var(--shadow-control)] backdrop-blur-[18px]" />
+        </div>
+
+        <div
+          className={clsx(
+            'flex max-w-[calc(100vw-2rem)] items-end gap-2 overflow-visible rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-dock)] backdrop-blur-[30px]',
+            'transition-[transform,opacity] duration-300 ease-out',
+            !isPinned && 'md:translate-y-[calc(100%-0.875rem)] md:opacity-80 md:hover:translate-y-0 md:hover:opacity-100 md:focus-within:translate-y-0 md:focus-within:opacity-100',
+          )}
+        >
+          {desktopItems.map(renderDesktopItem)}
+          <button
+            type="button"
+            title={isPinned ? 'Dock 고정 해제' : 'Dock 고정'}
+            aria-label={isPinned ? 'Dock 고정 해제' : 'Dock 고정'}
+            aria-pressed={isPinned}
+            onClick={handlePinnedChange}
+            className={clsx(
+              'group/item relative ml-1 flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition duration-150 hover:-translate-y-1 hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
+              isPinned && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
+            )}
+          >
+            {isPinned ? <PinOff size={19} /> : <Pin size={19} />}
+            <span className="pointer-events-none absolute -top-9 whitespace-nowrap rounded-full border border-[var(--card-border)] bg-[var(--card-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition group-hover/item:opacity-100">
+              {isPinned ? '고정 해제' : '고정'}
+            </span>
+          </button>
+        </div>
+      </nav>
+
+      {isMoreOpen && (
+        <div className="fixed inset-x-2 bottom-[4.75rem] z-50 md:hidden">
+          <div className="mx-auto max-w-md rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] p-3 shadow-[var(--shadow-dock)] backdrop-blur-[30px]">
+            <div className="mb-3 flex items-center justify-between gap-3">
+              <span className="text-xs font-bold uppercase tracking-normal text-[var(--color-text-subtle)]">
+                설정
+              </span>
+              <ThemeToggle />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              {authItems.map((item) => {
+                const Icon = item.icon;
+                const active = item.isActive?.(pathname) ?? false;
+                const className = clsx(
+                  'inline-flex h-10 min-w-0 items-center justify-center gap-2 rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition-colors hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
+                  active && 'text-[var(--color-accent)]',
+                );
+
+                if (item.href) {
+                  return (
+                    <Link
+                      key={item.key}
+                      href={item.href}
+                      className={className}
+                      onClick={() => setIsMoreOpen(false)}
+                    >
+                      <Icon size={16} />
+                      <span className="truncate">{item.label}</span>
+                    </Link>
+                  );
+                }
+
+                return (
+                  <button
+                    key={item.key}
+                    type="button"
+                    className={className}
+                    onClick={item.onClick}
+                  >
+                    <Icon size={16} />
+                    <span className="truncate">{item.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
       )}
-    >
+
-      <div className="flex max-w-[calc(100vw-1rem)] items-end gap-1.5 overflow-x-auto rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-dock)] backdrop-blur-[30px] sm:gap-2">
+      <nav aria-label="모바일 Dock" className="fixed inset-x-2 bottom-2 z-40 md:hidden">
-        {items.map(renderItem)}
+        <div className="mx-auto flex max-w-md items-center gap-1 rounded-lg border border-[var(--dock-border)] bg-[var(--dock-bg)] p-1.5 pb-[calc(0.375rem+env(safe-area-inset-bottom))] shadow-[var(--shadow-dock)] backdrop-blur-[30px]">
-      </div>
+          {renderMobileItem(baseItems[0])}
-    </nav>
+          {renderMobileItem(baseItems[1])}
+          {renderMobileItem({
+            key: 'menu',
+            label: '메뉴',
+            icon: Menu,
+            onClick: () => {
+              setIsMoreOpen(false);
+              onOpenMobileMenu();
+            },
+          })}
+          {renderMobileItem(baseItems[2])}
+          {renderMobileItem({
+            key: 'more',
+            label: '더보기',
+            icon: MoreHorizontal,
+            onClick: () => setIsMoreOpen((previous) => !previous),
+          }, isMoreOpen)}
+        </div>
+      </nav>
+    </>
   );
 }

src/components/layout/DesktopMenuBar.tsx

@@ -54,7 +54,7 @@ export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarPro
   return (
     <div
       className={clsx(
-        'fixed left-16 right-3 top-3 z-40 transition-[left] duration-300 ease-out md:right-6',
+        'fixed right-6 top-3 z-40 hidden transition-[left] duration-300 ease-out md:block',
         isSidebarCollapsed ? 'md:left-24' : 'md:left-[19rem]',
       )}
     >

src/components/layout/DesktopShell.tsx

@@ -2,13 +2,16 @@
 
 import { useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
 import { clsx } from 'clsx';
 import DesktopDock from '@/components/layout/DesktopDock';
 import DesktopMenuBar from '@/components/layout/DesktopMenuBar';
 import Sidebar from '@/components/layout/Sidebar';
 
 export default function DesktopShell({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
 
   useEffect(() => {
     const savedValue = window.localStorage.getItem('sidebar-collapsed');
@@ -21,29 +24,50 @@ export default function DesktopShell({ children }: { children: ReactNode }) {
     return () => window.cancelAnimationFrame(frameId);
   }, []);
 
+  useEffect(() => {
+    const frameId = window.requestAnimationFrame(() => {
+      setIsMobileSidebarOpen(false);
+    });
+
+    return () => window.cancelAnimationFrame(frameId);
+  }, [pathname]);
+
   const handleSidebarCollapsedChange = (nextValue: boolean) => {
     setIsSidebarCollapsed(nextValue);
     window.localStorage.setItem('sidebar-collapsed', String(nextValue));
   };
 
+  const isReaderRoute = pathname.startsWith('/posts/');
+  const isChessRoute = pathname.startsWith('/play/chess');
+
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen overflow-x-clip">
       <Sidebar
         isDesktopCollapsed={isSidebarCollapsed}
+        isMobileOpen={isMobileSidebarOpen}
         onDesktopCollapsedChange={handleSidebarCollapsedChange}
+        onMobileOpenChange={setIsMobileSidebarOpen}
       />
       <DesktopMenuBar isSidebarCollapsed={isSidebarCollapsed} />
-      <DesktopDock isSidebarCollapsed={isSidebarCollapsed} />
+      <DesktopDock
+        isSidebarCollapsed={isSidebarCollapsed}
+        onOpenMobileMenu={() => setIsMobileSidebarOpen(true)}
+      />
 
       <main
         className={clsx(
-          'relative w-full flex-1 transition-[margin,width] duration-300 ease-out',
+          'relative min-w-0 max-w-full flex-1 overflow-x-clip transition-[margin,width] duration-300 ease-out',
           isSidebarCollapsed
             ? 'md:ml-20 md:w-[calc(100%-5rem)]'
             : 'md:ml-72 md:w-[calc(100%-18rem)]',
         )}
       >
-        <div className="mx-auto w-full px-4 pb-28 pt-20 md:px-6 md:pb-32 md:pt-24 lg:px-8">
+        <div
+          className={clsx(
+            'mx-auto min-w-0 max-w-full px-3 pt-16 md:px-6 md:pt-24 lg:px-8',
+            isChessRoute ? 'pb-44 md:pb-40' : isReaderRoute ? 'pb-44 md:pb-36' : 'pb-36 md:pb-32',
+          )}
+        >
           {children}
         </div>
       </main>

src/components/layout/Sidebar.tsx

@@ -15,8 +15,6 @@ import {
   Folder,
   FolderOpen,
   Home,
-  Menu,
-  X,
 } from 'lucide-react';
 import { getCategories } from '@/api/category';
 import { getProfile } from '@/api/profile';
@@ -25,7 +23,9 @@ import { Category, Profile } from '@/types';
 
 interface SidebarProps {
   isDesktopCollapsed: boolean;
+  isMobileOpen: boolean;
   onDesktopCollapsedChange: (nextValue: boolean) => void;
+  onMobileOpenChange: (nextValue: boolean) => void;
 }
 
 interface CategoryItemProps {
@@ -125,10 +125,10 @@ function CategoryItem({ category, depth, onNavigate, pathname }: CategoryItemPro
 
 function SidebarContent({
   isDesktopCollapsed,
+  isMobileOpen,
   onDesktopCollapsedChange,
+  onMobileOpenChange,
 }: SidebarProps) {
-  const [isOpen, setIsOpen] = useState(false);
-
   const pathname = usePathname();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -150,7 +150,7 @@ function SidebarContent({
   const displayProfile = profile ? { ...defaultProfile, ...profile } : defaultProfile;
   const decodedPathname = decodeURIComponent(pathname);
 
-  const closeSidebar = () => setIsOpen(false);
+  const closeSidebar = () => onMobileOpenChange(false);
 
   const handleSearch = (newKeyword: string) => {
     const trimmedKeyword = newKeyword.trim();
@@ -168,30 +168,21 @@ function SidebarContent({
 
   return (
     <>
-      <button
-        type="button"
-        onClick={() => setIsOpen((previous) => !previous)}
-        className="fixed left-4 top-4 z-50 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-2 shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)] md:hidden"
-        aria-label={isOpen ? '사이드바 닫기' : '사이드바 열기'}
-      >
-        {isOpen ? <X size={20} /> : <Menu size={20} />}
-      </button>
-
       <button
         type="button"
         aria-label="사이드바 닫기"
         onClick={closeSidebar}
         className={clsx(
-          'fixed inset-0 z-30 bg-black/35 backdrop-blur-sm transition-opacity md:hidden',
+          'fixed inset-0 z-50 bg-black/35 backdrop-blur-sm transition-opacity md:hidden',
-          isOpen ? 'opacity-100' : 'pointer-events-none opacity-0',
+          isMobileOpen ? 'opacity-100' : 'pointer-events-none opacity-0',
         )}
       />
 
       <aside
         className={clsx(
-          'fixed left-0 top-0 z-40 flex h-screen w-72 flex-col overflow-hidden border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)] shadow-[var(--shadow-sidebar)] backdrop-blur-[30px] transition-[transform,width] duration-300 ease-out md:translate-x-0',
+          'fixed left-0 top-0 z-[60] flex h-screen w-72 max-w-[calc(100vw-1.5rem)] flex-col overflow-hidden border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)] shadow-[var(--shadow-sidebar)] backdrop-blur-[30px] transition-[transform,width] duration-300 ease-out md:z-40 md:max-w-none md:translate-x-0',
           isDesktopCollapsed ? 'md:w-20' : 'md:w-72',
-          isOpen ? 'translate-x-0' : '-translate-x-full',
+          isMobileOpen ? 'translate-x-0' : '-translate-x-full',
         )}
       >
         <div className={clsx('relative shrink-0 text-center', isDesktopCollapsed ? 'px-6 pb-5 pt-8 md:px-3 md:pb-4 md:pt-5' : 'px-6 pb-5 pt-8')}>

src/components/post/ArchiveExplorer.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { clsx } from 'clsx';
+import { Calendar, ChevronRight, Rows3, SlidersHorizontal } from 'lucide-react';
+import EmptyState from '@/components/ui/EmptyState';
+import StatusBadge from '@/components/ui/StatusBadge';
+import Surface from '@/components/ui/Surface';
+import { Post } from '@/types';
+
+type ArchiveExplorerProps = {
+  posts: Post[];
+};
+
+type Density = 'comfortable' | 'compact';
+
+const ALL = 'all';
+
+const getPostDate = (post: Post) => {
+  const date = new Date(post.createdAt);
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+
+const getMonthKey = (date: Date) => {
+  return (date.getMonth() + 1).toString().padStart(2, '0');
+};
+
+const formatDate = (value: string) => {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(date);
+};
+
+const sortNewestFirst = (posts: Post[]) => {
+  return [...posts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+};
+
+export default function ArchiveExplorer({ posts }: ArchiveExplorerProps) {
+  const [selectedYear, setSelectedYear] = useState(ALL);
+  const [selectedMonth, setSelectedMonth] = useState(ALL);
+  const [selectedCategory, setSelectedCategory] = useState(ALL);
+  const [density, setDensity] = useState<Density>('compact');
+
+  const years = useMemo(() => {
+    return Array.from(new Set(posts.map(getPostDate).filter(Boolean).map((date) => date!.getFullYear().toString())))
+      .sort((a, b) => Number(b) - Number(a));
+  }, [posts]);
+
+  const monthOptions = useMemo(() => {
+    return Array.from(new Set(posts
+      .map((post) => {
+        const date = getPostDate(post);
+        if (!date) return null;
+        if (selectedYear !== ALL && date.getFullYear().toString() !== selectedYear) return null;
+        return getMonthKey(date);
+      })
+      .filter(Boolean) as string[]))
+      .sort((a, b) => Number(b) - Number(a));
+  }, [posts, selectedYear]);
+
+  const categories = useMemo(() => {
+    return Array.from(new Set(posts.map((post) => post.categoryName || '미분류'))).sort((a, b) => a.localeCompare(b, 'ko-KR'));
+  }, [posts]);
+
+  useEffect(() => {
+    if (selectedMonth !== ALL && !monthOptions.includes(selectedMonth)) {
+      setSelectedMonth(ALL);
+    }
+  }, [monthOptions, selectedMonth]);
+
+  const filteredPosts = useMemo(() => {
+    return sortNewestFirst(posts.filter((post) => {
+      const date = getPostDate(post);
+      if (!date) return false;
+
+      const year = date.getFullYear().toString();
+      const month = getMonthKey(date);
+      const category = post.categoryName || '미분류';
+
+      return (
+        (selectedYear === ALL || year === selectedYear)
+        && (selectedMonth === ALL || month === selectedMonth)
+        && (selectedCategory === ALL || category === selectedCategory)
+      );
+    }));
+  }, [posts, selectedCategory, selectedMonth, selectedYear]);
+
+  const groupedPosts = useMemo(() => {
+    const groups: Record<string, Record<string, Post[]>> = {};
+
+    filteredPosts.forEach((post) => {
+      const date = getPostDate(post);
+      if (!date) return;
+
+      const year = date.getFullYear().toString();
+      const month = getMonthKey(date);
+
+      groups[year] ??= {};
+      groups[year][month] ??= [];
+      groups[year][month].push(post);
+    });
+
+    return groups;
+  }, [filteredPosts]);
+
+  const sortedYears = Object.keys(groupedPosts).sort((a, b) => Number(b) - Number(a));
+  const isCompact = density === 'compact';
+
+  return (
+    <div className="min-w-0 space-y-7">
+      <Surface className="p-3 shadow-none md:p-4">
+        <div className="grid min-w-0 gap-3 md:grid-cols-[repeat(3,minmax(0,1fr))_auto]">
+          <label className="min-w-0 text-xs font-bold uppercase tracking-normal text-[var(--color-text-subtle)]">
+            연도
+            <select
+              value={selectedYear}
+              onChange={(event) => setSelectedYear(event.target.value)}
+              className="mt-1 h-10 w-full rounded-lg border px-3 text-sm font-semibold normal-case"
+            >
+              <option value={ALL}>전체 연도</option>
+              {years.map((year) => (
+                <option key={year} value={year}>{year}</option>
+              ))}
+            </select>
+          </label>
+
+          <label className="min-w-0 text-xs font-bold uppercase tracking-normal text-[var(--color-text-subtle)]">
+            월
+            <select
+              value={selectedMonth}
+              onChange={(event) => setSelectedMonth(event.target.value)}
+              className="mt-1 h-10 w-full rounded-lg border px-3 text-sm font-semibold normal-case"
+            >
+              <option value={ALL}>전체 월</option>
+              {monthOptions.map((month) => (
+                <option key={month} value={month}>{Number(month)}월</option>
+              ))}
+            </select>
+          </label>
+
+          <label className="min-w-0 text-xs font-bold uppercase tracking-normal text-[var(--color-text-subtle)]">
+            카테고리
+            <select
+              value={selectedCategory}
+              onChange={(event) => setSelectedCategory(event.target.value)}
+              className="mt-1 h-10 w-full rounded-lg border px-3 text-sm font-semibold normal-case"
+            >
+              <option value={ALL}>전체 카테고리</option>
+              {categories.map((category) => (
+                <option key={category} value={category}>{category}</option>
+              ))}
+            </select>
+          </label>
+
+          <div className="flex items-end">
+            <button
+              type="button"
+              aria-pressed={isCompact}
+              onClick={() => setDensity((previous) => (previous === 'compact' ? 'comfortable' : 'compact'))}
+              className={clsx(
+                'inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition-colors hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)] md:w-auto',
+                isCompact && 'text-[var(--color-accent)]',
+              )}
+            >
+              {isCompact ? <Rows3 size={16} /> : <SlidersHorizontal size={16} />}
+              <span>{isCompact ? 'Compact' : 'Comfort'}</span>
+            </button>
+          </div>
+        </div>
+      </Surface>
+
+      <div className="flex min-w-0 items-center justify-between gap-3 border-b border-[var(--color-line)] pb-4">
+        <p className="min-w-0 break-words text-sm font-semibold text-[var(--color-text-muted)]">
+          조건에 맞는 글 <span className="text-[var(--color-accent)]">{filteredPosts.length.toLocaleString()}</span>개
+        </p>
+      </div>
+
+      {sortedYears.length > 0 ? (
+        <div className={clsx('relative', isCompact ? 'space-y-8' : 'space-y-12')}>
+          <div className="absolute bottom-4 left-4 top-4 hidden w-px bg-[var(--color-line)] md:block" />
+
+          {sortedYears.map((year) => {
+            const months = groupedPosts[year];
+            const sortedMonths = Object.keys(months).sort((a, b) => Number(b) - Number(a));
+
+            return (
+              <div key={year} className="relative min-w-0">
+                <div className={clsx('flex items-center gap-4', isCompact ? 'mb-4' : 'mb-6')}>
+                  <div className="z-10 hidden h-9 w-9 items-center justify-center rounded-full border-4 border-[var(--window-bg-strong)] bg-[var(--color-accent-soft)] shadow-[var(--shadow-control)] md:flex">
+                    <div className="h-2.5 w-2.5 rounded-full bg-[var(--color-accent)]" />
+                  </div>
+                  <h2 className="text-2xl font-bold text-[var(--color-text)]">{year}</h2>
+                </div>
+
+                <div className={clsx(isCompact ? 'space-y-5 md:pl-12' : 'space-y-8 md:pl-12')}>
+                  {sortedMonths.map((month) => {
+                    const monthPosts = months[month];
+
+                    return (
+                      <div key={month} className="min-w-0">
+                        <h3 className={clsx('flex items-center gap-2 font-bold text-[var(--color-text-muted)]', isCompact ? 'mb-2 text-base' : 'mb-4 text-lg')}>
+                          <Calendar size={18} className="shrink-0 text-[var(--color-text-subtle)]" />
+                          {Number(month)}월
+                          <StatusBadge tone="neutral">{monthPosts.length}</StatusBadge>
+                        </h3>
+
+                        <div className={clsx('grid min-w-0', isCompact ? 'gap-2' : 'gap-3')}>
+                          {monthPosts.map((post) => (
+                            <Link
+                              key={post.id}
+                              href={`/posts/${post.slug}`}
+                              className="group/item block min-w-0"
+                            >
+                              <Surface interactive className={clsx('flex min-w-0 items-center justify-between gap-3 shadow-none', isCompact ? 'p-3' : 'p-4')}>
+                                <div className="min-w-0 flex-1">
+                                  <h4 className="line-clamp-2 break-words text-sm font-semibold text-[var(--color-text)] transition-colors group-hover/item:text-[var(--color-accent)] md:text-base">
+                                    {post.title}
+                                  </h4>
+                                  <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-2 text-xs text-[var(--color-text-subtle)]">
+                                    <StatusBadge tone="neutral" className="px-1.5 py-0.5">{post.categoryName || '미분류'}</StatusBadge>
+                                    <span className="tabular-nums">
+                                      {formatDate(post.createdAt)}
+                                    </span>
+                                  </div>
+                                </div>
+                                <ChevronRight className="shrink-0 text-[var(--color-text-subtle)] transition-colors group-hover/item:text-[var(--color-accent)]" size={18} />
+                              </Surface>
+                            </Link>
+                          ))}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <EmptyState title="조건에 맞는 글이 없습니다." className="py-20" />
+      )}
+    </div>
+  );
+}

src/components/post/MarkdownRenderer.tsx

@@ -31,7 +31,7 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
 
       return (
         <code
-          className="mx-1 break-words rounded-md bg-black/[0.05] px-1.5 py-0.5 font-mono text-[0.9em] font-medium text-red-600 dark:bg-white/10 dark:text-red-300"
+          className="mx-1 max-w-full break-words rounded-md bg-black/[0.05] px-1.5 py-0.5 font-mono text-[0.9em] font-medium text-red-600 [overflow-wrap:anywhere] dark:bg-white/10 dark:text-red-300"
           {...props}
         >
           {children}
@@ -56,10 +56,10 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
           href={href}
           target={isExternal ? '_blank' : undefined}
           rel={isExternal ? 'noopener noreferrer' : undefined}
-          className="inline-flex items-center gap-0.5 font-semibold text-[var(--color-accent)] underline-offset-4 transition-colors hover:underline"
+          className="break-words font-semibold text-[var(--color-accent)] underline-offset-4 transition-colors [overflow-wrap:anywhere] hover:underline"
         >
           {children}
-          {isExternal && <ExternalLink size={12} className="opacity-70" />}
+          {isExternal && <ExternalLink size={12} className="ml-0.5 inline-block align-text-bottom opacity-70" />}
         </a>
       );
     },
@@ -67,8 +67,8 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
     // 4. 테이블
     table({ children }) {
       return (
-        <div className="my-8 overflow-x-auto rounded-lg border border-[var(--color-line)] bg-[var(--color-surface)] shadow-[var(--shadow-card)]">
+        <div className="my-8 max-w-full overflow-x-auto rounded-lg border border-[var(--color-line)] bg-[var(--color-surface)] shadow-[var(--shadow-card)]">
-          <table className="w-full text-left text-sm text-[var(--color-text-muted)]">
+          <table className="w-full min-w-[520px] text-left text-sm text-[var(--color-text-muted)]">
             {children}
           </table>
         </div>
@@ -78,10 +78,10 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
       return <thead className="border-b border-[var(--color-line)] bg-black/[0.03] text-xs text-[var(--color-text-muted)] dark:bg-white/10">{children}</thead>;
     },
     th({ children }) {
-      return <th className="px-5 py-3 font-bold text-[var(--color-text)]">{children}</th>;
+      return <th className="break-words px-5 py-3 font-bold text-[var(--color-text)]">{children}</th>;
     },
     td({ children }) {
-      return <td className="border-b border-[var(--color-line)] px-5 py-4 whitespace-pre-wrap">{children}</td>;
+      return <td className="whitespace-pre-wrap break-words border-b border-[var(--color-line)] px-5 py-4">{children}</td>;
     },
 
     // 5. 이미지
@@ -157,18 +157,18 @@ function CodeBlock({ language, code }: { language: string; code: string }) {
   };
 
   return (
-    <div className="group relative my-8 overflow-hidden rounded-lg border border-gray-700/50 bg-[#1e1e1e] shadow-[var(--shadow-card)]">
+    <div className="group relative my-8 max-w-full overflow-hidden rounded-lg border border-gray-700/50 bg-[#1e1e1e] shadow-[var(--shadow-card)]">
-      <div className="flex items-center justify-between px-4 py-2.5 bg-[#2d2d2d] border-b border-gray-700 select-none">
+      <div className="flex min-w-0 items-center justify-between gap-3 border-b border-gray-700 bg-[#2d2d2d] px-4 py-2.5 select-none">
-        <div className="flex items-center gap-2">
+        <div className="flex min-w-0 items-center gap-2">
           <div className="flex gap-1.5">
             <div className="w-3 h-3 rounded-full bg-[#FF5F56] border border-[#E0443E]" />
             <div className="w-3 h-3 rounded-full bg-[#FFBD2E] border border-[#DEA123]" />
             <div className="w-3 h-3 rounded-full bg-[#27C93F] border border-[#1AAB29]" />
           </div>
           {language && (
-            <div className="ml-4 flex items-center gap-1.5 px-2 py-0.5 rounded text-[10px] font-mono font-medium text-gray-400 bg-gray-700/50 border border-gray-600/50">
+            <div className="ml-2 flex min-w-0 items-center gap-1.5 rounded border border-gray-600/50 bg-gray-700/50 px-2 py-0.5 font-mono text-[10px] font-medium text-gray-400 sm:ml-4">
               <Terminal size={10} />
-              <span className="uppercase tracking-wider">{language}</span>
+              <span className="truncate uppercase tracking-wider">{language}</span>
             </div>
           )}
         </div>
@@ -176,7 +176,7 @@ function CodeBlock({ language, code }: { language: string; code: string }) {
         <button
           onClick={handleCopy}
           className={clsx(
-            "flex items-center gap-1.5 px-2 py-1 rounded-md text-[11px] font-medium transition-all duration-200 border",
+            "flex shrink-0 items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] font-medium transition-all duration-200",
             isCopied 
               ? "bg-green-500/10 text-green-400 border-green-500/20" 
               : "bg-gray-700/50 text-gray-400 border-transparent hover:bg-gray-600 hover:text-white"
@@ -188,17 +188,19 @@ function CodeBlock({ language, code }: { language: string; code: string }) {
         </button>
       </div>
       
-      <div className="relative font-mono text-[14px] leading-relaxed">
+      <div className="relative max-w-full overflow-x-auto font-mono text-[14px] leading-relaxed">
         <SyntaxHighlighter
           style={vscDarkPlus}
           language={language}
           PreTag="div"
           showLineNumbers={true}
+          wrapLongLines={false}
           lineNumberStyle={{ minWidth: '2.5em', paddingRight: '1em', color: '#6e7681', textAlign: 'right' }}
           customStyle={{
             margin: 0,
             padding: '1.5rem',
             background: 'transparent',
+            maxWidth: '100%',
           }}
         >
           {code}

src/components/post/PostDetailClient.tsx

@@ -65,7 +65,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
     const isAuthError = errorStatus === 401 || errorStatus === 403;
 
     return (
-      <WindowSurface className="mx-auto md:w-[70vw] md:max-w-[980px]" bodyClassName="px-4 py-20 text-center">
+      <WindowSurface className="mx-auto max-w-[980px]" bodyClassName="px-4 py-20 text-center">
         <div className="mb-4 flex justify-center">
           <AlertCircle className="text-[var(--color-text-subtle)]" size={64} />
         </div>
@@ -90,44 +90,39 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
   const nextPost = post.nextPost;
 
   return (
-    <div className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
+    <div className="mx-auto min-w-0 max-w-[1120px] px-0 py-3 md:py-6">
-      <Link href="/" className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent)]">
+      <Link href="/" className="mb-5 inline-flex items-center gap-1 text-sm font-medium text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent)]">
         <ArrowLeft size={18} />
         <span>목록으로</span>
       </Link>
 
-      <div className="relative grid gap-6 xl:grid-cols-[minmax(0,900px)_250px] xl:justify-center xl:gap-8">
+      <div className="relative grid min-w-0 gap-6 xl:grid-cols-[minmax(0,820px)_220px] xl:justify-center xl:gap-8">
         <main className="min-w-0 space-y-6">
-          <WindowSurface
+          <Surface as="article" strong className="mx-auto w-full max-w-[820px] px-5 py-7 md:px-10 md:py-10">
-            as="article"
+            <header className="mb-9 border-b border-[var(--color-line)] pb-7">
-            title="Reader"
-            subtitle={post.categoryName || '미분류'}
-            bodyClassName="p-6 md:p-10"
-          >
-            <header className="mb-10 border-b border-[var(--color-line)] pb-8">
               <StatusBadge tone="neutral" className="mb-5">
                 {post.categoryName || '미분류'}
               </StatusBadge>
-              <h1 className="mb-7 break-keep text-4xl font-bold leading-[1.08] tracking-normal text-[var(--color-text)] md:text-6xl">
+              <h1 className="mb-6 break-words text-3xl font-bold leading-tight tracking-normal text-[var(--color-text)] md:text-4xl lg:text-[2.75rem]">
                 {post.title}
               </h1>
-              <div className="flex flex-wrap items-center gap-5 text-sm text-[var(--color-text-muted)]">
+              <div className="flex flex-wrap items-center gap-x-5 gap-y-3 text-sm text-[var(--color-text-muted)]">
-                <div className="flex items-center gap-2">
+                <div className="flex min-w-0 items-center gap-2">
                   {profile?.imageUrl ? (
                     <Image
                       src={profile.imageUrl}
                       alt="작성자"
                       width={32}
                       height={32}
-                      className="h-8 w-8 rounded-full border border-[var(--color-line)] object-cover shadow-sm"
+                      className="h-8 w-8 shrink-0 rounded-full border border-[var(--color-line)] object-cover shadow-sm"
                       unoptimized
                     />
                   ) : (
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-black/[0.05] dark:bg-white/10">
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-black/[0.05] dark:bg-white/10">
                       <User size={16} />
                     </div>
                   )}
-                  <span className="font-bold text-[var(--color-text)]">{profile?.name || 'Dev Park'}</span>
+                  <span className="min-w-0 truncate font-bold text-[var(--color-text)]">{profile?.name || 'Dev Park'}</span>
                 </div>
                 <div className="flex items-center gap-1.5">
                   <Calendar size={16} />
@@ -136,20 +131,20 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
               </div>
             </header>
 
-            <div className="prose prose-lg max-w-none prose-headings:font-bold prose-headings:tracking-normal prose-headings:text-[var(--color-text)] prose-p:text-[var(--color-text)] prose-p:leading-8 prose-strong:text-[var(--color-text)] prose-li:text-[var(--color-text-muted)] prose-li:leading-8 prose-a:text-[var(--color-accent)] prose-hr:border-[var(--color-line)] prose-pre:bg-[#1e1e1e] prose-pre:text-gray-100">
+            <div className="prose prose-base min-w-0 max-w-none break-words prose-headings:font-bold prose-headings:tracking-normal prose-headings:text-[var(--color-text)] prose-p:text-[var(--color-text)] prose-p:leading-8 prose-strong:text-[var(--color-text)] prose-li:text-[var(--color-text-muted)] prose-li:leading-8 prose-a:text-[var(--color-accent)] prose-hr:border-[var(--color-line)] prose-pre:max-w-full prose-pre:overflow-x-auto prose-pre:bg-[#1e1e1e] prose-pre:text-gray-100 md:prose-lg [overflow-wrap:anywhere]">
               <MarkdownRenderer content={post.content || ''} />
             </div>
-          </WindowSurface>
+          </Surface>
 
-          <WindowSurface title="Navigation" bodyClassName="p-4 md:p-5">
+          <WindowSurface title="Navigation" showTrafficLights={false} className="mx-auto max-w-[820px]" bodyClassName="p-4 md:p-5">
-            <nav className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <nav className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-2">
               {prevPost ? (
-                <Link href={`/posts/${prevPost.slug}`} className="group flex w-full flex-col items-start gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-card)] transition-colors hover:bg-[var(--card-bg-strong)]">
+                <Link href={`/posts/${prevPost.slug}`} className="group flex min-w-0 flex-col items-start gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-4 shadow-[var(--shadow-card)] transition-colors hover:bg-[var(--card-bg-strong)] md:p-5">
                   <span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)] transition-colors group-hover:text-[var(--color-accent)]">
                     <ChevronLeft size={16} />
                     이전 글
                   </span>
-                  <span className="line-clamp-1 w-full text-left font-bold text-[var(--color-text-muted)] transition-colors group-hover:text-[var(--color-accent)]">
+                  <span className="line-clamp-2 w-full break-words text-left font-bold text-[var(--color-text-muted)] transition-colors group-hover:text-[var(--color-accent)]">
                     {prevPost.title}
                   </span>
                 </Link>
@@ -163,12 +158,12 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
               )}
 
               {nextPost ? (
-                <Link href={`/posts/${nextPost.slug}`} className="group flex w-full flex-col items-end gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-card)] transition-colors hover:bg-[var(--card-bg-strong)]">
+                <Link href={`/posts/${nextPost.slug}`} className="group flex min-w-0 flex-col items-end gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-4 shadow-[var(--shadow-card)] transition-colors hover:bg-[var(--card-bg-strong)] md:p-5">
                   <span className="flex items-center gap-1 text-xs font-bold text-[var(--color-text-subtle)] transition-colors group-hover:text-[var(--color-accent)]">
                     다음 글
                     <ChevronRight size={16} />
                   </span>
-                  <span className="line-clamp-1 w-full text-right font-bold text-[var(--color-text-muted)] transition-colors group-hover:text-[var(--color-accent)]">
+                  <span className="line-clamp-2 w-full break-words text-right font-bold text-[var(--color-text-muted)] transition-colors group-hover:text-[var(--color-accent)]">
                     {nextPost.title}
                   </span>
                 </Link>
@@ -183,13 +178,13 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
             </nav>
           </WindowSurface>
 
-          <WindowSurface title="Comments" bodyClassName="p-5 md:p-6">
+          <WindowSurface title="Comments" showTrafficLights={false} className="mx-auto max-w-[820px]" bodyClassName="p-5 md:p-6">
             <CommentList postSlug={post.slug} />
           </WindowSurface>
         </main>
 
         <aside className="hidden w-[220px] shrink-0 xl:block">
-          <WindowSurface title="Inspector" bodyClassName="p-4" className="sticky top-24">
+          <WindowSurface title="목차" showTrafficLights={false} bodyClassName="p-4" className="sticky top-24 shadow-[var(--shadow-card)]">
             <TOC content={post.content || ''} />
           </WindowSurface>
         </aside>