Merge pull request 'refactor(sw): align component sizing tokens and design specs' (#41) from style/sw-size-spec-docs-2026-11-11 into main

Reviewed-on: #41
2026-11-11 13:58:57 +09:00
commit 5ffe56a9aa
@@ -1,5 +1,11 @@
 # Working Context
 ## 2026-11-11 — SW 크기 규격 문서 정합성·기존 토큰 연결 (브랜치 `style/sw-size-spec-docs-2026-11-11`, 미커밋)
 - `packages/sw/ai/DESIGN_RULES.md`: §1 필드 안쪽 여백을 필드별·폭별로 정정(레이어·색상 왼쪽 12, 760~1799 `0 8px`, 760~1079 `0 6px`)하고 속성보기 행 추가. §11 뷰어 Header 굵기 정정(기본 500, 파일명·버튼 라벨·탭 700). §13 좌표 글자 토큰 표기. §16 SW 크기 체계 요약(글자·아이콘·높이·여백·반응형 색인, 새 규격 아님) 추가.
 - CSS(계산값 불변): `.hm-sw-header__properties` 높이 `38px` → `var(--hm-sw-header-field-height)`, `.hm-sw-footer__status` 글자 `12px` → `var(--hm-sw-header-label-size)`. 토큰을 재정의하면 속성보기 상자가 필드와 같은 높이로 따라가며(캡션·행 19px 고정), Footer 좌표 글자가 Header 라벨 크기를 따름.
 - 보류(별도 결정): Popup 값 상자 28px 토큰, 일반 모드 Disabled 투명도 토큰, Step Header 좁은 폭 단계명, Footer 칸 비율, 760 미만 Responsive 예시, pill/인쇄 class 분리, 말줄임 `title`.
 ## 2026-11-11 — SW 공통 안내 문구를 H1 아래로 이동 (미커밋)
 - `withSWNotice`(src/sw/sw-story-notice.tsx)는 `StoryNoticeContext`로 문구만 전달하고, 공통 `StoryPageHeader`가 H1 바로 아래(설명 앞)에 `StoryNotice`를 렌더링. 별도 페이지 프레임(`.sb-page-notice`)은 제거.
@@ -20,7 +20,8 @@
 | 로고 확장 공통 원칙(`SWHeader`·`SWViewerHeader`·`SWProcessHeader`, 2026-11-05) | 세 Header는 같은 로고 칸(`SWHeaderLogo`)과 같은 사선 배경(9-slice)을 씁니다. 홈(로고 면)의 폭·클릭 영역·사선 끝은 로고 내용 폭이 정하며 긴 로고도 잘리지 않고 홈은 줄지 않습니다(옆 영역이 각 Header 규칙대로 줄어듦). 로고·홈에 고정 폭이나 특정 로고 이름별 예외를 추가하지 않습니다. 이미지(`logoSrc`)·SVG는 높이 17·원본 비율, 커스텀 `logo` 요소는 자기 폭 그대로이며 칸은 상자만 17로 제한하므로 글자 요소는 `line-height: 17px`·한 줄로 전달합니다(CSS가 강제하지 않음). 로고 관련 변경 시 `logo`·`logoSrc`(Process는 `logoText`도) 경로와 옆 영역 폭을 Header별로 확인합니다. 높이·여백·겹침·로고 없음 동작·Hover는 Header마다 다르므로 통일하지 않습니다(§11 뷰어, §14 Process) | 위와 같음 |
 | 필드 폭 | 레이어 234, 색상 192, 선스타일 284, 문자·치수스타일 164 | — |
 | 상세보기 / 창 영역 | 157 × 38 / 240 × 48(pill 85 × 42, 창 이동 88, 버튼 32 × 2) | — |
-| 필드 내부 | padding 0 10px 0 11px, 텍스트 사이 12px | — |
+| 필드 내부 | 기본 padding 0 10px 0 11px, 텍스트 사이 12px. 레이어 필드는 왼쪽 12px · 사이 8px(전구 20 + 8), 색상 필드는 왼쪽 12px(선·문자·치수스타일은 기본값). Header 폭 760~1799px에서는 모든 필드 padding 0 8px · 사이 8px, 760~1079px에서는 0 6px · 6px(§7, 미리보기 숨김은 측정 단계) | — |
 | 속성보기(속성Bar / 속성창 토글) | 157 × 38(캡션 19 + 토글 행 19), 위 2px. 상자 높이는 필드 높이 토큰을 따름(2026-11-11, 기본 38px 그대로) — 캡션·행 19px은 고정이라 토큰을 줄이면 캡션이 줄고 늘리면 아래가 빔 | `--hm-sw-header-field-height` |
 ## 2. 색·표면
@@ -175,7 +176,7 @@
 | 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](./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](./VIEWER.md) §4.2). Font Weight는 400/500/700만 씁니다.
+- **Typography(뷰어):** Header 항목 14px — 기본 500, 파일명·버튼 라벨(파일 열기·샘플·전체보기·레이어·설정·속성 등)·Model / Layout 탭 이름은 700(2026-10-20 사용자 요청, `sw-viewer.css`), 캡션·개수·상태 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](./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](./VIEWER.md) §4.1).
 - **뷰어 신규 컴포넌트 체크리스트:** ① VIEWER.md·카탈로그 §9 컴포넌트로 해결되는지 먼저 본다 ② 위 토큰을 `var(--…)`로만 읽고 일반 모드 전용 모양(§8 `SWPopupRow`, §9 `SWToolButton`)을 섞지 않는다 ③ 상태는 위 표대로 ④ 토큰에 없는 값은 결과 보고에 "AI 구성 값 — 디자인 확인 필요"로 적는다 ⑤ `hm-sw-viewer-*` class를 쓰거나 덮어쓰지 않는다.
@@ -221,7 +222,7 @@
 | 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 오른쪽 위). 기록 스크롤바 `thin`, Thumb `#574B30` / Track `transparent`(2026-11-10 개별 토큰, 값 변경 없음) | `--hm-sw-footer-command-*`(스크롤바 `--hm-sw-footer-command-scrollbar-thumb`·`-track`) |
 | 바 안 명령창(실제 화면) | 보조기능 뒤 4px, 바 아래에 붙어 펼치면 위로 270. 남는 폭(바 − 보조기능 영역 − 명령어 전체보기)을 칸 영역 0.57 : 명령창 나머지(최소 280)로 나눔 — 칸 수는 바 폭으로만 계산, 분류의 명령 수와 무관(1920 → 12칸) | `--hm-sw-footer-command-min-width`, `--hm-sw-footer-slot-share` |
-| 좌표(실제 화면) | 바 위 왼쪽, 12px `#F6F4F2` 1px 외곽선, 아래 3px | — |
+| 좌표(실제 화면) | 바 위 왼쪽, 12px(줄 14) `#F6F4F2` 1px 외곽선, 아래 3px. 글자 크기는 Header 라벨 토큰을 따름(2026-11-11, 기본 12px 그대로) | `--hm-sw-header-label-size` |
 | 좁은 폭(실제 화면) | 빈 칸이 먼저 줄고, 넘치는 명령은 마지막 칸 ▲(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 탭 이름 편집 입력의 동작).
@@ -316,3 +317,60 @@ Step Header 전용 토큰(2026-11-10): Step Header 규칙이 칠하는 SWHeader
 ### 15.5 공통 규칙으로 강제하지 않는 사항
 - 단계 수·이름 길이에 따른 말줄임, 선택 단계 최소 폭, 권장 화면 폭, 단계 축소·More·스크롤은 `SWProcessHeader` 고유 검토 항목입니다(현재 동작은 [COMPONENT_CATALOG.md](./COMPONENT_CATALOG.md) 11절 반응형, 검토 기록은 HMDesign 저장소 `docs/sw/sw-process-header-design-spec.md` §12). 다른 Header에 같은 기준을 적용하지 않습니다.
 ## 16. SW 크기 체계 요약 (2026-11-11)
 SW 전용 크기를 한눈에 찾기 위한 색인입니다. 값은 현재 CSS와 위 절의 사용자 확정값을 옮긴 것이며 새 규격이 아닙니다. 값이 다르면 각 절(§1·§3·§7~§14)과 CSS가 기준이고, 이 표에 맞춰 컴포넌트 값을 바꾸지 않습니다. Web·Chart·OrgChart(Admin) 크기 기준과는 별개이며 서로 적용하지 않습니다. 토큰이 없는 값은 컴포넌트 고정값이라 새 UI에서 같은 역할일 때만 그 값을 씁니다(§10, 없으면 [AI_USAGE.md](./AI_USAGE.md) §0.4 ③).
 ### 16.1 글자 크기
 Weight는 400·500·700만 씁니다(§3). 자간 값 0.04em · 라벨 0.02em · 파일명 0.06em.
 | 크기 | 쓰는 곳 | 토큰 |
 |---|---|---|
 | 18px | Process 글자 로고(700) | — |
 | 16px | Process 단계 탭(700), SWHeader 문자스타일 글꼴명 미리보기 | — |
 | 14px | 기본: Header 필드 값·파일명·토글, Popup 제목·행, Footer 측면 버튼·명령 칸 라벨·분류 탭, 뷰어 Header 항목·패널 라벨 | `--hm-sw-header-font-size`, 뷰어 `--hm-sw-viewer-font-size` |
 | 13px | Footer 보조기능 라벨만(Figma) | `--hm-sw-footer-aux-font-size` |
 | 12px | 라벨: Header 필드 라벨·속성 캡션·More 값, Process 번호·그룹명·Layer 라벨, Footer 좌표·Layout 탭·명령창, Popup 단위·`SWSelect`, 뷰어 패널 Section 제목·Input·Badge·설명 | `--hm-sw-header-label-size`, `--hm-sw-footer-tab-font-size`, `--hm-sw-footer-command-font-size` |
 | 11px | 뷰어 Header 캡션·개수·상태만 | `--hm-sw-viewer-label-size` |
 | 10px | Process 파일 없음 표시(`documentEmptyLabel`) | — |
 줄 높이(대표): Header 필드 값 16 · 필드 라벨 14, Footer 명령 칸 라벨·측면 버튼 16 · 좌표·명령창 14, Popup 16, 뷰어 Header 항목·패널 필드 라벨 20. 글자 외곽선은 14·16·18px `--hm-sw-header-text-outline`, 10~12px `--hm-sw-header-label-outline`(§3·§14).
 ### 16.2 아이콘
 | 크기 | 쓰는 곳 |
 |---|---|
 | 16 | 뷰어 Header 항목·파일 열기·상태(`--hm-sw-viewer-icon-size`) |
 | 17 | Footer 보조기능 |
 | 18 | Footer 명령 칸·명령창 화살표·▲, 홈 메뉴 타일 아이콘 슬롯 |
 | 20 | 레이어 상태 아이콘·전구(SWHeader 레이어 필드, Process Layer 필드, 뷰어 레이어 Popup) |
 | 24 | pill 도구 아이콘 영역(인쇄·K 24 × 23, Process 도구 24) |
 창 버튼(32 × 48)·창 이동·제목 아트처럼 이미지 자산 크기가 정한 아이콘은 이 체계에 맞추지 않습니다.
 ### 16.3 높이 — 바·조작 요소
 | 면 | 높이 | 토큰·출처 |
 |---|---|---|
 | Header 바 | SWHeader·Process 49(면 48), 뷰어 52, Footer 72 | `--hm-sw-header-height`·`-bar-height`, `--hm-sw-viewer-height`, `--hm-sw-footer-height` |
 | 어두운 면 조작 요소 | pill 외곽 42(버튼 40 × 38), 뷰어 탭 컨테이너 42, 뷰어 컨트롤 40, 필드·속성보기 38, 뷰어 버튼 34, Process 단계 탭 32(multi 25), 뷰어 Dropdown 항목 36 | `--hm-sw-header-field-height`, `--hm-sw-viewer-tabs-height`·`-control-height`·`-button-height`·`-menu-item-height`, §9·§14 |
 | Footer | 측면 버튼 71, 명령 칸 47, 보조기능 33, 분류 행 24, Layout 탭 22, 명령창 입력 23 | §13 |
 | 밝은 Popup·패널 | 제목줄 30, 행 최소 32, 값 상자·`SWSelect`·뷰어 Input 28, 뷰어 패널 아이콘 버튼 26, 레이어 전구 버튼 24, Badge 22, `SWSlider` 16 | §8·§11 (값 상자 28px은 토큰 없음) |
 ### 16.4 여백·간격
 | 영역 | 값 |
 |---|---|
 | SWHeader | 면 사이 2, 필드 사이 4(`--hm-sw-header-gap`), 객체 면 위아래 4, 필드 안쪽은 §1 |
 | 뷰어 Header | 그룹·항목 사이 4(`--hm-sw-viewer-gap`), 버튼 안쪽 6 / 14 · 아이콘–글자 8, 탭 이름–개수 14(`--hm-sw-viewer-tab-gap`) |
 | Popup(`SWPopup`) | 본문 7, 그룹 사이 8, 행 좌우 6 · 라벨–값 8, 값 상자 좌우 7 |
 | 뷰어 패널 | 섹션 간격 12(`--hm-sw-viewer-panel-spacing`) |
 | Footer | 보조기능 사이 2, 보조기능 영역 뒤 4 |
 ### 16.5 반응형 원칙
 - 기준값을 컴포넌트끼리 통일하지 않습니다. 각 컴포넌트가 자기 폭(Container 또는 실측)으로 판단합니다: SWHeader §7(760 이상 공간 분배, 760 미만 Breakpoint·실측 More, 파일명 최소 96), 뷰어 [VIEWER.md](./VIEWER.md)(실측 3단계 — 아이콘만 → More, 파일명 최소 56), Process §14·§15.5(비례 축소와 `…`, More·스크롤 없음, 파일명 최소 100), Footer §13(빈 칸 → ▲ 패널, 1279px 이하 보조기능 아이콘만, 분류 탭 ◀ ▶).
 - Header 계열과 홈 메뉴는 가로 스크롤 없이 단계·More·말줄임으로 공간을 줄입니다(Footer 분류 탭만 잘림 + ◀ ▶).
 - 좁은 폭에서도 조작 요소 높이(§16.3)와 글자 크기(§16.1)는 유지하고, 간격·미리보기·텍스트 폭·표시 항목 수(More·아이콘만·명령 칸 수)로 공간을 맞춥니다(현재 구현). 모든 요소를 일괄로 작게 만들지 않습니다.
@@ -158,7 +158,7 @@
 .hm-sw-footer[data-command] .hm-sw-footer__group { flex: 0 1 auto; }
 .hm-sw-footer[data-command] .hm-sw-footer__trailing { flex: 0 0 auto; }
 /* Status text above the bar, left (cursor coordinates in the reference screen). */
-.hm-sw-footer__status { position: absolute; left: 0; bottom: 100%; z-index: 1; padding: 0 0 3px 2px; font-size: 12px; line-height: 14px; color: var(--hm-sw-footer-text); white-space: nowrap; text-shadow: var(--hm-sw-header-label-outline); }
+.hm-sw-footer__status { position: absolute; left: 0; bottom: 100%; z-index: 1; padding: 0 0 3px 2px; font-size: var(--hm-sw-header-label-size); line-height: 14px; color: var(--hm-sw-footer-text); white-space: nowrap; text-shadow: var(--hm-sw-header-label-outline); }
 /* Bar-level guide: 4px above the empty slot (which starts 2px below the bar top). */
 .hm-sw-footer > .hm-sw-footer__guide { bottom: calc(100% + 2px); }
@@ -1328,7 +1328,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
  flex-direction: column;
  flex: 0 0 157px;
  width: 157px;
-  height: 38px;
+  height: var(--hm-sw-header-field-height);
  margin: 2px -1px 0 auto;
 }
 .hm-sw-header__properties-caption {