모바일 메뉴와 주요 화면 UX 개선 및 시각 검수

docs/DESIGN_CONCEPT.md

@@ -716,9 +716,10 @@ body[data-role="admin"]      { --accent:#5B5F6B; --accent-bright:#7D818E; --acce
 같은 골격 공유, 좌측 네비 항목 + 좌상단 컨텍스트 라벨만 차이. 역할 전환 시 화면 리셋이 아니라 메뉴·accent만 바뀜.
 
 - 톱바 56px `background:var(--surface); border-bottom:1px solid var(--hair);` (그림자 없음).
-- 좌측 네비 기본 72px 아이콘 전용(Lucide stroke 1.75), hover/포커스 시 220px 슬라이드(160ms). 활성 = 아이콘 `color:var(--accent)` + **3px 강조바 금지** → 아이콘 배경 `var(--accent-tint)` `border-radius:8px` 알약형(네비 알약만 8px 관용).
+- 좌측 네비는 넓은 화면에서 항목 텍스트를 항상 함께 보이고, 721–1024px에서는 168px 레일로 줄여도 라벨을 숨기지 않는다. 모바일에는 역할별 주요 3개 목적지와 `전체 메뉴`를 고정해 현재 위치와 추가 경로를 모두 찾을 수 있게 한다. `전체 메뉴`는 불투명 표면의 native dialog로 열고 Escape·Tab·호출자 포커스 복원을 보장한다. 활성 = 아이콘 `color:var(--accent)` + **3px 강조바 금지** → 아이콘 배경 `var(--accent-tint)` `border-radius:8px` 알약형(네비 알약만 8px 관용).
 - 앱 셸은 뷰포트 높이의 고정 프레임이다. 톱바와 GNB는 화면에 남고, 라우트 콘텐츠를 담는 메인 영역만 독립적으로 세로 스크롤한다. GNB 장식은 네비 자체의 `background` 레이어로만 합성하며 문서 위에 절대 위치 의사요소로 띄우지 않는다.
 - **역할 컨텍스트 라벨**: 톱바 좌측, `font-family:var(--font-num); font-size:13px; letter-spacing:0.04em; color:var(--accent);` — "학습 대시보드"/"교수 콘솔"/"운영 콘솔". "지금 누구로 보고 있나"의 유일하고 조용한 신호.
+- 모바일 역할 전환은 현재 역할명이 보이는 native select(접근성 이름: `공간 선택`)로 제공하며, 조작면과 인접 아이콘 버튼은 각각 최소 44×44px을 유지한다. `Ctrl+W`·`Ctrl+N`·`Ctrl+T`의 브라우저 예약 단축키는 가로채지 않고, 기존 Alt 단축키를 보존하며 `Alt+H`는 역할 홈으로 이동한다.
 - **권한 표현 원칙: 권한 없으면 DOM에서 제거.** disabled 회색처리도 안 함 — 존재를 숨김. 화면이 깨끗해지고 "내가 못 하는 것" 노이즈 제거. 임상 데이터 프라이버시(관리자는 학생 개별 성장곡선·transcript 기본 접근 불가, 메뉴 자체 렌더 안 함).
 
 ### 6.4 학습자 대시보드 (홈 = "당신은 나아지고 있다")