docs(design): v2.8 on-accent token and filled-button white text rule

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs/design.md

@@ -1,6 +1,6 @@
-# 킨텍스 AI 전시관리 시스템 — UI 디자인 스펙 (design.md)
+# 킨텍스 AI 전시관리 시스템 — UI 디자인 스펙 (design.md)
 
-> 작성: 디자인 에이전트(designer) · 작성일: 2026-07-23 · 버전: **v2.7**
+> 작성: 디자인 에이전트(designer) · 작성일: 2026-07-14 · 최종 갱신: 2026-07-23 · 버전: **v2.8**
 > 근거 문서: `docs/PLANNING.md` **v3.0**(모듈 맵 M1~M18 + §5B 공통/시스템관리 레이어 + §1A 멀티테넌시, 6+2 역할, 나노바나나 표준 샷 세트 S1~S7) · `docs/FEATURE_BACKLOG_100.md`(100대 기능 F001~F100·NFR 4축) · Stitch 산출물 `stitch_kintex_ai_system_architect/`(18화면 + DESIGN.md 3변형) 학습·정합
 > **단일 출처(Single Source of Truth)**: 프론트 구현 토큰·컴포넌트 계약은 본 문서가 권위다. Stitch 화면(code.html/screen.png)은 시각 참조로만 사용하며, 상충 시 본 문서를 따른다.
 > 용도: **각 화면의 "Stitch 프롬프트" 코드블록을 Google Stitch(stitch.withgoogle.com)에 그대로 붙여넣어 화면을 생성**한다. 문서는 한국어, Stitch 프롬프트만 영어.
@@ -26,6 +26,7 @@
 | `primary-100` | `#D9EAF7` | 선택 배경, 활성 사이드바 항목 |
 | `primary-050` | `#EFF6FC` | 페이지 서브 배경, 테이블 호버 |
 | `ai-accent` | `#6D4AFF` | **AI 액션 전용** — "AI 자동배치", "예상 사진 생성" 버튼, AI 라벨 |
+| `on-accent` | `#FFFFFF` | **유색(filled) 배경 위 텍스트 전용(v2.8)** — primary·ai-accent·success·warning·error 등 배경색이 채워진 버튼/배지/칩의 글자색. **다크모드에서도 항상 흰색 유지**(구현 정합: 프론트 기구현 토큰 `--color-on-accent`, `src/frontend/src/styles/tokens.css` — `--color-white`는 다크에서 서피스로 반전되므로 유색 배경 글자엔 이 토큰만 사용) |
 | `success` | `#0E8A5F` | 승인 완료, 규정 통과, 결제 완료 |
 | `warning` | `#B45309` | 마감 임박(D-3 이내), 확인 필요 플래그 |
 | `error` | `#D92D20` | 규정 위반, 반려, 마감 초과 |
@@ -39,7 +40,9 @@
 | 배선-네트워크 | `#3B82F6` | S6 오버레이: 네트워크/전화 경로 (청) |
 | 배선-급배수 | `#22C55E` | S6 오버레이: 급배수·압축공기 경로 (녹) |
 
-명도 대비는 WCAG AA 이상: 본문 텍스트는 `neutral-700` 이상, 컬러 배경 위 텍스트는 흰색(`#FFFFFF`) 고정. `warning`·`error`는 텍스트 사용 시 위 표의 진한 값만 사용.
+명도 대비는 WCAG AA 이상: 본문 텍스트는 `neutral-700` 이상, 컬러 배경 위 텍스트는 흰색(`on-accent #FFFFFF`) 고정. `warning`·`error`는 (밝은 배경 위) 텍스트 사용 시 위 표의 진한 값만 사용.
+
+**유색 배경 버튼 = 흰색 텍스트 (소유자 확정 규칙 2026-07-15 — v2.8)**: **배경색이 채워진(filled/solid) 버튼은 텍스트를 항상 흰색 계열(`on-accent #FFFFFF`)로 한다** — `primary-600` 주 버튼, `ai-accent` AI 버튼, `success`/`warning`/`error` 상태 버튼 등 유색 배경 전부에 적용(라이트·다크 공통 — `--color-on-accent`는 다크에서도 흰색 유지). **outline·ghost·텍스트(tertiary) 버튼은 해당 없음**(투명/흰 배경이므로 자기 색 텍스트 — 예: outline은 `primary-600` 글자). 배지·칩·솔리드 배너 등 유색 채움 서피스의 글자도 동일 원칙.
 
 > **Stitch 실증 정합(v1.1)**: Stitch가 생성한 3개 디자인 변형 중 **Precision Enterprise AI** 변형이 위 토큰을 그대로 검증했다 — `primary-container #0066B3`(우리 `primary-600`), 캔버스 `#1C2536`, AI 액센트 `#6D4AFF`, `error #D92D20`, 배경 `#F9FAFB`, 본문 `#101828`, 카드 테두리 `#E4E7EC`가 실제 code.html(`booth_layout_editor` 등 시공 화면 전체)에 반영됨. StatusBadge 진행(회색→파랑→**보라(AI)**→녹색→빨강)도 동일. 나머지 2개 변형(Intelligence·Nexus)은 더 짙은 헤리티지 블루 `#0059A6`/`#00427D`를 primary로 채택했는데, 이는 우리 `primary-700 #004C86`보다 약간 짙다. **결론: 우리 `docs/design.md`가 프론트 구현의 단일 출처이며 `#0066B3`를 주 브랜드 블루로 유지한다.** `#0059A6`·`#00427D`는 헤더/hover의 짙은 대체 톤으로만 허용(신규 토큰 추가 금지). Intelligence 변형의 `ai-surface #F5F3FF`(옅은 보라 배경)는 AI 구동 섹션 배경으로 채택 가능 — 우리 `primary-050`과 별개로 AI 카드 배경에 한해 사용.
 
@@ -53,6 +56,7 @@
 
 ### 1-4. 컴포넌트 원칙
 
+- **버튼(Button) 텍스트 색(v2.8 — 소유자 지시 2026-07-15)**: 변형 4종 — **Primary(파랑 채움)·AI(보라 채움)·상태(success/warning/error 채움)는 텍스트 `on-accent`(흰색) 고정**, Secondary Outlined·Ghost·텍스트 버튼은 자기 색 텍스트(§1-2 규칙 참조). Disabled는 회색 배경+`neutral-500` 텍스트. 구현은 `--color-on-accent` 토큰 사용(하드코딩 `#fff`·`--color-white` 금지 — 다크모드 반전 사고 방지).
 - **상태 배지(StatusBadge)**: 신청 흐름 `작성중(회색)→제출됨(파랑)→AI검토(보라)→승인(녹색)→반려(빨강)→시공중→검수완료`. 모든 목록·카드에 동일 배지 사용.
 - **D-데이 칩(DdayChip)**: `D-25`, `D-7` 등 마감 역산 칩. D-3 이내 `warning`, 초과 `error`.
 - **AI 라벨**: 보라(`ai-accent`) 외곽선 칩 "AI 초안", "AI 생성 이미지". 생성 이미지는 카드 하단에 고지문 "AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있음"을 항상 노출(제거 불가).
@@ -546,11 +550,19 @@ An enterprise dashboard for an exhibition organizer, part of "KINTEX AI 전시
 - **대상**: 주최자 (홀매니저 읽기 전용) · **진입 경로**: 대시보드 → 플로어플랜 스튜디오 / AI 자동배치 위저드 ③단계 "이 안으로 편집 시작"(apply-option 저장 완료 후 캔버스 진입 — SCR-04)
 - **레이아웃**:
   1. 상단 툴바: **홀 선택 셀렉트**(전시장별 optgroup 그룹핑 — "제2전시장 · 홀7", 변경 시 해당 홀 배치 라우트로 전환, v2.6 M2-1 정합), 배치안 버전 드롭다운("배치안 B v3"), 저장 상태, **보라색 AI 버튼 "AI 자동배치"(클릭 시 3단계 위저드 다이얼로그 오픈 — 아래 M2-1 절)**, "규정 검증 실행", "홀 전경 생성(S7)", 공유
-  2. 좌측 도구 패널(240px): **도면 툴그룹(JPG / DWG 탭 — 디폴트 = DWG, v2.7 세션 6)**, **부스 팔레트**(표준 규격 선택/드래그: 기본 3×3m / 프리미엄 6×3m / 아일랜드 — 카드 클릭 선택 후 캔버스 드래그앤드롭 배치), 시설 요소(무대·라운지·주출입구), 레이어 토글(트렌치 그리드 / 기둥·셔터·비상구 / 위반 오버레이)
-  3. **중앙 캔버스(다크 `#1C2536`)**: **실측 홀 도면 JPG를 배경으로 로드하고, 도면 내 전시 바닥면 캘리브레이션 영역(FLOOR_REGIONS 분율 좌표 — 구현 정본 `hallFloorplan.ts`)에 홀 좌표계(홀7 기준 126×90m, 축척 표시)를 정렬**해 부스 폴리곤이 **평면도 안에** 표시·드래그앤드롭된다(도면 없는 추상 캔버스에 배치 후 도면 덧그리기 금지 — PLANNING v3.5 M2-1 원칙 1). 부스는 파란 채움+부스번호, 선택 시 핸들. 트렌치 그리드는 점선, 비상구는 녹색 아이콘. **위반 오버레이**: 통로 폭 미달 구간 빨간 반투명 밴드 + 번호 핀(차단 2건 — 핀 1·2), 바닥하중 초과 부스 주황 빗금(경고 3건 — 핀 3·4·5) — 우측 [검증] 탭 요약 "차단 2 · 경고 3"과 핀이 1:1 일치(v2.5 B-07 정정)
+  2. 좌측 도구 패널(240px): **도면 툴그룹(JPG / DWG 탭 — 디폴트 = DWG, v2.7 세션 6 — 아래 "도면 언더레이" 절)**, **부스 팔레트**(표준 규격 선택/드래그: 기본 3×3m / 프리미엄 6×3m / 아일랜드 — 카드 클릭 선택 후 캔버스 드래그앤드롭 배치), 시설 요소(무대·라운지·주출입구), 레이어 토글(트렌치 그리드 / 기둥·셔터·비상구 / 위반 오버레이)
+  3. **중앙 캔버스(다크 `#1C2536`)**: **실측 홀 도면(JPG 또는 DWG)을 배경 언더레이로 로드하고, 도면 내 전시 바닥면 캘리브레이션 영역(분율 좌표 — 구현 정본 `hallFloorplan.ts` FLOOR_REGIONS·DWG_HALL_DIMS)에 홀 좌표계(홀7 기준 126×90m, 축척 표시)를 정렬**해 부스 폴리곤이 **평면도 안에** 표시·드래그앤드롭된다(도면 없는 추상 캔버스에 배치 후 도면 덧그리기 금지 — PLANNING v3.5 M2-1 원칙 1). 부스는 파란 채움+부스번호, 선택 시 핸들. 트렌치 그리드는 점선, 비상구는 녹색 아이콘. **위반 오버레이**: 통로 폭 미달 구간 빨간 반투명 밴드 + 번호 핀(차단 2건 — 핀 1·2), 바닥하중 초과 부스 주황 빗금(경고 3건 — 핀 3·4·5) — 우측 [검증] 탭 요약 "차단 2 · 경고 3"과 핀이 1:1 일치(v2.5 B-07 정정)
   4. 우측 패널(360px) 탭 2개: [속성] 선택 부스 좌표·크기·타입·배정 업체 / [검증] 위반 목록 카드(핀 번호, 규정 근거 "피난 통로 3m 미만", 심각도, "위치 보기") + 요약 "차단 2 · 경고 3"
-  5. 하단 상태 바: 부스 수 486/510 · 판매 면적 · 줌 컨트롤
+  5. 하단 상태 바: 부스 수 486/510 · 판매 면적 · 줌 컨트롤(현재 배율 % + 리셋)
 - **플로어플랜 표준 확정(v2.7 — 세션 6 소유자 확정)**: ①**도면 탭 디폴트 = DWG** — 좌측 도면 툴그룹은 JPG/DWG 2탭이며 **기본 선택은 DWG**(CAD 렌더 PNG `/media/floorplans/dwg/hall{1~10}.png`, 미보유 홀은 탭 비활성·JPG 폴백). ②**부스 팔레트** — 표준 규격 카드를 클릭해 선택하고 캔버스로 드래그앤드롭 배치(규격은 마스터 부스표준 기준). ③**평면도 확대 팝업(`.kx-floorplan-lightbox`, 신설)** — 캔버스 상단 "확대" 버튼(또는 도면 더블클릭) 시 **대형 모달**로 현재 도면(DWG/JPG)을 크게 열람(`role="dialog"` `aria-modal`, 배경 클릭·Esc 닫기, 모달 내 휠 줌·드래그 이동). AI 자동배치 완료 결과도 이 확대 팝업에 우선 표시(아래 SCR-04 AI UX 참조).
+- **도면 언더레이 — JPG/DWG 탭 (v2.7 신설 — 구현 정본 `BoothLayoutEditorPage.tsx`·`hallFloorplan.ts`)**: 좌측 도구 패널 "도면" 그룹에 언더레이 소스 전환 **탭 2개**(`role="tablist"`)를 둔다. 부스 배치가 어떤 도면 위에서 그려지는지를 사용자가 선택한다. **기본 선택 = DWG**(세션 6 소유자 확정 — 위 "플로어플랜 표준 확정" ① 참조), DWG 미보유 홀은 JPG 폴백.
+  - **JPG 탭**: 킨텍스 공개 크롤본 홀 도면 JPG(`/media/floorplans/hall{n}.jpg`, 빌드 내장). 도면 여백·범례·미니맵을 포함하므로 전시 바닥면 채색 영역(제1전시장 연노랑·제2전시장 라임그린)의 분율 좌표(`FLOOR_REGIONS`)에 홀 사각형을 정렬한다. 전 홀(H1~H10) 보유.
+  - **DWG 탭(기본값)**: CAD(DWG) 원본에서 홀 바닥면만 3m 여백으로 정확 크롭 렌더한 실측 도면 PNG(`/media/floorplans/dwg/hall{n}.png`). 렌더 파라미터에서 캘리브레이션이 결정적으로 산출되므로(`region = [m/(W+2m), …]`, m=3) JPG보다 정밀. **미보유 홀은 탭 비활성(disabled)** + 툴팁 "이 홀은 CAD 렌더 준비 중". 현 시점 제1전시장(**K1** — H1~H5, 축정렬) 렌더 완료분 노출, 제2전시장(**K2** — H6~10)은 CAD 원본상 홀이 기울어 배치돼 렌더 시 회전 보정(H6 −12°·H9 −11°·H10 +11°·H7/H8 축정렬) 적용(근거 `docs/analysis/cad-extraction.md §K2`).
+  - **동작**: 탭 전환 시 캔버스 언더레이 이미지·캘리브레이션 영역이 즉시 교체되고 부스 좌표는 불변(같은 홀 좌표계). DWG 미보유 홀 선택 시 자동으로 JPG로 폴백. 도면 로드 실패 시 언더레이 없이 다크 서피스만 렌더(부스·격자는 유지 — `onError` 폴백).
+- **캔버스 팬·줌 인터랙션 (v2.7 신설 — 소유자 지시 2026-07-14, 구현 정본 `FloorplanCanvas.tsx`)**: 대형 홀 도면 위 정밀 배치를 위해 캔버스에 **팬(드래그 이동)·줌**을 제공한다.
+  - **줌**: 마우스 휠 위/아래로 확대/축소(휠 스텝 배율, 하한~상한 클램프), 배율은 하단 상태 바 줌 컨트롤(% 표시·리셋)과 양방향 동기(`onZoomChange`). 휠 이벤트는 페이지 스크롤을 억제(`preventDefault`).
+  - **팬**: 캔버스 빈 영역 좌클릭 드래그로 이동(`transform: translate + scale`), 드래그 중 커서 `grabbing`. **드래그 임계값(threshold) 초과 시에만 팬으로 판정**하고, 팬 직후 따라오는 click은 캡처 단계에서 차단해 **부스 선택/해제 오발을 방지**한다(미세 클릭과 드래그 구분).
+  - **접근성**: 캔버스 `role="img"` + `aria-label`(홀 치수·부스 수). 팬/줌은 마우스 보조 인터랙션이며 부스 선택·검증 등 핵심 조작은 팬 없이도 가능.
 - **상태**: AI 자동배치 생성 중 — **위저드 다이얼로그 내 진행 화면**("제약조건 풀이 중… 복수 안 생성" — 캔버스 오버레이 아님, v2.6 정정) · 검증 통과 시 녹색 배너 "위반 0건 — 제출 가능" · 빈 캔버스 — "AI 자동배치(3단계 위저드)로 시작하세요" CTA(위저드 ①단계 진입).
 - **M2-1 자동배치 3단계 위저드 진입 모드 (v2.6 신설 — PLANNING v3.5 M2-1 정합, 구현 정본 `AutoLayoutDialog.tsx`)**: 위저드는 SCR-03의 **진입 모드**(모달 다이얼로그 `.kx-auto`)로 편입 — 배치 미존재 시 ①단계부터 시작, 기존 배치 존재 시 캔버스 직행(+툴바 "AI 자동배치"로 위저드 재실행). 단계 표시기(`① 어디에 → ② 조건 → ③ 배치안 선택`, 완료 단계 체크 표시) 공통.
   - **① 어디에**: **셀렉트 3단 캐스케이드** — 대분류(전시장: 제1/제2전시장) > 중분류(홀 H1~H10, 라벨에 실측 치수 "…— 63×171m" 병기) > 소분류(구역, 기본값 **"홀 전체"**). 소스 = `GET /api/halls/tree`(V60 `hall_zone` 계층). 상위 변경 시 하위 초기화. 트리 로드 실패 시 degraded 노트("⚠ 평면도 목록을 불러오지 못해 현재 홀 기준으로 진행합니다")로 계속 진행. 액션: "취소" / "다음 — 조건 입력".
@@ -559,7 +571,7 @@ An enterprise dashboard for an exhibition organizer, part of "KINTEX AI 전시
 - **Stitch 프롬프트**:
 
 ```
-A professional floor plan editor screen for exhibition booth layout, in a Korean B2B web app "KINTEX AI 전시관리". Desktop 1440px. All UI text in Korean. Three-column editor layout. Top toolbar: a hall selector dropdown "제2전시장 · 홀7" (grouped by exhibition center), version dropdown "배치안 B · v3", autosave label "저장됨", a distinctive purple #6D4AFF button with sparkle icon "AI 자동배치", outlined buttons "규정 검증 실행" and "홀 전경 생성", and an icon button with a share icon labeled "공유" at the right end of the toolbar. Left tool panel 240px on white: a "도면" tool group with two tabs "JPG / DWG" where the DWG tab is selected by default (a crisp CAD-rendered hall floor plan), a booth palette with small square previews to pick and drag onto the canvas ("기본 부스 3×3m", "프리미엄 6×3m", "아일랜드 부스"), facility items ("무대", "라운지", "주출입구"), and layer toggles with switches ("트렌치 그리드", "기둥·비상구", "위반 오버레이" turned on). Center: large dark navy canvas #1C2536 with an "확대" (expand) icon button at its top-right corner that opens a large full-screen modal of the drawing; the canvas shows the DWG-rendered top-down exhibition hall floor-plan as the base layer, with the booth layout aligned inside the drawing's exhibition floor area (hall outline 126×90m with scale ruler) — dozens of small blue booth rectangles arranged in rows with white booth numbers like "A-101" sitting inside the floor plan, dashed grid lines for floor trenches, green emergency-exit icons on walls; overlay violations: two semi-transparent red bands across an aisle with numbered red pins "1", "2", and three booths hatched in orange with numbered orange pins "3", "4", "5". Right panel 360px with two tabs "속성 | 검증", showing the 검증 tab: summary chips "차단 2 · 경고 3", a list of violation cards each with pin number, red or orange severity dot, Korean text like "피난 통로 폭 3m 미만 (규정 §4.2)" and a small link "위치 보기". Bottom status bar: "부스 486 / 510 · 판매면적 4,374㎡ · 100%" with zoom controls. Dense engineering-tool aesthetic, light UI chrome around a dark canvas.
+A professional floor plan editor screen for exhibition booth layout, in a Korean B2B web app "KINTEX AI 전시관리". Desktop 1440px. All UI text in Korean. Three-column editor layout. Top toolbar: a hall selector dropdown "제2전시장 · 홀7" (grouped by exhibition center), version dropdown "배치안 B · v3", autosave label "저장됨", a distinctive purple #6D4AFF button with sparkle icon "AI 자동배치", outlined buttons "규정 검증 실행" and "홀 전경 생성", and an icon button with a share icon labeled "공유" at the right end of the toolbar. Left tool panel 240px on white: a "도면" tool group with two tabs "JPG / DWG" where the DWG tab is selected by default (a crisp CAD-rendered hall floor plan), a booth palette with small square previews to pick and drag onto the canvas ("기본 부스 3×3m", "프리미엄 6×3m", "아일랜드 부스"), facility items ("무대", "라운지", "주출입구"), and layer toggles with switches ("트렌치 그리드", "기둥·비상구", "위반 오버레이" turned on). Center: large dark navy canvas #1C2536 with an "확대" (expand) icon button at its top-right corner that opens a large full-screen modal of the drawing; the canvas shows the DWG-rendered top-down exhibition hall floor-plan as the base layer, with the booth layout aligned inside the drawing's exhibition floor area (hall outline 126×90m with scale ruler) — dozens of small blue booth rectangles arranged in rows with white booth numbers like "A-101" sitting inside the floor plan, dashed grid lines for floor trenches, green emergency-exit icons on walls; the canvas supports pan and zoom (a subtle "grab" cursor hint and a zoom percentage indicator); overlay violations: two semi-transparent red bands across an aisle with numbered red pins "1", "2", and three booths hatched in orange with numbered orange pins "3", "4", "5". Right panel 360px with two tabs "속성 | 검증", showing the 검증 tab: summary chips "차단 2 · 경고 3", a list of violation cards each with pin number, red or orange severity dot, Korean text like "피난 통로 폭 3m 미만 (규정 §4.2)" and a small link "위치 보기". Bottom status bar: "부스 486 / 510 · 판매면적 4,374㎡ · 100%" with zoom controls. Dense engineering-tool aesthetic, light UI chrome around a dark canvas.
 ```
 
 ---
@@ -727,9 +739,10 @@ A document review detail screen for a hall manager inspecting a booth constructi
 
 ### SCR-12 시각화 갤러리 (S1~S7 렌더 관리) [M5]
 
-- **대상**: 참가업체·주최자·장치업체 · **진입 경로**: 부스 홈/스튜디오 → "시각화 갤러리"
+- **대상**: 참가업체·주최자·장치업체 · **진입 경로**: 부스 홈/스튜디오 → "시각화 갤러리" / SCR-04 위저드 "생성한 조감 이미지는… 시각화 갤러리에서 다시 보거나…" 안내 링크
+- **홀 조감(S7) 스코프 (v2.7 명문화 — M2-1 원칙 4)**: SCR-04 위저드에서 온디맨드 생성한 **홀 전경 조감(S7)은 `render_job` 영속 후 본 갤러리에서 `boothRef=HALL-{hallId}` 필터로 재열람**된다(부스 단위 S1~S6과 동일 갤러리 체계 — 부스 스코프 대신 홀 스코프). 헤더 스코프 전환에 부스(예: "부스 A-102")뿐 아니라 **홀(예: "홀7 조감")** 스코프를 포함하며, 홀 스코프 선택 시 S7 카드가 필터된다. 갤러리 라이트박스에서 다운로드한 이미지·`aiImageUrl`은 M15 공사 옥션 자료 패키지(`MaterialPackage.aiImageUrl`) 참고 이미지로 재사용된다(일회성 미리보기로 휘발 금지).
 - **레이아웃**:
-  1. 헤더: 부스/행사 스코프 전환 + 샷 필터 칩(S1 정면 · S2 야간 · S3 통로 · S4 내부 · S5 Before/After · S6 배선 오버레이 · S7 홀 전경) + 정렬(최신)
+  1. 헤더: 부스/홀/행사 스코프 전환 + 샷 필터 칩(S1 정면 · S2 야간 · S3 통로 · S4 내부 · S5 Before/After · S6 배선 오버레이 · S7 홀 전경) + 정렬(최신)
   2. 마소너리 이미지 그리드: 카드 = 이미지(워터마크 상시), 샷 배지, 설계 버전 태그("설계 v2"), 생성일, 상태(완료/생성 중/실패). 생성 중 카드는 진행 배지, 실패는 재시도
   3. 라이트박스: 원본 + 메타데이터(생성일·스키마 해시·모델 버전) + 다운로드 + "이 컷 다시 생성". S5는 라이트박스에서 슬라이더로 열림
   4. 상단 고정 안내 바: "생성 이미지는 계약·심사 서류에 사용할 수 없습니다 (시공 기준은 도면)"
@@ -1959,7 +1972,8 @@ A mobile "my ticket wallet" screen for an exhibition visitor, 390px width, light
 1. stitch.withgoogle.com에서 새 프로젝트 생성 → 플랫폼은 웹 화면(SCR-01~51·SCR-A*·SCR-P*)은 Desktop, 모바일(SCR-M1~M15)은 Mobile 선택. 공개사이트(SCR-P*)는 마케팅 톤·넓은 히어로로, 관리자(SCR-A*)는 밀도 높은 백오피스 톤으로 생성한다.
 2. 화면당 위 코드블록 프롬프트 1개를 그대로 붙여넣어 생성 — 프롬프트에 색상·레이아웃·예시 데이터가 포함되어 있어 추가 지시 없이 1회 생성이 기준.
 3. 결과 보정은 짧은 추가 지시로: 예) "Make the right quote panel 340px and sticky". 한국어 텍스트가 깨지면 "Keep all labels in Korean exactly as given" 재지시.
-4. 생성 화면은 Figma로 내보내 디자인 시스템 토큰(§1)과 대조 후 조정한다.
+4. **글로벌 스타일 지침(전 화면 공통 — 프롬프트에 1회 부가, v2.8)**: 각 프롬프트 뒤에 다음 문장을 덧붙이거나, 생성 결과에서 위반 시 재지시한다 — `"All filled buttons and solid colored chips/badges (blue, purple, green, amber, red backgrounds) must use white text; only outlined, ghost and text buttons use colored text."` (§1-2 유색 배경 버튼 = 흰색 텍스트 규칙. 개별 화면 프롬프트를 일괄 수정하지 않고 이 지침으로 통제한다.)
+5. 생성 화면은 Figma로 내보내 디자인 시스템 토큰(§1)과 대조 후 조정한다.
 
 ---
 
@@ -1967,7 +1981,9 @@ A mobile "my ticket wallet" screen for an exhibition visitor, 390px width, light
 
 | 버전 | 일자 | 작성자 | 내용 |
 |---|---|---|---|
+| **v2.8** | 2026-07-15 | designer | **"버튼 배경색이 있는 것은 텍스트 흰색계열 적용" 규칙 명문화(소유자 지시 2026-07-15).** ①**§1-2 컬러 팔레트**에 `on-accent #FFFFFF` 토큰 행 순증 — 유색(filled) 배경 위 텍스트 전용, **다크모드에서도 항상 흰색 유지**(신규 발명 아님 — 프론트 기구현 `--color-on-accent`(`src/frontend/src/styles/tokens.css`·OWNER_FEEDBACK 7.1/7.2 기배포)와 문서 정합. `--color-white`는 다크에서 서피스 반전되므로 유색 배경 글자엔 on-accent만 사용) + WCAG 문단 아래 **"유색 배경 버튼 = 흰색 텍스트" 확정 규칙 문단 신설**: primary-600·ai-accent·success/warning/error 등 채움(filled/solid) 버튼 전부 텍스트 `on-accent` 고정(라이트·다크 공통), **outline·ghost·텍스트(tertiary) 버튼은 해당 없음**(자기 색 텍스트), 유색 채움 배지·칩·솔리드 배너 동일 원칙. ②**§1-4 컴포넌트 원칙**에 "버튼(Button) 텍스트 색" 항목 신설 — 변형별 규정(채움 4계열=on-accent 흰색 / Outlined·Ghost·텍스트=자기 색 / Disabled=회색+neutral-500) + 구현 시 `--color-on-accent` 토큰 사용·하드코딩 `#fff`/`--color-white` 금지(다크 반전 사고 방지). ③**§5 Stitch 사용 가이드**에 글로벌 스타일 지침 1회 명시(4번 항목 신설) — 전 화면 프롬프트 공통 부가 문장 `"All filled buttons and solid colored chips/badges … must use white text; only outlined, ghost and text buttons use colored text."`(개별 화면 프롬프트 일괄 수정 없이 지침으로 통제·위반 시 재지시). ④상충 문구 전수 점검 — 화면 스펙·Stitch 프롬프트에 유색 배경 버튼에 어두운 텍스트를 지시하는 문구 **0건 확인**(정정 대상 없음, 기존 프롬프트 무수정). 화면 스펙·SCR 번호·타 절 무수정·PLANNING.md·src 무수정 |
 | **v2.7** | 2026-07-23 | designer | **세션 6 시연 준비 소유자 확정 사항 반영(`docs/OWNER_FEEDBACK.md` 세션 6). 순증·정정만(신규 컬러 토큰 0·전면 재작성 없음·PLANNING/src 무수정).** ①**§1-4A 전역 컴포넌트 표준 신설(G1~G6)**: G1 Nifty 문자 그대로/Stitch 산출물 우선 이식(강피드백 — `DESIGN_SYSTEM_NIFTY.md`), G2 전 페이지·섹션 타이틀 앞 선 SVG 아이콘 의무(`icons.tsx`·이모지 금지), G3 모든 그리드 PDF 출력 버튼(JasperReports 범용 `grid-pdf`), G4 목록 위젯 10줄 프리뷰+"전체보기(N)", G5 목록/피드/타임라인 오버플로 `minmax(0,1fr)`, G6 유색 배경 버튼 글자 `--color-on-accent`(흰색) 전역. ②**SCR-51·SCR-01**: 2차 인증(OTP) 로고 = 방패 아이콘 → **KINTEX 워드마크 32px**(`.kx-otp__logo`, OtpSetup·OtpChallenge 공통), Stitch 프롬프트 갱신. ③**SCR-HOME**: 내 할 일·공지·최근 활동 목록 위젯을 10줄+전체보기(N)·`minmax(0,1fr)` 표준으로 갱신(6행/5건→10줄). ④**SCR-02**: 마일스톤 타임라인·알림 피드 오버플로 `minmax(0,1fr)`(진행단계 짤림·세로글자 해소), 참가업체 그리드 PDF 버튼, V68/V69 시드. ⑤**SCR-15**: 본문 스플릿 = 좌 `minmax(0,1fr)` + 우측 미니 캘린더 사이드바 **`minmax(280px,340px)`**(달력 깨짐·짤림 해소), Stitch 프롬프트 갱신. ⑥**공개 사이트(§3C-0·SCR-T0~T3)**: 루트 `/`→`/visitor` 디폴트 리다이렉트(기존 '루트=제품소개' 대체), 셸 로고 = `ci/CI_JPG/CI_01.jpg`, 로고 옆 행사검색 입력(10ch), 공개 정보 페이지 4종(행사·참가안내·관람안내·교통) 실링크, **트랙 3페이지 히어로 5장 로테이션**(신규 크롤 실이미지·트랙별 셋 차별화·도트 인디케이터·`prefers-reduced-motion` 정지·CLS 0). ⑦**SCR-03/04**: 도면 탭 디폴트=**DWG**, 부스 팔레트(표준 규격 선택/드래그), **평면도 확대 팝업(`.kx-floorplan-lightbox`)**, AI 자동배치 결과 **시각 우선**(완료 시 확대 팝업에 배치 결과 렌더 → 배치안 3안 상세는 버튼 클릭), Stitch 프롬프트 갱신. ⑧**SCR-14**: 홀 히어로·홀 카드/상세에 **DWG 렌더 평면도(hall1~10.png)** 표출, Stitch 프롬프트 갱신 |
+| **v2.7** | 2026-07-15 | designer | **SCR-03·SCR-12 — PLANNING v3.5 §M2-1 이후 반영된 최근 구현(도면 JPG/DWG 언더레이 탭·캔버스 팬/줌·K1/K2 홀 DWG 렌더·홀 조감 갤러리 재열람)을 design.md에 정합화(구현 정본 `BoothLayoutEditorPage.tsx`·`FloorplanCanvas.tsx`·`hallFloorplan.ts`).** v2.6 이후 소유자 지시로 구현됐으나 스펙 문서에 없던 격차만 순증(기존 구조·번호·토큰 불변, 신규 토큰 0). ①**SCR-03 좌측 도구 패널**에 "도면" 그룹 = **JPG/DWG 언더레이 소스 전환 탭** 신설 절 추가 — JPG(공개 크롤본 `/media/floorplans/hall{n}.jpg`, `FLOOR_REGIONS` 분율 캘리브레이션, 전 홀 H1~H10 보유·기본값) / DWG(CAD 원본 3m 여백 크롭 렌더 `/media/floorplans/dwg/hall{n}.png`, 렌더 파라미터 결정론 캘리브레이션으로 JPG보다 정밀, **미보유 홀 탭 disabled**+"CAD 렌더 준비 중" 툴팁, 현 시점 **K1 제1전시장 H1~H5 축정렬** 완료·**K2 제2전시장 H6~10 회전보정**(H6 −12°·H9 −11°·H10 +11°) 근거 `cad-extraction.md §K2`), 탭 전환 시 언더레이·캘리브레이션 즉시 교체·부스 좌표 불변·DWG 미보유 자동 JPG 폴백·로드 실패 다크 서피스 폴백. 레이아웃 ②③에 도면 탭·언더레이 반영, 캔버스 언더레이를 "JPG 또는 DWG"로 일반화. ②**SCR-03 캔버스 팬·줌 인터랙션** 신설 절 — 마우스 휠 확대/축소(하한~상한 클램프·페이지 스크롤 억제·하단 줌 컨트롤 % 양방향 동기 `onZoomChange`), 좌클릭 드래그 팬(`translate+scale`·grabbing 커서·**드래그 임계값 초과 시에만 팬 판정**·팬 직후 click 캡처 차단으로 부스 선택 오발 방지), 접근성(`role=img`·`aria-label`). 하단 상태 바 줌 컨트롤에 "현재 배율 %+리셋" 명시. ③**SCR-03 Stitch 프롬프트 갱신** — 좌측 패널에 "도면 JPG|DWG 세그먼트 탭"(JPG active·DWG dimmed/disabled+툴팁) 그룹 추가, 캔버스 pan/zoom(grab 커서·줌 % 인디케이터)·JPG 언더레이 베이스·줌 컨트롤(%+리셋) 반영. ④**SCR-12 시각화 갤러리** — SCR-04 위저드에서 온디맨드 생성한 **홀 전경 조감 S7이 `render_job` 영속 후 `boothRef=HALL-{hallId}` 필터로 재열람**됨을 명문화(부스 스코프 → 홀 스코프 확장), 헤더 스코프 전환에 홀(예 "홀7 조감") 추가, 라이트박스 다운로드 이미지·`aiImageUrl`의 M15 옥션 `MaterialPackage.aiImageUrl` 재사용(원칙 4)·SCR-04 안내 링크 진입 경로 반영. §범위 게이트 준수(M2 부스 시공 중심·PLANNING 범위 내, 신규 화면 0). 신규 토큰 0·타 절 무수정·PLANNING.md·src 무수정 |
 | **v2.6** | 2026-07-14 | designer | **SCR-03/04 — PLANNING v3.5 §M2-1 "자동 배치 이지 플로우(3단계 위저드)" 정합(구현 정본 `AutoLayoutDialog.tsx`·`BoothLayoutEditorPage.tsx`·`FloorplanCanvas.tsx`·`hallFloorplan.ts`에 맞춘 스펙 문서화).** ①**SCR-03**: "AI 자동배치" 버튼 = **3단계 위저드 모달(`.kx-auto`) 진입 모드** 신설 절 추가 — ① 어디에(전시장>홀>구역 **셀렉트 3단 캐스케이드**, 소스 `GET /api/halls/tree`(V60 hall_zone)·"홀 전체" 기본·트리 실패 degraded 진행) → ② 조건(자연어 한 줄+"AI 해석" `…/auto-generate/interpret`→**AI 해석 폼**이 최종 권위, degraded 수동 입력) → ③ 배치안 선택(SCR-04). 툴바에 **홀 선택 셀렉트**(전시장 optgroup) 추가, 캔버스는 **실측 홀 도면 JPG의 전시 바닥면 캘리브레이션 영역(FLOOR_REGIONS)에 홀 좌표계 정렬**(부스가 평면도 안에 표시 — M2-1 원칙 1) 명문화, 생성 중 상태를 캔버스 오버레이→위저드 내 진행 화면으로 정정, Stitch 프롬프트에 홀 셀렉트·도면 JPG 베이스 반영 ②**SCR-04**: 별도 페이지→**위저드 ③단계 화면으로 실현** 재정의 — 3안 카드 그리드에서 **조감(S7)은 자동 생성 금지, 카드별 점선 CTA "조감 이미지 생성" 클릭 시에만 `…/auto-generate/preview` RenderJob 발행**(원칙 3), 생성 후 AiImage(워터마크+고지) 표시, **이미지 클릭→확대 라이트박스(`.kx-lightbox`) 신설**(고지 문구 유지+"이미지 저장" 다운로드+닫기, 원칙 4)·`render_job` 영속→시각화 갤러리 `boothRef=HALL-{hallId}` 재열람·M15 옥션 참고 이미지 재사용 안내 문구, **"이 안으로 편집 시작" = `apply-option` 실저장**(저장 중 "저장 중…" 표기) 후 에디터 진입(원칙 5), 하단 비교 테이블 항목은 카드 내 지표+AI 요약으로 흡수, 상태 6종 재정의(S7 미요청 점선 CTA 기본·생성 실패에도 선택/적용 계속 가능), **Stitch 프롬프트 위저드 3단계 구조로 전면 갱신**(단계 표시기·점선 CTA 2장+생성 완료 1장·산술 정합 508부스=4,572㎡ 동일 산식). 신규 토큰 0·타 절 무수정·PLANNING.md·src 무수정 |
 | **v2.5** | 2026-07-14 | designer | **BACKLOG designer 잔여 티켓 일괄 해소(B-01·B-04~B-08·B-10) — 소유자 지시 "백로그 미진행 사항 진행".** 기존 구조·번호 체계·토큰 불변(신규 토큰 0), 스펙 정정·순증만. ①**B-01(Major)**: SCR-06에 **조립부스 모드** 신설(PLANNING M3 Phase 1 범위 — 신규 SCR 없이 모드 분기) — 좌측 옵션 패널 3그룹(간판 문구·서체·색/가구 표준 자재 카탈로그 그리드(수량 스테퍼+기본 제공·추가 ₩ 칩)/조명 스포트 스테퍼·주간야간), 옵션 변경 시 3D 프리뷰·S1 예상 사진 즉시 갱신, Before/After "기본형↔옵션 적용", 옵션 견적 요약+CTA "옵션 신청 제출"(장치업체 컨펌 미적용 — 주최측 시공), 상태(마감 잠금·문구 미입력 비활성·오탈자 배지) + **전용 영어 Stitch 프롬프트 1종**(견적 산술 정합 30,000+70,000+15,000+40,000=155,000). SCR-05에 조립부스 분기(헤더 표기·옵션 마감 할 일 카드·장치업체 초대 미노출·스튜디오 진입 분기) 순증 ②**B-04**: 화면 수 표기 정정 — §3 헤더 "총 14개(웹12+모바일2)"→**P0 코어 15개(웹 13 = SCR-01·HOME·02~12 + 모바일 2)**(SCR-HOME 신설 반영), §2.8-2 집계 문장의 SCR-T0~T3 4화면 누락 정정 **85→총 89화면**(✅Stitch 83·미생성 6 상태 정합 — v2.2 변경이력과 일치화) ③**B-05**: SCR-02 사이드바 "정산" 메뉴 IA 불일치 해소 — §2-1 주최자 사이트맵에 "정산·결제 [M9, P1] — Phase 2 (SCR-21)" 추가 + SCR-02에 정합 메모(프롬프트 메뉴 문구 유지) ④**B-06**: SCR-01 Stitch 프롬프트에 스펙에만 있던 "이메일 인증으로 로그인" 버튼 추가 ⑤**B-07**: SCR-03 프롬프트에 툴바 "공유" 버튼 추가 + 위반 요약(차단2·경고3)↔캔버스 핀 불일치 정정(주황 빗금 부스 1→3개, 핀 3·4·5 — 스펙 레이아웃 ③에 핀·건수 명시로 1:1 고정) ⑥**B-08**: SCR-04 샘플 지표 산술 오류 정정 — 판매면적 4,420㎡→**4,590㎡**(510부스×9㎡, SCR-03 486부스=4,374㎡와 동일 산식 명문화) ⑦**B-10**: SCR-10/11 헤딩·메모에 **Phase 2**(PLANNING §9 홀매니저 대시보드), SCR-M1/M2에 **Phase 3**(현장 모바일 운영 도구) 로드맵 라벨 부착(화면·구현 선행 확보 명시 — P0 우선순위 컬럼과 구분) + **조명 배치안 제안(M4a) 전용 UI 검토 메모**를 SCR-06에 신설(Phase 1은 조명 프리셋+S2 야간 컷으로 흡수, 조도 히트맵·기구 배치 캔버스 전용 SCR은 정밀 조도 시뮬레이션(P2)과 함께 분리 검토 — 현 시점 신규 화면 없음). PLANNING.md·src 무수정 |
 | **v2.4** | 2026-07-12 | designer | **공개 사이트 비주얼·모션 전면 리뉴얼 스펙 신설(소유자 확정: "코엑스처럼 세련되게 — 히어로 배경·애니메이션·비주얼, 지금 착수").** §3C에 **3C-V 공개 사이트 비주얼·모션 스펙** 절 순증 — 기존 SCR-T0~T3·SCR-P* **구조는 불변**, 그 위에 비주얼/모션 레이어만 격상(구조 재설계 아님). ①**비주얼 폴리시(V-1)** 풀블리드·공백 없음·섹션 리듬(밴드↔카드 교대·96/64/40px)·여백·라운드 8px·소프트 앰비언트 그림자·타이포 위계 강화·선 SVG·이모지 금지·다크/라이트·2:3 포스터 카드. ②**모션 토큰(V-2)** duration(`--motion-fast 150`/`base 240`/`slow 400`/`hero 600`/`countup 1200`)·easing(`--ease-emphasized/standard/decelerate`) 신설(컬러 신규 토큰 0). ③**섹션별 배경·애니메이션 트리거 매핑(V-3)** 풀블리드 히어로(라이트 파랄랙스+인트로 리빌)·통계 카운트업·AI 타일 스태거·쇼케이스 hover 리프트/이미지 줌·행사 레일 오토스크롤·기획 브리핑 grow·공통 스크롤 리빌(IO threshold 0.15·once). ④**이미지 소스 매핑(V-4)** build 내장 `/media/`(hero·bands·poster·patterns 계약)·부재 시 그라디언트+패턴 폴백(레이아웃 시프트 0)·preload/lazy/webp/srcset. ⑤**접근성(V-5)** `prefers-reduced-motion` 필수 — 파랄랙스/오토스크롤 정지·카운트업 즉시·리빌 instant·모션은 전부 장식(정보 비의존)·양 테마 WCAG AA. ⑥**성능(V-6)** CSS 우선·`transform`/`opacity`만·`will-change` 절제·60fps·강등 순서. ⑦**프론트 계약(V-7)** `.pub-reveal`/`--stagger`·`.pub-hero__bg[data-parallax]`·`.pub-card--lift`·`.pub-card__media img` 줌·`.pub-countup`·`.pub-rail--auto`·폴백 유틸, **PublicShell 하위만 스코프**(AppShell/MDI·SCR-A*·모바일 미주입). ⑧**영어 Stitch 프롬프트 2종(V-8·V-9)** — 프리미엄 전시장 홈페이지(SCR-T1 시네마틱 히어로·스크롤 리빌·카운트업·hover 줌·오토스크롤·폴백·reduced-motion, 제품명 정확·NO emoji·선 SVG·라이트/다크) + 3-트랙 관문(SCR-T0 동일 톤 격상). **경계 준수**: visitor(T1)만 풀 시네마틱, business/agency는 B2B 톤 유지+공통 모션 절제 적용. 신규 컬러 토큰 0·PLANNING.md·src 무수정. |