chore: v0.7.0 으로 버전을 올린다

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(양앱) 범프 후 전체 재검증
2026-08-23 14:33:30 +09:00 · 2026-08-23 14:33:15 +09:00
138 changed files with 3060 additions and 213 deletions
--- a/apps/site/design.md
+++ b/apps/site/design.md
@ -790,3 +790,40 @@ max-age=0 지정(존 설정이 우선하면 효과는 제한적). **운칙: /wor
 - 사용자 보고 "왼쪽 타임 라벨 깨짐" — 계측으로 확정: 라벨 top 간격이 22·194·43·22 불규칙, 일부 라벨 폭 78px(요일 열에 배치). **원인: span-2 셀이 섞인 그리드 자동 배치(auto-placement)의 취약성** — 시간 라벨(1행)과 셀(2행 스팬)이 교차하며 희소 배치 커서가 열1의 빈 행을 잡아 라벨이 엉뚱한 행·열로 흩어졌다. 세션 초반 의심 목록에 있던 "--rows 미사용 문제"의 실체이기도 하다.
 - 수리: buildAxis 를 **전 요소 명시적 격자 좌표**(corner 1/1, day 1/(d+1), hour (h-9)*2+2행/1열, cell 행 span2/열 d+1)로 재작성 — 자동 배치 의존 제거. 검증: 9라벨 전부 1열(40px 균일), 간격 Δ43~44px 등차(2행×21.6px 설계 정합). 시각 diff 0.38%(라벨 재배치 = 의도) 확인 후 기준 갱신, 게이트 통과, v18 배포.
 - **교훈: 혼합 span 의 그리드는 자동 배치를 믿지 않는다** — 좌표를 명시하라. 격자 레이아웃 검사에는 '라벨 등간격(Δ 균일)' 불변식을 넣을 가치가 있다(스킬 하니스 규칙 후보).
+
+## 2026-08-22 — 프로덕션 마감(v18/v19): 상태 완결성 · 인쇄 · 단축키 · 브랜드 정합
+
+디자인 스킬 13종 전량 병행 — designpaca 연장 경로(토큰·컨셉 승계) + redesign-existing-projects 감사 우선. taste 계열(안티슬롭·하이엔드·GSAP·미니멀·브루탈리스트·스티치)은 관리 콘솔에 적용되는 규칙만(상태 완결·대비·모션 문법·카드 절제·메타라벨 금지), 이미지젠 계열 4종은 구성·계층·가독성 기준으로 감사에 반영(관리 콘솔에 사진 소재는 부적합 — 생성 도구도 이 하니스에 없음).
+
+- **브랜드 낡은 값 교정**: theme-color 가 종이 시대 값(#F7F5EF/#FBFAF7), 파비콘이 v7 프리셋 전환 이전 문양(형광펜/남색)이었다. #fafafa + 현 브랜드 마크(가온=에메랄드 '가', 두레=벽돌 申)로 교체, og.png 재캡처.
+- **상태 완결성**: 가온 채점 입력에 범위 검증(GAON.validateScore — 0–100 밖이면 인라인 경고 + 저장 차단 + aria-invalid, 평균은 유효값만 계산). 두레 취소에 실행취소(상태줄 안에 되돌리기 버튼 — 재신청은 canEnroll 로 재심사, 사이에 다른 신청이 끼면 정당하게 막힘). 알림 센터 Esc 닫힘. 로딩 상태는 의도적으로 만들지 않았다 — 동기 인라인 데이터에 스켈레톤은 '저장을 흉내내지 않는다' 원칙 위반.
+- **도메인 기능 — 인쇄**: @media print 2종. 가온은 활성 뷰를 서류로(모달이 열려 있으면 body:has(dialog[open]) 로 앱을 숨기고 그 서류만), 두레는 A4 가로 시간표 + 강의계획서. print-color-adjust: exact 로 상태색 보존. 탑바/앱바에 인쇄 버튼.
+- **키보드 단축키**: 숫자키 뷰 전환(가온 1–9, 두레 1–6), / 검색 포커스(입력 요소 가드). kbd 물리 키 칩 안내 — 가온 사이드 하단, 두레 앱바(모바일 숨김).
+- **모션 문법 토큰화**: --ease-out(0.16,1,0.3,1)·--dur-1/2/3 한 곡선 세 지속시간. 뷰 전환 70ms 상승 — 시각회귀 스크린샷 대기(100ms) 안에 종료시켜 흔들림 없음. prefers-reduced-motion 전역 블랭킷(무한 루프·전환 정지, 기능은 유지).
+- **토큰 위생**: 지각 상태쌍(--late/--late-soft), --primary-hover, --accent-strong, --on-accent 를 tokens.css 로 이동 — main.css 의 상수색 제거. radius 를 5종 규모(--radius-xs/6/--radius-md/12/pill)로 정리, 난립하던 2/3/4/8/999px 리터럴 종식.
+- **죽은 코드 제거**: 가온 .page-head·.btn-primary/outline/ghost·.hl-count·.stamp(HTML 3곳·CSS), 두레 .modal-title/.modal-meta/.modal-inner/.facts(+모바일 쿼리 잔여), 두레 renderCreditsView 이중 계산 블록(첫 블록이 즉시 덮임), conflictsWith(canEnroll 로 흡수).
+- **calc.js 확장**: GAON.validateScore, DURE.canEnroll(정원·겹침·학점 한 번에 판정 — 모달 경고 문장과 실행취소 재심사가 같은 순수 함수 공유). 단위 테스트 30→41건.
+- **감사 도구 확장(도구도 제품)**: audit.mjs +24항목(채점 차단/해제·실행취소 복원·단축키 4건·인쇄 CSS 존재). exploratory 차터1 을 실제 완주로 고침 — type("88") 이 기존 값에 덧붙어 "9288"이 되던 조용한 테스트 결함(검증 추가로 처음 드러남; number 입력은 선택 덮어쓰기 불가 — 비우고 타이핑).
+- **사고 2건, 게이트가 잡음**: ①두레 320px +18px — 인쇄 버튼이 앱바 최소폭 합을 넘김 → ≤680px 액션 줄 2행 랩. ②가온 390px 6% 시각 diff — .side-kbd 기본 display:flex 가 파일 뒤쪽에 있어 앞쪽 900px 미디어쿼리의 display:none 을 캐스케이드로 이김 → 숨김 오버라이드는 기본 규칙 **보다 뒤에** 두어야 한다. 캐시 운칙 준수: main.css v18(가온)/v19(두레), calc.js?v=2.
+- 쇼케이스 -2컷(모달 열림) 재캡처 — capture-work-shots.mjs 신설(CLI 크롬 --screenshot 은 모달을 못 열어 puppeteer 가 담당). 게이트 전 계층 통과(L0 2종·L1 41·L2 72+10·L3 30·L4 8·L5 14).
+
+## 2026-08-22 — 스킬 내재화(v20): 이번 사고를 스킬 규칙으로 승격
+
+프로덕션 마감 라운드에서 게이트가 *사후에* 잡은 결함 11종을 "스킬이 처음부터 조였다면 원천 차단됐을 규칙"으로 도출해 designpaca 스킬에 박았다(packages/skill — 하드게이트 13·14, 4-5 서류 기능 단계, preflight 상태 완결성 §4-1, 하니스 규칙 8~11, design-gate 신규 3검사). 이 앱들은 그 도그푸드 대상이다.
+- **게이트가 수작업 스윕을 이겼다**: 새 deadCss 검사가 내가 직접 정리하고도 놓친 `.rep-stat-sub`·`:not(.page-head)` 잔여(모바일 쿼리)를, cssHygiene 이 `.bell-head button`의 `border-radius: 4px` 리터럴을 각각 잡음. "눈 검사로는 절대 전부 못 잡는다"가 이 라운드의 입증이다. 세 건 정리.
+- 색 리터럴 잔여 전량 토큰화: 표지판 위 잉크(--panel-muted/faint/line/mark)·백드롭(--backdrop-dim)·인쇄 매체(--print-line/paper)·두레 평가 농도(--accent-tint-2/3) — main.css 색·radius 리터럴 0건(양 앱, 게이트 실측).
+- 검증: 스킬 게이트 신규 검사 도그푸드 양방향 — 고의 결함 픽스처(죽은 클래스·토큰 밖 색·theme-color 불일치)는 3검사 정확히 FAIL, 실제 두 앱은 전 PASS. 리포 게이트 L0~L5 재통과. CSS v20(가온).
+
+## 2026-08-23 — 모바일 앱 수준 UX(v21/v22): HIG·M3 표준 이행 · L6 시나리오 E2E · 실기기 검증
+
+13종 디자인 스킬 재동원(designpaca 연장 + redesign 감사 우선). 조사를 먼저 — Apple HIG(탭바 5~6·시트·safe area), Material 3(바텀내비 3~5·48dp), NN/g(바텀 시트·터치타깃), CSS-Tricks(iOS 16px 확대)를 근거로 Nielsen 10 휴리스틱 감사로 위반 도출(백 키 앱 종료·중앙 모달 썸존 밖·safe area 무시·입력 확대 유발). 조사·계획: research/mobile-app-ux-v1.md.
+
+- **앱 탐색 구조**: 바텀 내비 5탭(가온 홈/수강생/출석부/성적/더보기, 두레 과목 찾기/관심/신청 내역/이수/더보기) + 더보기 바텀 시트(그룹 헤더 — 가온 학적/수업/학사 9항목, 두레 6항목). ≤900px 사이드내비/탭 전환.
+- **하드웨어 뒤로가기 = 앱 내 히스토리**: 뷰 전환 pushState, 다이얼로그도 같은 스택(suppressPop/popClosing 상호 무시 플래그, 더보기 선택은 pendingMoreSelect 로 back+push 접합). 백 키가 앱을 종료하지 않는다.
+- **safe area·입력·터치**: viewport-fit=cover + env(safe-area-inset-*) max() 패딩, ≤680px 입력 16px(iOS 확대 방지 — maximum-scale=1 은 WCAG 위반으로 안 씀), coarse 44px 타깃, tap-highlight·overscroll·touch-action 위생.
+- **바텀 시트**: ≤680px 모달이 하단 시트로(그래버 36×4, 92dvh, sheet-up 모션), 인쇄에서 모바일 크롬 제거.
+- **PWA**: manifest.webmanifest + sharp 생성 아이콘 192/512(가온=장부 문항 에메랄드, 두레=시간표 블록 벽돌) + apple-touch-icon·모바일 메타 2종.
+- **TDD RED→GREEN**: tools/e2e.mjs 신설 — 앱 기반·320/390/768 매트릭스·터치타깃 231·대비 1,120·백 키·시트·더보기·강사 하루 장기 여정(S1 25단언)·정정기간 여정(S2 27). RED 1,742 단언 318 실패(신규 기능에 정확히 집중) → GREEN 1,762/0. verify 체인 L6 등록, 전 계층 재통과.
+- **실기기 검증(안드로이드 에뮬레이터·실제 Chrome)**: adb reverse + uiautomator dump 텍스트 근거로 — 가온 렌더·수강생 탭·**백 키→대시보드 복귀**·더보기 시트·공지 선택·백 복귀, 두레 렌더·관심 탭·백 복귀. iOS 는 WebKit 엔진(L4)으로 대체(Windows 제약 문서화). 비전은 전환 중 프레임 오탐이 있어 '여부' 판정은 계측에만.
+- **도그푸드가 잡은 사고**: ①스킬 게이트 새 tapTargets 검사 개발 중 thresholds 얕은 병합 버그(구형 설정이 신규 기본값 지움, "≥undefinedpx") → 깊은 병합. ②죽은 선택자 검사가 이번 라운드 내가 만든 `.btn-seal/.btn-star`(가온에 없는 버튼)과 두레 포크 잔재 6종을 적발 → 삼위일체 제거, 세그먼트 `seg-${n}` JS 조립은 무시 목록(seg-)으로 오탐 차단. ③두레 `.btn-seal`은 생존(신청 버튼) — coarse 사이징 실수로 뺐다가 게이트 재실행으로 복원. CSS v22(양앱).
+- **스킬 내재화(v0.7 예정)**: references/mobile-app-ux.md 신규(5축 표·뒤로가기 전체 패턴·실기기 검증법·출처), audit-gate 7계층(L6 시나리오)·하니스 12~14(NaN 방어·fixed 판정·실기기 텍스트 근거), design-gate tapTargets 내장, SKILL.md 규칙 7 "OS 관습은 조사 없이 바꾸지 않는다".
--- a/apps/site/gate-report.md
+++ b/apps/site/gate-report.md
@ -1,9 +1,13 @@
-# 게이트 리포트 — 2026-08-22 12:20
+# 게이트 리포트 — 2026-08-23 04:48

 **전 항목 통과 — 배포 가능**

 ```
 PASS  L0 정적 — SKIP — checks.static=false
+PASS  gaon-lms 죽은 선택자 — 2개 CSS 전 클래스 사용 중(무시 2접두사)
+PASS  dure-enrollment 죽은 선택자 — 2개 CSS 전 클래스 사용 중(무시 2접두사)
+PASS  gaon-lms 토큰 위생 — 색 0·radius 0 리터럴(토큰 1파일)
+PASS  dure-enrollment 토큰 위생 — 색 0·radius 0 리터럴(토큰 1파일)
 PASS  gaon-lms SEO/meta — title 18자·desc 74자·OG✓·alt 0결
 PASS  gaon-lms/dashboard 오버플로 — 320/375/390/768/1440
 PASS  gaon-lms/dashboard h1 1줄
@ -52,6 +56,15 @@ PASS  gaon-lms/notice 리듬·트랙
 PASS  gaon-lms/notice 대비 AA
 PASS  gaon-lms 스케일×폭 h1 — scales 1/1.3
 PASS  gaon-lms 브랜드 1줄
+PASS  gaon-lms/dashboard 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  gaon-lms/students 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  gaon-lms/attendance 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  gaon-lms/grades 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  gaon-lms/files 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  gaon-lms/calendar 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  gaon-lms/counsel 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  gaon-lms/report 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  gaon-lms/notice 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
 PASS  dure-enrollment SEO/meta — title 15자·desc 79자·OG✓·alt 0결
 PASS  dure-enrollment/catalog 오버플로 — 320/375/390/768/1440
 PASS  dure-enrollment/catalog h1 1줄
@ -85,6 +98,12 @@ PASS  dure-enrollment/notices 리듬·트랙
 PASS  dure-enrollment/notices 대비 AA
 PASS  dure-enrollment 스케일×폭 h1 — scales 1/1.3
 PASS  dure-enrollment 브랜드 1줄
+PASS  dure-enrollment/catalog 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  dure-enrollment/starred 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  dure-enrollment/enrollments 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  dure-enrollment/credits 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  dure-enrollment/archive 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
+PASS  dure-enrollment/notices 터치타깃 — 컨트롤 ≥44px·인라인 ≥24px
 PASS  L3 시각 회귀 — SKIP — checks.visual=false
 PASS  L4 WebKit — SKIP — checks.webkit=false
 ```
--- a/apps/site/gate.config.json
+++ b/apps/site/gate.config.json
@ -61,5 +61,13 @@
    "visual": false,
    "webkit": false
  },
-  "chromePath": null
+  "chromePath": null,
+  "deadCssIgnore": [
+    "is-",
+    "seg-"
+  ],
+  "tapTargetsInline": [
+    ".row-open",
+    ".undo-btn"
+  ]
 }
--- a/apps/site/public/work/dure-enrollment/calc.js
+++ b/apps/site/public/work/dure-enrollment/calc.js
@ -24,7 +24,18 @@
  // 이수 잔여 — 음수면 '초과'
  const remaining = (need, done, now) => need - done - now;

-  const api = { isOverlap, credits, wouldExceed, seatsState, remaining };
+  // 신청 가능 판정 — 정원·겹침·학점을 한 번에. 모달의 경고 문장과 실행취소 재심사가 같은 판정을 공유한다.
+  const canEnroll = (course, enrolledList, currentCredits, max) => {
+    if (!course || !course.seats) return { ok: false, reason: "full" };
+    const names = (enrolledList || [])
+      .filter((o) => isOverlap(course, o))
+      .map((o) => o.name);
+    if (names.length) return { ok: false, reason: "overlap", names };
+    if (wouldExceed(currentCredits, course.credits, max)) return { ok: false, reason: "credits" };
+    return { ok: true };
+  };
+
+  const api = { isOverlap, credits, wouldExceed, seatsState, remaining, canEnroll };
  global.DURE = api;
  if (typeof module !== "undefined") module.exports = api;
 })(typeof window !== "undefined" ? window : globalThis);
--- a/apps/site/public/work/dure-enrollment/icon-192.png
+++ b/apps/site/public/work/dure-enrollment/icon-192.png
--- a/apps/site/public/work/dure-enrollment/icon-512.png
+++ b/apps/site/public/work/dure-enrollment/icon-512.png
--- a/apps/site/public/work/dure-enrollment/index.html
+++ b/apps/site/public/work/dure-enrollment/index.html
@ -2,8 +2,12 @@
 <html lang="ko">
  <head>
    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <title>두레대학 수강신청 · 시간표</title>
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link rel="manifest" href="./manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="./icon-192.png" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="두레대학 수강신청 — 시간표 도장 앱" />
    <meta property="og:url" content="https://designpaca.chanpaca.net/work/dure-enrollment/" />
@ -18,7 +22,7 @@
    <meta property="og:title" content="두레대학 수강신청 · 시간표" />
    <meta property="og:description" content="시간표에 얹히는 수강신청." />
    <meta property="og:type" content="website" />
-    <meta name="theme-color" content="#FBFAF7" />
+    <meta name="theme-color" content="#fafafa" />

    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
@ -31,10 +35,10 @@
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=IBM+Plex+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@500;600&display=swap"
    />
-    <link rel="stylesheet" href="./styles/main.css?v=18" />
+    <link rel="stylesheet" href="./styles/main.css?v=22" />
    <link
      rel="icon"
-      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23FBFAF7'/%3E%3Crect x='6' y='6' width='20' height='20' fill='none' stroke='%2317202E' stroke-width='2'/%3E%3Crect x='13' y='13' width='6' height='6' fill='%23C14B2B'/%3E%3C/svg%3E"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23fafafa'/%3E%3Crect x='6.5' y='6.5' width='19' height='19' rx='4' fill='%23c2410c'/%3E%3Crect x='9.5' y='10' width='5.5' height='4.5' rx='1' fill='%23ffffff'/%3E%3Crect x='16' y='10' width='6.5' height='4.5' rx='1' fill='%23ffffff' opacity='0.8'/%3E%3Crect x='9.5' y='15.8' width='5.5' height='9.2' rx='1' fill='%23ffffff' opacity='0.9'/%3E%3Crect x='16' y='15.8' width='6.5' height='6.2' rx='1' fill='%23ffffff' opacity='0.75'/%3E%3C/svg%3E"
    />
  </head>

@ -48,9 +52,15 @@
          <span class="brand-seal" aria-hidden="true">申</span>
          두레대학 수강신청
        </a>
+        <div class="appbar-actions">
+          <p class="kbd-hint"><kbd>1</kbd>–<kbd>6</kbd> 화면 전환 · <kbd>/</kbd> 과목 검색</p>
          <p class="credits" aria-live="polite">
            신청 학점 <strong id="credit-now">0</strong> / 18
          </p>
+          <button type="button" class="icon-btn" id="print-btn" aria-label="현재 화면 인쇄">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9V3h12v6"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="7" rx="1"/></svg>
+          </button>
+        </div>
      </div>
      <nav class="tabs" aria-label="화면">
        <button type="button" class="tab is-current" data-view="catalog" aria-current="page">과목 찾기</button>
@ -259,7 +269,58 @@
      </div>
    </dialog>

-    <script src="calc.js"></script>
+
+    <!-- ── 바텀 내비(모바일) — 엄지 존의 앱 문법. 넷 탭 + 더보기 시트 ── -->
+    <nav class="bottom-nav" aria-label="화면">
+      <button type="button" class="bnav-item is-current" data-view="catalog" aria-current="page">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <span>과목 찾기</span>
+      </button>
+      <button type="button" class="bnav-item" data-view="starred">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>
+        <span>관심</span>
+      </button>
+      <button type="button" class="bnav-item" data-view="enrollments">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/><path d="m9 16 2 2 4-4"/></svg>
+        <span>신청 내역</span>
+      </button>
+      <button type="button" class="bnav-item" data-view="credits">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>
+        <span>이수</span>
+      </button>
+      <button type="button" class="bnav-item" data-more aria-expanded="false" aria-haspopup="dialog">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="5" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="19" cy="5" r="1"/><circle cx="5" cy="19" r="1"/><circle cx="12" cy="19" r="1"/><circle cx="19" cy="19" r="1"/></svg>
+        <span>더보기</span>
+      </button>
+    </nav>
+
+    <!-- ── 더보기 시트 — 남은 두 화면의 원장 ── -->
+    <dialog id="more-dialog" class="modal more-sheet" aria-labelledby="more-h">
+      <div class="more-head">
+        <h2 id="more-h">전체 화면</h2>
+        <button type="button" class="modal-close" data-close aria-label="닫기">
+          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
+        </button>
+      </div>
+      <div class="more-list">
+        <p class="more-group">과목</p>
+        <button type="button" class="more-item" data-view="catalog">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>과목 찾기</button>
+        <button type="button" class="more-item" data-view="starred">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>관심 과목</button>
+        <button type="button" class="more-item" data-view="enrollments">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/><path d="m9 16 2 2 4-4"/></svg>신청 내역</button>
+        <button type="button" class="more-item" data-view="credits">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>이수 현황</button>
+        <p class="more-group">학사</p>
+        <button type="button" class="more-item" data-view="archive">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M9 14h6"/><path d="M9 10h6"/></svg>과목 총람</button>
+        <button type="button" class="more-item" data-view="notices">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>공지 · 변경</button>
+      </div>
+    </dialog>
+
+    <script src="calc.js?v=2"></script>
    <script>
      /*
        수강신청 상태 기계 — 겹침 검사, 학점 한도, 여석 감소까지 전부 진짜.
@ -303,39 +364,127 @@
      const hhmm = (t) => `${Math.floor(t)}:${t % 1 ? "30" : "00"}`;
      const timeLabel = (c) => c.days.map(fmtDay).join("·") + " " + hhmm(c.start) + "–" + hhmm(c.end);

-      // ── 탭(뷰) 전환 ──
+      // ── 뷰 전환(중앙) — 탭·바텀내비·더보기·히스토리가 같은 길을 쓴다 ──
      const views = document.querySelectorAll(".view");
-      const gotoView = (name) => {
+      const currentView = () => (history.state && history.state.v) || "catalog";
+      const setCurrentView = (name) => {
        document.querySelectorAll(".tab").forEach((b) => {
          const on = b.dataset.view === name;
          b.classList.toggle("is-current", on);
          if (on) b.setAttribute("aria-current", "page"); else b.removeAttribute("aria-current");
        });
+        document.querySelectorAll(".bnav-item[data-view]").forEach((b) => {
+          const on = b.dataset.view === name;
+          b.classList.toggle("is-current", on);
+          if (on) b.setAttribute("aria-current", "page"); else b.removeAttribute("aria-current");
+        });
+        const inMore = !document.querySelector(`.bnav-item[data-view="${name}"]`);
+        document.querySelector("[data-more]").classList.toggle("is-current", inMore);
+        document.querySelectorAll(".more-item[data-view]").forEach((b) => b.classList.toggle("is-current", b.dataset.view === name));
        views.forEach((v) => v.classList.toggle("is-on", v.id === "view-" + name));
        $("view-" + name).focus({ preventScroll: true });
      };
-      document.querySelectorAll(".tab").forEach((btn) => {
+      const gotoView = (name, push = true) => {
+        if (push) history.pushState({ v: name }, "");
+        setCurrentView(name);
+      };
+      history.replaceState({ v: currentView() }, "");
+      document.querySelectorAll(".tab, .bnav-item[data-view]").forEach((btn) => {
        btn.addEventListener("click", () => gotoView(btn.dataset.view));
      });
      document.querySelectorAll("[data-goto]").forEach((btn) => {
        btn.addEventListener("click", () => gotoView(btn.dataset.goto));
      });

-      // ── 겹침 검사 ──
-      const conflictsWith = (course) =>
-        [...enrolled]
-          .map((id) => COURSES.find((c) => c.id === id))
-          .filter((o) => DURE.isOverlap(course, o))
-          .map((o) => o.name);
+      // ── 다이얼로그 × 히스토리 — 열림마다 pushState, 뒤로 가기는 시트 닫기→이전 화면 ──
+      const DIALOGS = ["course-dialog", "more-dialog"];
+      let suppressPop = false;
+      let popClosing = false;
+      const openDialog = (dlg) => {
+        if (dlg.open) return;
+        history.pushState({ v: currentView(), d: dlg.id }, "");
+        dlg.showModal();
+        if (dlg.id === "more-dialog") document.querySelector("[data-more]").setAttribute("aria-expanded", "true");
+      };
+      DIALOGS.forEach((id) => {
+        const dlg = document.getElementById(id);
+        dlg.addEventListener("close", () => {
+          if (dlg.id === "more-dialog") document.querySelector("[data-more]").setAttribute("aria-expanded", "false");
+          if (popClosing) return;
+          if (history.state && history.state.d === dlg.id) { suppressPop = true; history.back(); }
+        });
+      });
+      let pendingMoreSelect = null;
+      window.addEventListener("popstate", () => {
+        if (suppressPop) { suppressPop = false; return; }
+        const s = history.state || {};
+        popClosing = true;
+        DIALOGS.forEach((id) => { const d = document.getElementById(id); if (d.open && s.d !== id) d.close(); });
+        popClosing = false;
+        if (s.v) setCurrentView(s.v);
+        if (pendingMoreSelect) { const v = pendingMoreSelect; pendingMoreSelect = null; gotoView(v, true); }
+      });
+      document.querySelector("[data-more]").addEventListener("click", () => openDialog($("more-dialog")));
+      document.querySelectorAll(".more-item[data-view]").forEach((b) => {
+        b.addEventListener("click", () => {
+          pendingMoreSelect = b.dataset.view;
+          history.back();
+        });
+      });

-      const credits = () => [...enrolled].reduce((sum, id) => sum + COURSES.find((c) => c.id === id).credits, 0);
-      const creditsOf = (dept) => DURE.credits([...enrolled].map((id) => COURSES.find((c) => c.id === id)).filter((c) => c.dept === dept));
+      // ── 겹침 검사는 calc.js 의 canEnroll 이 일괄 판정한다(아래 모달·실행취소가 공유) ──
+      const enrolledList = () => [...enrolled].map((id) => COURSES.find((c) => c.id === id));

-      const setStatus = (msg, isWarn) => {
+      const credits = () => DURE.credits(enrolledList());
+      const creditsOf = (dept) => DURE.credits(enrolledList().filter((c) => c.dept === dept));
+
+      let undoCourse = null; // 방금 취소한 과목 — 실행취소의 재료. 다른 취소가 오면 갈음된다
+      const appendUndo = (el) => {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "undo-btn";
+        btn.textContent = "실행취소";
+        el.append(" ", btn);
+      };
+      const setStatus = (msg, isWarn, undo) => {
        const el = $("status");
        el.textContent = msg;
        el.classList.toggle("is-warn", !!isWarn);
+        if (undo) appendUndo(el);
      };
+      const setEnStatus = (msg, undo) => {
+        const el = $("en-status");
+        el.textContent = msg;
+        if (undo) appendUndo(el);
+      };
+      const announceCancel = (c, where) => {
+        undoCourse = c;
+        const msg = `${c.name} 취소 · ${credits()}학점`;
+        if (where === "en") setEnStatus(msg, true);
+        else setStatus(msg, false, true);
+      };
+      // 실행취소 — 취소 직후의 조건만 다시 심사해 되돌린다. 사이에 다른 신청이 끼면 정당하게 막힌다
+      const tryUndo = () => {
+        const c = undoCourse;
+        undoCourse = null;
+        if (!c) return;
+        const verdict = DURE.canEnroll(c, enrolledList(), credits(), MAX_CREDITS);
+        if (verdict.ok) {
+          c.seats -= 1;
+          enrolled.add(c.id);
+          setStatus(`${c.name} 재신청 · ${timeLabel(c)} · ${credits()}학점`, false);
+          renderAll();
+        } else if (verdict.reason === "overlap") {
+          setStatus(`재신청 불가 — ${verdict.names.join(", ")}와(과) 시간이 겹칩니다.`, true);
+        } else if (verdict.reason === "credits") {
+          setStatus(`재신청 불가 — 기준 학점(${MAX_CREDITS})을 초과합니다.`, true);
+        } else {
+          setStatus("재신청 불가 — 정원이 마감되었습니다.", true);
+        }
+      };
+      document.addEventListener("click", (e) => {
+        if (e.target.closest(".undo-btn")) tryUndo();
+      });

      // ── 과목 행(과목 찾기 · 관심 과목 공용 문법) ──
      const courseRow = (c) => {
@ -463,7 +612,7 @@
        const c = COURSES.find((x) => x.id === btn.dataset.cancel);
        enrolled.delete(c.id);
        c.seats += 1;
-        $("en-status").textContent = `${c.name} 취소 · ${credits()}학점`;
+        announceCancel(c, "en");
        renderAll();
      });

@ -482,23 +631,12 @@
          (a, r) => ({ need: a.need + r.need, done: a.done + r.done, now: a.now + r.now }),
          { need: 0, done: 0, now: 0 }
        );
-        {
-          const done = sum.done, now = sum.now, need = sum.need;
-          $("cr-stats").innerHTML =
-            `<div>기준 <strong>${need}학점</strong></div>` +
-            `<div>이수 <strong>${done}학점</strong></div>` +
-            `<div>이번 학기 신청 <strong>${now}학점</strong></div>` +
-            `<div>합계 <strong>${done + now}학점</strong></div>` +
-            `<div>잔여 <strong>${need - done - now}학점</strong></div>`;
-        }
-        {
        $("cr-stats").innerHTML =
          `<div>기준 <strong>${sum.need}학점</strong></div>` +
          `<div>이수 <strong>${sum.done}학점</strong></div>` +
          `<div>이번 학기 신청 <strong>${sum.now}학점</strong></div>` +
          `<div>합계 <strong>${sum.done + sum.now}학점</strong></div>` +
          `<div>잔여 <strong>${sum.need - sum.done - sum.now}학점</strong></div>`;
-        }
        {
          const pct = Math.min(100, Math.round(((sum.done + sum.now) / sum.need) * 100));
          document.getElementById("cr-total-bar").style.width = pct + "%";
@ -699,24 +837,25 @@
        } else {
          apply.hidden = false;
          apply.disabled = true;
-          const clash = conflictsWith(c);
-          if (c.seats === 0) {
+          // 판정은 calc.js 의 순수 함수가 내린다 — 화면은 근거를 옮기기만 한다
+          const verdict = DURE.canEnroll(c, enrolledList(), credits(), MAX_CREDITS);
+          if (verdict.ok) {
+            apply.disabled = false;
+          } else if (verdict.reason === "full") {
            warn.textContent = "정원이 마감되었습니다. 다음 학기를 기다리거나 분반을 확인하세요.";
            warn.hidden = false;
-          } else if (clash.length) {
-            warn.textContent = `${clash.join(", ")}와(과) 시간이 겹칩니다. 둘 중 하나만 담을 수 있습니다.`;
-            warn.hidden = false;
-          } else if (credits() + c.credits> MAX_CREDITS) {
-            warn.textContent = `기준 학점(${MAX_CREDITS})을 초과합니다. 지금 ${credits()}학점입니다.`;
+          } else if (verdict.reason === "overlap") {
+            warn.textContent = `${verdict.names.join(", ")}와(과) 시간이 겹칩니다. 둘 중 하나만 담을 수 있습니다.`;
            warn.hidden = false;
          } else {
-            apply.disabled = false;
+            warn.textContent = `기준 학점(${MAX_CREDITS})을 초과합니다. 지금 ${credits()}학점입니다.`;
+            warn.hidden = false;
          }
        }
        const star = $("cd-star");
        star.setAttribute("aria-pressed", String(starred.has(c.id)));
        star.textContent = starred.has(c.id) ? "관심 빼기" : "관심 남기기";
-        dialog.showModal();
+        openDialog(dialog);
      };

      document.addEventListener("click", (e) => {
@ -735,9 +874,10 @@

      $("cd-cancel").addEventListener("click", () => {
        if (!current || !enrolled.has(current.id)) return;
-        enrolled.delete(current.id);
-        current.seats += 1;
-        setStatus(`${current.name} 취소 · ${credits()}학점`, false);
+        const c = current;
+        enrolled.delete(c.id);
+        c.seats += 1;
+        announceCancel(c);
        dialog.close();
        renderAll();
      });
@ -761,6 +901,23 @@
      dialog.addEventListener("click", (e) => { if (e.target === dialog) dialog.close(); });
      dialog.querySelector("[data-close]").addEventListener("click", () => dialog.close());

+      // ── 단축키 — 숫자키 화면 전환, / 검색. 입력 중에는 쓰지 않는다 ──
+      document.addEventListener("keydown", (e) => {
+        if (e.ctrlKey || e.metaKey || e.altKey) return;
+        const t = e.target;
+        if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+        if (e.key === "/") {
+          e.preventDefault();
+          gotoView("catalog");
+          $("q").focus();
+        } else if (/^[1-6]$/.test(e.key)) {
+          gotoView(["catalog", "starred", "enrollments", "credits", "archive", "notices"][+e.key - 1]);
+        }
+      });
+
+      // ── 인쇄 — 활성 화면(강의계획서 모달이 열려 있으면 그 서류)을 종이로 ──
+      $("print-btn").addEventListener("click", () => window.print());
+
      // ── 시작 ──
      buildAxis();
      renderAll();
--- a/apps/site/public/work/dure-enrollment/manifest.webmanifest
+++ b/apps/site/public/work/dure-enrollment/manifest.webmanifest
@ -0,0 +1,21 @@
+{
+  "name": "두레대학 수강신청",
+  "short_name": "두레대학 수강신청",
+  "start_url": "./",
+  "display": "standalone",
+  "background_color": "#fafafa",
+  "theme_color": "#fafafa",
+  "icons": [
+    {
+      "src": "./icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}
--- a/apps/site/public/work/dure-enrollment/og.png
+++ b/apps/site/public/work/dure-enrollment/og.png
--- a/apps/site/public/work/dure-enrollment/styles/main.css
+++ b/apps/site/public/work/dure-enrollment/styles/main.css
@ -10,9 +10,14 @@
 *::after { box-sizing: border-box; }
 * { margin: 0; }

-html { -webkit-text-size-adjust: 100%; background: var(--muted); }
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  background: var(--muted);
+}

 body {
+  overscroll-behavior-y: none; /* 의도치 않은 pull-to-refresh 차단 */
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-body);
@ -42,7 +47,16 @@ h3 { font-size: var(--step-0); font-weight: 500; }
 .mono { font-family: var(--font-mono); font-size: var(--font-mono-size); font-variant-numeric: tabular-nums; }
 .muted { color: var(--muted-foreground); }

-:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
+:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-xs); }
+
+/* 모션 취향 존중 — 무한 루프·등장 모션 전부 정지. 앱은 여전히 완전히 작동한다 */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

 .skip {
  position: absolute; left: -9999px; top: 0;
@ -68,6 +82,12 @@ h3 { font-size: var(--step-0); font-weight: 500; }
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
 }
+.appbar-actions { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
+/* 좁은 화면에서는 액션 줄이 브랜드 아래로 — 최소폭 합이 320px 를 넘기 때문 */
+@media (max-width: 680px) {
+  .appbar-inner { flex-wrap: wrap; row-gap: 0; }
+  .appbar-actions { flex: 1 1 100%; justify-content: space-between; }
+}
 .brand {
  font-family: var(--font-display);
  display: inline-flex; align-items: center; gap: var(--space-2);
@ -78,7 +98,7 @@ h3 { font-size: var(--step-0); font-weight: 500; }
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--accent);
-  color: #fff;
+  color: var(--on-accent);
  border-radius: var(--radius);
  font-size: var(--step-0); font-weight: 600;
 }
@ -87,7 +107,7 @@ h3 { font-size: var(--step-0); font-weight: 500; }
  color: var(--muted-foreground);
  background: var(--muted-2);
  border: 1px solid var(--border);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--step-1);
  white-space: nowrap;
@ -128,6 +148,12 @@ h3 { font-size: var(--step-0); font-weight: 500; }
 .view.is-on { display: block; }
 .view:focus { outline: none; }
 .view > h1 { margin-bottom: 4px; }
+
+/* 뷰 전환 — 상태 변화를 알리는 70ms 상승. 감사·스크린샷 대기(100ms) 안에 끝난다 */
+@media (prefers-reduced-motion: no-preference) {
+  .view.is-on { animation: view-in 70ms var(--ease-out) both; }
+  @keyframes view-in { from { opacity: 0; transform: translateY(4px); } }
+}
 .view-sub { color: var(--muted-foreground); font-size: var(--step-0); margin-bottom: var(--space-5); max-width: 46em; }
 #view-catalog.is-on {
  display: grid;
@ -181,7 +207,7 @@ h3 { font-size: var(--step-0); font-weight: 500; }
  display: inline-flex; gap: 2px;
  background: var(--muted-2);
  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
  padding: 3px;
 }
 .chip {
@ -216,7 +242,7 @@ h3 { font-size: var(--step-0); font-weight: 500; }
  font-size: var(--step--1); font-weight: 500;
  color: var(--muted-foreground);
  background: var(--muted-2);
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
  padding: 1px 6px;
 }
 .c-sub { color: var(--muted-foreground); font-size: var(--step--1); }
@ -228,8 +254,8 @@ h3 { font-size: var(--step-0); font-weight: 500; }
 .c-seal {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
-  background: var(--accent); color: #fff;
-  border-radius: 4px;
+  background: var(--accent); color: var(--on-accent);
+  border-radius: var(--radius-xs);
  font-size: var(--step--1);
 }
 .empty { padding: var(--space-4) 0; color: var(--muted-foreground); }
@ -349,7 +375,7 @@ tbody tr:hover { background: var(--muted); }
 .status.is-warn { color: var(--danger); }
 .tt-legend { display: flex; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--step--1); color: var(--muted-foreground); }
 .key { display: inline-flex; align-items: center; gap: 6px; }
-.key i { width: 10px; height: 10px; display: inline-block; border-radius: 3px; }
+.key i { width: 10px; height: 10px; display: inline-block; border-radius: var(--radius-xs); }
 .k-major { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
 .k-gen { background: var(--muted-2); box-shadow: inset 2px 0 0 var(--border-strong); }
 .k-seal { background: var(--accent); }
@ -361,11 +387,11 @@ tbody tr:hover { background: var(--muted); }
  height: 36px; padding: 0 var(--space-4);
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
-  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease, scale 80ms ease;
+  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
  white-space: nowrap;
 }
-.btn-seal { background: var(--accent); border: 1px solid var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
-.btn-seal:hover:not(:disabled) { background: #9a3412; border-color: #9a3412; }
+.btn-seal { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
+.btn-seal:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
 .btn-seal:disabled { opacity: 0.45; cursor: not-allowed; }
 .btn-line { background: var(--card); border: 1px solid var(--border-strong); color: var(--foreground); box-shadow: var(--shadow-sm); }
 .btn-line:hover { background: var(--muted); }
@ -387,7 +413,7 @@ tbody tr:hover { background: var(--muted); }
  overflow: hidden;
  box-shadow: var(--shadow-xl);
 }
-.modal::backdrop { background: rgb(9 9 11 / 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
+.modal::backdrop { background: var(--backdrop-dim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
@ -404,29 +430,29 @@ tbody tr:hover { background: var(--muted); }
 .mcover-mark {
  position: absolute; right: -18px; bottom: -24px;
  font-size: 8rem; font-weight: 600; line-height: 1;
-  color: rgb(250 250 250 / 0.05);
+  color: var(--panel-mark);
  pointer-events: none; user-select: none;
 }
 .mcover-seal {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--step-2); font-weight: 600;
-  color: #fff;
+  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
 }
 .mcover-name { font-size: var(--step-3); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; word-break: keep-all; }
-.mcover-meta { color: #a1a1aa; font-size: var(--step--1); margin-top: var(--space-2); }
-.mcover-stats { margin-top: var(--space-5); border-top: 1px solid rgb(250 250 250 / 0.12); }
+.mcover-meta { color: var(--panel-muted); font-size: var(--step--1); margin-top: var(--space-2); }
+.mcover-stats { margin-top: var(--space-5); border-top: 1px solid var(--panel-line); }
 .mcover-stats > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) 0;
-  border-bottom: 1px solid rgb(250 250 250 / 0.12);
+  border-bottom: 1px solid var(--panel-line);
 }
-.mcover-stats dt { font-size: var(--step--1); color: #a1a1aa; }
+.mcover-stats dt { font-size: var(--step--1); color: var(--panel-muted); }
 .mcover-stats dd { font-size: var(--step--1); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
-.mcover-foot { margin-top: auto; color: #71717a; font-size: var(--step--2); }
+.mcover-foot { margin-top: auto; color: var(--panel-faint); font-size: var(--step--2); }

 .msheet {
  position: relative;
@ -440,8 +466,6 @@ tbody tr:hover { background: var(--muted); }
 }
 .cd-line { color: var(--muted-foreground); font-size: var(--step-0); }
 .msec h3 { color: var(--muted-foreground); margin-bottom: var(--space-3); font-weight: 500; font-size: var(--step-0); }
-.modal-title { font-size: var(--step-3); letter-spacing: -0.02em; }
-.modal-meta { color: var(--muted-foreground); margin-top: 2px; }
 .modal-close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 32px; height: 32px;
@ -452,16 +476,8 @@ tbody tr:hover { background: var(--muted); }
  z-index: 2;
 }
 .modal-close:hover { background: var(--muted-2); color: var(--foreground); }
-.modal-inner { position: relative; padding: var(--space-6); display: grid; gap: var(--space-4); }
 .modal-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

-.facts {
-  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3);
-  border-block: 1px solid var(--border);
-  padding-block: var(--space-4);
-}
-.facts dt { font-size: var(--step--1); color: var(--muted-foreground); }
-.facts dd { font-weight: 600; margin-top: 2px; }
 .warn {
  font-size: var(--step-0);
  color: var(--danger-ink);
@ -476,7 +492,7 @@ tbody tr:hover { background: var(--muted); }
 .cd-track { display: grid; justify-items: center; gap: var(--space-1); }
 .cd-rail { position: relative; width: 100%; height: 92px; border-left: 1px solid var(--border-strong); }
 .cd-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); }
-.cd-slot { position: absolute; left: 0; right: 4px; border-radius: 3px; }
+.cd-slot { position: absolute; left: 0; right: 4px; border-radius: var(--radius-xs); }
 .cd-slot.is-major { background: var(--accent-soft); border-left: 3px solid var(--accent); }
 .cd-slot.is-gen { background: var(--muted-2); border-left: 3px solid var(--border-strong); }
 .cd-day-l { font-size: var(--step--2); color: var(--faint); }
@ -485,15 +501,15 @@ tbody tr:hover { background: var(--muted); }
 /* 평가 누적 막대 — 벽돌의 농도 3단 */
 .eval-bar {
  display: flex; height: 14px;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--muted-2);
 }
 .eval-seg { display: block; height: 100%; }
 .eval-seg.seg-1 { background: var(--accent); }
-.eval-seg.seg-2 { background: color-mix(in srgb, var(--accent) 55%, #fff); }
-.eval-seg.seg-3 { background: color-mix(in srgb, var(--accent) 22%, #fff); }
+.eval-seg.seg-2 { background: var(--accent-tint-2); }
+.eval-seg.seg-3 { background: var(--accent-tint-3); }
 .eval-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
 .eval-legend dt { color: var(--muted-foreground); font-size: var(--step--1); }
 .eval-legend dd { font-weight: 600; font-size: var(--step--1); }
@ -504,7 +520,12 @@ tbody tr:hover { background: var(--muted); }
  .timetable-panel { position: static; }
  .notice-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .no-kind, .no-date { justify-self: start; }
-  .layout { padding: var(--space-4) var(--space-4) 64px; }
+  /* 모바일 앱 — 내비는 바텀 탭으로(HIG·M3), 앱바는 safe-area 를 존중한다 */
+  .tabs { display: none; }
+  .appbar { padding-top: var(--safe-top); }
+  .layout {
+    padding: var(--space-4) max(var(--space-4), var(--safe-right)) calc(72px + var(--safe-bottom)) max(var(--space-4), var(--safe-left));
+  }
 }
@media (max-width: 680px) {
  .mspread { grid-template-columns: minmax(0, 1fr); }
@ -517,8 +538,6 @@ tbody tr:hover { background: var(--muted); }
  .msheet { padding: var(--space-4); min-height: 0; }
  .course-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .c-side { text-align: left; display: flex; gap: var(--space-3); align-items: center; }
-  .modal-inner { padding: var(--space-4); }
-  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .modal-actions { flex-wrap: wrap; }
 }

@ -557,11 +576,170 @@ tbody tr:hover { background: var(--muted); }
 .view-sub, .no-body, .st-warn, .empty, .notice-list { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }

 /* ── 라운드 1: 이수 진행 바 · 학점 게이지 · 관심 추천 ── */
-.cr-bar { height: 6px; border-radius: 999px; background: var(--muted-2); overflow: hidden; min-width: 90px; }
-.cr-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
+.cr-bar { height: 6px; border-radius: var(--radius-pill); background: var(--muted-2); overflow: hidden; min-width: 90px; }
+.cr-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
 .cr-total { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
 .cr-total .cr-bar { height: 8px; }
-.credit-gauge { height: 8px; border-radius: 999px; background: var(--muted-2); overflow: hidden; margin: 10px 0 6px; }
-.credit-gauge i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 200ms ease; }
+.credit-gauge { height: 8px; border-radius: var(--radius-pill); background: var(--muted-2); overflow: hidden; margin: 10px 0 6px; }
+.credit-gauge i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--dur-3) var(--ease-out); }
 .h-note { font-size: var(--step--1); font-weight: 400; color: var(--muted-foreground); margin-left: 8px; }
 .st-suggest { margin-top: var(--space-4); }
+
+/* ── 단축키 안내 — 물리 키 모양의 kbd ── */
+kbd {
+  font-family: var(--font-mono); font-size: var(--step--2); line-height: 1;
+  color: var(--muted-foreground);
+  background: var(--card);
+  border: 1px solid var(--border-strong); border-bottom-width: 2px;
+  border-radius: var(--radius-xs);
+  padding: 2px 5px;
+  white-space: nowrap;
+}
+.kbd-hint {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: var(--step--2); color: var(--faint);
+  white-space: nowrap;
+}
+@media (max-width: 900px) { .kbd-hint { display: none; } }
+
+/* ── 앱바 아이콘 버튼(인쇄) ── */
+.icon-btn {
+  width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: var(--radius); border: none; background: none; cursor: pointer;
+  color: var(--muted-foreground);
+  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+}
+.icon-btn:hover { background: var(--muted-2); color: var(--foreground); }
+
+/* ── 상태줄 실행취소 — 취소는 되돌릴 수 있어야 한다 ── */
+.status .undo-btn {
+  appearance: none; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: var(--step--1); font-weight: 600;
+  color: var(--accent-ink);
+  padding: 0 2px;
+  text-decoration: underline; text-underline-offset: 3px;
+}
+.status .undo-btn:hover { color: var(--accent); }
+
+/* ── 인쇄 — 시간표·강의계획서의 본연. 앱 크롬은 물러나고 서류만 ── */
+@media print {
+  @page { size: A4 landscape; margin: 10mm; }
+  html, body { background: var(--print-paper); }
+  .skip, .tabs, .credits, .toolbar, .tt-hint, .status, .tt-legend, .kbd-hint, .icon-btn,
+  .empty-box .btn-line, .sheet-note { display: none !important; }
+  .appbar { position: static; border-bottom: 1px solid var(--print-line); }
+  .appbar-inner { padding: 0; }
+  .layout { max-width: none; padding: 6mm 0 0; }
+  .view { display: none !important; }
+  .view.is-on { display: block !important; animation: none; }
+  #view-catalog.is-on { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6mm; }
+  .view > h1 { font-size: 13pt; }
+  .view-sub { font-size: 9pt; margin-bottom: 4mm; }
+  .sheet { box-shadow: none; border-color: var(--print-line); break-inside: avoid; }
+  .table-wrap { overflow: visible; }
+  table { font-size: 9pt; }
+  thead th, tbody tr { break-inside: avoid; }
+  tbody tr:hover { background: none; }
+  .tt { min-width: 0; }
+  .tt-block, .cd-slot, .eval-seg, .c-seal, .c-dept, .no-kind {
+    print-color-adjust: exact; -webkit-print-color-adjust: exact;
+  }
+
+  /* 강의계획서 모달이 열려 있으면 앱 대신 그 서류만 인쇄한다 */
+  dialog[open].modal {
+    display: block; position: static; width: 100%; max-height: none;
+    border: 0; box-shadow: none;
+  }
+  dialog[open].modal::backdrop { display: none; }
+  body:has(dialog[open].modal) .appbar,
+  body:has(dialog[open].modal) .layout { display: none; }
+  .mspread { grid-template-columns: 190pt minmax(0, 1fr); max-height: none; }
+  .mcover { background: var(--primary) !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
+  .msheet { overflow: visible; }
+  .modal-close { display: none; }
+}
+
+/* ── 모바일 앱 기반 — 표준 위생(WebKit·M3·CSS-Tricks 조사 research/mobile-app-ux-v1.md) ── */
+:is(button, a, input, select, textarea) { touch-action: manipulation; } /* 더블탭 줌 지연 제거 */
+@media (max-width: 680px) {
+  /* iOS 포커스 자동 확대 방지(CSS-Tricks) — #q 가 font:inherit 로 요소 선택자를 덮으므로
+     같은 명시도 이상으로 파일 뒤에서 이긴다 */
+  input, select, textarea, #q { font-size: 16px; }
+}
+
+/* ── 바텀 내비 — HIG 탭바(5~6 이하)·M3 바텀 내비(3~5 목적지·48dp). 나머지 화면은 더보기 시트로 ── */
+.bottom-nav {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
+  display: none;
+  background: var(--card);
+  border-top: 1px solid var(--border);
+  padding: 6px max(var(--space-2), var(--safe-left)) calc(6px + var(--safe-bottom)) max(var(--space-2), var(--safe-right));
+}
+@media (max-width: 900px) { .bottom-nav { display: grid; grid-auto-flow: column; } }
+.bnav-item {
+  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
+  display: grid; justify-items: center; align-content: center; gap: 3px;
+  min-height: 52px; min-width: 48px; padding: 4px 2px;
+  border-radius: var(--radius);
+  color: var(--muted-foreground);
+}
+.bnav-item span { font-size: var(--step--2); font-weight: 500; }
+.bnav-item.is-current { color: var(--accent-ink); font-weight: 600; }
+.bnav-item.is-current svg { color: var(--accent); }
+
+/* ── 더보기 시트 — 전체 화면 원장. 그룹 문법은 데스크톱 내비와 같다 ── */
+.more-sheet { width: min(94vw, 440px); }
+.more-head {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: var(--space-4) var(--space-5) var(--space-2);
+}
+.more-head h2 { font-size: var(--step-2); }
+.more-list {
+  display: grid; overflow-y: auto; overscroll-behavior: contain;
+  padding: var(--space-2) var(--space-4) calc(var(--space-4) + var(--safe-bottom));
+}
+.more-group {
+  font-size: var(--step-1); font-weight: 500; color: var(--muted-foreground);
+  padding: var(--space-3) var(--space-2) var(--space-1);
+}
+.more-item {
+  appearance: none; background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
+  display: flex; align-items: center; gap: var(--space-3);
+  min-height: 48px; padding: var(--space-2);
+  border-radius: var(--radius); color: var(--foreground);
+}
+.more-item svg { color: var(--muted-foreground); flex: none; }
+.more-item.is-current { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
+.more-item.is-current svg { color: var(--accent); }
+
+/* ── 바텀 시트(≤680) — 모바일 모달은 하단 시트(NN/g·HIG). 그래버·상단 라운드·내부 스크롤 ── */
+@media (max-width: 680px) {
+  dialog.modal {
+    top: auto; bottom: 0; left: 0; right: 0;
+    margin: 0 auto;
+    width: 100%; max-width: 100%;
+    max-height: 92dvh;
+    border-left: 0; border-right: 0; border-bottom: 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    animation: sheet-up var(--dur-3) var(--ease-out) both;
+  }
+  dialog.modal::before { /* 그래버 — 시트의 표준 존재 표시 */
+    content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0;
+    width: 36px; height: 4px; border-radius: var(--radius-pill);
+    background: var(--border-strong); z-index: 3;
+  }
+  @keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
+  .mspread { max-height: 92dvh; }
+}
+
+/* ── 터치 타깃 — M3 48dp·HIG 44pt 정신의 44px 하한(coarse 포인터에서만) ── */
+@media (pointer: coarse) {
+  .chip, .give-btn, .btn-line { min-height: 44px; }
+  .icon-btn, .bell, .modal-close { width: 44px; height: 44px; }
+  .btn-seal, .btn-star { min-height: 44px; }
+  #q { min-height: 44px; }
+}
+
+/* 인쇄·데스크톱에서 모바일 전용 크롬은 존재하지 않는다 */
+@media print { .bottom-nav, #more-dialog { display: none !important; } }
--- a/apps/site/public/work/dure-enrollment/styles/tokens.css
+++ b/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);
 }
--- a/apps/site/public/work/gaon-lms/calc.js
+++ b/apps/site/public/work/gaon-lms/calc.js
@ -51,7 +51,17 @@
    };
  };

-  const api = { attSummary, dayTotal, dayPresent, counts, rosterStats };
+  // 채점 입력 검증 — 빈 칸·숫자 아님·범위 밖을 모두 걸러낸다. 모달과 단위 테스트가 같은 판정을 공유한다.
+  const validateScore = (raw) => {
+    const s = String(raw ?? "").trim();
+    if (!s) return { ok: false, reason: "empty" };
+    const v = Number(s);
+    if (Number.isNaN(v)) return { ok: false, reason: "nan" };
+    if (v < 0 || v > 100) return { ok: false, reason: "range" };
+    return { ok: true, value: v };
+  };
+
+  const api = { attSummary, dayTotal, dayPresent, counts, rosterStats, validateScore };
  global.GAON = api;
  if (typeof module !== "undefined") module.exports = api;
 })(typeof window !== "undefined" ? window : globalThis);
--- a/apps/site/public/work/gaon-lms/icon-192.png
+++ b/apps/site/public/work/gaon-lms/icon-192.png
--- a/apps/site/public/work/gaon-lms/icon-512.png
+++ b/apps/site/public/work/gaon-lms/icon-512.png
--- a/apps/site/public/work/gaon-lms/index.html
+++ b/apps/site/public/work/gaon-lms/index.html
@ -2,8 +2,12 @@
 <html lang="ko">
  <head>
    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <title>가온 학적부 · 학습관리 대시보드</title>
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link rel="manifest" href="./manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="./icon-192.png" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="가온 학적부 — 학습관리 콘솔" />
    <meta property="og:url" content="https://designpaca.chanpaca.net/work/gaon-lms/" />
@ -18,7 +22,7 @@
    <meta property="og:title" content="가온 학적부 · 학습관리 대시보드" />
    <meta property="og:description" content="출석부에서 출발한 학습관리 대시보드." />
    <meta property="og:type" content="website" />
-    <meta name="theme-color" content="#F7F5EF" />
+    <meta name="theme-color" content="#fafafa" />

    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
@ -31,10 +35,10 @@
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Noto+Serif+KR:wght@500;600&display=swap"
    />
-    <link rel="stylesheet" href="./styles/main.css?v=17" />
+    <link rel="stylesheet" href="./styles/main.css?v=22" />
    <link
      rel="icon"
-      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F7F5EF'/%3E%3Crect x='7' y='6' width='18' height='2.4' fill='%2324272B'/%3E%3Crect x='7' y='12' width='18' height='2.4' fill='%23F5D662'/%3E%3Crect x='7' y='18' width='12' height='2.4' fill='%2324272B'/%3E%3Crect x='7' y='24' width='18' height='2.4' fill='%23F5D662'/%3E%3C/svg%3E"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23fafafa'/%3E%3Crect x='6.5' y='6.5' width='19' height='19' rx='4' fill='%23059669'/%3E%3Crect x='10' y='12' width='12' height='1.8' rx='0.9' fill='%23ffffff'/%3E%3Crect x='10' y='15.5' width='8' height='1.8' rx='0.9' fill='%23ffffff' opacity='0.85'/%3E%3Crect x='10' y='19' width='10' height='1.8' rx='0.9' fill='%23ffffff' opacity='0.7'/%3E%3C/svg%3E"
    />
  </head>

@ -88,6 +92,7 @@
          강사 김가온 · 3월 2주차<br />
          <span class="mono">2026학년도 1학기</span>
        </p>
+        <p class="side-kbd"><kbd>1</kbd>–<kbd>9</kbd> 화면 전환 · <kbd>/</kbd> 수강생 검색</p>
      </aside>

      <main id="main" class="main">
@ -95,6 +100,9 @@
          <p class="crumb">가온 학적부 <span aria-hidden="true">/</span> <strong id="crumb-view">대시보드</strong></p>
          <div class="topbar-right">
            <span class="term-badge mono">2026학년도 1학기 · 3월 2주차</span>
+            <button type="button" class="icon-btn" id="print-btn" aria-label="현재 화면 인쇄">
+              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9V3h12v6"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="7" rx="1"/></svg>
+            </button>
            <div class="bell-wrap">
              <button type="button" class="bell" id="bell" aria-label="읽지 않은 알림 3건" aria-expanded="false" aria-haspopup="true">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
@ -133,7 +141,6 @@
              <h2 class="v-h" id="dash-h">이번 주, 열두 명 중 열 명</h2>
              <p class="view-sub">3월 9일 월요일 오전 기준. 명단 12명 중 재학 10명, 주간 출석은 지난 주(3/2–3/6) 결산입니다.</p>
            </div>
-            <p class="stamp" aria-hidden="true">3월 2주</p>
          </header>

          <dl class="headline">
@ -369,7 +376,6 @@
              <h2 class="v-h" id="att-h">출석부</h2>
              <p class="view-sub">칸을 누르면 출석 · 지각 · 결석이 순환합니다. 반과 주를 바꿔가며 적습니다.</p>
            </div>
-            <p class="stamp" aria-hidden="true">3월</p>
          </header>

          <div class="toolbar">
@ -631,7 +637,6 @@
              <h2 class="v-h" id="re-h">학기 리포트</h2>
              <p class="view-sub">아래 표는 명단에서 직접 계산합니다. 채점이 끝나지 않은 과목의 점수는 비워 둡니다.</p>
            </div>
-            <p class="stamp" aria-hidden="true">1학기 중간</p>
          </header>

          <div class="headline headline-4" id="rep-stats"><!-- JS --></div>
@ -721,6 +726,7 @@
            </tbody>
          </table>
        </div>
+        <p class="score-warn" id="as-warn" role="alert" hidden></p>
        <p class="as-summary mono" aria-live="polite">
          제출 3명 · 평균 <strong class="hl" id="as-avg">91.7</strong>점
        </p>
@ -731,7 +737,64 @@
      </div>
    </dialog>

-    <script src="calc.js"></script>
+    <!-- ── 바텀 내비(모바일) — 엄지 존의 앱 문법. 다섯 탭 + 더보기 시트 ── -->
+    <nav class="bottom-nav" aria-label="화면">
+      <button type="button" class="bnav-item is-current" data-view="dashboard" aria-current="page">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
+        <span>홈</span>
+      </button>
+      <button type="button" class="bnav-item" data-view="students">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+        <span>수강생</span>
+      </button>
+      <button type="button" class="bnav-item" data-view="attendance">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="m9 14 2 2 4-4"/></svg>
+        <span>출석부</span>
+      </button>
+      <button type="button" class="bnav-item" data-view="grades">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M9 14h6"/><path d="M9 10h6"/></svg>
+        <span>성적</span>
+      </button>
+      <button type="button" class="bnav-item" data-more aria-expanded="false" aria-haspopup="dialog">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="5" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="19" cy="5" r="1"/><circle cx="5" cy="19" r="1"/><circle cx="12" cy="19" r="1"/><circle cx="19" cy="19" r="1"/></svg>
+        <span>더보기</span>
+      </button>
+    </nav>
+
+    <!-- ── 더보기 시트 — 전체 아홉 화면의 원장. 그룹 문법은 사이드 내비와 같다 ── -->
+    <dialog id="more-dialog" class="modal more-sheet" aria-labelledby="more-h">
+      <div class="more-head">
+        <h2 id="more-h">전체 화면</h2>
+        <button type="button" class="modal-close" data-close aria-label="닫기">
+          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
+        </button>
+      </div>
+      <div class="more-list">
+        <p class="more-group">학적</p>
+        <button type="button" class="more-item" data-view="dashboard">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>대시보드</button>
+        <button type="button" class="more-item" data-view="students">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>수강생</button>
+        <button type="button" class="more-item" data-view="attendance">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="m9 14 2 2 4-4"/></svg>출석부</button>
+        <p class="more-group">수업</p>
+        <button type="button" class="more-item" data-view="grades">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M9 14h6"/><path d="M9 10h6"/></svg>과제 · 성적</button>
+        <button type="button" class="more-item" data-view="files">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>자료실</button>
+        <p class="more-group">학사</p>
+        <button type="button" class="more-item" data-view="calendar">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/></svg>학사 일정</button>
+        <button type="button" class="more-item" data-view="counsel">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>상담 기록</button>
+        <button type="button" class="more-item" data-view="report">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>학기 리포트</button>
+        <button type="button" class="more-item" data-view="notice">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>공지 · 알림</button>
+      </div>
+    </dialog>
+
+    <script src="calc.js?v=2"></script>
    <script>
      /*
        앱 상태는 전부 이 안에 있다. 서버도 localStorage 도 없다 — 데모 원칙.
@ -754,17 +817,70 @@
      ];
      const SUBJECTS = ["수학 심화 B", "국어 논술 A", "코딩 입문", "과학 실험"];

-      // ── 뷰 전환 ──
+      // ── 뷰 전환(중앙) — 사이드바·바텀내비·더보기·히스토리가 같은 길을 쓴다 ──
      const views = document.querySelectorAll(".view");
-      document.querySelectorAll(".side-link").forEach((btn) => {
-        btn.addEventListener("click", () => {
+      const VIEW_LABEL = { dashboard: "대시보드", students: "수강생", attendance: "출석부", grades: "과제 · 성적", files: "자료실", calendar: "학사 일정", counsel: "상담 기록", report: "학기 리포트", notice: "공지 · 알림" };
+      const currentView = () => (history.state && history.state.v) || "dashboard";
+      const setCurrentView = (name) => {
        document.querySelectorAll(".side-link").forEach((b) => {
-            b.classList.toggle("is-current", b === btn);
-            if (b === btn) b.setAttribute("aria-current", "page"); else b.removeAttribute("aria-current");
+          const on = b.dataset.view === name;
+          b.classList.toggle("is-current", on);
+          if (on) b.setAttribute("aria-current", "page"); else b.removeAttribute("aria-current");
        });
-          views.forEach((v) => v.classList.toggle("is-on", v.id === "view-" + btn.dataset.view));
-          document.getElementById("crumb-view").textContent = btn.textContent.trim();
-          document.getElementById("view-" + btn.dataset.view).focus({ preventScroll: true });
+        document.querySelectorAll(".bnav-item[data-view]").forEach((b) => {
+          const on = b.dataset.view === name;
+          b.classList.toggle("is-current", on);
+          if (on) b.setAttribute("aria-current", "page"); else b.removeAttribute("aria-current");
+        });
+        const inMore = !document.querySelector(`.bnav-item[data-view="${name}"]`);
+        document.querySelector("[data-more]").classList.toggle("is-current", inMore);
+        document.querySelectorAll(".more-item[data-view]").forEach((b) => b.classList.toggle("is-current", b.dataset.view === name));
+        views.forEach((v) => v.classList.toggle("is-on", v.id === "view-" + name));
+        document.getElementById("crumb-view").textContent = VIEW_LABEL[name] || name;
+        document.getElementById("view-" + name).focus({ preventScroll: true });
+      };
+      const gotoView = (name, push = true) => {
+        if (push) history.pushState({ v: name }, "");
+        setCurrentView(name);
+      };
+      history.replaceState({ v: currentView() }, "");
+      document.querySelectorAll(".side-link, .bnav-item[data-view]").forEach((btn) => {
+        btn.addEventListener("click", () => gotoView(btn.dataset.view));
+      });
+
+      // ── 다이얼로그 × 히스토리 — 열림마다 pushState, 뒤로 가기는 시트 닫기→이전 화면(Android 내비 원칙·Baymard) ──
+      const DIALOGS = ["stu-dialog", "as-dialog", "more-dialog"];
+      let suppressPop = false; // 닫기가 부른 back 의 popstate — 이미 처리된 상태
+      let popClosing = false; // popstate 가 직접 닫는 중 — close 핸들러가 back 을 다시 부르지 않게
+      const openDialog = (dlg) => {
+        if (dlg.open) return;
+        history.pushState({ v: currentView(), d: dlg.id }, "");
+        dlg.showModal();
+        if (dlg.id === "more-dialog") document.querySelector("[data-more]").setAttribute("aria-expanded", "true");
+      };
+      DIALOGS.forEach((id) => {
+        const dlg = document.getElementById(id);
+        dlg.addEventListener("close", () => {
+          if (dlg.id === "more-dialog") document.querySelector("[data-more]").setAttribute("aria-expanded", "false");
+          if (popClosing) return;
+          if (history.state && history.state.d === dlg.id) { suppressPop = true; history.back(); }
+        });
+      });
+      let pendingMoreSelect = null;
+      window.addEventListener("popstate", () => {
+        if (suppressPop) { suppressPop = false; return; }
+        const s = history.state || {};
+        popClosing = true;
+        DIALOGS.forEach((id) => { const d = document.getElementById(id); if (d.open && s.d !== id) d.close(); });
+        popClosing = false;
+        if (s.v) setCurrentView(s.v);
+        if (pendingMoreSelect) { const v = pendingMoreSelect; pendingMoreSelect = null; gotoView(v, true); }
+      });
+      document.querySelector("[data-more]").addEventListener("click", () => openDialog(document.getElementById("more-dialog")));
+      document.querySelectorAll(".more-item[data-view]").forEach((b) => {
+        b.addEventListener("click", () => {
+          pendingMoreSelect = b.dataset.view;
+          history.back(); // {d} 엔트리 정리 → popstate 에서 닫힘+전환까지 마친다
        });
      });

@ -1223,18 +1339,38 @@
          renderCounsel(); // 상담 기록 화면도 함께 갱신
          input.focus();
        };
-        stuDialog.showModal();
+        openDialog(stuDialog);
      });

-      // ── 채점 모달: 점수를 고치면 평균이 따라온다 ──
+      // ── 채점 모달: 점수를 고치면 검증과 평균이 따라온다. 범위 밖이면 이유를 말하고 저장을 막는다 ──
      const asDialog = document.getElementById("as-dialog");
      const scoreInputs = [...document.querySelectorAll(".grade-table .score")];
-      const updateAvg = () => {
-        const vals = scoreInputs.map((inp) => +inp.value || 0);
-        const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
-        document.getElementById("as-avg").textContent = avg.toFixed(1);
+      const syncGrading = () => {
+        const results = scoreInputs.map((inp) => ({ inp, ok: GAON.validateScore(inp.value).ok }));
+        results.forEach(({ inp, ok }) => {
+          inp.classList.toggle("is-bad", !ok);
+          inp.setAttribute("aria-invalid", String(!ok));
+        });
+        const bad = results.filter((r) => !r.ok);
+        const warnEl = document.getElementById("as-warn");
+        const saveBtn = document.getElementById("as-save");
+        if (bad.length) {
+          const names = bad
+            .map(({ inp }) => document.querySelector(`label[for="${inp.id}"]`).textContent.replace(" 점수", ""))
+            .join(", ");
+          warnEl.textContent = `0에서 100 사이의 점수를 넣어주세요. 범위 밖: ${names}`;
+          warnEl.hidden = false;
+          saveBtn.disabled = true;
+        } else {
+          warnEl.hidden = true;
+          saveBtn.disabled = false;
+        }
+        const vals = results.filter(({ ok }) => ok).map(({ inp }) => +inp.value);
+        document.getElementById("as-avg").textContent = vals.length
+          ? (vals.reduce((a, b) => a + b, 0) / vals.length).toFixed(1)
+          : "—";
      };
-      scoreInputs.forEach((inp) => inp.addEventListener("input", updateAvg));
+      scoreInputs.forEach((inp) => inp.addEventListener("input", syncGrading));
      const ASSIGN = { a1: "미분 응용 세트 3 · 수학 심화 B", a2: "자기소개 논술 초고 · 국어 논술 A", a3: "변수와 조건 워크시트 · 코딩 입문", a4: "측정과 그래프 리포트 · 과학 실험" };
      let currentAssign = null;
      document.addEventListener("click", (e) => {
@ -1243,9 +1379,11 @@
        currentAssign = btn.dataset.assign;
        document.getElementById("as-dlg-meta").textContent = ASSIGN[currentAssign] || "";
        document.getElementById("as-saved").hidden = true;
-        asDialog.showModal();
+        syncGrading();
+        openDialog(asDialog);
      });
      document.getElementById("as-save").addEventListener("click", () => {
+        if (document.getElementById("as-save").disabled) return;
        document.getElementById("as-saved").hidden = false;
        const row = document.querySelector(`#as-table .row-open[data-assign="${currentAssign}"]`);
        const cell = row?.closest("tr").querySelector(".state");
@ -1286,6 +1424,15 @@
      });
      syncBell();

+      // 알림 센터도 Esc 로 닫는다 — 모달과 같은 근육
+      document.addEventListener("keydown", (e) => {
+        if (e.key !== "Escape" || !bellMenu.classList.contains("is-open")) return;
+        bellMenu.classList.remove("is-open");
+        bell.classList.remove("is-open");
+        bell.setAttribute("aria-expanded", "false");
+        bell.focus();
+      });
+
      // ── 공지: 분류 필터 ──
      document.getElementById("nt-chips").addEventListener("click", (e) => {
        const chip = e.target.closest("[data-nt]");
@ -1311,6 +1458,25 @@
          row.setAttribute("aria-expanded", row.classList.contains("is-open"));
        });
      });
-</script>
+
+      // ── 단축키 — 콘솔의 손가락 문법. 숫자키 화면 전환, / 검색. 입력 중에는 쓰지 않는다 ──
+      const VIEW_ORDER = ["dashboard", "students", "attendance", "grades", "files", "calendar", "counsel", "report", "notice"];
+      document.addEventListener("keydown", (e) => {
+        if (e.ctrlKey || e.metaKey || e.altKey) return;
+        const t = e.target;
+        if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+        if (e.key === "/") {
+          e.preventDefault();
+          document.querySelector('.side-link[data-view="students"]').click();
+          document.getElementById("q").focus();
+        } else if (/^[1-9]$/.test(e.key)) {
+          const view = VIEW_ORDER[+e.key - 1];
+          if (view) document.querySelector(`.side-link[data-view="${view}"]`).click();
+        }
+      });
+
+      // ── 인쇄 — 활성 화면(모달이 열려 있으면 그 서류)을 종이로 ──
+      document.getElementById("print-btn").addEventListener("click", () => window.print());
+    </script>
  </body>
 </html>
--- a/apps/site/public/work/gaon-lms/manifest.webmanifest
+++ b/apps/site/public/work/gaon-lms/manifest.webmanifest
@ -0,0 +1,21 @@
+{
+  "name": "가온 학적부",
+  "short_name": "가온 학적부",
+  "start_url": "./",
+  "display": "standalone",
+  "background_color": "#fafafa",
+  "theme_color": "#fafafa",
+  "icons": [
+    {
+      "src": "./icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}
--- a/apps/site/public/work/gaon-lms/og.png
+++ b/apps/site/public/work/gaon-lms/og.png
--- a/apps/site/public/work/gaon-lms/styles/main.css
+++ b/apps/site/public/work/gaon-lms/styles/main.css
@ -12,10 +12,12 @@

 html {
  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
  background: var(--muted);
 }

 body {
+  overscroll-behavior-y: none; /* 의도치 않은 pull-to-refresh 차단 */
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-body);
@ -46,7 +48,16 @@ h3 { font-size: var(--step-0); font-weight: 500; }
 .muted { color: var(--muted-foreground); }
 .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

-:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
+:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-xs); }
+
+/* 모션 취향 존중 — 무한 루프·등장 모션 전부 정지. 앱은 여전히 완전히 작동한다 */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

 .skip {
  position: absolute; left: -9999px; top: 0;
@ -91,7 +102,7 @@ h3 { font-size: var(--step-0); font-weight: 500; }
  border-radius: var(--radius);
  background: var(--accent);
  display: grid; place-items: center;
-  color: #fff; font-size: 12px; font-weight: 600;
+  color: var(--on-accent); font-size: 12px; font-weight: 600;
 }
 .brand-mark::after { content: "가"; }

@ -150,7 +161,7 @@ h3 { font-size: var(--step-0); font-weight: 500; }
 .avatar {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
  background: var(--primary); color: var(--primary-foreground);
  font-size: var(--step-1); font-weight: 600;
 }
@ -162,22 +173,21 @@ h3 { font-size: var(--step-0); font-weight: 500; }
 .view.is-on { display: block; }
 .view:focus { outline: none; }

-.page-head {
-  display: flex; justify-content: space-between; align-items: flex-start;
-  gap: var(--space-4);
-  padding: var(--space-6) var(--space-6) var(--space-5);
-}
-.page-head h1 { letter-spacing: -0.025em; }
 .view-sub { color: var(--muted-foreground); font-size: var(--step-0); margin-top: 4px; max-width: 46em; }
 .view-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-5);
 }
-.stamp { display: none; }
-.view > *:not(.view-head):not(.page-head) { margin-left: var(--space-6); margin-right: var(--space-6); }
+.view > *:not(.view-head) { margin-left: var(--space-6); margin-right: var(--space-6); }
 .view > *:last-child { margin-bottom: var(--space-6); }

+/* 뷰 전환 — 상태 변화를 알리는 70ms 상승. 감사·스크린샷 대기(100ms) 안에 끝난다 */
+@media (prefers-reduced-motion: no-preference) {
+  .view.is-on { animation: view-in 70ms var(--ease-out) both; }
+  @keyframes view-in { from { opacity: 0; transform: translateY(4px); } }
+}
+
 /* ── 카드 ── */
 .panel {
  background: var(--card);
@ -198,7 +208,7 @@ h3 { font-size: var(--step-0); font-weight: 500; }
 }
 .headline dt { font-size: var(--step-0); color: var(--muted-foreground); font-weight: 500; }
 .headline dd { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; font-variant-numeric: tabular-nums; margin-top: 4px; }
-.headline .stat-sub, .rep-stat-sub { font-size: var(--step--1); color: var(--faint); margin: 6px 0 0; margin-inline-start: 0; font-variant-numeric: tabular-nums; }
+.headline .stat-sub { font-size: var(--step--1); color: var(--faint); margin: 6px 0 0; margin-inline-start: 0; font-variant-numeric: tabular-nums; }

 .dash-grid {
  display: grid;
@ -245,7 +255,7 @@ tbody tr:hover { background: var(--muted); }
 .state-wait { background: var(--warning-soft); color: var(--warning-ink); }
 .state-off { background: var(--muted-2); color: var(--muted-foreground); }
 .state-run { background: var(--accent-soft); color: var(--accent-ink); }
-.state-run::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); margin-right: 6px; animation: dot-pulse 1.6s ease infinite; }
+.state-run::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent); margin-right: 6px; animation: dot-pulse 1.6s ease infinite; }
@keyframes dot-pulse { 50% { opacity: 0.35; } }
 .t-warn { color: var(--warning-ink); font-weight: 500; }

@ -262,7 +272,7 @@ tbody tr:hover { background: var(--muted); }
 .axis line { stroke: var(--border); stroke-width: 1; }
 .axis-labels text { font-size: 11px; fill: var(--muted-foreground); }
 .b-att { fill: var(--border-strong); }
-.b-late { fill: #f59e0b; }
+.b-late { fill: var(--late); }
 .b-abs { fill: var(--danger); }
 .b-hl { fill: var(--accent); }
 .week-chart figcaption, .dist-chart figcaption {
@ -277,9 +287,9 @@ tbody tr:hover { background: var(--muted); }
 .wk-sum td:first-child, .wk-sum th:first-child { padding-left: 0; white-space: nowrap; }
 .wk-sum td:last-child, .wk-sum th:last-child { padding-right: 0; }
 .key { display: inline-flex; align-items: center; gap: 6px; }
-.key i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
+.key i { width: 8px; height: 8px; display: inline-block; border-radius: var(--radius-xs); }
 .k-att { background: var(--border-strong); }
-.k-late { background: #f59e0b; }
+.k-late { background: var(--late); }
 .k-abs { background: var(--danger); }
 .hl { background: none; padding: 0; font-weight: 600; color: var(--foreground); }

@ -297,7 +307,6 @@ tbody tr:hover { background: var(--muted); }
 .due-row span:last-child { font-size: var(--step-1); color: var(--muted-foreground); }
 .due-row.is-static { cursor: default; }
 .due-row.is-static:hover { background: none; }
-.hl-count { color: var(--danger-ink); font-weight: 600; background: var(--danger-soft); border-radius: 4px; padding: 0 5px; }

 /* ── 검색 + 세그먼트 ── */
 .toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--space-4); }
@ -319,7 +328,7 @@ tbody tr:hover { background: var(--muted); }
  display: inline-flex; gap: 2px;
  background: var(--muted-2);
  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
  padding: 3px;
 }
 .chip {
@ -349,7 +358,7 @@ tbody tr:hover { background: var(--muted); }
 .att-btn:hover { transform: scale(1.08); box-shadow: var(--shadow-sm); }
 .att-btn:active { scale: 0.94; }
 .att-btn.v-att { background: var(--success-soft); color: var(--success-ink); }
-.att-btn.v-late { background: #fef3c7; color: var(--warning-ink); }
+.att-btn.v-late { background: var(--late-soft); color: var(--warning-ink); }
 .att-btn.v-abs { background: var(--danger-soft); color: var(--danger-ink); }

 .week-nav { display: inline-flex; align-items: center; gap: var(--space-2); }
@ -389,15 +398,15 @@ tbody tr:hover { background: var(--muted); }
 .cal-day.is-today .cal-num {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
-  color: #fff; font-weight: 600;
-  background: #047857; /* 진한 에메랄드 — 흰 숫자 5.4:1 */
-  border-radius: 999px;
+  color: var(--on-accent); font-weight: 600;
+  background: var(--accent-strong); /* 흰 숫자 5.4:1 */
+  border-radius: var(--radius-pill);
 }
 .cal-ev {
  display: block; margin-top: 2px;
  font-size: var(--step--2); line-height: 1.35; word-break: keep-all;
  background: var(--accent-soft); color: var(--accent-ink);
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
  padding: 1px 4px;
 }

@ -426,22 +435,21 @@ tbody tr:hover { background: var(--muted); }
 .empty-note { color: var(--muted-foreground); font-size: var(--step-0); }

 /* ── 버튼 ── */
-.btn-primary, .btn-outline, .btn-ghost, .btn-line, .btn-solid {
+.btn-line, .btn-solid {
  appearance: none; cursor: pointer; font: inherit;
  font-size: var(--step-0); font-weight: 500;
  height: 36px; padding: 0 var(--space-4);
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
-  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease, scale 80ms ease;
+  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
  white-space: nowrap;
 }
-.btn-primary, .btn-solid { background: var(--primary); border: 1px solid var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); }
-.btn-primary:hover, .btn-solid:hover { background: #27272a; border-color: #27272a; }
-.btn-outline, .btn-line { background: var(--card); border: 1px solid var(--border-strong); color: var(--foreground); box-shadow: var(--shadow-sm); }
-.btn-outline:hover, .btn-line:hover { background: var(--muted); }
-.btn-ghost { background: none; border: 0; color: var(--muted-foreground); padding: 0 var(--space-3); }
-.btn-ghost:hover { color: var(--foreground); background: var(--muted-2); }
-.btn-primary:active, .btn-outline:active, .btn-line:active, .btn-solid:active, .btn-ghost:active { scale: 0.98; }
+.btn-solid { background: var(--primary); border: 1px solid var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); }
+.btn-solid:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
+.btn-solid:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
+.btn-line { background: var(--card); border: 1px solid var(--border-strong); color: var(--foreground); box-shadow: var(--shadow-sm); }
+.btn-line:hover:not(:disabled) { background: var(--muted); }
+.btn-line:active, .btn-solid:active:not(:disabled) { scale: 0.98; }

 /* ── 모달 ── */
 .modal {
@ -456,7 +464,7 @@ tbody tr:hover { background: var(--muted); }
  overflow: hidden;
  box-shadow: var(--shadow-xl);
 }
-.modal::backdrop { background: rgb(9 9 11 / 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
+.modal::backdrop { background: var(--backdrop-dim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
@ -477,14 +485,14 @@ tbody tr:hover { background: var(--muted); }
 .mcover-mark {
  position: absolute; right: -14px; bottom: -20px;
  font-size: 8rem; font-weight: 600; line-height: 1;
-  color: rgb(250 250 250 / 0.05);
+  color: var(--panel-mark);
  pointer-events: none; user-select: none;
 }
 .mcover-seal {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--step-2); font-weight: 600;
-  color: #fff;
+  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
@ -494,16 +502,16 @@ tbody tr:hover { background: var(--muted); }
  font-size: var(--step-3); line-height: 1.2; font-weight: 600;
  letter-spacing: -0.02em; word-break: keep-all;
 }
-.mcover-meta { color: #a1a1aa; font-size: var(--step-1); margin-top: var(--space-2); }
-.mcover-stats { margin-top: var(--space-5); border-top: 1px solid rgb(250 250 250 / 0.12); }
+.mcover-meta { color: var(--panel-muted); font-size: var(--step-1); margin-top: var(--space-2); }
+.mcover-stats { margin-top: var(--space-5); border-top: 1px solid var(--panel-line); }
 .mcover-stats > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-3) 0;
-  border-bottom: 1px solid rgb(250 250 250 / 0.12);
+  border-bottom: 1px solid var(--panel-line);
 }
-.mcover-stats dt { font-size: var(--step-1); color: #a1a1aa; }
+.mcover-stats dt { font-size: var(--step-1); color: var(--panel-muted); }
 .mcover-stats dd { font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; }
-.mcover-foot { margin-top: auto; color: #71717a; font-size: var(--step--2); }
+.mcover-foot { margin-top: auto; color: var(--panel-faint); font-size: var(--step--2); }

 .msheet {
  position: relative;
@ -540,7 +548,7 @@ tbody tr:hover { background: var(--muted); }
  border-radius: var(--radius);
 }
 .att-mark.v-att { background: var(--success-soft); color: var(--success-ink); }
-.att-mark.v-late { background: #fef3c7; color: var(--warning-ink); }
+.att-mark.v-late { background: var(--late-soft); color: var(--warning-ink); }
 .att-mark.v-abs { background: var(--danger-soft); color: var(--danger-ink); }
 .att-date { font-size: var(--step--2); color: var(--faint); }
 .att-strip-na { font-size: var(--step-1); color: var(--muted-foreground); }
@ -592,26 +600,26 @@ tbody tr:hover { background: var(--muted); }
 /* ── 반응형 ── */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
+  /* 모바일 앱 헤더 — 내비는 바텀 탭으로 이동(HIG·M3), 사이드는 브랜드 바가 된다 */
  .side {
    position: static; height: auto;
    flex-direction: row; align-items: center;
-    gap: var(--space-3); padding: var(--space-2) var(--space-4);
+    gap: var(--space-3);
+    padding: var(--space-2) max(var(--space-4), var(--safe-right)) var(--space-2) max(var(--space-4), var(--safe-left));
    border-right: 0; border-bottom: 1px solid var(--border);
-    overflow-x: auto; overflow-y: hidden;
    min-width: 0;
  }
-  .brand { padding: 0 var(--space-2) 0 0; flex: none; white-space: nowrap; } /* 가로 스트립에서 찌그러져 글자가 세로로 쌓이는 것을 막는다 */
-  .side-nav { display: flex; gap: 2px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
-  .side-group { display: none; }
-  .side-link { white-space: nowrap; width: auto; height: 32px; }
-  .side-foot { display: none; }
+  .brand { padding: 0; flex: none; white-space: nowrap; } /* 스트립에서 찌그러져 글자가 세로로 쌓이는 것을 막는다 */
+  .side-nav { display: none; }
+  .side-foot, .side-kbd { display: none; }
+  .main { padding-bottom: calc(72px + var(--safe-bottom)); } /* 바텀 내비 + 홈 인디케이터 확보 */
  .dash-grid, .cal-layout, .counsel-grid { grid-template-columns: minmax(0, 1fr); }
  .week-panel { grid-row: auto; }
  .dist-body { grid-template-columns: minmax(0, 1fr); }
  .view-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-4); }
-  .view > *:not(.view-head):not(.page-head) { margin-inline: var(--space-4); }
+  .view > *:not(.view-head) { margin-inline: var(--space-4); }
  .headline { gap: var(--space-2); }
-  .topbar { padding: 0 var(--space-4); min-width: 0; }
+  .topbar { padding: 0 max(var(--space-4), var(--safe-right)) 0 max(var(--space-4), var(--safe-left)); min-width: 0; }
  .term-badge { display: none; }
  .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cal-day { height: 56px; }
@ -639,7 +647,7 @@ tbody tr:hover { background: var(--muted); }
 .bell:hover, .bell.is-open { background: var(--muted-2); color: var(--foreground); }
 .bell-dot {
  position: absolute; top: 4px; right: 4px;
-  width: 8px; height: 8px; border-radius: 999px;
+  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--danger); border: 2px solid var(--background);
 }
 .bell-menu {
@ -656,7 +664,7 @@ tbody tr:hover { background: var(--muted); }
 }
 .bell-head button {
  border: none; background: none; cursor: pointer;
-  font-size: var(--step--1); color: var(--accent-ink); padding: 2px 4px; border-radius: 4px;
+  font-size: var(--step--1); color: var(--accent-ink); padding: 2px 4px; border-radius: var(--radius-xs);
 }
 .bell-head button:hover { background: var(--accent-soft); }
 .ntc { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
@ -676,7 +684,7 @@ tbody tr:hover { background: var(--muted); }
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: var(--step--2); font-weight: 500;
  border: 1px solid var(--border); color: var(--muted-foreground);
-  border-radius: 999px; padding: 1px 8px;
+  border-radius: var(--radius-pill); padding: 1px 8px;
 }
 .tag-quiz { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
 .tag-exam { background: var(--warning-soft); color: var(--warning-ink); border-color: transparent; }
@ -688,8 +696,8 @@ tbody tr:hover { background: var(--muted); }
 .prog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
 .prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
 .prog-head strong { font-size: var(--step-0); font-weight: 600; }
-.prog-bar { height: 6px; border-radius: 999px; background: var(--muted-2); overflow: hidden; margin-top: 10px; }
-.prog-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
+.prog-bar { height: 6px; border-radius: var(--radius-pill); background: var(--muted-2); overflow: hidden; margin-top: 10px; }
+.prog-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); }
 .prog-meta { font-size: var(--step--1); color: var(--faint); margin-top: 8px; font-variant-numeric: tabular-nums; }

 /* ── 공지 뷰 ── */
@ -704,7 +712,7 @@ tbody tr:hover { background: var(--muted); }
 .notice-row:hover { background: var(--muted); }
 .n-t { font-size: var(--step-0); font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; word-break: keep-all; }
 .notice-row.is-unread .n-t::after {
-  content: ""; width: 6px; height: 6px; border-radius: 999px;
+  content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--accent); flex: none;
 }
 .pin { color: var(--accent-ink); flex: none; }
@ -777,7 +785,7 @@ tbody tr:hover { background: var(--muted); }
  font-size: var(--step--1); color: var(--muted-foreground);
 }
 .lg-exam, .lg-due, .lg-admin, .lg-holi, .ev-dot {
-  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
+  width: 8px; height: 8px; border-radius: var(--radius-xs); display: inline-block;
 }
 .lg-exam, .ev-dot.is-exam { background: var(--warning); }
 .lg-due, .ev-dot.is-due { background: var(--accent); }
@ -805,3 +813,180 @@ tbody tr:hover { background: var(--muted); }
  .notice-row { grid-template-columns: minmax(0, 1fr); }
  .notice-row .tag { justify-self: start; }
 }
+
+/* ── 단축키 안내 — 물리 키 모양의 kbd. 콘솔 앱의 손가락 문법 ── */
+kbd {
+  font-family: var(--font-mono); font-size: var(--step--2); line-height: 1;
+  color: var(--muted-foreground);
+  background: var(--card);
+  border: 1px solid var(--border-strong); border-bottom-width: 2px;
+  border-radius: var(--radius-xs);
+  padding: 2px 5px;
+  white-space: nowrap;
+}
+.side-kbd {
+  margin-top: var(--space-2);
+  padding: 0 var(--space-2) var(--space-2);
+  font-size: var(--step--2); color: var(--faint);
+  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
+}
+
+/* ── 탑바 아이콘 버튼(인쇄) — 종과 같은 문법 ── */
+.icon-btn {
+  width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: var(--radius); border: none; background: none; cursor: pointer;
+  color: var(--muted-foreground);
+  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+}
+.icon-btn:hover { background: var(--muted-2); color: var(--foreground); }
+
+/* ── 채점 검증 — 범위 밖 점수는 저장을 막고 이유를 말한다 ── */
+.grade-table input.score.is-bad {
+  border-color: var(--danger);
+  background: var(--danger-soft);
+}
+.grade-table input.score[aria-invalid="true"]:focus {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent);
+}
+.score-warn {
+  font-size: var(--step-1); line-height: 1.5; word-break: keep-all;
+  color: var(--danger-ink);
+  background: var(--danger-soft);
+  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
+  border-radius: var(--radius);
+  padding: var(--space-2) var(--space-3);
+}
+
+/* ── 인쇄 — 학적부의 본연: 활성 화면을 서류로. 크롬은 물러나고 내용만 ── */
+@media print {
+  @page { size: A4; margin: 12mm; }
+  html, body { background: var(--print-paper); }
+  .side, .topbar, .skip, .toolbar, .att-chips, .panel-note, .side-kbd, .icon-btn { display: none !important; }
+  .app { display: block; }
+  .view { display: none !important; }
+  .view.is-on { display: block !important; animation: none; }
+  .view > *:not(.view-head) { margin-inline: 0; }
+  .view > *:last-child { margin-bottom: 0; }
+  .view-head { padding: 0 0 10pt; }
+  h1, h2.v-h { font-size: 15pt; }
+  .view-sub { font-size: 9.5pt; }
+  .panel, .headline > div, .statline > div, .counsel-card {
+    box-shadow: none; border-color: var(--print-line); break-inside: avoid;
+  }
+  .statline { display: block; }
+  .statline > div { border: 0; padding: 0 12pt 0 0; }
+  .table-wrap { overflow: visible; }
+  table { font-size: 9.5pt; }
+  thead th, tbody tr, .due-list li { break-inside: avoid; }
+  tbody tr:hover { background: none; }
+  .att-btn { box-shadow: none; }
+  .att-btn, .att-mark, .state, .tag { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
+  .row-open, .due-row { text-decoration: none; }
+
+  /* 모달(학적 카드·채점)이 열려 있으면 앱 대신 그 서류만 인쇄한다 */
+  dialog[open].modal {
+    display: block; position: static; width: 100%; max-height: none;
+    border: 0; box-shadow: none;
+  }
+  dialog[open].modal::backdrop { display: none; }
+  body:has(dialog[open].modal) .app { display: none; }
+  .mspread { grid-template-columns: 200pt minmax(0, 1fr); max-height: none; }
+  .mcover { background: var(--primary) !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
+  .msheet { overflow: visible; }
+  .modal-close { display: none; }
+}
+
+/* 모바일 가로 스트립에는 kbd 안내가 들어갈 자리가 없다 — 기본 규칙보다 뒤에 있어야 이긴다 */
+@media (max-width: 900px) {
+  .side-kbd { display: none; }
+}
+
+/* ── 모바일 앱 기반 — 표준 위생(WebKit·M3·CSS-Tricks 조사 research/mobile-app-ux-v1.md) ── */
+:is(button, a, input, select, textarea) { touch-action: manipulation; } /* 더블탭 줌 지연 제거 */
+@media (max-width: 680px) {
+  /* iOS 포커스 자동 확대 방지(CSS-Tricks) — #q·.note-form input 가 font:inherit 로
+     요소 선택자를 덮으므로 같은 명시도 이상으로 파일 뒤에서 이긴다 */
+  input, select, textarea,
+  #q, .note-form input, .grade-table input.score { font-size: 16px; }
+}
+
+/* ── 바텀 내비 — HIG 탭바(5~6 이하)·M3 바텀 내비(3~5 목적지·48dp). 나머지 화면은 더보기 시트로 ── */
+.bottom-nav {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
+  display: none;
+  background: var(--card);
+  border-top: 1px solid var(--border);
+  padding: 6px max(var(--space-2), var(--safe-left)) calc(6px + var(--safe-bottom)) max(var(--space-2), var(--safe-right));
+}
+@media (max-width: 900px) { .bottom-nav { display: grid; grid-auto-flow: column; } }
+.bnav-item {
+  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
+  display: grid; justify-items: center; align-content: center; gap: 3px;
+  min-height: 52px; min-width: 48px; padding: 4px 2px;
+  border-radius: var(--radius);
+  color: var(--muted-foreground);
+}
+.bnav-item span { font-size: var(--step--2); font-weight: 500; }
+.bnav-item.is-current { color: var(--accent-ink); font-weight: 600; }
+.bnav-item.is-current svg { color: var(--accent); }
+
+/* ── 더보기 시트 — 전체 화면 원장. 그룹 문법은 데스크톱 내비와 같다 ── */
+.more-sheet { width: min(94vw, 440px); }
+.more-head {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: var(--space-4) var(--space-5) var(--space-2);
+}
+.more-head h2 { font-size: var(--step-2); }
+.more-list {
+  display: grid; overflow-y: auto; overscroll-behavior: contain;
+  padding: var(--space-2) var(--space-4) calc(var(--space-4) + var(--safe-bottom));
+}
+.more-group {
+  font-size: var(--step-1); font-weight: 500; color: var(--muted-foreground);
+  padding: var(--space-3) var(--space-2) var(--space-1);
+}
+.more-item {
+  appearance: none; background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
+  display: flex; align-items: center; gap: var(--space-3);
+  min-height: 48px; padding: var(--space-2);
+  border-radius: var(--radius); color: var(--foreground);
+}
+.more-item svg { color: var(--muted-foreground); flex: none; }
+.more-item.is-current { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
+.more-item.is-current svg { color: var(--accent); }
+
+/* ── 바텀 시트(≤680) — 모바일 모달은 하단 시트(NN/g·HIG). 그래버·상단 라운드·내부 스크롤 ── */
+@media (max-width: 680px) {
+  dialog.modal {
+    top: auto; bottom: 0; left: 0; right: 0;
+    margin: 0 auto;
+    width: 100%; max-width: 100%;
+    max-height: 92dvh;
+    border-left: 0; border-right: 0; border-bottom: 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    animation: sheet-up var(--dur-3) var(--ease-out) both;
+  }
+  dialog.modal::before { /* 그래버 — 시트의 표준 존재 표시 */
+    content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0;
+    width: 36px; height: 4px; border-radius: var(--radius-pill);
+    background: var(--border-strong); z-index: 3;
+  }
+  @keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
+  .modal-inner { max-height: calc(92dvh - 16px); overflow-y: auto; }
+  .mspread { max-height: 92dvh; }
+}
+
+/* ── 터치 타깃 — M3 48dp·HIG 44pt 정신의 44px 하한(coarse 포인터에서만) ── */
+@media (pointer: coarse) {
+  .chip, .give-btn, .btn-line, .btn-solid, .bell-head button { min-height: 44px; }
+  .icon-btn, .bell, .modal-close { width: 44px; height: 44px; }
+  #q { min-height: 44px; }
+  .att-btn { width: 44px; height: 44px; }
+  .side-link { height: 44px; }
+  .grade-table input.score { height: 44px; }
+}
+
+/* 인쇄·데스크톱에서 모바일 전용 크롬은 존재하지 않는다 */
+@media print { .bottom-nav, #more-dialog { display: none !important; } }
--- a/apps/site/public/work/gaon-lms/styles/tokens.css
+++ b/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);
 }
--- a/apps/site/research/mobile-app-ux-v1.md
+++ b/apps/site/research/mobile-app-ux-v1.md
@ -0,0 +1,79 @@
+# 모바일 앱 수준 UX 조사 — v1 (2026-08-22)
+
+대상: 가온 학적부·두레대학 수강신청의 모바일(iOS/Android) 경험을 **네이티브 앱 수준**으로 올리는 작업의 근거 모음.
+방법: 인터넷 조사(방법론·표준·패턴) → Nielsen 10 휴리스틱 감사 → 구현 → 시나리오 E2E(RED→GREEN 1000+).
+
+## 1. 표준·근거 (인터넷 조사)
+
+### 1.1 내비게이션 — 탭 바
+- **Apple HIG — Tab bars/Tab views**: 탭은 **5~6개 이하**, "Avoid overflow tabs"(화면 밖으로 밀려나는 탭 지양). https://developer.apple.com/design/human-interface-guidelines/tab-bars , /tab-views
+- **Material 3**: 바텀 내비 **3~5개 목적지**, 터치 타깃 **48×48dp(≈9mm)**, NavigationBar 높이 80dp. https://m3.material.io/foundations/designing/structure
+- **Smashing — Golden rules of bottom navigation**: 3~5개, 항상 보이게, 라벨 권장. https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
+- 적용: 두 앱 모두 화면이 6~9개 → **바텀 탭 5 + ‘더보기’ 시트**(나머지 화면). 더보기 시트는 모바일 웹의 정립된 패턴(UIKit의 전통적 More와 같은 결).
+
+### 1.2 시트(모달)
+- **Apple HIG — Sheets**: 집중된 자기완结 작업용, 부모 화면 위에 떠오르고 완료 후 복귀. https://developer.apple.com/design/human-interface-guidelines/sheets
+- **NN/g — Bottom Sheets**: 정의·UX 지침. 썸 존(화면 하단)에 있어 한 손 조작에 최적. https://www.nngroup.com/articles/bottom-sheet/
+- **Material — Sheets: bottom**: 모바일에서 대화상자 대안, 드래그 핸들(그래버)은 선택 사항. https://m2.material.io/components/sheets-bottom , https://mobbin.com/glossary/bottom-sheet
+- 적용: ≤680px에서 기존 중앙 모달을 **바텀 시트**로(그래버 표시, 상단 라운드, 내부 스크롤, 최대 90dvh, safe-area 준수).
+
+### 1.3 안전 영역·뷰포트
+- **WebKit 공식 — Designing Websites for iPhone X**: `viewport-fit=cover` 선언 후 **중요 콘텐츠 컨테이너에 선택적으로 padding**. https://webkit.org/blog/7929/designing-websites-for-iphone-x/
+- **MDN env()**: `env(safe-area-inset-{top,right,bottom,left})`. cover 없으면 값이 0으로 고정. https://developer.mozilla.org/docs/Web/CSS/Reference/Values/env
+- **Polypane 가이드**: `max(16px, env(safe-area-inset-left))` 폴백 패턴, 헤더·푸터·고정 요소에 적용. https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/
+- 적용: viewport에 `viewport-fit=cover` 추가 + 헤더(상단 inset)·바텀 내비(하단 inset)·시트(하단 inset)에 `max()` 패딩.
+
+### 1.4 입력 확대(iOS)
+- **CSS-Tricks**: 입력 font-size **16px 이상이면 iOS Safari 포커스 자동 확대가 발생 안 함**. `maximum-scale=1` 은 접근성(WCAG 확대 금지)으로 금지. https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
+- 적용: ≤680px에서 `input, select, textarea { font-size: 16px }`.
+
+### 1.5 뒤로 가기(안드로이드/브라우저 히스토리)
+- **Baymard — Back button expectations**: `pushState()` 로 모달/뷰 전환마다 히스토리 항목을 만들면 뒤로 가기가 기대(모달 닫기·이전 화면)와 일치. https://baymard.com/blog/back-button-expectations
+- **Android 공식 — Navigation principles**: 뒤로 가기는 **최근 화면의 역순 이동**(스택). https://developer.android.com/guide/navigation/principles
+- 적용: 뷰 전환·모달 open마다 `history.pushState`, `popstate` 로 복원·닫기. iOS 엣지 스와이프 뒤로도 같은 경로로 자동 작동.
+
+### 1.6 감사 방법론
+- **Nielsen 10 휴리스틱**(위반 문서화·심각도 부여): https://www.nngroup.com/articles/ten-usability-heuristics/
+- **Google HEART**(Happiness·Engagement·Adoption·Retention·Task success): https://www.heartframework.com/
+- **Maze 7단계 UX 감사**: 범위→데이터→휴리스틱 평가→심층 조사→우선순위→권고→보고. https://maze.co/collections/ux-ui-design/ux-audit/
+
+### 1.7 터치·모션 위생
+- M3 48dp / HIG 44pt 최소. WCAG 2.5.8: 인라인 텍스트 링크는 24×24px 최소(AA).
+- `-webkit-tap-highlight-color: transparent`(그레이 플래시 제거), `touch-action: manipulation`(더블탭 줌 지연 제거), 스크롤 컨테이너 `overscroll-behavior: contain`, 앱 문서 `overscroll-behavior-y: none`(의도치 않은 pull-to-refresh 방지).
+
+## 2. 현재 상태 감사 (Nielsen 10 매핑)
+
+| # | 휴리스틱 | 위반(실측) |
+|---|---|---|
+| 1 | 시스템 상태 가시성 | 뷰가 URL/히스토리에 없음 — 새로고침·공유 시 첫 화면으로 소실 |
+| 3 | 사용자 통제와 자유 | **안드로이드 뒤로 가기 = 앱 이탈**(뷰·모달이 히스토리에 없음). 취소 실행취소는 v19 에 있음 ✓ |
+| 4 | 일관성(플랫폼 표준) | 모바일에서 데스크톱 사이드바/탭이 **가로 스크롤 줄**로 축소(iOS/Android 앱 표준=바텀 탭 아님). 모달이 중앙(모바일 표준=바텀 시트 아님). safe-area 무시(viewport-fit 없음 → env() 0px). 노치·홈 인디케이터 영역 침범 가능 |
+| 5 | 오류 예방 | 입력 폰트 14px → **iOS 포커스 자동 확대 유발**. 탭 하이라이트(그레이 플래시) 기본값 |
+| 6 | 재인식 > 기억 | 가온 모바일 내비 줄 = 9항목 스크롤 — 화면 밖 항목 존재를 모름(HIG "avoid overflow tabs" 위반) |
+| 7 | 유연성·효율 | 엄지 존(하단 ~25%)이 전부 빈 여백 — 한 손 도달성 있는 조작 0개. 터치 타깃 일부 40px(coarse 상향분) — 44pt/48dp 미달 |
+| 8 | 미니멀·미학 | 데스크톱 문법은 정립됨 ✓ — 모바일만 앱 문법 부재 |
+
+기술 위반 목록: viewport-fit=cover 부재 / manifest·앱 아이콘 부재(설치 불가·앱 아님) / overscroll-behavior 부재 / 뷰 전환 히스토리 부재.
+
+## 3. 구현 계획
+
+- **A 공통 기반**: viewport-fit=cover + safe-area 토큰(`--safe-tb` 등, max() 패딩) / 입력 16px(≤680) / 탭 하이라이트 제거·touch-action / overscroll 위생 / manifest+192·512 아이콘(sharp 생성)·apple-touch-icon / 터치 타깃 ≥44px(coarse).
+- **B 바텀 내비**(≤900px): 탭 5 + 더보기 시트. 가온: 홈·수강생·출석부·성적·더보기(자료실·학사 일정·상담·리포트·공지). 두레: 찾기·관심·신청·이수·더보기(총람·공지). 데스크톱 크롬은 현행 유지(사이드바/탭).
+- **C 바텀 시트**(≤680px): 기존 `<dialog>` 3종+더보기 시트를 시트 문법으로(그래버·상단 라운드·내부 스크롤·safe-area·슬라이드 업 250ms).
+- **D 히스토리**: 뷰 pushState, 모달 open pushState·popstate 닫기(억제 플래그로 이중 back 방지).
+- **E 검증**: 시나리오 E2E(RED→GREEN 1000+ 단언) + 리포 게이트 L0~L5 + 시각 기준 갱신 + 안드로이드 에뮬레이터 실기기 스크린샷(iOS 는 Windows 에서 시뮬레이터 불가 — WebKit 엔진(L4)으로 검증, 한계 명시).
+
+## 4. E2E 시나리오 계획 (목표 단언 1000+)
+
+| 스위트 | 내용 | 예상 단언 |
+|---|---|---|
+| M1 터치 타깃 매트릭스 | 각 앱×전 뷰×{320,390,768} coarse — 버튼·입력 ≥44px, 인라인 링크 ≥24px (요소당 1단언) | ~450 |
+| M2 대비 스윕 | 각 앱×전 뷰@390 — 텍스트 요소별 WCAG 대비 | ~200 |
+| M3 구조 불변식 | 뷰×폭×{오버플로 0, h1 1줄, 브랜드 1줄, 바텀내비 존재·높이·safe-area 패딩, 본문 하단 여백} | ~360 |
+| M4 앱 기반 | viewport-fit, manifest·아이콘, 입력 16px(요소당), 탭 하이라이트, overscroll | ~30 |
+| S1~S6 사용자 여정 | 강사 아침(출결)·오후(채점)·저녁(상담·리포트)·**하루 종일 종단(전 9화면 실조작, 실사용 10분+ 상당)** / 학생 첫 신청·정정기간(변경·undo·이수·공지·시간표 확정·인쇄) | ~200 |
+| S7 뒤로 가기 | 뷰 3이동→back×2 복원, 모달 open→back 닫힘→back 이전 뷰 (2앱) | ~40 |
+| S8 시트·S9 더보기 | 시트 하단 고정·그래버·스크롤·safe-area / 더보기 열기·이동·활성 표시 | ~50 |
+| V 시각 게이트 | 390px 전 뷰+시트 상태 스크린샷 pixelmatch | ~40 |
+
+합계 ≈ 1300. RED: 신규 기능 단언은 구현 전 실패로 확인(RED) → 구현 후 전부 GREEN.
--- a/apps/site/src/assets/shots/work-dure-enrollment-2.png
+++ b/apps/site/src/assets/shots/work-dure-enrollment-2.png
--- a/apps/site/src/assets/shots/work-dure-enrollment.png
+++ b/apps/site/src/assets/shots/work-dure-enrollment.png
--- a/apps/site/src/assets/shots/work-gaon-lms-2.png
+++ b/apps/site/src/assets/shots/work-gaon-lms-2.png
--- a/apps/site/src/assets/shots/work-gaon-lms.png
+++ b/apps/site/src/assets/shots/work-gaon-lms.png
--- a/apps/site/src/data/work.ts
+++ b/apps/site/src/data/work.ts
@ -236,7 +236,7 @@ export const WORK: WorkItem[] = [
    risk: "관리 콘솔의 기본값인 파란 사이드바와 카드 그리드를 버리고, 학적부의 행(行) 문법으로 화면 여덟 개를 묶어 짓습니다",
    preset: "ledger-console",
    date: "2026-08",
-    metrics: ["뷰 9종 전환", "알림 센터", "공지 아코디언 · 분류 필터", "수업 진도 바", "출석 일별 합계", "과목 필터", "모달 2종"],
+    metrics: ["뷰 9종 전환", "모바일 바텀내비 + 더보기 시트", "안드로이드 백 키 = 앱 내 뒤로", "safe area · 44px 터치타깃", "홈 설치(PWA) · 인쇄 2종", "채점 범위 검증", "키보드 단축키 1–9 · /"],
    href: "/work/gaon-lms/",
    shot: gaonLms,
    shotAlt: gaonLms2,
@ -251,7 +251,7 @@ export const WORK: WorkItem[] = [
    risk: "여섯 화면이 하나의 상태(신청·관심)를 공유합니다. 시간 겹침·학점 초과·정원 마감은 도장을 누르기 전에 막습니다",
    preset: "timetable-ink",
    date: "2026-08",
-    metrics: ["시간 겹침 즉시 차단", "색인탭 6종 전환", "이수 학점 실시간 집계", "빈 상태 안내"],
+    metrics: ["시간 겹침 즉시 차단", "취소 실행취소", "색인탭 6종 · 모바일 바텀내비", "안드로이드 백 키 = 앱 내 뒤로", "safe area · 44px 터치타깃", "홈 설치(PWA) · 인쇄 2종", "이수 학점 실시간 집계"],
    href: "/work/dure-enrollment/",
    shot: dureEnrollment,
    shotAlt: dureEnrollment2,
--- a/apps/site/tools/__scan.mjs
+++ b/apps/site/tools/__scan.mjs
@ -0,0 +1,30 @@
+// 임시 구문 스캐너 — 괄호·템플릿 리터럴 균형 줄 단위 추적
+import fs from "node:fs";
+const src = fs.readFileSync(process.argv[2], "utf8");
+let inTpl = false, inStr = null, inInterp = 0, line = 1;
+const stack = [];
+const push = (t) => stack.push(t + "@" + line);
+for (let i = 0; i < src.length; i++) {
+  const c = src[i], n = src[i + 1];
+  if (c === "\n") line++;
+  if (inStr) {
+    if (c === "\\") { i++; continue; }
+    if (c === inStr) inStr = null;
+    continue;
+  }
+  if (inTpl) {
+    if (c === "\\") { i++; continue; }
+    if (c === "$" && n === "{") { push("${"); inInterp++; i++; continue; }
+    if (c === "`") { inTpl = false; const m = stack.pop(); }
+    continue;
+  }
+  if (c === "`") { inTpl = true; push("tpl"); continue; }
+  if (c === "'" || c === '"') { inStr = c; continue; }
+  if (c === "/" && n === "/") { while (i < src.length && src[i] !== "\n") i++; continue; }
+  if (c === "(" || c === "[" || c === "{") push(c);
+  else if (c === ")" || c === "]" || c === "}") {
+    const m = stack.pop();
+    if (!m) { console.log("여분의 닫기", c, "줄", line); process.exit(0); }
+  }
+}
+console.log("미닫힘:", stack.slice(-8).join(", ") || "없음");
--- a/apps/site/tools/shots/baseline/dure-enrollment-archive-1440.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-archive-1440.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-archive-390.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-archive-390.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-catalog-1440.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-catalog-1440.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-catalog-390.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-catalog-390.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-credits-1440.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-credits-1440.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-credits-390.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-credits-390.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-enrollments-1440.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-enrollments-1440.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-enrollments-390.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-enrollments-390.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-notices-1440.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-notices-1440.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-notices-390.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-notices-390.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-starred-1440.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-starred-1440.png
--- a/apps/site/tools/shots/baseline/dure-enrollment-starred-390.png
+++ b/apps/site/tools/shots/baseline/dure-enrollment-starred-390.png
--- a/apps/site/tools/shots/baseline/gaon-lms-attendance-1440.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-attendance-1440.png
--- a/apps/site/tools/shots/baseline/gaon-lms-attendance-390.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-attendance-390.png
--- a/apps/site/tools/shots/baseline/gaon-lms-calendar-1440.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-calendar-1440.png
--- a/apps/site/tools/shots/baseline/gaon-lms-calendar-390.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-calendar-390.png
--- a/apps/site/tools/shots/baseline/gaon-lms-counsel-1440.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-counsel-1440.png
--- a/apps/site/tools/shots/baseline/gaon-lms-counsel-390.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-counsel-390.png
--- a/apps/site/tools/shots/baseline/gaon-lms-dashboard-1440.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-dashboard-1440.png
--- a/apps/site/tools/shots/baseline/gaon-lms-dashboard-390.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-dashboard-390.png
--- a/apps/site/tools/shots/baseline/gaon-lms-files-1440.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-files-1440.png
--- a/apps/site/tools/shots/baseline/gaon-lms-files-390.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-files-390.png
--- a/apps/site/tools/shots/baseline/gaon-lms-grades-1440.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-grades-1440.png
--- a/apps/site/tools/shots/baseline/gaon-lms-grades-390.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-grades-390.png
--- a/apps/site/tools/shots/baseline/gaon-lms-notice-1440.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-notice-1440.png
--- a/apps/site/tools/shots/baseline/gaon-lms-notice-390.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-notice-390.png
--- a/apps/site/tools/shots/baseline/gaon-lms-report-1440.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-report-1440.png
--- a/apps/site/tools/shots/baseline/gaon-lms-report-390.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-report-390.png
--- a/apps/site/tools/shots/baseline/gaon-lms-students-1440.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-students-1440.png
--- a/apps/site/tools/shots/baseline/gaon-lms-students-390.png
+++ b/apps/site/tools/shots/baseline/gaon-lms-students-390.png
--- a/apps/site/tools/shots/current/dure-enrollment-archive-1440.png
+++ b/apps/site/tools/shots/current/dure-enrollment-archive-1440.png
--- a/apps/site/tools/shots/current/dure-enrollment-archive-390.png
+++ b/apps/site/tools/shots/current/dure-enrollment-archive-390.png
--- a/apps/site/tools/shots/current/dure-enrollment-catalog-1440.png
+++ b/apps/site/tools/shots/current/dure-enrollment-catalog-1440.png
--- a/apps/site/tools/shots/current/dure-enrollment-catalog-390.png
+++ b/apps/site/tools/shots/current/dure-enrollment-catalog-390.png
--- a/apps/site/tools/shots/current/dure-enrollment-credits-1440.png
+++ b/apps/site/tools/shots/current/dure-enrollment-credits-1440.png
--- a/apps/site/tools/shots/current/dure-enrollment-credits-390.png
+++ b/apps/site/tools/shots/current/dure-enrollment-credits-390.png
--- a/apps/site/tools/shots/current/dure-enrollment-enrollments-1440.png
+++ b/apps/site/tools/shots/current/dure-enrollment-enrollments-1440.png
--- a/apps/site/tools/shots/current/dure-enrollment-enrollments-390.png
+++ b/apps/site/tools/shots/current/dure-enrollment-enrollments-390.png
--- a/apps/site/tools/shots/current/dure-enrollment-notices-1440.png
+++ b/apps/site/tools/shots/current/dure-enrollment-notices-1440.png
--- a/apps/site/tools/shots/current/dure-enrollment-notices-390.png
+++ b/apps/site/tools/shots/current/dure-enrollment-notices-390.png
--- a/apps/site/tools/shots/current/dure-enrollment-starred-1440.png
+++ b/apps/site/tools/shots/current/dure-enrollment-starred-1440.png
--- a/apps/site/tools/shots/current/dure-enrollment-starred-390.png
+++ b/apps/site/tools/shots/current/dure-enrollment-starred-390.png
--- a/apps/site/tools/shots/current/gaon-lms-attendance-1440.png
+++ b/apps/site/tools/shots/current/gaon-lms-attendance-1440.png
--- a/apps/site/tools/shots/current/gaon-lms-attendance-390.png
+++ b/apps/site/tools/shots/current/gaon-lms-attendance-390.png
--- a/apps/site/tools/shots/current/gaon-lms-calendar-1440.png
+++ b/apps/site/tools/shots/current/gaon-lms-calendar-1440.png
--- a/apps/site/tools/shots/current/gaon-lms-calendar-390.png
+++ b/apps/site/tools/shots/current/gaon-lms-calendar-390.png
--- a/apps/site/tools/shots/current/gaon-lms-counsel-1440.png
+++ b/apps/site/tools/shots/current/gaon-lms-counsel-1440.png
--- a/apps/site/tools/shots/current/gaon-lms-counsel-390.png
+++ b/apps/site/tools/shots/current/gaon-lms-counsel-390.png
--- a/apps/site/tools/shots/current/gaon-lms-dashboard-1440.png
+++ b/apps/site/tools/shots/current/gaon-lms-dashboard-1440.png
--- a/apps/site/tools/shots/current/gaon-lms-dashboard-390.png
+++ b/apps/site/tools/shots/current/gaon-lms-dashboard-390.png
--- a/apps/site/tools/shots/current/gaon-lms-files-1440.png
+++ b/apps/site/tools/shots/current/gaon-lms-files-1440.png
--- a/apps/site/tools/shots/current/gaon-lms-files-390.png
+++ b/apps/site/tools/shots/current/gaon-lms-files-390.png
--- a/apps/site/tools/shots/current/gaon-lms-grades-1440.png
+++ b/apps/site/tools/shots/current/gaon-lms-grades-1440.png
--- a/apps/site/tools/shots/current/gaon-lms-grades-390.png
+++ b/apps/site/tools/shots/current/gaon-lms-grades-390.png
--- a/apps/site/tools/shots/current/gaon-lms-notice-1440.png
+++ b/apps/site/tools/shots/current/gaon-lms-notice-1440.png
--- a/apps/site/tools/shots/current/gaon-lms-notice-390.png
+++ b/apps/site/tools/shots/current/gaon-lms-notice-390.png
--- a/apps/site/tools/shots/current/gaon-lms-report-1440.png
+++ b/apps/site/tools/shots/current/gaon-lms-report-1440.png
--- a/apps/site/tools/shots/current/gaon-lms-report-390.png
+++ b/apps/site/tools/shots/current/gaon-lms-report-390.png
--- a/apps/site/tools/shots/current/gaon-lms-students-1440.png
+++ b/apps/site/tools/shots/current/gaon-lms-students-1440.png
--- a/apps/site/tools/shots/current/gaon-lms-students-390.png
+++ b/apps/site/tools/shots/current/gaon-lms-students-390.png
--- a/apps/site/tools/shots/diff-dure-enrollment-archive-1440.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-archive-1440.png
--- a/apps/site/tools/shots/diff-dure-enrollment-archive-390.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-archive-390.png
--- a/apps/site/tools/shots/diff-dure-enrollment-catalog-1440.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-catalog-1440.png
--- a/apps/site/tools/shots/diff-dure-enrollment-catalog-390.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-catalog-390.png
--- a/apps/site/tools/shots/diff-dure-enrollment-credits-1440.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-credits-1440.png
--- a/apps/site/tools/shots/diff-dure-enrollment-credits-390.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-credits-390.png
--- a/apps/site/tools/shots/diff-dure-enrollment-enrollments-1440.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-enrollments-1440.png
--- a/apps/site/tools/shots/diff-dure-enrollment-enrollments-390.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-enrollments-390.png
--- a/apps/site/tools/shots/diff-dure-enrollment-notices-1440.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-notices-1440.png
--- a/apps/site/tools/shots/diff-dure-enrollment-notices-390.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-notices-390.png
--- a/apps/site/tools/shots/diff-dure-enrollment-starred-1440.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-starred-1440.png
--- a/apps/site/tools/shots/diff-dure-enrollment-starred-390.png
+++ b/apps/site/tools/shots/diff-dure-enrollment-starred-390.png
--- a/apps/site/tools/shots/diff-gaon-lms-attendance-1440.png
+++ b/apps/site/tools/shots/diff-gaon-lms-attendance-1440.png
--- a/apps/site/tools/shots/diff-gaon-lms-attendance-390.png
+++ b/apps/site/tools/shots/diff-gaon-lms-attendance-390.png
--- a/Show more
+++ b/Show more