style(app-theme): landing 이후 앱 배경 톤을 밝은 무드로 조정

맥락:
- /landing 이후 진입하는 앱 화면들의 배경이 전반적으로 어두워 초기 인상과 톤 연속성이 떨어졌다.
- 기존 감성/저자극 분위기를 유지하면서 배경 명도를 올려 부담을 낮출 필요가 있었다.

변경사항:
- /app 허브 배경 오버레이를 밝은 그라디언트 중심으로 조정하고 grain 강도를 낮췄다.
- 룸 카드 마스크 강도를 완화해 미리보기 이미지의 밝은 톤 노출을 늘렸다.
- /space 배경 오버레이, 그레인, 비네팅 강도를 단계적으로 낮춰 전체 명도를 상향했다.
- /space suspense fallback 배경을 라이트 그라디언트로 변경했다.
- /stats, /settings 페이지를 라이트 팔레트 기반 배경/패널 스타일로 전환했다.
- 세션 복구 문서(90_current_state, session_brief)에 이번 변경과 리스크를 반영했다.

검증:
- npx tsc --noEmit

세션-상태: /landing 이후 앱 플로우 배경이 밝은 톤으로 정리됨
세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환
세션-리스크: 밝은 배경 구간에서 일부 white 텍스트 대비가 약해질 수 있어 기기별 시인성 점검 필요

docs/90_current_state.md

@@ -1,6 +1,6 @@
 # 90. Current State
 
-Last Updated: 2026-02-27
+Last Updated: 2026-02-28
 
 ## DONE
 
@@ -40,6 +40,10 @@ Last Updated: 2026-02-27
   - 버튼 라벨: `숨 고르기 30초`
   - 진입 시 HUD 모드 라벨: `BREATHE`
   - 클릭 시 저자극 안내 문구 노출(2초 이내 미니 안내 + 토스트)
+- `/landing` 이후 앱 플로우 배경 톤을 밝은 무드로 조정:
+  - `/app` 허브 배경 오버레이를 밝게 조정하고 룸 카드 어두운 마스크 강도 완화
+  - `/space` 배경 오버레이/비네팅 강도를 낮춰 배경 노출 증가
+  - `/stats`, `/settings` 배경/패널을 라이트 팔레트로 전환
 - 몰입 모드 ON 시 `/space` 크롬 정리:
   - 상단 `Current Room` 블록 숨김
   - 우상단 허브 버튼 소형 아이콘화
@@ -71,6 +75,7 @@ Last Updated: 2026-02-27
 - 롱프레스 인터랙션은 첫 사용자에게 즉시 인지되지 않을 수 있어 시각적 힌트 필요 가능성 있음
 - bar/ring 진행 표시는 서로 다른 구현(JS/CSS)이라 동기화 규칙 변경 시 회귀 점검이 필요
 - 안내 카피가 HUD 목표 문구와 교체 표시되므로 정보 밀도 균형 점검 필요
+- 밝아진 배경 구간에서 일부 white 텍스트의 대비가 환경(디스플레이 밝기)에 따라 약해질 수 있음
 
 ## CHANGED FILES
 
@@ -118,6 +123,12 @@ Last Updated: 2026-02-27
 - `src/features/restart-30s/ui/Restart30sAction.tsx`
 - `src/features/restart-30s/index.ts`
 - `src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx`
+- `src/widgets/app-hub/ui/AppHubWidget.tsx`
+- `src/features/room-select/ui/RoomPreviewCard.tsx`
+- `src/app/(app)/space/page.tsx`
+- `src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx`
+- `src/widgets/stats-overview/ui/StatsOverviewWidget.tsx`
+- `src/widgets/settings-panel/ui/SettingsPanelWidget.tsx`
 
 ## QUICK VERIFY
 

docs/session_brief.md

@@ -1,6 +1,6 @@
 # Session Brief
 
-Last Updated: 2026-02-27
+Last Updated: 2026-02-28
 
 세션 시작 시 항상 읽는 초소형 스냅샷 문서.
 
@@ -34,6 +34,10 @@ Last Updated: 2026-02-27
   - 버튼 라벨을 `숨 고르기 30초`로 변경했다.
   - HUD 모드 라벨은 진입 시 `BREATHE`로 표시된다.
   - 클릭 시 저자극 안내 문구를 HUD 미니 안내 + 토스트로 노출한다.
+- `/landing` 이후 앱 플로우 배경을 밝은 톤으로 조정했다.
+  - `/app` 허브/룸 카드 오버레이를 완화해 배경 노출을 늘렸다.
+  - `/space` 오버레이/비네팅 강도를 낮춰 전체 명도를 올렸다.
+  - `/stats`, `/settings`는 라이트 팔레트 기반 패널로 전환했다.
 - 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다.
 - 이후 작업은 `docs/work.md`를 기준으로 실행한다.
 
@@ -45,6 +49,7 @@ Last Updated: 2026-02-27
 - 롱프레스 인터랙션은 신규 사용자에게 즉시 인지되지 않을 수 있어 보조 카피가 필요할 수 있음
 - bar/ring 진행 구현 방식이 달라 향후 진행 규칙 변경 시 회귀 확인이 필요함
 - HUD 안내 문구와 목표 문구가 교체 노출되므로 정보 우선순위 점검이 필요함
+- 밝은 배경 구간에서 white 텍스트 대비가 낮아질 수 있어 기기별 시인성 점검이 필요함
 
 ## 상세 원문 위치
 

src/app/(app)/space/page.tsx

@@ -3,7 +3,11 @@ import { SpaceSkeletonWidget } from '@/widgets/space-shell';
 
 export default function SpacePage() {
   return (
-    <Suspense fallback={<div className="min-h-screen bg-slate-950" />}>
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-[radial-gradient(circle_at_15%_0%,rgba(186,230,253,0.46),transparent_48%),linear-gradient(165deg,#f8fafc_0%,#e2e8f0_56%,#f1f5f9_100%)]" />
+      }
+    >
       <SpaceSkeletonWidget />
     </Suspense>
   );

src/features/room-select/ui/RoomPreviewCard.tsx

@@ -26,8 +26,8 @@ export const RoomPreviewCard = ({
       )}
     >
       <div aria-hidden className="absolute inset-0" style={getRoomBackgroundStyle(room)} />
-      <div aria-hidden className="absolute inset-0 bg-slate-950/54" />
-      <div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.86),rgba(2,6,23,0.25))]" />
+      <div aria-hidden className="absolute inset-0 bg-slate-900/38" />
+      <div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.72),rgba(2,6,23,0.18))]" />
 
       <div className="relative space-y-3">
         <div>

src/widgets/app-hub/ui/AppHubWidget.tsx

@@ -96,13 +96,16 @@ export const AppHubWidget = () => {
         className="absolute inset-0"
         style={getRoomBackgroundStyle(selectedRoom)}
       />
-      <div aria-hidden className="absolute inset-0 bg-slate-950/60" />
       <div
         aria-hidden
-        className="absolute inset-0 opacity-40"
+        className="absolute inset-0 bg-[radial-gradient(circle_at_14%_0%,rgba(255,255,255,0.34),transparent_44%),radial-gradient(circle_at_86%_18%,rgba(186,230,253,0.24),transparent_42%),linear-gradient(160deg,rgba(15,23,42,0.32)_0%,rgba(30,41,59,0.34)_52%,rgba(15,23,42,0.44)_100%)]"
+      />
+      <div
+        aria-hidden
+        className="absolute inset-0 opacity-28"
         style={{
           backgroundImage:
-            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 2px)",
+            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 2px)",
           mixBlendMode: 'soft-light',
         }}
       />

src/widgets/settings-panel/ui/SettingsPanelWidget.tsx

@@ -17,24 +17,24 @@ export const SettingsPanelWidget = () => {
   >(DEFAULT_PRESET_OPTIONS[0].id);
 
   return (
-    <div className="min-h-screen bg-[radial-gradient(circle_at_80%_0%,rgba(34,211,238,0.16),transparent_48%),linear-gradient(170deg,#020617_0%,#111827_54%,#0f172a_100%)] text-white">
+    <div className="min-h-screen bg-[radial-gradient(circle_at_82%_0%,rgba(167,204,237,0.42),transparent_50%),radial-gradient(circle_at_12%_8%,rgba(191,219,254,0.4),transparent_46%),linear-gradient(170deg,#f8fafc_0%,#eef4fb_54%,#e8f1fa_100%)] text-brand-dark">
       <div className="mx-auto w-full max-w-4xl px-4 pb-10 pt-6 sm:px-6">
-        <header className="mb-6 flex items-center justify-between rounded-xl border border-white/12 bg-white/6 px-4 py-3">
+        <header className="mb-6 flex items-center justify-between rounded-xl border border-brand-dark/12 bg-white/72 px-4 py-3 backdrop-blur-sm">
           <h1 className="text-xl font-semibold">Settings</h1>
           <Link
             href="/app"
-            className="rounded-lg border border-white/24 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/10"
+            className="rounded-lg border border-brand-dark/16 px-3 py-1.5 text-xs text-brand-dark/82 transition hover:bg-white/90"
           >
             허브로
           </Link>
         </header>
 
         <div className="space-y-4">
-          <section className="rounded-xl border border-white/15 bg-white/8 p-4">
+          <section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
             <div className="flex items-center justify-between gap-3">
               <div>
-                <h2 className="text-base font-semibold text-white">Reduce Motion</h2>
-                <p className="mt-1 text-sm text-white/70">
+                <h2 className="text-base font-semibold text-brand-dark">Reduce Motion</h2>
+                <p className="mt-1 text-sm text-brand-dark/64">
                   전환 애니메이션을 최소화합니다. (UI 토글 목업)
                 </p>
               </div>
@@ -46,13 +46,13 @@ export const SettingsPanelWidget = () => {
                 className={cn(
                   'inline-flex w-16 items-center rounded-full border px-1 py-1 transition-colors',
                   reduceMotion
-                    ? 'border-sky-200/70 bg-sky-300/28'
-                    : 'border-white/30 bg-white/10',
+                    ? 'border-brand-primary/45 bg-brand-soft/60'
+                    : 'border-brand-dark/20 bg-white/85',
                 )}
               >
                 <span
                   className={cn(
-                    'h-5 w-5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
+                    'h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 motion-reduce:transition-none',
                     reduceMotion ? 'translate-x-9' : 'translate-x-0',
                   )}
                 />
@@ -60,9 +60,9 @@ export const SettingsPanelWidget = () => {
             </div>
           </section>
 
-          <section className="rounded-xl border border-white/15 bg-white/8 p-4">
-            <h2 className="text-base font-semibold text-white">알림 강도</h2>
-            <p className="mt-1 text-sm text-white/70">집중 시작/종료 신호의 존재감을 선택합니다.</p>
+          <section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
+            <h2 className="text-base font-semibold text-brand-dark">알림 강도</h2>
+            <p className="mt-1 text-sm text-brand-dark/64">집중 시작/종료 신호의 존재감을 선택합니다.</p>
             <div className="mt-3 flex flex-wrap gap-2">
               {NOTIFICATION_INTENSITY_OPTIONS.map((option) => (
                 <button
@@ -72,8 +72,8 @@ export const SettingsPanelWidget = () => {
                   className={cn(
                     'rounded-full border px-3 py-1.5 text-xs transition-colors',
                     notificationIntensity === option
-                      ? 'border-sky-200/80 bg-sky-300/25 text-sky-50'
-                      : 'border-white/24 bg-white/8 text-white/82 hover:bg-white/14',
+                      ? 'border-brand-primary/45 bg-brand-soft/60 text-brand-dark'
+                      : 'border-brand-dark/18 bg-white/75 text-brand-dark/78 hover:bg-white',
                   )}
                 >
                   {option}
@@ -82,9 +82,9 @@ export const SettingsPanelWidget = () => {
             </div>
           </section>
 
-          <section className="rounded-xl border border-white/15 bg-white/8 p-4">
-            <h2 className="text-base font-semibold text-white">기본 프리셋</h2>
-            <p className="mt-1 text-sm text-white/70">입장 시 자동 선택될 추천 세트를 고릅니다.</p>
+          <section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
+            <h2 className="text-base font-semibold text-brand-dark">기본 프리셋</h2>
+            <p className="mt-1 text-sm text-brand-dark/64">입장 시 자동 선택될 추천 세트를 고릅니다.</p>
             <div className="mt-3 space-y-2">
               {DEFAULT_PRESET_OPTIONS.map((preset) => (
                 <button
@@ -94,8 +94,8 @@ export const SettingsPanelWidget = () => {
                   className={cn(
                     'w-full rounded-lg border px-3 py-2 text-left text-sm transition-colors',
                     defaultPresetId === preset.id
-                      ? 'border-sky-200/75 bg-sky-300/20 text-sky-50'
-                      : 'border-white/18 bg-white/5 text-white/85 hover:bg-white/10',
+                      ? 'border-brand-primary/45 bg-brand-soft/58 text-brand-dark'
+                      : 'border-brand-dark/16 bg-white/72 text-brand-dark/82 hover:bg-white',
                   )}
                 >
                   {preset.label}

src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx

@@ -35,29 +35,40 @@ export const SpaceSkeletonWidget = () => {
         aria-hidden
         className={cn(
           'absolute inset-0 w-full transition-colors',
-          isImmersionMode ? 'bg-slate-950/72' : 'bg-slate-950/62',
+          isImmersionMode ? 'bg-slate-900/52' : 'bg-slate-800/40',
         )}
       />
       <div
         aria-hidden
         className={cn(
           'absolute inset-0 w-full transition-opacity',
-          isImmersionMode ? 'opacity-48' : 'opacity-35',
+          isImmersionMode ? 'opacity-44' : 'opacity-58',
         )}
         style={{
-          backgroundImage:
-            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 2px)",
+          background:
+            'radial-gradient(68% 54% at 18% 0%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%), radial-gradient(82% 64% at 82% 10%, rgba(186,230,253,0.24) 0%, rgba(186,230,253,0) 100%)',
         }}
       />
       <div
         aria-hidden
         className={cn(
           'absolute inset-0 w-full transition-opacity',
-          isImmersionMode ? 'opacity-88' : 'opacity-62',
+          isImmersionMode ? 'opacity-34' : 'opacity-24',
+        )}
+        style={{
+          backgroundImage:
+            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 2px)",
+        }}
+      />
+      <div
+        aria-hidden
+        className={cn(
+          'absolute inset-0 w-full transition-opacity',
+          isImmersionMode ? 'opacity-60' : 'opacity-42',
         )}
         style={{
           background:
-            'radial-gradient(120% 90% at 50% 50%, rgba(2,6,23,0) 24%, rgba(2,6,23,0.78) 100%)',
+            'radial-gradient(120% 90% at 50% 50%, rgba(2,6,23,0) 24%, rgba(2,6,23,0.46) 100%)',
         }}
       />
 

src/widgets/stats-overview/ui/StatsOverviewWidget.tsx

@@ -10,16 +10,16 @@ const StatSection = ({
 }) => {
   return (
     <section className="space-y-3">
-      <h2 className="text-lg font-semibold text-white">{title}</h2>
+      <h2 className="text-lg font-semibold text-brand-dark">{title}</h2>
       <div className="grid gap-3 sm:grid-cols-3">
         {items.map((item) => (
           <article
             key={item.id}
-            className="rounded-xl border border-white/16 bg-white/8 p-4"
+            className="rounded-xl border border-brand-dark/10 bg-white/80 p-4 backdrop-blur-sm"
           >
-            <p className="text-xs text-white/62">{item.label}</p>
-            <p className="mt-2 text-xl font-semibold text-white">{item.value}</p>
-            <p className="mt-1 text-xs text-sky-200">{item.delta}</p>
+            <p className="text-xs text-brand-dark/58">{item.label}</p>
+            <p className="mt-2 text-xl font-semibold text-brand-dark">{item.value}</p>
+            <p className="mt-1 text-xs text-brand-primary/90">{item.delta}</p>
           </article>
         ))}
       </div>
@@ -29,13 +29,13 @@ const StatSection = ({
 
 export const StatsOverviewWidget = () => {
   return (
-    <div className="min-h-screen bg-[radial-gradient(circle_at_20%_0%,rgba(56,189,248,0.18),transparent_45%),linear-gradient(170deg,#020617_0%,#0f172a_52%,#111827_100%)] text-white">
+    <div className="min-h-screen bg-[radial-gradient(circle_at_18%_0%,rgba(167,204,237,0.45),transparent_50%),radial-gradient(circle_at_88%_8%,rgba(191,219,254,0.4),transparent_42%),linear-gradient(170deg,#f8fafc_0%,#eef4fb_52%,#e9f1fa_100%)] text-brand-dark">
       <div className="mx-auto w-full max-w-6xl px-4 pb-10 pt-6 sm:px-6">
-        <header className="mb-6 flex items-center justify-between rounded-xl border border-white/12 bg-white/6 px-4 py-3">
+        <header className="mb-6 flex items-center justify-between rounded-xl border border-brand-dark/12 bg-white/72 px-4 py-3 backdrop-blur-sm">
           <h1 className="text-xl font-semibold">Stats</h1>
           <Link
             href="/app"
-            className="rounded-lg border border-white/24 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/10"
+            className="rounded-lg border border-brand-dark/16 px-3 py-1.5 text-xs text-brand-dark/82 transition hover:bg-white/90"
           >
             허브로
           </Link>
@@ -46,10 +46,10 @@ export const StatsOverviewWidget = () => {
           <StatSection title="최근 7일" items={WEEKLY_STATS} />
 
           <section className="space-y-3">
-            <h2 className="text-lg font-semibold text-white">집중 흐름 그래프</h2>
-            <div className="rounded-xl border border-dashed border-white/25 bg-white/5 p-5">
-              <div className="h-52 rounded-lg border border-white/10 bg-[linear-gradient(180deg,rgba(148,163,184,0.08),rgba(148,163,184,0.02))]" />
-              <p className="mt-3 text-xs text-white/60">더미 그래프 플레이스홀더</p>
+            <h2 className="text-lg font-semibold text-brand-dark">집중 흐름 그래프</h2>
+            <div className="rounded-xl border border-dashed border-brand-dark/18 bg-white/65 p-5">
+              <div className="h-52 rounded-lg border border-brand-dark/12 bg-[linear-gradient(180deg,rgba(148,163,184,0.15),rgba(148,163,184,0.04))]" />
+              <p className="mt-3 text-xs text-brand-dark/56">더미 그래프 플레이스홀더</p>
             </div>
           </section>
         </div>