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/dure-enrollment/styles/tokens.css

@@ -39,17 +39,47 @@
   --accent: #c2410c;        /* 벽돌 — 申 도장과 신청 액션만 */
   --accent-soft: #fff7ed;
   --accent-ink: #9a3412;
+  --on-accent: #ffffff;     /* 벽돌·남색 배경 위 잉크 */
+  --accent-tint-2: color-mix(in srgb, var(--accent) 55%, var(--on-accent));  /* 평가 막대 농도 2단 */
+  --accent-tint-3: color-mix(in srgb, var(--accent) 22%, var(--on-accent));  /* 평가 막대 농도 3단 */
   --success: #059669; --success-soft: #ecfdf5; --success-ink: #065f46;
   --warning: #b45309; --warning-soft: #fffbeb; --warning-ink: #92400e;
   --danger: #dc2626;  --danger-soft: #fef2f2;  --danger-ink: #991b1b;
 
+  /* 표지판(남색 잉크판) 위 잉크 — 모달 왼쪽 판 전용 */
+  --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;
   --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
 
+  /* 반지름 — 5종 규모 (가온과 같은 문법) */
+  --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;
 
   --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);
 }