feat: integrate latest HMDesign design system updates

docs/guidelines/개발-적용-가이드.md

@@ -1,8 +1,10 @@
 # 개발 적용 가이드 (검토용 개정안)
 
+> 기준 우선순위: 2026-10-10 추가 수정 요청의 확정 사항 → 충돌하지 않는 D-01/D-02 → 현재 HM Component/Pattern/Theme → 현재 Storybook/구현 → 과거 문서. [현재 추가 수정 기준](publisher-additional-review-2026-10-10.md). 미확정 값은 임의 확정하지 않으며 과거 검증 기록은 보존합니다.
+
 페이지 구현 전에 [Navigation Single Mode Policy](navigation-single-mode.md)를 적용한다. AI 코드 생성·제안, 신규/기존 화면, 프로토타입, Production 모두 GNB / LNB / DASHBOARD 중 정확히 하나만 선택한다. 모바일도 같은 체계의 Responsive Variant를 사용하며 별도 요청 없이 Navigation 조합을 생성하거나 제안하지 않는다.
 
-> 대상: 디자인팀과 서비스 개발팀. 현재 UI/CENTER compiled dist build/export, JSON Default/서비스 partial, 공개 Runtime 검증·Global/Scoped Apply와 URL Loader, Storybook JSON Preview, Theme-only artifact 산출이 구현되었다. Registry publish 이력은 테스트 ZIP 검증 범위 밖이며 실제 CDN infrastructure/publish pipeline은 다음 단계다. 테스트 ZIP은 로컬 workspace와 포함 dist를 사용하므로 Registry 접근·publish가 필요하지 않다. 아래 장기 운영 예시의 `@company/ui`는 목표명이며 현재 import는 `@hm-design/ui`다. 현재 실제 API/독립 배포 절차는 [Theme delivery](theme-delivery.md), 디자인팀 workflow는 [Theme guide](designer-theme-guide.md)를 따른다.
+> 대상: 디자인팀과 서비스 개발팀. 현재 UI/CENTER compiled dist build/export, JSON Default/서비스 partial, 공개 Runtime 검증·Global/Scoped Apply와 URL Loader, Storybook JSON Preview, Theme-only artifact 산출이 구현되었다. 현재 테스트 공유는 Git Clone → npm ci → npm run build:packages → npm run storybook(6024)이다. [현재 Git 설치·실행 안내](../../README.md#git-clone-설치실행-현재-테스트-공유-기준)를 먼저 따른다. Registry publish 이력은 Git 테스트 공유 검증 범위 밖이며 실제 CDN infrastructure/publish pipeline은 다음 단계다. Git Clone은 로컬 workspace를 빌드하므로 HM Registry 접근·publish가 필요하지 않다. 아래 장기 운영 예시의 `@company/ui`는 목표명이며 현재 import는 `@hm-design/ui`다. 현재 실제 API/독립 배포 절차는 [Theme delivery](theme-delivery.md), 디자인팀 workflow는 [Theme guide](designer-theme-guide.md)를 따른다.
 
 ## 1. 착수 순서
 
@@ -101,7 +103,7 @@ MVP의 Theme 문서 예시는 다음과 같다. `tokens`는 **선택적 override
 
 ## 6. Storybook 작성·검수 기준
 
-- Story import는 `@company/ui`의 공개 진입점과 기본 CSS를 사용한다. 로컬 내부 파일을 직접 가리켜 패키지 배포 결과와 달라지는 구성을 피한다.
+- 현재 Story import는 `@hm-design/ui`의 공개 진입점과 기본 CSS를 사용한다(`@company/ui`는 장기 운영 목표명). 로컬 내부 파일을 직접 가리켜 패키지 배포 결과와 달라지는 구성을 피한다.
 - 컴포넌트별 공개 props, variant/state, 오류·비활성·로딩, 키보드/포커스 동작을 지원 범위에 맞게 기록한다.
 - 현재 Theme verification Story에서 Default/External과 Runtime 계약을 비교한다. Theme selector toolbar는 없다. Preview는 운영 Publish를 수행하지 않고 패키지 Runtime API를 사용한다.
 - 값 검수는 실제 컴포넌트의 기본/hover/focus/disabled/error 상태, 대비·가독성, 잘림·넘침을 포함한다. Theme 변경이 닿는 Story에 집중한다.
@@ -117,3 +119,29 @@ MVP의 Theme 문서 예시는 다음과 같다. `tokens`는 **선택적 override
 - 컴포넌트 API 변경은 Theme Publish만으로 처리하지 않고 패키지 릴리스와 앱 업데이트로 전달한다.
 
 운영 절차는 [운영/배포 가이드](운영-배포-가이드.md)를 따른다.
+
+## 8. Publisher / Developer 화면 조합 확인
+
+사용 요소는 [Component / Pattern 인덱스](component-pattern-reference.md)에서 선택하고 기존 Component → Variant / Props → Pattern / Composition 순으로 해결한다. 실무 예시의 숫자를 새 공통 규칙으로 만들지 않는다. 이번 사전공유는 Tabs 조합과 디자인 방향에 관한 자료이며 Dashboard·GNB·LNB·Filter·Loading의 새 규격을 제공하지 않는다.
+
+### 8.1 탭 조합과 역할별 간격
+
+| 확인 항목 | 현재 기준 / 실무 주의 |
+|---|---|
+| 탭 콘텐츠의 중첩 박스 | [Tabs §16](../components/tabs.md#16-publisher--developer-조합-안내-2026-10-09). Card 안은 surface, content 페이지 위는 content. TabsContent의 중복 배경·border·좌우 padding 제거 |
+| 역할별 간격 | [PageHeader](../patterns/page-header.md): 제목→설명 8px, 아래 콘텐츠 20px. [기본 Card](../components/card.md): 여백·Header→Content 24px. TabsContent `py-6`는 조합 예시로만 사용 |
+| Typography / Color | [Typography Reference](../../src/foundation/typography.stories.tsx), [Color Reference](../../src/foundation/color.stories.tsx)와 각 Component 문서. CardTitle·PageHeaderTitle·Tab label을 같은 크기로 통일하지 않음 |
+| Spacing / Layout | [Layout Reference](../../src/foundation/layout.stories.tsx). 전역 spacing scale은 미정의. Card 전용 Token·비교 이미지의 48px을 화면 전체 gap으로 재사용하지 않음 |
+| Theme 연결 | 기존 앱 CSS entry의 Tailwind / 공개 HM CSS를 재사용. [소비자 검색 범위](runtime-portability.md#21-tailwind-v4-소비자-검색-범위)를 확인하고 새 utility가 실제 생성되는지 검증 |
+| State | Selected·Inactive·Hover·Focus·Disabled는 기존 Tabs 계약. Empty / Loading / Error는 기존 [Component / Pattern](component-pattern-reference.md)을 조합하고 소비자가 데이터 상태를 관리 |
+| Responsive | 실제 부모의 수축(`min-w-0`)과 문서 넘침 확인. Tabs는 기존 넘침 버튼, [Table](../components/table.md)은 기본 최소 폭 520px·내부 스크롤 유지. 페이지 Navigation은 기존 단일 모드 유지 |
+| Accessibility | tablist 접근 가능한 이름, Trigger / Content value 일치, 연결된 입력 Label, 방향키·Home/End·focus-visible·disabled 건너뛰기 확인. 입력 초안 유지가 필요하면 소비자 상위 state 사용 |
+
+### 8.2 디자인 방향과 실제 반영 상태 구분
+
+- 사전공유 v0.2의 중첩 박스 제거(D-01)는 기존 API만으로 가능하다. TabsContent는 원래 배경·border를 자동 추가하지 않으므로 소비 코드를 조정한다. 고유 Input·Table·Alert 스타일은 제거하지 않는다.
+- 상단 White 80%(D-02)는 사용자의 2026-10-09 실제 구현 요청에 따라 Tabs의 Primary content branch에 반영했다. `background-image` 상단 stop의 alpha만 0.8이며 전체 탭 opacity는 1, Secondary·Legacy·Disabled 상태 규칙은 유지한다. 공통 Palette·Theme JSON을 80%로 바꾸지 않는다. [Theme 사용과 Source 수정](테마-토큰-가이드.md#theme-사용과-theme-source-수정) 및 [Tabs 실제 반영 범위](../components/tabs.md#163-d-02-상단-흰색-80-실제-반영)를 따른다.
+- 대표 Story와 Fill verification 예제 모두 중첩 박스 없는 패널을 사용한다. Legacy Compatibility는 이전 조합 보존 목적이며 신규 운영 디자인 기준으로 사용하지 않는다. AI 화면은 [AGENTS.md](../../AGENTS.md)에 따라 실제 HM React Component를 렌더하며 별도 HTML 모방 화면을 제출하지 않는다.
+- 검증은 최종 통합 단계에서 필요한 빌드·정적 Guard·실제 브라우저 확인을 수행한다. 배경 transparent·border 0·padding 24px 0, 자식 정렬과 고유 스타일, 실제 gradient alpha·전체 opacity, desktop / mobile 넘침과 핵심 동작을 구분해 기록한다. 정적 PASS로 브라우저 확인을 대체하지 않으며 미실행은 `NOT VERIFIED`로 표시한다.
+
+이번 비교 분류·변경 파일·검증 범위는 [사전공유 통합 보고](publisher-integration-2026-10-09.md)를 따른다.