fix(site,skill): 모바일 상단 바 수리 — 탭 전환 스크롤 리셋과 단일 sticky 헤더

사용자 보고 '상단 바가 페이지마다 왔다갔다하며 패딩이 없고 포지션도 이상하다'를 계측으로 원인 규명:
- 탭 전환 시 이전 뷰의 window.scrollY 잔류 — 짧은 뷰에선 클램프(600→49)되어 헤더가 반쯤 잘림. setCurrentView 에 scrollTo(0,0) 리셋(양앱)
- ≤900 헤더 이중 스택(브랜드 줄 43px+크럼 52px)·비sticky·safe-top 무 — .side 숨기고 .topbar 를 sticky+safe-top 단일 헤더로(두레 앱바 문법). 데스크톱 무변경
- 재발 방지: e2e M5 헤더·스크롤 스위트 10단언(스크롤 300px+에서 탭 전환 → scrollY=0·헤더 top=0), 시각 기준 갱신(390px 9화면 의도 변경), verify L0~L6 재통과
- 스킬 mobile-app-ux.md 에 '뷰 전환은 스크롤을 리셋·헤더는 하나' 규칙 반영. 가온 CSS v23

apps/site/public/work/dure-enrollment/index.html

@@ -383,6 +383,8 @@
         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 });
+        // 뷰 전환은 새 화면의 맨 위에서 시작 — 이전 스크롤이 남으면 뷰마다 헤더 위치가 제각각이 된다
+        window.scrollTo(0, 0);
       };
       const gotoView = (name, push = true) => {
         if (push) history.pushState({ v: name }, "");

apps/site/public/work/gaon-lms/index.html

@@ -35,7 +35,7 @@
       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=22" />
+    <link rel="stylesheet" href="./styles/main.css?v=23" />
     <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' 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"
@@ -838,6 +838,9 @@
         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 });
+        // 뷰 전환은 새 화면의 맨 위에서 시작한다 — 이전 화면의 스크롤이 남으면
+        // 짧은 뷰에서는 클램프되어 헤더가 반쯤 잘리고, 긴 뷰에서는 화면 중간에 떨어진다
+        window.scrollTo(0, 0);
       };
       const gotoView = (name, push = true) => {
         if (push) history.pushState({ v: name }, "");

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

@@ -600,18 +600,16 @@ 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) 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);
-    min-width: 0;
+  /* 모바일 앱 헤더 — 내비는 바텀 탭으로(HIG·M3). 헤더는 크럼 탑바 하나다:
+     브랜드 줄(사이드)과 크럼이 서로 중복하는 데다 95px 크롬을 쌓아 옥에 끼는 느낌을 냈다.
+     탑바가 sticky 로 상단에 남고, safe-top 으로 노치/상태바를 피한다 */
+  .side { display: none; }
+  .topbar {
+    position: sticky; top: 0; z-index: 40;
+    height: auto; min-height: 52px; min-width: 0;
+    padding: 0 max(var(--space-4), var(--safe-right)) 0 max(var(--space-4), var(--safe-left));
+    padding-top: max(0px, var(--safe-top));
   }
-  .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; }
@@ -619,7 +617,6 @@ tbody tr:hover { background: var(--muted); }
   .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) { margin-inline: var(--space-4); }
   .headline { gap: var(--space-2); }
-  .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; }