.

src/components/admin/AdminRouteShell.tsx

@@ -58,7 +58,7 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
 
   return (
     <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">
+      <WindowSurface title="System Settings" subtitle="Admin Console" bodyClassName="p-2">
         <nav
           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="관리자 메뉴"

src/components/layout/DesktopDock.tsx

@@ -23,7 +23,6 @@ import ThemeToggle from '@/components/theme/ThemeToggle';
 import { useAuthStore } from '@/store/authStore';
 
 interface DesktopDockProps {
-  isSidebarCollapsed: boolean;
   onOpenMobileMenu: () => void;
 }
 
@@ -115,7 +114,7 @@ const dockToneStyles: Record<string, DockToneStyle> = {
 
 const getDockToneStyle = (key: string) => dockToneStyles[key] ?? dockToneStyles.default;
 
-export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: DesktopDockProps) {
+export default function DesktopDock({ onOpenMobileMenu }: DesktopDockProps) {
   const pathname = usePathname();
   const router = useRouter();
   const { isLoggedIn, role, logout, _hasHydrated } = useAuthStore();
@@ -493,9 +492,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
       <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)]',
+          'fixed bottom-1 left-1/2 z-50 hidden -translate-x-1/2 md:block',
         )}
       >
         <div
@@ -508,7 +505,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
             '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',
+              : 'h-14 w-16 px-0 pb-0 pt-0',
           )}
         >
           <button
@@ -518,7 +515,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
             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]',
+              'absolute bottom-0 left-1/2 z-10 flex h-10 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'
@@ -532,7 +529,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
           <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]',
+              'flex max-w-[calc(100vw-2rem)] origin-bottom items-end gap-2 overflow-visible rounded-xl 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'

src/components/layout/DesktopMenuBar.tsx

@@ -1,15 +1,14 @@
 'use client';
 
+import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
 import { clsx } from 'clsx';
+import { BatteryMedium, ChevronRight, Command, Monitor, Search, Wifi } from 'lucide-react';
 import { getProfile } from '@/api/profile';
 import ThemeToggle from '@/components/theme/ThemeToggle';
-
-interface DesktopMenuBarProps {
-  isSidebarCollapsed: boolean;
-}
+import { useAuthStore } from '@/store/authStore';
 
 const defaultProfile = {
   githubUrl: 'https://github.com',
@@ -24,11 +23,11 @@ const getCategoryTitle = (pathname: string) => {
 
 const getAppTitle = (pathname: string) => {
   if (pathname.startsWith('/admin/posts/new')) return 'Write';
-  if (pathname.startsWith('/admin/posts')) return 'Posts';
-  if (pathname.startsWith('/admin/comments')) return 'Comments';
-  if (pathname.startsWith('/admin/categories')) return 'Categories';
-  if (pathname.startsWith('/admin/profile')) return 'Profile';
-  if (pathname.startsWith('/admin')) return 'Dashboard';
+  if (pathname.startsWith('/admin/posts')) return 'Post Manager';
+  if (pathname.startsWith('/admin/comments')) return 'Comment Center';
+  if (pathname.startsWith('/admin/categories')) return 'Category Studio';
+  if (pathname.startsWith('/admin/profile')) return 'Profile Panel';
+  if (pathname.startsWith('/admin')) return 'Admin Console';
   if (pathname.startsWith('/archive')) return 'Archive';
   if (pathname.startsWith('/category')) return getCategoryTitle(pathname);
   if (pathname.startsWith('/posts')) return 'Reader';
@@ -38,8 +37,22 @@ const getAppTitle = (pathname: string) => {
   return '홈';
 };
 
-export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarProps) {
+const formatMenuTime = (date: Date | null) => {
+  if (!date) return '';
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    month: 'short',
+    day: 'numeric',
+    weekday: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+};
+
+export default function DesktopMenuBar() {
   const pathname = usePathname();
+  const { isLoggedIn, role, _hasHydrated } = useAuthStore();
+  const [now, setNow] = useState<Date | null>(null);
 
   const { data: profile } = useQuery({
     queryKey: ['profile'],
@@ -47,37 +60,86 @@ export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarPro
     retry: 0,
   });
 
+  useEffect(() => {
+    const updateTime = () => setNow(new Date());
+    const frameId = window.requestAnimationFrame(updateTime);
+    const timerId = window.setInterval(updateTime, 60_000);
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      window.clearInterval(timerId);
+    };
+  }, []);
+
   const githubUrl = profile?.githubUrl || defaultProfile.githubUrl;
   const email = profile?.email || defaultProfile.email;
-  const menuLinkClass = 'text-xs font-semibold text-[var(--color-text-subtle)] transition hover:text-[var(--color-text)]';
+  const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
+  const menuItems = useMemo(() => {
+    const items = [
+      { href: '/', label: '홈' },
+      { href: '/archive', label: '아카이브' },
+      { href: '/play/chess', label: '체스' },
+    ];
+
+    if (isAdmin) {
+      items.push({ href: '/admin', label: '관리자' }, { href: '/admin/posts/new', label: '새 글' });
+    }
+
+    return items;
+  }, [isAdmin]);
+  const menuLinkClass = 'hidden rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] lg:inline-flex';
+  const systemIconClass = 'text-[var(--color-text-muted)]';
 
   return (
     <div
-      className={clsx(
-        'fixed right-6 top-3 z-40 hidden transition-[left] duration-300 ease-out md:block',
-        isSidebarCollapsed ? 'md:left-24' : 'md:left-[19rem]',
-      )}
+      className="fixed inset-x-0 top-0 z-[70] hidden h-10 border-b border-[var(--menubar-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-menubar)] backdrop-blur-[28px] md:block"
+      role="menubar"
+      aria-label="시스템 메뉴 막대"
     >
-      <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)]">
+      <div className="flex h-full min-w-0 items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-1">
+          <Link
+            href="/"
+            className="mr-1 inline-flex h-7 shrink-0 items-center gap-1.5 rounded px-2 text-sm font-bold text-[var(--color-text)] transition hover:bg-[var(--card-bg)]"
+          >
+            <Command size={15} strokeWidth={2.4} />
             WYPark
           </Link>
-          <span className="hidden h-4 w-px bg-[var(--color-line)] sm:block" />
-          <span className="truncate text-sm font-semibold text-[var(--color-text-muted)]">
-            {getAppTitle(pathname)}
-          </span>
-          <div className="hidden items-center gap-3 md:flex">
-            <a href={githubUrl} target="_blank" rel="noreferrer" className={menuLinkClass}>
-              GitHub
-            </a>
-            <a href={`mailto:${email}`} className={menuLinkClass}>
-              Email
-            </a>
+
+          <div className="hidden min-w-0 items-center gap-1 sm:flex">
+            {menuItems.map((item) => (
+              <Link key={item.href} href={item.href} className={menuLinkClass}>
+                {item.label}
+              </Link>
+            ))}
+          </div>
+
+          <span className="mx-1 hidden h-4 w-px bg-[var(--color-line)] xl:block" />
+          <div className="hidden min-w-0 items-center gap-1.5 rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-subtle)] xl:flex">
+            <Monitor size={14} />
+            <span className="truncate text-[var(--color-text-muted)]">{getAppTitle(pathname)}</span>
+            <ChevronRight size={13} />
+            <span className="truncate">{profile?.name || 'WYPark'}</span>
           </div>
         </div>
 
-        <ThemeToggle />
+        <div className="flex shrink-0 items-center gap-2">
+          <a href={githubUrl} target="_blank" rel="noreferrer" className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
+            GitHub
+          </a>
+          <a href={`mailto:${email}`} className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
+            Email
+          </a>
+          <Search size={15} className={systemIconClass} />
+          <Wifi size={15} className={systemIconClass} />
+          <BatteryMedium size={17} className={systemIconClass} />
+          <span className="hidden min-w-[8.5rem] text-right text-xs font-semibold tabular-nums text-[var(--color-text-muted)] lg:block">
+            {formatMenuTime(now)}
+          </span>
+          <div className="scale-[0.88]">
+            <ThemeToggle />
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/layout/DesktopShell.tsx

@@ -2,11 +2,110 @@
 
 import { useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { clsx } from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { Archive, Crown, Home, PenLine, Settings } from 'lucide-react';
 import DesktopDock from '@/components/layout/DesktopDock';
 import DesktopMenuBar from '@/components/layout/DesktopMenuBar';
 import Sidebar from '@/components/layout/Sidebar';
+import { useAuthStore } from '@/store/authStore';
+
+type DesktopShortcut = {
+  href: string;
+  label: string;
+  caption: string;
+  icon: LucideIcon;
+  tone: string;
+};
+
+const shortcutToneClass: Record<string, string> = {
+  blue: 'from-sky-300/70 to-blue-500/80 text-white',
+  violet: 'from-violet-300/70 to-indigo-500/80 text-white',
+  amber: 'from-amber-200/80 to-orange-400/80 text-white',
+  slate: 'from-slate-200/75 to-slate-500/75 text-white',
+  rose: 'from-rose-200/80 to-rose-500/75 text-white',
+};
+
+function DesktopShortcuts() {
+  const { isLoggedIn, role, _hasHydrated } = useAuthStore();
+  const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
+
+  const shortcuts: DesktopShortcut[] = [
+    {
+      href: '/',
+      label: 'WYPark',
+      caption: 'Home',
+      icon: Home,
+      tone: 'blue',
+    },
+    {
+      href: '/archive',
+      label: 'Archive',
+      caption: 'Posts',
+      icon: Archive,
+      tone: 'violet',
+    },
+    {
+      href: '/play/chess',
+      label: 'Chess',
+      caption: 'Puzzle',
+      icon: Crown,
+      tone: 'amber',
+    },
+  ];
+
+  if (isAdmin) {
+    shortcuts.push(
+      {
+        href: '/admin',
+        label: 'Console',
+        caption: 'Admin',
+        icon: Settings,
+        tone: 'slate',
+      },
+      {
+        href: '/admin/posts/new',
+        label: 'Write',
+        caption: 'Editor',
+        icon: PenLine,
+        tone: 'rose',
+      },
+    );
+  }
+
+  return (
+    <div className="pointer-events-none fixed right-5 top-16 z-30 hidden w-24 flex-col gap-4 2xl:flex">
+      {shortcuts.map((shortcut) => {
+        const Icon = shortcut.icon;
+        const toneClass = shortcutToneClass[shortcut.tone] ?? shortcutToneClass.blue;
+
+        return (
+          <Link
+            key={shortcut.href}
+            href={shortcut.href}
+            className="pointer-events-auto group flex min-w-0 flex-col items-center gap-1.5 rounded-lg px-1.5 py-2 text-center text-[var(--color-text)] outline-none transition hover:bg-[var(--desktop-icon-bg-hover)] focus-visible:bg-[var(--desktop-icon-bg-hover)]"
+            title={shortcut.label}
+          >
+            <span
+              className={clsx(
+                'flex h-12 w-12 items-center justify-center rounded-xl border border-[var(--desktop-icon-border)] bg-gradient-to-br shadow-[var(--shadow-control)] ring-1 ring-white/20 transition group-hover:-translate-y-0.5',
+                toneClass,
+              )}
+            >
+              <Icon size={23} strokeWidth={2.15} />
+            </span>
+            <span className="w-full truncate rounded bg-black/10 px-1 text-[11px] font-semibold leading-4 text-white shadow-sm backdrop-blur-sm dark:bg-black/30">
+              {shortcut.label}
+            </span>
+            <span className="sr-only">{shortcut.caption}</span>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
 
 export default function DesktopShell({ children }: { children: ReactNode }) {
   const pathname = usePathname();
@@ -41,30 +140,30 @@ export default function DesktopShell({ children }: { children: ReactNode }) {
   const isChessRoute = pathname.startsWith('/play/chess');
 
   return (
-    <div className="min-h-screen overflow-x-clip">
+    <div className="desktop-shell min-h-screen overflow-x-clip">
       <Sidebar
         isDesktopCollapsed={isSidebarCollapsed}
         isMobileOpen={isMobileSidebarOpen}
         onDesktopCollapsedChange={handleSidebarCollapsedChange}
         onMobileOpenChange={setIsMobileSidebarOpen}
       />
-      <DesktopMenuBar isSidebarCollapsed={isSidebarCollapsed} />
+      <DesktopMenuBar />
+      <DesktopShortcuts />
       <DesktopDock
-        isSidebarCollapsed={isSidebarCollapsed}
         onOpenMobileMenu={() => setIsMobileSidebarOpen(true)}
       />
 
       <main
         className={clsx(
-          'relative min-w-0 max-w-full flex-1 overflow-x-clip transition-[margin,width] duration-300 ease-out',
+          'relative z-10 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)]',
+            ? 'md:ml-[7rem] md:w-[calc(100%-7rem)]'
+            : 'md:ml-[20rem] md:w-[calc(100%-20rem)]',
         )}
       >
         <div
           className={clsx(
-            'mx-auto min-w-0 max-w-full px-3 pt-16 md:px-6 md:pt-24 lg:px-8',
+            'mx-auto min-w-0 max-w-full px-3 pt-14 md:px-6 md:pt-16 lg:px-8',
             isChessRoute ? 'pb-44 md:pb-40' : isReaderRoute ? 'pb-44 md:pb-36' : 'pb-36 md:pb-32',
           )}
         >

src/components/layout/Sidebar.tsx

@@ -180,26 +180,39 @@ function SidebarContent({
 
       <aside
         className={clsx(
-          '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',
+          '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:left-3 md:top-12 md:z-40 md:h-[calc(100vh-8rem)] md:max-w-none md:translate-x-0 md:rounded-lg md:border',
           isDesktopCollapsed ? 'md:w-20' : 'md:w-72',
           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')}>
+        <div className="flex h-11 shrink-0 items-center justify-between gap-3 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4">
+          <div className={clsx('flex min-w-0 items-center gap-3', isDesktopCollapsed && 'md:hidden')}>
+            <div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">
+              <span className="h-3 w-3 rounded-full border border-black/10 bg-[#ff5f57]" />
+              <span className="h-3 w-3 rounded-full border border-black/10 bg-[#ffbd2e]" />
+              <span className="h-3 w-3 rounded-full border border-black/10 bg-[#28c840]" />
+            </div>
+            <span className={clsx('truncate text-sm font-semibold text-[var(--color-text)]', isDesktopCollapsed && 'md:hidden')}>
+              Finder
+            </span>
+          </div>
+
           <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(--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"
+            className="hidden h-7 w-7 shrink-0 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} />}
           </button>
+        </div>
 
+        <div className={clsx('relative shrink-0 text-center', isDesktopCollapsed ? 'px-6 pb-5 pt-6 md:px-3 md:pb-4 md:pt-4' : 'px-6 pb-5 pt-6')}>
           <Link href="/" onClick={closeSidebar} className="block transition-opacity hover:opacity-85">
             <div
               className={clsx(
                 'relative mx-auto overflow-hidden rounded-2xl bg-black/[0.04] shadow-inner ring-1 ring-[var(--color-line)] transition-all dark:bg-white/10',
-                isDesktopCollapsed ? 'mb-4 h-20 w-20 md:mb-0 md:mt-8 md:h-12 md:w-12' : 'mb-4 h-20 w-20',
+                isDesktopCollapsed ? 'mb-4 h-20 w-20 md:mb-0 md:h-12 md:w-12' : 'mb-4 h-20 w-20',
               )}
             >
               {isProfileLoading ? (
@@ -247,7 +260,7 @@ function SidebarContent({
               <div className="mb-4 border-t border-[var(--color-line)]" />
 
               <div className="mb-3 flex h-8 items-center justify-between px-3">
-                <p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">카테고리</p>
+                <p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">폴더</p>
               </div>
             </div>
 
@@ -291,7 +304,7 @@ function SidebarContent({
 
             <div className="-mx-2 mt-3 shrink-0 border-t border-[var(--color-line)] px-2 pt-3">
               <div className="mb-2 flex h-8 items-center px-3">
-                <p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">앱</p>
+                <p className="text-xs font-semibold uppercase tracking-normal text-[var(--color-text-subtle)]">응용 프로그램</p>
               </div>
 
               <Link

src/components/post/ArchiveExplorer.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { clsx } from 'clsx';
-import { Calendar, ChevronRight, Rows3, SlidersHorizontal } from 'lucide-react';
+import { Calendar, ChevronRight, FileText, Rows3, SlidersHorizontal } from 'lucide-react';
 import EmptyState from '@/components/ui/EmptyState';
 import StatusBadge from '@/components/ui/StatusBadge';
 import Surface from '@/components/ui/Surface';
@@ -218,6 +218,9 @@ export default function ArchiveExplorer({ posts }: ArchiveExplorerProps) {
                               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')}>
+                                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]">
+                                  <FileText size={17} />
+                                </span>
                                 <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}

src/components/post/PostCard.tsx

@@ -1,11 +1,12 @@
 import Link from 'next/link';
+import { FileText } from 'lucide-react';
 import StatusBadge from '@/components/ui/StatusBadge';
 import Surface from '@/components/ui/Surface';
 import { Post } from '@/types';
 
 const isNoticePost = (post: Post) => {
   const categoryName = post.categoryName || '';
-  return categoryName === '공지' || categoryName === '怨듭?' || categoryName.toLowerCase() === 'notice';
+  return categoryName === '공지' || categoryName.toLowerCase() === 'notice';
 };
 
 const formatDate = (value: string) => {
@@ -44,9 +45,14 @@ export default function PostCard({ post }: { post: Post }) {
         className="flex h-full min-h-52 flex-col p-5 shadow-none"
       >
         <div className="mb-4 flex items-center justify-between gap-3">
-          <StatusBadge tone={isNotice ? 'danger' : 'neutral'} className="shrink-0">
-            {post.categoryName || '미분류'}
-          </StatusBadge>
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)]">
+              <FileText size={17} />
+            </span>
+            <StatusBadge tone={isNotice ? 'danger' : 'neutral'} className="shrink-0">
+              {post.categoryName || '미분류'}
+            </StatusBadge>
+          </div>
           <time className="text-xs font-medium text-[var(--color-text-subtle)]">
             {formatDate(post.createdAt)}
           </time>

src/components/post/PostDetailClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import { AlertCircle, ArrowLeft, Calendar, ChevronLeft, ChevronRight, Loader2, User } from 'lucide-react';
+import { AlertCircle, ArrowLeft, Calendar, ChevronLeft, ChevronRight, Loader2, Monitor, User } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -91,14 +91,26 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
 
   return (
     <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)]">
+      <Link href="/" className="mb-5 inline-flex items-center gap-1 rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] px-3 py-2 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-accent)]">
         <ArrowLeft size={18} />
-        <span>목록으로</span>
+        <span>Finder로</span>
       </Link>
 
       <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">
-          <Surface as="article" strong className="mx-auto w-full max-w-[820px] px-5 py-7 md:px-10 md:py-10">
+          <WindowSurface
+            as="article"
+            title="Reader"
+            subtitle={post.categoryName || '미분류'}
+            className="mx-auto w-full max-w-[820px]"
+            bodyClassName="px-5 py-7 md:px-10 md:py-10"
+            controls={(
+              <div className="hidden items-center gap-1.5 text-xs font-semibold text-[var(--color-text-subtle)] sm:flex">
+                <Monitor size={14} />
+                <span className="max-w-44 truncate">{post.slug}</span>
+              </div>
+            )}
+          >
             <header className="mb-9 border-b border-[var(--color-line)] pb-7">
               <StatusBadge tone="neutral" className="mb-5">
                 {post.categoryName || '미분류'}
@@ -134,7 +146,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
             <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>
-          </Surface>
+          </WindowSurface>
 
           <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">
@@ -184,7 +196,7 @@ export default function PostDetailClient({ slug, initialPost }: PostDetailClient
         </main>
 
         <aside className="hidden w-[220px] shrink-0 xl:block">
-          <WindowSurface title="목차" showTrafficLights={false} bodyClassName="p-4" className="sticky top-24 shadow-[var(--shadow-card)]">
+          <WindowSurface title="목차" showTrafficLights={false} bodyClassName="p-4" className="sticky top-16 shadow-[var(--shadow-card)]">
             <TOC content={post.content || ''} />
           </WindowSurface>
         </aside>

src/components/post/PostListItem.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { ChevronRight, Eye } from 'lucide-react';
+import { ChevronRight, Eye, FileText } from 'lucide-react';
 import { clsx } from 'clsx';
 import StatusBadge from '@/components/ui/StatusBadge';
 import { Post } from '@/types';
@@ -11,7 +11,7 @@ interface PostListItemProps {
 
 const isNoticePost = (post: Post) => {
   const categoryName = post.categoryName || '';
-  return categoryName === '공지' || categoryName === '怨듭?' || categoryName.toLowerCase() === 'notice';
+  return categoryName === '공지' || categoryName.toLowerCase() === 'notice';
 };
 
 const formatDate = (value: string) => {
@@ -37,6 +37,9 @@ export default function PostListItem({ post, showViews = false }: PostListItemPr
         )}
       >
         <div className="flex min-w-0 flex-1 items-center gap-3">
+          <span className="hidden h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-[var(--card-border)] bg-[var(--card-bg-strong)] text-[var(--color-accent)] shadow-[var(--shadow-control)] sm:flex">
+            <FileText size={17} />
+          </span>
           <StatusBadge tone={isNotice ? 'danger' : 'neutral'} className="hidden shrink-0 sm:inline-flex">
             {post.categoryName || '미분류'}
           </StatusBadge>

src/components/ui/Surface.tsx

@@ -19,7 +19,7 @@ export default function Surface({
   return (
     <Component
       className={clsx(
-        'rounded-lg border border-[var(--card-border)] backdrop-blur-[18px]',
+        'rounded-lg border border-[var(--card-border)] backdrop-blur-[20px]',
         strong
           ? 'bg-[var(--card-bg-strong)] shadow-[var(--shadow-card)]'
           : 'bg-[var(--card-bg)] shadow-[var(--shadow-card)]',

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-[28px]',
+        'window-surface w-full overflow-hidden rounded-lg border border-[var(--window-border)] bg-[var(--window-bg)] shadow-[var(--shadow-window)] backdrop-blur-[30px]',
         className,
       )}
       {...props}
     >
       {hasTitlebar && (
-        <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-h-11 items-center justify-between gap-4 border-b border-[var(--window-titlebar-border)] bg-[var(--window-titlebar)] px-4 py-2.5 backdrop-blur-[28px]">
           <div className="flex min-w-0 items-center gap-3">
             {showTrafficLights && (
               <div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">