From e361755a911454e8097aaafeb78711cfc9a63c7a Mon Sep 17 00:00:00 2001
From: corpi <lj845854@gmail.com>
Date: Fri, 27 Feb 2026 14:21:29 +0900
Subject: [PATCH] =?UTF-8?q?style(space):=20=ED=97=A4=EB=8D=94=20=ED=81=AC?=
 =?UTF-8?q?=EB=A1=AC=20=EC=B5=9C=EC=86=8C=ED=99=94=EC=99=80=20HUD=20?=
 =?UTF-8?q?=ED=95=98=EB=8B=A8=20=EB=B0=80=EC=B0=A9=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

맥락:

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

변경사항:

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

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

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

검증:

- npx tsc --noEmit

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

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

세션-리스크: 기기별 safe-area 계산 차이로 HUD 체감 위치가 다를 수 있음
---
 .../space-chrome/ui/SpaceChromeWidget.tsx     | 20 +++++++++----------
 .../ui/SpaceTimerHudWidget.tsx                |  8 +++++++-
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/widgets/space-chrome/ui/SpaceChromeWidget.tsx b/src/widgets/space-chrome/ui/SpaceChromeWidget.tsx
index 034a788..c5c6a03 100644
--- a/src/widgets/space-chrome/ui/SpaceChromeWidget.tsx
+++ b/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">
-      <header className="flex items-center justify-between rounded-xl border border-white/12 bg-slate-950/35 px-4 py-3 backdrop-blur-lg">
+    <div className="px-4 pt-2 sm:px-6">
+      <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(
-            'rounded-lg border border-white/30 text-white/85 transition hover:bg-white/10',
+          className={
             isImmersionMode
-              ? 'inline-flex h-7 w-7 items-center justify-center text-[11px]'
-              : 'px-3 py-1.5 text-xs',
-          )}
+              ? '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'
+              : '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>
diff --git a/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx b/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
index 5f57585..eed6a53 100644
--- a/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
+++ b/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(