From 9abe868db657289b33d87b715f0c93fd5dfb148a Mon Sep 17 00:00:00 2001
From: corpi <lj845854@gmail.com>
Date: Sat, 14 Mar 2026 18:24:32 +0900
Subject: [PATCH] =?UTF-8?q?fix(space):=20next=20beat=20=ED=8A=B8=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B3=B4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/NextMicroStepPrompt.tsx                | 29 ++++++++++---------
 .../space-focus-hud/ui/overlayStyles.ts       |  3 ++
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/widgets/space-focus-hud/ui/NextMicroStepPrompt.tsx b/src/widgets/space-focus-hud/ui/NextMicroStepPrompt.tsx
index 52cd48f..4ac84ab 100644
--- a/src/widgets/space-focus-hud/ui/NextMicroStepPrompt.tsx
+++ b/src/widgets/space-focus-hud/ui/NextMicroStepPrompt.tsx
@@ -6,6 +6,9 @@ import {
   HUD_OPTION_CHEVRON,
   HUD_OPTION_ROW,
   HUD_OPTION_ROW_PRIMARY,
+  HUD_REVEAL_BASE,
+  HUD_REVEAL_HIDDEN,
+  HUD_REVEAL_NEXT_BEAT,
   HUD_TRAY_HAIRLINE,
   HUD_TRAY_LAYER,
   HUD_TRAY_SHELL,
@@ -33,10 +36,8 @@ export const NextMicroStepPrompt = ({
   return (
     <div
       className={cn(
-        'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
-        open
-          ? 'max-h-[18rem] translate-y-0 opacity-100'
-          : 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
+        HUD_REVEAL_BASE,
+        open ? HUD_REVEAL_NEXT_BEAT : HUD_REVEAL_HIDDEN,
       )}
       aria-hidden={!open}
     >
@@ -44,12 +45,12 @@ export const NextMicroStepPrompt = ({
         <div aria-hidden className={HUD_TRAY_LAYER} />
         <div aria-hidden className={HUD_TRAY_HAIRLINE} />
 
-        <div className="relative w-full">
+        <div className="relative px-6 py-5">
           <p className="text-[11px] font-medium tracking-[0.08em] text-white/42">다음 한 조각</p>
-          <h3 className="mt-1 text-[1rem] font-medium tracking-tight text-white/94">
+          <h3 className="mt-1 max-w-[22rem] text-[1rem] font-medium tracking-tight text-white/94">
             {copy.space.focusHud.microStepPromptTitle}
           </h3>
-          <p className="mt-1 text-[13px] text-white/56">
+          <p className="mt-1 max-w-[21rem] text-[12px] leading-[1.55] text-white/56">
             {copy.space.focusHud.microStepPromptDescription}
           </p>
 
@@ -68,22 +69,22 @@ export const NextMicroStepPrompt = ({
             </p>
           ) : null}
 
-          <div className="mt-4 space-y-2">
+          <div className="mt-4 space-y-2.5 border-t border-white/8 pt-4">
             <button
               type="button"
               onClick={onKeepGoalOnly}
               disabled={isSubmitting}
               className={HUD_OPTION_ROW}
             >
-              <div>
+              <div className="max-w-[20.5rem]">
                 <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
                   {copy.space.focusHud.microStepPromptKeep}
                 </p>
-                <p className="mt-1 text-[12px] text-white/44">
+                <p className="mt-1 text-[12px] leading-[1.55] text-white/44">
                   {copy.space.focusHud.microStepPromptKeepHint}
                 </p>
               </div>
-              <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
+              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
             </button>
             <button
               type="button"
@@ -91,15 +92,15 @@ export const NextMicroStepPrompt = ({
               disabled={isSubmitting}
               className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
             >
-              <div>
+              <div className="max-w-[20.5rem]">
                 <p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
                   {copy.space.focusHud.microStepPromptDefine}
                 </p>
-                <p className="mt-1 text-[12px] text-white/48">
+                <p className="mt-1 text-[12px] leading-[1.55] text-white/48">
                   {copy.space.focusHud.microStepPromptDefineHint}
                 </p>
               </div>
-              <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
+              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
             </button>
           </div>
         </div>
diff --git a/src/widgets/space-focus-hud/ui/overlayStyles.ts b/src/widgets/space-focus-hud/ui/overlayStyles.ts
index 4b5d3cc..2e97780 100644
--- a/src/widgets/space-focus-hud/ui/overlayStyles.ts
+++ b/src/widgets/space-focus-hud/ui/overlayStyles.ts
@@ -32,6 +32,9 @@ export const HUD_REVEAL_RETURN_BREAK =
 export const HUD_REVEAL_COMPLETE =
   'max-h-[28rem] translate-y-0 scale-100 opacity-100 duration-260 ease-[cubic-bezier(0.18,1,0.32,1)]';
 
+export const HUD_REVEAL_NEXT_BEAT =
+  'max-h-[24rem] translate-y-0 scale-100 opacity-100 duration-220 ease-[cubic-bezier(0.2,0.9,0.2,1)]';
+
 export const HUD_FIELD =
   'h-11 w-full rounded-[18px] border border-white/10 bg-black/14 px-3.5 text-[0.98rem] tracking-tight text-white placeholder:text-white/30 focus:border-white/20 focus:bg-black/20 focus:outline-none focus:ring-2 focus:ring-white/8';