Migrate saju service UI

src/pages/saju/_shell/DesktopHeader.jsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { NAV_ITEMS } from './BottomNav';
+import BrandMark from './BrandMark';
+import { IconChevron } from './Icons';
+
+const NAV_ITEMS = [
+  { id: 'today', to: '/saju/today', label: '오늘의 운세' },
+  { id: 'match', to: '/saju/compatibility', label: '궁합보기' },
+  { id: 'saju', to: '/saju/result', label: '사주풀이' },
+  { id: 'me', to: '/saju/me', label: '상담안내' },
+];
 
 function pathToCurrent(pathname) {
-  if (pathname === '/saju' || pathname === '/saju/') return 'home';
   if (pathname.startsWith('/saju/today')) return 'today';
   if (pathname.startsWith('/saju/compatibility')) return 'match';
   if (pathname.startsWith('/saju/result')) return 'saju';
@@ -18,40 +25,70 @@ export default function DesktopHeader() {
 
   return (
     <header style={{
-      position: 'sticky', top: 0, zIndex: 30, height: 64,
-      background: '#FBF7EF', borderBottom: '1px solid rgba(31,42,68,0.10)',
-      display: 'flex', alignItems: 'center', padding: '0 32px',
-      backdropFilter: 'blur(14px)',
+      position: 'sticky', top: 10, zIndex: 40,
+      width: 'calc(100% - 72px)', maxWidth: 1368, height: 68,
+      margin: '10px auto 0',
+      background: 'rgba(251,247,239,0.88)',
+      border: '1px solid rgba(31,42,68,0.13)',
+      borderRadius: 999,
+      display: 'flex', alignItems: 'center', padding: '0 22px 0 28px',
+      backdropFilter: 'blur(18px) saturate(150%)',
+      WebkitBackdropFilter: 'blur(18px) saturate(150%)',
+      boxShadow: '0 8px 24px rgba(31,42,68,0.06), inset 0 1px 0 rgba(255,255,255,0.75)',
     }}>
       <button onClick={() => navigate('/saju')} style={{
-        background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', gap: 10,
+        background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', gap: 12,
+        padding: 0, minWidth: 220,
       }}>
+        <BrandMark size={40} />
         <span className="font-title" style={{
-          fontSize: 26, color: '#D4AF37', lineHeight: 1,
-        }}>壽</span>
-        <span className="font-title" style={{
-          fontSize: 18, color: '#1F2A44', letterSpacing: '-0.02em',
+          fontSize: 26, color: '#1F2A44', letterSpacing: '-0.03em', lineHeight: 1,
         }}>호령사주</span>
       </button>
-      <nav aria-label="사주 메뉴" style={{ marginLeft: 40, display: 'flex', gap: 8 }}>
+
+      <nav aria-label="사주 메뉴" style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        gap: 24, flex: 1,
+      }}>
         {NAV_ITEMS.map((item) => {
           const active = item.id === current;
           return (
             <button key={item.id} onClick={() => navigate(item.to)}
               aria-current={active ? 'page' : undefined}
               style={{
-                background: active ? 'rgba(31,42,68,0.06)' : 'transparent', border: 'none',
-                padding: '8px 14px', borderRadius: 8,
-                color: active ? item.accent : '#6B6B6B',
-                fontSize: 13, fontWeight: active ? 700 : 500, letterSpacing: '-0.02em',
-                display: 'flex', alignItems: 'center', gap: 6,
+                background: active ? 'rgba(31,42,68,0.07)' : 'transparent',
+                border: 'none',
+                borderRadius: active ? 18 : 0,
+                padding: active ? '11px 24px' : '11px 10px',
+                color: active ? '#1F2A44' : '#202638',
+                fontSize: 16,
+                fontWeight: active ? 800 : 700,
+                letterSpacing: '-0.03em',
               }}>
-              <item.Icon size={16} stroke={active ? item.accent : '#9A968D'} strokeWidth={active ? 1.8 : 1.5} />
               {item.label}
             </button>
           );
         })}
       </nav>
+
+      <button onClick={() => navigate('/saju')} style={{
+        padding: '13px 22px 13px 26px',
+        borderRadius: 999,
+        background: '#1F2A44',
+        color: '#F7F2E8',
+        border: '1px solid rgba(212,175,55,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        fontSize: 14,
+        fontWeight: 800,
+        letterSpacing: '-0.02em',
+        boxShadow: '0 6px 18px rgba(31,42,68,0.18), inset 0 1px 0 rgba(212,175,55,0.3)',
+        whiteSpace: 'nowrap',
+      }}>
+        사주풀이 시작하기
+        <IconChevron dir="right" size={14} color="#E8C76B" />
+      </button>
     </header>
   );
 }