feat(site,skill): 모바일 앱 수준 UX — 바텀내비·백 키 히스토리·바텀 시트·safe area·PWA 와 L6 시나리오 E2E

- HIG(탭바 5~6·시트)·M3(바텀내비 3~5·48dp)·NN/g·CSS-Tricks 조사(research/mobile-app-ux-v1.md) 후 Nielsen 10 감사로 위반 도출
- 바텀 내비 5탭 + 더보기 바텀 시트(그룹 헤더), 뷰·다이얼로그 pushState/popstate — 안드로이드 백 키가 앱 내 뒤로 작동
- safe area(env+max)·입력 16px(iOS 확대 방지)·coarse 44px 타깃·tap-highlight·overscroll 위생, 인쇄에서 모바일 크롬 제거
- PWA: manifest + sharp 생성 아이콘(가온=장부 문항, 두레=시간표 블록)
- tools/e2e.mjs L6 시나리오: RED 1,742 단언 318 실패 → GREEN 1,762/0, verify 체인 7계층 통과
- 실기기(안드로이드 에뮬레이터·Chrome) 텍스트 근거 검증 — 백 키·시트·탭 전환, iOS 는 WebKit(L4) 대체
- 스킬 내재화: mobile-app-ux.md, audit-gate 7계층·하니스 12~14, design-gate 터치타깃 검사, SKILL.md 규칙 7
- 도그푸드: 게이트가 죽은 선택자 8종·thresholds 병합 버그 적발 — CSS v22(양앱) 범프 후 전체 재검증

apps/site/public/work/gaon-lms/styles/tokens.css

@@ -46,6 +46,24 @@
   --warning: #b45309; --warning-soft: #fffbeb; --warning-ink: #92400e;
   --danger: #dc2626;  --danger-soft: #fef2f2;  --danger-ink: #991b1b;
 
+  /* 지각 상태쌍(amber) — 상태색 4종의 나머지 하나. 그동안 main.css 상수였다 */
+  --late: #f59e0b;        /* 막대·점(amber-500) */
+  --late-soft: #fef3c7;  /* 칸 배경(amber-100) */
+  --primary-hover: #27272a;   /* zinc-800 — btn-solid:hover */
+  --accent-strong: #047857;   /* 진한 에메랄드 — 달력 '오늘', 흰 숫자 5.4:1 */
+  --on-accent: #ffffff;       /* 액센트·1차 배경 위 잉크 */
+
+  /* 표지판(진판) 위 잉크 — 모달 왼쪽 어두운 판 전용 */
+  --panel-muted: #a1a1aa;
+  --panel-faint: #71717a;
+  --panel-line: rgb(250 250 250 / 0.12);
+  --panel-mark: rgb(250 250 250 / 0.05);   /* 표지판 물마크 */
+  --backdrop-dim: rgb(9 9 11 / 0.55);
+
+  /* 인쇄 매체 — 종이 위 잉크. 화면 토큰과 값이 달라야 할 때의 원본 */
+  --print-line: #c9cdd3;
+  --print-paper: #ffffff;
+
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
@@ -54,12 +72,27 @@
   --space-6: 2rem;
   --space-7: 3rem;
 
-  /* 반지름 — shadcn 파생 규칙: base 8px → 컨트롤 6px, 판 12px */
+  /* 반지름 — 5종 규모. xs(작은 칩·각주) → base(컨트롤) → md(세그먼트 묶음) → lg(판) → pill */
+  --radius-xs: 4px;
   --radius: 6px;
+  --radius-md: 8px;
   --radius-lg: 12px;
+  --radius-pill: 999px;
+
+  /* 모션 문법 — 한 곡선·세 지속시간. 등장은 짧게, 호버는 즉각, 모달은 무겁게 */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --dur-1: 80ms;   /* 호버·활성 */
+  --dur-2: 140ms;  /* 색·테두리 전환 */
+  --dur-3: 200ms;  /* 모달·뷰 등장 */
 
   /* 그림자 — Tailwind shadow-sm / shadow-lg 실측값 */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+/* 안전 영역 — viewport-fit=cover 선언 후에만 0이 아닌 값이 온다(WebKit 공식·MDN env()) */
+--safe-top: env(safe-area-inset-top, 0px);
+--safe-bottom: env(safe-area-inset-bottom, 0px);
+--safe-left: env(safe-area-inset-left, 0px);
+--safe-right: env(safe-area-inset-right, 0px);
 }