feat(web): 쉬는 중일 때 다이얼을 차분한 색 + 숨쉬기로 표현

[robin-watcha]

Summary

추출 타이머에서 쉬는 중(rest tail) 일 때와 붓는 중 일 때 큰 다이얼이 시각적으로 동일해, 사용자가 지금 부어야 하는지 기다려야 하는지를 한눈에 구분하기 어려웠다. (기존 신호는 pill의 · 쉬는 중 텍스트와 얇은 막대 색뿐)

이 PR은 쉬는 구간에서 다이얼을 명확히 다르게 표현한다:

• 색 스왑 — 다이얼 호(arc)·중앙 시간·phase pill을 따뜻한 앰버에서 차분한 세이지/틸로 전환 (라이트 #5b8a7a / 다크 #7fb3a3)
• 숨쉬기 맥동 — 호가 2.6s ease-in-out으로 은은하게 opacity 맥동(dial-breathe)
• 호가 측정하는 값(전체 진행률)은 그대로 유지 → 의미가 바뀌지 않아 헷갈리지 않음
• prefers-reduced-motion: reduce 사용자는 맥동 없이 색만 전환
• 하단 phase-kind-wait 막대도 var(--rest)로 통일 (기존 미정의 --surface-strong 폴백 제거)

색·치료 방향은 /office-hours 빌더 세션에서 결정 (3개 후보 중 "차분한 색 + 숨쉬기", 색은 세이지/틸 선택).

Before / After (dark mode)

붓는 중 (pour)	쉬는 중 (rest)
따뜻한 앰버 호·시간 (변경 없음)	세이지/틸 호·시간 + pill, 은은한 맥동

Test Coverage

순수 CSS + 클래스 토글 변경으로 새로운 코드 경로 없음. 시각 검증은 실제 CSS를 그대로 렌더한 정적 하니스 스크린샷으로 두 상태 대비를 확인.

Pre-Landing Review

No issues found. SQL/LLM/데이터 안전성 무관. CSS 우선순위(.dial.resting::before > .dial::before) 정상, mask/inset는 베이스 규칙에서 상속되어 링 모양 유지. 색 단독 신호가 아님(· 쉬는 중 텍스트 유지) + 모션 reduced-motion 존중 → 접근성 OK.

Verification

• svelte-check: 0 errors, 0 warnings
• vitest run: 135 passed (11 files)

Test plan

• 타입/마크업 체크 통과 (svelte-check)
• 단위 테스트 통과 (vitest, 135 tests)
• 라이브에서 실제 추출 흐름으로 쉬는 구간 진입 시 색·맥동 확인 (권장)

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Added breathing animation and redesigned resting state styling for the brew timer with enhanced visual distinction.

• Style

  • Updated phase pill and timer display colors during rest periods for improved visual clarity.

• Accessibility

  • Implemented reduced-motion support to respect user motion preferences.

[coderabbitai]

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Free

Run ID: a2512c36-c233-46e7-9479-ad01047ca3d9

📥 Commits

Reviewing files that changed from the base of the PR and between e18f07c and baea8aa.

📒 Files selected for processing (2)

• apps/web/src/app.css
• apps/web/src/routes/recipes/[code]/+page.svelte

---

📝 Walkthrough

Walkthrough

This PR adds resting-state visual styling to the brew timer UI. Design tokens for the resting color palette are defined in both light and dark themes, then applied to dial, pill, and animation elements. The recipe timer component integrates these styles by conditionally binding the resting class and updating the progress bar color.

Changes

Resting State Visual Feature

Layer / File(s)	Summary
Resting state design tokens apps/web/src/app.css	New CSS custom properties --rest, --rest-strong, and --rest-soft are declared in :root with light-mode values, then redeclared with dark-mode overrides.
Resting state visual styling apps/web/src/app.css	.dial.resting::before gradient arc and .dial.resting .clock .time readout color are updated to use rest tokens; .phase-pill.resting styling is added; dial-breathe keyframes control a looping opacity animation; prefers-reduced-motion rule disables animation on request.
Component class and color updates apps/web/src/routes/recipes/[code]/+page.svelte	Phase pill conditionally receives resting class from inRestTail state; phase-progress wait/rest background color switches from --surface-strong fallback to var(--rest).

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🐰 A restful brew calls for colors serene,
With tokens defined, both light and dark sheen,
The dial breathes soft with gentle animation,
While class bindings bring the resting sensation—
A brewer's pause, now styled with flair!

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}