docs(sw): Dotum default font, Footer design check and real viewer consumer QA

Report docs/sw/sw-dotum-font-2026-10-20.md and evidence docs/sw/sw-dotum-font-qa/: Noto -> Dotum layout diff of 40 SW
Stories x 4 widths, Header hysteresis trace, Footer design items (4 PASS), SW regression runs with baseline failure
classification, and the isolated HMDesignSwTest-viewer run (Chrome 34/34, Firefox 15/15; original project untouched).
Open items: synthesized-bold overflow in fixed Header cells and Footer POLYGON / WIPEOUT labels (design review),
viewer-regression not run, macOS / Linux fallback not verified.

docs/sw/sw-dotum-font-qa/consumer-viewer/chromium-result.json

@@ -0,0 +1,263 @@
+{
+  "base": "http://127.0.0.1:5391",
+  "engine": "chromium",
+  "loads": {
+    "simple.dxf": {
+      "status": "ready",
+      "ms": 1199,
+      "colors": 52,
+      "nonBg": 0.0182,
+      "name": "simple.dxf",
+      "tabs": 0
+    },
+    "BasicSample.dwg": {
+      "status": "ready",
+      "ms": 1365,
+      "colors": 118,
+      "nonBg": 0.0446,
+      "name": "BasicSample.dwg",
+      "tabs": 2
+    },
+    "civil.dwg": {
+      "status": "ready",
+      "ms": 1829,
+      "colors": 420,
+      "nonBg": 0.1904,
+      "name": "civil.dwg",
+      "tabs": 2
+    }
+  },
+  "results": [
+    {
+      "name": "Font: SWViewerHeader text = Dotum (SW default)",
+      "result": "PASS",
+      "detail": {
+        "Dotum": 20
+      }
+    },
+    {
+      "name": "Font: rendered platform font in header = Dotum (installed, no fallback)",
+      "result": "PASS",
+      "detail": {
+        "Dotum": 102
+      }
+    },
+    {
+      "name": "Theme: SW token --hm-sw-header-font-family = Dotum stack",
+      "result": "PASS",
+      "detail": {
+        "font": "Dotum, \"돋움\", \"Malgun Gothic\", \"Apple SD Gothic Neo\", sans-serif",
+        "bg": "rgba(0, 0, 0, 0)"
+      }
+    },
+    {
+      "name": "Web UI token --hm-font-family-base unchanged (Noto Sans KR)",
+      "result": "PASS",
+      "detail": "\"Noto Sans KR\", \"Malgun Gothic\", \"Apple SD Gothic Neo\", sans-serif"
+    },
+    {
+      "name": "Load simple.dxf: status ready + drawing pixels",
+      "result": "PASS",
+      "detail": {
+        "status": "ready",
+        "ms": 1199,
+        "colors": 52,
+        "nonBg": 0.0182,
+        "name": "simple.dxf",
+        "tabs": 0
+      }
+    },
+    {
+      "name": "Load BasicSample.dwg: status ready + drawing pixels",
+      "result": "PASS",
+      "detail": {
+        "status": "ready",
+        "ms": 1365,
+        "colors": 118,
+        "nonBg": 0.0446,
+        "name": "BasicSample.dwg",
+        "tabs": 2
+      }
+    },
+    {
+      "name": "Load civil.dwg: status ready + drawing pixels",
+      "result": "PASS",
+      "detail": {
+        "status": "ready",
+        "ms": 1829,
+        "colors": 420,
+        "nonBg": 0.1904,
+        "name": "civil.dwg",
+        "tabs": 2
+      }
+    },
+    {
+      "name": "Viewer: wheel zoom changes the drawing",
+      "result": "PASS",
+      "detail": "0.316"
+    },
+    {
+      "name": "Viewer: drag pan changes the view",
+      "result": "PASS",
+      "detail": "0.323"
+    },
+    {
+      "name": "Viewer: F (fit) restores the full view",
+      "result": "PASS",
+      "detail": "0.002 < 0.327"
+    },
+    {
+      "name": "Header: space tab switch (inactive → active) re-renders the canvas",
+      "result": "PASS",
+      "detail": "2 tabs, now Model17,377"
+    },
+    {
+      "name": "Header: 샘플 dropdown opens (SWViewerMenu) with Dotum",
+      "result": "PASS",
+      "detail": {
+        "Dotum": 6
+      }
+    },
+    {
+      "name": "Header: Escape closes the dropdown",
+      "result": "PASS",
+      "detail": ""
+    },
+    {
+      "name": "Header: sample menu loads simple.dxf",
+      "result": "PASS",
+      "detail": "simple.dxf / ready"
+    },
+    {
+      "name": "Viewer: 2.5D switch toggles and re-renders",
+      "result": "PASS",
+      "detail": "0.0217"
+    },
+    {
+      "name": "Panel: 설정 opens SWViewerPanel",
+      "result": "PASS",
+      "detail": ""
+    },
+    {
+      "name": "Panel: text = Dotum (program list cells keep their monospace)",
+      "result": "PASS",
+      "detail": {
+        "Dotum": 25
+      }
+    },
+    {
+      "name": "Panel: SWViewerSlider changes value and syncs the number input",
+      "result": "PASS",
+      "detail": "1 → 1.2, input 1.2"
+    },
+    {
+      "name": "Panel: SWViewerSwitch toggles (그리드)",
+      "result": "PASS",
+      "detail": "false → true"
+    },
+    {
+      "name": "Panel: title drag moves the panel",
+      "result": "PASS",
+      "detail": "(904,56) → (704,168)"
+    },
+    {
+      "name": "Panel: resize grip changes size",
+      "result": "PASS",
+      "detail": "340×520 → 413×353"
+    },
+    {
+      "name": "Panel: body scrolls vertically, no horizontal overflow",
+      "result": "PASS",
+      "detail": {
+        "scrollable": true,
+        "before": 0,
+        "after": 207,
+        "overflowX": false
+      }
+    },
+    {
+      "name": "Panel: no clipped text after Dotum",
+      "result": "PASS",
+      "detail": []
+    },
+    {
+      "name": "Panel: closes (Escape)",
+      "result": "PASS",
+      "detail": ""
+    },
+    {
+      "name": "Panel: 레이어 opens with layer rows",
+      "result": "PASS",
+      "detail": "2 rows"
+    },
+    {
+      "name": "Panel: 정보 (modal) opens and Escape closes it",
+      "result": "PASS",
+      "detail": "open=true"
+    },
+    {
+      "name": "Responsive 1920: header/page no horizontal overflow",
+      "result": "PASS",
+      "detail": {
+        "overflow": false,
+        "doc": false,
+        "more": false
+      }
+    },
+    {
+      "name": "Responsive 1180: header/page no horizontal overflow",
+      "result": "PASS",
+      "detail": {
+        "overflow": false,
+        "doc": false,
+        "more": false
+      }
+    },
+    {
+      "name": "Responsive 900: header/page no horizontal overflow (More shown)",
+      "result": "PASS",
+      "detail": {
+        "overflow": false,
+        "doc": false,
+        "more": true
+      }
+    },
+    {
+      "name": "Responsive 900: More opens with collapsed items",
+      "result": "PASS",
+      "detail": "5 items"
+    },
+    {
+      "name": "Responsive 560: header/page no horizontal overflow (More shown)",
+      "result": "PASS",
+      "detail": {
+        "overflow": false,
+        "doc": false,
+        "more": true
+      }
+    },
+    {
+      "name": "Responsive 375: header/page no horizontal overflow (More shown)",
+      "result": "PASS",
+      "detail": {
+        "overflow": false,
+        "doc": false,
+        "more": true
+      }
+    },
+    {
+      "name": "Responsive 375: More opens with collapsed items",
+      "result": "PASS",
+      "detail": "8 items"
+    },
+    {
+      "name": "Console / page / HTTP errors: none (favicon.ico 404 = program has no icon, pre-existing)",
+      "result": "PASS",
+      "detail": {
+        "errors": [],
+        "favicon404": 0
+      }
+    }
+  ],
+  "errors": []
+}

docs/sw/sw-dotum-font-qa/consumer-viewer/firefox-result.json

@@ -0,0 +1,128 @@
+{
+  "base": "http://127.0.0.1:5391",
+  "version": "158.0",
+  "results": [
+    {
+      "name": "Firefox 1400: civil.dwg loads (status)",
+      "result": "PASS",
+      "data": "ready"
+    },
+    {
+      "name": "Firefox 1400: Dotum resolves to an installed face (width differs from fallbacks)",
+      "result": "PASS",
+      "data": {
+        "dotum": 170,
+        "malgun": 162.3,
+        "mono": 168
+      }
+    },
+    {
+      "name": "Firefox 1400: SWViewerHeader computed font = Dotum",
+      "result": "PASS",
+      "data": {
+        "Dotum": 15
+      }
+    },
+    {
+      "name": "Firefox 1400: no horizontal overflow",
+      "result": "PASS",
+      "data": {
+        "header": 0,
+        "page": 0,
+        "more": false,
+        "h": 52
+      }
+    },
+    {
+      "name": "Firefox 1400: header menu opens (Dotum)",
+      "result": "PASS",
+      "data": {
+        "items": 3,
+        "font": "Dotum"
+      }
+    },
+    {
+      "name": "Firefox 1400: Escape closes the menu",
+      "result": "PASS"
+    },
+    {
+      "name": "Firefox 1400: options SWViewerPanel opens, Dotum, scrollable body, no clipped text",
+      "result": "PASS",
+      "data": {
+        "opened": "toggle",
+        "panel": {
+          "w": 340,
+          "h": 520,
+          "font": "Dotum",
+          "scroll": true,
+          "clipped": 0,
+          "inView": true
+        }
+      }
+    },
+    {
+      "name": "Firefox 500: civil.dwg loads (status)",
+      "result": "PASS",
+      "data": "ready"
+    },
+    {
+      "name": "Firefox 500: Dotum resolves to an installed face (width differs from fallbacks)",
+      "result": "PASS",
+      "data": {
+        "dotum": 170,
+        "malgun": 162.3,
+        "mono": 168
+      }
+    },
+    {
+      "name": "Firefox 500: SWViewerHeader computed font = Dotum",
+      "result": "PASS",
+      "data": {
+        "Dotum": 3
+      }
+    },
+    {
+      "name": "Firefox 500: no horizontal overflow",
+      "result": "PASS",
+      "data": {
+        "header": 0,
+        "page": 0,
+        "more": true,
+        "h": 52
+      }
+    },
+    {
+      "name": "Firefox 500: header menu opens (Dotum)",
+      "result": "PASS",
+      "data": {
+        "items": 10,
+        "font": "Dotum"
+      }
+    },
+    {
+      "name": "Firefox 500: Escape closes the menu",
+      "result": "PASS"
+    },
+    {
+      "name": "Firefox 500: options SWViewerPanel opens, Dotum, scrollable body, no clipped text",
+      "result": "PASS",
+      "data": {
+        "opened": "more",
+        "panel": {
+          "w": 340,
+          "h": 520,
+          "font": "Dotum",
+          "scroll": true,
+          "clipped": 0,
+          "inView": true
+        }
+      }
+    },
+    {
+      "name": "Firefox: no console errors (favicon 404 excluded)",
+      "result": "PASS",
+      "data": []
+    }
+  ],
+  "errors": []
+}

docs/sw/sw-dotum-font-qa/consumer-viewer/hmdesign-snapshot.patch

@@ -0,0 +1,396 @@
+diff --git a/README.md b/README.md
+index 06a943a..648c5fb 100644
+--- a/README.md
++++ b/README.md
+@@ -124,7 +124,7 @@ import { OrgChart } from "@hm-design/org-chart-react" // Core: @hm-design/org-ch
+ 
+ 별도 React 앱은 [Tailwind v4 검색 범위 가이드](docs/guidelines/runtime-portability.md#21-tailwind-v4-소비자-검색-범위)를 확인합니다. `source("./")`는 CSS 위치에 따라 범위가 달라지며 HM `tailwind.css`의 명시 source를 유지해야 합니다. 공개 package Theme는 동봉된 `dist/fonts/`를 상대 URL로 참조합니다. 개발 저장소·포터블 ZIP·React 소비자·단일 HTML의 차이는 [폰트·Asset 경로](docs/guidelines/runtime-portability.md#41-noto-sans-kr-경로-실행-환경별-확인)를 따릅니다.
+ 
+-SW는 Tailwind 없이 앱 진입점에서 `import "@hm-design/sw/styles.css"`를 한 번 추가합니다. 한 화면에서는 SW 일반 모드와 뷰어 모드 중 하나를 고르고, 글꼴 등 토큰은 가장 바깥 `<SWTheme style>`에서 바꿉니다([SW 사용 안내](packages/sw/ai/AI_USAGE.md)). SW 기본 글꼴은 Noto Sans KR이며 Figma의 Dotum을 기본값으로 쓸지는 디자인 승인 대기입니다. OrgChart는 Core CSS 두 개(`@hm-design/org-chart/engine.css`, `/style.css`)의 URL을 `stylesheetUrls`로 전달합니다(Shadow DOM, [OrgChart React README](packages/org-chart-react/README.md)).
++SW는 Tailwind 없이 앱 진입점에서 `import "@hm-design/sw/styles.css"`를 한 번 추가합니다. 한 화면에서는 SW 일반 모드와 뷰어 모드 중 하나를 고르고, 글꼴 등 토큰은 가장 바깥 `<SWTheme style>`에서 바꿉니다([SW 사용 안내](packages/sw/ai/AI_USAGE.md)). SW 기본 글꼴은 돋움(Dotum, 설치된 시스템 글꼴)이고 Web UI 기본 글꼴은 Noto Sans KR입니다. 서로의 글꼴 설정을 복사하지 않습니다. OrgChart는 Core CSS 두 개(`@hm-design/org-chart/engine.css`, `/style.css`)의 URL을 `stylesheetUrls`로 전달합니다(Shadow DOM, [OrgChart React README](packages/org-chart-react/README.md)).
+ 
+ 화면 생성 Reference: [Navigation 선택 근거](docs/guidelines/navigation-single-mode.md#선택-근거), [GNB Desktop·Mobile 구성](docs/patterns/gnb.md#8-desktop--mobile)과 [내부 Sidebar](docs/patterns/gnb.md#15-gnb-only-sidebar-composition-2026-10-08), [FilterBar 조회·초기화 소비 예제](docs/patterns/filter-bar.md#61-조회-버튼으로-적용하는-소비-예제). 일반 업무 목록의 모드를 임의 확정하거나 FilterBar에 조회 API가 있다고 가정하지 않습니다.
+ 
+diff --git a/docs/ai/AI_GUIDE.md b/docs/ai/AI_GUIDE.md
+index 8ac07f4..5fd7e42 100644
+--- a/docs/ai/AI_GUIDE.md
++++ b/docs/ai/AI_GUIDE.md
+@@ -138,7 +138,7 @@
+ 
+ 혼합 규칙:
+ 
+-1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다.
++1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다.
+ 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다.
+    - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`)
+    - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4)
+diff --git a/packages/org-chart-react/ai/AI_GUIDE.md b/packages/org-chart-react/ai/AI_GUIDE.md
+index 8ac07f4..5fd7e42 100644
+--- a/packages/org-chart-react/ai/AI_GUIDE.md
++++ b/packages/org-chart-react/ai/AI_GUIDE.md
+@@ -138,7 +138,7 @@
+ 
+ 혼합 규칙:
+ 
+-1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다.
++1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다.
+ 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다.
+    - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`)
+    - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4)
+diff --git a/packages/org-chart/ai/AI_GUIDE.md b/packages/org-chart/ai/AI_GUIDE.md
+index 8ac07f4..5fd7e42 100644
+--- a/packages/org-chart/ai/AI_GUIDE.md
++++ b/packages/org-chart/ai/AI_GUIDE.md
+@@ -138,7 +138,7 @@
+ 
+ 혼합 규칙:
+ 
+-1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다.
++1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다.
+ 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다.
+    - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`)
+    - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4)
+diff --git a/packages/sw/ai/AI_GUIDE.md b/packages/sw/ai/AI_GUIDE.md
+index 8ac07f4..5fd7e42 100644
+--- a/packages/sw/ai/AI_GUIDE.md
++++ b/packages/sw/ai/AI_GUIDE.md
+@@ -138,7 +138,7 @@
+ 
+ 혼합 규칙:
+ 
+-1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다.
++1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다.
+ 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다.
+    - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`)
+    - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4)
+diff --git a/packages/sw/ai/AI_USAGE.md b/packages/sw/ai/AI_USAGE.md
+index cb50552..b09a057 100644
+--- a/packages/sw/ai/AI_USAGE.md
++++ b/packages/sw/ai/AI_USAGE.md
+@@ -102,8 +102,9 @@ import "@hm-design/sw/styles.css" // 앱 진입점에서 한 번
+ - **금지:** `@hm-design/sw/src/...`, `@hm-design/sw/dist/components/...` 같은 내부 경로 Import. `dist`에 내부 모듈의 `.d.ts`가 보여도 공개 API가 아니다.
+ - Peer: `react`, `react-dom` `^19.0.0`. 런타임 dependency 없음. `@hm-design/ui`·조직도 패키지와 무관하다.
+ - SVG·PNG 자산은 JS에 data URI로 포함되어 별도 설정이 없다.
+-- 글꼴 파일은 포함하지 않는다. 앱에서 Noto Sans KR(400/500/700)을 로드한다(없으면 Malgun Gothic → Apple SD Gothic Neo).
+-- SW 기본 글꼴은 Noto Sans KR이다(Figma는 Dotum). **Dotum을 기본으로 쓸지는 디자인 승인 대기**이므로 AI가 임의로 Dotum을 적용하지 않는다. 프로그램(사용자)이 글꼴을 정한 경우에만 §3.1 방법으로 `--hm-sw-header-font-family`를 바꾸고, 결과 보고에 "글꼴 변경 — 디자인 승인 대기 항목"으로 적는다.
++- SW 기본 글꼴은 돋움(Dotum)이다(`--hm-sw-header-font-family: Dotum, "돋움", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif`, Figma와 같음). 설치된 시스템 글꼴(Windows)을 쓰며 패키지는 글꼴 파일을 포함하지 않는다. 돋움이 없는 환경은 Malgun Gothic → Apple SD Gothic Neo로 대체된다. 앱이 별도 글꼴 파일을 로드할 필요는 없다.
++- SW 화면은 `SWTheme`(또는 SW 컴포넌트 루트)와 SW 토큰의 글꼴을 그대로 쓴다. Web UI의 기본 글꼴(Noto Sans KR, `--hm-font-family-base`)이나 Web `theme.css`의 글꼴 설정을 SW 화면에 복사하지 않고, SW 컴포넌트에 `font-family`를 개별 지정하지 않는다. 프로그램(사용자)이 다른 글꼴을 정한 경우에만 §3.1 방법으로 `--hm-sw-header-font-family`를 바꾸고 결과 보고에 "글꼴 변경"으로 적는다.
++- 돋움에는 Bold 글꼴이 없어 700은 브라우저가 합성 Bold로 그리며 글자당 약 1px 넓어진다. Figma 고정 폭 칸(예: 가중치·스케일 38px, 레이어 값, 문자/치수스타일)에 긴 값이 들어가면 말줄임이 된다.
+ - CSS는 전역(`html`, `body`, `*`)을 건드리지 않는다. `body` margin 등 페이지 기본값은 소비 앱이 정한다.
+ - 스크롤바: SW 전용 스크롤바 디자인은 없다. 기존 SW 컴포넌트는 브라우저 기본 스크롤바를 쓰며(속성Bar만 `scrollbar-width: thin`), Popup 본문 스크롤은 `SWPopup`이 처리한다. 새 스크롤 영역에 임의 스크롤바 색·두께를 만들지 않는다.
+ - TypeScript에서 CSS side-effect import 오류가 나면 Vite의 `vite/client` 타입을 포함한다.
+@@ -122,7 +123,7 @@ SW 토큰(`--hm-sw-header-*`, `--hm-sw-property-*`, `--hm-sw-viewer-*`, `--hm-sw
+ 
+ 1. 화면 전체(Header·Panel·Menu가 같은 값)를 바꾸려면 화면을 `<SWTheme style={theme}>` 하나로 감싸고 거기서만 토큰을 정합니다. 프로그램 class(`<SWTheme className="app-sw-theme">` + `.app-sw-theme { --hm-sw-header-font-family: … }`)도 됩니다.
+    ```tsx
+-   const appSWTheme = { "--hm-sw-header-font-family": '"Noto Sans KR", sans-serif' } as CSSProperties
++   const appSWTheme = { "--hm-sw-header-font-family": '"Malgun Gothic", sans-serif' } as CSSProperties // 프로그램이 정한 값만
+    <SWTheme style={appSWTheme}>
+      <SWViewerHeader … />        {/* Dropdown·More 포함 */}
+      <SWViewerPanel …>…</SWViewerPanel>
+diff --git a/packages/sw/ai/COMPOSITION_PATTERNS.md b/packages/sw/ai/COMPOSITION_PATTERNS.md
+index 891e8f9..ad08596 100644
+--- a/packages/sw/ai/COMPOSITION_PATTERNS.md
++++ b/packages/sw/ai/COMPOSITION_PATTERNS.md
+@@ -235,7 +235,7 @@ const sections: SWHomeMenuSectionData[] = [
+ 일반·뷰어 모드 공통입니다. 토큰 기본값은 가장 바깥 SW 범위에서만 선언되고 안쪽 SW 요소는 상속합니다([AI_USAGE.md](./AI_USAGE.md) §3.1).
+ 
+ ```tsx
+-const appSWTheme = { "--hm-sw-header-font-family": '"Noto Sans KR", sans-serif' } as CSSProperties // 프로그램이 정한 값만
++const appSWTheme = { "--hm-sw-header-font-family": '"Malgun Gothic", sans-serif' } as CSSProperties // 프로그램이 정한 값만
+ 
+ <SWTheme style={appSWTheme}>              {/* 가장 바깥 범위: 여기서만 지정 */}
+   <SWViewerHeader … />                    {/* Dropdown·More까지 상속 */}
+@@ -246,7 +246,7 @@ const appSWTheme = { "--hm-sw-header-font-family": '"Noto Sans KR", sans-serif'
+ ```
+ 
+ - 일반 모드도 같습니다: `<SWTheme style={appSWTheme}>` 안의 `SWHeader`(Dropdown·창 이동 Tooltip)·`SWFooter`(`SWFooterCommandLine`·명령 등록 안내)가 같은 값을 씁니다.
+-- 기본 글꼴은 Noto Sans KR입니다. Dotum 기본 적용은 디자인 승인 대기이므로 AI가 임의로 Dotum을 넣지 않습니다.
++- 기본 글꼴은 돋움(Dotum)입니다. 기본값을 쓸 때는 글꼴 토큰을 지정하지 않습니다. Web UI 글꼴(Noto Sans KR)을 SW 화면에 넣지 않습니다.
+ - `hm-sw-*` class 선택자로 토큰을 덮거나 `!important`, 컴포넌트마다 같은 값 반복 지정을 하지 않습니다.
+ 
+ ## 9. 하지 말 것
+diff --git a/packages/sw/ai/DESIGN_RULES.md b/packages/sw/ai/DESIGN_RULES.md
+index 85ac0be..437eda1 100644
+--- a/packages/sw/ai/DESIGN_RULES.md
++++ b/packages/sw/ai/DESIGN_RULES.md
+@@ -44,7 +44,7 @@
+ 
+ | 항목 | 값 |
+ |---|---|
+-| 글꼴 | Noto Sans KR → Malgun Gothic → Apple SD Gothic Neo (`--hm-sw-header-font-family`, Figma Dotum 대체 — 현재 패키지 기본값). 폰트 파일은 앱이 로드. **Dotum 기본 적용 여부는 디자인 승인 대기**: 기본값을 바꾸지 않으며, 프로그램이 정한 경우에만 [AI_USAGE.md](./AI_USAGE.md) §3.1 방법으로 변경 |
++| 글꼴 | 돋움(Dotum) → Malgun Gothic → Apple SD Gothic Neo (`--hm-sw-header-font-family: Dotum, "돋움", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif`, Figma와 같음, 2026-10-20). 설치된 시스템 글꼴을 쓰며 글꼴 파일은 포함하지 않음. Web UI 기본 글꼴(Noto Sans KR)과 별개. 다른 글꼴은 프로그램이 정한 경우에만 [AI_USAGE.md](./AI_USAGE.md) §3.1 방법으로 변경. 돋움 700은 합성 Bold(글자당 약 +1px) |
+ | 기본 / 라벨 | 14px / 12px (`--hm-sw-header-font-size` / `--hm-sw-header-label-size`) |
+ | Weight | 400, 500, 700만 사용(600 없음). 값·제목·토글 700 |
+ | 자간 | 값 0.04em, 라벨 0.02em, 파일명 0.06em |
+@@ -180,7 +180,7 @@ Container `hm-sw-header` 기준 Breakpoint: **< 1800** 선/문자/치수스타
+ 
+ ## 13. Footer (`SWFooter*`, Figma 26:10097) — SW 일반 모드 전용
+ 
+-원본 `src/theme/sw-footer.css`. 토큰은 `--hm-sw-footer-*`(`.hm-sw-header`, `.hm-sw-theme` 범위). 값은 Figma Plugin API로 읽은 값입니다(2026-10-20). 글꼴은 Header와 같이 Dotum 대신 Noto Sans KR, 글자 외곽선은 Header 토큰(`--hm-sw-header-text-outline` 1.3px / `--hm-sw-header-label-outline` 1px)을 공유하고, Figma의 자기 색 0.3 / 0.4px stroke는 Header 2026-10-16 수정과 같이 그리지 않습니다.
++원본 `src/theme/sw-footer.css`. 토큰은 `--hm-sw-footer-*`(`.hm-sw-header`, `.hm-sw-theme` 범위). 값은 Figma Plugin API로 읽은 값입니다(2026-10-20). 글꼴은 Header와 같은 SW 기본 글꼴(돋움), 글자 외곽선은 Header 토큰(`--hm-sw-header-text-outline` 1.3px / `--hm-sw-header-label-outline` 1px)을 공유하고, Figma의 자기 색 0.3 / 0.4px stroke는 Header 2026-10-16 수정과 같이 그리지 않습니다.
+ 
+ | 항목 | 값 | 토큰 |
+ |---|---|---|
+diff --git a/packages/sw/ai/VIEWER.md b/packages/sw/ai/VIEWER.md
+index 6c76a21..4fdae42 100644
+--- a/packages/sw/ai/VIEWER.md
++++ b/packages/sw/ai/VIEWER.md
+@@ -101,7 +101,7 @@ const groups: SWViewerHeaderGroup[] = [
+ | 뷰어 Header를 `div` + `button`으로 다시 만들기, `hm-sw-viewer-*` class를 소비 코드에 붙이기 | 데이터(`groups`)와 `custom` / `trailing`으로 구성 |
+ | Header 버튼 글자에 `-webkit-text-stroke`·`border`로 외곽선 만들기 | 외곽선은 패키지 토큰이 이미 적용합니다 |
+ | 메뉴 색·간격을 `#123456`, `margin` 등 임의 값으로 덮기 | 토큰 `--hm-sw-viewer-*` / `--hm-sw-header-*`만 가장 바깥 SW 범위(`<SWTheme>` 또는 단독 컴포넌트 루트)의 `style`로 조정(기본값 유지 권장, [AI_USAGE.md](./AI_USAGE.md) §3.1) |
+-| Header·Dropdown·More·Panel의 글꼴을 각각 따로 지정, `.hm-sw-viewer-menu` 등 class로 덮기 | 화면을 `<SWTheme style={theme}>` 하나로 감싸면 Header·Dropdown·More·Panel이 같은 값을 상속합니다. 글꼴 기본값은 Noto Sans KR이며 Dotum 기본 적용은 디자인 승인 대기 |
++| Header·Dropdown·More·Panel의 글꼴을 각각 따로 지정, `.hm-sw-viewer-menu` 등 class로 덮기 | 화면을 `<SWTheme style={theme}>` 하나로 감싸면 Header·Dropdown·More·Panel이 같은 값을 상속합니다. 글꼴 기본값은 돋움(Dotum)이며 Web UI 글꼴(Noto Sans KR)을 복사하지 않습니다 |
+ | 존재하지 않는 Props 추측(`items`, `content`, `renderBody` …) | 위 표와 `dist/index.d.ts`가 전부 |
+ | 일반 모드 화면에서 `SWViewerHeader` 사용, 뷰어에서 `SWHeader` 재스타일 | 모드별 Header를 바꿔 끼웁니다 |
+ | 기능 없는 메뉴를 가짜 동작으로 연결 | 항목 제외 또는 `disabled` + 미연결 보고 |
+diff --git a/packages/sw/ai/examples/ExampleJ-Theme.tsx b/packages/sw/ai/examples/ExampleJ-Theme.tsx
+index 3b1d240..91bc5e9 100644
+--- a/packages/sw/ai/examples/ExampleJ-Theme.tsx
++++ b/packages/sw/ai/examples/ExampleJ-Theme.tsx
+@@ -1,8 +1,8 @@
+ // Example J — SW theme tokens (both modes). The only official way to change SW tokens: `style` (or the program's own
+ // class) on the OUTERMOST SW scope. Here one <SWTheme> wraps the viewer screen, so the header, its dropdowns, More,
+ // and every panel read the same value. Portals leave the DOM tree: wrap their content in <SWTheme> with the same style.
+-// The font below is a placeholder for a program decision: the SW default stays Noto Sans KR (a Dotum default is
+-// pending design approval), so only set it when the program has decided to.
++// The font below is a placeholder for a program decision: the SW default is Dotum (2026-10-20) and needs no token,
++// so only set it when the program has decided on another font. Never copy the Web UI font (Noto Sans KR) here.
+ import { useState, type CSSProperties } from "react"
+ import { createPortal } from "react-dom"
+ import {
+@@ -12,7 +12,7 @@ import {
+ 
+ /** One theme object for the screen and for every portal. Token names only (`--hm-sw-*`), never `hm-sw-*` classes. */
+ export const appSWTheme = {
+-  "--hm-sw-header-font-family": '"Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif',
++  "--hm-sw-header-font-family": '"Malgun Gothic", "Apple SD Gothic Neo", sans-serif',
+ } as CSSProperties
+ 
+ export function ExampleJTheme({ onEvent }: { onEvent?: (name: string) => void }) {
+diff --git a/packages/sw/src/theme/sw-footer.css b/packages/sw/src/theme/sw-footer.css
+index 41f13b1..9e63565 100644
+--- a/packages/sw/src/theme/sw-footer.css
++++ b/packages/sw/src/theme/sw-footer.css
+@@ -1,6 +1,6 @@
+ /* @hm-design/sw — SW Footer (Figma "레이아웃 분리" 26:10097 bottom bar, components 26:9459 … 26:10097, read
+    through the Figma Plugin API 2026-10-20). Footer-only tokens. Text keeps the SW typography of sw.css
+-   (Noto Sans KR instead of Dotum, black OUTSIDE outline as 16 text-shadows, own-color 0.3 / 0.4px strokes removed
++   (Dotum like Figma since 2026-10-20, black OUTSIDE outline as 16 text-shadows, own-color 0.3 / 0.4px strokes removed
+    like the 2026-10-16 header fix). Never touches global selectors, SWHeader or SWPopup classes.
+    Declared on the outermost SW scope only, like sw.css: the command line inside the bar inherits the tokens. */
+ 
+diff --git a/packages/sw/src/theme/sw.css b/packages/sw/src/theme/sw.css
+index ad511f5..27441bb 100644
+--- a/packages/sw/src/theme/sw.css
++++ b/packages/sw/src/theme/sw.css
+@@ -17,8 +17,10 @@
+   --hm-sw-header-logo-width: 32px;
+   --hm-sw-header-logo-height: 17px;
+ 
+-  /* Typography (Figma Dotum is replaced by Noto Sans KR on purpose) */
+-  --hm-sw-header-font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
++  /* Typography: SW default is Dotum like Figma (2026-10-20). Installed system font only (Windows gulim.ttc); the
++     package ships no font file. Malgun Gothic / Apple SD Gothic Neo cover systems without Dotum. Web UI keeps
++     Noto Sans KR (its own token); this token never leaves the SW scope. */
++  --hm-sw-header-font-family: Dotum, "돋움", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
+   --hm-sw-header-font-size: 14px;
+   --hm-sw-header-label-size: 12px;
+ 
+@@ -539,7 +541,9 @@
+   flex: 0 1 90px;
+   min-width: 0;
+   margin-left: -1px;
+-  padding: 0 8px;
++  /* 4px (was 8px): Dotum has no bold face, so 700 is synthesized ~1px wider per glyph ("그리기모드" 77.8px);
++     the centered label fits the Figma 90px cell again. */
++  padding: 0 4px;
+   overflow: hidden;
+   text-align: center;
+   white-space: nowrap;
+diff --git a/packages/sw/tests/ai-template-consumer.browser.mjs b/packages/sw/tests/ai-template-consumer.browser.mjs
+index b4b1abf..ad917cc 100644
+--- a/packages/sw/tests/ai-template-consumer.browser.mjs
++++ b/packages/sw/tests/ai-template-consumer.browser.mjs
+@@ -41,7 +41,7 @@ await page.evaluate(() => document.fonts.ready)
+ const assets = await page.evaluate(() => [...document.images].map(image => ({ src: image.currentSrc.slice(0, 30), ok: image.complete && image.naturalWidth > 0 })))
+ check("1 all SVG/PNG assets decode (data URI, no external path)", assets.length > 0 && assets.every(item => item.ok && item.src.startsWith("data:")), { count: assets.length, broken: assets.filter(item => !item.ok) })
+ const tokens = await page.evaluate(() => { const s = getComputedStyle(document.querySelector('[data-example="b"] .hm-sw-theme')); return { height: s.getPropertyValue("--hm-sw-header-height").trim(), font: s.fontFamily } })
+-check("1 styles.css loaded; SWTheme provides tokens", tokens.height === "49px" && tokens.font.includes("Noto Sans KR"), tokens)
++check("1 styles.css loaded; SWTheme provides tokens", tokens.height === "49px" && tokens.font.startsWith("Dotum"), tokens)
+ 
+ // 2. Example A: default header unchanged (Figma 1920 coordinates)
+ const a = section("a")
+diff --git a/packages/sw/tests/theme-inheritance.browser.mjs b/packages/sw/tests/theme-inheritance.browser.mjs
+index 007855e..1e6ebab 100644
+--- a/packages/sw/tests/theme-inheritance.browser.mjs
++++ b/packages/sw/tests/theme-inheritance.browser.mjs
+@@ -1,7 +1,7 @@
+ // SW theme token inheritance (2026-10-20, A-1).
+ // 1) SW/Theme › Theme Inheritance: a token set through `style` on the outermost SW scope reaches the header, dropdowns,
+ //    More, panels, footer command line and tooltips; portals get it only when wrapped in a themed <SWTheme>; areas do
+-//    not mix; unthemed components keep Noto Sans KR. Dotum is a verification value only (not the SW default).
++//    not mix; unthemed components keep the SW default Dotum (2026-10-20). Noto Sans KR is a verification value only.
+ // 2) Regression: every existing SW Story renders identically with the new cascade and with the legacy cascade
+ //    (token blocks re-declared on every `.hm-sw-header, .hm-sw-theme`, i.e. the code before this change): computed
+ //    font / color / geometry of every SW element and an element screenshot comparison. No Story sets an override,
+@@ -22,9 +22,9 @@ const [storybook = 'http://127.0.0.1:6024', outArg] = process.argv.slice(2)
+ const out = path.resolve(outArg ?? 'docs/sw/theme-inheritance-qa')
+ await mkdir(out, { recursive: true })
+ 
+-const VERIFY = 'Dotum, 돋움, sans-serif'
++const VERIFY = '"Noto Sans KR", sans-serif'
+ const NESTED = '"Malgun Gothic", sans-serif'
+-const DEFAULT = '"Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif'
++const DEFAULT = 'Dotum, 돋움, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif'
+ const results = []
+ const check = (name, pass, detail = '') => { results.push({ name, result: pass ? 'PASS' : 'FAIL', detail }); console.log(`${pass ? 'PASS' : 'FAIL'}  ${name}${detail ? `  — ${detail}` : ''}`) }
+ const errors = []
+@@ -67,52 +67,52 @@ const fmt = map => Object.entries(map).map(([family, count]) => `${count}× ${fa
+ 
+   // Default (no theme): header, then its sample dropdown and More.
+   const def = scope('default')
+-  check('기본: 단독 SWViewerHeader = Noto Sans KR', only(await fonts(page, `${def} .hm-sw-viewer-header`), DEFAULT), fmt(await fonts(page, `${def} .hm-sw-viewer-header`)))
++  check('기본: 단독 SWViewerHeader = 기본 Dotum', only(await fonts(page, `${def} .hm-sw-viewer-header`), DEFAULT), fmt(await fonts(page, `${def} .hm-sw-viewer-header`)))
+   await page.locator(`${def} .hm-sw-viewer-header [aria-haspopup="menu"]`).first().click()
+   await page.waitForSelector(`${def} .hm-sw-viewer-menu`)
+-  check('기본: Dropdown = Noto Sans KR', only(await fonts(page, `${def} .hm-sw-viewer-menu`), DEFAULT), fmt(await fonts(page, `${def} .hm-sw-viewer-menu`)))
++  check('기본: Dropdown = 기본 Dotum', only(await fonts(page, `${def} .hm-sw-viewer-menu`), DEFAULT), fmt(await fonts(page, `${def} .hm-sw-viewer-menu`)))
+   await page.keyboard.press('Escape')
+   await page.locator(`${def} .hm-sw-viewer-header button[aria-label="추가 도구"]`).click()
+   await page.waitForSelector(`${def} .hm-sw-viewer-menu[data-surface="beige"]`)
+-  check('기본: More = Noto Sans KR', only(await fonts(page, `${def} .hm-sw-viewer-menu`), DEFAULT), fmt(await fonts(page, `${def} .hm-sw-viewer-menu`)))
++  check('기본: More = 기본 Dotum', only(await fonts(page, `${def} .hm-sw-viewer-menu`), DEFAULT), fmt(await fonts(page, `${def} .hm-sw-viewer-menu`)))
+   await page.keyboard.press('Escape')
+ 
+   // Viewer, themed through <SWTheme style>.
+   const viewer = scope('viewer-themed')
+-  check('뷰어 테마: SWViewerHeader 전체 = Dotum', only(await fonts(page, `${viewer} .hm-sw-viewer-header`), VERIFY), fmt(await fonts(page, `${viewer} .hm-sw-viewer-header`)))
++  check('뷰어 테마: SWViewerHeader 전체 = 검증 글꼴', only(await fonts(page, `${viewer} .hm-sw-viewer-header`), VERIFY), fmt(await fonts(page, `${viewer} .hm-sw-viewer-header`)))
+   await page.locator(`${viewer} .hm-sw-viewer-header [aria-haspopup="menu"]`).first().click()
+   await page.waitForSelector(`${viewer} .hm-sw-viewer-menu`)
+-  check('뷰어 테마: Dropdown = Dotum', only(await fonts(page, `${viewer} .hm-sw-viewer-menu`), VERIFY), fmt(await fonts(page, `${viewer} .hm-sw-viewer-menu`)))
++  check('뷰어 테마: Dropdown = 검증 글꼴', only(await fonts(page, `${viewer} .hm-sw-viewer-menu`), VERIFY), fmt(await fonts(page, `${viewer} .hm-sw-viewer-menu`)))
+   await page.keyboard.press('Escape')
+   await page.locator(`${viewer} .hm-sw-viewer-header button[aria-label="추가 도구"]`).click()
+   await page.waitForSelector(`${viewer} .hm-sw-viewer-menu[data-surface="beige"]`)
+-  check('뷰어 테마: More = Dotum', only(await fonts(page, `${viewer} .hm-sw-viewer-menu`), VERIFY), fmt(await fonts(page, `${viewer} .hm-sw-viewer-menu`)))
++  check('뷰어 테마: More = 검증 글꼴', only(await fonts(page, `${viewer} .hm-sw-viewer-menu`), VERIFY), fmt(await fonts(page, `${viewer} .hm-sw-viewer-menu`)))
+   // A submenu of More, if any, is a nested menu inside a nested menu.
+   const sub = page.locator(`${viewer} .hm-sw-viewer-menu[data-surface="beige"] [aria-haspopup="menu"]`).first()
+   if (await sub.count()) {
+     await sub.hover()
+     await page.waitForTimeout(150)
+-    check('뷰어 테마: More 서브메뉴 = Dotum', only(await fonts(page, `${viewer} .hm-sw-viewer-menu`), VERIFY), fmt(await fonts(page, `${viewer} .hm-sw-viewer-menu`)))
++    check('뷰어 테마: More 서브메뉴 = 검증 글꼴', only(await fonts(page, `${viewer} .hm-sw-viewer-menu`), VERIFY), fmt(await fonts(page, `${viewer} .hm-sw-viewer-menu`)))
+   }
+   await page.keyboard.press('Escape')
+   const panels = await page.locator(`${viewer} .hm-sw-viewer-panel`).count()
+-  check('뷰어 테마: SWViewerPanel(제목·입력·버튼·스위치·힌트) = Dotum', panels === 2 && only(await fonts(page, `${viewer} .hm-sw-viewer-panel`), VERIFY), `${panels} panels · ${fmt(await fonts(page, `${viewer} .hm-sw-viewer-panel`))}`)
++  check('뷰어 테마: SWViewerPanel(제목·입력·버튼·스위치·힌트) = 검증 글꼴', panels === 2 && only(await fonts(page, `${viewer} .hm-sw-viewer-panel`), VERIFY), `${panels} panels · ${fmt(await fonts(page, `${viewer} .hm-sw-viewer-panel`))}`)
+   await page.screenshot({ path: path.join(out, 'viewer-themed-more.png'), clip: await page.locator(viewer).boundingBox() })
+ 
+   // General mode: SWHeader (+ open layer dropdown, window-move tooltip), SWFooter (+ command line, guide tooltip).
+   const general = scope('general-themed')
+   const headerFonts = await fonts(page, `${general} .hm-sw-header`, '.hm-sw-header__motion-tooltip')
+-  check('일반 테마: SWHeader + 열린 레이어 Dropdown = Dotum (창 이동 Tooltip 별도)', only(headerFonts, VERIFY), fmt(headerFonts))
++  check('일반 테마: SWHeader + 열린 레이어 Dropdown = 검증 글꼴 (창 이동 Tooltip 별도)', only(headerFonts, VERIFY), fmt(headerFonts))
+   const tooltip = await page.locator(`${general} .hm-sw-header__motion-tooltip`).evaluate(element => getComputedStyle(element).fontFamily)
+   check('일반 테마: 창 이동 Tooltip = Inter → 테마 글꼴', tooltip === `Inter, ${VERIFY}`, tooltip)
+   const layerMenu = await page.locator(`${general} .hm-sw-header`).getByText('A-WALL').count()
+   check('일반 테마: 레이어 Dropdown이 열린 상태(목록 행 A-WALL 표시)', layerMenu > 0, `${layerMenu} row`)
+-  check('일반 테마: SWFooter = Dotum', only(await fonts(page, `${general} .hm-sw-footer`), VERIFY), fmt(await fonts(page, `${general} .hm-sw-footer`)))
+-  check('일반 테마: 명령창(SWFooterCommandLine, 중첩 hm-sw-theme) = Dotum', only(await fonts(page, `${general} .hm-sw-footer-command`), VERIFY), fmt(await fonts(page, `${general} .hm-sw-footer-command`)))
++  check('일반 테마: SWFooter = 검증 글꼴', only(await fonts(page, `${general} .hm-sw-footer`), VERIFY), fmt(await fonts(page, `${general} .hm-sw-footer`)))
++  check('일반 테마: 명령창(SWFooterCommandLine, 중첩 hm-sw-theme) = 검증 글꼴', only(await fonts(page, `${general} .hm-sw-footer-command`), VERIFY), fmt(await fonts(page, `${general} .hm-sw-footer-command`)))
+   await page.locator(`${general} .hm-sw-footer-add`).first().focus()
+   await page.waitForTimeout(150)
+   const guide = page.locator(`${general} .hm-sw-footer [role="tooltip"]`)
+-  check('일반 테마: 명령 등록 안내(Tooltip) = Dotum', (await guide.count()) > 0 && only(await fonts(page, `${general} .hm-sw-footer [role="tooltip"]`), VERIFY), fmt(await fonts(page, `${general} .hm-sw-footer [role="tooltip"]`)))
++  check('일반 테마: 명령 등록 안내(Tooltip) = 검증 글꼴', (await guide.count()) > 0 && only(await fonts(page, `${general} .hm-sw-footer [role="tooltip"]`), VERIFY), fmt(await fonts(page, `${general} .hm-sw-footer [role="tooltip"]`)))
+ 
+   // Portals.
+   const [plain, themed, insideSource] = await page.evaluate(() => {
+@@ -122,15 +122,15 @@ const fmt = map => Object.entries(map).map(([family, count]) => `${count}× ${fa
+       !!document.querySelector('[data-theme-case="portal-source"] [data-portal]')]
+   })
+   check('Portal: DOM이 테마 영역 밖에 렌더링됨', !insideSource)
+-  check('Portal: SWTheme만 감싸면 기본 글꼴(테마 미전달)', plain.startsWith('"Noto Sans KR"'), plain)
++  check('Portal: SWTheme만 감싸면 기본 글꼴(테마 미전달)', plain === DEFAULT, plain)
+   check('Portal: 같은 theme style의 SWTheme으로 감싸면 테마 적용', themed === VERIFY, themed)
+ 
+   // Areas.
+   const area = name => fonts(page, `${scope(name)} .hm-sw-viewer-hint`)
+-  check('영역 A(Dotum)', only(await area('area-a'), VERIFY), fmt(await area('area-a')))
++  check('영역 A(검증 글꼴)', only(await area('area-a'), VERIFY), fmt(await area('area-a')))
+   check('영역 B(기본) — 옆 영역 값이 섞이지 않음', only(await area('area-b'), DEFAULT), fmt(await area('area-b')))
+   const outer = await page.locator(`${scope('area-c')} > .hm-sw-viewer-hint`).evaluate(element => getComputedStyle(element).fontFamily)
+-  check('영역 C 바깥(Dotum)', outer === VERIFY, outer)
++  check('영역 C 바깥(검증 글꼴)', outer === VERIFY, outer)
+   check('영역 C 안쪽 SWTheme style(Malgun Gothic)만 안쪽에 적용', only(await area('area-c-nested'), NESTED), fmt(await area('area-c-nested')))
+   await page.screenshot({ path: path.join(out, 'theme-inheritance-full.png'), fullPage: true })
+   await page.close()
+@@ -213,7 +213,7 @@ for (const width of [1920, 1440, 1180, 900, 560]) for (const id of ids) {
+   await page.waitForSelector(`${viewer} .hm-sw-viewer-menu[data-surface="beige"]`)
+   const more = await fonts(page, `${viewer} .hm-sw-viewer-menu`)
+   const command = await fonts(page, '[data-theme-case="general-themed"] .hm-sw-footer-command')
+-  check('대조: 기존 구조 주입 시 More·명령창이 Noto로 되돌아감(결함 재현)', only(more, DEFAULT) && only(command, DEFAULT), `More ${fmt(more)} · 명령창 ${fmt(command)}`)
++  check('대조: 기존 구조 주입 시 More·명령창이 기본 글꼴로 되돌아감(결함 재현)', only(more, DEFAULT) && only(command, DEFAULT), `More ${fmt(more)} · 명령창 ${fmt(command)}`)
+   await page.close()
+ }
+ const failedRegression = regression.filter(item => item.result !== 'PASS')
+diff --git a/packages/ui/ai/AI_GUIDE.md b/packages/ui/ai/AI_GUIDE.md
+index 8ac07f4..5fd7e42 100644
+--- a/packages/ui/ai/AI_GUIDE.md
++++ b/packages/ui/ai/AI_GUIDE.md
+@@ -138,7 +138,7 @@
+ 
+ 혼합 규칙:
+ 
+-1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다.
++1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다.
+ 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다.
+    - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`)
+    - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4)
+diff --git a/src/sw/sw-theme.stories.tsx b/src/sw/sw-theme.stories.tsx
+index a389af1..bc4c2d8 100644
+--- a/src/sw/sw-theme.stories.tsx
++++ b/src/sw/sw-theme.stories.tsx
+@@ -14,9 +14,9 @@ import "./sw-viewer-stories.css"
+ // SW theme token inheritance (2026-10-20). The official way to change SW tokens: set them through `style` (or the
+ // consumer's own class) on the OUTERMOST SW scope — <SWTheme> around the screen, or the component root when it is
+ // used alone. Nested SW roots (viewer menus, More, panels, footer command line) inherit the value.
+-// Dotum is used here ONLY to make the inheritance visible: it is NOT the SW default font (design approval pending).
++// The SW default font is Dotum (2026-10-20). Noto Sans KR is used here ONLY to make the inheritance visible.
+ const KICKER = "HM DESIGN SYSTEM / SW"
+-const VERIFY_FONT = 'Dotum, "돋움", sans-serif'
++const VERIFY_FONT = '"Noto Sans KR", sans-serif'
+ const VERIFY_THEME = { "--hm-sw-header-font-family": VERIFY_FONT } as CSSProperties
+ const NESTED_THEME = { "--hm-sw-header-font-family": '"Malgun Gothic", sans-serif' } as CSSProperties
+ 
+@@ -77,8 +77,8 @@ export const ThemeInheritance: Story = {
+   render: () => (
+     <StoryPage>
+       <StoryPageHeader kicker={KICKER} title="SW — 테마 토큰 상속"
+-        description={<>SW 토큰은 가장 바깥 SW 범위(<code>&lt;SWTheme&gt;</code> 또는 단독 컴포넌트 루트)에서 한 번 선언되고, 안쪽 Dropdown·More·패널·명령창은 그 값을 상속합니다. 토큰은 가장 바깥 범위의 <code>style</code>로만 바꿉니다. 아래 Dotum은 <strong>상속 확인용 검증 값</strong>이며 SW 기본 글꼴(Noto Sans KR)은 바뀌지 않습니다(Dotum 기본 적용은 디자인 승인 대기).</>} />
+-      <StorySection title="1. 기본 (테마 지정 없음)" description="단독 SWViewerHeader. 기본 글꼴 Noto Sans KR. 1000px 폭이라 일부 항목이 More(⋯)로 이동합니다.">
++        description={<>SW 토큰은 가장 바깥 SW 범위(<code>&lt;SWTheme&gt;</code> 또는 단독 컴포넌트 루트)에서 한 번 선언되고, 안쪽 Dropdown·More·패널·명령창은 그 값을 상속합니다. 토큰은 가장 바깥 범위의 <code>style</code>로만 바꿉니다. SW 기본 글꼴은 Dotum이며, 아래 Noto Sans KR은 <strong>상속 확인용 검증 값</strong>입니다.</>} />
++      <StorySection title="1. 기본 (테마 지정 없음)" description="단독 SWViewerHeader. 기본 글꼴 Dotum. 1000px 폭이라 일부 항목이 More(⋯)로 이동합니다.">
+         <ViewerArea width={1000} data-theme-case="default" />
+       </StorySection>
+       <StorySection title="2. 뷰어 모드 — SWTheme style로 글꼴 지정" description="<SWTheme style={{ '--hm-sw-header-font-family': … }}> 안의 Header·Dropdown·More·패널(내부 컨트롤 포함)이 같은 글꼴을 씁니다.">
+@@ -105,10 +105,10 @@ export const ThemeInheritance: Story = {
+       </StorySection>
+       <StorySection title="5. 여러 테마 영역" description="옆 영역끼리 값이 섞이지 않고, 안쪽 SWTheme의 style은 그 안에서만 적용됩니다.">
+         <div style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 12 }}>
+-          <SWTheme style={VERIFY_THEME} data-theme-case="area-a"><SWViewerHint>영역 A — 검증 글꼴(Dotum)</SWViewerHint></SWTheme>
+-          <SWTheme data-theme-case="area-b"><SWViewerHint>영역 B — 기본(Noto Sans KR)</SWViewerHint></SWTheme>
++          <SWTheme style={VERIFY_THEME} data-theme-case="area-a"><SWViewerHint>영역 A — 검증 글꼴(Noto Sans KR)</SWViewerHint></SWTheme>
++          <SWTheme data-theme-case="area-b"><SWViewerHint>영역 B — 기본(Dotum)</SWViewerHint></SWTheme>
+           <SWTheme style={VERIFY_THEME} data-theme-case="area-c">
+-            <SWViewerHint>영역 C 바깥 — Dotum</SWViewerHint>
++            <SWViewerHint>영역 C 바깥 — Noto Sans KR</SWViewerHint>
+             <SWTheme style={NESTED_THEME} data-theme-case="area-c-nested"><SWViewerHint>영역 C 안쪽 — Malgun Gothic</SWViewerHint></SWTheme>
+           </SWTheme>
+         </div>

docs/sw/sw-dotum-font-qa/consumer-viewer/viewer-firefox.mjs

@@ -0,0 +1,58 @@
+// Installed Firefox (WebDriver BiDi) — real SW consumer: Dotum resolution, viewer chrome fonts, DWG load, menu/panel,
+// Escape, responsive overflow. Usage: node viewer-firefox.mjs <base> <out-dir>
+import { spawn } from 'node:child_process'
+import { mkdir, writeFile, rm } from 'node:fs/promises'
+import path from 'node:path'
+import os from 'node:os'
+const [base = 'http://127.0.0.1:5391', outArg = 'viewer-verify-out'] = process.argv.slice(2)
+const out = path.resolve(outArg); await mkdir(out, { recursive: true })
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+const results = [], errors = []
+const check = (name, ok, data) => { results.push({ name, result: ok ? 'PASS' : 'FAIL', data }); console.log(ok ? 'PASS' : 'FAIL', name, data === undefined ? '' : JSON.stringify(data)) }
+let version
+for (const [width, height] of [[1400, 1000], [500, 800]]) {
+  const port = 9300 + Math.floor(Math.random() * 500)
+  const profile = path.join(os.tmpdir(), `sw-viewer-ff-${process.pid}-${width}`)
+  await mkdir(profile, { recursive: true })
+  const ff = spawn('C:/Program Files/Mozilla Firefox/firefox.exe', ['--headless', '--no-remote', '--profile', profile, `--remote-debugging-port=${port}`], { stdio: 'ignore', env: { ...process.env, MOZ_HEADLESS_WIDTH: String(width), MOZ_HEADLESS_HEIGHT: String(height) } })
+  let ws
+  for (let i = 0; i < 60 && !ws; i++) { await sleep(250); try { ws = await new Promise((res, rej) => { const s = new WebSocket(`ws://127.0.0.1:${port}/session`); s.onopen = () => res(s); s.onerror = rej }) } catch { ws = undefined } }
+  if (!ws) { check(`Firefox ${width}: BiDi session`, false); ff.kill(); continue }
+  let id = 0; const pending = new Map()
+  ws.onmessage = e => { const m = JSON.parse(e.data); if (m.id && pending.has(m.id)) { const { res, rej } = pending.get(m.id); pending.delete(m.id); m.type === 'error' ? rej(Error(m.message)) : res(m.result) } else if (m.method === 'log.entryAdded' && m.params.level === 'error') errors.push(`${width}: ${m.params.text}`) }
+  const send = (method, params = {}) => new Promise((res, rej) => { const n = ++id; pending.set(n, { res, rej }); ws.send(JSON.stringify({ id: n, method, params })) })
+  try {
+    const session = await send('session.new', { capabilities: {} }); version = session.capabilities.browserVersion
+    await send('session.subscribe', { events: ['log.entryAdded'] })
+    const context = (await send('browsingContext.getTree')).contexts[0].context
+    const ev = async expr => { const r = await send('script.evaluate', { expression: `JSON.stringify(${expr})`, target: { context }, awaitPromise: true }); if (r.type === 'exception') throw Error(r.exceptionDetails.text); return JSON.parse(r.result.value) }
+    const key = v => send('input.performActions', { context, actions: [{ type: 'key', id: 'k', actions: [{ type: 'keyDown', value: v }, { type: 'keyUp', value: v }] }] })
+    await send('browsingContext.navigate', { context, url: `${base}/?model=${encodeURIComponent('/samples/civil.dwg')}`, wait: 'complete' })
+    let st; for (let i = 0; i < 120; i++) { st = await ev('document.querySelector(".hm-sw-viewer-status")?.getAttribute("data-state")'); if (st && st !== 'loading' && st !== 'idle') break; await sleep(250) }
+    await sleep(800)
+    check(`Firefox ${width}: civil.dwg loads (status)`, st === 'ready', st)
+    const dotum = await ev(`(() => { const c = document.createElement('canvas').getContext('2d'); const t = '그리기모드 Standard 1.00'; c.font = '14px Dotum'; const a = c.measureText(t).width; c.font = '14px "Malgun Gothic"'; const b = c.measureText(t).width; c.font = '14px monospace'; const m = c.measureText(t).width; return { dotum: +a.toFixed(1), malgun: +b.toFixed(1), mono: +m.toFixed(1) } })()`)
+    check(`Firefox ${width}: Dotum resolves to an installed face (width differs from fallbacks)`, dotum.dotum !== dotum.malgun && dotum.dotum !== dotum.mono, dotum)
+    const fonts = await ev(`(() => { const m = {}; for (const e of document.querySelectorAll('.hm-sw-viewer-header *')) { if (![...e.childNodes].some(n => n.nodeType === 3 && n.textContent.trim())) continue; const f = getComputedStyle(e).fontFamily.split(',')[0].replace(/"/g, ''); m[f] = (m[f] ?? 0) + 1 } return m })()`)
+    check(`Firefox ${width}: SWViewerHeader computed font = Dotum`, Object.keys(fonts).length > 0 && Object.keys(fonts).every(f => f === 'Dotum'), fonts)
+    const layout = await ev(`(() => { const h = document.querySelector('.hm-sw-viewer-header'); return { header: h.scrollWidth - h.clientWidth, page: document.documentElement.scrollWidth - innerWidth, more: !!document.querySelector('.hm-sw-viewer-header__more'), h: h.getBoundingClientRect().height } })()`)
+    check(`Firefox ${width}: no horizontal overflow`, layout.header <= 1 && layout.page <= 1, layout)
+    // Open a header menu (샘플, or More at narrow widths) and close with Escape.
+    await ev(`(() => { const b = [...document.querySelectorAll('.hm-sw-viewer-header button')].find(e => e.textContent.trim() === '샘플') ?? document.querySelector('.hm-sw-viewer-header__more'); b.click(); return !!b })()`); await sleep(200)
+    const menu = await ev(`(() => { const m = document.querySelector('.hm-sw-viewer-menu'); return m ? { items: m.querySelectorAll('button').length, font: getComputedStyle(m.querySelector('button')).fontFamily.split(',')[0] } : null })()`)
+    check(`Firefox ${width}: header menu opens (Dotum)`, !!menu && menu.items > 0 && menu.font === 'Dotum', menu)
+    await key('\uE00C'); await sleep(200)
+    check(`Firefox ${width}: Escape closes the menu`, await ev('!document.querySelector(".hm-sw-viewer-menu")'))
+    // Options panel (via the header toggle, or More when collapsed).
+    const opened = await ev(`(() => { const t = [...document.querySelectorAll('.hm-sw-viewer-header button')].find(e => e.textContent.trim() === '설정'); if (t && t.getClientRects().length) { t.click(); return 'toggle' } document.querySelector('.hm-sw-viewer-header__more')?.click(); return 'more' })()`); await sleep(250)
+    if (opened === 'more') { await ev(`(() => { const i = [...document.querySelectorAll('.hm-sw-viewer-menu [role^=menuitem]')].find(e => e.textContent.includes('설정')); i?.click(); return !!i })()`); await sleep(250) }
+    const panel = await ev(`(() => { const p = [...document.querySelectorAll('.hm-sw-viewer-panel')].find(e => e.textContent.includes('옵션')); if (!p) return null; const b = p.querySelector('.hm-sw-property__body'); const r = p.getBoundingClientRect(); const clipped = [...p.querySelectorAll('*')].filter(e => { if (![...e.childNodes].some(n => n.nodeType === 3 && n.textContent.trim())) return false; const cs = getComputedStyle(e); if (cs.overflowX === 'visible' && cs.textOverflow !== 'ellipsis') return false; const g = document.createRange(); g.selectNodeContents(e); return g.getBoundingClientRect().width > e.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight) + 0.5 }).length; return { w: Math.round(r.width), h: Math.round(r.height), font: getComputedStyle(p).fontFamily.split(',')[0], scroll: b.scrollHeight > b.clientHeight, clipped, inView: r.right <= innerWidth + 1 } })()`)
+    check(`Firefox ${width}: options SWViewerPanel opens, Dotum, scrollable body, no clipped text`, !!panel && panel.font === 'Dotum' && panel.clipped === 0, { opened, panel })
+    await writeFile(path.join(out, `firefox-${width}.png`), Buffer.from((await send('browsingContext.captureScreenshot', { context })).data, 'base64'))
+    await send('session.end')
+  } catch (error) { check(`Firefox ${width}: suite completes`, false, error.message) }
+  ws.close(); ff.kill(); await sleep(400); await rm(profile, { recursive: true, force: true }).catch(() => {})
+}
+check('Firefox: no console errors (favicon 404 excluded)', errors.filter(e => !/favicon/i.test(e)).length === 0, errors.slice(0, 5))
+await writeFile(path.join(out, 'firefox-result.json'), JSON.stringify({ base, version, results, errors }, null, 2))
+console.log(`Firefox ${version}: ${results.filter(r => r.result === 'PASS').length}/${results.length} PASS`)

docs/sw/sw-dotum-font-qa/consumer-viewer/viewer-verify-run.mjs

@@ -0,0 +1,150 @@
+// Real SW consumer (HMDesignSwTest-viewer, isolated copy) — Dotum font, SW viewer chrome, DWG/DXF load, zoom/pan,
+// panels (open/close/Escape/drag/resize/scroll/slider/switch), header menus/More, responsive. Chrome (+ Firefox basic).
+// Usage: node viewer-verify-run.mjs <base-url> <out-dir> [chromium|firefox]
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { mkdir, writeFile } from 'node:fs/promises'
+const require = createRequire(path.join('C:/Users/user/.cache/codex-runtimes/codex-primary-runtime/dependencies/node/node_modules', 'index.js'))
+const pw = require('playwright')
+const { PNG } = require('pngjs')
+const [base = 'http://127.0.0.1:5391', outArg = 'viewer-verify-out', engine = 'chromium'] = process.argv.slice(2)
+const out = path.resolve(outArg); await mkdir(out, { recursive: true })
+const results = []; const errors = []; const missingFavicon = []
+const check = (name, pass, detail = '') => { results.push({ name, result: pass ? 'PASS' : 'FAIL', detail }); console.log(`${pass ? 'PASS' : 'FAIL'}  ${name}${detail !== '' ? `  — ${typeof detail === 'string' ? detail : JSON.stringify(detail)}` : ''}`) }
+const browser = engine === 'firefox' ? await pw.firefox.launch({ headless: true }) : await pw.chromium.launch({ headless: true, executablePath: 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
+const newPage = async (width = 1600, height = 1000) => {
+  const page = await browser.newPage({ viewport: { width, height } })
+  page.on('pageerror', e => errors.push(`pageerror ${e.message}`))
+  page.on('console', m => { if (m.type() === 'error' && !/favicon|Failed to load resource/.test(m.text())) errors.push(`console ${m.text()}`) })
+  page.on('response', r => { if (r.status() >= 400) (r.url().endsWith('/favicon.ico') ? missingFavicon : errors).push(`HTTP ${r.status()} ${r.url()}`) })
+  return page
+}
+const status = page => page.evaluate(() => document.querySelector('.hm-sw-viewer-status')?.getAttribute('data-state'))
+const waitLoaded = async (page, timeout = 60000) => { await page.waitForFunction(() => { const s = document.querySelector('.hm-sw-viewer-status')?.getAttribute('data-state'); return s && s !== 'loading' && s !== 'idle' }, null, { timeout }).catch(() => {}); await page.waitForTimeout(800); return status(page) }
+const canvasStats = async page => { const buf = await page.locator('.viewer-canvas').screenshot(); const png = PNG.sync.read(buf); const seen = new Map(); let n = 0; for (let i = 0; i < png.data.length; i += 16) { const k = (png.data[i] >> 4) << 8 | (png.data[i + 1] >> 4) << 4 | png.data[i + 2] >> 4; seen.set(k, (seen.get(k) ?? 0) + 1); n++ } const top = Math.max(...seen.values()); return { colors: seen.size, nonBg: +(1 - top / n).toFixed(4), buf } }
+const diffRatio = (a, b) => { const A = PNG.sync.read(a), B = PNG.sync.read(b); if (A.width !== B.width || A.height !== B.height) return 1; let d = 0; for (let i = 0; i < A.data.length; i += 4) if (Math.abs(A.data[i] - B.data[i]) + Math.abs(A.data[i + 1] - B.data[i + 1]) + Math.abs(A.data[i + 2] - B.data[i + 2]) > 30) d++; return d / (A.data.length / 4) }
+const fontsOf = (page, sel) => page.evaluate(sel => { const m = {}; for (const r of document.querySelectorAll(sel)) for (const e of [r, ...r.querySelectorAll('*')]) { if (e.closest('svg')) continue; if (![...e.childNodes].some(n => n.nodeType === 3 && n.textContent.trim()) && !/^(BUTTON|INPUT)$/.test(e.tagName)) continue; const f = getComputedStyle(e).fontFamily.split(',')[0].replace(/"/g, ''); m[f] = (m[f] ?? 0) + 1 } return m }, sel)
+
+const page = await newPage()
+await page.goto(base); await page.waitForSelector('.hm-sw-viewer-header'); await page.evaluate(() => document.fonts.ready); await page.waitForTimeout(500)
+// --- Font / theme
+const headerFonts = await fontsOf(page, '.hm-sw-viewer-header')
+check('Font: SWViewerHeader text = Dotum (SW default)', Object.keys(headerFonts).length > 0 && Object.keys(headerFonts).every(f => f === 'Dotum' || f === 'ui-monospace'), headerFonts)
+if (engine === 'chromium') {
+  const cdp = await page.context().newCDPSession(page); await cdp.send('DOM.enable'); await cdp.send('CSS.enable')
+  const { root } = await cdp.send('DOM.getDocument', { depth: -1 }); const { nodeIds } = await cdp.send('DOM.querySelectorAll', { nodeId: root.nodeId, selector: '.hm-sw-viewer-header *' })
+  const agg = {}; for (const id of nodeIds) { const { fonts } = await cdp.send('CSS.getPlatformFontsForNode', { nodeId: id }); for (const f of fonts) agg[f.familyName] = (agg[f.familyName] ?? 0) + f.glyphCount }
+  check('Font: rendered platform font in header = Dotum (installed, no fallback)', Object.keys(agg).length > 0 && Object.keys(agg).every(f => f === 'Dotum'), agg)
+}
+const tokens = await page.evaluate(() => { const s = getComputedStyle(document.querySelector('.hm-sw-viewer-header')); return { font: s.getPropertyValue('--hm-sw-header-font-family').trim(), bg: s.getPropertyValue('--hm-sw-viewer-header-background').trim() || s.backgroundColor } })
+check('Theme: SW token --hm-sw-header-font-family = Dotum stack', tokens.font.startsWith('Dotum'), tokens)
+const webFont = await page.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue('--hm-font-family-base').trim())
+check('Web UI token --hm-font-family-base unchanged (Noto Sans KR)', webFont.startsWith('"Noto Sans KR"'), webFont)
+await page.screenshot({ path: path.join(out, `${engine}-01-initial.png`) })
+
+// --- DXF / DWG loading via the app's own ?model= path and the header sample menu
+const loads = {}
+for (const [label, url] of [['simple.dxf', '/samples/simple.dxf'], ['BasicSample.dwg', '/samples/BasicSample.dwg'], ['civil.dwg', '/samples/civil.dwg']]) {
+  const p = await newPage()
+  const t0 = Date.now(); await p.goto(`${base}/?model=${encodeURIComponent(url)}`); await p.waitForSelector('.hm-sw-viewer-header')
+  const st = await waitLoaded(p, 120000); const stats = await canvasStats(p)
+  const name = await p.evaluate(() => document.querySelector('.hm-sw-viewer-header__document-name')?.textContent?.trim() ?? '')
+  const tabs = await p.locator('.hm-sw-viewer-header__tab').count()
+  loads[label] = { status: st, ms: Date.now() - t0, colors: stats.colors, nonBg: stats.nonBg, name, tabs }
+  check(`Load ${label}: status ready + drawing pixels`, st && !/error/i.test(st) && stats.nonBg > 0.002, loads[label])
+  await p.screenshot({ path: path.join(out, `${engine}-02-load-${label}.png`) })
+  await p.close()
+}
+
+// --- Sample menu (header dropdown) + Escape, then interactions on civil.dwg
+await page.goto(`${base}/?model=${encodeURIComponent('/samples/civil.dwg')}`); await waitLoaded(page, 120000)
+const before = await canvasStats(page)
+// zoom (wheel) and pan (drag) on the canvas
+const box = await page.locator('.viewer-canvas').boundingBox()
+await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); await page.mouse.wheel(0, -600); await page.waitForTimeout(600)
+const zoomed = await canvasStats(page)
+check('Viewer: wheel zoom changes the drawing', diffRatio(before.buf, zoomed.buf) > 0.01, diffRatio(before.buf, zoomed.buf).toFixed(3))
+await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); await page.mouse.down({ button: 'middle' }); await page.mouse.move(box.x + box.width / 2 + 150, box.y + box.height / 2 + 80, { steps: 8 }); await page.mouse.up({ button: 'middle' }); await page.waitForTimeout(400)
+let panned = await canvasStats(page)
+if (diffRatio(zoomed.buf, panned.buf) <= 0.01) { await page.mouse.move(box.x + 300, box.y + 300); await page.mouse.down(); await page.mouse.move(box.x + 450, box.y + 380, { steps: 8 }); await page.mouse.up(); await page.waitForTimeout(400); panned = await canvasStats(page) }
+check('Viewer: drag pan changes the view', diffRatio(zoomed.buf, panned.buf) > 0.01, diffRatio(zoomed.buf, panned.buf).toFixed(3))
+await page.keyboard.press('f'); await page.waitForTimeout(500)
+const fitted = await canvasStats(page)
+check('Viewer: F (fit) restores the full view', diffRatio(before.buf, fitted.buf) < diffRatio(before.buf, panned.buf), `${diffRatio(before.buf, fitted.buf).toFixed(3)} < ${diffRatio(before.buf, panned.buf).toFixed(3)}`)
+// space tabs (model / layouts)
+const tabCount = await page.locator('.hm-sw-viewer-header__tab').count()
+if (tabCount > 1) { const other = page.locator('.hm-sw-viewer-header__tab:not([data-state="active"])').first(); const label = (await other.textContent()).trim(); await other.click(); await page.waitForTimeout(1500); const s2 = await canvasStats(page); const active = await page.locator('.hm-sw-viewer-header__tab[data-state="active"]').textContent(); check('Header: space tab switch (inactive → active) re-renders the canvas', active.trim() === label && diffRatio(fitted.buf, s2.buf) > 0.01, `${tabCount} tabs, now ${active.trim()}`); await page.locator('.hm-sw-viewer-header__tab:not([data-state="active"])').first().click(); await page.waitForTimeout(1000) }
+else check('Header: space tabs (only one space in civil.dwg)', true, `${tabCount} tab`)
+
+// Header menu: 샘플 dropdown
+await page.getByRole('button', { name: /샘플/ }).first().click()
+const menuOpen = await page.locator('.hm-sw-viewer-menu').count()
+const menuFonts = await fontsOf(page, '.hm-sw-viewer-menu')
+check('Header: 샘플 dropdown opens (SWViewerMenu) with Dotum', menuOpen > 0 && Object.keys(menuFonts).every(f => f === 'Dotum'), menuFonts)
+await page.screenshot({ path: path.join(out, `${engine}-03-sample-menu.png`) })
+await page.keyboard.press('Escape'); await page.waitForTimeout(200)
+check('Header: Escape closes the dropdown', (await page.locator('.hm-sw-viewer-menu').count()) === 0)
+// load simple.dxf from the menu
+await page.getByRole('button', { name: /샘플/ }).first().click(); await page.getByRole('menuitem', { name: 'simple.dxf' }).click()
+const st2 = await waitLoaded(page)
+const name2 = await page.evaluate(() => document.querySelector('.hm-sw-viewer-header__document-name')?.textContent?.trim())
+check('Header: sample menu loads simple.dxf', /simple\.dxf/.test(name2 ?? '') && !/error/i.test(st2 ?? ''), `${name2} / ${st2}`)
+
+// 2.5D switch
+const s25 = page.getByRole('switch', { name: '2.5D' }).first()
+if (await s25.count()) { const a = await canvasStats(page); await s25.click(); await page.waitForTimeout(800); const b = await canvasStats(page); check('Viewer: 2.5D switch toggles and re-renders', (await s25.getAttribute('aria-checked')) === 'true' && diffRatio(a.buf, b.buf) > 0.002, diffRatio(a.buf, b.buf).toFixed(4)); await s25.click(); await page.waitForTimeout(500) }
+
+// Panels: 설정 (options) — open, fonts, slider, switch, drag, resize, scroll, Escape/close
+await page.getByRole('button', { name: '설정' }).first().click(); await page.waitForTimeout(300)
+const panel = page.locator('.hm-sw-viewer-panel').filter({ hasText: '옵션' }).first()
+check('Panel: 설정 opens SWViewerPanel', await panel.isVisible())
+const pf = await fontsOf(page, '.hm-sw-viewer-panel')
+check('Panel: text = Dotum (program list cells keep their monospace)', Object.keys(pf).every(f => f === 'Dotum' || f === 'ui-monospace'), pf)
+const slider = panel.locator('input[type="range"]').nth(1)
+const v0 = await slider.inputValue(); await slider.focus(); await page.keyboard.press('ArrowRight'); await page.keyboard.press('ArrowRight'); await page.waitForTimeout(150)
+const v1 = await slider.inputValue(); const num = await panel.locator('input[type="number"]').nth(1).inputValue()
+check('Panel: SWViewerSlider changes value and syncs the number input', Number(v1) > Number(v0) && Number(num) === Number(v1), `${v0} → ${v1}, input ${num}`)
+const sw = panel.getByRole('switch').nth(1); const c0 = await sw.getAttribute('aria-checked'); await sw.click(); const c1 = await sw.getAttribute('aria-checked'); await sw.click()
+check('Panel: SWViewerSwitch toggles (그리드)', c0 !== c1, `${c0} → ${c1}`)
+const pb0 = await panel.boundingBox(); const title = panel.locator('.hm-sw-property__title').first()
+const tb = await title.boundingBox(); await page.mouse.move(tb.x + 40, tb.y + tb.height / 2); await page.mouse.down(); await page.mouse.move(tb.x - 160, tb.y + 120, { steps: 10 }); await page.mouse.up(); await page.waitForTimeout(200)
+const pb1 = await panel.boundingBox()
+check('Panel: title drag moves the panel', Math.abs(pb1.x - pb0.x) > 100 && Math.abs(pb1.y - pb0.y) > 60, `(${Math.round(pb0.x)},${Math.round(pb0.y)}) → (${Math.round(pb1.x)},${Math.round(pb1.y)})`)
+const grip = panel.locator('.hm-sw-viewer-panel__resize')
+if (await grip.count()) { const gb = await grip.boundingBox(); await page.mouse.move(gb.x + gb.width / 2, gb.y + gb.height / 2); await page.mouse.down(); await page.mouse.move(gb.x + 80, gb.y - 160, { steps: 10 }); await page.mouse.up(); await page.waitForTimeout(200); const pb2 = await panel.boundingBox(); check('Panel: resize grip changes size', Math.round(pb2.width - pb1.width) > 40 && Math.round(pb1.height - pb2.height) > 80, `${Math.round(pb1.width)}×${Math.round(pb1.height)} → ${Math.round(pb2.width)}×${Math.round(pb2.height)}`) }
+else check('Panel: resize grip (not resizable in this program)', true, 'resizable=false')
+const body = panel.locator('.hm-sw-property__body')
+const sc = await body.evaluate(e => { const before = e.scrollTop; e.scrollTop = 9999; return { scrollable: e.scrollHeight > e.clientHeight, before, after: e.scrollTop, overflowX: e.scrollWidth > e.clientWidth + 1 } })
+check('Panel: body scrolls vertically, no horizontal overflow', sc.scrollable && sc.after > sc.before && !sc.overflowX, sc)
+const clipped = await panel.evaluate(p => [...p.querySelectorAll('*')].filter(e => { const own = [...e.childNodes].some(n => n.nodeType === 3 && n.textContent.trim()); if (!own) return false; const cs = getComputedStyle(e); if (cs.overflowX === 'visible' && cs.textOverflow !== 'ellipsis') return false; const r = document.createRange(); r.selectNodeContents(e); return r.getBoundingClientRect().width > e.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight) + 0.5 }).map(e => e.textContent.trim().slice(0, 30)))
+check('Panel: no clipped text after Dotum', clipped.length === 0, clipped)
+await page.screenshot({ path: path.join(out, `${engine}-04-options-panel.png`) })
+await panel.locator('input[type="number"]').first().focus(); await page.keyboard.press('Escape'); await page.waitForTimeout(200)
+const afterEsc = await panel.isVisible().catch(() => false)
+if (afterEsc) { await panel.getByRole('button', { name: /닫기/ }).first().click(); await page.waitForTimeout(200) }
+check(`Panel: closes (${afterEsc ? 'close button — Escape is not wired by the program for non-modal panels' : 'Escape'})`, !(await panel.isVisible().catch(() => false)))
+// 레이어 / 속성 panels + 정보(modal) Escape
+await page.getByRole('button', { name: '레이어' }).first().click(); await page.waitForTimeout(300)
+const lp = page.locator('.hm-sw-viewer-panel').filter({ hasText: '레이어' }).first()
+check('Panel: 레이어 opens with layer rows', (await lp.isVisible()) && (await lp.locator('li').count()) > 0, `${await lp.locator('li').count()} rows`)
+await page.getByRole('button', { name: '레이어' }).first().click(); await page.waitForTimeout(200)
+await page.getByRole('button', { name: '정보 및 라이선스' }).click(); await page.waitForTimeout(300)
+const about = page.locator('.hm-sw-viewer-panel[data-modal]').first()
+const aboutOpen = await about.isVisible().catch(() => false)
+await page.keyboard.press('Escape'); await page.waitForTimeout(200)
+check('Panel: 정보 (modal) opens and Escape closes it', aboutOpen && !(await about.isVisible().catch(() => false)), `open=${aboutOpen}`)
+
+// Responsive header: More at narrow widths, no horizontal overflow
+for (const w of [1920, 1180, 900, 560, 375]) {
+  await page.setViewportSize({ width: w, height: 900 }); await page.waitForTimeout(400)
+  const r = await page.evaluate(() => { const h = document.querySelector('.hm-sw-viewer-header'); return { overflow: h.scrollWidth > h.clientWidth + 1, doc: document.documentElement.scrollWidth > innerWidth + 1, more: !!document.querySelector('.hm-sw-viewer-header__more') } })
+  check(`Responsive ${w}: header/page no horizontal overflow${r.more ? ' (More shown)' : ''}`, !r.overflow && !r.doc, r)
+  if (w === 900 || w === 375) {
+    await page.screenshot({ path: path.join(out, `${engine}-05-${w}.png`) })
+    if (r.more) { await page.locator('.hm-sw-viewer-header__more').click(); await page.waitForTimeout(200); const items = await page.locator('.hm-sw-viewer-menu [role="menuitem"], .hm-sw-viewer-menu [role="menuitemcheckbox"], .hm-sw-viewer-menu button').count(); check(`Responsive ${w}: More opens with collapsed items`, items > 0, `${items} items`); await page.screenshot({ path: path.join(out, `${engine}-06-more-${w}.png`) }); await page.keyboard.press('Escape') }
+  }
+}
+check('Console / page / HTTP errors: none (favicon.ico 404 = program has no icon, pre-existing)', errors.length === 0, { errors: errors.slice(0, 6), favicon404: missingFavicon.length })
+await browser.close()
+await writeFile(path.join(out, `${engine}-result.json`), JSON.stringify({ base, engine, loads, results, errors }, null, 2))
+console.log(`${results.filter(r => r.result === 'PASS').length}/${results.length} PASS`)