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-setup-drawer/ui/SpaceSetupDrawerWidget.tsx

@@ -1,3 +1,6 @@
+'use client';
+
+import type { FormEvent } from 'react';
 import type { RoomTheme } from '@/entities/room';
 import type { GoalChip, SoundPreset } from '@/entities/session';
 import { SpaceSelectCarousel } from '@/features/space-select';
@@ -43,6 +46,16 @@ export const SpaceSetupDrawerWidget = ({
   onSoundSelect,
   onStart,
 }: SpaceSetupDrawerWidgetProps) => {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!canStart) {
+      return;
+    }
+
+    onStart();
+  };
+
   return (
     <SpaceSideSheet
       open={open}
@@ -52,17 +65,17 @@ export const SpaceSetupDrawerWidget = ({
       dismissible={dismissible}
       widthClassName="w-[min(360px,94vw)]"
       footer={(
-        <div className="space-y-2">
+        <div className="space-y-1.5">
           {!canStart ? (
-            <p className="text-[11px] text-white/58">목표를 적으면 시작할 수 있어요.</p>
+            <p className="text-[10px] text-white/56">목표를 적으면 시작할 수 있어요.</p>
           ) : null}
           <Button
-            type="button"
+            type="submit"
+            form="space-setup-ritual-form"
             size="full"
-            onClick={onStart}
             disabled={!canStart}
             className={cn(
-              'h-11 rounded-xl !bg-sky-300/85 !text-slate-900 shadow-[0_8px_20px_rgba(125,211,252,0.24)] hover:!bg-sky-300 disabled:!bg-white/12 disabled:!text-white/42',
+              'h-10 rounded-xl !bg-sky-300/84 !text-slate-900 shadow-[0_6px_14px_rgba(125,211,252,0.2)] hover:!bg-sky-300 disabled:!bg-white/10 disabled:!text-white/42',
             )}
           >
             시작하기
@@ -70,11 +83,9 @@ export const SpaceSetupDrawerWidget = ({
         </div>
       )}
     >
-      <div className="space-y-5">
-        <section className="space-y-2.5">
-          <div className="space-y-0.5">
-            <p className="text-sm font-medium text-white/84">공간</p>
-          </div>
+      <form id="space-setup-ritual-form" className="space-y-4" onSubmit={handleSubmit}>
+        <section className="space-y-2">
+          <p className="text-[12px] font-medium text-white/84">공간</p>
           <SpaceSelectCarousel
             rooms={rooms}
             selectedRoomId={selectedRoomId}
@@ -82,11 +93,10 @@ export const SpaceSetupDrawerWidget = ({
           />
         </section>
 
-        <section className="space-y-2.5">
-          <div className="space-y-0.5">
-            <p className="text-sm font-medium text-white/84">이번 세션 한 줄(필수)</p>
-          </div>
+        <section className="space-y-2 border-t border-white/8 pt-3">
+          <p className="text-[12px] font-medium text-white/84">이번 세션 한 줄(필수)</p>
           <SessionGoalField
+            autoFocus={open}
             goalInput={goalInput}
             selectedGoalId={selectedGoalId}
             goalChips={goalChips}
@@ -95,13 +105,11 @@ export const SpaceSetupDrawerWidget = ({
           />
         </section>
 
-        <section className="space-y-2.5">
-          <div className="space-y-0.5">
-            <p className="text-sm font-medium text-white/84">분위기(선택)</p>
-          </div>
+        <section className="space-y-2 border-t border-white/8 pt-3">
+          <p className="text-[12px] font-medium text-white/84">분위기(선택)</p>
 
           <div className="flex flex-wrap gap-1.5">
-            {soundPresets.map((preset) => {
+            {soundPresets.slice(0, 6).map((preset) => {
               const selected = preset.id === selectedSoundPresetId;
 
               return (
@@ -110,10 +118,10 @@ export const SpaceSetupDrawerWidget = ({
                   type="button"
                   onClick={() => onSoundSelect(preset.id)}
                   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/36 bg-sky-200/14 text-white/92'
-                      : 'border-white/16 bg-white/6 text-white/72 hover:bg-white/11',
+                      ? 'border-sky-200/30 bg-sky-200/12 text-white/90'
+                      : 'border-white/12 bg-white/[0.03] text-white/66 hover:bg-white/8',
                   )}
                 >
                   {preset.label}
@@ -122,7 +130,7 @@ export const SpaceSetupDrawerWidget = ({
             })}
           </div>
         </section>
-      </div>
+      </form>
     </SpaceSideSheet>
   );
 };