style(space): 리추얼 진입 UX와 포커스 전환 흐름을 고급화

맥락:
- /space 진입 경험이 설정 패널처럼 보여 몰입형 라운지 톤이 약했습니다.
- 목표 입력 후 시작 전환 동선을 더 빠르고 일관되게 만들 필요가 있었습니다.

변경사항:
- 도크 아이콘을 이모지에서 단일 라인 SVG 세트로 통일해 시각 언어 일관성을 맞췄습니다.
- Setup Drawer 밀도를 낮추고(타이포/테두리/칩 크기) 3-step 리추얼 흐름을 더 간결하게 정리했습니다.
- 목표 입력 필드 자동 포커스를 추가해 진입 즉시 타이핑이 가능하도록 했습니다.
- 시작 버튼을 form submit으로 연결해 Enter 입력과 버튼 클릭이 동일하게 동작하도록 변경했습니다.
- SpaceSideSheet에 300ms 닫힘 전환(오버레이/시트 opacity+translate) 애니메이션을 적용했습니다.
- Focus 진입 토스트 카피를 목표 중심 문구로 바꾸고 Setup 선택지를 최소 개수로 제한했습니다.
- 배경에 미세 stage-pan/light-drift 키프레임을 추가해 정적인 평면감을 줄였습니다.

검증:
- npx tsc --noEmit
- npm run build

세션-상태: /space에서 목표 입력 후 10초 내 Focus 전환 가능한 리추얼 흐름이 정리되었습니다.
세션-다음: 실제 브라우저에서 애니메이션 강도와 드로어 밀도 체감 QA를 진행합니다.
세션-리스크: 저사양 환경에서 배경 미세 모션이 과하게 느껴질 수 있어 추후 reduce-motion 강화를 검토할 수 있습니다.

src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx

@@ -34,14 +34,13 @@ interface SpaceToolsDockWidgetProps {
 
 const TOOL_ITEMS: Array<{
   id: SpaceToolPanelId;
-  icon: string;
   label: string;
 }> = [
-  { id: 'sound', icon: '🎧', label: 'Sound' },
-  { id: 'notes', icon: '📝', label: 'Notes' },
-  { id: 'inbox', icon: '📨', label: 'Inbox' },
-  { id: 'stats', icon: '📊', label: 'Stats' },
-  { id: 'settings', icon: '⚙', label: 'Settings' },
+  { id: 'sound', label: 'Sound' },
+  { id: 'notes', label: 'Notes' },
+  { id: 'inbox', label: 'Inbox' },
+  { id: 'stats', label: 'Stats' },
+  { id: 'settings', label: 'Settings' },
 ];
 
 const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
@@ -52,6 +51,59 @@ const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
   settings: '설정',
 };
 
+const DockIcon = ({ id }: { id: SpaceToolPanelId }) => {
+  const commonProps = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    className: 'h-4 w-4',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round' as const,
+    strokeLinejoin: 'round' as const,
+  };
+
+  switch (id) {
+    case 'sound':
+      return (
+        <svg {...commonProps}>
+          <path d="M4 13V11a2 2 0 0 1 2-2h2l3-3h2v12h-2l-3-3H6a2 2 0 0 1-2-2Z" />
+          <path d="M16 9a4 4 0 0 1 0 6" />
+          <path d="M18 7a7 7 0 0 1 0 10" />
+        </svg>
+      );
+    case 'notes':
+      return (
+        <svg {...commonProps}>
+          <rect x="5" y="4" width="14" height="16" rx="2.5" />
+          <path d="M9 9h6M9 13h6M9 17h4" />
+        </svg>
+      );
+    case 'inbox':
+      return (
+        <svg {...commonProps}>
+          <path d="M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-9Z" />
+          <path d="M4 12h4l1.5 2h5L16 12h4" />
+        </svg>
+      );
+    case 'stats':
+      return (
+        <svg {...commonProps}>
+          <path d="M5 18V10M12 18V7M19 18v-5" />
+          <path d="M4 18h16" />
+        </svg>
+      );
+    case 'settings':
+      return (
+        <svg {...commonProps}>
+          <path d="M12 8.5A3.5 3.5 0 1 1 8.5 12 3.5 3.5 0 0 1 12 8.5Z" />
+          <path d="M12 3.5v2M12 18.5v2M20.5 12h-2M5.5 12h-2M18 6l-1.4 1.4M7.4 16.6 6 18M18 18l-1.4-1.4M7.4 7.4 6 6" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+};
+
 export const SpaceToolsDockWidget = ({
   isFocusMode,
   thoughts,
@@ -78,10 +130,10 @@ export const SpaceToolsDockWidget = ({
       <div className="fixed right-3.5 top-1/2 z-30 -translate-y-1/2">
         <div
           className={cn(
-            'flex w-11 flex-col items-center gap-1.5 rounded-[18px] border py-1.5 backdrop-blur-lg transition-opacity',
+            'flex w-10 flex-col items-center gap-1.5 rounded-[18px] border py-1.5 backdrop-blur-lg transition-opacity',
             isFocusMode && activePanel === null
-              ? 'border-white/12 bg-slate-950/22 opacity-40 hover:opacity-92'
-              : 'border-white/16 bg-slate-950/34 opacity-92',
+              ? 'border-white/12 bg-slate-950/18 opacity-32 hover:opacity-86'
+              : 'border-white/14 bg-slate-950/28 opacity-86',
           )}
         >
           {TOOL_ITEMS.map((item) => {
@@ -95,13 +147,13 @@ export const SpaceToolsDockWidget = ({
                 aria-label={item.label}
                 onClick={() => setActivePanel(item.id)}
                 className={cn(
-                  'relative inline-flex h-8 w-8 items-center justify-center rounded-[10px] border text-[15px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
+                  'relative inline-flex h-8 w-8 items-center justify-center rounded-[10px] border text-white/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70',
                   selected
-                    ? 'border-sky-200/58 bg-sky-200/18 shadow-[0_0_0_1px_rgba(186,230,253,0.28)]'
-                    : 'border-white/14 bg-white/7 hover:bg-white/13',
+                    ? 'border-sky-200/44 bg-sky-200/14 text-white shadow-[0_0_0_1px_rgba(186,230,253,0.2)]'
+                    : 'border-white/12 bg-white/6 hover:bg-white/10',
                 )}
               >
-                <span aria-hidden>{item.icon}</span>
+                <DockIcon id={item.id} />
                 {item.id === 'inbox' && thoughtCount > 0 ? (
                   <span className="absolute -right-1 -top-1 inline-flex min-w-[0.95rem] items-center justify-center rounded-full bg-sky-200/26 px-1 py-0.5 text-[8px] font-semibold text-sky-50">
                     {thoughtCount > 99 ? '99+' : `${thoughtCount}`}