feat(sw): refine headers, status label, popups and AI guide rules

- SW Header: the five field previews hide and return together in one
  measured step; from 760 to 1920px the groups from 레이어 to 치수스타일
  share the room left before 속성보기, above 1920px they keep the 1920
  widths (controls bars and < 760px unchanged)
- SW Viewer Header Model / Layout: long names ellipsize in equal buttons
  (minmax(0, 1fr), name counted at --hm-sw-viewer-tab-name-basis) so they
  never change the box or the measured steps; green outer outline and its
  tokens removed; 378px / 42px, text-shadow and state unchanged
- SWViewerStatus: the label keeps the width of its widest real state text
  (idle keeps its icon slot), so a state change never moves the header;
  with too little room it ellipsizes after the file name gives way
- Popups: body inset shadow removed, title SVG drop shadow removed, viewer
  panel title icons use --hm-sw-viewer-panel-icon-color (#c7bda9)
- Storybook: SW/Viewer › Model / Layout story removed
- AI guide (docs/ai + package copies): design-only changes for every
  component, content limits for Submodule consumers (Header excluded),
  Submodule usage rules; VIEWER / DESIGN_RULES synced
- viewer.browser.mjs: explicit 1920 / 1440 labels and approved 1280
  icon-only expectations

docs/ai/AI_GUIDE.md

@@ -109,6 +109,18 @@
 - 토큰·확인값이 있는 속성에 새 값을 만들지 않습니다. 색·크기·간격·radius·그림자는 각 패키지 `DESIGN_RULES.md`(SW 뷰어는 `VIEWER.md`도)의 토큰·확인값을 씁니다. 값이 없을 때만 위 ③으로 구성하고 "AI 구성 값"으로 보고합니다(추측한 값을 확정값처럼 쓰지 않음).
 - 공통: Font Weight는 400 / 500 / 700만 씁니다(600 없음). Light/Dark 분기를 만들지 않습니다. 새 컴포넌트 CSS에 `html`·`body`·`*` 전역 규칙을 넣지 않습니다. 새 class는 소비 프로젝트 접두사(예: `app-`)를 씁니다.
 - 요청에 없는 메뉴·통계·설명·다운로드·외부 API·AI 입력 UI를 추가하지 않습니다. 필요해 보이면 제안으로만 보고합니다.
+- **디자인 적용 시 변경 범위 제한(2026-10-23, 모든 컴포넌트 — Header 포함).** Figma·디자인 시안 적용은 디자인 변경만 합니다. 일반 SW Header, SW Viewer Header, Popup·Panel, 그 밖의 HMDesign 컴포넌트와 HMDesign을 Git Submodule로 쓰는 소비 프로젝트에 모두 적용합니다.
+  - 바꾸지 않는 것: 실제 상태값(`selected`·`active`·`disabled`·`checked`·`expanded`·`hidden` 등), 메뉴의 기본 선택 상태(예: Model / Layout), Popup 열림·닫힘 상태, 스위치·체크박스 기본값, 입력값·숫자·개수 등 표시 데이터, Props와 그 기본값, 이벤트·클릭 동작, 조건부 렌더링, 기존 반응형 기능, 사용자 설정·상태 관리 로직, 요청받지 않은 다른 화면·컴포넌트.
+  - 바꿀 수 있는 것: 배경색·글자색·Border·Gradient·Shadow·Radius·Padding·Gap, 너비·높이·정렬·레이아웃, 기존 상태에 대응하는 시각 스타일. 선택 상태의 모양을 바꿔도 어떤 항목이 선택되어 있는지는 바꾸지 않습니다.
+  - Figma에 특정 상태가 그려져 있어도 컴포넌트의 기본 상태를 바꾸지 않습니다. 디자인 비교는 검증용 Story나 테스트 데이터에서 하고, Storybook 예시값을 소비 프로젝트의 기본값으로 복사하지 않습니다. 상태·기능 변경이 꼭 필요해 보이면 적용하지 말고 별도로 보고합니다.
+  - 작업 후 Git Diff로 요청 범위 밖 변경이 없는지 확인합니다.
+- **Git Submodule 소비 프로젝트의 콘텐츠 생성 제한(2026-10-23, Header 제외).** HMDesign을 Git Submodule로 사용하는 소비 프로젝트의 UI 컴포넌트·화면에 적용합니다. **제외:** 일반 SW Header(`SWHeader`), SW Viewer Header(`SWViewerHeader`)와 그 밖의 모든 Header 관련 컴포넌트·영역 — 텍스트는 기존 Header 전용 AI 지침을 따르되, 위 "디자인 적용 시 변경 범위 제한"(상태·기능 변경 금지)은 Header에도 그대로 적용합니다.
+  1. 사용자가 요청하지 않은 설명·안내 문구·제목·라벨·툴팁을 임의로 추가하지 않습니다.
+  2. Storybook의 샘플 텍스트나 데이터를 실제 소비 프로젝트에 임의로 복사하지 않습니다.
+  3. Figma 또는 기존 컴포넌트에 없는 텍스트를 추측해서 생성하지 않습니다.
+  4. 기존 텍스트와 데이터를 임의로 변경하지 않습니다.
+  5. 필요한 콘텐츠가 불명확하면 임의로 확정하지 않고 결과 보고에 확인 대상으로 적습니다.
+- **Git Submodule 사용 규칙(2026-10-23).** 소비 프로젝트에서 HMDesign을 사용할 때 요청 범위 밖은 바꾸지 않습니다. Submodule Commit 포인터는 사용자 승인 없이 바꾸지 않습니다. 소비 프로젝트의 기존 데이터와 기능을 우선 유지합니다.
 
 ### 없는 UI를 같은 스타일로 만들 때 확인할 항목
 

docs/sw/sw-header-usage.md

@@ -416,6 +416,7 @@ import type { CSSProperties } from "react"
 - 뷰어의 파일 열기·샘플·Model/Layout 탭·2.5D·어두운 배경·로드 상태는 Figma SW Header에 없는 뷰어 전용 도구입니다. 필요하면 `tools` 슬롯에 호스트가 렌더링합니다(스타일은 호스트 책임).
 - 헤더 높이는 49px입니다. 고정 배치(`position: fixed`)는 `className`·`style`로 호스트에서 지정합니다.
 - 반응형은 모두 헤더 자신의 폭(container query)을 기준으로 하므로 사이드 패널 때문에 헤더가 좁아져도 동작합니다. 단계(1800 / 1180 / 1080 / 900 / 640 / 520)는 [디자인 명세 §12](./sw-header-design-spec.md#12-반응형)를 따르고, 그 위에서 실제 남은 공간을 측정해 부족한 메뉴만 더보기로 옮깁니다([§12.1](./sw-header-design-spec.md#121-실측-more--실제-사용-가능한-공간-기준-2026-10-19)).
+- 가용 공간 분배(2026-10-23): 헤더 폭 760~1920px에서는 레이어~치수스타일 5개 그룹이 속성보기 앞의 남는 공간을 같은 양씩 나눠 속성보기 바로 옆까지 채우고, 1920px을 넘으면 1920px 폭(234 / 192 / 284 / 164 / 164px)에 고정되어 남는 공간은 속성보기 앞 여백이 됩니다. 숨김·More 단계와 창 영역 위치는 그대로이며 `controls` 구성 Header에는 적용하지 않습니다([AI 디자인 규칙](../../packages/sw/ai/DESIGN_RULES.md)).
 - 뷰어는 현재 `@hm-design/ui`의 SWHeader 패턴을 사용합니다. 이 패키지로 바꾸는 작업은 이번 범위가 아닙니다.
 
 ## 10.1 상호작용 상태

docs/sw/sw-viewer-panel-region-styles.md

@@ -51,7 +51,7 @@ SWViewerPanel  (= SWPopup, .hm-sw-property.hm-sw-viewer-panel)   ← 테두리
 | 영역 | 목적 | 선택자 | 실제 값 | 조건·예외 | 구분 | 예시 |
 |---|---|---|---|---|---|---|
 | 제목줄 | 제목·닫기·동작 버튼 | `.hm-sw-property__titlebar` | 높이 30px, `background: var(--hm-sw-header-document-background)`(녹색 세로 그라데이션), Figma 제목 아트(`property-title-single.svg`, 314px 초과 폭은 왼쪽 늘림 복제 `::before`) | 모든 패널. 드래그 가능하면 `cursor: grab` | 공통 | 전체 |
-| 본문 | 스크롤 콘텐츠 영역 | `.hm-sw-property__body` + `.hm-sw-viewer-panel .hm-sw-property__body` | `padding: 7px 7px 0`, `border-bottom: 8px solid transparent`(스크롤 영역 밖 하단 여백), `gap: 8px`, `box-shadow: inset 0 2px 2px rgba(255,255,255,.6)`, 배경은 프레임 surface | 접힘이면 `display: none` | 공통(SWPopup 7px + 뷰어 하단 8px 덮어쓰기) | 전체 |
+| 본문 | 스크롤 콘텐츠 영역 | `.hm-sw-property__body` + `.hm-sw-viewer-panel .hm-sw-property__body` | `padding: 7px 7px 0`, `border-bottom: 8px solid transparent`(스크롤 영역 밖 하단 여백), `gap: 8px`, 그림자 없음(2026-10-23 사용자 요청으로 `box-shadow: inset 0 2px 2px rgba(255,255,255,.6)` 제거), 배경은 프레임 surface | 접힘이면 `display: none` | 공통(SWPopup 7px + 뷰어 하단 8px 덮어쓰기) | 전체 |
 | Field | 라벨 + 컨트롤 행 | `.hm-sw-viewer-field`, `__row` | 선·배경 없음, field `gap: 6px`, row `gap: 8px`, `min-height: 20px` | disabled면 `opacity: .5` | 공통 | `옵션` |
 | 값 입력·단위 칸 | 숫자 입력 | `.hm-sw-viewer-input:not([type="search"])`, `.hm-sw-viewer-field__control:has(> unit)` | 기본 **투명 테두리**(1px transparent), radius 2px, 높이 28px. Hover/편집 시에만 `--hm-sw-property-field-hover-border-color` 테두리, 편집 중 배경 `--hm-sw-property-field-editing-background` | 상태가 바뀔 때만 박스로 보임 | 공통 | `옵션`의 `표시 배율`(px/mm) |
 | Badge | 개수·유형 표시 | `.hm-sw-viewer-badge` | 테두리 없음, `background: var(--hm-sw-viewer-panel-badge-background)`(#d2c8b4), radius 4px, `padding: 2px 8px` | — | 공통 | 레이어 개수, `LINE · h=2F1A`(`속성` 맨 위, Card 밖, 자기 폭) |