feat(space): recovery 카피와 CTA 위계 분리

docs/12_core_loop_execution_roadmap.md

@@ -302,6 +302,9 @@ Away / Return이 끼어들기 전, 다음으로 예정된 축은 아래 두 가
 ### 진행 중
 
 - `Pause / Break / Return` separation polish
+  - material 1차 분리 반영 완료
+  - copy / CTA hierarchy 2차 분리 반영 완료
+  - 남은 것은 browser QA와 motion 미세 조정
 
 ### 다음 대기
 

docs/90_current_state.md

@@ -47,6 +47,11 @@ Last Updated: 2026-03-14
   - `Return(focus)`와 `Return(break)`가 같은 tray처럼 보이지 않도록 break tray에 emerald tint release tone 도입
   - `Goal Complete`의 `잠깐 쉬기` 선택도 같은 break 계열 material로 연결
   - timer HUD는 break phase에서 더 가벼운 emerald 계열 glass로 보정해 focus/pause와 구분되게 조정
+- `/space` Pause / Break / Return copy + interaction polish:
+  - `Pause`는 `멈춘 이유` 대신 `다시 시작할 한 줄`을 중심으로 카피를 다시 정리
+  - `Return(focus)`는 `멈춘 자리에서 이어가기`, `Return(break)`는 `지금부터 쉬기 / 다음 블록 이어가기` 중심으로 재서술
+  - `Goal Complete`는 `다음 블록 이어가기 / 잠깐 쉬기 / 여기까지 끝내기` 순의 선택 tray를 먼저 보여주고, 다음 블록 입력은 이후 단계에서만 열리게 정리
+  - choice/next view의 헤더와 설명도 각각 다른 감정 상태에 맞춰 분리
 
 - Focus Entry Surface / Execution Surface 재정의:
   - `/app`을 planning home이 아니라 hero-first focus entry surface로 재구성

docs/session_brief.md

@@ -14,8 +14,8 @@ Last Updated: 2026-03-14
 
 ## 현재 우선순위
 
-1. `Pause / Break / Return` 분리 polish
-2. `/space` Refocus + Return 브라우저 QA
+1. `/space` Refocus + Return 브라우저 QA
+2. `Pause / Break / Return` motion polish
 3. `Weekly Review` 상세 기획
 
 ## 최근 세션 상태
@@ -52,6 +52,10 @@ Last Updated: 2026-03-14
   - `Return(break)`은 focus 복귀 tray와 같은 재질을 쓰지 않고, 더 부드러운 emerald tint release tone으로 분리했다.
   - `Goal Complete`의 `잠깐 쉬기` 선택도 같은 release tone으로 연결했다.
   - timer HUD도 break phase에서는 더 가벼운 emerald 계열 material로 바뀌어 pause/focus와 다르게 읽히도록 정리 중이다.
+- `Pause / Break / Return`의 카피와 CTA 위계를 2차로 분리했다.
+  - `Pause`는 `멈춘 이유`보다 `다시 시작할 한 줄`에 집중하는 recovery tone으로 다시 썼다.
+  - `Return(focus)`는 `이어가기`, `Return(break)`는 `지금부터 쉬기 / 다음 블록 이어가기` 중심으로 문구를 분리했다.
+  - `Goal Complete`는 `마무리 / 쉬기 / 이어가기`의 선택 tray가 먼저 보이고, 다음 블록 입력은 이후 단계에서만 열리도록 더 선명해졌다.
 - `/app`을 single-goal commitment gate로 다시 줄였다.
   - 2-step ritual setup을 제거했다.
   - current session이 있으면 `Resume` UI만 보여주고, `/space`로 이어가기만 제안한다.

docs/work.md

@@ -81,8 +81,10 @@
   - pause는 recovery tone
   - break는 release tone
   - return은 re-entry tone으로 분리된다
+  - copy와 CTA hierarchy 2차 분리가 반영된다
 - 검증:
   - 브라우저 수동 확인
+  - motion 미세 조정
 - 커밋 힌트:
   - feat(space): separate-pause-break-return
 

src/shared/i18n/messages/space.ts

@@ -47,23 +47,23 @@ export const space = {
     refocusSaved: '이번 세션 방향을 다듬었어요.',
     refocusOpenOnPause: '잠시 멈춘 김에 다음 한 조각을 다시 맞춰볼까요?',
     pausePromptEyebrow: '잠깐 멈춤',
-    pausePromptTitle: '다시 붙잡을 한 조각만 정하면 돼요.',
-    pausePromptDescription: '왜 멈췄는지는 묻지 않아요. 다시 시작할 한 조각만 남겨요.',
+    pausePromptTitle: '다시 시작할 한 줄만 정하면 돼요.',
+    pausePromptDescription: '멈춘 이유를 정리하지 않아도 괜찮아요. 바로 손을 올릴 시작점만 다시 맞춥니다.',
     pausePromptRefocus: '한 조각 다시 잡기',
     pausePromptRefocusHint: '목표는 그대로 두고, 지금 다시 시작할 한 줄만 정리해요.',
-    pausePromptKeep: '이대로 이어가기',
-    pausePromptKeepHint: '지금 방향을 그대로 유지한 채 바로 이어서 시작해요.',
+    pausePromptKeep: '바로 이어가기',
+    pausePromptKeepHint: '지금 방향을 유지한 채, 멈춘 자리에서 다시 시작해요.',
     returnPromptEyebrow: '다시 돌아왔어요',
-    returnPromptFocusTitle: '이어서 갈까요?',
-    returnPromptFocusDescription: '흐름은 그대로 남아 있어요. 바로 이어가거나 한 조각만 다시 잡을 수 있어요.',
+    returnPromptFocusTitle: '흐름은 아직 남아 있어요.',
+    returnPromptFocusDescription: '멈춘 자리에서 바로 이어가거나, 다시 시작할 한 조각만 조용히 다듬을 수 있어요.',
     returnPromptBreakTitle: '자리를 비운 사이 이 블록이 끝났어요.',
-    returnPromptBreakDescription: '지금부터 쉬거나, 다음으로 이어갈 수 있어요.',
-    returnPromptContinue: '이어서 하기',
-    returnPromptContinueHint: '타이머와 흐름을 그대로 둔 채 다시 집중으로 돌아갑니다.',
+    returnPromptBreakDescription: '지금부터 쉬거나, 다음 블록으로 부드럽게 넘어갈 수 있어요.',
+    returnPromptContinue: '멈춘 자리에서 이어가기',
+    returnPromptContinueHint: '타이머와 현재 흐름을 그대로 두고 다시 집중으로 복귀합니다.',
     returnPromptRest: '지금부터 쉬기',
     returnPromptRestHint: '지금부터 break를 시작한 것처럼 천천히 숨을 고릅니다.',
-    returnPromptNext: '다음 목표 이어가기',
-    returnPromptNextHint: '다음 한 조각을 바로 정하고 흐름을 끊지 않고 잇습니다.',
+    returnPromptNext: '다음 블록 이어가기',
+    returnPromptNextHint: '다음 한 조각을 정하고, 같은 흐름 안에서 부드럽게 이어갑니다.',
     returnPromptRefocus: '한 조각 다시 잡기',
     returnPromptRefocusHint: '왜 멈췄는지는 건너뛰고, 지금 다시 시작할 한 줄만 남깁니다.',
     microStepCompleteAriaLabel: '현재 한 조각 완료',
@@ -80,18 +80,20 @@ export const space = {
     suggestions: ['리뷰 코멘트 2개 처리', '문서 1문단 다듬기', '이슈 1개 정리', '메일 2개 회신'],
     placeholderFallback: '다음 한 조각을 적어보세요',
     placeholderExample: (goal: string) => `예: ${goal}`,
-    title: '좋아요. 다음 한 조각은?',
-    description: '너무 크게 잡지 말고, 바로 다음 한 조각만.',
-    currentGoalLabel: '끝낸 목표',
-    nextGoalLabel: '다음 목표',
-    chooseNextButton: '다음 목표 이어가기',
-    chooseNextDescription: '바로 이어갈 다음 한 조각을 정하고 계속 갑니다.',
+    title: '이 블록을 어떻게 닫을까요?',
+    description: '지금은 끝내기, 쉬기, 이어가기 중 하나만 고르면 돼요.',
+    nextTitle: '좋아요. 다음 한 조각만 정해요.',
+    nextDescription: '너무 크게 잡지 말고, 바로 손을 올릴 한 줄만 남겨요.',
+    currentGoalLabel: '방금 끝낸 블록',
+    nextGoalLabel: '이어갈 다음 블록',
+    chooseNextButton: '다음 블록 이어가기',
+    chooseNextDescription: '다음 한 조각을 정하고 같은 흐름 안에서 계속 갑니다.',
     backButton: '돌아가기',
     closeAriaLabel: '닫기',
     finishButton: '여기까지 끝내기',
     finishDescription: '이 블록은 여기서 닫고, 다음 진입은 가볍게 남겨둡니다.',
     restButton: '잠깐 쉬기',
-    restDescription: '지금은 멈추고 숨을 고른 뒤 돌아올 여지를 남겨둡니다.',
+    restDescription: '이 블록은 닫고, 지금부터는 잠깐 쉬는 리듬으로 넘어갑니다.',
     confirmButton: '다음 목표로 바로 시작',
     confirmPending: '시작 중…',
     finishPending: '마무리 중…',

src/widgets/space-focus-hud/ui/GoalCompleteSheet.tsx

@@ -87,6 +87,14 @@ export const GoalCompleteSheet = ({
   const canConfirm = draft.trim().length > 0;
   const isSubmitting = submissionMode !== null;
   const trimmedCurrentGoal = currentGoal.trim();
+  const title =
+    view === 'next'
+      ? copy.space.goalComplete.nextTitle
+      : copy.space.goalComplete.title;
+  const description =
+    view === 'next'
+      ? copy.space.goalComplete.nextDescription
+      : copy.space.goalComplete.description;
 
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -143,8 +151,8 @@ export const GoalCompleteSheet = ({
         <header className="relative flex items-start justify-between gap-2">
           <div>
             <p className="text-[11px] font-medium tracking-[0.08em] text-white/38">목표 완료</p>
-            <h3 className="mt-1 text-[1rem] font-medium tracking-tight text-white/94">{copy.space.goalComplete.title}</h3>
-            <p className="mt-1 text-[12px] text-white/56">{copy.space.goalComplete.description}</p>
+            <h3 className="mt-1 max-w-[22rem] text-[1rem] font-medium tracking-tight text-white/94">{title}</h3>
+            <p className="mt-1 max-w-[21rem] text-[12px] leading-[1.55] text-white/56">{description}</p>
           </div>
           <button
             type="button"
@@ -171,18 +179,16 @@ export const GoalCompleteSheet = ({
             <footer className="mt-4 space-y-2">
               <button
                 type="button"
-                onClick={handleFinish}
+                onClick={() => setView('next')}
                 disabled={isSubmitting}
-                className={HUD_OPTION_ROW}
+                className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
               >
-                <div>
-                  <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
-                    {submissionMode === 'finish'
-                      ? copy.space.goalComplete.finishPending
-                      : copy.space.goalComplete.finishButton}
+                <div className="max-w-[20.5rem]">
+                  <p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
+                    {copy.space.goalComplete.chooseNextButton}
                   </p>
-                  <p className="mt-1 text-[12px] text-white/44">
-                    {copy.space.goalComplete.finishDescription}
+                  <p className="mt-1 text-[12px] leading-[1.55] text-white/48">
+                    {copy.space.goalComplete.chooseNextDescription}
                   </p>
                 </div>
                 <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
@@ -193,11 +199,11 @@ export const GoalCompleteSheet = ({
                 disabled={isSubmitting}
                 className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_BREAK)}
               >
-                <div>
+                <div className="max-w-[20.5rem]">
                   <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
                     {copy.space.goalComplete.restButton}
                   </p>
-                  <p className="mt-1 text-[12px] text-emerald-50/56">
+                  <p className="mt-1 text-[12px] leading-[1.55] text-emerald-50/56">
                     {copy.space.goalComplete.restDescription}
                   </p>
                 </div>
@@ -205,16 +211,18 @@ export const GoalCompleteSheet = ({
               </button>
               <button
                 type="button"
-                onClick={() => setView('next')}
+                onClick={handleFinish}
                 disabled={isSubmitting}
-                className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
+                className={HUD_OPTION_ROW}
               >
-                <div>
-                  <p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
-                    {copy.space.goalComplete.chooseNextButton}
+                <div className="max-w-[20.5rem]">
+                  <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
+                    {submissionMode === 'finish'
+                      ? copy.space.goalComplete.finishPending
+                      : copy.space.goalComplete.finishButton}
                   </p>
-                  <p className="mt-1 text-[12px] text-white/48">
-                    {copy.space.goalComplete.chooseNextDescription}
+                  <p className="mt-1 text-[12px] leading-[1.55] text-white/44">
+                    {copy.space.goalComplete.finishDescription}
                   </p>
                 </div>
                 <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>

src/widgets/space-focus-hud/ui/PauseRefocusPrompt.tsx

@@ -30,9 +30,9 @@ export const PauseRefocusPrompt = ({
   return (
     <div
       className={cn(
-        'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
+        'pointer-events-none w-full overflow-hidden transition-all duration-200 ease-out motion-reduce:duration-0',
         open
-          ? 'max-h-[24rem] translate-y-0 opacity-100'
+          ? 'max-h-[26rem] translate-y-0 opacity-100'
           : 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
       )}
       aria-hidden={!open}
@@ -59,15 +59,15 @@ export const PauseRefocusPrompt = ({
               disabled={isBusy}
               className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
             >
-              <div className="min-w-0">
+              <div className="min-w-0 max-w-[20.5rem]">
                 <p className="text-[14px] font-semibold leading-[1.35] tracking-[-0.01em] text-white/92">
                   {copy.space.focusHud.pausePromptRefocus}
                 </p>
-                <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/50">
+                <p className="mt-1.5 text-[12px] leading-[1.55] text-white/50">
                   {copy.space.focusHud.pausePromptRefocusHint}
                 </p>
               </div>
-              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
             </button>
             <button
               type="button"
@@ -75,15 +75,15 @@ export const PauseRefocusPrompt = ({
               disabled={isBusy}
               className={HUD_OPTION_ROW}
             >
-              <div className="min-w-0">
+              <div className="min-w-0 max-w-[20.5rem]">
                 <p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
                   {copy.space.focusHud.pausePromptKeep}
                 </p>
-                <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
+                <p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
                   {copy.space.focusHud.pausePromptKeepHint}
                 </p>
               </div>
-              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
             </button>
           </div>
         </div>

src/widgets/space-focus-hud/ui/ReturnPrompt.tsx

@@ -41,9 +41,12 @@ export const ReturnPrompt = ({
   return (
     <div
       className={cn(
-        'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
+        'pointer-events-none w-full overflow-hidden transition-all motion-reduce:duration-0',
         open
-          ? 'max-h-[22rem] translate-y-0 opacity-100'
+          ? cn(
+              'max-h-[24rem] translate-y-0 opacity-100',
+              isBreakReturn ? 'duration-300 ease-out' : 'duration-220 ease-out',
+            )
           : 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
       )}
       aria-hidden={!open}
@@ -70,7 +73,7 @@ export const ReturnPrompt = ({
               : copy.space.focusHud.returnPromptFocusDescription}
           </p>
 
-          <div className="mt-5 space-y-2.5 border-t pt-4 border-white/8">
+          <div className="mt-5 space-y-2.5 border-t border-white/8 pt-4">
             {isBreakReturn ? (
               <>
                 <button
@@ -79,15 +82,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_BREAK)}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-semibold leading-[1.35] tracking-[-0.01em] text-white/92">
                       {copy.space.focusHud.returnPromptRest}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-emerald-50/56">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-emerald-50/56">
                       {copy.space.focusHud.returnPromptRestHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1 text-emerald-100/34 group-hover:text-emerald-100/58')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px] text-emerald-100/34 group-hover:text-emerald-100/58')}>→</span>
                 </button>
                 <button
                   type="button"
@@ -95,15 +98,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={HUD_OPTION_ROW}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
                       {copy.space.focusHud.returnPromptNext}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
                       {copy.space.focusHud.returnPromptNextHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
                 </button>
                 <button
                   type="button"
@@ -111,15 +114,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={HUD_OPTION_ROW}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
                       {copy.space.focusHud.returnPromptRefocus}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
                       {copy.space.focusHud.returnPromptRefocusHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
                 </button>
               </>
             ) : (
@@ -130,15 +133,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-semibold leading-[1.35] tracking-[-0.01em] text-white/92">
                       {copy.space.focusHud.returnPromptContinue}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/48">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-white/48">
                       {copy.space.focusHud.returnPromptContinueHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
                 </button>
                 <button
                   type="button"
@@ -146,15 +149,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={HUD_OPTION_ROW}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
                       {copy.space.focusHud.returnPromptRefocus}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
                       {copy.space.focusHud.returnPromptRefocusHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
                 </button>
               </>
             )}