전 저장소 리팩터링과 SSOT 정비

docs/DESIGN_CONCEPT.md

@@ -50,6 +50,30 @@ status: 통합본 v1
 
 이유: **세이지-틸**은 임상적 차분함(자연·회복·안정)과 따뜻함(흙·식물)을 동시에 품으면서, 한국 상담/심리 분야에서 과용되지 않아 차별화된다. 의료 블루는 흔하고 차갑다.
 
+### 0.3 구현 소유권 계약
+
+이 문서는 디자인 결정의 원본이고, 구현 권위는 아래 순서로만 내려간다. 같은 결정을 페이지마다 다시 정의하지 않는다.
+
+| 계층 | 단일 소유자 | 허용 범위 | 금지 |
+|---|---|---|---|
+| 전역 토큰·테마 | `apps/web/src/styles/tokens.css` | 중성 팔레트, 의미색, 타이포, 간격, radius, light/dark | 페이지 CSS의 전역 토큰 재정의 |
+| UI 프리미티브 | `apps/web/src/components/ui/` | Button, Surface, Badge, Field, EmptyState 같은 의미 단위 | 페이지 안에 같은 프리미티브 재구현 |
+| 앱 크롬·레이아웃 | `apps/web/src/components/shell/` | topbar, sidebar, main 폭, safe area | 페이지 CSS가 `.vg-topbar/.vg-nav/.vg-main/.vg-shell` 재정의 |
+| 페이지·기능 | `apps/web/src/pages/` | 해당 업무 흐름의 배치와 상태 표현 | 공통 셸·전역 테마 소유권 침범 |
+| 집중 화면 예외 | `pages/session/session.css`, 인증·아바타 전용 CSS | 세션의 몰입형 dark stage, 실제 아트 합성에 필요한 국소 색 | 예외 토큰을 다른 페이지로 전파 |
+
+현재 제품은 기존 브랜드와 IA를 보존하는 신뢰 우선 제품 UI다. 디자인 다이얼은
+`DESIGN_VARIANCE 4 / MOTION_INTENSITY 3 / VISUAL_DENSITY 6`으로 고정한다. 모션은 상태 전환과
+조작 피드백에만 쓰고, 데이터 밀도는 카드 중첩보다 여백·그룹·얇은 구분선으로 제어한다.
+
+새 시각 규칙은 다음 순서로 결정한다.
+
+1. 이 문서에 이미 있는 원칙인지 확인한다.
+2. 전역 결정이면 `tokens.css`, 공통 의미 단위면 `components/ui`, 앱 크롬이면 `components/shell`에 둔다.
+3. 페이지 전용 결정만 페이지 CSS에 둔다. 새 raw color가 필요하면 기존 의미 토큰으로 표현할 수 없는 이유를 주석으로 남긴다.
+4. 라우트 화면은 `React.lazy`로 분리하고 `Suspense` 로딩·오류 경계를 유지한다. 초기 진입 번들에 모든 역할 화면을 다시 합치지 않는다.
+5. `npm run check:design-ssot`, 타입체크, 프로덕션 빌드와 해당 시각 E2E를 통과해야 완료다.
+
 ---
 
 ## 1. 핵심 디자인 원칙 (신성불가침 5개)
@@ -479,6 +503,13 @@ function useAvatarMotion(state, affect, analyser) {
 
 핵심 긴장: **몰입 vs 평가 가시성.** 실시간 피드백이 라포 형성을 방해하면 안 되고, 평가가 사후로만 묶이면 학습 효과가 떨어진다. 해법 = **2단(two-tier) 피드백 모델** — 실시간은 "신호(signal)" 수준, 정밀 평가는 "회기말 리뷰"로.
 
+### 5.0 회기 시작 전 준비 화면
+
+- 헤더와 준비 본문은 같은 가용 폭을 사용한다. 별도의 고정 카드 폭으로 페이지 축을 끊지 않는다.
+- 데스크톱은 내담자 요약·회기 설정·진행 초점의 3열이되, 열은 고정 px가 아니라 가용 폭에 비례해 확장한다.
+- 진행 초점은 장식용 문구가 아니라 현재 단계, 선택 이론의 대화 기준, 이번 목표, 시간·안전 운영 기준을 즉시 확인하는 동적 브리핑이다.
+- 좁은 화면에서는 회기 시작이라는 단일 의도를 지키기 위해 진행 초점을 숨기고 핵심 설정과 시작 버튼을 우선한다.
+
 ### 5.1 3-column 골격 (데스크탑 ≥1280px)
 
 ```
@@ -678,6 +709,7 @@ body[data-role="admin"]      { --accent:#5B5F6B; --accent-bright:#7D818E; --acce
 
 - 톱바 56px `background:var(--surface); border-bottom:1px solid var(--hair);` (그림자 없음).
 - 좌측 네비 기본 72px 아이콘 전용(Lucide stroke 1.75), hover/포커스 시 220px 슬라이드(160ms). 활성 = 아이콘 `color:var(--accent)` + **3px 강조바 금지** → 아이콘 배경 `var(--accent-tint)` `border-radius:8px` 알약형(네비 알약만 8px 관용).
+- 앱 셸은 뷰포트 높이의 고정 프레임이다. 톱바와 GNB는 화면에 남고, 라우트 콘텐츠를 담는 메인 영역만 독립적으로 세로 스크롤한다. GNB 장식은 네비 자체의 `background` 레이어로만 합성하며 문서 위에 절대 위치 의사요소로 띄우지 않는다.
 - **역할 컨텍스트 라벨**: 톱바 좌측, `font-family:var(--font-num); font-size:13px; letter-spacing:0.04em; color:var(--accent);` — "학습 대시보드"/"교수 콘솔"/"운영 콘솔". "지금 누구로 보고 있나"의 유일하고 조용한 신호.
 - **권한 표현 원칙: 권한 없으면 DOM에서 제거.** disabled 회색처리도 안 함 — 존재를 숨김. 화면이 깨끗해지고 "내가 못 하는 것" 노이즈 제거. 임상 데이터 프라이버시(관리자는 학생 개별 성장곡선·transcript 기본 접근 불가, 메뉴 자체 렌더 안 함).