.

2026-06-06 23:22:46 +09:00 · 2026-06-02 16:58:36 +09:00 · 2026-06-02 16:40:39 +09:00 · 2026-06-02 15:34:30 +09:00 · 2026-06-02 15:26:54 +09:00 · 2026-06-02 15:07:00 +09:00
35 changed files with 1491 additions and 606 deletions
--- a/LOG.md
+++ b/LOG.md
@@ -1,7 +1,56 @@
 # Work Log

+## 2026-06-06
+
+- Fixed the desktop Dock so route changes from Dock menu links no longer leave focus-held open state behind when the Dock is not pinned.
+- Kept the saved `dock-pinned-v2` preference unchanged during navigation and only released transient Dock focus/hover state after menu clicks and pathname changes.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3111/` confirmed that after unpinning the Dock, clicking the Dock archive menu navigates to `/archive`, the pin button remains `aria-pressed=false`, and the Dock collapses after the pointer leaves.
+- Recommended next task: do one visual pass on the Dock at narrow desktop widths to confirm the collapse animation still feels smooth around the sidebar offset.
+
+## 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.
+- Smoothed the desktop Dock hide/show interaction by separating hover-open, closing, and fully-collapsed states; the Dock now keeps the expanded hit area during the closing animation so re-entering mid-collapse reverses smoothly.
+- Changed the desktop Dock's default state to pinned/open and added distinct soft pastel tones to Dock buttons, including stronger visual treatment for pin/unpin and auth actions.
+- Softened the Dock button palette to quieter pastel tones and made the light-mode Dock bar read as a cleaner white glass surface.
+- Fixed the Dock pin toggle so mouse-based unpinning no longer leaves button focus holding the Dock open, and changed the Dock Home button to a white neutral tone.
+- Reworked the Dock material away from cute pastel tiles into a more macOS-like neutral frosted glass texture with translucent white glass buttons.
+- Corrected the Dock button direction so only Home stays white, while the other actions keep subtle pastel tints with a translucent macOS-style glass material.
+- Increased Dock button translucency contrast so the buttons remain glassy while sitting slightly more opaque than the Dock background.
+- 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.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on a local `next start` server confirmed the desktop Dock starts as a small bottom tab, uses 560ms transitions for tab/panel geometry, and expands into the larger Dock hit area when opened.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on a local `next start` server confirmed the Dock opens by default and Home/Archive/Chess/Login/Signup/Pin buttons render distinct pastel colors.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3106/` confirmed the light-mode Dock bar renders as a cleaner white glass surface and the Dock button colors use quieter pastel tones.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3107/` confirmed the Dock Home button renders white and mouse-based unpinning collapses the Dock after the pointer leaves.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3108/` confirmed the Dock uses neutral translucent glass material, with non-home buttons rendering as subtle white glass rather than pastel color tiles.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3109/` confirmed Home stays white while the other Dock buttons keep pastel-tinted translucent glass backgrounds with button-level blur.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3110/` confirmed Dock buttons remain translucent but render slightly more opaque than the Dock background for clearer contrast.
+- 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`.
+- Updated the public post fetch helper to decode a route slug once before encoding it for the backend API path, preserving normal Korean/special-character slug requests while avoiding `%252C`-style API lookups.
+- Validation: `npm run lint` passed and `npm run build` passed. A local production server with `NEXT_PUBLIC_API_URL=https://blogserver.wypark.me` returned real post titles for `/posts/soft-delete%2C-hard-delete`, `/posts/destructuring-%26-component%ED%95%A8%EC%88%98`, and `/posts/rtr-(refresh-token-rotation)`.
+- Recommended next task: deploy the slug normalization fix before re-checking affected live post URLs in Search Console or the browser.
+- Added a category post-list page size control with 9/18/27 options, defaulting to 9 and persisting the user's choice in `localStorage` under `categoryPageSize`.
+- Wired the selected category page size into the React Query key and `getPostsByCategory` request size, resetting to page 1 when the size changes while preserving search behavior.
+- Adjusted the category page toolbar so search, page-size controls, and grid/list controls stack cleanly on narrow screens and align in one row on desktop.
+- Validation: `npm run lint` passed and `npm run build` passed. Static verification confirms the category query uses `pageSize` and the page-size selector persists to `localStorage`; interactive browser verification was skipped because no local browser/Playwright automation runtime is available in this environment.
+- Recommended next task: verify the category toolbar in a real browser after deploy, especially mobile widths and the 18/27 page-size transitions.
+- Investigated Google Search Console crawlability concerns for the live site.
+- Checked live `robots.txt`, `sitemap.xml`, homepage, sample post pages, and backend post API with a Googlebot user agent; public post URLs in the sitemap returned 200 with no `X-Robots-Tag` or meta robots block.
+- Confirmed the non-www production host `blog.wypark.me` is the relevant host; its home/archive initial HTML currently contains no `/posts/` links because public lists are client-side rendered.
+- Identified crawlability risk areas: home/archive rely on client-side post-list fetching, local builds generate a static-only sitemap when the backend API is unreachable, sitemap `lastmod` values can be timezone-skewed when backend timestamps omit an offset, and canonical URLs are not currently emitted.
+- Validation: `npm run build` passed. As expected without a local backend, build-time sitemap generation logged `fetch failed` and produced only static sitemap entries in the local `.next` output.
+- Converted home and archive pages to server-rendered public post lists through a dedicated `src/api/publicPosts.ts` fetch helper so first HTML now includes discoverable `/posts/` links.
+- Added centralized site metadata utilities, canonical metadata for public pages/posts, dynamic sitemap generation, KST-aware API date parsing for `lastmod`, and robots/site URL reuse.
+- Validation: `npm run lint` passed and `npm run build` passed. A local production server with `NEXT_PUBLIC_API_URL=https://blogserver.wypark.me` returned 22 `/posts/` links on `/`, 204 on `/archive`, canonical URLs for both pages, and sitemap output with 104 URLs including 102 post URLs.
+- Recommended next task: deploy the SEO crawlability fix, then resubmit `https://blog.wypark.me/sitemap.xml` and a representative post URL in Google Search Console URL Inspection.
 - Redesigned the app shell into a macOS-inspired blog OS with pastel desktop background tokens, translucent menu bar, quick-launch Dock, and reusable window surfaces.
 - Applied the window treatment to the home dashboard, post reader, archive, category view, auth screens, chess puzzle view, and admin management shells.
 - Restored the missing local `chess.js` install in `node_modules` so build verification could run; no dependency version changes were intended.
@@ -14,3 +63,7 @@
 - Validation: `npm run lint` passed, `npm run build` passed. The build logged a sitemap fetch warning because the backend API at the local default was not reachable, but the command completed successfully.
 - Browser verification: previously started this app on `http://localhost:3100` because ports 3000 and 3001 were already occupied; confirmed desktop background gradients, menu bar, Dock, and window surfaces on `/`, `/archive`, and `/login`. For this follow-up, the dev/standalone server started successfully in foreground but exited when launched as a background non-interactive process, so browser verification was skipped after lint/build passed.
 - Recommended next task: review the remaining older Korean strings in admin/editor flows and normalize any mojibake that predates this redesign.
+- Unified the macOS-inspired layer system by splitting window, card, control, sidebar, menu bar, and Dock border/shadow/blur tokens, with stronger dark-mode card separation.
+- Applied the layer tokens across shared surfaces, the menu bar, Dock, sidebar controls, search/toggles, home dashboard panels, reader navigation cards, and admin dashboard/editor panels.
+- Validation: `npm run lint` passed, `npm run build` passed, and in-app browser verification on `http://localhost:3100/` confirmed distinct light/dark computed border, shadow, and backdrop blur values for the menu bar, main window, internal cards, and Dock.
+- Recommended next task: do a visual pass on lower-traffic admin list/modal screens and convert any remaining ad hoc hover fills to the shared card/control tokens.
--- a/src/api/publicPosts.ts
+++ b/src/api/publicPosts.ts
@@ -0,0 +1,75 @@
+import { ApiResponse, Post, PostListResponse } from '@/types';
+
+export const PUBLIC_POSTS_REVALIDATE_SECONDS = 300;
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
+
+type PublicPostListParams = {
+  page?: number;
+  size?: number;
+  keyword?: string;
+  category?: string;
+  tag?: string;
+  sort?: string;
+};
+
+const buildPostListUrl = (params: PublicPostListParams = {}) => {
+  const searchParams = new URLSearchParams();
+
+  Object.entries({
+    ...params,
+    sort: params.sort || 'createdAt,desc',
+  }).forEach(([key, value]) => {
+    if (value !== undefined && value !== '') {
+      searchParams.set(key, String(value));
+    }
+  });
+
+  return `${API_URL}/api/posts?${searchParams.toString()}`;
+};
+
+const encodeSlugPathSegment = (slug: string) => {
+  try {
+    return encodeURIComponent(decodeURIComponent(slug));
+  } catch {
+    return encodeURIComponent(slug);
+  }
+};
+
+export const fetchPublicPosts = async (
+  params: PublicPostListParams = {},
+): Promise<PostListResponse | null> => {
+  try {
+    const response = await fetch(buildPostListUrl(params), {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+      next: { revalidate: PUBLIC_POSTS_REVALIDATE_SECONDS },
+    });
+
+    if (!response.ok) return null;
+
+    const json = (await response.json()) as ApiResponse<PostListResponse>;
+    return json.data;
+  } catch (error) {
+    console.error('Public posts fetch error:', error);
+    return null;
+  }
+};
+
+export const fetchPublicPost = async (slug: string): Promise<Post | null> => {
+  try {
+    const response = await fetch(`${API_URL}/api/posts/${encodeSlugPathSegment(slug)}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+      next: { revalidate: 60 },
+    });
+
+    if (!response.ok) return null;
+
+    const json = (await response.json()) as ApiResponse<Post>;
+    return json.data;
+  } catch (error) {
+    console.error('Public post fetch error:', error);
+    return null;
+  }
+};
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -93,7 +93,7 @@ function RecentPostRow({ post }: { post: Post }) {
  return (
    <Link
      href={`/posts/${post.slug}`}
-      className="group flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+      className="group flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
    >
      <div className="min-w-0">
        <p className="truncate text-sm font-semibold text-[var(--color-text)] transition group-hover:text-[var(--color-accent)]">{post.title}</p>
@@ -123,7 +123,7 @@ function RecentCommentRow({ comment }: { comment: AdminComment }) {
    return (
      <Link
        href={`/posts/${comment.postSlug}`}
-        className="flex items-center gap-3 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+        className="flex items-center gap-3 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
      >
        {content}
      </Link>
--- a/src/app/archive/page.tsx
+++ b/src/app/archive/page.tsx
@@ -1,148 +1,54 @@
-'use client';
-
-import { useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { format } from 'date-fns';
-import Link from 'next/link';
-import { Archive, Calendar, ChevronRight, FileText, Loader2 } from 'lucide-react';
-import { getPosts } from '@/api/posts';
-import EmptyState from '@/components/ui/EmptyState';
-import StatusBadge from '@/components/ui/StatusBadge';
-import Surface from '@/components/ui/Surface';
+import type { Metadata } from 'next';
+import { Archive } from 'lucide-react';
+import { fetchPublicPosts } from '@/api/publicPosts';
+import ArchiveExplorer from '@/components/post/ArchiveExplorer';
 import WindowSurface from '@/components/ui/WindowSurface';
-import { Post, PostListResponse } from '@/types';
+import { SITE_NAME } from '@/lib/site';
+import { PostListResponse } from '@/types';

-const getTotalElements = (data?: PostListResponse) => {
+export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+export const metadata: Metadata = {
+  title: 'Archive',
+  alternates: {
+    canonical: '/archive',
+  },
+  openGraph: {
+    title: `Archive | ${SITE_NAME}`,
+    url: '/archive',
+    siteName: SITE_NAME,
+    type: 'website',
+  },
+};
+
+const getTotalElements = (data?: PostListResponse | null) => {
  return data?.page?.totalElements ?? data?.totalElements ?? 0;
 };

-export default function ArchivePage() {
-  const { data, isLoading } = useQuery({
-    queryKey: ['posts', 'all'],
-    queryFn: () => getPosts({ page: 0, size: 1000 }),
-    staleTime: 1000 * 60 * 5,
-  });
-
-  const archiveGroups = useMemo(() => {
-    if (!data?.content) return {};
-
-    const groups: { [year: string]: { [month: string]: Post[] } } = {};
-
-    data.content.forEach((post) => {
-      const date = new Date(post.createdAt);
-      const year = date.getFullYear().toString();
-      const month = (date.getMonth() + 1).toString().padStart(2, '0');
-
-      if (!groups[year]) groups[year] = {};
-      if (!groups[year][month]) groups[year][month] = [];
-
-      groups[year][month].push(post);
-    });
-
-    return groups;
-  }, [data]);
-
-  const sortedYears = useMemo(() => {
-    return Object.keys(archiveGroups).sort((a, b) => Number(b) - Number(a));
-  }, [archiveGroups]);
-
+export default async function ArchivePage() {
+  const data = await fetchPublicPosts({ page: 0, size: 1000, sort: 'createdAt,desc' });
+  const posts = data?.content || [];
  const totalPosts = getTotalElements(data);

-  if (isLoading) {
-    return (
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Loader2 className="animate-spin text-[var(--color-accent)]" size={40} />
-      </div>
-    );
-  }
-
  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">
-          <h1 className="mb-3 flex 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} />
-            <span>아카이브</span>
+        <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 min-w-0 items-center justify-center gap-3 text-3xl font-bold tracking-normal text-[var(--color-text)] md:justify-start">
+            <Archive className="shrink-0 text-[var(--color-accent)]" size={32} />
+            <span className="min-w-0 break-words">아카이브</span>
          </h1>
-          <p className="text-[var(--color-text-muted)]">
-            지금까지 작성한 <span className="font-bold text-[var(--color-accent)]">{totalPosts}</span>개의 글을 시간순으로 정리했습니다.
+          <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.toLocaleString()}</span>개의 글을 기록 순서로 정리했습니다.
          </p>
        </div>

-        {sortedYears.length > 0 ? (
-          <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 posts = months[month];
-                      const sortedPosts = [...posts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-
-                      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">{posts.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>·</span>
-                                      <span className="tabular-nums">
-                                        {format(new Date(post.createdAt), 'yyyy.MM.dd')}
-                                      </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"
-          />
-        )}
+        <ArchiveExplorer posts={posts} />
      </WindowSurface>
    </main>
  );
--- a/src/app/category/[id]/page.tsx
+++ b/src/app/category/[id]/page.tsx
@@ -9,10 +9,23 @@ import PostCard from '@/components/post/PostCard';
 import PostListItem from '@/components/post/PostListItem';
 import PostSearch from '@/components/post/PostSearch';
 import EmptyState from '@/components/ui/EmptyState';
+import SegmentedControl from '@/components/ui/SegmentedControl';
 import Surface from '@/components/ui/Surface';
 import WindowSurface from '@/components/ui/WindowSurface';

-const PAGE_SIZE = 10;
+const PAGE_SIZE_OPTIONS = [
+  { label: '9개', value: '9' },
+  { label: '18개', value: '18' },
+  { label: '27개', value: '27' },
+] as const;
+const DEFAULT_PAGE_SIZE = '9';
+const CATEGORY_PAGE_SIZE_STORAGE_KEY = 'categoryPageSize';
+
+type PageSizeOption = (typeof PAGE_SIZE_OPTIONS)[number]['value'];
+
+const isPageSizeOption = (value: string | null): value is PageSizeOption => {
+  return PAGE_SIZE_OPTIONS.some((option) => option.value === value);
+};

 const isNoticeCategoryName = (categoryName: string) => {
  const normalizedName = categoryName.toLowerCase();
@@ -27,6 +40,12 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string

  const [page, setPage] = useState(0);
  const [keyword, setKeyword] = useState('');
+  const [pageSize, setPageSize] = useState<PageSizeOption>(() => {
+    if (typeof window === 'undefined') return DEFAULT_PAGE_SIZE;
+
+    const savedSize = localStorage.getItem(CATEGORY_PAGE_SIZE_STORAGE_KEY);
+    return isPageSizeOption(savedSize) ? savedSize : DEFAULT_PAGE_SIZE;
+  });
  const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => {
    if (isNoticeCategory || typeof window === 'undefined') return isNoticeCategory ? 'list' : 'grid';

@@ -47,9 +66,15 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
    setPage(0);
  };

+  const handlePageSizeChange = (nextSize: PageSizeOption) => {
+    setPage(0);
+    setPageSize(nextSize);
+    localStorage.setItem(CATEGORY_PAGE_SIZE_STORAGE_KEY, nextSize);
+  };
+
  const { data: postsData, isLoading, error, isPlaceholderData } = useQuery({
-    queryKey: ['posts', 'category', apiCategoryName, page, keyword],
-    queryFn: () => getPostsByCategory(apiCategoryName, page, PAGE_SIZE, keyword),
+    queryKey: ['posts', 'category', apiCategoryName, page, pageSize, keyword],
+    queryFn: () => getPostsByCategory(apiCategoryName, page, Number(pageSize), keyword),
    placeholderData: (previousData) => previousData,
  });

@@ -96,22 +121,30 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
            <span className="text-lg font-normal text-[var(--color-text-subtle)]">글 목록</span>
          </h1>

-          <div className="flex w-full items-center gap-3 md:w-auto">
+          <div className="flex w-full flex-col gap-3 md:w-auto md:flex-row md:items-center">
            <PostSearch
              onSearch={handleSearch}
              placeholder={`${apiCategoryName} 검색`}
              className="w-full md:w-64"
            />

-            <div className="flex shrink-0 items-center gap-1 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-xl">
+            <SegmentedControl
+              ariaLabel="페이지당 게시글 수"
+              options={PAGE_SIZE_OPTIONS}
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className="justify-center"
+            />
+
+            <div className="flex shrink-0 items-center gap-1 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-[18px]">
              <button
                type="button"
                onClick={() => handleViewModeChange('grid')}
                className={clsx(
                  'rounded-full p-2 transition-all duration-150',
                  activeViewMode === 'grid'
-                    ? 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] shadow-sm'
-                    : 'text-[var(--color-text-subtle)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                    ? 'bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-sm'
+                    : 'text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
                )}
                title="카드로 보기"
                aria-label="카드로 보기"
@@ -125,8 +158,8 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
                className={clsx(
                  'rounded-full p-2 transition-all duration-150',
                  activeViewMode === 'list'
-                    ? 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] shadow-sm'
-                    : 'text-[var(--color-text-subtle)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                    ? 'bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-sm'
+                    : 'text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
                )}
                title="리스트로 보기"
                aria-label="리스트로 보기"
@@ -173,7 +206,7 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
                type="button"
                onClick={handlePrevPage}
                disabled={page === 0}
-                className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-black/[0.04] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:hover:bg-white/10"
+                className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                aria-label="이전 페이지"
              >
                <ChevronLeft size={24} />
@@ -187,7 +220,7 @@ export default function CategoryPage({ params }: { params: Promise<{ id: string
                type="button"
                onClick={handleNextPage}
                disabled={isLast || isPlaceholderData}
-                className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-black/[0.04] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:hover:bg-white/10"
+                className="rounded-full p-2 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                aria-label="다음 페이지"
              >
                <ChevronRight size={24} />
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -30,16 +30,25 @@
    linear-gradient(155deg, rgba(218, 235, 255, 0.86) 6%, rgba(218, 235, 255, 0) 50%),
    linear-gradient(42deg, rgba(222, 251, 236, 0.74) 48%, rgba(222, 251, 236, 0) 88%),
    linear-gradient(180deg, #fbf8ff 0%, #eef5ff 100%);
-  --window-bg: rgba(255, 255, 255, 0.58);
-  --window-bg-strong: rgba(255, 255, 255, 0.78);
+  --window-bg: rgba(255, 255, 255, 0.6);
+  --window-bg-strong: rgba(255, 255, 255, 0.8);
  --window-titlebar: rgba(255, 255, 255, 0.5);
-  --window-border: rgba(255, 255, 255, 0.62);
-  --menubar-bg: rgba(255, 255, 255, 0.48);
-  --dock-bg: rgba(255, 255, 255, 0.5);
-  --sidebar-bg: rgba(255, 255, 255, 0.46);
-  --color-surface: rgba(255, 255, 255, 0.58);
-  --color-surface-strong: rgba(255, 255, 255, 0.82);
-  --color-control: rgba(255, 255, 255, 0.54);
+  --window-border: rgba(255, 255, 255, 0.68);
+  --window-titlebar-border: rgba(39, 54, 82, 0.1);
+  --card-bg: rgba(255, 255, 255, 0.46);
+  --card-bg-strong: rgba(255, 255, 255, 0.68);
+  --card-border: rgba(39, 54, 82, 0.11);
+  --card-border-hover: rgba(39, 54, 82, 0.18);
+  --control-border: rgba(39, 54, 82, 0.12);
+  --menubar-bg: rgba(255, 255, 255, 0.5);
+  --menubar-border: rgba(255, 255, 255, 0.7);
+  --dock-bg: rgba(248, 250, 252, 0.46);
+  --dock-border: rgba(255, 255, 255, 0.62);
+  --sidebar-bg: rgba(255, 255, 255, 0.48);
+  --sidebar-border: rgba(255, 255, 255, 0.6);
+  --color-surface: var(--card-bg);
+  --color-surface-strong: var(--card-bg-strong);
+  --color-control: rgba(255, 255, 255, 0.56);
  --color-line: rgba(39, 54, 82, 0.13);
  --color-text: #1d1d1f;
  --color-text-muted: #62646d;
@@ -48,10 +57,13 @@
  --color-accent-hover: #0071e3;
  --color-accent-soft: rgba(0, 102, 204, 0.1);
  --color-danger-soft: rgba(255, 59, 48, 0.1);
-  --shadow-window: 0 26px 80px rgba(70, 92, 130, 0.16), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
-  --shadow-panel: 0 22px 56px rgba(70, 92, 130, 0.13);
-  --shadow-card: 0 10px 30px rgba(70, 92, 130, 0.08);
-  --shadow-control: 0 12px 26px rgba(70, 92, 130, 0.1);
+  --shadow-window: 0 28px 80px rgba(70, 92, 130, 0.18), 0 10px 28px rgba(70, 92, 130, 0.08), 0 1px 0 rgba(255, 255, 255, 0.72) inset;
+  --shadow-sidebar: 16px 0 42px rgba(70, 92, 130, 0.12), -1px 0 0 rgba(255, 255, 255, 0.46) inset;
+  --shadow-menubar: 0 16px 40px rgba(70, 92, 130, 0.12), 0 1px 0 rgba(255, 255, 255, 0.58) inset;
+  --shadow-panel: var(--shadow-sidebar);
+  --shadow-card: 0 14px 34px rgba(70, 92, 130, 0.09), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+  --shadow-dock: 0 28px 78px rgba(15, 23, 42, 0.18), 0 12px 32px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255, 255, 255, 0.68) inset, 0 -1px 0 rgba(15, 23, 42, 0.06) inset;
+  --shadow-control: 0 12px 26px rgba(70, 92, 130, 0.1), 0 1px 0 rgba(255, 255, 255, 0.46) inset;
  --focus-ring: 0 0 0 4px rgba(0, 102, 204, 0.14);
  --background: var(--color-page);
  --foreground: var(--color-text);
@@ -72,17 +84,26 @@ html[data-theme="dark"] {
    linear-gradient(150deg, rgba(43, 73, 110, 0.5) 10%, rgba(43, 73, 110, 0) 54%),
    linear-gradient(42deg, rgba(38, 91, 72, 0.38) 48%, rgba(38, 91, 72, 0) 88%),
    linear-gradient(180deg, #131620 0%, #07090f 100%);
-  --window-bg: rgba(27, 29, 39, 0.64);
-  --window-bg-strong: rgba(34, 36, 48, 0.82);
-  --window-titlebar: rgba(255, 255, 255, 0.06);
-  --window-border: rgba(255, 255, 255, 0.14);
-  --menubar-bg: rgba(24, 26, 36, 0.58);
-  --dock-bg: rgba(24, 26, 36, 0.62);
-  --sidebar-bg: rgba(22, 24, 33, 0.56);
-  --color-surface: rgba(27, 29, 39, 0.64);
-  --color-surface-strong: rgba(34, 36, 48, 0.82);
-  --color-control: rgba(255, 255, 255, 0.08);
-  --color-line: rgba(255, 255, 255, 0.12);
+  --window-bg: rgba(28, 31, 42, 0.68);
+  --window-bg-strong: rgba(39, 42, 56, 0.84);
+  --window-titlebar: rgba(255, 255, 255, 0.075);
+  --window-border: rgba(255, 255, 255, 0.18);
+  --window-titlebar-border: rgba(255, 255, 255, 0.13);
+  --card-bg: rgba(43, 46, 60, 0.5);
+  --card-bg-strong: rgba(52, 55, 70, 0.66);
+  --card-border: rgba(255, 255, 255, 0.14);
+  --card-border-hover: rgba(255, 255, 255, 0.22);
+  --control-border: rgba(255, 255, 255, 0.13);
+  --menubar-bg: rgba(24, 27, 38, 0.62);
+  --menubar-border: rgba(255, 255, 255, 0.16);
+  --dock-bg: rgba(18, 20, 28, 0.46);
+  --dock-border: rgba(255, 255, 255, 0.16);
+  --sidebar-bg: rgba(21, 24, 34, 0.64);
+  --sidebar-border: rgba(255, 255, 255, 0.14);
+  --color-surface: var(--card-bg);
+  --color-surface-strong: var(--card-bg-strong);
+  --color-control: rgba(255, 255, 255, 0.085);
+  --color-line: rgba(255, 255, 255, 0.13);
  --color-text: #f5f5f7;
  --color-text-muted: #b2b5bf;
  --color-text-subtle: #8f939f;
@@ -90,19 +111,26 @@ html[data-theme="dark"] {
  --color-accent-hover: #46a6ff;
  --color-accent-soft: rgba(41, 151, 255, 0.16);
  --color-danger-soft: rgba(255, 69, 58, 0.16);
-  --shadow-window: 0 30px 90px rgba(0, 0, 0, 0.44), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
-  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.36);
-  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.24);
-  --shadow-control: 0 14px 30px rgba(0, 0, 0, 0.26);
+  --shadow-window: 0 32px 100px rgba(0, 0, 0, 0.54), 0 14px 36px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
+  --shadow-sidebar: 18px 0 46px rgba(0, 0, 0, 0.38), -1px 0 0 rgba(255, 255, 255, 0.08) inset;
+  --shadow-menubar: 0 18px 46px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.09) inset;
+  --shadow-panel: var(--shadow-sidebar);
+  --shadow-card: 0 16px 34px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
+  --shadow-dock: 0 30px 86px rgba(0, 0, 0, 0.48), 0 12px 34px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 -1px 0 rgba(0, 0, 0, 0.36) inset;
+  --shadow-control: 0 14px 30px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  --focus-ring: 0 0 0 4px rgba(41, 151, 255, 0.18);
  --background: var(--color-page);
  --foreground: var(--color-text);
  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);
@@ -117,6 +145,12 @@ body {
  text-rendering: optimizeLegibility;
 }

+pre,
+code,
+table {
+  max-width: 100%;
+}
+
 ::selection {
  background: var(--color-accent-soft);
  color: var(--color-text);
@@ -221,7 +255,7 @@ samp,
 .hover\:bg-gray-100:hover,
 .hover\:bg-gray-200:hover,
 .focus\:bg-white:focus {
-  background-color: rgba(255, 255, 255, 0.58);
+  background-color: var(--card-bg-strong);
 }

 .hover\:bg-blue-50:hover {
@@ -264,16 +298,16 @@ input:not([type="checkbox"]):not([type="radio"]),
 textarea,
 select {
  background-color: var(--color-control);
-  border-color: var(--color-line);
+  border-color: var(--control-border);
  color: var(--color-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) inset;
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(18px);
 }

 input:not([type="checkbox"]):not([type="radio"]):focus,
 textarea:focus,
 select:focus {
-  background-color: var(--window-bg-strong);
+  background-color: var(--card-bg-strong);
  border-color: var(--color-accent);
 }

@@ -330,7 +364,7 @@ html[data-theme="dark"] .hover\:bg-gray-50:hover,
 html[data-theme="dark"] .hover\:bg-gray-100:hover,
 html[data-theme="dark"] .hover\:bg-gray-200:hover,
 html[data-theme="dark"] .focus\:bg-white:focus {
-  background-color: rgba(255, 255, 255, 0.11);
+  background-color: var(--card-bg-strong);
 }

 html[data-theme="dark"] .hover\:bg-blue-50:hover {
@@ -351,44 +385,45 @@ html[data-theme="dark"] .disabled\:bg-gray-400:disabled {
 html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
 html[data-theme="dark"] textarea,
 html[data-theme="dark"] select {
-  background-color: rgba(255, 255, 255, 0.08);
+  background-color: var(--color-control);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
 }

 html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
 html[data-theme="dark"] textarea:focus,
 html[data-theme="dark"] select:focus {
-  background-color: rgba(255, 255, 255, 0.11);
+  background-color: var(--card-bg-strong);
 }

 .w-md-editor {
  border-radius: 0.5rem !important;
-  border-color: var(--color-line) !important;
-  background-color: var(--window-bg-strong) !important;
+  border-color: var(--card-border) !important;
+  background-color: var(--card-bg-strong) !important;
  box-shadow: var(--shadow-card);
-  backdrop-filter: blur(24px);
+  backdrop-filter: blur(20px);
 }

 .w-md-editor-toolbar {
  border-radius: 0.5rem 0.5rem 0 0 !important;
-  border-color: var(--color-line) !important;
+  border-color: var(--window-titlebar-border) !important;
  background-color: var(--window-titlebar) !important;
 }

 html[data-theme="dark"] .w-md-editor {
-  background-color: var(--window-bg-strong) !important;
-  border-color: var(--color-line) !important;
+  background-color: var(--card-bg-strong) !important;
+  border-color: var(--card-border) !important;
 }

 html[data-theme="dark"] .w-md-editor-toolbar {
  background-color: var(--window-titlebar) !important;
-  border-color: var(--color-line) !important;
+  border-color: var(--window-titlebar-border) !important;
 }

 .wy-editor-shell {
  --color-canvas-default: transparent;
  --color-canvas-subtle: transparent;
-  --color-border-default: var(--color-line);
-  --color-border-muted: var(--color-line);
+  --color-border-default: var(--card-border);
+  --color-border-muted: var(--card-border);
  --color-fg-default: var(--color-text);
  --color-fg-muted: var(--color-text-muted);
  --color-accent-fg: var(--color-accent);
@@ -399,14 +434,15 @@ html[data-theme="dark"] .w-md-editor-toolbar {
  min-height: 520px;
  overflow: hidden;
  border-radius: 0.5rem !important;
-  border: 1px solid var(--color-line) !important;
-  background-color: var(--window-bg-strong) !important;
+  border: 1px solid var(--card-border) !important;
+  background-color: var(--card-bg-strong) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-card) !important;
+  backdrop-filter: blur(20px);
 }

 .wy-editor-shell .w-md-editor-toolbar {
-  border-color: var(--color-line) !important;
+  border-color: var(--window-titlebar-border) !important;
  background-color: var(--window-titlebar) !important;
 }

--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import './globals.css';
 import Providers from './providers';
 import DesktopShell from '@/components/layout/DesktopShell';
 import { THEME_INIT_SCRIPT } from '@/components/theme/theme';
+import { DEFAULT_DESCRIPTION, SITE_NAME, SITE_URL } from '@/lib/site';

 const pretendard = localFont({
  src: './fonts/PretendardVariable.woff2',
@@ -14,8 +15,23 @@ const pretendard = localFont({
 });

 export const metadata: Metadata = {
-  title: 'WYPark Blog',
-  description: '개발 블로그',
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: SITE_NAME,
+    template: `%s | ${SITE_NAME}`,
+  },
+  description: DEFAULT_DESCRIPTION,
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    title: SITE_NAME,
+    description: DEFAULT_DESCRIPTION,
+    url: '/',
+    siteName: SITE_NAME,
+    type: 'website',
+    locale: 'ko_KR',
+  },
 };

 export default function RootLayout({
@@ -54,3 +70,4 @@ export default function RootLayout({
    </html>
  );
 }
+
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,27 +1,50 @@
-'use client';
-
-import { Suspense, type ReactNode } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { useSearchParams } from 'next/navigation';
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
 import Link from 'next/link';
 import {
  Archive,
  ChevronRight,
  Clock,
-  Loader2,
  Search,
  TrendingUp,
 } from 'lucide-react';
-import { getPosts } from '@/api/posts';
+import { 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 { DEFAULT_DESCRIPTION, SITE_NAME } from '@/lib/site';
 import { Post, PostListResponse } from '@/types';

+export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+export const metadata: Metadata = {
+  title: {
+    absolute: SITE_NAME,
+  },
+  description: DEFAULT_DESCRIPTION,
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    title: SITE_NAME,
+    description: DEFAULT_DESCRIPTION,
+    url: '/',
+    siteName: SITE_NAME,
+    type: 'website',
+  },
+};
+
+type HomePageProps = {
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+};
+
 const isNoticePost = (post: Post) => {
  const categoryName = post.categoryName || '';
-  return categoryName === '공지' || categoryName === '怨듭?' || categoryName.toLowerCase() === 'notice';
+  const normalizedName = categoryName.toLowerCase();
+
+  return categoryName === '공지' || normalizedName === 'notice' || normalizedName === 'announcement';
 };

 const formatDate = (value?: string) => {
@@ -50,18 +73,23 @@ const getSummary = (content?: string, maxLength = 118) => {
    .slice(0, maxLength);
 };

-const getTotalElements = (data?: PostListResponse) => {
+const getTotalElements = (data?: PostListResponse | null) => {
  return data?.page?.totalElements ?? data?.totalElements ?? 0;
 };

+const getSearchKeyword = async (searchParams?: HomePageProps['searchParams']) => {
+  const resolvedSearchParams = searchParams ? await searchParams : {};
+  const keyword = resolvedSearchParams.keyword;
+
+  return Array.isArray(keyword) ? keyword[0] || '' : keyword || '';
+};
+
 function SearchResults({
  keyword,
  data,
-  isLoading,
 }: {
  keyword: string;
-  data?: PostListResponse;
-  isLoading: boolean;
+  data?: PostListResponse | null;
 }) {
  const searchResults = data?.content || [];
  const searchTotalElements = getTotalElements(data);
@@ -70,26 +98,22 @@ 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="flex items-center gap-2 text-[var(--color-accent)]">
-          <Search size={22} />
-          <h1 className="text-2xl font-bold tracking-normal text-[var(--color-text)]">
+      <div className="mb-6 flex min-w-0 flex-col gap-2 border-b border-[var(--color-line)] pb-5">
+        <div className="flex min-w-0 items-center gap-2 text-[var(--color-accent)]">
+          <Search size={22} className="shrink-0" />
+          <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>

-      {isLoading ? (
-        <div className="flex min-h-60 items-center justify-center">
-          <Loader2 className="animate-spin text-[var(--color-accent)]" size={30} />
-        </div>
-      ) : searchResults.length > 0 ? (
+      {searchResults.length > 0 ? (
        <div className="divide-y divide-[var(--color-line)]">
          {searchResults.map((post) => (
            <CompactPostRow key={post.id} post={post} />
@@ -108,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>
-              <span className="truncate text-sm font-semibold text-[var(--color-text)]">
+              <StatusBadge tone="danger" className="shrink-0">공지</StatusBadge>
+              <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>
@@ -134,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-black/[0.025] hover:px-3 dark:hover:bg-white/[0.07]"
+      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)]">
@@ -152,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>
        )}
@@ -179,25 +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 (
-    <WindowSurface
-      as="section"
-      showTrafficLights={false}
-      className="shadow-none"
-      bodyClassName="overflow-hidden"
-    >
-      <div className="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--color-line)] bg-white/[0.16] px-5 py-3 dark:bg-white/[0.04]">
+    <Surface as="section" strong className="min-w-0 overflow-hidden">
+      <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>
@@ -208,87 +238,61 @@ function PostListPanel({
        </Link>
      </div>

-      <div className="p-5 md:p-6">
-      {posts.length > 0 ? (
-        <div className="divide-y divide-[var(--color-line)]">
-          {posts.map((post, index) => (
-            <CompactPostRow
-              key={post.id}
-              post={post}
-              rank={isPopular ? index + 1 : undefined}
-              showViews={isPopular}
-            />
-          ))}
-        </div>
-      ) : (
-        <EmptyState title={isPopular ? '인기 글을 집계 중입니다.' : '아직 공개된 글이 없습니다.'} className="min-h-72" />
-      )}
+      <div className="p-4 md:p-6">
+        {posts.length > 0 ? (
+          <div className="divide-y divide-[var(--color-line)]">
+            {posts.map((post, index) => (
+              <CompactPostRow
+                key={post.id}
+                post={post}
+                rank={isPopular ? index + 1 : undefined}
+                showViews={isPopular}
+                featured={featured}
+              />
+            ))}
+          </div>
+        ) : (
+          <EmptyState title={isPopular ? '인기 글을 집계 중입니다.' : '아직 공개된 글이 없습니다.'} className="min-h-72" />
+        )}
      </div>
-    </WindowSurface>
+    </Surface>
  );
 }

-function HomeContent() {
-  const searchParams = useSearchParams();
-  const keyword = searchParams.get('keyword') || '';
-
-  const { data: noticesData, isLoading: isNoticesLoading } = useQuery({
-    queryKey: ['posts', 'notices'],
-    queryFn: () => getPosts({ category: '공지', size: 3, sort: 'createdAt,desc' }),
-    retry: 0,
-  });
-
-  const { data: latestData, isLoading: isLatestLoading } = useQuery({
-    queryKey: ['posts', 'latest'],
-    queryFn: () => getPosts({ size: 8, sort: 'createdAt,desc' }),
-    retry: 0,
-  });
-
-  const { data: popularData, isLoading: isPopularLoading } = useQuery({
-    queryKey: ['posts', 'popular'],
-    queryFn: () => getPosts({ size: 8, sort: 'viewCount,desc' }),
-    retry: 0,
-  });
-
-  const { data: searchData, isLoading: isSearchLoading } = useQuery({
-    queryKey: ['posts', 'search', keyword],
-    queryFn: () => getPosts({ keyword, size: 20 }),
-    enabled: !!keyword,
-    retry: 0,
-  });
-
-  const notices = noticesData?.content || [];
-  const latestList = (latestData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
-  const popularList = (popularData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
-  const isHomeLoading = !keyword && (isNoticesLoading || isLatestLoading || isPopularLoading);
+export default async function Home({ searchParams }: HomePageProps) {
+  const keyword = await getSearchKeyword(searchParams);

  if (keyword) {
+    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">
-        <SearchResults keyword={keyword} data={searchData} isLoading={isSearchLoading} />
+      <main className="mx-auto min-w-0 max-w-[1180px] px-0 py-3 md:py-6">
+        <SearchResults keyword={keyword} data={searchData} />
      </main>
    );
  }

-  if (isHomeLoading) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <Loader2 className="animate-spin text-[var(--color-accent)]" size={36} />
-      </div>
-    );
-  }
+  const [noticesData, latestData, popularData] = await Promise.all([
+    fetchPublicPosts({ category: '공지', size: 3, 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, 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">
-      <h1 className="sr-only">WYPark Blog</h1>
+    <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>
        )}
@@ -296,34 +300,21 @@ function HomeContent() {
      >
        <NoticeStrip notices={notices} />

-        <section className="grid gap-6 lg:grid-cols-2">
-          <PostListPanel
-            title="인기 글"
-            icon={<TrendingUp size={18} className="text-[var(--color-accent)]" />}
-            posts={popularList}
-            isPopular
-          />
+        <section className="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)]">
          <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>
    </main>
  );
 }
-
-export default function Home() {
-  return (
-    <Suspense
-      fallback={(
-        <div className="flex min-h-[60vh] items-center justify-center">
-          <Loader2 className="animate-spin text-[var(--color-accent)]" size={36} />
-        </div>
-      )}
-    >
-      <HomeContent />
-    </Suspense>
-  );
-}
--- a/src/app/play/chess/page.tsx
+++ b/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() {
--- a/src/app/posts/[slug]/page.tsx
+++ b/src/app/posts/[slug]/page.tsx
@@ -1,87 +1,90 @@
 import { Metadata } from 'next';
-import PostDetailClient from '@/components/post/PostDetailClient';
 import { notFound } from 'next/navigation';
-import { Post } from '@/types';
+import { fetchPublicPost } from '@/api/publicPosts';
+import PostDetailClient from '@/components/post/PostDetailClient';
+import { DEFAULT_DESCRIPTION, getCanonicalUrl, parseApiDate, SITE_NAME, SITE_URL } from '@/lib/site';

 type Props = {
  params: Promise<{ slug: string }>;
 };

-// 🛠️ 서버 사이드 데이터 패칭 함수 (Metadata와 Page 양쪽에서 재사용)
-async function getPostFromServer(slug: string): Promise<Post | null> {
-  const BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
+const getPostDescription = (content?: string) => {
+  const plainText = content
+    ?.replace(/```[\s\S]*?```/g, ' ')
+    .replace(/!\[(.*?)\]\(.*?\)/g, '$1')
+    .replace(/\[(.*?)\]\(.*?\)/g, '$1')
+    .replace(/[#*`_~>]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  if (!plainText) return DEFAULT_DESCRIPTION;
+
+  return plainText.length > 150 ? `${plainText.slice(0, 150)}...` : plainText;
+};
+
+const getFirstMarkdownImage = (content?: string) => {
+  const imageMatch = content?.match(/!\[.*?\]\((.*?)\)/);
+  const imageUrl = imageMatch?.[1]?.split(/\s+/)[0] || '/og-image.png';

  try {
-    const res = await fetch(`${BASE_URL}/api/posts/${slug}`, {
-      // 캐시 설정: 60초마다 갱신 (블로그 특성상 적절)
-      // 즉시 반영이 필요하다면 'no-store'로 설정하거나 revalidate: 0 사용
-      next: { revalidate: 60 }, 
-    });
-    
-    if (!res.ok) return null;
-    
-    const json = await res.json();
-    return json.data;
-  } catch (error) {
-    console.error('Server fetch error:', error);
-    return null;
+    return new URL(imageUrl, SITE_URL).toString();
+  } catch {
+    return new URL('/og-image.png', SITE_URL).toString();
  }
-}
+};

-// 🌟 메타데이터 생성 (SEO)
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
-  const post = await getPostFromServer(slug);
+  const post = await fetchPublicPost(slug);
+  const canonicalUrl = getCanonicalUrl(`/posts/${encodeURIComponent(post?.slug || slug)}`);

  if (!post) {
    return {
      title: '게시글을 찾을 수 없습니다',
+      alternates: {
+        canonical: canonicalUrl,
+      },
    };
  }

-  // 본문 요약 및 이미지 추출 로직
-  const description = post.content
-    ?.replace(/[#*`_~]/g, '')
-    .replace(/\n/g, ' ')
-    .substring(0, 150) + '...';
-
-  const imageMatch = post.content?.match(/!\[.*?\]\((.*?)\)/);
-  const imageUrl = imageMatch ? imageMatch[1] : '/og-image.png';
+  const description = getPostDescription(post.content);
+  const imageUrl = getFirstMarkdownImage(post.content);
+  const publishedTime = parseApiDate(post.createdAt).toISOString();
+  const modifiedTime = parseApiDate(post.updatedAt || post.createdAt).toISOString();

  return {
    title: post.title,
-    description: description,
+    description,
+    alternates: {
+      canonical: canonicalUrl,
+    },
    openGraph: {
      title: post.title,
-      description: description,
-      url: `https://blog.wypark.me/posts/${slug}`,
-      siteName: 'WYPark Blog',
+      description,
+      url: canonicalUrl,
+      siteName: SITE_NAME,
      images: [{ url: imageUrl, width: 1200, height: 630 }],
      type: 'article',
-      publishedTime: post.createdAt, // created_at 대신 createdAt 사용 주의 (타입 정의 따름)
+      publishedTime,
+      modifiedTime,
      authors: ['WYPark'],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
-      description: description,
+      description,
      images: [imageUrl],
    },
  };
 }

-// 🌟 실제 페이지 렌더링 (SSR 적용)
 export default async function PostDetailPage({ params }: Props) {
  const { slug } = await params;
+  const post = await fetchPublicPost(slug);

-  // 1. 서버에서 데이터를 미리 가져옵니다.
-  const post = await getPostFromServer(slug);
-
-  // 2. 데이터가 없으면 404 페이지로 보냅니다. (봇에게도 404 신호를 줌)
  if (!post) {
    notFound();
  }

-  // 3. 가져온 데이터를 클라이언트 컴포넌트에 'initialPost'로 넘겨줍니다.
  return <PostDetailClient slug={slug} initialPost={post} />;
 }
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@@ -1,16 +1,14 @@
 import { MetadataRoute } from 'next';
+import { SITE_URL } from '@/lib/site';

 export default function robots(): MetadataRoute.Robots {
-  const baseUrl = 'https://blog.wypark.me'; 
-
  return {
    rules: {
      userAgent: '*',
      allow: '/',
-      // 검색 로봇이 굳이 긁어갈 필요 없는 페이지들은 차단 (글쓰기, 로그인 등)
      disallow: ['/write', '/login', '/signup', '/admin'],
    },
-    // 여기서 동적으로 생성된 sitemap.xml을 가리킵니다.
-    sitemap: `${baseUrl}/sitemap.xml`,
+    sitemap: `${SITE_URL}/sitemap.xml`,
  };
 }
+
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -1,60 +1,40 @@
 import { MetadataRoute } from 'next';
+import {
+  fetchPublicPosts,
+} from '@/api/publicPosts';
+import { parseApiDate, SITE_URL } from '@/lib/site';

-interface SitemapPost {
-  slug: string;
-  updatedAt?: string;
-  createdAt?: string;
-}
+export const dynamic = 'force-dynamic';
+export const revalidate = 300;

 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const baseUrl = 'https://blog.wypark.me'; 
-  // API 주소 환경변수 사용 (없으면 로컬)
-  const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
-
-  // 1. 고정된 정적 페이지들
+  const generatedAt = new Date();
  const routes: MetadataRoute.Sitemap = [
    {
-      url: baseUrl,
-      lastModified: new Date(),
+      url: SITE_URL,
+      lastModified: generatedAt,
      changeFrequency: 'daily',
      priority: 1,
    },
    {
-      url: `${baseUrl}/archive`,
-      lastModified: new Date(),
+      url: `${SITE_URL}/archive`,
+      lastModified: generatedAt,
      changeFrequency: 'daily',
      priority: 0.8,
    },
  ];

-  try {
-    // 2. API에서 게시글 목록 가져오기
-    const response = await fetch(`${apiUrl}/api/posts?size=1000&sort=createdAt,desc`, {
-      method: 'GET',
-      headers: { 'Content-Type': 'application/json' },
-      next: { revalidate: 3600 } 
-    });
+  const postsData = await fetchPublicPosts({ size: 1000, sort: 'createdAt,desc' });
+  const posts = postsData?.content || [];

-    if (!response.ok) {
-      throw new Error('Failed to fetch posts');
-    }
-
-    const json = await response.json() as { data?: { content?: SitemapPost[] } };
-    const posts = json.data?.content || [];
-
-    // 3. 게시글 데이터를 사이트맵 형식으로 변환
-    const postRoutes = posts.map((post) => ({
-      // 🛠️ 핵심 수정: slug를 encodeURIComponent로 감싸서 특수문자(&, 한글 등)를 안전하게 처리합니다.
-      url: `${baseUrl}/posts/${encodeURIComponent(post.slug)}`,
-      lastModified: new Date(post.updatedAt || post.createdAt || Date.now()),
-      changeFrequency: 'weekly' as const,
+  const postRoutes: MetadataRoute.Sitemap = posts
+    .filter((post) => post.slug)
+    .map((post) => ({
+      url: `${SITE_URL}/posts/${encodeURIComponent(post.slug)}`,
+      lastModified: parseApiDate(post.updatedAt || post.createdAt, generatedAt),
+      changeFrequency: 'weekly',
      priority: 0.8,
    }));

-    return [...routes, ...postRoutes];
-
-  } catch (error) {
-    console.error('Sitemap generation error:', error);
-    return routes;
-  }
+  return [...routes, ...postRoutes];
 }
--- a/src/components/admin/AdminPostEditor.tsx
+++ b/src/components/admin/AdminPostEditor.tsx
@@ -111,7 +111,7 @@ function CategoryOptions({
      {categories.map((category) => (
        <div key={category.id}>
          <label
-            className="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm text-[var(--color-text-muted)] transition hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10"
+            className="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]"
            style={{ marginLeft: `${depth * 10}px` }}
          >
            <input
@@ -167,7 +167,7 @@ function DraftLoadDialog({
          <button
            type="button"
            onClick={onCancel}
-            className="inline-flex items-center justify-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-4 py-2 text-sm font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]"
+            className="inline-flex items-center justify-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-4 py-2 text-sm font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
          >
            취소
          </button>
@@ -479,7 +479,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
          <button
            type="button"
            onClick={() => router.push('/admin/posts')}
-            className="inline-flex h-8 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-xs font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]"
+            className="inline-flex h-8 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-xs font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
          >
            <ArrowLeft size={14} />
            목록
@@ -502,7 +502,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                  <button
                    type="button"
                    onClick={handleTempSave}
-                    className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-4 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]"
+                    className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-4 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
                  >
                    <FileText size={16} />
                    임시저장
@@ -527,7 +527,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                value={title}
                onChange={(event) => setTitle(event.target.value)}
                placeholder="제목을 입력하세요"
-                className="mb-5 w-full rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-4 py-3 text-2xl font-bold tracking-normal text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] md:text-3xl"
+                className="mb-5 w-full rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-4 py-3 text-2xl font-bold tracking-normal text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] md:text-3xl"
              />

              <div className="wy-editor-shell" data-color-mode={resolvedTheme}>
@@ -558,15 +558,15 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                발행 상태
              </h2>
              <div className="mt-4 grid grid-cols-3 gap-2 text-center">
-                <div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-3">
+                <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 shadow-[var(--shadow-card)]">
                  <p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{contentLength.toLocaleString()}</p>
                  <p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">글자</p>
                </div>
-                <div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-3">
+                <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 shadow-[var(--shadow-card)]">
                  <p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{wordCount.toLocaleString()}</p>
                  <p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">단어</p>
                </div>
-                <div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-3">
+                <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-3 shadow-[var(--shadow-card)]">
                  <p className="text-lg font-bold tabular-nums text-[var(--color-text)]">{readingMinutes}</p>
                  <p className="text-[10px] font-semibold text-[var(--color-text-subtle)]">분</p>
                </div>
@@ -581,7 +581,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                <Folder size={17} />
                카테고리
              </h2>
-              <div className="max-h-64 overflow-y-auto rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] p-2">
+              <div className="max-h-64 overflow-y-auto rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-2 shadow-[var(--shadow-card)]">
                {categories.length > 0 ? (
                  <CategoryOptions categories={categories} selectedId={categoryId} onSelect={setCategoryId} />
                ) : (
@@ -602,7 +602,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                value={tags}
                onChange={(event) => setTags(event.target.value)}
                placeholder="react, nextjs, essay"
-                className="w-full rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-3 py-2 text-sm text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)]"
+                className="w-full rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-3 py-2 text-sm text-[var(--color-text)] outline-none transition placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)]"
              />
              <p className="mt-2 text-xs text-[var(--color-text-subtle)]">쉼표로 구분해서 입력하세요.</p>
            </Surface>
@@ -613,7 +613,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                이미지
              </h2>
              <label
-                className={`flex min-h-28 w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-[var(--color-line)] bg-[var(--color-control)] p-4 text-center transition hover:border-[var(--color-accent)] hover:bg-[var(--window-bg-strong)] ${isUploading ? 'cursor-wait opacity-60' : ''}`}
+                className={`flex min-h-28 w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-[var(--card-border)] bg-[var(--card-bg)] p-4 text-center shadow-[var(--shadow-card)] transition hover:border-[var(--color-accent)] hover:bg-[var(--card-bg-strong)] ${isUploading ? 'cursor-wait opacity-60' : ''}`}
              >
                <UploadCloud className="mb-2 h-7 w-7 text-[var(--color-text-subtle)]" />
                <span className="text-sm font-semibold text-[var(--color-text)]">
@@ -641,7 +641,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                <button
                  type="button"
                  onClick={() => setShowDraftList((previous) => !previous)}
-                  className="rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-2.5 py-1 text-xs font-bold text-[var(--color-text-muted)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]"
+                  className="rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-2.5 py-1 text-xs font-bold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]"
                >
                  {drafts.length}/10
                </button>
@@ -656,7 +656,7 @@ export default function AdminPostEditor({ editSlug }: AdminPostEditorProps) {
                  ) : (
                    <ul className="space-y-1">
                      {drafts.map((draft) => (
-                        <li key={draft.id} className="group rounded-lg px-3 py-2 transition hover:bg-black/[0.04] dark:hover:bg-white/10">
+                        <li key={draft.id} className="group rounded-lg px-3 py-2 transition hover:bg-[var(--card-bg)]">
                          <div className="flex items-start justify-between gap-2">
                            <button type="button" onClick={() => handleLoadDraft(draft)} className="min-w-0 flex-1 text-left">
                              <p className="line-clamp-1 text-sm font-semibold text-[var(--color-text)]">{draft.title}</p>
--- a/src/components/admin/AdminRouteShell.tsx
+++ b/src/components/admin/AdminRouteShell.tsx
@@ -60,7 +60,7 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
    <div className="mx-auto w-full space-y-6 px-0 py-4 md:w-[80vw] md:max-w-[1400px] md:py-6">
      <WindowSurface title="Admin Console" subtitle="Operations toolbar" bodyClassName="p-2">
        <nav
-          className="flex gap-2 overflow-x-auto rounded-lg bg-[var(--color-control)] p-1 backdrop-blur-xl"
+          className="flex gap-2 overflow-x-auto rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-1 shadow-[var(--shadow-card)] backdrop-blur-[18px]"
          aria-label="관리자 메뉴"
        >
          {navItems.map((item) => {
@@ -74,8 +74,8 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
                className={clsx(
                  'inline-flex h-9 shrink-0 items-center gap-2 rounded-lg px-4 text-sm font-semibold transition',
                  isActive
-                    ? 'bg-[var(--window-bg-strong)] text-[var(--color-text)] shadow-sm'
-                    : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                    ? 'bg-[var(--card-bg-strong)] text-[var(--color-text)] shadow-sm'
+                    : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
                )}
              >
                <Icon size={16} />
--- a/src/components/admin/dashboard/AdminDashboardActionCenter.tsx
+++ b/src/components/admin/dashboard/AdminDashboardActionCenter.tsx
@@ -50,7 +50,7 @@ export default function AdminDashboardActionCenter({
              <Link
                key={item.label}
                href={item.href}
-                className="flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+                className="flex items-center justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
              >
                <span className="flex items-center gap-3 text-sm font-semibold text-[var(--color-text-muted)]">
                  <Icon size={16} />
--- a/src/components/admin/dashboard/AdminDashboardCategoryHealth.tsx
+++ b/src/components/admin/dashboard/AdminDashboardCategoryHealth.tsx
@@ -34,9 +34,9 @@ export default function AdminDashboardCategoryHealth({
      </div>

      {categoryStats.length > 0 ? (
-        <div className="overflow-x-auto rounded-lg border border-[var(--color-line)]">
+        <div className="overflow-x-auto rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] shadow-[var(--shadow-card)]">
          <div className="min-w-[680px]">
-            <div className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 bg-black/[0.03] px-4 py-3 text-xs font-bold text-[var(--color-text-subtle)] dark:bg-white/10">
+            <div className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 bg-[var(--window-titlebar)] px-4 py-3 text-xs font-bold text-[var(--color-text-subtle)]">
              <span>카테고리</span>
              <span>글</span>
              <span>최근 조회</span>
@@ -47,7 +47,7 @@ export default function AdminDashboardCategoryHealth({
              <Link
                key={category.id}
                href={`/category/${category.name}`}
-                className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 border-t border-[var(--color-line)] px-4 py-3 text-sm transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+                className="grid grid-cols-[1.2fr_0.6fr_0.7fr_0.9fr_auto] gap-3 border-t border-[var(--card-border)] px-4 py-3 text-sm transition hover:bg-[var(--card-bg-strong)]"
              >
                <span className="truncate font-semibold text-[var(--color-text)]">{category.name}</span>
                <span className="text-[var(--color-text-muted)]">{category.postCount.toLocaleString()}</span>
--- a/src/components/admin/dashboard/AdminDashboardPostPerformance.tsx
+++ b/src/components/admin/dashboard/AdminDashboardPostPerformance.tsx
@@ -16,7 +16,7 @@ function PostStatRow({ post, isFallback }: { post: DashboardPostStat; isFallback
  return (
    <Link
      href={`/posts/${post.slug}`}
-      className="group flex items-start justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-black/[0.03] dark:hover:bg-white/10"
+      className="group flex items-start justify-between gap-4 rounded-lg px-3 py-3 transition hover:bg-[var(--card-bg)]"
    >
      <div className="min-w-0">
        <div className="mb-1 flex items-center gap-2">
--- a/src/components/chess/ChessPuzzleClient.tsx
+++ b/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">
-      <div className="flex items-center gap-2 text-[var(--color-accent)]">
-        <Target size={23} />
-        <h1 className="text-2xl font-bold tracking-normal text-[var(--color-text)] md:text-3xl">
+    <section className="flex min-w-0 flex-col gap-2 border-b border-[var(--color-line)] pb-5">
+      <div className="flex min-w-0 items-center gap-2 text-[var(--color-accent)]">
+        <Target size={23} className="shrink-0" />
+        <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]">
-        <WindowSurface title="Board" bodyClassName="p-3 md:p-5">
-          <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)]">
+      <section className="grid min-w-0 items-start gap-5 lg:grid-cols-[minmax(0,1fr)_20rem]">
+        <BoardWindow>
+          <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>
-        <WindowSurface title="Puzzle" as="aside" bodyClassName="flex min-h-72 flex-col items-center justify-center p-5 text-center">
+        </BoardWindow>
+        <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>
-        <p className="mt-2 max-w-md text-sm leading-6 text-[var(--color-text-muted)]">
-          백엔드 API가 아직 준비되지 않았거나 잠시 응답하지 않습니다.
+        <h2 className="break-words text-lg font-bold text-[var(--color-text)]">오늘의 퍼즐을 불러오지 못했습니다.</h2>
+        <p className="mt-2 max-w-md break-words text-sm leading-6 text-[var(--color-text-muted)]">
+          백엔드 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]">
-        <WindowSurface title="Board" bodyClassName="p-3 md:p-5">
-          <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)]">
+      <section className="grid min-w-0 items-start gap-5 lg:grid-cols-[minmax(0,1fr)_20rem]">
+        <BoardWindow>
+          <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">
-          <div className="mb-4 flex items-start justify-between gap-3">
-            <div>
-              <p className="text-xs font-semibold uppercase text-[var(--color-text-subtle)]">
+        <WindowSurface title="Puzzle" showTrafficLights={false} as="aside" bodyClassName="p-4 md:p-5">
+          <div className="mb-4 flex min-w-0 items-start justify-between gap-3">
+            <div className="min-w-0">
+              <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]">
-              <dt className="text-xs text-[var(--color-text-subtle)]">난이도</dt>
-              <dd className="mt-0.5 font-semibold text-[var(--color-text)]">{puzzle.rating}</dd>
+            <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 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 원문
-            <ExternalLink size={13} />
+            <span className="truncate">Lichess 원문</span>
+            <ExternalLink size={13} className="shrink-0" />
          </a>
        </WindowSurface>
      </section>
-    </main>
+    </ChessPageFrame>
  );
 }

--- a/src/components/comment/CommentItem.tsx
+++ b/src/components/comment/CommentItem.tsx
@@ -163,7 +163,7 @@ export default function CommentItem({ comment, postSlug, depth = 0 }: CommentIte
             </button>
             <button
               onClick={() => { setIsDeleting(false); setGuestPassword(''); }}
-               className="rounded-full p-1 text-[var(--color-text-subtle)] hover:bg-black/[0.06] dark:hover:bg-white/10"
+               className="rounded-full p-1 text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)]"
             >
               <X size={14} />
             </button>
--- a/src/components/layout/DesktopDock.tsx
+++ b/src/components/layout/DesktopDock.tsx
@@ -1,63 +1,343 @@
 'use client';

+import { type CSSProperties, type FocusEvent, useCallback, useEffect, useRef, 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);
+};
+
+const DOCK_LEAVE_DELAY_MS = 120;
+const DOCK_COLLAPSE_MS = 560;
+const DOCK_PINNED_STORAGE_KEY = 'dock-pinned-v2';
+
+type DockToneStyle = CSSProperties & {
+  '--dock-item-bg': string;
+  '--dock-item-bg-hover': string;
+  '--dock-item-bg-active': string;
+  '--dock-item-border': string;
+  '--dock-item-border-hover': string;
+  '--dock-item-fg': string;
+  '--dock-item-fg-strong': string;
+  '--dock-item-ring': string;
+};
+
+const createDockTone = (
+  bg: string,
+  hover: string,
+  active: string,
+  border: string,
+  borderHover: string,
+  fg: string,
+  fgStrong: string,
+  ring: string,
+): DockToneStyle => ({
+  '--dock-item-bg': bg,
+  '--dock-item-bg-hover': hover,
+  '--dock-item-bg-active': active,
+  '--dock-item-border': border,
+  '--dock-item-border-hover': borderHover,
+  '--dock-item-fg': fg,
+  '--dock-item-fg-strong': fgStrong,
+  '--dock-item-ring': ring,
+});
+
+const dockGlassTone = createDockTone(
+  'rgba(255, 255, 255, 0.24)',
+  'rgba(255, 255, 255, 0.36)',
+  'rgba(255, 255, 255, 0.46)',
+  'rgba(255, 255, 255, 0.2)',
+  'rgba(255, 255, 255, 0.34)',
+  'var(--color-text-muted)',
+  'var(--color-text)',
+  'rgba(255, 255, 255, 0.34)',
+);
+
+const homeDockTone = createDockTone(
+  'rgba(255, 255, 255, 0.58)',
+  'rgba(255, 255, 255, 0.68)',
+  'rgba(255, 255, 255, 0.76)',
+  'rgba(255, 255, 255, 0.28)',
+  'rgba(255, 255, 255, 0.46)',
+  'var(--color-text-muted)',
+  'var(--color-text)',
+  'rgba(255, 255, 255, 0.42)',
+);
+
+const dockToneStyles: Record<string, DockToneStyle> = {
+  home: homeDockTone,
+  archive: createDockTone('rgba(222, 216, 255, 0.54)', 'rgba(222, 216, 255, 0.64)', 'rgba(222, 216, 255, 0.72)', 'rgba(255, 255, 255, 0.26)', 'rgba(151, 132, 214, 0.34)', '#6f668f', '#514274', 'rgba(151, 132, 214, 0.2)'),
+  chess: createDockTone('rgba(255, 229, 162, 0.54)', 'rgba(255, 229, 162, 0.64)', 'rgba(255, 229, 162, 0.72)', 'rgba(255, 255, 255, 0.28)', 'rgba(184, 134, 42, 0.34)', '#7b6d4a', '#665125', 'rgba(184, 134, 42, 0.2)'),
+  admin: createDockTone('rgba(192, 226, 255, 0.54)', 'rgba(192, 226, 255, 0.64)', 'rgba(192, 226, 255, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(81, 145, 195, 0.34)', '#627f96', '#3f6686', 'rgba(81, 145, 195, 0.2)'),
+  write: createDockTone('rgba(255, 209, 184, 0.54)', 'rgba(255, 209, 184, 0.64)', 'rgba(255, 209, 184, 0.72)', 'rgba(255, 255, 255, 0.28)', 'rgba(187, 106, 70, 0.34)', '#8c705f', '#724d38', 'rgba(187, 106, 70, 0.2)'),
+  login: createDockTone('rgba(190, 236, 238, 0.54)', 'rgba(190, 236, 238, 0.64)', 'rgba(190, 236, 238, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(68, 150, 158, 0.34)', '#63898c', '#446d72', 'rgba(68, 150, 158, 0.2)'),
+  signup: createDockTone('rgba(237, 207, 250, 0.54)', 'rgba(237, 207, 250, 0.64)', 'rgba(237, 207, 250, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(153, 91, 176, 0.34)', '#846c8e', '#684a78', 'rgba(153, 91, 176, 0.2)'),
+  logout: createDockTone('rgba(255, 207, 216, 0.54)', 'rgba(255, 207, 216, 0.64)', 'rgba(255, 207, 216, 0.72)', 'rgba(255, 255, 255, 0.28)', 'rgba(188, 84, 99, 0.34)', '#8f6970', '#714850', 'rgba(188, 84, 99, 0.2)'),
+  pin: createDockTone('rgba(255, 219, 170, 0.56)', 'rgba(255, 219, 170, 0.66)', 'rgba(255, 219, 170, 0.74)', 'rgba(255, 255, 255, 0.28)', 'rgba(184, 118, 44, 0.36)', '#8a704e', '#6b4f2d', 'rgba(184, 118, 44, 0.22)'),
+  menu: createDockTone('rgba(213, 234, 203, 0.54)', 'rgba(213, 234, 203, 0.64)', 'rgba(213, 234, 203, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(98, 143, 80, 0.34)', '#6f8366', '#526f44', 'rgba(98, 143, 80, 0.2)'),
+  more: createDockTone('rgba(210, 228, 255, 0.54)', 'rgba(210, 228, 255, 0.64)', 'rgba(210, 228, 255, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(86, 126, 183, 0.34)', '#6d7f98', '#4f688d', 'rgba(86, 126, 183, 0.2)'),
+  default: dockGlassTone,
+};
+
+const getDockToneStyle = (key: string) => dockToneStyles[key] ?? dockToneStyles.default;
+
+export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: DesktopDockProps) {
  const pathname = usePathname();
  const router = useRouter();
  const { isLoggedIn, role, logout, _hasHydrated } = useAuthStore();
+  const [isPinned, setIsPinned] = useState(true);
+  const [isMoreOpen, setIsMoreOpen] = useState(false);
+  const [isDockHovered, setIsDockHovered] = useState(false);
+  const [isDockFocused, setIsDockFocused] = useState(false);
+  const [isDockClosing, setIsDockClosing] = useState(false);
+  const isPinnedRef = useRef(isPinned);
+  const dockZoneRef = useRef<HTMLDivElement>(null);
+  const dockLeaveTimerRef = useRef<number | null>(null);
+  const dockCollapseTimerRef = useRef<number | null>(null);
+  const pinToggleStartedByPointerRef = useRef(false);
  const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
+  const isDockOpen = isPinned || isDockHovered || isDockFocused;
+  const isDockRangeExpanded = isDockOpen || isDockClosing;
+
+  const clearDockTimers = useCallback(() => {
+    if (dockLeaveTimerRef.current !== null) {
+      window.clearTimeout(dockLeaveTimerRef.current);
+      dockLeaveTimerRef.current = null;
+    }
+
+    if (dockCollapseTimerRef.current !== null) {
+      window.clearTimeout(dockCollapseTimerRef.current);
+      dockCollapseTimerRef.current = null;
+    }
+  }, []);
+
+  const expandDock = () => {
+    clearDockTimers();
+    setIsDockClosing(false);
+    setIsDockHovered(true);
+  };
+
+  const startDockCollapse = useCallback(() => {
+    clearDockTimers();
+    setIsDockHovered(false);
+    setIsDockClosing(true);
+    dockCollapseTimerRef.current = window.setTimeout(() => {
+      setIsDockClosing(false);
+      dockCollapseTimerRef.current = null;
+    }, DOCK_COLLAPSE_MS);
+  }, [clearDockTimers]);
+
+  const scheduleDockCollapse = () => {
+    if (isPinned || isDockFocused) return;
+
+    clearDockTimers();
+    dockLeaveTimerRef.current = window.setTimeout(() => {
+      startDockCollapse();
+    }, DOCK_LEAVE_DELAY_MS);
+  };
+
+  const blurFocusedDockItem = useCallback(() => {
+    if (
+      document.activeElement instanceof HTMLElement &&
+      dockZoneRef.current?.contains(document.activeElement)
+    ) {
+      document.activeElement.blur();
+    }
+  }, []);
+
+  const releaseUnpinnedDockAfterNavigation = useCallback(() => {
+    if (isPinnedRef.current) return;
+
+    const isPointerInsideDock = dockZoneRef.current?.matches(':hover') ?? false;
+
+    blurFocusedDockItem();
+    setIsDockFocused(false);
+
+    if (isPointerInsideDock) {
+      clearDockTimers();
+      setIsDockClosing(false);
+      setIsDockHovered(true);
+      return;
+    }
+
+    startDockCollapse();
+  }, [blurFocusedDockItem, clearDockTimers, startDockCollapse]);
+
+  useEffect(() => {
+    isPinnedRef.current = isPinned;
+  }, [isPinned]);
+
+  useEffect(() => {
+    const frameId = window.requestAnimationFrame(() => {
+      const savedValue = window.localStorage.getItem(DOCK_PINNED_STORAGE_KEY);
+      const nextValue = savedValue === null ? true : savedValue === 'true';
+
+      isPinnedRef.current = nextValue;
+      setIsPinned(nextValue);
+    });
+
+    return () => window.cancelAnimationFrame(frameId);
+  }, []);
+
+  useEffect(() => {
+    const frameId = window.requestAnimationFrame(() => {
+      setIsMoreOpen(false);
+      releaseUnpinnedDockAfterNavigation();
+    });
+
+    return () => window.cancelAnimationFrame(frameId);
+  }, [pathname, releaseUnpinnedDockAfterNavigation]);
+
+  useEffect(() => {
+    return () => clearDockTimers();
+  }, [clearDockTimers]);
+
+  const handlePinnedChange = () => {
+    const nextValue = !isPinned;
+    const startedByPointer = pinToggleStartedByPointerRef.current;
+    const isPointerInsideDock = dockZoneRef.current?.matches(':hover') ?? false;
+
+    pinToggleStartedByPointerRef.current = false;
+    window.localStorage.setItem(DOCK_PINNED_STORAGE_KEY, String(nextValue));
+    clearDockTimers();
+    isPinnedRef.current = nextValue;
+    setIsPinned(nextValue);
+
+    if (nextValue) {
+      setIsDockClosing(false);
+      setIsDockHovered(false);
+      return;
+    }
+
+    if (startedByPointer) {
+      setIsDockFocused(false);
+      blurFocusedDockItem();
+    }
+
+    if (isPointerInsideDock) {
+      setIsDockClosing(false);
+      setIsDockHovered(true);
+      return;
+    }
+
+    if (!isDockFocused || startedByPointer) {
+      startDockCollapse();
+      return;
+    }
+
+    setIsDockHovered(false);
+    setIsDockClosing(false);
+  };
+
+  const handleDockZoneFocus = () => {
+    clearDockTimers();
+    setIsDockClosing(false);
+    setIsDockFocused(true);
+  };
+
+  const handleDockHandleFocus = () => {
+    handleDockZoneFocus();
+
+    window.requestAnimationFrame(() => {
+      dockZoneRef.current
+        ?.querySelector<HTMLElement>('[data-dock-panel="true"] a, [data-dock-panel="true"] button')
+        ?.focus();
+    });
+  };
+
+  const handleDockBlur = (event: FocusEvent<HTMLDivElement>) => {
+    const nextTarget = event.relatedTarget;
+
+    if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) return;
+
+    if (!nextTarget) {
+      window.setTimeout(() => {
+        if (dockZoneRef.current?.contains(document.activeElement)) return;
+
+        setIsDockFocused(false);
+        if (!isPinned && !isDockHovered) {
+          startDockCollapse();
+        }
+      }, 80);
+      return;
+    }
+
+    setIsDockFocused(false);
+    if (!isPinned && !isDockHovered) {
+      startDockCollapse();
+    }
+  };

  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 +350,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,47 +360,50 @@ 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 toneStyle = getDockToneStyle(item.key);
    const itemClass = clsx(
-      'group relative flex h-10 w-10 items-center justify-center rounded-lg border border-white/20 bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition duration-150 hover:-translate-y-1 hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)] focus-visible:-translate-y-1 sm:h-12 sm:w-12',
-      active && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)] ring-1 ring-[var(--color-accent-soft)]',
+      'group/item relative flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition duration-150 hover:-translate-y-1 hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:-translate-y-1',
+      active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]',
    );

    const content = (
      <>
        <Icon size={20} strokeWidth={2.1} />
-        <span className="pointer-events-none absolute -top-9 hidden whitespace-nowrap rounded-full border border-[var(--color-line)] bg-[var(--window-bg-strong)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text)] opacity-0 shadow-[var(--shadow-control)] backdrop-blur-xl 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 && (
-          <span className="absolute -bottom-1 h-1 w-1 rounded-full bg-[var(--color-accent)]" />
+          <span className="absolute -bottom-1 h-1 w-1 rounded-full bg-[var(--dock-item-fg-strong)]" />
        )}
      </>
    );
@@ -134,6 +417,8 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
          aria-label={item.label}
          aria-current={active ? 'page' : undefined}
          className={itemClass}
+          style={toneStyle}
+          onClick={releaseUnpinnedDockAfterNavigation}
        >
          {content}
        </Link>
@@ -148,6 +433,55 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
        aria-label={item.label}
        onClick={item.onClick}
        className={itemClass}
+        style={toneStyle}
+      >
+        {content}
+      </button>
+    );
+  };
+
+  const renderMobileItem = (item: DockAction, activeOverride?: boolean) => {
+    const Icon = item.icon;
+    const active = activeOverride ?? item.isActive?.(pathname) ?? false;
+    const toneStyle = getDockToneStyle(item.key);
+    const itemClass = clsx(
+      'flex h-12 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-1 text-[10px] font-semibold leading-none text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors',
+      'hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:bg-[var(--dock-item-bg-active)]',
+      active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]',
+    );
+    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}
+          style={toneStyle}
+          onClick={() => setIsMoreOpen(false)}
+        >
+          {content}
+        </Link>
+      );
+    }
+
+    return (
+      <button
+        key={item.key}
+        type="button"
+        title={item.label}
+        aria-label={item.label}
+        onClick={item.onClick}
+        className={itemClass}
+        style={toneStyle}
      >
        {content}
      </button>
@@ -155,16 +489,158 @@ export default function DesktopDock({ isSidebarCollapsed }: DesktopDockProps) {
  };

  return (
-    <nav
-      aria-label="빠른 실행 Dock"
-      className={clsx(
-        'fixed bottom-3 left-1/2 z-40 -translate-x-1/2 transition-[left] duration-300 ease-out md:bottom-5',
-        isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : 'md:left-[calc(50%+9rem)]',
+    <>
+      <nav
+        aria-label="빠른 실행 Dock"
+        className={clsx(
+          'fixed bottom-0 left-1/2 z-40 hidden -translate-x-1/2 md:block',
+          'transition-[left] duration-300 ease-out',
+          isSidebarCollapsed ? 'md:left-[calc(50%+2.5rem)]' : 'md:left-[calc(50%+9rem)]',
+        )}
+      >
+        <div
+          ref={dockZoneRef}
+          onMouseEnter={expandDock}
+          onMouseLeave={scheduleDockCollapse}
+          onFocus={handleDockZoneFocus}
+          onBlur={handleDockBlur}
+          className={clsx(
+            'relative flex items-end justify-center transition-[width,height,padding] duration-[560ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
+            isDockRangeExpanded
+              ? 'h-32 w-[min(calc(100vw-2rem),56rem)] px-8 pb-7 pt-12'
+              : 'h-12 w-16 px-0 pb-0 pt-0',
+          )}
+        >
+          <button
+            type="button"
+            aria-label="Dock 열기"
+            tabIndex={isDockRangeExpanded ? -1 : 0}
+            onMouseEnter={expandDock}
+            onFocus={handleDockHandleFocus}
+            className={clsx(
+              'absolute bottom-0 left-1/2 z-10 flex h-9 w-12 -translate-x-1/2 items-start justify-center rounded-t-lg border border-b-0 border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] pt-1.5 text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] backdrop-blur-[22px]',
+              'transition-[transform,opacity,width,height] duration-[560ms] ease-[cubic-bezier(0.22,1,0.36,1)] hover:bg-[var(--dock-item-bg-hover)] focus-visible:bg-[var(--dock-item-bg-hover)]',
+              isDockRangeExpanded
+                ? 'pointer-events-none translate-y-5 scale-75 opacity-0'
+                : 'pointer-events-auto translate-y-0 scale-100 opacity-100 hover:h-10 hover:w-14',
+            )}
+            style={getDockToneStyle('more')}
+          >
+            <MoreHorizontal size={18} strokeWidth={2.3} />
+          </button>
+
+          <div
+            data-dock-panel="true"
+            className={clsx(
+              'flex max-w-[calc(100vw-2rem)] origin-bottom 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,filter] duration-[560ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
+              isDockOpen
+                ? 'pointer-events-auto translate-y-0 scale-x-100 scale-y-100 opacity-100 blur-0'
+                : clsx(
+                    'translate-y-8 scale-x-[0.16] scale-y-[0.22] opacity-0 blur-sm',
+                    isDockClosing ? 'pointer-events-auto' : 'pointer-events-none',
+                  ),
+            )}
+          >
+          {desktopItems.map(renderDesktopItem)}
+          <button
+            type="button"
+            title={isPinned ? 'Dock 고정 해제' : 'Dock 고정'}
+            aria-label={isPinned ? 'Dock 고정 해제' : 'Dock 고정'}
+            aria-pressed={isPinned}
+            onPointerDown={() => {
+              pinToggleStartedByPointerRef.current = true;
+            }}
+            onClick={handlePinnedChange}
+            className={clsx(
+              'group/item relative ml-1 flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] ring-1 ring-[var(--dock-item-ring)] backdrop-blur-[18px] transition duration-150 hover:-translate-y-1 hover:bg-[var(--dock-item-bg-hover)]',
+              isPinned && 'shadow-[var(--shadow-dock)]',
+            )}
+            style={getDockToneStyle('pin')}
+          >
+            {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>
+        </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 toneStyle = getDockToneStyle(item.key);
+                const className = clsx(
+                  'inline-flex h-10 min-w-0 items-center justify-center gap-2 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-3 text-sm font-semibold text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)]',
+                  active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]',
+                );
+
+                if (item.href) {
+                  return (
+                    <Link
+                      key={item.key}
+                      href={item.href}
+                      className={className}
+                      style={toneStyle}
+                      onClick={() => setIsMoreOpen(false)}
+                    >
+                      <Icon size={16} />
+                      <span className="truncate">{item.label}</span>
+                    </Link>
+                  );
+                }
+
+                return (
+                  <button
+                    key={item.key}
+                    type="button"
+                    className={className}
+                    style={toneStyle}
+                    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(--window-border)] bg-[var(--dock-bg)] px-2 py-2 shadow-[var(--shadow-window)] backdrop-blur-2xl sm:gap-2">
-        {items.map(renderItem)}
-      </div>
-    </nav>
+
+      <nav aria-label="모바일 Dock" className="fixed inset-x-2 bottom-2 z-40 md:hidden">
+        <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]">
+          {renderMobileItem(baseItems[0])}
+          {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>
+    </>
  );
 }
--- a/src/components/layout/DesktopMenuBar.tsx
+++ b/src/components/layout/DesktopMenuBar.tsx
@@ -54,11 +54,11 @@ 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]',
      )}
    >
-      <div className="flex h-11 items-center justify-between gap-3 rounded-lg border border-[var(--window-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-control)] backdrop-blur-2xl">
+      <div className="flex h-11 items-center justify-between gap-3 rounded-lg border border-[var(--menubar-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-menubar)] backdrop-blur-[24px]">
        <div className="flex min-w-0 items-center gap-3">
          <Link href="/" className="shrink-0 text-sm font-bold text-[var(--color-text)]">
            WYPark
--- a/src/components/layout/DesktopShell.tsx
+++ b/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>
--- a/src/components/layout/Sidebar.tsx
+++ b/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 {
@@ -74,7 +74,7 @@ function CategoryItem({ category, depth, onNavigate, pathname }: CategoryItemPro
          'flex items-center justify-between rounded-lg px-3 py-2 text-sm transition-all',
          isActive
            ? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)] shadow-sm'
-            : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+            : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
        )}
        style={{ marginLeft: `${depth * 8}px` }}
      >
@@ -95,7 +95,7 @@ function CategoryItem({ category, depth, onNavigate, pathname }: CategoryItemPro
              event.stopPropagation();
              setIsExpanded((previous) => !previous);
            }}
-            className="ml-1 rounded-full p-1 transition-colors hover:bg-black/[0.06] dark:hover:bg-white/10"
+            className="ml-1 rounded-full p-1 transition-colors hover:bg-[var(--card-bg)]"
            aria-label={isChildrenVisible ? `${category.name} 접기` : `${category.name} 펼치기`}
          >
            <ChevronRight
@@ -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,37 +168,28 @@ function SidebarContent({

  return (
    <>
-      <button
-        type="button"
-        onClick={() => setIsOpen((previous) => !previous)}
-        className="fixed left-4 top-4 z-50 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-2 shadow-[var(--shadow-control)] backdrop-blur-xl transition-colors hover:bg-[var(--color-surface-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',
-          isOpen ? 'opacity-100' : 'pointer-events-none opacity-0',
+          'fixed inset-0 z-50 bg-black/35 backdrop-blur-sm transition-opacity md:hidden',
+          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(--window-border)] bg-[var(--sidebar-bg)] shadow-[var(--shadow-panel)] backdrop-blur-2xl 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')}>
          <button
            type="button"
            onClick={() => onDesktopCollapsedChange(!isDesktopCollapsed)}
-            className="absolute right-3 top-3 hidden h-8 w-8 items-center justify-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)] md:flex"
+            className="absolute right-3 top-3 hidden h-8 w-8 items-center justify-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)] md:flex"
            aria-label={isDesktopCollapsed ? '사이드바 펼치기' : '사이드바 접기'}
          >
            {isDesktopCollapsed ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />}
@@ -288,7 +279,7 @@ function SidebarContent({
                      'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all',
                      pathname === '/category/uncategorized'
                        ? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)]'
-                        : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                        : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
                    )}
                  >
                    <FileQuestion size={16} />
@@ -310,7 +301,7 @@ function SidebarContent({
                  'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-all',
                  pathname === '/play/chess'
                    ? 'bg-[var(--color-accent-soft)] font-semibold text-[var(--color-accent)]'
-                    : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                    : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
                )}
              >
                <Crown size={16} />
@@ -325,8 +316,8 @@ function SidebarContent({
              title="홈"
              aria-label="홈"
              className={clsx(
-                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]',
-                pathname === '/' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
+                pathname === '/' && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
              )}
            >
              <Home size={18} />
@@ -344,8 +335,8 @@ function SidebarContent({
                  title={category.name}
                  aria-label={category.name}
                  className={clsx(
-                    'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]',
-                    isActive && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+                    'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
+                    isActive && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
                  )}
                >
                  <Folder size={18} />
@@ -358,8 +349,8 @@ function SidebarContent({
              title="미분류"
              aria-label="미분류"
              className={clsx(
-                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]',
-                pathname === '/category/uncategorized' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
+                pathname === '/category/uncategorized' && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
              )}
            >
              <FileQuestion size={18} />
@@ -372,8 +363,8 @@ function SidebarContent({
              title="체스"
              aria-label="체스"
              className={clsx(
-                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--window-bg-strong)] hover:text-[var(--color-text)]',
-                pathname === '/play/chess' && 'bg-[var(--window-bg-strong)] text-[var(--color-accent)]',
+                'flex h-11 w-11 items-center justify-center rounded-xl border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text-muted)] shadow-[var(--shadow-control)] transition hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]',
+                pathname === '/play/chess' && 'bg-[var(--card-bg-strong)] text-[var(--color-accent)]',
              )}
            >
              <Crown size={18} />
@@ -402,7 +393,7 @@ export default function Sidebar(props: SidebarProps) {
      fallback={(
        <div
          className={clsx(
-            'h-screen border-r border-[var(--window-border)] bg-[var(--sidebar-bg)]',
+            'h-screen border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)]',
            props.isDesktopCollapsed ? 'w-20' : 'w-72',
          )}
        />
--- a/src/components/layout/TopHeader.tsx
+++ b/src/components/layout/TopHeader.tsx
@@ -49,7 +49,7 @@ export default function TopHeader() {
  };

  const quietActionClass =
-    'flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-colors hover:bg-[var(--color-surface-strong)] hover:text-[var(--color-text)]';
+    'flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)] hover:text-[var(--color-text)]';

  return (
    <div
@@ -65,7 +65,7 @@ export default function TopHeader() {
        ].join(' ')}
        aria-hidden={!isMenuOpen}
      >
-        <div className="flex min-w-max items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-surface)]/85 p-1.5 shadow-[var(--shadow-control)] backdrop-blur-2xl">
+        <div className="flex min-w-max items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--card-bg)] p-1.5 shadow-[var(--shadow-control)] backdrop-blur-[18px]">
          <ThemeToggle />

          {_hasHydrated && (
@@ -96,7 +96,7 @@ export default function TopHeader() {
                <button
                  type="button"
                  onClick={handleLogout}
-                  className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-sm font-medium text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-colors hover:bg-[var(--color-surface-strong)] hover:text-red-500"
+                  className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-medium text-[var(--color-text-muted)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)] hover:text-red-500"
                >
                  <LogOut size={16} />
                  <span className="hidden sm:inline">로그아웃</span>
@@ -116,7 +116,7 @@ export default function TopHeader() {
                <Link
                  href="/signup"
                  onClick={closeMenu}
-                  className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-all hover:bg-[var(--color-surface-strong)]"
+                  className="flex h-9 shrink-0 items-center gap-2 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] px-3 text-sm font-semibold text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-all hover:bg-[var(--card-bg-strong)]"
                >
                  <UserPlus size={16} />
                  <span className="hidden sm:inline">회원가입</span>
@@ -132,7 +132,7 @@ export default function TopHeader() {
        aria-label={isMenuOpen ? '상단 메뉴 닫기' : '상단 메뉴 열기'}
        aria-expanded={isMenuOpen}
        onClick={() => setIsMenuOpen((previous) => !previous)}
-        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-2xl transition-colors hover:bg-[var(--color-surface-strong)]"
+        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] text-[var(--color-text)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:bg-[var(--card-bg-strong)]"
      >
        {isMenuOpen ? <X size={18} /> : <Menu size={18} />}
      </button>
--- a/src/components/post/ArchiveExplorer.tsx
+++ b/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>
+  );
+}
--- a/src/components/post/MarkdownRenderer.tsx
+++ b/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}
--- a/src/components/post/PostDetailClient.tsx
+++ b/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>
@@ -78,7 +78,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
        <button
          type="button"
          onClick={() => router.push('/')}
-          className="rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-5 py-2.5 font-semibold text-[var(--color-text-muted)] transition-colors hover:bg-[var(--window-bg-strong)]"
+          className="rounded-lg border border-[var(--control-border)] bg-[var(--color-control)] px-5 py-2.5 font-semibold text-[var(--color-text-muted)] transition-colors hover:bg-[var(--card-bg-strong)]"
        >
          메인으로
        </button>
@@ -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(--color-line)] bg-[var(--color-control)] p-5 transition-colors hover:bg-[var(--window-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(--color-line)] bg-[var(--color-control)] p-5 transition-colors hover:bg-[var(--window-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>
--- a/src/components/post/PostListItem.tsx
+++ b/src/components/post/PostListItem.tsx
@@ -33,7 +33,7 @@ export default function PostListItem({ post, showViews = false }: PostListItemPr
      <div
        className={clsx(
          'flex items-center justify-between gap-4 rounded-lg px-3 py-4 transition duration-150',
-          isNotice ? 'hover:bg-red-500/[0.06]' : 'hover:bg-black/[0.03] dark:hover:bg-white/10',
+          isNotice ? 'hover:bg-red-500/[0.06]' : 'hover:bg-[var(--card-bg)]',
        )}
      >
        <div className="flex min-w-0 flex-1 items-center gap-3">
--- a/src/components/post/PostSearch.tsx
+++ b/src/components/post/PostSearch.tsx
@@ -48,7 +48,7 @@ export default function PostSearch({
          onChange={(e) => setKeyword(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
-          className="w-full rounded-full border border-[var(--color-line)] bg-[var(--color-control)] py-2.5 pl-10 pr-10 text-sm text-[var(--color-text)] shadow-[var(--shadow-control)] outline-none transition-all placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] focus:bg-[var(--color-surface-strong)]"
+          className="w-full rounded-full border border-[var(--control-border)] bg-[var(--color-control)] py-2.5 pl-10 pr-10 text-sm text-[var(--color-text)] shadow-[var(--shadow-control)] outline-none transition-all placeholder:text-[var(--color-text-subtle)] focus:border-[var(--color-accent)] focus:bg-[var(--card-bg-strong)]"
        />
        <Search 
          className="absolute left-3.5 top-1/2 -translate-y-1/2 cursor-pointer text-[var(--color-text-subtle)] transition-colors hover:text-[var(--color-accent)]" 
@@ -58,7 +58,7 @@ export default function PostSearch({
        {keyword && (
          <button
            onClick={handleClear}
-            className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-1 text-[var(--color-text-subtle)] transition-colors hover:bg-black/[0.06] hover:text-[var(--color-text)] dark:hover:bg-white/10"
+            className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-1 text-[var(--color-text-subtle)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]"
            aria-label="검색어 지우기"
          >
            <X size={14} />
--- a/src/components/theme/ThemeToggle.tsx
+++ b/src/components/theme/ThemeToggle.tsx
@@ -20,7 +20,7 @@ export default function ThemeToggle() {

  return (
    <div
-      className="inline-flex h-9 shrink-0 items-center rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-2xl"
+      className="inline-flex h-9 shrink-0 items-center rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-[18px]"
      role="group"
      aria-label="화면 테마"
    >
@@ -39,8 +39,8 @@ export default function ThemeToggle() {
            className={clsx(
              'inline-flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition duration-150 sm:w-8',
              isSelected
-                ? 'bg-[var(--window-bg-strong)] text-[var(--color-text)] shadow-sm'
-                : 'text-[var(--color-text-subtle)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                ? 'bg-[var(--card-bg-strong)] text-[var(--color-text)] shadow-sm'
+                : 'text-[var(--color-text-subtle)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
            )}
          >
            <Icon size={15} strokeWidth={2.2} />
--- a/src/components/ui/EmptyState.tsx
+++ b/src/components/ui/EmptyState.tsx
@@ -17,7 +17,7 @@ export default function EmptyState({
  return (
    <div
      className={clsx(
-        'flex min-h-36 flex-col items-center justify-center rounded-lg border border-dashed border-[var(--color-line)] bg-[var(--color-surface)] px-5 py-10 text-center',
+        'flex min-h-36 flex-col items-center justify-center rounded-lg border border-dashed border-[var(--card-border)] bg-[var(--card-bg)] px-5 py-10 text-center shadow-[var(--shadow-card)] backdrop-blur-[18px]',
        className,
      )}
    >
--- a/src/components/ui/SegmentedControl.tsx
+++ b/src/components/ui/SegmentedControl.tsx
@@ -7,7 +7,7 @@ export interface SegmentedControlOption<T extends string> {

 interface SegmentedControlProps<T extends string> {
  ariaLabel: string;
-  options: SegmentedControlOption<T>[];
+  options: readonly SegmentedControlOption<T>[];
  value: T;
  onChange: (value: T) => void;
  className?: string;
@@ -23,7 +23,7 @@ export default function SegmentedControl<T extends string>({
  return (
    <div
      className={clsx(
-        'inline-flex h-9 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-xl',
+        'inline-flex h-9 rounded-full border border-[var(--control-border)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-[18px]',
        className,
      )}
      role="group"
@@ -41,8 +41,8 @@ export default function SegmentedControl<T extends string>({
            className={clsx(
              'min-w-14 rounded-full px-3 text-sm font-semibold transition duration-150',
              isSelected
-                ? 'bg-[var(--color-surface-strong)] text-[var(--color-text)] shadow-sm'
-                : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
+                ? 'bg-[var(--card-bg-strong)] text-[var(--color-text)] shadow-sm'
+                : 'text-[var(--color-text-muted)] hover:bg-[var(--card-bg)] hover:text-[var(--color-text)]',
            )}
          >
            {option.label}
--- a/src/components/ui/Surface.tsx
+++ b/src/components/ui/Surface.tsx
@@ -19,11 +19,11 @@ export default function Surface({
  return (
    <Component
      className={clsx(
-        'rounded-lg border border-[var(--window-border)] backdrop-blur-2xl',
+        'rounded-lg border border-[var(--card-border)] backdrop-blur-[18px]',
        strong
-          ? 'bg-[var(--window-bg-strong)] shadow-[var(--shadow-card)]'
-          : 'bg-[var(--window-bg)] shadow-[var(--shadow-card)]',
-        interactive && 'transition duration-150 hover:-translate-y-0.5 hover:border-black/15 hover:bg-[var(--window-bg-strong)] hover:shadow-[var(--shadow-control)] dark:hover:border-white/20',
+          ? 'bg-[var(--card-bg-strong)] shadow-[var(--shadow-card)]'
+          : 'bg-[var(--card-bg)] shadow-[var(--shadow-card)]',
+        interactive && 'transition duration-150 hover:-translate-y-0.5 hover:border-[var(--card-border-hover)] hover:bg-[var(--card-bg-strong)] hover:shadow-[var(--shadow-control)]',
        className,
      )}
      {...props}
--- a/src/components/ui/WindowSurface.tsx
+++ b/src/components/ui/WindowSurface.tsx
@@ -28,13 +28,13 @@ export default function WindowSurface({
  return (
    <Component
      className={clsx(
-        'w-full overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-2xl',
+        'w-full overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-[28px]',
        className,
      )}
      {...props}
    >
      {hasTitlebar && (
-        <div className="flex min-h-11 items-center justify-between gap-4 border-b border-[var(--color-line)] bg-[var(--window-titlebar)] px-4 py-2.5">
+        <div className="flex min-h-11 items-center justify-between gap-4 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4 py-2.5">
          <div className="flex min-w-0 items-center gap-3">
            {showTrafficLights && (
              <div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">
--- a/src/lib/site.ts
+++ b/src/lib/site.ts
@@ -0,0 +1,33 @@
+export const SITE_URL = 'https://blog.wypark.me';
+export const SITE_NAME = 'WYPark Blog';
+export const DEFAULT_DESCRIPTION = '개발 블로그';
+
+const API_DATE_TIMEZONE = '+09:00';
+const TIMEZONE_SUFFIX_PATTERN = /(z|[+-]\d{2}:?\d{2})$/i;
+
+const trimSubMilliseconds = (value: string) => {
+  return value.replace(/(\.\d{3})\d+/, '$1');
+};
+
+const withApiTimezone = (value: string) => {
+  if (TIMEZONE_SUFFIX_PATTERN.test(value)) return value;
+  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return `${value}T00:00:00${API_DATE_TIMEZONE}`;
+
+  return `${value}${API_DATE_TIMEZONE}`;
+};
+
+export const getCanonicalUrl = (path = '/') => {
+  return new URL(path, SITE_URL).toString();
+};
+
+export const parseApiDate = (value?: string | null, fallback = new Date()) => {
+  if (!value) return fallback;
+
+  const date = new Date(withApiTimezone(trimSubMilliseconds(value.trim())));
+
+  if (Number.isNaN(date.getTime())) return fallback;
+
+  const now = new Date();
+  return date > now ? now : date;
+};
+
Author	SHA1	Message	Date
wypark	091f97968b	. All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m9s Details	2026-06-06 23:22:46 +09:00
박원엽	f1668f08f2	. All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m7s Details	2026-06-02 16:58:36 +09:00
박원엽	3fe1b0e6d5	. All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m9s Details	2026-06-02 16:40:39 +09:00
박원엽	49fc7b5331	. All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m10s Details	2026-06-02 15:34:30 +09:00
박원엽	d1a0340eb0	.	2026-06-02 15:26:54 +09:00
박원엽	895b19d284	. All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m7s Details	2026-06-02 15:07:00 +09:00
박원엽	a56e95e6de	. All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m10s Details	2026-06-02 14:54:18 +09:00
박원엽	0b6ce404e1	. All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m11s Details	2026-06-02 14:39:23 +09:00
박원엽	e3654a7bd5	. All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m15s Details	2026-06-02 14:09:38 +09:00
박원엽	f26713e0ea	. All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m9s Details	2026-05-29 14:51:46 +09:00
박원엽	b371200515	Polish macOS layer styling All checks were successful Deploy blog-frontend / build-and-deploy (push) Successful in 2m10s Details	2026-05-29 14:18:02 +09:00
박원엽	8e854a1afa	.	2026-05-29 12:56:23 +09:00