style(space): 헤더 크롬 최소화와 HUD 하단 밀착 조정

맥락:

- /space 배경 몰입을 방해하는 상단 프레임 느낌과 하단 HUD의 떠있는 간격을 줄이기 위해

변경사항:

- 상단 헤더의 border/프레임 느낌을 제거하고 오버레이 톤으로 축소

- 헤더 아이콘/패딩을 축소해 배경 노출 영역을 확대

- 타이머 HUD 하단 위치를 safe-area 기반 최소 여백으로 조정

검증:

- npx tsc --noEmit

세션-상태: /space 헤더가 박스형 프레임 없이 가벼운 오버레이로 표시됨

세션-다음: 몰입 모드에서 상단 액션을 나가기 버튼으로 전환

세션-리스크: 기기별 safe-area 계산 차이로 HUD 체감 위치가 다를 수 있음

src/widgets/space-chrome/ui/SpaceChromeWidget.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { cn } from '@/shared/lib/cn';
 
 interface SpaceChromeWidgetProps {
   roomName: string;
@@ -13,23 +12,22 @@ export const SpaceChromeWidget = ({
   isImmersionMode,
 }: SpaceChromeWidgetProps) => {
   return (
-    <div className="px-4 pt-3 sm:px-6">
+    <div className="px-4 pt-2 sm:px-6">
-      <header className="flex items-center justify-between rounded-xl border border-white/12 bg-slate-950/35 px-4 py-3 backdrop-blur-lg">
+      <header className="flex items-center justify-between px-1 py-1">
         <div className="flex items-center gap-2">
-          <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-semibold">
+          <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/12 text-[11px] font-semibold text-white/90">
             V
           </span>
-          <p className="text-sm font-semibold tracking-tight">VibeRoom</p>
+          <p className="text-sm font-medium tracking-tight text-white/90">VibeRoom</p>
         </div>
 
         <Link
           href="/app"
-          className={cn(
+          className={
-            'rounded-lg border border-white/30 text-white/85 transition hover:bg-white/10',
             isImmersionMode
-              ? 'inline-flex h-7 w-7 items-center justify-center text-[11px]'
+              ? 'inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/8 text-[11px] text-white/74 transition hover:bg-white/14 hover:text-white'
-              : 'px-3 py-1.5 text-xs',
+              : 'rounded-lg bg-white/8 px-2.5 py-1.5 text-xs text-white/82 transition hover:bg-white/14 hover:text-white'
-          )}
+          }
         >
           {isImmersionMode ? (
             <>
@@ -43,7 +41,7 @@ export const SpaceChromeWidget = ({
       </header>
 
       {!isImmersionMode ? (
-        <div className="mx-auto mt-6 w-full max-w-5xl">
+        <div className="mx-auto mt-4 w-full max-w-5xl">
           <div className="space-y-1">
             <p className="text-xs uppercase tracking-[0.14em] text-white/65">Current Room</p>
             <p className="text-lg font-semibold text-white">{roomName}</p>

src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx

@@ -21,7 +21,13 @@ export const SpaceTimerHudWidget = ({
   isImmersionMode = false,
 }: SpaceTimerHudWidgetProps) => {
   return (
-    <div className={cn('pointer-events-none fixed inset-x-0 bottom-[4.7rem] z-20 px-4 pr-16 sm:px-6', className)}>
+    <div
+      className={cn(
+        'pointer-events-none fixed inset-x-0 z-20 px-4 pr-16 sm:px-6',
+        className,
+      )}
+      style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 0.35rem)' }}
+    >
       <div className="mx-auto w-full max-w-xl pointer-events-auto">
         <section
           className={cn(