HMDesign/packages/sw/ai/DESIGN_RULES.md

SW 디자인 규칙

출처: @hm-design/sw styles.css(원본 src/theme/sw.css)의 토큰과 규칙, Figma 이지빔 SW rj6wpsfk24lOWvWiVRAANP node 26:8944와 사용자 확정값. 이 문서에 없는 값은 확정값이 아닙니다. 새 컴포넌트에 임의 값을 만들지 말고 아래 토큰을 var(--…)로 읽으세요. 참고할 토큰·값이 없을 때만 AI_USAGE.md §0.4 ③으로 구성하고 "AI 구성 값 — 디자인 확인 필요"로 보고합니다.

• 토큰은 .hm-sw-header와 .hm-sw-theme(<SWTheme>)에만 정의됩니다. 새 컴포넌트는 그 안에 렌더링합니다.
• 기본값은 가장 바깥 SW 범위에서만 선언되고 안쪽 SW 범위(Dropdown·More·Panel·명령창)는 상속합니다(2026-10-20). 값을 바꿀 때는 가장 바깥 범위의 style만 씁니다 — AI_USAGE.md §3.1.
• SW는 @hm-design/ui 토큰을 쓰지 않습니다. UI 패키지 토큰을 복제하거나 섞지 않습니다.
• Light/Dark 분기 없음. 전역 선택자(html, body, *) 없음.
• 모드: §1~10과 §12·§13은 SW 일반 모드(SWHeader·SWPopup·SWToolButton·SWHomeMenu·SWFooter) 기준입니다. SW 뷰어 모드(SWViewer*)의 토큰·상태는 §11과 VIEWER.md를 봅니다. 모드 선택·혼합 금지는 AI_USAGE.md §0.

1. 크기·간격

항목	값	토큰
Header 높이 / 면 높이	49px / 48px	--hm-sw-header-height / --hm-sw-header-bar-height
면 사이 간격	2px	(Header bar gap)
필드 높이	38px(면 안 위아래 5px)	--hm-sw-header-field-height
필드 사이 간격	4px	--hm-sw-header-gap
로고 슬롯	32 × 17 (홈 80 × 48 안 12, 16)	--hm-sw-header-logo-width / -height
필드 폭	레이어 234, 색상 192, 선스타일 284, 문자·치수스타일 164	—
상세보기 / 창 영역	157 × 38 / 240 × 48(pill 85 × 42, 창 이동 88, 버튼 32 × 2)	—
필드 내부	padding 0 10px 0 11px, 텍스트 사이 12px	—

2. 색·표면

역할	값	토큰
Header 배경	#060606	--hm-sw-header-background
기본 글자 / 제목	#F6F4F2 / #F0F7F5	--hm-sw-header-text-color / --hm-sw-header-title-color
Selected·On·Hover 글자	#FFC600	--hm-sw-header-selected-color
화살표	#47AF91	--hm-sw-header-arrow-color
파일명 면	세로 gradient, 테두리 #0E4C3A	--hm-sw-header-document-background, --hm-sw-header-document-border-color
객체 수정 면	gradient, 테두리 #135643, radius 6px	--hm-sw-header-object-background, -object-border-color, -object-radius
속성 필드 면	검정 45–40% gradient, 테두리 #08251C, radius 3px, shadow 0 1px 4px rgba(9,39,30,.7)	--hm-sw-header-property-background, -property-border-color, -property-radius, -property-shadow
인쇄·K pill	rgba(0,0,0,.8), 테두리 #092920	--hm-sw-header-pill-background, -pill-border-color
문서 Dropdown	#103127, 테두리 #041611	--hm-sw-header-document-menu-*
필드 Dropdown(레이어·색상·선·문자·치수)	#27241D, 테두리 #000, radius 3px, 행 Hover #62533D + 글자 #FF5C00	--hm-sw-header-layer-menu-*, --hm-sw-header-layer-row-hover-*
Input	글자 #E60403, 편집 #0F0D0A	--hm-sw-header-input-*
Tooltip	rgba(0,0,0,.8) / #FFF	--hm-sw-header-tooltip-*

사용자 확정 면 3개(파일명·객체 수정·속성 필드)는 기본값 유지를 권장합니다.

3. Typography

항목	값
글꼴	Noto Sans KR → Malgun Gothic → Apple SD Gothic Neo (--hm-sw-header-font-family, 2026-10-20 확정 — Dotum 기본값 철회, Figma Dotum은 의도적 대체). 글꼴 파일은 앱이 로드. Web UI와 같은 글꼴이지만 토큰은 별개. 다른 글꼴은 프로그램이 정한 경우에만 AI_USAGE.md §3.1 방법으로 변경
기본 / 라벨	14px / 12px (--hm-sw-header-font-size / --hm-sw-header-label-size)
Weight	400, 500, 700만 사용(600 없음). SWHeader 안의 필드 값(레이어·색상·선스타일·가중치·스케일·문자/치수스타일 값)은 400(14px · 자간 0.56px), Composed Controls(SWHeader 밖 단독 메뉴)의 필드 값은 700(2026-10-20). 파일명·제목·토글·버튼·메뉴 글자 700
자간	값 0.04em, 라벨 0.02em, 파일명 0.06em
Text Stroke	Figma Stroke가 있는 텍스트만 검정 외곽선: 14·16px --hm-sw-header-text-outline(1.3px), 12px --hm-sw-header-label-outline(1px). 자기 색 Stroke 없음. More·Tooltip·+ New/Open 제외
말줄임	값은 한 줄 ellipsis, title로 전체 표시

4. 상태

상태	규칙
Hover(테두리 있는 버튼·필드·More·인쇄·K)	1px 테두리가 노란 세로 gradient로 바뀜(--hm-sw-header-hover-border-gradient, 폭 --hm-sw-header-hover-border-width). 크기·배경·그림자 변화 없음, 자기 Dropdown이 열린 필드는 Hover 없음
Hover(파일명, 속성Bar/속성창 토글)	글자만 #FFC600. 링·배경 없음
Hover(필드 미리보기)	텍스트·선/폰트/치수 미리보기 #FFC600
Selected / On	글자·단색 아이콘 #FFC600(data-selected="true"), 배경·테두리 변화 없음
Expanded(Dropdown 열림)	필드 테두리 #081813, 아래 모서리 직각, 필드+목록을 감싸는 1px 노란 링
Focus	2px #F0F7F5 outline, offset −2px(:focus-visible)
Disabled	opacity 0.4, 커서 기본. 창 버튼은 disabled 영향 없음
목록 행	Hover와 Selected가 같은 강조(#62533D + #FF5C00)

5. Overlay·Dropdown

• 필드 Dropdown은 필드 바로 아래(top: 100%)에 겹쳐 열립니다. Portal·Dim 없음, z-index 30. 화면(또는 Header) 밖으로 나가면 좌우만 보정합니다. 부모에 overflow: hidden을 두지 않습니다.
• 목록 최대 높이 240px(8행), 넘치면 내부 스크롤. 색상 팔레트 118px.
• 속성창·K 가이드는 position: fixed Overlay(뷰포트 안 보정, Portal·Dim 없음).
• 한 번에 하나의 Dropdown(SWHeader). 단독 사용 시 각 컴포넌트가 바깥 클릭으로 스스로 닫힙니다.

6. Motion

대상	규칙
창 이동 Hover	1.4s 반복(커서 상승 → 약 444ms 문구 → 오른쪽 위 이동 → 약 888ms부터 유지). Drag(:active) 중 정지. Reduced Motion: 원본 아이콘과 정적 Tooltip
K 가이드	원본 이미지 Pan/Zoom 반복(400ms 대기 후 1022·1022·511·511ms 전환). Reduced Motion 정적
레이어 토글	배경·아이콘 300ms ease-out
기타	Hover·Selected는 즉시 전환(Transition 없음)

7. 반응형 (SWHeader 전용)

760px 이상(2026-10-21 사용자 결정): More 없이 5개 메뉴(레이어·색상·선스타일·문자스타일·치수스타일)를 항상 Header에 둡니다. 로고 옆 Open 유무와 관계없이 넘치지 않으며, 좁아질수록 < 1800 그리기모드 글자·선/치수 그림 숨김·간격 축소 → 파일명 축소(최소 96px, …) → 정보값 … 순으로 공간을 줄입니다. 메뉴 타이틀은 모든 폭에서 표시하며 공간이 부족하면 …로 줄어듭니다. < 1080 레이어 상태 아이콘·색상 칩·글꼴 이름 숨김, ≤ 900 선스타일은 선스타일 값만. Dropdown 열기·닫기는 그대로입니다. 아래 Breakpoint·실측 More는 760px 미만에만 적용됩니다.

760px 미만 Container hm-sw-header 기준 Breakpoint: < 1800 선/문자/치수스타일 → More, < 1180 그리기모드 숨김, < 1080 상세보기 → More·창 이동 24px(창 영역 176), < 900 색상 → More, < 640 인쇄·K → More·창 이동 숨김(창 영역 64), < 520 레이어 상태 아이콘 숨김. More에서 고른 필드는 첫 칸(레이어 자리)에 표시되고 Dropdown이 바로 열립니다(UI 상태만, 데이터 Callback 없음).

실측 More(2026-10-19): Breakpoint 위에서 객체 수정 영역의 실제 남은 공간을 측정해, leading·tools·긴 라벨 등으로 표시할 수 없는 메뉴만 같은 단계 순서(선/문자/치수 → 그리기모드 → 속성 블록 → 색상 → 구성형의 인쇄·K, 같은 단계는 오른쪽부터)로 More에 옮기고 공간이 생기면 역순으로 돌려놓습니다. 로고 옆 Open이 가장 먼저 옮겨집니다(좁아질 때). 넓어질 때(2026-10-20 수정안 A): Breakpoint로 막 돌아온 부분(인쇄·K, 색상, 속성 블록, 선/문자/치수, 그리기모드)은 실제 남은 공간이 있을 때만 돌아오고 없으면 More에 남으며, 다시 나타난 Open은 넓어지는 동안 다른 부분 때문에 More로 돌아가지 않습니다. 충분히 넓으면 모두 돌아옵니다. 메뉴 열기·닫기는 Header 요소의 위치·폭을 바꾸지 않습니다. 호스트 요소(leading·tools)는 More로 옮기지 않으므로 폭이 좁은 화면에는 많이 넣지 않습니다.

로고 클릭 메뉴는 좁은 폭에서는 가로 스크롤 없이 들어가는 섹션만 앞에서부터 보여 주고, 나머지는 끝의 더보기(⋯) 섹션으로 옮깁니다(2026-10-19 사용자 확정, Figma에 좁은 폭 디자인 없음). 더보기를 누르면 옮긴 섹션이 텍스트 메뉴(섹션 제목 + 기능 텍스트 목록, 그룹 사이 구분선)로 아래 Dropdown에 열리고, 폭이 넓어지면 원래 자리로 돌아갑니다. 화면에 남은 섹션은 Figma 타일 그대로입니다(§12).

조합 Header(개별 컴포넌트)에는 이 규칙이 적용되지 않습니다. 필요한 컨트롤만 배치하고 폭 정책은 소비 앱이 정합니다.

8. Popup (속성창 프레임, SWPopup / SWHeaderPropertyPanel)

프로젝트마다 내용이 달라도 아래 외형은 그대로 유지됩니다(프레임은 패키지가 그림). 새 Popup 화면은 SWPopup을 쓰고 프레임을 다시 만들지 않습니다.

항목	값	토큰
폭 / 높이	314px / 콘텐츠 높이(최대 화면 − 8px), 넘치면 본문 세로 스크롤	—
표면 / 테두리 / radius	#E4DBC9 / 1px #A67D03 / 4px, 안쪽 1px 검정 그림자	--hm-sw-property-surface, --hm-sw-property-border
제목줄	30px, Figma 제목 아트, 제목 14px 700 #FFC600 + 검정 외곽선, 닫기 44 × 30(Hover 자산)	--hm-sw-header-selected-color
본문	padding 7px, 그룹 사이 8px	—
본문 스크롤바	thin, Thumb #9A9284 / Track #E0DACE(DWG/DXF Viewer 패널과 동일). 본문과 그 안의 스크롤 영역에 적용, 페이지 스크롤바는 그대로	--hm-sw-popup-scrollbar-thumb, --hm-sw-popup-scrollbar-track
그룹 면(SWPopupSection)	제목 700 · 검정 70%, 내용 면 #F1ECE1, 1px #585349, radius 4px	--hm-sw-property-content
속성 행(SWPopupPropertyRow)	속성창 행 그대로(라벨 72px 700, 값 상자 28px, picker 필드). 데이터 = SWHeaderProperty + menus	--hm-sw-property-*, --hm-sw-property-field-*
행(SWPopupRow)	최소 32px, 라벨 72px 700 검정, 값 글자 #E60403 500, 단위 12px	--hm-sw-property-label, --hm-sw-header-input-color
값 상자	28px, Hover 1px rgba(33,29,19,.4), 숫자 편집 On #0F0D0A(단위 흰색), Dropdown On #211D13	--hm-sw-property-field-*
동작	Non-modal(Dim·Portal·Focus trap 없음). Escape는 Popup 안이면 그 Popup, 밖이면 최근 사용 Popup 하나. autoFocus면 열릴 때 Focus, 안에서 닫히면 원래 위치로	—

• Header 필드 Dropdown(SWHeaderLayerMenu·SWHeaderColorMenu·선/문자/치수 스타일)은 SWHeader 전용 디자인입니다. Popup 안에 넣지 않습니다(2026-10-20 사용자 확정). Popup의 레이어·색상·선스타일은 속성창 컨트롤 SWPopupPropertyRow(속성창과 같은 picker 필드: 레이어 26:12250, 색상 26:12170, 선스타일 26:12388 — 값 #E60403, Hover 1px rgba(33,29,19,.4), On #211D13, 목록은 고정 Overlay)를 씁니다. 그 밖의 행은 SWPopupRow + SWHeaderInput.
• 선택 목록(단위 등)은 SWSelect입니다(native select, 28px · 좌우 8 · 1px #948871 · radius 4 · 면 #F1ECE1 · 12px, 플랫폼 화살표·옵션 목록). 선택값은 변경 가능한 값이라 #E60403(2026-10-21), Disabled 값과 옵션 목록은 검정입니다. 뷰어 축척 지정 팝업과 같은 모양이고 뷰어 패널 안에서는 --hm-sw-viewer-panel-* 값(글자색 포함)을 따릅니다. 토큰 --hm-sw-select-border-color·-background·-text(Disabled 값·옵션 목록; Popup 안 선택값 빨강은 규칙으로 적용).
• 속성값 색상(2026-10-21 사용자 확정): 빨강 #E60403은 실제로 수정 가능한 값에만 씁니다. 밝은 속성창·Popup에서 수정할 수 없는 값(readOnly·type: "computed"·Disabled, Callback 없는 행)은 검정입니다. 어두운 속성Bar는 Bar에서 편집하지 않는 값을 포커스 없는 텍스트(<output>)로 보여 주며, 속성창에서 수정하는 값(원의 반지름·지름·원주·면적)은 빨강을 유지합니다. 클릭할 수 있다는 이유만으로 빨강을 쓰지 않습니다.
• 속성창 입력(2026-10-21): 숫자 값(선 가중치 포함)의 편집 Input은 값 영역 전체 너비를 채웁니다. 투명도는 값 + annotation(예 (ByL))이 하나의 편집 상자이고 그 뒤에 게이지바·단위가 옵니다. 속성창 선꼴(picker: "lineStyle") Dropdown은 선 종류 목록 1열(미리보기 + 이름)만 표시합니다. menus.lineWeights·lineScale 등은 속성창 Dropdown에 표시되지 않으며 SWHeader 선스타일 필드는 기존 3열을 유지합니다.
• 게이지바는 SWSlider입니다. 모양 선택 우선순위: ① appearance Prop(명시) → ② 기본 "panel". 테마 연동은 토큰 범위입니다: panel = --hm-sw-slider-panel-track(#E0DACE)·-range(#266651)·-thumb(#FFFFFF), property = --hm-sw-property-range-fill·-fill-edge·-track·-highlight(속성창과 같은 토큰). SWTheme style·Runtime 토큰 Override로 두 모양의 색이 함께 바뀌며, 테마 전체에서 기본 appearance를 바꾸는 설정은 없습니다. 새 색을 만들지 않습니다.
• Popup 하단 버튼의 SW 디자인은 없습니다. 임의 색·크기로 만들지 말고 @hm-design/ui Button 등 기존 컴포넌트를 쓰거나 사용자에게 디자인을 확인합니다.

9. 도구 버튼 (SWToolButton / SWToolGroup)

appearance	기존 기준	상태
text	속성Bar·속성창 토글: 19px 행, 14px 700, 자간 0.04em, 묶음 위 12px 캡션, 버튼 사이 1px 구분선	Hover·pressed 글자 #FFC600, 테두리·배경 변화 없음
pill	인쇄·K: pill(rgba(0,0,0,.8), 1px #092920, radius 4px) 안 40 × 38 버튼, 아이콘 영역 24 × 23	Hover 노란 gradient 링 + hoverIcon. 아이콘 색은 기존 인쇄 아이콘 #B6D0C9 → Hover #FFC600(--hm-sw-header-selected-color)
document	파일명 면: 48px, gradient 표면, 위·오른쪽·아래 1px #0E4C3A, 글자 #F0F7F5 700 · 자간 0.06em	글자만 Hover #FFC600. Home 바로 뒤면 로고 사선 접점 공유, 그 뒤 파일명은 왼쪽 여백 12px

10. 새 컴포넌트 체크리스트

1. <SWTheme>(또는 SWHeader의 tools) 안에서 렌더링한다.
2. 표면·크기·색은 위 토큰만 쓴다. 필드형이면 38px·속성 필드 면·12px 라벨 + 14px 700 값.
3. Hover/Focus/Disabled/Selected를 §4 규칙대로 구현한다(테두리형은 gradient 링, 텍스트형은 글자만 #FFC600).
4. 입력이 필요하면 SWHeaderInput을 재사용한다.
5. 값은 Props, 동작은 Callback. CAD 데이터를 내부에서 바꾸지 않는다.
6. hm-sw-* class를 새로 쓰거나 덮어쓰지 않는다(자기 접두사 사용, 예: app-).
7. 버튼·탭·토글이면 먼저 SWToolButton의 세 모양(§9)으로 해결되는지 본다. 팝업·설정창이면 SWPopup + SWPopupSection / SWPopupRow(§8).
8. 팝업 안의 새 콘텐츠는 §8의 Popup 토큰(--hm-sw-property-*)만 읽는다. Header용 어두운 토큰을 밝은 Popup 면에 섞지 않는다.

11. 뷰어 모드 토큰·상태 요약 (SWViewer* 전용)

출처: @hm-design/sw styles.css(원본 src/theme/sw-viewer.css)에서 그대로 옮긴 값입니다. 사용 규칙·크기 상세는 VIEWER.md, 모드 선택·혼합 금지는 AI_USAGE.md §0입니다. §1~10은 일반 모드 기준이며 이 절의 토큰은 뷰어 모드 신규 UI에서만 읽습니다(일반 모드 신규 UI에 쓰지 않음). 토큰은 .hm-sw-header, .hm-sw-theme에 선언됩니다.

영역	토큰 = 기본값
Header	--hm-sw-viewer-height 52px, --hm-sw-viewer-background #0a0a0b(단색, 2026-10-21 — Storybook 뷰어 캔버스 바탕색), --hm-sw-viewer-border-color #071e18, --hm-sw-viewer-text #fff, --hm-sw-viewer-muted #bddfd4, --hm-sw-viewer-accent #ffc600, --hm-sw-viewer-hover #266651
로고 면	--hm-sw-viewer-brand-width 72px, --hm-sw-viewer-brand-empty-width 24px(로고 없음), --hm-sw-viewer-brand-top #123328, --hm-sw-viewer-brand-middle #205241, --hm-sw-viewer-brand-bottom #071e18
크기·글자	--hm-sw-viewer-gap 4px, --hm-sw-viewer-radius 4px, --hm-sw-viewer-control-height 40px, --hm-sw-viewer-button-height 16px, --hm-sw-viewer-font-size 14px, --hm-sw-viewer-label-size 11px, --hm-sw-viewer-icon-size 16px, --hm-sw-viewer-disabled-opacity 0.6
Header 스위치·아이콘	--hm-sw-viewer-switch-off #0a221d, --hm-sw-viewer-switch-bevel inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.25), --hm-sw-viewer-icon-outline-color = var(--hm-sw-header-text-outline-color), --hm-sw-viewer-icon-outline-width 1px
Dropdown·More	--hm-sw-viewer-menu-background #fff, --hm-sw-viewer-menu-border-color #dedbd2, --hm-sw-viewer-menu-text #0a221d, --hm-sw-viewer-menu-muted #6e6759, --hm-sw-viewer-menu-highlight rgba(189, 223, 212, 0.45), --hm-sw-viewer-menu-highlight-text #123328, --hm-sw-viewer-menu-shadow 0 0 12px rgba(0, 0, 0, 0.2), --hm-sw-viewer-menu-item-height 36px, --hm-sw-viewer-more-background #f5f0e5, --hm-sw-viewer-more-border-color #897445
패널 콘텐츠	--hm-sw-viewer-panel-background = var(--hm-sw-property-surface), --hm-sw-viewer-panel-field-background = var(--hm-sw-property-content), --hm-sw-viewer-panel-inner-border = var(--hm-sw-property-inner-border), --hm-sw-viewer-panel-text = var(--hm-sw-property-label), --hm-sw-viewer-panel-heading #3e3523, --hm-sw-viewer-panel-label #6e6759, --hm-sw-viewer-panel-primary #123328, --hm-sw-viewer-panel-switch-off = var(--hm-sw-property-inner-border), --hm-sw-viewer-panel-switch-on #266651, --hm-sw-viewer-panel-badge-background = var(--hm-sw-property-table), --hm-sw-viewer-panel-overlay rgba(0, 0, 0, 0.1), --hm-sw-viewer-panel-spacing 12px

• 공유 토큰(모드 혼합 아님): 뷰어 Header의 파일명·객체 수정·속성 면은 --hm-sw-header-document-*, --hm-sw-header-object-*, --hm-sw-header-property-*를, 글자 외곽선은 --hm-sw-header-text-outline·--hm-sw-header-label-outline을 그대로 읽습니다(§2·§3). 패널 제목 막대 추가 버튼(ghost)의 Hover·Focus 색은 --hm-sw-header-selected-color입니다.

상태	Header 항목(button·toggle·menu·tabs·switch)	패널 콘텐츠
Hover	글자·아이콘 --hm-sw-viewer-accent(#ffc600), 면 없음, 크기·위치 변화 없음(2026-10-21; 상태 SWViewerStatus는 Hover 없음)	outline 버튼: 면 --hm-sw-viewer-panel-field-background / primary: 면·테두리 --hm-sw-viewer-hover / tone="green": 면·테두리 --hm-sw-viewer-hover, 글자 #fff / ghost: 글자만 --hm-sw-header-selected-color
Active·Pressed·열림·선택 탭	글자·아이콘 --hm-sw-viewer-accent(#ffc600), 선택 박스 없음	tone="green" 누르는 동안: 면·테두리 --hm-sw-viewer-panel-primary, 글자 #fff
Checked(스위치)	면 --hm-sw-viewer-accent, thumb --hm-sw-viewer-switch-off	면 --hm-sw-viewer-panel-switch-on
Focus	2px solid --hm-sw-viewer-accent 외곽선	버튼·Input·Slider: 2px solid --hm-sw-viewer-panel-switch-on 외곽선
Disabled	--hm-sw-viewer-disabled-opacity(0.6)	버튼·Input·Field 0.5
Dropdown 항목	면 --hm-sw-viewer-menu-highlight, 글자 --hm-sw-viewer-menu-highlight-text(Focus·Hover·서브메뉴 열림), Disabled 0.5	—
상태 표시	SWViewerStatus: 글자 --hm-sw-viewer-muted 11px 400, error는 --hm-sw-viewer-accent, loading 아이콘 회전	—

• Typography(뷰어): Header 항목 14px 500, 캡션·개수·상태 11px 400, 패널 필드 라벨 14px 500, Section 제목 12px 700, 패널 버튼·Badge 12px 500, Input 12px. Font Weight는 400/500/700만 씁니다.
• 레이어 Popup 가시성(2026-10-21 필수): SW Viewer 레이어 Popup에서 레이어 표시·숨김 기능은 반드시 HMDesign의 눈(Eye/EyeOff) 아이콘 버튼을 사용한다. Toggle Switch로 대체하지 않는다. 버튼 24 × 24 · radius 4 · 16px 아이콘 · 색 --hm-sw-viewer-panel-heading · Hover 면 rgba(154, 146, 132, .3) · cursor: pointer, 숨긴 행 불투명도 0.45(VIEWER.md §4.1).
• 뷰어 신규 컴포넌트 체크리스트: ① VIEWER.md·카탈로그 §9 컴포넌트로 해결되는지 먼저 본다 ② 위 토큰을 var(--…)로만 읽고 일반 모드 전용 모양(§8 SWPopupRow, §9 SWToolButton)을 섞지 않는다 ③ 상태는 위 표대로 ④ 토큰에 없는 값은 결과 보고에 "AI 구성 값 — 디자인 확인 필요"로 적는다 ⑤ hm-sw-viewer-* class를 쓰거나 덮어쓰지 않는다.

12. 로고 클릭 메뉴 (SWHeader homeMenu / SWHomeMenu, Figma 26:10591) — SW 일반 모드 전용

이 절의 값은 일반 모드 SWHeader의 홈 메뉴에만 씁니다. 뷰어 모드(§11)에는 홈 메뉴가 없으며 --hm-sw-home-menu-*·--hm-sw-recent-files-* 토큰을 뷰어 신규 UI에 쓰지 않습니다.

항목	값	토큰
위치	Header 맨 위(top 0), 객체 수정 영역 왼쪽 −2px ~ 창 영역 왼쪽(1920에서 x 375, 폭 1305). DOM 측정이며 고정 좌표 없음. controls로 파일명이 객체 수정 영역 안에 있으면 파일명 오른쪽 −2px부터 시작. 로고·파일명·창 영역은 가리지 않음. z-index 20(속성Bar 위, Dropdown 30·속성창 40 아래)	—
크기	메뉴 높이 77(섹션 75 + 하단 강조 2), 그룹 46, 타일 80 × 46, 아이콘 18 슬롯, 섹션 폭은 타일 수로 자동	—
섹션 면	세로 gradient 면 + 1px #081813 + 안쪽 1px #20190E, 아래 모서리 3px	--hm-sw-home-menu-section-*
섹션 제목	Figma tit_* badge(9-slice), 글자 400 검정	--hm-sw-home-menu-title-color
타일 상태	Default 아이콘 #B6B4AF · Hover·Pressed(누르는 동안)·Active 주황 gradient 1px 테두리 + 아이콘·글자 #FF5C00. 아이콘·라벨의 위치·크기·간격과 타일 크기는 Default와 같음(2026-10-20 사용자 확정, Figma의 1px 위·왼쪽 이동은 적용하지 않음). 라벨 700. 최근파일 외 항목은 실행 버튼: 클릭 후 ON 유지 없음(2026-10-19 사용자 확정). Active 유지는 하위 패널 타일(최근파일, 목록이 열린 동안)과 더보기·홈 버튼(메뉴가 열린 동안)만. 유지형이 필요하면 toggle: true	--hm-sw-home-menu-item-*, --hm-sw-home-menu-icon-color
하단 강조	sections = 섹션마다 주황 띠, outline = 메뉴 전체 2px 외곽선(하위 패널이 열린 동안, auto 기본)	--hm-sw-home-menu-accent-*
최근파일 패널	폭 354, 행 50, 배경 #27241D, 주황 테두리, 행 Hover #62533D + #FF5C00, 최대 3행(2026-10-21), 미리보기 310 × 270(제목 경로 + 파일명, 본문은 갈색 #62533D 면 가운데 빨간 금지 표시 --hm-sw-recent-files-preview-none-color #FF0000, 이미지 렌더링 없음). 미리보기 위치: 목록 오른쪽(Figma) → 오른쪽에 공간이 없으면 왼쪽 → 좌우 모두 없으면(예: 390) 목록 위에 겹쳐 Hover 행 바로 아래(목록 왼쪽 1px 안쪽, 4면 테두리·radius 4, 크기·색 동일), 화면 아래 공간이 없으면 행 바로 위(2026-10-19 사용자 확정, Figma 없음). 가로 스크롤 없음	--hm-sw-recent-files-*
동작	기본 숨김 → 로고 클릭 열기 → 다시 클릭 닫기. 메뉴 빈 곳 클릭 닫기(Figma CLOSE). Escape: 하위 패널 → 메뉴, 닫히면 로고로 Focus. 메뉴 밖 클릭은 닫지 않음(Figma overlay 기준)	—
좁은 폭	측정해 들어가는 섹션만 표시, 나머지는 끝의 더보기(⋯) 섹션(기존 섹션·타일 부품, 배지 moreLabel 기본 "더보기", 타일 "N개 그룹")으로 이동. 메뉴 배경·폭·높이·테두리·강조선은 그대로(더보기 섹션 면이 남는 폭을 채워 객체 수정 영역을 계속 덮음)이고, 더보기 배지·⋯ 타일만 마지막으로 표시된 섹션 바로 오른쪽에 붙음. 전체가 들어가는 폭에서는 더보기 숨김. 더보기 Dropdown과 최근파일 목록은 동시에 열리지 않음: 더보기를 열면 열린 목록을 먼저 닫고, Dropdown에서 최근파일을 고르면 Dropdown을 닫고 목록을 엶. Dropdown = 텍스트 메뉴(SW brown Dropdown: 배경 #27241D·테두리 #000·radius 3, 제목 12px 700 #D4CBBD, 행 30px·14px 700·좌우 12, 그룹 구분선 = 레이어 footer 선), ⋯ 타일 아래 왼쪽 정렬(화면 안으로 맞춤). 행 Hover = Pressed = Active = #62533D + #FF5C00. 일반 행은 클릭 후 ON·✓ 없음, 최근파일 행(›)만 목록이 열린 동안 Active. ✓는 toggle: true 행에만. 클릭·Callback·상태 규칙은 타일과 같음. ↓(더보기) = 첫 행, ↑/↓ 이동. Escape: Dropdown → 하위 패널 → 메뉴. 더보기 안 최근파일은 Dropdown을 닫고 더보기 타일 아래(화면 안으로 맞춤)에 기존 최근파일 목록으로 열림, 미리보기는 오른쪽에 공간이 없으면 왼쪽, 좌우 모두 없으면 목록 위 행 아래(최근파일 패널 행 참고). 목록이 메뉴 밖으로 나가는 부분은 메뉴 하단 강조선(2px, 같은 gradient)이 목록 상단으로 이어짐(실측 위치 기준, --hm-sw-home-menu-accent-outline-width). 가로 스크롤 없음	--hm-sw-home-menu-more-*

• Home On(Figma 662:67267, 2026-10-19 사용자 확정): 메뉴가 열려 있는 동안 SWHeader가 자동으로 로고에 노란 Hover 테두리를 유지하고, Header 전폭 상·하단에 #5F4B0F 2px 선(--hm-sw-header-home-on-line-color / -width)을 그립니다. 닫으면 기본 상태로 돌아갑니다. 크기·위치 변화가 없고 SW 일반 모드 전용입니다(뷰어 모드에는 없음). 소비 코드에서 별도 class나 상태를 추가하지 않습니다.
• 새 색·크기는 위 토큰만 style로 덮어씁니다. hm-sw-home-menu* class를 소비 코드에 쓰지 않습니다.

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와 같은 SW 기본 글꼴(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 수정과 같이 그리지 않습니다.

항목	값	토큰
바	높이 72, 배경 #060606	--hm-sw-footer-height, -background
배치(1920, Figma)	보조기능 버튼 074 → 2 → 보조기능 격자 76392(위 2) → 4 → 명령 그룹 396~(위 1) → 명령어 전체보기(명령 칸 바로 뒤, 1552~1626) → 나머지 bg_vacant	—
측면 버튼	74 × 71, 자산 면(그라데이션 + 그라데이션 테두리), 그림자 8px 60% 검정(왼쪽 버튼 → 오른쪽 5px, 오른쪽 버튼 → 왼쪽 5px). 제목 14px 1.3px 외곽선, 부제 14px 1px 외곽선, 위 18 · 줄 간격 2. Hover·Pressed·Expanded = 제목·부제 #FF5C00 + 1px 주황 그라데이션 테두리(--hm-sw-footer-gra-border-orange), Disabled 기본 모양	--hm-sw-footer-side-*
보조기능	104 × 33, gap 2, radius 3, 면 linear-gradient(0deg, #262218 8%, #4A3C2B 34%, #594C31 55%, #312A1B 90%), 아이콘 중심 (19.5, 16.5), 라벨 13px 왼쪽 36 폭 57 가운데. 테두리 1px 그라데이션(위 → 아래): Default #886D35 0%, #423625 8.85%, #F3DBA8 26.17%, #0E0B06 83.79%, #574B30 100%(Figma btn_* 26:9248 …)	--hm-sw-footer-aux-*, --hm-sw-footer-aux-border
보조기능 상태	Hover(선택 아님) = 테두리만 노랑 --hm-sw-header-hover-border-gradient(#A67D03 → #F2CC0F → #FADD4F → #F2CC0F → #926E03, SW Header Figma Hover 재사용 — 버튼 세트에는 Hover 없음, 사용자 확정 2026-10-20). Selected(aria-pressed="true", Figma Variant2 = Variant3) = 테두리 #DA6813 8.52%, #FFBB89 37.93%, #E5690D 71.85%, #AE3607 92.77%(Figma gra-border-orange = --hm-sw-footer-gra-border-orange) + 아이콘 채움·글자 #FF5C00, Hover보다 우선. 아이콘 외곽선 검정 90% 1px는 모든 상태 동일	--hm-sw-footer-aux-hover-border, --hm-sw-footer-aux-pressed-border, --hm-sw-footer-aux-icon-color(#F1EDE5)
명령 그룹 면	테두리 위·왼쪽·아래 1px #886D35, 왼쪽 위 radius 4, 면 linear-gradient(0deg, #2F281A 0%, #312A1B 5%, #332B1C 36%, #463C29 58%, #38301F 79%, #19160E 98%). 마지막 명령 뒤(빈 칸·나머지)는 bg_vacant linear-gradient(0deg, #18150E 28%, #262015 41%, #332B1C 58%, #38301F 81%, #18150E 100%), 명령 칸 높이까지만(2026-10-20: 분류 행 아래로 내려가지 않아 선택 탭 Pocket 면이 어느 탭에서나 같음)	--hm-sw-footer-group-*, --hm-sw-footer-vacant-background
명령 칸	68 × 47, 라벨 14px #F6F4F2 위 6(좌우 2, 넘치면 … 말줄임 — 칸·글자 크기 그대로, 2026-10-20), 아이콘 18 × 18 위 26 가운데. 칸 사이 구분선 1 × 37(위 5) linear-gradient(0deg, #20190E, #8A7A5B 45%, #F3DBA8 70%, #423625) + -1px 0 1px #000	--hm-sw-footer-slot-*, --hm-sw-footer-divider*
명령 상태	Hover = 선택(Figma Variant2 = Variant3): 글자 #FF5C00 + 주황 아이콘. 색·아이콘만 바뀌고 아이콘·라벨 위치·크기·간격과 칸 크기는 그대로. Disabled 40%(Figma 없음)	--hm-sw-footer-accent
빈 칸	68 × 46(위 1), + #BEB5A6. Hover: 주황 + 와 주황 그라데이션 점선 링(자산)	—
가이드	208 × 149, 빈 칸 위 4px 가운데, 1px #DA6813 radius 2, 면 #0E3C2E, 미리보기 194 × 111(5, 5, 검정 1px), 제목 14px 외곽선, 캡션 12px #B6D0C9 1px 외곽선	--hm-sw-footer-guide-*
분류 행	높이 24, 면 #282216 → 위 14% #574B30, 안쪽 1px 테두리 그라데이션, 현재 탭 Pocket(좌우 7px 곡선, 아래 radius 2, 가장자리 #675A3B). 탭 14px #D4CBBD, 자간 10%, 위 4, 좌우 padding 8, 최소 43. 구분선 1 × 10 검정(위 7). Hover·현재 #FF5C00	--hm-sw-footer-menu-*
Layout 탭	높이 22, 12px 자간 2%. Default 면 #C3B79E 글자 #161410. On: linear-gradient(0deg, #7C6C4C, #7C6C4C 85%, #A6946F) 흰 글자. 이름 편집: #0F0D0A 빨강 #E60403 주황 테두리. Hover·On·편집 글자 아래 70% 검정 1.3px 외곽선. 둥근 탭: 1px rgba(0,0,0,.05)(Hover·편집 #DA6813), 위 radius 4, 안쪽 그림자 inset 0 -3px 4px rgba(56,48,31,.25), ×(16) Hover 노랑. 사선 탭(마지막): 97 × 22 자산, On hover = 베이지 면 + 주황 글자, ×(28, 빨강 사선). Hover(선택 아님, 두 모양 모두, 2026-10-20) = Model과 같은 gra-border-orange 면(사선 탭은 자산 모양 안)만 바뀌고 글자는 Default 그대로(#161410 12px 400, 외곽선 없음, 위치·크기 불변)	--hm-sw-footer-tab-*, --hm-sw-footer-gra-border-orange
+ 버튼	Layout 옆 +(24 × 22) Hover = gra-border-orange 면 + +(분류 행 + 자산). 분류 행 +(28 × 12) Hover = + 채움 #FF5C00(검정 외곽선 그대로)	--hm-sw-footer-gra-border-orange, --hm-sw-footer-accent
Model 탭	73 × 22 자산(왼쪽 사선), 글자 왼쪽 22. Hover·On = 자산 모양 안 gra-border-orange 면 + 검정 #161410 글자(12px 400, 외곽선 없음)(2026-10-20 사용자 확정, 이전 Figma On 갈색·흰 글자 대체). 앞 사선 탭과 8px 겹침	--hm-sw-footer-gra-border-orange
명령창	566 × 71 / 270, 위 radius 4, 위 71px linear-gradient(180deg, #635537, #262218 5%, #281F16 10%, #282216) + 아래 #282216. 12px 자간 10% 줄 14, 1px 외곽선. 입력 칸 23(좌우 4) #16130D + 0 -1px 2px rgba(255,255,255,.25), inset 0 1px 4px #000. 화살표 18 × 18 검정 radius 2(4, 4 오른쪽 위)	--hm-sw-footer-command-*
바 안 명령창(실제 화면)	보조기능 뒤 4px, 바 아래에 붙어 펼치면 위로 270. 남는 폭(바 − 보조기능 영역 − 명령어 전체보기)을 칸 영역 0.57 : 명령창 나머지(최소 280)로 나눔 — 칸 수는 바 폭으로만 계산, 분류의 명령 수와 무관(1920 → 12칸)	--hm-sw-footer-command-min-width, --hm-sw-footer-slot-share
좌표(실제 화면)	바 위 왼쪽, 12px #F6F4F2 1px 외곽선, 아래 3px	—
좁은 폭(실제 화면)	빈 칸이 먼저 줄고, 넘치는 명령은 마지막 칸 ▲(ico_arrow 18 × 18, 오른쪽 위 4) → 명령 칸 위 패널(같은 칸, 오른쪽 맞춤, 테두리 1px #886D35·아래 없음·위 radius 4, 명령 칸 면). 분류 탭 넘침 = 탭 영역 잘림 + ◀ ▶(13 × 16, 6 × 8 삼각형 #F6F4F2, Hover #FF5C00) + +. 바 1279px 이하 보조기능 아이콘만 45 × 33	--hm-sw-footer-aux-compact-width

• Figma에 없는 값: 실제 화면에서 가져온 값(바 안 명령창 배치, 좌표, ▲ 패널, 분류 ◀ ▶, 보조기능 아이콘만)과 AI 구성 값 — 디자인 확인 필요(측면 버튼 Hover 글자 #FF5C00·주황 테두리, 분류 행 + Hover, Disabled 40%, 명령창 최소 280px, 칸 영역 비율 0.57(두 실제 화면 재현 값), 보조기능 아이콘 전환 1279px, Layout 탭 이름 편집 입력의 동작).
• 새 하단 UI는 위 토큰을 var(--…)로 읽고 hm-sw-footer* class를 쓰거나 덮어쓰지 않습니다.