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/features/session-goal/ui/SessionGoalField.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import type { GoalChip } from '@/entities/session';
 import { cn } from '@/shared/lib/cn';
 
 interface SessionGoalFieldProps {
+  autoFocus?: boolean;
   goalInput: string;
   selectedGoalId: string | null;
   goalChips: GoalChip[];
@@ -13,40 +14,49 @@ interface SessionGoalFieldProps {
 }
 
 export const SessionGoalField = ({
+  autoFocus = false,
   goalInput,
   selectedGoalId,
   goalChips,
   onGoalChange,
   onGoalChipSelect,
 }: SessionGoalFieldProps) => {
-  const [expanded, setExpanded] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const visibleChips = useMemo(() => {
-    if (expanded) {
-      return goalChips;
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
     }
 
-    return goalChips.slice(0, 4);
-  }, [expanded, goalChips]);
+    const raf = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(raf);
+    };
+  }, [autoFocus]);
 
   return (
-    <div className="space-y-2.5">
-      <div className="space-y-1.5">
-        <label htmlFor="space-goal-input" className="text-xs font-medium text-white/86">
+    <div className="space-y-2">
+      <div className="space-y-1">
+        <label htmlFor="space-goal-input" className="text-[12px] font-medium text-white/88">
           이번 25분, 딱 한 가지 <span className="text-sky-100">(필수)</span>
         </label>
         <input
+          ref={inputRef}
           id="space-goal-input"
+          autoFocus={autoFocus}
           value={goalInput}
           onChange={(event) => onGoalChange(event.target.value)}
           placeholder="예: 계약서 1페이지 정리"
-          className="h-11 w-full rounded-xl border border-white/18 bg-slate-950/48 px-3 text-sm text-white placeholder:text-white/42 focus:border-sky-200/58 focus:outline-none"
+          className="h-10 w-full rounded-xl border border-white/14 bg-slate-950/42 px-3 text-sm text-white placeholder:text-white/42 focus:border-sky-200/46 focus:outline-none"
         />
         <p className="text-[11px] text-white/54">크게 말고, 바로 다음 한 조각.</p>
       </div>
 
       <div className="flex flex-wrap gap-1.5">
-        {visibleChips.map((chip) => {
+        {goalChips.slice(0, 4).map((chip) => {
           const selected = chip.id === selectedGoalId;
 
           return (
@@ -55,26 +65,16 @@ export const SessionGoalField = ({
               type="button"
               onClick={() => onGoalChipSelect(chip)}
               className={cn(
-                'rounded-full border px-2.5 py-1 text-[11px] transition-colors',
+                'rounded-full border px-2.5 py-0.5 text-[10px] transition-colors',
                 selected
-                  ? 'border-sky-200/42 bg-sky-200/16 text-white/92'
-                  : 'border-white/16 bg-white/6 text-white/72 hover:bg-white/11',
+                  ? 'border-sky-200/34 bg-sky-200/12 text-white/90'
+                  : 'border-white/12 bg-white/[0.035] text-white/66 hover:bg-white/9',
               )}
             >
               {chip.label}
             </button>
           );
         })}
-
-        {goalChips.length > 4 ? (
-          <button
-            type="button"
-            onClick={() => setExpanded((current) => !current)}
-            className="rounded-full border border-white/14 bg-white/4 px-2.5 py-1 text-[11px] text-white/62 transition-colors hover:bg-white/10 hover:text-white/82"
-          >
-            {expanded ? '접기' : '+ 더보기'}
-          </button>
-        ) : null}
       </div>
     </div>
   );