fix(sw): widen the step header text logo to its content

- SWProcessHeader logoText: at least 58px and as wide as the text,
  instead of a fixed 58px place that cut longer words (home >= 106px)
- Align JSDoc (SWHeader, SWViewerHeader, SWProcessHeader) and docs with
  the content-width logo slot: DESIGN_RULES §1 common rule and §14,
  COMPONENT_CATALOG, VIEWER.md, SW Header / Step Header specs
- No prop or public API change

packages/sw/ai/DESIGN_RULES.md

@@ -17,6 +17,7 @@
 | 필드 높이 | 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` |
+| 로고 확장 공통 원칙(`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 | — |
@@ -223,7 +224,8 @@
 
 | 항목 | 값 | 토큰 |
 |---|---|---|
-| 배치 | 홈·파일명 글자 = SWHeader 그대로(두 타입 공통, 2026-11-03): 홈 12 + 로고(32 × 17 → 80) + 36, 파일명은 홈과 15 겹친 뒤 2 간격(x 65), padding 5 / 12, 14px 700·자간 0.06em·SW 외곽선, 화살표 없음(글자 로고 18px 700 → 홈 106) → 프로세스 → Layer 면(객체 면, 양옆 1) → 창 영역(파일명 면 + 테두리 1px) | SW 토큰 |
+| 배치 | 홈·파일명 글자 = SWHeader 그대로(두 타입 공통, 2026-11-03): 홈 12 + 로고(32 × 17 → 80) + 36, 파일명은 홈과 15 겹친 뒤 2 간격(x 65), padding 5 / 12, 14px 700·자간 0.06em·SW 외곽선, 화살표 없음(글자 로고 18px 700, 최소 58px 칸 → 홈 최소 106, 더 긴 글자는 글자 폭만큼 넓어짐) → 프로세스 → Layer 면(객체 면, 양옆 1) → 창 영역(파일명 면 + 테두리 1px) | SW 토큰 |
+| 로고 폭(Process 고유, 2026-11-05) | 공통 원칙은 §1 "로고 확장 공통 원칙". Process 고유: `logoText`만 최소 58px 칸(→ 홈 최소 106), 넓어진 홈만큼 파일명(최소 100)·가운데 영역이 flex 비율로 줄어듦. 로고 변경 시 `default`·`multi`를 각각 확인하고 단계 말줄임 정책은 그대로 둡니다 | SW 토큰 |
 | 프로세스 바탕 | 세로 `#0C5941 → #19BF8D 10.1% → #109069 18.27% → #0C5941`, 파일명 테두리 1px, 위 모서리 6 | `--hm-sw-process-base-background`, `-base-border-gradient` |
 | 비활성 덮개 | `rgba(0, 68, 48, .902)`: 비활성 그룹, 화살표 꼭지(앞 그룹 비활성)·홈(뒤 그룹 비활성), 비활성 바깥 그룹 쪽 남는 폭 | `--hm-sw-process-dim` |
 | 그룹 글자 | 번호 12px 500 `#69C2A6`, 이름 12px(최대 56, 줄바꿈) 활성 700 `#FFF` / 비활성 500 `#C3EBDF`, 위 10.67(한 줄)·8.67(두 줄), 그룹 좌우 20, 이름 뒤 12 | `--hm-sw-process-number-color`, `-group-color`, `-group-active-color` |