.

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)]">
-          <table className="w-full text-left text-sm text-[var(--color-text-muted)]">
+        <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 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="flex items-center justify-between px-4 py-2.5 bg-[#2d2d2d] border-b border-gray-700 select-none">
-        <div className="flex items-center gap-2">
+    <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 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 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">
-      <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)]">
+    <div className="mx-auto min-w-0 max-w-[1120px] px-0 py-3 md:py-6">
+      <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
-            as="article"
-            title="Reader"
-            subtitle={post.categoryName || '미분류'}
-            bodyClassName="p-6 md:p-10"
-          >
-            <header className="mb-10 border-b border-[var(--color-line)] pb-8">
+          <Surface as="article" strong className="mx-auto w-full max-w-[820px] px-5 py-7 md:px-10 md:py-10">
+            <header className="mb-9 border-b border-[var(--color-line)] pb-7">
               <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 items-center gap-2">
+              <div className="flex flex-wrap items-center gap-x-5 gap-y-3 text-sm text-[var(--color-text-muted)]">
+                <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">
-            <nav className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <WindowSurface title="Navigation" showTrafficLights={false} className="mx-auto max-w-[820px]" bodyClassName="p-4 md:p-5">
+            <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>