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
로고 슬롯	높이 17, 폭은 로고 원본 비율(-width 기본 auto, Figma 예시 32 × 17). 홈 = 왼쪽 12 + 로고 + 36(사선), 로고는 그 안 콘텐츠 영역 가로·세로 가운데. 사선 배경(Figma 68 × 48)은 로고 폭만큼 늘거나 줄며 사선 모양·Hover는 그대로(9-slice). 로고가 없어도 홈과 사선 배경·동작은 그대로(빈 로고 자리 32px 유지, 80 × 48 · 사선 68 × 48, 파일명 위치 동일). SWViewerHeader는 로고가 없으면 로고 면 전체 없음(2026-10-23)	--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 면, 위·오른쪽·아래 1px 세로 gradient 테두리 linear-gradient(180deg, #0E4C3A 0%, #041611 13.73%, #041611 89.51%, #18503F 100%)	--hm-sw-header-document-background, --hm-sw-header-document-border-gradient(단색 --hm-sw-header-document-border-color #0E4C3A는 호환·단색 선용)
객체 수정 면	gradient 면, 1px 세로 gradient 테두리 linear-gradient(180deg, #135643 0%, #0E3D2F 13.57%, #34DAAA 37.06%, #08241C 80.5%, #1F5E4B 100%), radius 6px	--hm-sw-header-object-background, -object-border-gradient, -object-radius(단색 -object-border-color #135643은 호환·메뉴 테두리용)
속성 필드 면	검정 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, …) → 정보값 … 순으로 공간을 줄입니다. 미리보기 일괄 숨김(2026-10-23 사용자 결정): 레이어 상태 아이콘(전구·파란 아이콘·자물쇠)·색상 칩·선스타일 점선·문자스타일 글꼴명(Arial)·치수스타일 치수선 5종은 하나의 측정 단계로 처리해, 모두 들어갈 공간이 있을 때만 모두 표시하고 부족하면 같은 시점에 모두 숨기며(그 폭도 제거), 넓어져 다시 모두 들어가면 함께 복원합니다. 메뉴별로 차례로 숨기지 않으며 일부만 남는 상태는 없습니다(예시 데이터 기준 1920px 표시·1440px 숨김, 경계 약 1650px). 이름·값 텍스트는 그대로입니다. 메뉴 타이틀은 모든 폭에서 표시하며 공간이 부족하면 …로 줄어듭니다. ≤ 900 선스타일은 선스타일 값만. Dropdown 열기·닫기는 그대로입니다.

가용 공간 분배(2026-10-23 사용자 결정): Header 폭 760~1920px(1440px 포함)에서는 레이어부터 치수스타일까지 5개 그룹이 속성보기 앞에 남는 공간을 나눠 가져(각 그룹이 자기 내용 폭에서 같은 양만큼 늘어나고 필드 면도 함께 늘어남) 속성보기 바로 옆까지 채웁니다. 1920px 초과에서는 각 그룹이 1920px 폭(레이어 234 · 색상 192 · 선스타일 284 · 문자스타일 164 · 치수스타일 164px)으로 고정되고 남는 공간은 속성보기 앞 여백으로 남습니다(그룹을 더 늘리지 않음). 숨김·아이콘 전환·More 단계는 늘어나기 전 내용 폭으로 측정하므로 그대로이며, 오른쪽 창 영역·창 제어 위치와 Dropdown 폭도 그대로입니다. controls로 구성한 Header(data-configured)와 760px 미만에는 적용하지 않습니다. 소비 CSS로 그룹 폭을 따로 지정하지 않습니다. 아래 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 gradient 테두리(--hm-sw-header-document-border-gradient), 글자 #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
로고 면	2026-10-23부터 SWHeader 홈과 같은 사선 배경(Figma 에셋 9-slice)·같은 폭 계산(왼쪽 12 + 로고 + 36, 다음 부품과 17px 겹침, 예시 로고에서 79px). --hm-sw-viewer-brand-width 기본 auto. 로고 다음 첫 부품(파일 열기·파일명) 시작 여백 8px. Hover 효과 없음(기존 그대로, SWHeader Hover와 다름). 로고가 없으면 로고 면 없음(폭 0, 첫 부품 12px 안쪽). --hm-sw-viewer-brand-empty-width 24px·--hm-sw-viewer-brand-top #123328·-middle #205241·-bottom #071e18은 더 쓰지 않으며 호환용으로만 남음
크기·글자	--hm-sw-viewer-gap 4px, --hm-sw-viewer-radius 4px, --hm-sw-viewer-control-height 40px, --hm-sw-viewer-button-height 34px, --hm-sw-viewer-tabs-max-width 378px(tabs만 있는 field 그룹의 최대 폭, 2026-10-23), --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
Model / Layout 탭(Figma 7652:40344, 2026-10-23)	컨테이너: --hm-sw-viewer-tabs-height = calc(var(--hm-sw-viewer-control-height) + 2px) = 42px(옆 field 그룹 바깥 높이와 같음; 바깥 1px은 투명 가장자리(외곽선 제거 후에도 크기 유지용), 그 안 검정 여백 위·좌우 1px·아래 1.5px, 버튼은 나머지 37.5px를 채움), --hm-sw-viewer-tabs-radius 6px, --hm-sw-viewer-tabs-background rgba(0, 0, 0, 0.8)(면), --hm-sw-viewer-tabs-glow-color transparent(추가 Glow 색, 기본 없음 — 녹색 외곽선은 2026-10-23 사용자 요청으로 제거되어 외곽선 토큰 없음), --hm-sw-viewer-tabs-glow 0 0 4px var(--hm-sw-viewer-tabs-glow-color), --hm-sw-viewer-tabs-shadow inset 0 2.857px 2.857px rgba(0, 0, 0, 0.25)(버튼 위에 겹치는 안쪽 그림자). 버튼 공통: 높이는 컨테이너를 채움(별도 높이 토큰 없음), --hm-sw-viewer-tab-radius 5px(바깥 모서리만), --hm-sw-viewer-tab-border-width 1.428px, --hm-sw-viewer-tab-gap 14px(이름–개수; 버튼 좌우 안쪽 여백 5px와 함께 기존 기본 폭·측정 단계 유지). 객체 면의 첫 그룹이 Model / Layout 탭만 가진 경우에만 그 그룹 오른쪽에 margin-right: 1px(조건부 규칙, 다른 Header 그룹 간격은 객체 면 gap 그대로): 다음 그룹까지 1180px 이상 5px, 미만 3px. 최대 너비 378px·높이 42px·반응형 More 이동 단계는 그대로(버튼 좌우 여백 5px), --hm-sw-viewer-tab-background #0e3d2f(Gradient 아래 바탕), --hm-sw-viewer-tab-gradient linear-gradient(180deg, #081813 0%, #09271e 8.6884%, #0b3227 25.428%, #0e3d2f 51.252%, #0b3227 80.027%, #0a2b21 89.759%, #081813 100%). 테두리 토큰은 이미지(Figma Gradient Stroke, 위→아래)이며 단색은 linear-gradient(<색>, <색>)로 지정합니다. 선택: --hm-sw-viewer-tab-active-border linear-gradient(180deg, #a67d03 0%, #f2cc0f 16.4%, #fadd4f 37.2%, #f2cc0f 62%, #926e03 87.9%), --hm-sw-viewer-tab-active-text = var(--hm-sw-viewer-accent)(#ffc600). 비선택: --hm-sw-viewer-tab-inactive-border linear-gradient(180deg, #189b6e 0%, #287a5e 100%), --hm-sw-viewer-tab-inactive-text = var(--hm-sw-viewer-text)(#fff). 글자는 두 상태 모두 세로 가운데. 긴 이름(2026-10-23): 열은 minmax(0, 1fr)로 같은 폭을 유지하며 상자(최대 378px)를 넘지 않고, 이름(.hm-sw-viewer-header__tab-name)이 먼저 text-overflow: ellipsis로 줄며 개수는 줄이지 않음. --hm-sw-viewer-tab-name-basis 3em(14px에서 42px, 기본 "Model" 폭): 공간 계산에서 이름은 이 폭까지만 셈(더 짧은 이름은 자기 폭) — 긴 이름도 일반 이름과 같은 탭 폭·같은 반응형 단계(다른 메뉴 아이콘화·More 이동이 같음)이고, 상자에 남는 공간이 있을 때만 그만큼 이름이 더 보임. 광택(비선택 상단): --hm-sw-viewer-tab-highlight-color #2d8b6b → --hm-sw-viewer-tab-highlight-end rgba(11, 45, 34, 0), --hm-sw-viewer-tab-highlight-opacity 0.67, --hm-sw-viewer-tab-highlight-height 20px. 상호작용: --hm-sw-viewer-tab-hover-border = var(--hm-sw-viewer-tab-inactive-border), --hm-sw-viewer-tab-hover-text = var(--hm-sw-viewer-accent), --hm-sw-viewer-tab-focus-color = var(--hm-sw-viewer-accent). --hm-sw-viewer-tab-border-face는 상태별 테두리를 고르는 내부 변수라 지정하지 않습니다
Header 스위치·아이콘	--hm-sw-viewer-switch-off #020a07(OFF 트랙), --hm-sw-viewer-switch-thumb-off #5f7a71(OFF 원형, 흐린 회녹색), --hm-sw-viewer-switch-on = var(--hm-sw-viewer-hover)(ON 트랙), --hm-sw-viewer-switch-thumb-on = var(--hm-sw-viewer-muted)(ON 원형, 민트; 노란색·테두리 없음, 2026-10-22), --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, --hm-sw-viewer-panel-icon-color #c7bda9(패널 제목 막대 아이콘 버튼 — 접기·ghost 추가 버튼 — 전용, 2026-10-23. Header 상태 글자·스위치 캡션은 --hm-sw-viewer-muted 유지, SWPopup 자체 제목 아이콘은 이미지)

• Model / Layout 탭 토큰: 위 --hm-sw-viewer-tabs-*·--hm-sw-viewer-tab-*은 탭 컨테이너·버튼에만 연결되며 다른 Header 부품·SWHeader·Footer·패널에 쓰이지 않습니다. 탭 색만 바꾸려면 가장 바깥 SW 범위의 style로 덮습니다: 화면을 <SWTheme style={...}>로 감싸거나 단독 SWViewerHeader의 루트에 지정합니다(토큰이 그 범위에 선언되므로 일반 div 래퍼의 값은 가려짐). 예: style={{ "--hm-sw-viewer-tab-active-border": "linear-gradient(#e07b00, #e07b00)", "--hm-sw-viewer-tab-inactive-border": "linear-gradient(#3d6bb3, #3d6bb3)" }}. var(...) 기본값(active-text·hover-*·focus-color)은 SW 범위에서 계산되므로 공통 토큰(--hm-sw-viewer-accent 등)을 바꾸면 같은 범위에서 함께 따라가고, 탭 토큰을 직접 지정하면 공통 토큰과 독립합니다. 글자 외곽선(text-shadow)은 탭에서도 기존 그대로(이름 --hm-sw-header-text-outline 1.3px, 개수 --hm-sw-header-label-outline 1px)이며 탭 토큰이 아닙니다. 탭 class로 색을 덮지 않습니다.
• 공유 토큰(모드 혼합 아님): 뷰어 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 없음). 탭: 비선택 버튼만 글자 --hm-sw-viewer-tab-hover-text·테두리 --hm-sw-viewer-tab-hover-border	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), 선택 박스 없음. 선택 탭: 테두리 --hm-sw-viewer-tab-active-border, 글자 --hm-sw-viewer-tab-active-text, 광택 없음	tone="green" 누르는 동안: 면·테두리 --hm-sw-viewer-panel-primary, 글자 #fff
Checked(스위치)	면 --hm-sw-viewer-switch-on(= --hm-sw-viewer-hover), thumb --hm-sw-viewer-switch-thumb-on(노란색 없음, 2026-10-22)	면 --hm-sw-viewer-panel-switch-on
Focus	2px solid --hm-sw-viewer-accent 외곽선(탭: --hm-sw-viewer-tab-focus-color, 버튼 안쪽 -2px)	버튼·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 아이콘 회전. Label 칸은 표시 가능한 가장 긴 상태 텍스트의 실제 렌더링 너비로 고정되어 상태가 바뀌어도 너비·주변 메뉴 위치가 그대로이며(idle은 아이콘 자리 비움), 공간이 부족하면(측정 단계·파일명 축소 후) 줄어들며 …, 넓어지면 전체 표시(VIEWER.md §2.2)	—

• Typography(뷰어): Header 항목 14px 500, 캡션·개수·상태 11px 400, 패널 필드 라벨 14px 500, Section 제목 12px 700, 패널 버튼·Badge 12px 500, Input 12px. 패널 콘텐츠(2026-10-22): 레이어 이름·속성 행 Label 14px 500, 읽기 전용 속성값 14px(패널 기본 Weight), 설명·Input·Select 값·Placeholder 12px, 별도 font-family 지정 없음(VIEWER.md §4.2). Font Weight는 400/500/700만 씁니다.
• 레이어 Popup 가시성(2026-10-22 필수, 10-21 눈 아이콘 규정 대체): SW Viewer 레이어 Popup에서 레이어별 표시·숨김은 SW Header 레이어 메뉴와 같은 전구 아이콘(SWLayerVisibilityIcon, 20 × 20, 표시 = 색 있는 전구 / 숨김 = 회색) 버튼을 사용한다. 버튼 24 × 24 · radius 4 · Hover 면 rgba(154, 146, 132, .3) · cursor: pointer, 숨긴 행 불투명도 0.45. 전체 레이어 켜기·끄기는 Popup 상단 SWViewerSection title="전체 레이어"(기존 Section 제목) + 같은 줄의 같은 전구 버튼 하나(role="switch", 전체 표시일 때만 켜짐, 행 전구와 세로 정렬). 검색·전체 레이어 행은 고정, 목록만 세로 스크롤; 검색과 전체 레이어 사이 구분선 없음, 전체 레이어 행 아래 1px #d2c8b4(--hm-sw-property-table) + 아래 여백 8px. 개별·전체 표시·숨김은 Switch로 대체하지 않는다(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 자간 -5%(Model 포함, 2026-10-22; 이전 2%), 라벨 700(모든 상태, 2026-10-22; 이름 편집 입력은 400). 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 자산(9-slice, 2026-10-22: 97px·라벨 57px가 최소, 라벨이 길면 사선 21px·모서리 4px는 고정하고 가운데만 늘어남, 라벨 최대 12em), On hover = 베이지 면 + 주황 글자, ×(28, 빨강 사선). Hover(선택 아님, 두 모양 모두, 2026-10-20) = Model과 같은 gra-border-orange 면(사선 탭은 자산 모양 안)만 바뀌고 글자는 Default 그대로(#161410 12px 700, 외곽선 없음, 위치·크기 불변)	--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 자산(왼쪽 사선, 9-slice: 73px 최소, 긴 라벨이면 사선 21px 고정·가운데만 늘어남, 라벨 최대 12em, 2026-10-22), 글자 왼쪽 22. Hover·On = 자산 모양 안 gra-border-orange 면 + 검정 #161410 글자(12px, 외곽선 없음)(2026-10-20 사용자 확정, 이전 Figma On 갈색·흰 글자 대체). 라벨은 모든 상태 700(2026-10-22). 앞 사선 탭과 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를 쓰거나 덮어쓰지 않습니다.