feat: P1 풀빌드 — React 프론트 7화면 + 백엔드 상담루프·평가·음성·RAG

web (Vite+React19+TS, Cloudflare Pages 배포):
- 디자인토큰(세이지틸/테라코타 SSOT), 앱셸, 공통 UI 프리미티브
- 7화면: 로그인/학습자홈/상담세션/회기리뷰/교수자/관리자/설정
- ClientAvatar: SVG 반구상 흉상 4상태 + RMS 립싱크 + 6파라미터 정서
- 회기리뷰는 외부 레퍼런스 디자인을 Vignette 토큰으로 리스킨

api (FastAPI):
- 게이트웨이 /v1/generate·/v1/stream 어댑터(상주풀/EngineSession 보존)
- services: 페르소나 L0~L6 빌더 / 결정론 상태머신 / 가드레일 /
  턴 오케스트레이터 / 회기간 메모리 / 평가AI / 음성 / RAG
- store: DB off 폴백(in-memory), sessions 실구현

검증:
- web: node22 tsc+vite build 통과(node23 segfault 회피), Pages 배포 200
- api: app.main import 통과
- 핫픽스: Topbar initials undefined-safe (undefined.trim 크래시)
- E2E: 서연(P1) 상담 1턴 — 좋은/나쁜 상담에 차등 반응 실증

apps/web/src/components/ui/Card.tsx

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  /** 그림자 제거(헤어라인만) */
+  flat?: boolean;
+  /** accent-tint 배경 강조 패널 (좌측바 대신 틴트) */
+  tint?: boolean;
+  children?: ReactNode;
+}
+
+/** 카드: 헤어라인 + 미세 그림자. 상단 강조선 금지. radius 8px. §7.3 */
+export function Card({ flat, tint, className, children, ...rest }: CardProps) {
+  const cls = [
+    "vg-card",
+    flat ? "vg-card--flat" : "",
+    tint ? "vg-card--tint" : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={cls} {...rest}>
+      {children}
+    </div>
+  );
+}