feat(coach): AI 코칭 버튼 및 버블 팝업 대화형 조언 기능 구현

apps/web/src/styles/global.css

@@ -15,6 +15,9 @@ html,
 body,
 #root {
   height: 100%;
+  width: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
 }
 
 body {
@@ -23,9 +26,10 @@ body {
   color: var(--text-strong);
   font-size: var(--fs-body);
   line-height: 1.6;
-  letter-spacing: 0;
+  letter-spacing: -0.01em;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  overscroll-behavior-y: contain;
   /* 한국어 조판: 기본값(normal)은 한글을 음절 단위로 끊어 "오전"이 "오/전",
      "검토 대기"가 "검/토 대기"로 쪼개진다. 어절 단위로 끊고, 끊을 수 없는 긴
      토큰(URL·ID)만 강제 줄바꿈한다. 세션 화면이 쓰던 규칙을 전역으로 올렸다. */
@@ -37,9 +41,11 @@ body {
 a {
   color: var(--accent-deep);
   text-decoration: none;
+  transition: color var(--dur-fast) var(--ease-out);
 }
 a:hover {
   text-decoration: underline;
+  color: var(--accent);
 }
 
 button {
@@ -61,13 +67,13 @@ svg {
   display: block;
 }
 
-/* 포커스 — 키보드 사용자만 ring (마우스 클릭엔 없음) */
+/* 포커스 — 키보드 사용자만 고대비 ring (마우스 클릭엔 없음) */
 :focus {
   outline: none;
 }
 :focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--focus-ring);
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
 

apps/web/src/styles/tokens.css

@@ -149,8 +149,14 @@
   --radius-lg: 12px; /* 패널 */
   --gutter: 24px;
 
+  --bottom-bar-h: 60px;
+  --radius-xl: 16px;
+  --radius-pill: 9999px;
+
   --shadow-sm: 0 1px 2px rgba(28, 42, 42, 0.05);
   --shadow-md: 0 4px 14px rgba(28, 42, 42, 0.07); /* 모달·팝오버만 */
+  --shadow-island: 0 8px 24px rgba(28, 42, 42, 0.08), 0 2px 6px rgba(28, 42, 42, 0.04);
+  --shadow-float: 0 14px 36px rgba(28, 42, 42, 0.12), 0 3px 10px rgba(28, 42, 42, 0.06);
 
   /* ── 래스터 디자인 요소 ── */
   --asset-warm-elements: url("/design-elements/clinical-paper-ambient.png");
@@ -162,6 +168,7 @@
   /* ── 모션 §3.9 ── */
   --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
   --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
+  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
   --dur-fast: 120ms; /* hover·포커스 */
   --dur-base: 200ms; /* 버튼·토글·드롭다운 */
   --dur-slow: 320ms; /* 패널 전환·모달 */