세션 종료 UX 정리

apps/web/src/styles/tokens.css

@@ -10,6 +10,7 @@
 :root {
   /* ── Primitive: Neutral (따뜻한 종이 + 쿨 슬레이트) §3.1 ── */
   --paper: #fbfaf8; /* 본문 배경: 따뜻한 종이색 (순백 아님) */
+  --paper-1: #fbfaf8; /* 구형 페이지 alias */
   --paper-2: #f4f2ee; /* 카드/패널 미세 단차 (테두리 대신 톤차) */
   --surface: #ffffff; /* 카드 표면 */
   --neutral-100: #eceff1; /* 표면 hover / subtle fill */
@@ -126,10 +127,24 @@
 
 /* ── 다크 모드 (gloom 회피 — 충분한 밝은 면 + 절제된 악센트) §3.5 ── */
 [data-theme="dark"] {
-  --bg-app: #131a1e;
-  --bg-surface: #1a2429;
-  --bg-surface-2: #222e34;
-  --bg-tint: #1e2e2a;
+  --paper: #0f1715;
+  --paper-1: #111b18;
+  --paper-2: #17211f;
+  --surface: #1b2724;
+  --neutral-100: #24322e;
+  --neutral-150: #2c3b36;
+  --neutral-200: #3a4b45;
+  --neutral-400: #7c8d88;
+
+  --ink: #eef6f3;
+  --ink-2: #c6d3cf;
+  --ink-3: #8a9b96;
+  --hair: #2c3b36;
+
+  --bg-app: #0e1714;
+  --bg-surface: #17231f;
+  --bg-surface-2: #22302c;
+  --bg-tint: #1d302b;
   --bg-stage: #0e1614;
   --text-strong: #eaf0f1;
   --text-body: #c4cfd3;
@@ -143,6 +158,8 @@
   --accent-tint: #1e2e2a;
   --accent-bright: #6fb3a4;
   --clay: #cc8f77;
+  --clay-deep: #e0aa92;
+  --clay-tint: #2b211e;
   --focus-ring: rgba(111, 179, 164, 0.45);
 
   --pos-text: #7fd0a0;
@@ -186,15 +203,26 @@
 }
 
 /* 다크 + 역할 동시 적용 시 accent 명도 보정 (가독) */
+[data-theme="dark"] body[data-role="learner"] {
+  --accent: #6fb3a4;
+  --accent-deep: #84c2b4;
+  --accent-bright: #6fb3a4;
+  --accent-tint: #1e2e2a;
+  --focus-ring: rgba(111, 179, 164, 0.45);
+}
+[data-theme="dark"] body[data-role="instructor"],
 [data-theme="dark"][data-role="instructor"] {
   --accent: #7d9fde;
   --accent-deep: #94b1e6;
   --accent-bright: #7d9fde;
   --accent-tint: #19222f;
+  --focus-ring: rgba(125, 159, 222, 0.4);
 }
+[data-theme="dark"] body[data-role="admin"],
 [data-theme="dark"][data-role="admin"] {
   --accent: #9aa0ad;
   --accent-deep: #b0b5c0;
   --accent-bright: #9aa0ad;
   --accent-tint: #1d2026;
+  --focus-ring: rgba(154, 160, 173, 0.4);
 }