.

src/components/admin/AdminRouteShell.tsx

@@ -57,7 +57,10 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
 
   return (
     <div className="mx-auto max-w-7xl space-y-6 px-1 py-4 md:px-4">
-      <nav className="flex gap-2 overflow-x-auto border-b border-[var(--color-line)] pb-3" aria-label="관리자 메뉴">
+      <nav
+        className="flex gap-2 overflow-x-auto rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-2xl"
+        aria-label="관리자 메뉴"
+      >
         {navItems.map((item) => {
           const Icon = item.icon;
           const isActive = item.exact ? pathname === item.href : pathname === item.href || pathname.startsWith(`${item.href}/`);
@@ -67,10 +70,10 @@ export default function AdminRouteShell({ children }: { children: React.ReactNod
               key={item.href}
               href={item.href}
               className={clsx(
-                'inline-flex shrink-0 items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition',
+                'inline-flex h-9 shrink-0 items-center gap-2 rounded-full px-4 text-sm font-semibold transition',
                 isActive
-                  ? 'bg-[var(--color-text)] text-white shadow-sm dark:bg-white dark:text-black'
-                  : 'border border-[var(--color-line)] bg-white/70 text-[var(--color-text-muted)] hover:bg-white hover:text-[var(--color-text)] dark:bg-white/10',
+                  ? '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',
               )}
             >
               <Icon size={16} />

src/components/admin/dashboard/AdminDashboardTrafficChart.tsx

@@ -56,7 +56,7 @@ export default function AdminDashboardTrafficChart({
       </div>
 
       {points.length > 0 ? (
-        <div className="flex h-64 items-end gap-1.5 overflow-hidden rounded-lg border border-[var(--color-line)] bg-white/50 px-3 py-4 dark:bg-white/5">
+        <div className="flex h-64 items-end gap-1.5 overflow-hidden rounded-lg border border-[var(--color-line)] bg-[var(--color-control)] px-3 py-4">
           {points.map((point) => {
             const height = Math.max((point.views / maxViews) * 100, 4);