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/tools/capture-work-shots.mjs

@@ -0,0 +1,47 @@
+// 관리 앱 2종(가온·두레) 전용 캡처 — 쇼케이스 카드 2컷(본컷 + 모달 -2컷)과 og.png.
+// capture-shots.mjs 는 CLI 크롬이라 모달을 열 수 없어 이 스크립트가 -2컷을 담당한다.
+import puppeteer from "puppeteer-core";
+import path from "node:path";
+import url from "node:url";
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, "..");
+const CHROME = "C:/Program Files/Google/Chrome/Application/chrome.exe";
+const shots = path.join(root, "src", "assets", "shots");
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const browser = await puppeteer.launch({
+  executablePath: CHROME,
+  headless: "new",
+  args: ["--no-sandbox", "--disable-gpu", "--force-device-scale-factor=1"],
+  defaultViewport: { width: 1440, height: 900 },
+});
+const page = await browser.newPage();
+await page.setCacheEnabled(false);
+const open = async (app) => {
+  await page.goto(url.pathToFileURL(path.join(root, "public/work", app, "index.html")).href, { waitUntil: "networkidle0" });
+  await page.evaluate(() => document.fonts.ready);
+  await sleep(250);
+};
+
+// 가온: 대시보드 본컷 + 학적 카드(수강생 모달) -2컷
+await open("gaon-lms");
+await page.screenshot({ path: path.join(shots, "work-gaon-lms.png") });
+await page.screenshot({ path: path.join(root, "public/work/gaon-lms/og.png") });
+await page.evaluate(() => document.querySelector('[data-view="students"]').click());
+await page.evaluate(() => document.querySelector("#stu-table [data-stu]").click());
+await page.waitForSelector("#stu-dialog[open]");
+await sleep(350); // 모달 등장 모션 200ms + 여유
+await page.screenshot({ path: path.join(shots, "work-gaon-lms-2.png") });
+
+// 두레: 과목 찾기 본컷 + 강의계획(과목 모달) -2컷
+await open("dure-enrollment");
+await page.screenshot({ path: path.join(shots, "work-dure-enrollment.png") });
+await page.screenshot({ path: path.join(root, "public/work/dure-enrollment/og.png") });
+await page.evaluate(() => document.querySelector(".course-row").click());
+await page.waitForSelector("#course-dialog[open]");
+await sleep(350);
+await page.screenshot({ path: path.join(shots, "work-dure-enrollment-2.png") });
+
+await browser.close();
+console.log("work shots + og.png 갱신 완료");