+ + 본문 바로가기 + + +

+ {/* 브랜드 — 실제 KINTEX CI 워드마크(소유자 지시 ①, 다크 대비 화이트 플레이트) */} + +

+ + AI 전시·행사시스템 + + AI Exhibition & Event System + + + + + {workspace && ( + + )} + +

+ {/* 홈 — 최상위 단일 링크 */} +

+ + `kx-shell__nav-link kx-shell__nav-link--top ${isActive ? 'is-active' : ''}` + } + onClick={closeOnMobile} + > + {HOME_ITEM.Icon && } + {navLabel(HOME_ITEM.labelKey, HOME_ITEM.label)} + +

+ + {/* 대분류 그룹 아코디언 */} + {visibleGroups.map((group) => { + const expanded = openGroup === group.id; + return ( +

+ + {expanded && ( +

+ {navLabel(item.labelKey, item.label)} +
+ {item.to ? ( + + `kx-shell__nav-link ${isActive ? 'is-active' : ''}` + } + onClick={closeOnMobile} + > + + ) : ( + + )} +

+ )} +

+ ); + })} +

+ + {/* 하단 사용자 영역 — 반응형 재정렬(소유자 지적 3): 프로필 행 + 액션 아이콘 행. */} +

+ +

+ + + +

+ + {/* 모바일 드로어 백드롭 — nav 열림 시에만(데스크톱은 CSS 로 미표시). */} + {!navCollapsed && ( +

setNavCollapsed(true)} + aria-hidden="true" + /> + )} + +

+ +

+ {workspace?.eventName ?? '워크스페이스'} + / + {labelForPath(location.pathname)} +

+ {workspace && } + + +

+ + + +

+ +

+ + {/* 전 셸 화면 공통 하단 상태바 (design.md §2-2) */} + +

+ ); +} diff --git a/src/frontend/src/components/layout/MdiTabBar.tsx b/src/frontend/src/components/layout/MdiTabBar.tsx new file mode 100644 index 0000000..0dc57d8 --- /dev/null +++ b/src/frontend/src/components/layout/MdiTabBar.tsx @@ -0,0 +1,100 @@ +import { useRef } from 'react'; +import { useLocation, useNavigate } from 'react-router-dom'; +import { useMdiStore } from '../../store/mdiStore'; +import { IconClose } from '../ui/icons'; + +/** + * MDI 문서 탭 스트립 (design.md §2.7-2) — 유틸리티 바 아래 전폭. + * + * 탭 = 라우트 북마크: 열린 문서 경로를 좌→우로 나열하고, 클릭 시 해당 라우트로 이동한다. + * 탭 추가/활성은 AppShell 의 라우트 동기화 이펙트(openTab)가 담당하고, 여기서는 표시·상호작용만 맡는다. + * 키보드: role=tablist/tab · aria-selected · 좌/우 화살표로 인접 탭 이동(포커스+활성). + * 모바일(<720px)에서는 CSS 로 숨김. + */ +export function MdiTabBar() { + const tabs = useMdiStore((s) => s.tabs); + const activePath = useMdiStore((s) => s.activePath); + const closeTab = useMdiStore((s) => s.closeTab); + const closeAll = useMdiStore((s) => s.closeAll); + const navigate = useNavigate(); + const location = useLocation(); + const btnRefs = useRef<(HTMLButtonElement | null)[]>([]); + + if (tabs.length === 0) return null; + + function activate(path: string) { + if (path !== location.pathname) navigate(path); + } + + function handleClose(e: React.MouseEvent, path: string) { + e.stopPropagation(); + const nextActive = closeTab(path); + // 활성 탭을 닫아 활성 경로가 바뀌었으면 그 경로로 이동(현재와 다를 때만). + if (nextActive && nextActive !== location.pathname) navigate(nextActive); + } + + function handleKeyDown(e: React.KeyboardEvent, index: number) { + if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return; + e.preventDefault(); + const dir = e.key === 'ArrowRight' ? 1 : -1; + const nextIndex = (index + dir + tabs.length) % tabs.length; + const target = tabs[nextIndex]; + btnRefs.current[nextIndex]?.focus(); + activate(target.path); + } + + return ( +

+ {tabs.map((tab, i) => { + const isActive = tab.path === activePath; + return ( +

+ + +

+ ); + })} + {tabs.length > 1 && ( + + )} +

+ ); +} diff --git a/src/frontend/src/components/layout/ShellFooter.tsx b/src/frontend/src/components/layout/ShellFooter.tsx new file mode 100644 index 0000000..5687b8a --- /dev/null +++ b/src/frontend/src/components/layout/ShellFooter.tsx @@ -0,0 +1,51 @@ +import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +/** 빌드 버전 — 디자인 §2-2 예시(v2.1.2). 릴리스 시 갱신. */ +const APP_VERSION = 'v2.1.2'; + +/** + * 웹 인증 셸 하단 상태바/푸터 (design.md §2-2, v2.1.2 신설, 약 36px). + * 사이드바 우측 전폭·DocumentHost 아래 고정. 좌측 저작권, 우측 시스템 상태점·버전·고객지원. + * 시스템 상태는 정적 "정상"이 기본이며, 마운트 시 /health 1회만 확인해 명시적 5xx 일 때만 강등한다 + * (폴링 없음 — 과도한 헬스체크 회피). 색 외 텍스트 병기(WCAG AA), role="contentinfo". + */ +export function ShellFooter() { + const { t } = useTranslation(); + const [healthy, setHealthy] = useState(true); + + useEffect(() => { + const ctrl = new AbortController(); + fetch('/health', { signal: ctrl.signal }) + .then((res) => { + // 명시적 서버 오류(5xx)만 강등 — 404/네트워크 등은 정적 정상 유지(오탐 방지). + if (res.status >= 500) setHealthy(false); + }) + .catch(() => { + /* 네트워크/중단 — 정적 정상 유지 */ + }); + return () => ctrl.abort(); + }, []); + + return ( + + ); +} diff --git a/src/frontend/src/components/layout/app-shell.css b/src/frontend/src/components/layout/app-shell.css new file mode 100644 index 0000000..93343c7 --- /dev/null +++ b/src/frontend/src/components/layout/app-shell.css @@ -0,0 +1,611 @@ +/* ══════════ 웹 인증 셸 (WISE AppLayout 구조 이식) ══════════ */ +.kx-shell { + display: flex; + height: 100vh; + overflow: hidden; +} + +/* ── 사이드바 ── */ +.kx-shell__sidebar { + width: var(--sidebar-w); + flex-shrink: 0; + background: var(--color-white); + border-right: var(--border-card); + display: flex; + flex-direction: column; + min-height: 0; + transition: width 0.2s ease; +} +/* 데스크톱 접힘 — 사이드바 숨김(콘텐츠 전폭). */ +.kx-shell.is-nav-collapsed .kx-shell__sidebar { + width: 0; + overflow: hidden; + border-right: none; +} + +/* 브랜드 — 실제 KINTEX CI 워드마크. 다크 모드 대비 화이트 플레이트(JPG 는 알파 없음). */ +.kx-shell__brand { + display: flex; + align-items: center; + gap: var(--space-3); + height: 56px; + flex: none; + padding: 0 var(--space-4); + border-bottom: var(--border-card); + text-decoration: none; + overflow: hidden; +} +.kx-shell__brand-logo { + height: 22px; + width: auto; + flex: none; + background: #fff; + padding: 3px 7px; + border-radius: var(--radius-sm); + display: block; +} +.kx-shell__brand-subs { + display: flex; + flex-direction: column; + justify-content: center; + gap: 1px; + min-width: 0; + overflow: hidden; +} +.kx-shell__brand-sub { + font-size: 11px; + font-weight: 600; + line-height: 1.15; + color: var(--color-neutral-500); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.kx-shell__brand-sub--en { + font-size: 9px; + font-weight: 500; + letter-spacing: 0.02em; + color: var(--color-neutral-400, var(--color-neutral-500)); + text-transform: uppercase; +} + +/* 행사 스위처 */ +.kx-shell__event-switch { + margin: var(--space-3) var(--space-3) 0; + padding: var(--space-3); + background: var(--color-neutral-050); + border: var(--border-card); + border-radius: var(--radius-lg); + text-align: left; + display: flex; + flex-direction: column; + gap: 2px; + flex: none; +} +.kx-shell__event-name { + font-size: var(--fs-body); + font-weight: 600; + color: var(--color-neutral-900); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.kx-shell__event-meta { + font-size: var(--fs-caption); + color: var(--color-neutral-500); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 메뉴 스크롤 영역 — 사이드바 중앙(하단 사용자 고정). */ +.kx-shell__nav-scroll { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + padding: var(--space-3) 0 var(--space-4); +} +.kx-shell__nav { + list-style: none; + margin: 0; + padding: 0 var(--space-3); + display: flex; + flex-direction: column; + gap: 2px; +} +.kx-shell__nav--sub { + padding: 2px 0 var(--space-2); +} +/* 소그룹 구분 헤더(시스템관리 20항목 정리) — 클릭 불가, WISE 구분선 라벨. */ +.kx-shell__nav-section { + margin: var(--space-2) 0 2px; + padding: 4px var(--space-4) 3px; + font-size: 10px; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--color-neutral-500); + border-top: 1px solid var(--color-neutral-100); +} +.kx-shell__nav-section:first-child { + margin-top: 0; + border-top: none; +} + +/* 대분류 그룹(아코디언) */ +.kx-shell__group { + padding: 0 var(--space-3); +} +.kx-shell__group-title { + display: flex; + align-items: center; + gap: var(--space-3); + width: 100%; + padding: 9px var(--space-4); + border: none; + background: transparent; + border-radius: var(--radius-sm); + color: var(--color-neutral-700); + font-size: var(--fs-body); + font-weight: 600; + text-align: left; + transition: background 0.15s ease, color 0.15s ease; +} +.kx-shell__group-title:hover { + background: var(--color-neutral-050); + color: var(--color-neutral-900); +} +.kx-shell__group-label { + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.kx-shell__group-caret { + flex: none; + color: var(--color-neutral-500); + transition: transform 0.2s ease; +} +.kx-shell__group-caret.is-open { + transform: rotate(180deg); +} + +/* 링크 */ +.kx-shell__nav-link { + display: flex; + align-items: center; + gap: var(--space-3); + width: 100%; + padding: 8px var(--space-4); + border-radius: var(--radius-sm); + color: var(--color-neutral-700); + font-size: var(--fs-body); + font-weight: 500; + text-decoration: none; + transition: background 0.15s ease, color 0.15s ease; +} +.kx-shell__nav-link:hover { + background: var(--color-neutral-050); + color: var(--color-neutral-900); +} +.kx-shell__nav-link.is-active { + background: var(--color-primary-100); + color: var(--color-primary-700); + font-weight: 600; +} +.kx-shell__nav-link--top { + font-weight: 600; +} +/* 스코프 진입(button) — nav-link 와 동일 표현. */ +.kx-shell__nav-link--btn { + border: 0; + background: transparent; + text-align: left; + cursor: pointer; + font-family: inherit; +} +.kx-shell__nav-icon { + width: 18px; + flex: none; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--color-neutral-500); +} +.kx-shell__nav-link.is-active .kx-shell__nav-icon { + color: var(--color-primary-700); +} +/* 하위 링크 앞 점 마커(들여쓰기 정렬) */ +.kx-shell__nav-dot { + width: 5px; + height: 5px; + margin-left: 6px; + border-radius: 50%; + background: currentColor; + opacity: 0.4; + flex: none; +} +.kx-shell__nav-link.is-active .kx-shell__nav-dot { + opacity: 1; + background: var(--color-primary-600); +} + +/* ── 하단 사용자 영역 (반응형 재정렬) ── */ +.kx-shell__user { + flex: none; + border-top: var(--border-card); + padding: var(--space-3) var(--space-3) var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-2); +} +.kx-shell__user-profile { + display: flex; + align-items: center; + gap: var(--space-2); + width: 100%; + min-width: 0; + border: none; + background: transparent; + padding: 6px var(--space-2); + border-radius: var(--radius-sm); + text-align: left; + cursor: pointer; +} +.kx-shell__user-profile:hover { + background: var(--color-neutral-050); +} +.kx-shell__avatar { + width: 30px; + height: 30px; + flex: none; + border-radius: 50%; + background: var(--color-primary-100); + color: var(--color-primary-700); + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 13px; +} +.kx-shell__user-name { + flex: 1 1 auto; + min-width: 0; + font-size: var(--fs-body); + font-weight: 600; + color: var(--color-neutral-900); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.kx-shell__user-actions { + display: flex; + align-items: center; + gap: var(--space-1); +} +.kx-shell__user-action { + width: 34px; + height: 34px; + flex: none; + border: none; + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-neutral-500); + display: inline-flex; + align-items: center; + justify-content: center; + transition: background 0.15s ease, color 0.15s ease; +} +.kx-shell__user-action:hover { + background: var(--color-neutral-050); + color: var(--color-primary-600); +} +/* 언어 셀렉트 — 액션 행에서 가운데 신축(줄바꿈/오버플로 방지). */ +.kx-shell__user-lang { + flex: 1 1 auto; + justify-content: center; + overflow: hidden; +} + +/* ── 모바일 드로어 백드롭(데스크톱 미표시) ── */ +.kx-shell__backdrop { + display: none; +} + +/* ══════════ 메인 컬럼 ══════════ */ +.kx-shell__main { + flex: 1; + display: flex; + flex-direction: column; + min-width: 0; +} +.kx-shell__topbar { + height: 56px; + flex-shrink: 0; + background: var(--color-white); + border-bottom: var(--border-card); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-4); + padding: 0 var(--gutter); +} +.kx-shell__topbar-left { + display: flex; + align-items: center; + gap: var(--space-2); + flex: 1 1 auto; + min-width: 0; +} +.kx-shell__nav-toggle { + width: 38px; + height: 38px; + flex: none; + border: 1px solid transparent; + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-neutral-500); + display: inline-flex; + align-items: center; + justify-content: center; + transition: background 0.15s ease, color 0.15s ease; +} +.kx-shell__nav-toggle:hover { + background: var(--color-neutral-100); + color: var(--color-neutral-900); +} +.kx-shell__crumb { + font-size: var(--fs-body); + color: var(--color-neutral-500); + display: flex; + align-items: center; + gap: var(--space-2); + min-width: 0; +} +.kx-shell__crumb-root { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; +} +.kx-shell__crumb-sep { + color: var(--color-neutral-200); + flex: none; +} +.kx-shell__crumb-cur { + color: var(--color-neutral-900); + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.kx-shell__topbar-right { + display: flex; + align-items: center; + gap: var(--space-3); + flex: none; +} +.kx-shell__icon-btn { + width: 32px; + height: 32px; + border-radius: 50%; + border: none; + background: transparent; + color: var(--color-neutral-500); + display: inline-flex; + align-items: center; + justify-content: center; +} +.kx-shell__icon-btn:hover { + background: var(--color-neutral-100); +} + +.kx-shell__content { + flex: 1; + min-height: 0; + overflow: hidden; + display: flex; +} + +/* ── 하단 상태바/푸터 (design.md §2-2, 약 36px) ── */ +.kx-shell__footer { + flex-shrink: 0; + height: 36px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--gutter); + background: var(--color-neutral-050); + border-top: var(--border-card); + font-size: var(--fs-caption); + color: var(--color-neutral-500); +} +.kx-shell__footer-copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.kx-shell__footer-right { + display: flex; + align-items: center; + gap: var(--space-2); + flex-shrink: 0; +} +.kx-shell__footer-status { + display: inline-flex; + align-items: center; + gap: 5px; +} +.kx-shell__footer-dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--color-neutral-500); +} +.kx-shell__footer-status.is-ok .kx-shell__footer-dot { + background: var(--color-success); +} +.kx-shell__footer-status.is-down { + color: var(--color-error); +} +.kx-shell__footer-status.is-down .kx-shell__footer-dot { + background: var(--color-error); +} +.kx-shell__footer-sep { + color: var(--color-neutral-200); +} +.kx-shell__footer-link { + color: var(--color-neutral-500); + text-decoration: none; +} +.kx-shell__footer-link:hover { + color: var(--color-primary-600); + text-decoration: underline; +} + +/* ── MDI 문서 탭 스트립 (design.md §2.7-2) ── */ +.kx-mdi { + flex-shrink: 0; + display: flex; + align-items: stretch; + gap: 2px; + height: 40px; + padding: 0 var(--space-3); + background: var(--color-neutral-050); + border-bottom: var(--border-card); + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: thin; +} +.kx-mdi__tab { + display: inline-flex; + align-items: center; + gap: 2px; + max-width: 200px; + padding: 0 var(--space-2) 0 var(--space-3); + border: 1px solid transparent; + border-bottom: none; + border-top-left-radius: var(--radius-sm); + border-top-right-radius: var(--radius-sm); + align-self: flex-end; + height: 34px; +} +.kx-mdi__tab:hover { + background: var(--color-neutral-100); +} +.kx-mdi__tab.is-active { + background: var(--color-white); + border-color: var(--color-neutral-200); + box-shadow: inset 0 2px 0 var(--color-primary-600); +} +.kx-mdi__tab-btn { + min-width: 0; + flex: 1; + display: inline-flex; + align-items: center; + border: none; + background: transparent; + cursor: pointer; + padding: 0; + font-family: inherit; + font-size: var(--fs-caption); + font-weight: 500; + color: var(--color-neutral-500); +} +.kx-mdi__tab.is-active .kx-mdi__tab-btn { + color: var(--color-neutral-900); + font-weight: 600; +} +.kx-mdi__tab-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.kx-mdi__tab-close { + flex-shrink: 0; + width: 18px; + height: 18px; + border: none; + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-neutral-500); + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; +} +.kx-mdi__tab-close:hover { + background: var(--color-neutral-200); + color: var(--color-neutral-900); +} + +/* ══════════ 반응형 ══════════ */ +/* <1024px — 사이드바를 오버레이 드로어로. 접힘 시 화면 밖으로 슬라이드. */ +@media (max-width: 1024px) { + .kx-shell__sidebar { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: var(--sidebar-w); + z-index: 40; + box-shadow: var(--shadow-level2); + transform: translateX(0); + transition: transform 0.2s ease; + } + .kx-shell.is-nav-collapsed .kx-shell__sidebar { + width: var(--sidebar-w); + overflow: hidden; + border-right: var(--border-card); + transform: translateX(-100%); + } + .kx-shell__backdrop { + display: block; + position: fixed; + inset: 0; + background: rgba(8, 14, 24, 0.5); + z-index: 35; + } +} + +/* 모바일 폭에서는 탭 스트립 숨김(단일 화면 포커스 — §2.7-6). */ +@media (max-width: 720px) { + .kx-mdi { + display: none; + } +} + +@media (max-width: 640px) { + .kx-shell__crumb-root, + .kx-shell__crumb-sep { + display: none; + } + .kx-shell__topbar { + padding: 0 var(--space-4); + } +} + +/* MDI 모두 닫기 버튼 — 탭 스트립 우측, 2개 이상일 때만 노출 */ +.kx-mdi__closeall { + display: inline-flex; + align-items: center; + gap: 4px; + margin-left: 4px; + padding: 0 10px; + height: 28px; + align-self: center; + font-size: var(--fs-caption); + color: var(--color-neutral-500); + background: transparent; + border: 1px solid var(--border-card); + border-radius: var(--radius-pill); + cursor: pointer; + white-space: nowrap; + flex: 0 0 auto; +} +.kx-mdi__closeall:hover { + color: var(--color-error); + border-color: var(--color-error); +} diff --git a/src/frontend/src/components/layout/mdiLabels.ts b/src/frontend/src/components/layout/mdiLabels.ts new file mode 100644 index 0000000..a2135fb --- /dev/null +++ b/src/frontend/src/components/layout/mdiLabels.ts @@ -0,0 +1,112 @@ +/* + * 라우트 → 화면명(탭 라벨) 매핑 — MDI 탭 라벨 해소(design.md §2.7-2). + * + * 1) 정적 경로: 사이드바 네비 정의(AppShell)와 정합하는 라벨 테이블. + * 2) 행사 스코프 동적 경로(/events/:eventId/...): 패턴 매칭. + * 3) 미등록 경로: 경로 세그먼트 기반 축약 폴백(:id 유사 세그먼트 제외). + * + * screens/** 를 import 하지 않는다(라벨은 여기서 단일 관리). 네비 라벨과 동일 문자열을 사용해 + * 사이드바 활성 표시와 탭 라벨이 일치하도록 한다. + */ + +/** 정적(정확 일치) 경로 → 라벨. AppShell NAV/DOMAIN/WORK 정의와 동일 문자열. */ +const STATIC_LABELS: Record = { + // 주 메뉴 + '/schedule': '전시 일정', + '/ops/operations': '현장운영', + '/analytics': '경영분석', + '/docs': '서류·마일스톤', + '/settlement': '정산', + '/admin': '관리자', + // 도메인 모듈 + '/halls': '홀 배정', + '/logistics': '반입·반출', + '/auctions': '공사 옥션', + '/visitors': '관람객', + '/visitors/checkin': '체크인 데스크', + '/leads': '리드', + '/campaigns': '마케팅', + '/sponsorship': '스폰서십', + '/cms': '콘텐츠 CMS', + '/cms/microsite': '마이크로사이트 빌더', + '/cms/i18n': '다국어 CMS', + // 업무 공통 + '/work/worklog': '업무일지', + '/work/schedule': '일정', + '/work/message': '쪽지', + '/work/notice': '공지', + '/work/meeting': '회의록', + '/work/report': '업무보고', + '/work/opinion': '의견접수', + '/work/search': '통합검색', + // 개인·알림 + '/notifications': '알림센터', + '/me': '마이페이지', + // 서류·수주 + '/docs/authoring': '신고서류 작성', + '/contractor/dashboard': '수주 부스', + // 관리자 하위 + '/admin/login-slides': '로그인 슬라이드', + '/admin/audit': '감사 로그', + '/admin/settings': '시스템 설정', + '/admin/masterdata/rulesets': '룰셋 버전', + '/admin/tenants': '테넌트 관리', + '/admin/users': '사용자 관리', + '/admin/roles': '역할 관리', + '/admin/codes': '공통 코드', + '/admin/menus': '메뉴 관리', +}; + +/** 동적 경로 패턴(정규식) → 라벨. 구체적 규칙을 먼저 둔다. */ +const PATTERN_LABELS: { re: RegExp; label: string }[] = [ + { re: /^\/events\/[^/]+\/dashboard$/, label: '대시보드' }, + { re: /^\/events\/[^/]+\/booths\/[^/]+\/home$/, label: '참가업체 홈' }, + { re: /^\/events\/[^/]+\/halls\/[^/]+\/layout$/, label: '플로어플랜 스튜디오' }, + { re: /^\/events\/[^/]+\/halls\/[^/]+\/comparison$/, label: 'AI 배치안 비교' }, + { re: /^\/events\/[^/]+\/booths\/[^/]+\/design$/, label: '부스 설계 스튜디오' }, + { re: /^\/events\/[^/]+\/booths\/[^/]+\/utility\/order$/, label: '유틸리티 신청' }, + { re: /^\/events\/[^/]+\/booths\/[^/]+\/utility$/, label: '유틸리티 배선' }, + { re: /^\/events\/[^/]+\/booths\/[^/]+\/compliance$/, label: '규정 검증' }, + { re: /^\/events\/[^/]+\/halls\/[^/]+\/booths\/[^/]+\/review$/, label: '검수 상세' }, + { re: /^\/events\/[^/]+\/halls\/[^/]+\/approvals$/, label: '검수 대기열' }, + { re: /^\/events\/[^/]+\/booths\/[^/]+\/gallery$/, label: '시각화 갤러리' }, + { re: /^\/auctions\/[^/]+\/award$/, label: '낙찰 비교' }, + { re: /^\/auctions\/[^/]+$/, label: '옥션 상세' }, +]; + +/** 폴백 세그먼트 → 라벨(경로 기반 축약에 사용). */ +const SEGMENT_LABELS: Record = { + dashboard: '대시보드', + layout: '플로어플랜', + design: '설계', + utility: '배선', + gallery: '갤러리', + approvals: '검수', + review: '검수 상세', + admin: '관리자', + work: '업무', + cms: 'CMS', + auctions: '옥션', +}; + +/** id 유사 세그먼트(폴백 라벨에서 제외) — UUID·숫자·짧은 코드. */ +function isIdLike(seg: string): boolean { + return /^[0-9]+$/.test(seg) || /^[0-9a-fA-F-]{8,}$/.test(seg) || /^[A-Z]\d+$/.test(seg); +} + +/** 라우트 경로 → 탭 라벨 해소. */ +export function labelForPath(path: string): string { + const clean = path.split('?')[0].split('#')[0]; + if (STATIC_LABELS[clean]) return STATIC_LABELS[clean]; + for (const { re, label } of PATTERN_LABELS) { + if (re.test(clean)) return label; + } + // 폴백: 뒤에서부터 id 아닌 첫 세그먼트를 라벨화. + const segs = clean.split('/').filter(Boolean); + for (let i = segs.length - 1; i >= 0; i -= 1) { + const seg = segs[i]; + if (isIdLike(seg)) continue; + return SEGMENT_LABELS[seg] ?? seg; + } + return '문서'; +} diff --git a/src/frontend/src/components/ui/AiImage.tsx b/src/frontend/src/components/ui/AiImage.tsx new file mode 100644 index 0000000..e4d38d0 --- /dev/null +++ b/src/frontend/src/components/ui/AiImage.tsx @@ -0,0 +1,80 @@ +import type { RenderJobDto } from '../../api/types'; +import { AiLabel } from './Badge'; +import { IconSpark } from './icons'; +import './ai-image.css'; + +/* + * AI 생성 이미지 카드 — 워터마크·고지문 상시 노출(제거 불가). + * 근거: design.md §1-4 + 계약 §0-3 (watermarkRequired/watermarkText/notice 항상 포함). + */ +interface AiImageProps { + imageUrl: string | null; + watermarkText: string; + notice: string; + shotLabel?: string; + versionTag?: string; + status?: RenderJobDto['status']; + onRetry?: () => void; + alt?: string; + /** 번들 예시(사용자 부스 실 렌더 아님)임을 표시 — "예시" 칩 노출. */ + sample?: boolean; + /** 예시 타일에서 "이 뷰 생성" 버튼 노출. */ + onGenerate?: () => void; +} + +export function AiImage({ + imageUrl, + watermarkText, + notice, + shotLabel, + versionTag, + status = 'DONE', + onRetry, + alt = 'AI 생성 예상 이미지', + sample = false, + onGenerate, +}: AiImageProps) { + return ( +

+ ); +} diff --git a/src/frontend/src/components/ui/Badge.tsx b/src/frontend/src/components/ui/Badge.tsx new file mode 100644 index 0000000..1ff947a --- /dev/null +++ b/src/frontend/src/components/ui/Badge.tsx @@ -0,0 +1,62 @@ +import type { ReactNode } from 'react'; +import { IconSpark } from './icons'; +import './badge.css'; + +// ── StatusBadge (design.md §1-4) ── +export type FlowStatus = + | 'draft' + | 'submitted' + | 'ai-review' + | 'approved' + | 'rejected' + | 'building' + | 'inspected'; + +const STATUS_LABEL: Record = { + draft: '작성중', + submitted: '제출됨', + 'ai-review': 'AI검토', + approved: '승인', + rejected: '반려', + building: '시공중', + inspected: '검수완료', +}; + +/** 신청 흐름 상태 배지 — 모든 목록·카드 공통. */ +export function StatusBadge({ status }: { status: FlowStatus }) { + return ( + {STATUS_LABEL[status]} + ); +} + +/** 역할 배지 (SCR-01 워크스페이스 카드). */ +export function RoleBadge({ role }: { role: string }) { + const label = + role === 'ORGANIZER' + ? '주최자' + : role === 'EXHIBITOR' + ? '참가업체' + : role === 'CONTRACTOR' + ? '장치업체' + : role === 'HALL_MANAGER' + ? '홀매니저' + : role; + return {label}; +} + +/** D-데이 칩 — D-3 이내 warning, 초과 error. */ +export function DdayChip({ dday }: { dday: number }) { + const tone = dday < 0 ? 'over' : dday <= 3 ? 'warn' : 'normal'; + const text = dday < 0 ? `D+${Math.abs(dday)}` : `D-${dday}`; + return {text}; +} + +/** AI 라벨 — 보라 외곽선 칩. */ +export function AiLabel({ children = 'AI 초안' }: { children?: ReactNode }) { + return ( + + + {children} + + ); +} diff --git a/src/frontend/src/components/ui/Button.tsx b/src/frontend/src/components/ui/Button.tsx new file mode 100644 index 0000000..65f0815 --- /dev/null +++ b/src/frontend/src/components/ui/Button.tsx @@ -0,0 +1,30 @@ +import type { ButtonHTMLAttributes, ReactNode } from 'react'; +import './button.css'; + +type Variant = 'primary' | 'secondary' | 'ai' | 'ghost' | 'danger'; + +interface ButtonProps extends ButtonHTMLAttributes { + variant?: Variant; + leadingIcon?: ReactNode; + block?: boolean; +} + +/** design.md §1-4 — 주요 버튼(primary blue), AI 액션(ai-accent 보라). radius 4px. */ +export function Button({ + variant = 'primary', + leadingIcon, + block, + className = '', + children, + ...rest +}: ButtonProps) { + return ( + + ); +} diff --git a/src/frontend/src/components/ui/CompareSlider.tsx b/src/frontend/src/components/ui/CompareSlider.tsx new file mode 100644 index 0000000..c2d3b54 --- /dev/null +++ b/src/frontend/src/components/ui/CompareSlider.tsx @@ -0,0 +1,134 @@ +import { useCallback, useRef, useState } from 'react'; +import type { KeyboardEvent, PointerEvent } from 'react'; +import { IconCompareArrows } from './icons'; +import './compare-slider.css'; + +/* + * Before/After 비교 슬라이더 (design.md S5 — 시공 전 빈 홀 ↔ 시공 후 렌더). + * 근거: docs/analysis/reroomai-source.md §5(C) — reroomai `CompareSlider` 패턴 이식. + * - clip-path: inset(0 {100-pos}% 0 0) 로 After 레이어를 클립 → 리사이즈에도 픽셀 정렬 유지. + * - 포인터 캡처(setPointerCapture)로 프레임 밖 드래그도 추적. + * - 키보드(방향키 ±1, Shift 큰 스텝 ±10, Home/End) + ARIA slider 접근성. + * ★ After가 AI 생성 이미지이면 워터마크·고지는 상위(AiImage/afterOverlay)에서 상시 노출. + */ +interface CompareSliderProps { + beforeSrc: string; + afterSrc: string; + beforeAlt?: string; + afterAlt?: string; + beforeLabel?: string; + afterLabel?: string; + /** After 레이어 위에 상시 겹칠 노드(워터마크·AI 라벨 등). */ + afterOverlay?: React.ReactNode; + /** 초기 위치(0~100). 기본 50. */ + initial?: number; +} + +export function CompareSlider({ + beforeSrc, + afterSrc, + beforeAlt = '시공 전', + afterAlt = '시공 후 (AI 생성 예상 이미지)', + beforeLabel = '시공 전', + afterLabel = '시공 후', + afterOverlay, + initial = 50, +}: CompareSliderProps) { + const [pos, setPos] = useState(() => Math.min(100, Math.max(0, initial))); + const frameRef = useRef(null); + const draggingRef = useRef(false); + + const updateFromClientX = useCallback((clientX: number) => { + const frame = frameRef.current; + if (!frame) return; + const rect = frame.getBoundingClientRect(); + const ratio = (clientX - rect.left) / rect.width; + setPos(Math.min(100, Math.max(0, ratio * 100))); + }, []); + + const onPointerDown = useCallback( + (e: PointerEvent) => { + draggingRef.current = true; + e.currentTarget.setPointerCapture(e.pointerId); + updateFromClientX(e.clientX); + }, + [updateFromClientX], + ); + + const onPointerMove = useCallback( + (e: PointerEvent) => { + if (!draggingRef.current) return; + updateFromClientX(e.clientX); + }, + [updateFromClientX], + ); + + const onPointerUp = useCallback((e: PointerEvent) => { + draggingRef.current = false; + if (e.currentTarget.hasPointerCapture(e.pointerId)) { + e.currentTarget.releasePointerCapture(e.pointerId); + } + }, []); + + const onKeyDown = useCallback((e: KeyboardEvent) => { + const big = e.shiftKey ? 10 : 1; + if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { + e.preventDefault(); + setPos((p) => Math.max(0, p - big)); + } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { + e.preventDefault(); + setPos((p) => Math.min(100, p + big)); + } else if (e.key === 'Home') { + e.preventDefault(); + setPos(0); + } else if (e.key === 'End') { + e.preventDefault(); + setPos(100); + } + }, []); + + return ( +

+ {/* Before (하단, 전체) */} + {beforeAlt}

+ + {/* After (상단, 좌측부터 pos% 만큼 노출) */} +

+ {afterOverlay} +

+ + + + + {/* 핸들 = ARIA slider */} + +

+ ); +} diff --git a/src/frontend/src/components/ui/LanguageSwitcher.tsx b/src/frontend/src/components/ui/LanguageSwitcher.tsx new file mode 100644 index 0000000..356159a --- /dev/null +++ b/src/frontend/src/components/ui/LanguageSwitcher.tsx @@ -0,0 +1,101 @@ +/* + * LanguageSwitcher — 다국어 전환 셀렉트(선 SVG 글로브 아이콘 자체 정의, 이모지 금지). + * i18next 언어를 읽고/변경하며, 선택은 languagedetector가 localStorage에 지속화한다. + * 자체 완결형(외부 CSS 비의존) — 공개 셸·로그인·AppShell 어디에나 배선 가능. + * + * AppShell 배선은 통합자 몫 — 여기서는 export만 제공한다. + */ +import { useTranslation } from 'react-i18next'; +import type { CSSProperties } from 'react'; +import { SUPPORTED_LANGS, LANG_LABELS } from '../../i18n'; + +/** 선 스타일 글로브 아이콘(fill:none·stroke:currentColor). */ +function GlobeIcon({ size = 18 }: { size?: number }) { + return ( + + ); +} + +export interface LanguageSwitcherProps { + /** 밝은 헤더(light) 또는 어두운 배경(dark) 대비 — 텍스트 색 결정. */ + variant?: 'light' | 'dark'; + className?: string; + style?: CSSProperties; +} + +export function LanguageSwitcher({ variant = 'light', className, style }: LanguageSwitcherProps) { + const { i18n, t } = useTranslation(); + // resolvedLanguage 는 지역 변형을 축약한 실제 적용 언어. + const current = (i18n.resolvedLanguage ?? i18n.language ?? 'ko').split('-')[0]; + const color = variant === 'dark' ? '#ffffff' : 'var(--color-neutral-700, #344054)'; + + const wrapStyle: CSSProperties = { + display: 'inline-flex', + alignItems: 'center', + gap: 6, + color, + ...style, + }; + + const selectStyle: CSSProperties = { + appearance: 'none', + WebkitAppearance: 'none', + MozAppearance: 'none', + background: 'transparent', + border: 'none', + color: 'inherit', + font: 'inherit', + fontSize: 'var(--fs-caption, 13px)', + fontWeight: 600, + padding: '4px 2px', + cursor: 'pointer', + outline: 'none', + }; + + return ( + + + + {t('lang.select')} + + + + ); +} + +const srOnly: CSSProperties = { + position: 'absolute', + width: 1, + height: 1, + padding: 0, + margin: -1, + overflow: 'hidden', + clip: 'rect(0,0,0,0)', + whiteSpace: 'nowrap', + border: 0, +}; diff --git a/src/frontend/src/components/ui/Offcanvas.tsx b/src/frontend/src/components/ui/Offcanvas.tsx new file mode 100644 index 0000000..3dcfa50 --- /dev/null +++ b/src/frontend/src/components/ui/Offcanvas.tsx @@ -0,0 +1,154 @@ +/* + * 공용 Offcanvas(슬라이드 드로어) — 우측(기본)/좌측에서 슬라이드 인·아웃하는 상세 패널. + * 레퍼런스: Nifty offcanvas 패턴(docs/DESIGN_SYSTEM_NIFTY.md §2.6). + * + * 특징 + * - 백드롭(반투명·클릭 닫기) · 헤더(제목·닫기 X) · 바디(scroll) + * - Esc 닫기 · 포커스 트랩(Tab 순환) · 열림 시 패널 포커스, 닫힘 시 이전 포커스 복원 + * - 슬라이드 트랜지션 — CSS에서 `prefers-reduced-motion` 존중(즉시 표시) + * - role=dialog · aria-modal · aria-label(title) + * - kx 토큰 기반, 다크 대응(색은 CSS 변수 상속) + * + * 사용: + * setOpen(false)} title="배정 상세"> + * …상세 내용… + * + */ +import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'; +import { IconClose } from './icons'; +import './offcanvas.css'; + +export interface OffcanvasProps { + /** 열림 여부. */ + open: boolean; + /** 닫기 콜백(백드롭 클릭·Esc·닫기 버튼). */ + onClose: () => void; + /** 헤더 제목(aria-label에도 사용). */ + title: string; + /** 슬라이드 방향. 기본 'right'. */ + side?: 'right' | 'left'; + /** 패널 너비(CSS 길이). 기본 420px. */ + width?: number | string; + /** 바디 내용. */ + children: ReactNode; + /** 헤더 하단(제목 옆) 부가 액션 슬롯(선택). */ + headerExtra?: ReactNode; + /** 하단 고정 푸터(선택). */ + footer?: ReactNode; +} + +/** 슬라이드 아웃 유지 시간(ms) — CSS transition 과 정렬. reduced-motion 이어도 안전. */ +const EXIT_MS = 240; + +export function Offcanvas({ + open, + onClose, + title, + side = 'right', + width = 420, + children, + headerExtra, + footer, +}: OffcanvasProps) { + // mounted: DOM 유지 여부(닫힘 트랜지션 동안 true 유지) / visible: is-open 클래스(transform 구동) + const [mounted, setMounted] = useState(open); + const [visible, setVisible] = useState(false); + const panelRef = useRef(null); + const prevFocusRef = useRef(null); + + // 열림/닫힘 → mount·visible 전환 + useEffect(() => { + if (open) { + prevFocusRef.current = document.activeElement as HTMLElement | null; + setMounted(true); + // 다음 프레임에 is-open 부여 → 슬라이드 인 + const id = requestAnimationFrame(() => setVisible(true)); + return () => cancelAnimationFrame(id); + } + setVisible(false); + const timer = window.setTimeout(() => setMounted(false), EXIT_MS); + return () => window.clearTimeout(timer); + }, [open]); + + // 열린 뒤 패널로 포커스 이동 · 닫히면 이전 포커스 복원 + useEffect(() => { + if (visible) { + panelRef.current?.focus(); + } else if (prevFocusRef.current) { + prevFocusRef.current.focus?.(); + } + }, [visible]); + + // 열려있는 동안 body 스크롤 잠금 + useEffect(() => { + if (!mounted) return; + const prev = document.body.style.overflow; + document.body.style.overflow = 'hidden'; + return () => { + document.body.style.overflow = prev; + }; + }, [mounted]); + + // Esc 닫기 + 포커스 트랩 + const onKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === 'Escape') { + e.stopPropagation(); + onClose(); + return; + } + if (e.key !== 'Tab') return; + const panel = panelRef.current; + if (!panel) return; + const focusables = panel.querySelectorAll( + 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])', + ); + if (focusables.length === 0) { + e.preventDefault(); + panel.focus(); + return; + } + const first = focusables[0]; + const last = focusables[focusables.length - 1]; + const active = document.activeElement; + if (e.shiftKey) { + if (active === first || active === panel) { + e.preventDefault(); + last.focus(); + } + } else if (active === last) { + e.preventDefault(); + first.focus(); + } + }, + [onClose], + ); + + if (!mounted) return null; + + return ( +

+ + ); +} diff --git a/src/frontend/src/components/ui/States.tsx b/src/frontend/src/components/ui/States.tsx new file mode 100644 index 0000000..a16d13e --- /dev/null +++ b/src/frontend/src/components/ui/States.tsx @@ -0,0 +1,62 @@ +import type { ReactNode } from 'react'; +import { Button } from './Button'; +import './states.css'; + +/** 로딩 스켈레톤 블록. */ +export function Skeleton({ height = 16, width = '100%', radius = 4 }: { + height?: number | string; + width?: number | string; + radius?: number; +}) { + return ( + + ); +} + +/** 빈 상태. */ +export function EmptyState({ + title, + description, + action, + icon, +}: { + title: string; + description?: string; + action?: ReactNode; + icon?: ReactNode; +}) { + return ( +

+ {icon && } +

{title}

+ {description &&

{description}

} + {action &&

{action}

} +

+ ); +} + +/** 에러 상태 + 재시도. */ +export function ErrorState({ + message = '데이터를 불러오지 못했습니다.', + onRetry, +}: { + message?: string; + onRetry?: () => void; +}) { + return ( +

{message}

+ {onRetry && ( +

+ +

+ )} +

+ ); +} diff --git a/src/frontend/src/components/ui/ai-image.css b/src/frontend/src/components/ui/ai-image.css new file mode 100644 index 0000000..3749cb4 --- /dev/null +++ b/src/frontend/src/components/ui/ai-image.css @@ -0,0 +1,130 @@ +.kx-aiimg { + margin: 0; + display: flex; + flex-direction: column; + gap: var(--space-2); +} +.kx-aiimg__frame { + position: relative; + border: var(--border-card); + border-left: var(--accent-ai); + border-radius: var(--radius-lg); + overflow: hidden; + background: var(--color-ai-surface); + aspect-ratio: 4 / 3; +} +.kx-aiimg__img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.kx-aiimg__state { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-3); + color: var(--color-neutral-500); + font-size: var(--fs-caption); +} +.kx-aiimg__skeleton { + background: linear-gradient(100deg, var(--ai-skeleton-a) 30%, var(--ai-skeleton-b) 50%, var(--ai-skeleton-a) 70%); + background-size: 200% 100%; + animation: kx-shimmer 1.4s infinite; +} +@keyframes kx-shimmer { + from { background-position: 200% 0; } + to { background-position: -200% 0; } +} +.kx-aiimg__spinner { + width: 24px; + height: 24px; + border: 3px solid var(--color-primary-100); + border-top-color: var(--color-ai-accent); + border-radius: 50%; + animation: kx-spin 0.8s linear infinite; +} +@keyframes kx-spin { + to { transform: rotate(360deg); } +} +.kx-aiimg__state--failed { + color: var(--color-error); + background: var(--color-error-bg); +} +.kx-aiimg__retry { + border: 1px solid var(--color-error); + color: var(--color-error); + background: var(--color-white); + border-radius: var(--radius-sm); + padding: 4px 12px; + font-size: var(--fs-caption); +} +.kx-aiimg__watermark { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + transform: rotate(-24deg); + color: rgba(255, 255, 255, 0.55); + font-size: 13px; + font-weight: 700; + letter-spacing: 0.04em; + pointer-events: none; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); +} +.kx-aiimg__topbar { + position: absolute; + top: var(--space-2); + left: var(--space-2); + right: var(--space-2); + display: flex; + align-items: center; + gap: var(--space-2); + flex-wrap: wrap; +} +.kx-aiimg__shot, +.kx-aiimg__ver { + background: rgba(16, 24, 40, 0.72); + color: var(--color-white); + border-radius: var(--radius-pill); + padding: 2px 8px; + font-size: 11px; + font-weight: 600; +} +.kx-aiimg__sample { + background: rgba(109, 74, 255, 0.9); + color: var(--color-white); + border-radius: var(--radius-pill); + padding: 2px 8px; + font-size: 11px; + font-weight: 700; +} +.kx-aiimg__gen { + position: absolute; + bottom: var(--space-2); + right: var(--space-2); + display: inline-flex; + align-items: center; + gap: 4px; + background: var(--color-ai-accent); + color: var(--color-white); + border: none; + border-radius: var(--radius-sm); + padding: 6px 12px; + font-size: var(--fs-caption); + font-weight: 600; + cursor: pointer; + box-shadow: var(--shadow-level2); +} +.kx-aiimg__gen:hover { + background: var(--color-ai-accent-strong); +} +.kx-aiimg__notice { + font-size: 11px; + line-height: 15px; + color: var(--color-neutral-500); +} diff --git a/src/frontend/src/components/ui/badge.css b/src/frontend/src/components/ui/badge.css new file mode 100644 index 0000000..2f44a10 --- /dev/null +++ b/src/frontend/src/components/ui/badge.css @@ -0,0 +1,70 @@ +.kx-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 10px; + border-radius: var(--radius-pill); + font-size: var(--fs-caption); + line-height: var(--lh-caption); + font-weight: 600; + white-space: nowrap; +} + +/* 상태 배지 — 옅은 배경 + 진한 텍스트 (AA 대비) */ +.kx-badge--status-draft { + background: var(--color-neutral-100); + color: var(--color-neutral-700); +} +.kx-badge--status-submitted { + background: var(--color-primary-050); + color: var(--color-primary-700); +} +.kx-badge--status-ai-review { + background: var(--color-ai-surface); + color: var(--color-ai-accent); +} +.kx-badge--status-approved { + background: var(--color-success-bg); + color: var(--color-success); +} +.kx-badge--status-rejected { + background: var(--color-error-bg); + color: var(--color-error); +} +.kx-badge--status-building { + background: var(--color-ai-bg); + color: var(--status-building); +} +.kx-badge--status-inspected { + background: var(--color-primary-100); + color: var(--color-primary-700); +} + +.kx-badge--role { + background: var(--color-primary-100); + color: var(--color-primary-700); +} + +/* D-데이 */ +.kx-badge--dday-normal { + background: var(--color-neutral-100); + color: var(--color-neutral-700); +} +.kx-badge--dday-warn { + background: var(--color-warning-bg); + color: var(--color-warning); +} +.kx-badge--dday-over { + background: var(--color-error-bg); + color: var(--color-error); +} + +/* AI 라벨 — 보라 외곽선 */ +.kx-badge--ai { + background: var(--color-ai-surface); + color: var(--color-ai-accent); + border: 1px solid var(--color-ai-accent); +} +.kx-badge__spark { + font-size: 11px; +} diff --git a/src/frontend/src/components/ui/button.css b/src/frontend/src/components/ui/button.css new file mode 100644 index 0000000..60230d8 --- /dev/null +++ b/src/frontend/src/components/ui/button.css @@ -0,0 +1,69 @@ +.kx-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + height: 40px; + padding: 0 var(--space-4); + border-radius: var(--radius-sm); + border: 1px solid transparent; + font-size: var(--fs-body); + font-weight: 600; + line-height: 1; + transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; + white-space: nowrap; +} +.kx-btn--block { + width: 100%; +} +.kx-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} +.kx-btn__icon { + display: inline-flex; + font-size: 18px; +} + +.kx-btn--primary { + background: var(--color-primary-600); + color: var(--color-white); +} +.kx-btn--primary:not(:disabled):hover { + background: var(--color-primary-700); +} + +.kx-btn--secondary { + background: var(--color-white); + color: var(--color-neutral-700); + border-color: var(--color-neutral-200); +} +.kx-btn--secondary:not(:disabled):hover { + background: var(--color-neutral-050); +} + +.kx-btn--ai { + background: var(--color-ai-accent); + color: var(--color-white); + box-shadow: 0 0 12px var(--ai-glow); +} +.kx-btn--ai:not(:disabled):hover { + opacity: 0.92; +} + +.kx-btn--ghost { + background: transparent; + color: var(--color-neutral-700); +} +.kx-btn--ghost:not(:disabled):hover { + background: var(--color-neutral-100); +} + +.kx-btn--danger { + background: var(--color-white); + color: var(--color-error); + border-color: var(--color-error); +} +.kx-btn--danger:not(:disabled):hover { + background: var(--color-error-bg); +} diff --git a/src/frontend/src/components/ui/compare-slider.css b/src/frontend/src/components/ui/compare-slider.css new file mode 100644 index 0000000..3108cd5 --- /dev/null +++ b/src/frontend/src/components/ui/compare-slider.css @@ -0,0 +1,78 @@ +.kx-compare { + position: relative; + width: 100%; + aspect-ratio: 16 / 9; + overflow: hidden; + border: var(--border-card); + border-radius: var(--radius-lg); + background: var(--color-canvas-bg); + user-select: none; + touch-action: none; +} +.kx-compare__img { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + display: block; + pointer-events: none; +} +.kx-compare__after { + position: absolute; + inset: 0; + will-change: clip-path; +} +.kx-compare__label { + position: absolute; + top: var(--space-3); + padding: 2px 10px; + border-radius: var(--radius-pill); + font-size: var(--fs-caption); + font-weight: 600; + color: var(--color-white); + background: rgba(16, 24, 40, 0.72); + pointer-events: none; +} +.kx-compare__label--before { + left: var(--space-3); +} +.kx-compare__label--after { + right: var(--space-3); +} +.kx-compare__handle { + position: absolute; + top: 0; + bottom: 0; + width: 2px; + margin-left: -1px; + padding: 0; + border: none; + background: var(--color-white); + box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.3); + cursor: ew-resize; + display: flex; + align-items: center; + justify-content: center; +} +.kx-compare__handle-grip { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--color-white); + color: var(--color-primary-700); + font-size: 14px; + font-weight: 700; + letter-spacing: -1px; + box-shadow: var(--shadow-level2); +} +.kx-compare__handle:focus-visible { + outline: none; +} +.kx-compare__handle:focus-visible .kx-compare__handle-grip { + outline: 2px solid var(--color-primary-600); + outline-offset: 2px; +} diff --git a/src/frontend/src/components/ui/icons.tsx b/src/frontend/src/components/ui/icons.tsx new file mode 100644 index 0000000..d17f308 --- /dev/null +++ b/src/frontend/src/components/ui/icons.tsx @@ -0,0 +1,504 @@ +/** + * 시스템 아이콘 라이브러리 (design.md §3 SCR-17 항목6). + * + * ── 표준 ── + * - Stitch _icons 세트(24×24 viewBox · stroke=currentColor · stroke-width 2 · fill none)를 표준으로 삼는다. + * - 7종(Dashboard·Calendar·Operations·Analytics·Search·Menu·AiBot)은 Stitch 원본 이식, + * 나머지는 동일 스타일로 자체 제작. + * - currentColor 유지 → 테마·상태색을 CSS `color`로 상속(다크/라이트·상태배지 대응). + * - 기본 장식용(aria-hidden). 의미 전달이 필요하면 `title` prop으로 삽입(role=img 자동). + * + * 사용: <IconDashboard /> · <IconCheck size={16} /> · <IconWarning title="경고" /> + */ +import type { ReactNode, SVGProps } from 'react'; + +export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> { + /** 한 변 픽셀 크기(정사각). 기본 20. */ + size?: number; + /** 접근성 라벨 — 지정 시 role=img + <title> 삽입, 미지정 시 aria-hidden 장식. */ + title?: string; +} + +/** 공통 SVG 래퍼 — 표준 속성(viewBox 24·fill none·currentColor)과 접근성 처리. */ +function Svg({ size = 20, title, children, ...rest }: IconProps & { children: ReactNode }) { + const a11y = title + ? { role: 'img' as const, 'aria-label': title } + : { 'aria-hidden': true as const, focusable: false as const }; + return ( + <svg + width={size} + height={size} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg" + {...a11y} + {...rest} + > + {title ? <title>{title} : null} + {children} + + ); +} + +const S = { stroke: 'currentColor', strokeWidth: 2 } as const; +const SR = { ...S, strokeLinecap: 'round' as const }; +const SRJ = { ...SR, strokeLinejoin: 'round' as const }; + +/* ───────────────────────────────────────────────────────── + * Stitch 원본 7종 (_icons) + * ───────────────────────────────────────────────────────── */ + +/** ▦ 대시보드 (Stitch icon_dashboard). */ +export function IconDashboard(p: IconProps) { + return ( + + ); +} + +/** ⌂ 홈(메인 랜딩 SCR-HOME). */ +export function IconHome(p: IconProps) { + return ( + + ); +} + +/** ▤ 캘린더/일정 (Stitch icon_calendar). */ +export function IconCalendar(p: IconProps) { + return ( + + ); +} + +/** ◐ 현장운영 (Stitch icon_operations — 라디오 웨이브 + 핀). */ +export function IconOperations(p: IconProps) { + return ( + + ); +} + +/** ▨ 경영분석 (Stitch icon_analytics — 막대 차트). */ +export function IconAnalytics(p: IconProps) { + return ( + + ); +} + +/** ⌕ 검색 (Stitch icon_search). */ +export function IconSearch(p: IconProps) { + return ( + + ); +} + +/** ☰ 메뉴 (Stitch icon_menu). */ +export function IconMenu(p: IconProps) { + return ( + + ); +} + +/** AI 봇 (Stitch icon_ai_bot — currentColor 정규화). */ +export function IconAiBot(p: IconProps) { + return ( + + ); +} + +/* ───────────────────────────────────────────────────────── + * 자체 제작 (동일 스타일) + * ───────────────────────────────────────────────────────── */ + +/** ◱ 플로어플랜 스튜디오 (부스 그리드 + 강조 셀). */ +export function IconFloorplan(p: IconProps) { + return ( + + ); +} + +/** ☷ 참가업체 관리 (사람 그룹). */ +export function IconExhibitors(p: IconProps) { + return ( + + ); +} + +/** ❒ 서류·문서. */ +export function IconDocument(p: IconProps) { + return ( + + ); +} + +/** ₩ 정산 (원화 원). */ +export function IconSettlement(p: IconProps) { + return ( + + ); +} + +/** ⚙ 관리자·설정 (기어). */ +export function IconSettings(p: IconProps) { + return ( + + ); +} + +/** ◔ 알림 벨. */ +export function IconBell(p: IconProps) { + return ( + + ); +} + +/** ✦ AI 스파크(4각별) — AI 액션·라벨 액센트. */ +export function IconSpark(p: IconProps) { + return ( + + ); +} + +/** ⚠ △ 경고 (삼각형 + 느낌표). */ +export function IconWarning(p: IconProps) { + return ( + + ); +} + +/** ✓ 체크. */ +export function IconCheck(p: IconProps) { + return ( + + ); +} + +/** ✓ 원형 체크(성공 배지). */ +export function IconCheckCircle(p: IconProps) { + return ( + + ); +} + +/** ✕ 닫기. */ +export function IconClose(p: IconProps) { + return ( + + ); +} + +/** ⛔ 차단(원 + 사선). */ +export function IconBlock(p: IconProps) { + return ( + + ); +} + +/** › 오른쪽 셰브런. */ +export function IconChevronRight(p: IconProps) { + return ( + + ); +} + +/** ‹ 왼쪽 셰브런. */ +export function IconChevronLeft(p: IconProps) { + return ( + + ); +} + +/** ▾ 아래쪽 셰브런(아코디언 열림). */ +export function IconChevronDown(p: IconProps) { + return ( + + ); +} + +/** ‹› 좌우 화살촉(비교 슬라이더 그립). */ +export function IconCompareArrows(p: IconProps) { + return ( + + ); +} + +/** ← 왼쪽 화살표(뒤로). */ +export function IconArrowLeft(p: IconProps) { + return ( + + ); +} + +/** → 오른쪽 화살표(진행·CTA). */ +export function IconArrowRight(p: IconProps) { + return ( + + ); +} + +/** ▲ 위 삼각(증가 델타). */ +export function IconTrendUp(p: IconProps) { + return ( + + ); +} + +/** ▼ 아래 삼각(감소 델타). */ +export function IconTrendDown(p: IconProps) { + return ( + + ); +} + +/** ⭱ 업로드. */ +export function IconUpload(p: IconProps) { + return ( + + ); +} + +/** ⭳ 다운로드. */ +export function IconDownload(p: IconProps) { + return ( + + ); +} + +/** 🖼 이미지. */ +export function IconImage(p: IconProps) { + return ( + + ); +} + +/** ⤢ 화면맞춤(확장). */ +export function IconExpand(p: IconProps) { + return ( + + ); +} + +/** ＋ 확대(플러스). */ +export function IconPlus(p: IconProps) { + return ( + + ); +} + +/** − 축소(마이너스). */ +export function IconMinus(p: IconProps) { + return ( + + ); +} + +/** ◍ 인원(사람 + 카운트). */ +export function IconUsers(p: IconProps) { + return ( + + ); +} + +/** ▦ 그리드(홀 배정). */ +export function IconGrid(p: IconProps) { + return ( + + ); +} + +/** ☀ 해(라이트 테마). */ +export function IconSun(p: IconProps) { + return ( + + ); +} + +/** ☾ 달(다크 테마). */ +export function IconMoon(p: IconProps) { + return ( + + ); +} + +/** ⎋ 로그아웃(문 + 화살표). */ +export function IconLogOut(p: IconProps) { + return ( + + ); +} + +/** ○ 사용자(마이페이지 아바타 폴백). */ +export function IconUser(p: IconProps) { + return ( + + ); +} + +/** ● 오프라인(연결 끊김). */ +export function IconWifiOff(p: IconProps) { + return ( + + ); +} diff --git a/src/frontend/src/components/ui/offcanvas.css b/src/frontend/src/components/ui/offcanvas.css new file mode 100644 index 0000000..929b0a8 --- /dev/null +++ b/src/frontend/src/components/ui/offcanvas.css @@ -0,0 +1,122 @@ +/* + * 공용 Offcanvas 드로어 스타일 — Nifty offcanvas 패턴(DESIGN_SYSTEM_NIFTY §2.6). + * 전역 디자인 토큰(--color-*·--space-*·--radius-*·--fs-*)만 사용. kx-oc__* 네임스페이스. + */ +.kx-oc { + position: fixed; + inset: 0; + z-index: 60; +} + +/* 백드롭 — 페이드 인/아웃 */ +.kx-oc__backdrop { + position: absolute; + inset: 0; + background: rgba(15, 23, 42, 0.45); + opacity: 0; + transition: opacity 0.24s ease; +} +.kx-oc.is-open .kx-oc__backdrop { + opacity: 1; +} + +/* 패널 — 우/좌에서 슬라이드 */ +.kx-oc__panel { + position: absolute; + top: 0; + bottom: 0; + max-width: 92vw; + display: flex; + flex-direction: column; + background: var(--color-white); + box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.22)); + outline: none; + transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1); + will-change: transform; +} +.kx-oc__panel--right { + right: 0; + border-left: var(--border-card); + transform: translateX(100%); +} +.kx-oc__panel--left { + left: 0; + border-right: var(--border-card); + transform: translateX(-100%); +} +.kx-oc.is-open .kx-oc__panel { + transform: translateX(0); +} + +/* 헤더 */ +.kx-oc__head { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-4); + border-bottom: var(--border-card); + flex: 0 0 auto; +} +.kx-oc__title { + flex: 1 1 auto; + min-width: 0; + font-size: var(--fs-h3, var(--fs-body)); + font-weight: 600; + color: var(--color-neutral-900); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.kx-oc__headextra { + flex: 0 0 auto; + display: flex; + align-items: center; + gap: var(--space-2); +} +.kx-oc__close { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: none; + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-neutral-500); + cursor: pointer; + transition: background 0.15s ease, color 0.15s ease; +} +.kx-oc__close:hover { + background: var(--color-neutral-100); + color: var(--color-neutral-900); +} +.kx-oc__close:focus-visible { + outline: 2px solid var(--color-brand-500, #1f29fc); + outline-offset: 1px; +} + +/* 바디(스크롤) */ +.kx-oc__body { + flex: 1 1 auto; + overflow-y: auto; + padding: var(--space-4); +} + +/* 푸터(고정) */ +.kx-oc__foot { + flex: 0 0 auto; + display: flex; + justify-content: flex-end; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border-top: var(--border-card); +} + +/* 모션 최소화 존중 — 슬라이드/페이드 즉시 */ +@media (prefers-reduced-motion: reduce) { + .kx-oc__backdrop, + .kx-oc__panel { + transition: none; + } +} diff --git a/src/frontend/src/components/ui/states.css b/src/frontend/src/components/ui/states.css new file mode 100644 index 0000000..8ee125a --- /dev/null +++ b/src/frontend/src/components/ui/states.css @@ -0,0 +1,38 @@ +.kx-skeleton { + display: block; + background: linear-gradient(100deg, var(--skeleton-a) 30%, var(--skeleton-b) 50%, var(--skeleton-a) 70%); + background-size: 200% 100%; + animation: kx-skel 1.4s infinite; +} +@keyframes kx-skel { + from { background-position: 200% 0; } + to { background-position: -200% 0; } +} + +.kx-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-3); + padding: var(--space-8) var(--space-5); + text-align: center; + color: var(--color-neutral-500); +} +.kx-state__icon { + font-size: 32px; + opacity: 0.6; +} +.kx-state__title { + font-size: var(--fs-h3); + font-weight: 600; + color: var(--color-neutral-900); +} +.kx-state__desc { + font-size: var(--fs-body); + color: var(--color-neutral-500); + max-width: 360px; +} +.kx-state--error .kx-state__title { + color: var(--color-error); +} diff --git a/src/frontend/src/hooks/useCommonCodes.ts b/src/frontend/src/hooks/useCommonCodes.ts new file mode 100644 index 0000000..6b6cd71 --- /dev/null +++ b/src/frontend/src/hooks/useCommonCodes.ts @@ -0,0 +1,37 @@ +/* + * 공통코드 조회 훅 — 코드그룹의 코드 목록을 로드(드롭다운 등 공용). Phase B §5B 공통 레이어. + */ +import { useEffect, useState } from 'react'; +import { commonApi, type CodeDto } from '@/api/common'; + +export function useCommonCodes(grpCode: string): { + codes: CodeDto[]; + loading: boolean; + error: string | null; +} { + const [codes, setCodes] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + let alive = true; + setLoading(true); + setError(null); + commonApi + .codes(grpCode) + .then((rows) => { + if (alive) setCodes(rows); + }) + .catch((e: Error) => { + if (alive) setError(e.message); + }) + .finally(() => { + if (alive) setLoading(false); + }); + return () => { + alive = false; + }; + }, [grpCode]); + + return { codes, loading, error }; +} diff --git a/src/frontend/src/hooks/useResolvedEventId.ts b/src/frontend/src/hooks/useResolvedEventId.ts new file mode 100644 index 0000000..8266fd7 --- /dev/null +++ b/src/frontend/src/hooks/useResolvedEventId.ts @@ -0,0 +1,14 @@ +import { useParams } from 'react-router-dom'; +import { useAuthStore } from '../store/authStore'; + +/** + * 라우트에 :eventId 가 없는 화면(SCR-13 /analytics · SCR-16 /ops)에서 대상 행사를 해소한다. + * 우선순위: 라우트 param → 로그인 시 선택한 currentEventId → 첫 워크스페이스. + * (LoginPage 의 워크스페이스 선택 패턴 — selectEvent(ws.eventId) 로 currentEventId 설정.) + */ +export function useResolvedEventId(): string | null { + const { eventId: routeEventId } = useParams(); + const currentEventId = useAuthStore((s) => s.currentEventId); + const firstWorkspace = useAuthStore((s) => s.workspaces[0]?.eventId ?? null); + return routeEventId ?? currentEventId ?? firstWorkspace; +} diff --git a/src/frontend/src/i18n/index.ts b/src/frontend/src/i18n/index.ts new file mode 100644 index 0000000..017a987 --- /dev/null +++ b/src/frontend/src/i18n/index.ts @@ -0,0 +1,72 @@ +/* + * i18n 초기화 (react-i18next) — 킨텍스 자동전시시스템 다국어 프레임워크. + * 지원 언어: 한국어(ko, 기본/fallback)·English(en)·中文 간체(zh)·日本語(ja). + * 감지 우선순위: localStorage(kintex_lang) → 브라우저(navigator) → fallback ko. + * 선택 언어는 languagedetector가 localStorage에 지속화한다(별도 store 불필요). + * + * 적용 패턴(다른 화면 팀 참고): + * import { useTranslation } from 'react-i18next'; + * const { t } = useTranslation(); + *

{t('public.home.heroTitle')}

+ * 키 네이밍: `<영역>.<화면>.<요소>` (예: public.home.heroTitle, login.title, common.actions.next). + */ +import i18n from 'i18next'; +import { initReactI18next } from 'react-i18next'; +import LanguageDetector from 'i18next-browser-languagedetector'; + +import ko from './locales/ko.json'; +import en from './locales/en.json'; +import zh from './locales/zh.json'; +import ja from './locales/ja.json'; + +/** 지원 언어 코드(순서 = 스위처 노출 순서). */ +export const SUPPORTED_LANGS = ['ko', 'en', 'zh', 'ja'] as const; +export type LangCode = (typeof SUPPORTED_LANGS)[number]; + +/** 스위처 표시용 각 언어의 자국어 라벨. */ +export const LANG_LABELS: Record = { + ko: '한국어', + en: 'English', + zh: '中文', + ja: '日本語', +}; + +/** localStorage 키(languagedetector cache) — WISE 컨벤션에 맞춘 접두사. */ +export const LANG_STORAGE_KEY = 'kintex_lang'; + +void i18n + .use(LanguageDetector) + .use(initReactI18next) + .init({ + resources: { + ko: { translation: ko }, + en: { translation: en }, + zh: { translation: zh }, + ja: { translation: ja }, + }, + fallbackLng: 'ko', + supportedLngs: SUPPORTED_LANGS as unknown as string[], + // 지역 변형(en-US 등)은 기본 언어(en)로 축약. + load: 'languageOnly', + nonExplicitSupportedLngs: true, + detection: { + order: ['localStorage', 'navigator', 'htmlTag'], + lookupLocalStorage: LANG_STORAGE_KEY, + caches: ['localStorage'], + }, + interpolation: { + // React가 XSS 이스케이프를 담당하므로 비활성. + escapeValue: false, + }, + returnEmptyString: false, + }); + +// 문서 lang 속성 동기화(접근성/SEO) — 초기값 + 변경 시. +if (typeof document !== 'undefined') { + document.documentElement.lang = i18n.resolvedLanguage ?? 'ko'; + i18n.on('languageChanged', (lng) => { + document.documentElement.lang = lng; + }); +} + +export default i18n; diff --git a/src/frontend/src/i18n/locales/en.json b/src/frontend/src/i18n/locales/en.json new file mode 100644 index 0000000..9dcd52a --- /dev/null +++ b/src/frontend/src/i18n/locales/en.json @@ -0,0 +1,2530 @@ +{ + "common": { + "brand": "KINTEX", + "appSuffix": "AI Exhibition & Event", + "actions": { + "prev": "Back", + "next": "Next", + "cancel": "Cancel", + "close": "Close", + "home": "Go to Home", + "viewMore": "View Details", + "confirm": "Confirm" + }, + "states": { + "loading": "Loading…", + "empty": "Nothing to display." + }, + "aiWatermark": "AI-generated preview — actual construction may differ", + "aiNotice": "AI-generated images cannot be used for contracts or review documents — drawings are the construction standard", + "weekday": { + "0": "Sun", + "1": "Mon", + "2": "Tue", + "3": "Wed", + "4": "Thu", + "5": "Fri", + "6": "Sat" + } + }, + "lang": { + "select": "Select language" + }, + "shell": { + "menu": { + "home": "Home", + "groups": { + "ops": "Exhibition Ops", + "design": "Design & Build", + "visitor": "Visitors & Marketing", + "finance": "Settlement & Analytics", + "work": "Workspace", + "system": "System Admin" + }, + "items": { + "dashboard": "Dashboard", + "exhibitors": "Exhibitors", + "schedule": "Schedule", + "halls": "Hall Assignment", + "boothSales": "Booth Sales", + "operations": "Onsite Ops", + "floorplan": "Floorplan Studio", + "documents": "Docs & Milestones", + "auctions": "Construction Auction", + "contractor": "Contractor Booths", + "logistics": "Move In/Out", + "visitors": "Visitors", + "checkin": "Check-in Desk", + "leads": "Leads", + "campaigns": "Marketing", + "sponsorship": "Sponsorship", + "cms": "Content CMS", + "settlement": "Settlement", + "analytics": "Analytics", + "worklog": "Work Log", + "workSchedule": "Schedule", + "message": "Messages", + "notice": "Notices", + "meeting": "Meetings", + "report": "Reports", + "approval": "Approvals", + "opinion": "Feedback", + "search": "Search", + "appqr": "Mobile App", + "admin": "Admin Dashboard", + "users": "Users", + "roles": "Roles & Permissions", + "depts": "Departments", + "companies": "Companies", + "menus": "Menus", + "programs": "Programs", + "roleMenus": "Role-Menu Mapping", + "codes": "Common Codes", + "authPolicy": "Auth Policy", + "loginHistory": "Login History", + "audit": "Audit Log", + "errorLog": "Error Log", + "systemHealth": "System Health", + "settings": "System Settings", + "mailConfig": "Mail Config", + "notifyConfig": "Notify Config", + "tenants": "Tenants", + "rulesets": "Rulesets", + "slides": "Login Slides" + }, + "sections": { + "userOrg": "Users & Org", + "menuAuth": "Menus & Codes", + "policyLog": "Policy & Logs", + "statusConfig": "Status & Config", + "masterEtc": "Master & Others" + } + }, + "nav": { + "events": "Events", + "exhibit": "Exhibitors", + "visit": "Visit", + "transport": "Directions" + }, + "searchPlaceholder": "Search events", + "cta": { + "register": "Visitor Pre-registration" + }, + "menuOpen": "Open menu", + "menuClose": "Close menu", + "homeAria": "{{brand}} home", + "primaryMenu": "Main menu", + "mobileMenu": "Mobile menu", + "footer": { + "brandDesc": "Korea's largest exhibition and convention center, connecting innovation in business and culture.", + "quickTitle": "Quick Links", + "quickSchedule": "Event Schedule", + "quickExhibit": "Exhibitor Info", + "quickDirections": "Directions", + "quickSitemap": "Sitemap", + "supportTitle": "Support", + "supportPrivacy": "Privacy Policy", + "supportTerms": "Terms of Use", + "supportContact": "Contact Us", + "contactTitle": "Contact", + "contactAddress": "217-60 Kintex-ro, Ilsanseo-gu, Goyang-si, Gyeonggi-do", + "contactTel": "Main line 1899-1001", + "contactEmail": "exhibition@kintex.com", + "bottom": "© KINTEX. All Rights Reserved. (10390) 217-60, Kintex-ro, Ilsanseo-gu, Goyang-si" + }, + "footerbar": { + "copyright": "© 2026 KINTEX. All rights reserved.", + "systemOk": "System OK", + "systemDown": "Maintenance", + "support": "Support" + }, + "login": "Log in" + }, + "home": { + "heroAria": "About KINTEX", + "eyebrow": "Global Exhibition Platform", + "heroTitleLine1": "Exhibitions that connect the world,", + "heroTitleEm": "KINTEX", + "heroLead": "Experience new innovation in business and culture unfolding at KINTEX, Korea's largest exhibition and convention center.", + "ctaRegister": "Visitor Pre-registration", + "ctaFacility": "View Facilities", + "eventsAria": "Ongoing and upcoming events", + "eventsTitle": "Ongoing · Upcoming Events", + "eventsSub": "Check out the latest happenings at KINTEX right now.", + "eventsMore": "View Full Schedule", + "loading": "Loading event information…", + "empty": "There are no ongoing or upcoming events at this time.", + "tagExhibition": "EXHIBITION", + "booth": "{{count}} booths", + "aiOptimized": "AI Optimized", + "ongoing": "Ongoing", + "ended": "Ended", + "dday": "D-{{n}}", + "ddayZero": "D-DAY", + "register": "Pre-register", + "hallTbd": "Hall to be assigned", + "transportAria": "Directions", + "transportTitle": "Directions", + "transportSub": "Reach KINTEX with even faster accessibility.", + "gtxTitle": "GTX-A KINTEX Station Now Open", + "gtxDesc": "A 3-minute walk from KINTEX Station", + "transit": "Public Transit", + "transitDesc": "Metropolitan buses and subway", + "parking": "Parking", + "parkingDesc": "4,000 vehicles simultaneously", + "shuttle": "Shuttle Bus", + "shuttleDesc": "Circulating major hubs", + "mapAria": "KINTEX location map", + "mapAddress": "217-60 Kintex-ro, Ilsanseo-gu, Goyang-si", + "mapPlace": "KINTEX Exhibition Center 1 & 2", + "mapViewAria": "View map", + "pageAria": "Main home", + "greeting": "Hello, {{name}}", + "greetingGuest": "Hello", + "viewAll": "View all", + "loadError": "Failed to load", + "role": { + "organizer": "Organizer", + "exhibitor": "Exhibitor", + "contractor": "Contractor", + "hallManager": "Hall Manager", + "admin": "Admin" + }, + "kpi": { + "aria": "Summary metrics" + }, + "banner": { + "aria": "Event promo banner", + "prev": "Previous banner", + "next": "Next banner", + "emptyTitle": "No banners registered", + "emptyDesc": "Registered event banners appear here." + }, + "showcase": { + "title": "Ongoing & Upcoming Exhibitions", + "all": "View all", + "prev": "Previous", + "next": "Next", + "statusOngoing": "Ongoing", + "statusUpcoming": "Upcoming", + "emptyTitle": "No exhibitions in this period", + "emptyCta": "View full schedule", + "tab": { + "ongoing": "Ongoing", + "thisMonth": "This month", + "nextMonth": "Next month" + } + }, + "calendar": { + "title": "Exhibition Schedule", + "prev": "Previous month", + "next": "Next month", + "today": "Today", + "all": "All", + "centerFilter": "Exhibition center filter", + "yearMonth": "{{y}}.{{m}}", + "legendOngoing": "Ongoing", + "legendUpcoming": "Upcoming", + "legendEnded": "Ended", + "more": "+{{n}}", + "moreTitle": "{{date}} exhibitions", + "popupEmpty": "No exhibitions on this day", + "listTitle": "Ongoing & Upcoming", + "listEmpty": "No upcoming exhibitions", + "listEmptyCta": "View full schedule", + "loadError": "Failed to load schedule" + }, + "todo": { + "title": "My Tasks", + "noDue": "No due date", + "emptyTitle": "All done", + "emptyDesc": "No tasks to handle", + "emptyCta": "Open notifications" + }, + "notice": { + "title": "Notices", + "more": "More", + "new": "NEW", + "pinned": "Pinned", + "emptyTitle": "No notices", + "emptyCta": "View all notices" + }, + "quick": { + "title": "Quick Actions", + "editor": "Layout Editor", + "invite": "Invite Exhibitor", + "docs": "Documents", + "settlement": "Settlement", + "notice": "Write Notice", + "search": "Search" + }, + "activity": { + "title": "Recent Activity", + "emptyTitle": "No recent activity", + "emptyCta": "Notification settings" + }, + "time": { + "justNow": "just now", + "minutes": "{{n}} min ago", + "hours": "{{n}} hr ago", + "days": "{{n}} days ago" + }, + "workspace": { + "title": "My Events", + "emptyTitle": "No events joined", + "emptyDesc": "Check your invite link or code", + "invite": "Verify code", + "codePh": "Enter invite code" + }, + "charts": { + "title": "Exhibition Charts", + "statusTitle": "Event Status", + "trendTitle": "Monthly Trend", + "centerTitle": "Events by Hall", + "monthSuffix": "", + "empty": "No data to display" + }, + "ai": { + "aria": "KINTEX AI features", + "title": "KINTEX AI", + "badge": "AI", + "subtitle": "AI handles everything from booth design to construction previews and lead analysis", + "askPh": "Ask anything — e.g., this month’s revenue?", + "askBtn": "Ask", + "askAria": "Ask AI", + "tool": { + "layout": { + "title": "AI Booth Layout Studio", + "desc": "Auto-generate options 1·2·3" + }, + "gallery": { + "title": "Construction Preview Gallery", + "desc": "Nano-Banana AI renders" + }, + "nlquery": { + "title": "Natural-Language Query", + "desc": "Ask, get a table back" + }, + "rules": { + "title": "Regulation AI Chatbot", + "desc": "Grounded rule answers" + }, + "leads": { + "title": "Lead AI Scoring", + "desc": "Auto-analyze hot leads" + } + } + }, + "prodEyebrow": "AI Exhibition Automation Platform", + "prodTitle": "KINTEX AI Exhibition Operations Platform", + "prodTagline": "From booth design to construction previews and settlement, all in one flow.", + "ctaLogin": "Log in", + "ctaPreReg": "Pre-register", + "roleAria": "Features by role", + "roleTitle": "Tailored features for every role", + "roleSub": "Tools for organizers, exhibitors, contractors, and visitors alike.", + "stepsAria": "Key features", + "stepsTitle": "Exhibition operations powered by AI", + "stepsSub": "From AI layout to construction preview, reverse auction, and real-time settlement." + }, + "detail": { + "tabs": { + "intro": "Overview", + "program": "Program", + "speakers": "Speakers", + "exhibitors": "Exhibitors", + "transport": "Directions", + "faq": "FAQ" + }, + "eyebrow": "KINTEX Exhibition", + "loadingTitle": "Loading event information…", + "fallbackTitle": "Event Details", + "dateTbd": "Dates to be confirmed", + "placeTbd": "Hall to be assigned", + "lead": "Check the exhibition details at KINTEX and pre-register.", + "factDate": "Date", + "factPlace": "Venue", + "ctaRegister": "Pre-register", + "ctaFloorplan": "View Floor Plan", + "navAria": "Event detail navigation", + "shareAria": "Share", + "share": "Share", + "copyLink": "Copy link", + "overviewAria": "Exhibition overview", + "overviewTitle": "Exhibition Overview", + "overviewLead": "Smart Factory Korea 2026 is the culmination of next-generation manufacturing technology. Discover the latest solutions combining AI, robotics, IoT, and digital twin technology in one place, with over 500 leading companies from around the world participating.", + "statBooth": "Booths", + "statVisitors": "Expected Visitors", + "statVisitorsValue": "30,000+", + "themesTitle": "Key Exhibition Themes", + "theme1Title": "AI & Autonomous Robots", + "theme1Desc": "Smart robot solutions that learn and decide on their own", + "theme2Title": "Digital Twin & IoT", + "theme2Desc": "Real-time sync between virtual worlds and real manufacturing sites", + "theme3Title": "Carbon-Neutral Smart Manufacturing", + "theme3Desc": "Eco-friendly processes maximizing energy efficiency", + "programAria": "Program schedule", + "programTitle": "Program Schedule", + "day1": "Sep 5 (Day 1)", + "day2": "Sep 6 (Day 2)", + "agenda1Title": "The Future of Manufacturing: AI-Driven Productivity Revolution", + "agenda1Desc": "2030 manufacturing strategies and real-world case studies proposed by global AI scholars", + "agenda1Room": "Main Conference Hall", + "agenda2Title": "Combining Industrial 5G and Edge Computing", + "agenda2Desc": "Real-time process control technology demonstration via lag-free data transmission", + "agenda2Room": "Seminar Room A", + "agenda3Title": "Global Buyers Matching Day", + "agenda3Desc": "One-on-one business meetings between promising overseas companies and domestic suppliers", + "agenda3Room": "Business Lounge", + "speakersTitle": "Keynote Speakers", + "speaker1Role": "AI Research Director | TechCorp", + "speaker2Role": "CTO | Automatech", + "speaker3Role": "Chair Professor of Robotics | Korea Univ.", + "speaker4Role": "Global VP | Digitron", + "profileAria": "{{name}} profile", + "faqAria": "Frequently asked questions", + "faqTitle": "Frequently Asked Questions", + "faq1Q": "How do I pre-register?", + "faq1A": "Click the \"Pre-register\" button at the top, choose your type, and enter your information to receive a mobile badge.", + "faq2Q": "Is there an entry fee?", + "faq2A": "General visitors are free with pre-registration. On-site registration may be charged.", + "faq3Q": "Is parking available?", + "faq3A": "Up to 4,000 vehicles can park simultaneously at KINTEX Exhibition Centers 1 and 2.", + "fabCta": "Go to Pre-registration" + }, + "register": { + "steps": { + "type": "Type", + "info": "Info", + "interest": "Interests", + "done": "Done" + }, + "stepsAria": "Pre-registration steps", + "type": { + "general": "General Visitor", + "generalDesc": "General visitors able to attend exhibitions and open sessions", + "buyer": "Buyer", + "buyerDesc": "Corporate representatives for B2B matching and business consultations", + "vip": "VIP", + "vipDesc": "Invited guests with exclusive lounge and full session access" + }, + "step0Title": "Select Participant Type", + "step0Sub": "Please choose your eligibility to participate in the KINTEX exhibition.", + "typeGroupAria": "Participant type", + "step1Title": "Enter Basic Information", + "step1Sub": "Please enter your information for contact and badge issuance.", + "name": "Name", + "namePh": "Enter your name", + "phone": "Phone (Mobile)", + "email": "Email", + "emailPh": "example@domain.com", + "org": "Organization (Company/Institution)", + "orgPh": "Company or school name", + "step2Title": "Select Interests", + "step2Sub": "Select your interests and we'll provide tailored information.", + "interestsAria": "Interests", + "interest": { + "ai": "AI Solutions", + "factory": "Smart Factory", + "robotics": "Robotics", + "bigdata": "Big Data", + "cloud": "Cloud" + }, + "consentPrivacy": "Consent to collection and use of personal information", + "required": "(required)", + "consentMarketing": "Consent to marketing communications (optional)", + "consentMore": "View details", + "errPrivacy": "Please check consent to collection and use of personal information (required).", + "errName": "Please enter your name.", + "errEvent": "Event information could not be verified.", + "doneTitle": "Your pre-registration has been received", + "doneSub": "{{name}}, your pre-registration is complete. Use your mobile badge at the entrance kiosk.", + "visitorDefault": "Visitor", + "badgeAria": "Mobile badge preview", + "badgeName": "John Doe", + "badgeCodeLabel": "Badge Code", + "doneNote": "Scan the QR at the entrance kiosk to print a physical badge.", + "regNo": "Registration No.: {{id}}", + "submitting": "Registering…", + "submit": "Register", + "eventBrowse": "Browse Events", + "floorplan": "View Floor Plan" + }, + "floorplan": { + "sideAria": "Booth search and list", + "filtersTitle": "Industry · Zone · Keyword", + "searchPh": "Search exhibitor or booth number", + "searchAria": "Search booths", + "typeFilter": "Booth type filter", + "hallSelect": "Select hall", + "allHalls": "All halls", + "listAria": "Booth list (non-visual alternative)", + "loading": "Loading booth information…", + "searchResults": "Search results ({{count}})", + "noMatch": "No matching booths.", + "reservedBooth": "Reserved booth", + "availableBooth": "Available", + "type": { + "assembled": "Shell Scheme", + "independent": "Raw Space", + "corner": "Corner Booth", + "island": "Island", + "default": "Booth" + }, + "stageAria": "Interactive hall map", + "boothLayoutAria": "Booth layout", + "boothAria": "Booth {{no}} {{name}}", + "loadFail": "Failed to load the floor plan.", + "noBooth": "No booths to display.", + "popInfoAria": "{{name}} information", + "popDetail": "Booth details", + "directions": "Directions", + "zoomIn": "Zoom in", + "zoomOut": "Zoom out", + "reset": "Reset", + "myLocation": "My location", + "legendAria": "Legend", + "legendAvailable": "Available", + "legendReserved": "Reserved", + "legendPublic": "Public" + }, + "inquiry": { + "heroAria": "Exhibitor inquiry", + "heroTitle": "Exhibitor Inquiry", + "heroLead": "Expand your business to global markets with KINTEX. Our specialist consultants will propose the optimal exhibition space.", + "cta": "Exhibitor Inquiry", + "guideAria": "Exhibitor guide", + "guideTitle": "Exhibitor Guide", + "booth1Tier": "Entry Tier", + "booth1Title": "Shell Scheme", + "booth1Desc": "The most economical choice with basic walls and flooring provided. Recommended for small businesses.", + "booth1Price": "₩ 2,500,000 / unit", + "booth2Tier": "Design Freedom", + "booth2Title": "Raw Space", + "booth2Desc": "Only space is provided, allowing free design tailored to your brand.", + "booth2Price": "₩ 2,000,000 / unit", + "booth3Tier": "Full Solution", + "booth3Title": "Premium", + "booth3Desc": "An all-in-one solution including AI-optimized traffic flow design and a custom branding package.", + "booth3Price": "Inquire separately", + "boothExampleAria": "{{title}} example", + "formAria": "Contact us", + "formTitle": "Contact Us", + "formSub": "Leave any questions about participation or the exhibition. Our staff will reply within 24 business hours.", + "contactPhone": "Phone Inquiry", + "contactPhoneVal": "+82-31-810-8114", + "contactEmail": "Email Inquiry", + "contactEmailVal": "exhibit@kintex.com", + "contactLoc": "Location", + "contactLocVal": "217-60 Kintex-ro, Ilsanseo-gu, Goyang-si, Gyeonggi-do", + "loginHintQ": "Already have an account?", + "loginHintA": "Log in for a faster inquiry", + "company": "Company", + "companyPh": "Enter company name", + "name": "Contact Person", + "namePh": "Enter your name", + "contact": "Contact (Email or Phone)", + "contactPh": "Enter reachable contact information", + "scale": "Estimated Size", + "scaleSelect": "Please select", + "scale1": "1 booth (9sqm)", + "scale2": "2-4 booths (18-36sqm)", + "scale3": "5-9 booths (45-81sqm)", + "scale4": "10 or more", + "hall": "Preferred Hall", + "hallSelect": "Select hall", + "message": "Message", + "messagePh": "Let us know your participation goals or any special requests.", + "agree": "I agree to the collection and use of personal information.", + "required": "(required)", + "errAgree": "Please agree to the collection and use of personal information.", + "errName": "Please enter the contact person's name.", + "errContact": "Please enter a reachable email or phone number.", + "errMessage": "Please enter your message.", + "success": "Your inquiry has been received. Reference No. {{no}}", + "submitting": "Sending…", + "submit": "Send Inquiry" + }, + "microsite": { + "introAria": "About {{brand}}", + "eyebrow": "KINTEX Exhibitor", + "ctaMeeting": "Book a Meeting", + "ctaBrochure": "Company Brochure", + "defaultBrand": "Hanbit Robotics Inc.", + "defaultTagline": "Intelligent robotics solutions that move the future", + "defaultBoothLoc": "Booth A-102 · Hall 7", + "boothUndetermined": "TBD", + "boothPrefix": "Booth", + "boothLocLabel": "KINTEX exhibition booth location", + "viewMap": "View Floor Plan", + "productsAria": "Core product lineup", + "productsTitle": "Core Product Lineup", + "productsSub": "Featured products you can meet on site.", + "product": "Product", + "product1Tag": "Industrial COBOT", + "product1Title": "HR-A1 Collaborative Robot", + "product1Desc": "An industrial collaborative robot with high precision and safety, designed with human collaboration as the top priority.", + "product2Tag": "Smart Logistics", + "product2Title": "HR-M3 Autonomous AMR", + "product2Desc": "An autonomous mobile robot maximizing smart factory logistics efficiency, with real-time obstacle avoidance and route optimization.", + "product3Tag": "AI Vision", + "product3Title": "HR-Q Vision Scanner", + "product3Desc": "Flawless quality inspection based on AI deep learning. Ultra-precise 3D scanning that catches even the tiniest defects.", + "productImgAria": "{{title}} image", + "previewAria": "Booth preview", + "previewTitle": "Booth Preview", + "previewSub": "AI-generated preview booth images. Actual construction results may differ.", + "galleryMain": "Main Exhibition Zone", + "galleryVip": "VIP Lounge", + "galleryAria": "{{label}} AI-generated preview image", + "watermark": "AI-generated preview image — actual construction results may differ", + "meetingAria": "Book a meeting", + "ctaBanner": "We propose customized robotics solutions tailored to your business.", + "ctaBannerBtn": "Book a Meeting Now" + }, + "ticket": { + "viewPurchase": "Buy Tickets", + "viewManage": "Manage · Cancel", + "viewSwitchAria": "Switch ticket view", + "type": { + "general": "General", + "generalDesc": "General visitors and individual participants", + "generalPrice": "₩0 (pre-registration discount)", + "buyer": "Buyer", + "buyerDesc": "For industry professionals and buyers only", + "buyerPrice": "Free · Screening required", + "group": "Group (10+ tickets)", + "groupDesc": "For corporate group visits only", + "groupPrice": "₩9,000 / person", + "vip": "VIP", + "vipDesc": "Exhibition all-pass + VIP lounge access", + "vipPrice": "₩50,000" + }, + "steps": { + "s1": "Event · Type", + "s2": "Buyer", + "s3": "Payment", + "s4": "Done" + }, + "stepsAria": "Booking steps", + "bannerTitle": "Smart Factory Korea 2026", + "bannerDate": "2026.09.05 – 09.08", + "bannerPlace": "Exhibition Center 2, Hall 7", + "posterAria": "Event poster", + "loginBanner": "Log in to automatically save your booking history.", + "loginLink": "Log in", + "sample": "Sample data", + "h2Type": "Select Ticket Type", + "aiOptimized": "AI OPTIMIZED", + "off10": "10% OFF", + "soldout": "Sold Out", + "qtyAria": "{{name}} quantity", + "decrease": "Decrease", + "increase": "Increase", + "h2Booker": "Booker Information", + "bookerName": "Name", + "bookerNamePh": "Full name", + "bookerTel": "Phone", + "bookerEmail": "Email (ticket delivery)", + "consentPrivacy": "Consent to collection and use of personal information", + "required": "(required)", + "consentMarketing": "Consent to marketing communications (optional)", + "h2Pay": "Payment Method", + "payCard": "Credit Card", + "payEasy": "Easy Pay", + "payBank": "Bank Transfer", + "payGroupAria": "Payment method", + "pgNote": "Payment is processed on the PG provider's secure page, and card information is not stored on this site. All transactions are protected by 256-bit SSL encryption. (PG not integrated — demo flow)", + "doneTitle": "Your booking has been received", + "doneNo": "KTX-2026-0000-DEMO", + "doneSub": "We'll email you the ticket (upon live integration). Total {{count}} tickets · Payment {{total}}", + "sampleReady": "Sample data · Payment coming soon", + "walletBtn": "Open Mobile Ticket Wallet", + "manageBtn": "Manage / Cancel Booking", + "summaryAria": "Booking summary", + "summaryTitle": "Booking Summary", + "summaryCount": "Selected quantity", + "count": "{{n}} tickets", + "subtotal": "Subtotal", + "discount": "Discount", + "finalTotal": "Final payment amount", + "nextStep": "Continue to next step", + "freeDone": "Complete Free Booking", + "pay": "Pay", + "payProceed": "Proceed to Payment", + "customerCenter": "Customer center 1588-0000 (weekdays 09–18)", + "manageTitle": "Manage · Cancel Booking", + "manageSub": "You can look up and cancel non-member bookings.", + "lookNo": "Booking number", + "lookNoPh": "KTX-YYYY-XXXXXX", + "lookEmail": "Email", + "lookEmailPh": "example@email.com", + "lookBtn": "Look up", + "loginToView": "Log in to view my bookings", + "notLooked": "Enter your booking number and email to look up. (Sample: enter any value and look up)", + "booked": "Booking complete", + "bookNoLabel": "Booking No.", + "paidAt": "Paid at", + "colType": "Type", + "colQty": "Qty", + "colAmount": "Amount", + "bookerInfo": "Booker info", + "totalPaid": "Total paid", + "refundTitle": "Cancellation · Refund Policy", + "refundD7": "7 days before visit (D-7)", + "refundD7Val": "100% refund", + "refundD3": "3 days before visit (D-3)", + "refundD3Val": "50% refund", + "refundDay": "Day of visit", + "refundDayVal": "0% (non-refundable)", + "refundEst": "Current estimated refund", + "cancelBooking": "Cancel Booking", + "refundNote": "Refunds are processed to the original payment method via the PG provider.", + "aiHelper": "AI Settlement Assistant", + "aiHelperDesc": "For credit card installment payments, restoring your limit through the card company may take about 3–5 business days after cancellation.", + "cancelModalAria": "Confirm booking cancellation", + "cancelModalTitle": "Cancel this booking?", + "cancelModalDesc": "A 100% refund (₩40,000) applies based on D-15. Refunds are processed to the original payment method via the PG provider, with actual refunds upon live integration.", + "cancelConfirm": "Cancel" + }, + "login": { + "title": "Log In", + "sub": "Welcome to the KINTEX Exhibition Management System.", + "email": "Email", + "emailPh": "name@company.com", + "password": "Password", + "remember": "Remember me", + "forgot": "Forgot password", + "errResponse": "We couldn't process the login response. Please try again.", + "errLocked": "Login attempts are temporarily restricted. Please try again shortly.", + "errNotImpl": "The login service is being prepared. Please try again shortly.", + "errGeneric": "An error occurred while logging in.", + "submitting": "Logging in…", + "submit": "Log In", + "signupPrompt": "Don't have an account yet?", + "signup": "Sign Up", + "or": "or", + "internalLogin": "Log in with KINTEX internal account", + "inviteLink": "Join with an invite code →", + "copyright": "© 2026 KINTEX. All rights reserved.", + "wsTitle": "Event Workspace", + "wsSub": "Select an event you are participating in.", + "wsEmptyTitle": "No events joined", + "wsEmptyDesc": "Check your invite link or join with an invite code.", + "wsInvite": "Join with an invite code", + "prodTagline": "KINTEX AI Exhibition Operations Platform" + }, + "signup": { + "title": "Sign Up", + "desc": "Create a KINTEX AI Exhibition Management account. Company name and invite code are optional.", + "email": "Email", + "emailPh": "name@company.com", + "name": "Name", + "namePh": "John Doe", + "password": "Password", + "passwordPh": "8+ characters", + "password2": "Confirm Password", + "password2Ph": "Re-enter password", + "company": "Company (optional)", + "companyPh": "KINTEX Inc.", + "invite": "Invite Code (optional)", + "invitePh": "INV-XXXX", + "mismatch": "Passwords do not match.", + "errNotImpl": "The sign-up service is being prepared. Please try again shortly.", + "errConflict": "This email is already registered.", + "errGeneric": "An error occurred while signing up.", + "noticePending": "Your account has been created. You can log in after administrator approval.", + "noticeActive": "Your account has been created. Please log in now.", + "doneTitle": "Sign-up Complete", + "goLogin": "Go to Login", + "cancel": "Cancel", + "submitting": "Signing up…", + "submit": "Sign Up" + }, + "forgot": { + "requestTitle": "Forgot Password", + "requestDesc": "We'll send a verification code to your registered email. If the account exists, an email will be sent.", + "email": "Email", + "emailPh": "name@company.com", + "sending": "Sending…", + "requestBtn": "Get Verification Code", + "resetTitle": "Reset Password", + "resetDesc": "Enter the verification code sent to <0>{{email}} and your new password.", + "code": "Verification Code", + "codePh": "Code received by email", + "newpw": "New Password", + "newpwPh": "8+ characters", + "prev": "Back", + "changing": "Changing…", + "changeBtn": "Change Password", + "doneTitle": "Password Changed", + "doneDesc": "Please log in with your new password.", + "goLogin": "Go to Login", + "errInvalid": "The verification code is incorrect or has expired.", + "errNotImpl": "The password reset service is being prepared. Please try again shortly.", + "errRequest": "An error occurred during the request.", + "errReset": "An error occurred during the reset.", + "cancel": "Cancel" + }, + "dashboard": { + "countdown": "Opening D-{{n}}", + "degradedTag": "Offline — Sample", + "degradedMsg": "Could not reach the aggregation API; showing demo sample data.", + "loadError": "Failed to load dashboard metrics.", + "timelineAria": "Milestone timeline", + "milestoneEmptyTitle": "No derived schedule", + "milestoneEmptyDesc": "Milestones appear once the event start date is confirmed.", + "mstate": { + "done": "Done", + "current": "In progress", + "upcoming": "Upcoming" + }, + "kpisAria": "Key metrics", + "kpiEmpty": "No aggregated metrics", + "exhibitorStatus": "Exhibitor status", + "sampleTag": "Sample", + "exhibitorEmptyTitle": "No exhibitor booths", + "exhibitorEmptyDesc": "Booths appear here once layouts and designs are registered.", + "colBoothNo": "Booth No.", + "colCompany": "Company", + "colStatus": "Design status", + "feedAria": "Notification feed", + "feedTitle": "Notifications", + "feedEmpty": "No new notifications", + "aerialAria": "Hall aerial view", + "aerialTitle": "Hall aerial view", + "aerialShot": "S7 Hall aerial", + "aerialAlt": "Hall aerial preview image" + }, + "schedule": { + "title": "Exhibition Schedule", + "subtitle": "KINTEX all-hall event scheduling & monitoring — {{n}} events", + "crawlFallback": "(kintex.com crawl fallback)", + "yearFilter": "Year filter", + "allYears": "All years", + "yearN": "{{y}}", + "hallFilter": "Hall filter", + "allHalls": "All halls (1-10)", + "hall1": "Hall 1 Center (Halls 1-5)", + "hall2": "Hall 2 Center (Halls 6-10)", + "catFilter": "Category filter", + "allCats": "All categories", + "statusFilter": "Status filter", + "allStatus": "All statuses", + "cat": { + "exhibition": "Exhibition", + "culture": "Culture & Arts", + "trade": "Trade & Industry", + "tech": "Technology" + }, + "status": { + "ongoing": "Ongoing", + "upcoming": "Upcoming", + "ended": "Ended" + }, + "catExhibit": "{{cat}} show", + "apiWait": "Awaiting event API (crawl data)", + "viewSwitch": "Switch view", + "viewList": "List", + "viewCalendar": "Calendar", + "listLoading": "Loading event list", + "listAria": "Event list", + "loadError": "Failed to load the exhibition schedule.", + "count": "{{n}} events", + "emptyTitle": "No registered events", + "emptyDesc": "Adjust filters or create a new event.", + "newEvent": "New event", + "period": "Period", + "assignedHall": "Assigned hall", + "estVisitors": "Est. visitors", + "editDetail": "Edit details", + "viewLogistics": "View move-in/logistics", + "monthCal": "Month calendar", + "prev": "Prev", + "next": "Next", + "today": "Today", + "yearMonth": "{{m}}/{{y}}", + "miniCal": "Mini calendar", + "prevMonth": "Previous month", + "nextMonth": "Next month", + "offlineSample": "Offline — Sample", + "day": "Day {{d}}", + "dayHasEvent": "Day {{d}} (has event)", + "hallUtil": "Hall utilization", + "hallUtilMonth": "Hall utilization ({{m}}/{{y}})", + "availTitle": "Hall availability", + "availMonth": "Hall availability ({{m}}/{{y}})", + "availHalls": "{{n}} halls total", + "availFreeDays": "{{free}}/{{total}} days free", + "availOpen": "Available", + "availFull": "Full" + }, + "boothsales": { + "title": "Booth Sales", + "subtitleManager": "Manage booth sales inventory — status, price, blocking and settlement", + "subtitleExhibitor": "Pick an available booth, hold it, then confirm purchase", + "noEventTitle": "Please select an event", + "noEventDesc": "No event selected for booth sales.", + "summaryAria": "Booth sales status summary", + "stAvailable": "Available", + "stHeld": "Held", + "stSold": "Sold", + "stBlocked": "Blocked", + "rate": "Rental rate {{rate}} KRW/㎡ ({{ver}})", + "hallFilter": "Hall filter", + "allHalls": "All halls", + "loadError": "Failed to load booth sales inventory.", + "emptyTitle": "No booths to show", + "emptyManage": "No booths registered in this event's layout.", + "emptyExhibitor": "No available booths to select right now.", + "status": { + "available": "Available", + "held": "Held", + "sold": "Sold", + "blocked": "Blocked" + }, + "wonUnit": " KRW", + "hallLabel": "Hall", + "areaLabel": "Area", + "soldTo": "Sold to: {{c}}", + "hold": "Hold", + "purchase": "Confirm purchase", + "release": "Release hold", + "setPrice": "Set price", + "block": "Block", + "unblock": "Unblock", + "settle": "Generate invoices", + "settling": "Generating…", + "heldToast": "Booth held. Confirm your purchase before it expires.", + "purchasedToast": "Purchase confirmed.", + "releasedToast": "Hold released.", + "blockToast": "Booth status updated.", + "priceToast": "Sale price updated.", + "settleToast": "Invoices generated — {{created}} new, {{skipped}} kept.", + "settleFail": "Failed to generate invoices (check permissions).", + "holdConflict": "This booth is already held by another user or sold/blocked.", + "purchaseConflict": "Your hold expired or the booth was taken by another user.", + "blockConflict": "A sold booth cannot be blocked.", + "actionFail": "Failed to process the request.", + "pricePrompt": "Enter sale price (KRW). Leave blank to restore area × rate.", + "priceInvalid": "Enter an amount of 0 or more." + }, + "settlement": { + "title": "Settlement & Payment", + "subtitle": "Manage exhibitor billing & collection status", + "generate": "Generate invoices", + "generating": "Generating…", + "noEventTitle": "Please select an event", + "noEventDesc": "No event has been designated for settlement.", + "genDone": "Invoices generated — {{created}} new, {{skipped}} kept.", + "genError": "Failed to generate invoices. Check permissions or target data.", + "dashError": "Failed to load settlement aggregation.", + "kpisAria": "Settlement key metrics", + "kpiBilled": "Total billed", + "kpiCollected": "Collected", + "kpiOutstanding": "Outstanding", + "kpiOverdue": "Overdue invoices", + "count": "{{n}}", + "collectionRate": "Collection rate {{rate}}%", + "outstandingSub": "Outstanding balance", + "overdueSub": "Past due date", + "distTitle": "Billing status distribution", + "distEmpty": "No aggregated billing", + "listTitle": "Invoice list", + "invoices": "Invoices", + "statusFilter": "Status filter", + "status": { + "all": "All", + "pending": "Unissued", + "invoiced": "Invoiced", + "paid": "Paid", + "overdue": "Overdue", + "cancelled": "Cancelled" + }, + "listError": "Failed to load the invoice list.", + "emptyTitle": "No invoices", + "emptyManage": "Use Generate invoices above to aggregate billing per exhibitor.", + "emptyView": "No invoices have been issued yet.", + "colNo": "Invoice No.", + "colExhibitor": "Exhibitor", + "colBilled": "Billed", + "colPaid": "Paid", + "colOutstanding": "Outstanding", + "colDue": "Due date", + "colStatus": "Status", + "detail": "Details", + "prev": "Prev", + "next": "Next", + "pageInfo": "{{page}} / {{total}} · {{cnt}} total", + "modalAria": "Invoice details", + "invoice": "Invoice", + "close": "Close", + "detailError": "Failed to load invoice details.", + "liItem": "Item", + "liQty": "Qty", + "liUnit": "Unit price", + "liAmount": "Amount", + "noLines": "No line items", + "supplyAmount": "Supply amount", + "vat": "VAT (10%)", + "grandTotal": "Total billed", + "paidOutstanding": "Paid / Outstanding", + "payHistory": "Payment history", + "noPayments": "No payment records.", + "won": "KRW {{v}}", + "issue": "Issue invoice", + "issuing": "Issuing…", + "payAmount": "Payment amount", + "payAmountPh": "Payment amount (KRW)", + "payMethod": "Payment method", + "methodTransfer": "Bank transfer", + "methodCard": "Card", + "methodOther": "Other", + "memo": "Memo", + "memoPh": "Memo (optional)", + "recordPay": "Record payment", + "recording": "Recording…", + "payFail": "Failed to record payment. Check the amount (within total) and permissions.", + "errPositive": "Please enter an amount greater than 0.", + "errExceed": "Cannot exceed the outstanding balance.", + "pgNote": "Actual payment is delegated to an external PG. This screen is for recording payment confirmation only.", + "managerOnly": "Only organizers/hall managers can record or issue payments.", + "colCategory": "Type", + "catRental": "Rental/Utility", + "catAuctionFee": "Auction fee", + "reportTitle": "Settlement Report", + "reportShow": "Show report", + "reportHide": "Close", + "reportHint": "Aggregates totals, collection rate and outstanding by category/status, with CSV export.", + "reportError": "Failed to load the report.", + "reportCsv": "Download CSV", + "reportByCategory": "By category", + "reportByStatus": "By status", + "reportEmpty": "No invoices to aggregate.", + "reportNote": "Totals exclude cancelled invoices. Amounts are server-computed.", + "reportRate": "Collection %", + "reportCount": "Count", + "taxTitle": "Tax Invoice", + "taxNo": "Invoice No.", + "taxSupplier": "Supplier", + "taxBuyer": "Buyer", + "taxItem": "Item", + "taxNone": "No tax invoice issued yet.", + "taxIssue": "Issue tax invoice", + "taxIssuing": "Issuing…", + "taxIssueFail": "Failed to issue the tax invoice.", + "cancelledNote": "This invoice has been cancelled.", + "cancelInvoice": "Cancel invoice", + "refundPreview": "Refund preview", + "refundError": "Failed to load the refund estimate.", + "refundBracket": "Bracket", + "refundRate": "Refund %", + "refundBase": "Base (paid)", + "refundAmount": "Refund", + "forfeitAmount": "Forfeit", + "refundManual": "Auto estimate unavailable (e.g. event date not set) — flagged for finance review.", + "cancelReason": "Cancellation reason", + "cancelReasonPh": "Reason (optional)", + "cancelAbort": "Abort", + "cancelConfirm": "Confirm cancel", + "cancelling": "Processing…", + "cancelFail": "Failed to cancel the invoice." + }, + "hallassign": { + "title": "Hall Assignment · Auto Quote", + "subtitle": "Hall×period assignment status and instant rate-ruleset quotes (M1).", + "start": "From", + "end": "To", + "newAssign": "New assignment", + "board": "Assignment board", + "boardHint": "Overlapping assignments are shown as conflicts.", + "forbiddenTitle": "Hall manager board only", + "forbiddenDesc": "Only KINTEX hall manager accounts can view assignment status. Use the auto quote below.", + "noHalls": "No hall master data.", + "noAssign": "No assignment", + "release": "Release assignment", + "releaseConfirm": "Release the {{hall}} assignment for {{event}}?", + "assignedToast": "Hall assigned.", + "releasedToast": "Assignment released.", + "releaseFail": "Release failed (check permissions).", + "conflictErr": "The hall/period overlaps with another event.", + "assignFail": "Assignment failed.", + "pickEventHall": "Select an event and a hall.", + "modalTitle": "Hall assignment", + "close": "Close", + "event": "Event", + "pickEvent": "Select event…", + "hall": "Hall", + "pickHall": "Select hall…", + "occupyStart": "Occupancy start", + "occupyEnd": "Occupancy end", + "primary": "Primary hall", + "note": "Note", + "optional": "Optional", + "cancel": "Cancel", + "assign": "Assign", + "assigning": "Assigning…", + "autoQuote": "Auto quote", + "quoteHint": "Based on rate ruleset · final amount confirmed by KINTEX", + "startDate": "Start date", + "endDate": "End date", + "boothSize": "Booth size (optional)", + "countPh": "Count", + "calcQuote": "Calculate quote", + "calculating": "Calculating…", + "quoteFail": "Quote calculation failed.", + "quoteReq": "Enter hall, start and end dates.", + "qItem": "Item", + "qBasis": "Basis", + "qAmount": "Amount", + "rentalSubtotal": "Rental subtotal", + "rentalTotal": "Rental total ({{days}} days)", + "deposit": "Management deposit (separate)", + "ruleset": "(ruleset {{v}})", + "openDetail": "Open assignment detail for {{event}}", + "detailTitle": "Assignment detail", + "edit": "Edit", + "dHall": "Hall", + "dPeriod": "Occupancy period", + "dStatus": "Status", + "dNote": "Note", + "primaryTag": "Primary hall", + "dConflict": "Conflicts", + "dNoConflict": "No overlapping assignments.", + "dQuote": "Auto quote summary", + "dQuoteNoPeriod": "No occupancy period — quote unavailable.", + "dQuoteFail": "Could not load quote." + }, + "ai": { + "console": { + "title": "AI Console", + "subtitle": "Query data in natural language and ask about exhibition regulations. Results are for reference and shown with their basis.", + "badge": "Reference", + "tabsAria": "AI console tabs", + "tabNlquery": "Natural-language query", + "tabRules": "Regulation chatbot" + }, + "common": { + "running": "Running…", + "provClaude": "Claude response", + "provOllama": "Ollama response", + "provRules": "From regulation text", + "provNone": "No response", + "unavailable": "The AI feature is temporarily unavailable. Please try again shortly.", + "invalid": "This query violates safety rules and cannot be executed.", + "forbidden": "You are not authorized to use this feature.", + "error": "An error occurred while processing the request." + }, + "nlquery": { + "placeholder": "e.g., Show events with status active", + "inputAria": "Natural-language query question", + "run": "Query", + "guardNote": "Only read-only SELECT runs; personal-data columns are never queried. Up to 200 rows.", + "rowCount": "{{n}} rows", + "showSql": "Show generated SQL", + "hideSql": "Hide generated SQL", + "sqlAria": "Generated SQL", + "emptyTitle": "No results", + "emptyDesc": "No data matched the condition. Try rephrasing your question." + }, + "rules": { + "placeholder": "e.g., What is the maximum structure height?", + "inputAria": "Regulation question", + "run": "Ask", + "groundNote": "Answers are grounded in the regulation and rate rulesets; if no basis is found we tell you honestly.", + "citations": "Cited regulations", + "notFound": "Not found in regulations", + "degraded": "Regulation summary (AI unavailable)" + }, + "assistant": { + "label": "AI Guide", + "inputAria": "Ask the visit assistant", + "sendAria": "Send question", + "chipsLabel": "Frequently asked", + "chip1": "Any robotics expo this weekend?", + "chip2": "Where do I park at KINTEX?", + "chip3": "Recommend a family-friendly exhibition", + "chip4": "How do I pre-register?", + "chip5": "How long via GTX-A?", + "thinking": "Generating answer…", + "error": "Could not get an answer. Please try again.", + "retry": "Try again", + "degraded": "AI guide in maintenance — showing stored-data search results", + "providerAi": "AI answer", + "notFound": "Couldn't find that — please check the full schedule and guide.", + "cardEventsTitle": "Related exhibitions", + "cardTransportTitle": "Getting here", + "cardGuideTitle": "Visit info", + "followupLabel": "Follow-up questions", + "followup1": "Is it free?", + "followup2": "Where to park?", + "followup3": "How to pre-register", + "citations": "Sources", + "register": "Pre-register", + "disclaimer": "AI-generated answer — verify with the official notice." + } + }, + "analytics": { + "title": "Business Analytics", + "subtitle": "KINTEX operating profitability · exhibitor insights", + "perspective": "Analysis perspective", + "operator": "Operator", + "exhibitor": "Exhibitor", + "periodAria": "Analysis period", + "periodEvent": "This event", + "periodD90": "Last 90 days", + "periodAnnual": "Annual", + "exportPdf": "Export PDF", + "exportExcel": "Export Excel", + "noEventTitle": "Please select an event", + "noEventDesc": "No event has been designated for analysis.", + "offlineSample": "Offline — Sample", + "degradedMsg": "Could not reach the aggregation API; showing demo sample data.", + "loadError": "Failed to load business analytics.", + "kpisAria": "Key metrics", + "kpiEmpty": "No aggregated metrics", + "trendAria": "Trend chart", + "trendTitle": "Revenue · Booth trend", + "monthlyAgg": "Monthly aggregation", + "trendHint": "Monthly rental/utility revenue and booth count trend (revenue in KRW).", + "trendEmptyTitle": "No trend data", + "trendEmptyDesc": "No revenue/booth records for an aggregable period.", + "revenue": "Revenue", + "booth": "Booths", + "boothsUnit": "{{n}} booths", + "sectorsAria": "Sector composition", + "sectorsTitle": "Sector composition", + "sectorsEmptyTitle": "Sectors not aggregated", + "sectorsEmptyDesc": "Displayed once the sector classification source (M13) is connected.", + "perfTable": "Performance table", + "pnlTitle": "P&L composition", + "exhibitorPerfTitle": "Exhibitor performance", + "sampleTag": "Sample", + "pnlEmptyTitle": "No P&L items", + "pnlEmptyDesc": "Displayed once booth rental/utility revenue records are aggregated.", + "colItem": "Item", + "colAmount": "Amount", + "colGrade": "Grade", + "perfEmptyTitle": "Exhibitor performance not aggregated", + "perfEmptyDesc": "Displayed once the lead/conversion source (M13 visitors) is connected.", + "colCompany": "Company", + "colLeads": "Leads", + "colConversion": "Conversion" + }, + "global": { + "sectionAria": "Tenant-wide business analytics", + "title": "Enterprise analytics (cross-event)", + "subtitle": "Cross-event revenue comparison · hall utilization trend · exhibitor retention · demand forecast", + "yearsAria": "Analysis years", + "years3": "Last 3 years", + "years5": "Last 5 years", + "years10": "Last 10 years", + "loadErrorTitle": "Failed to load global aggregation", + "loadErrorDesc": "Please try again shortly.", + "kpisAria": "Global key metrics", + "kpiEmpty": "No aggregated metrics", + "evComp": "Cross-event revenue comparison", + "top8": "Top 8", + "evCompHint": "Rental + utility revenue ranking of events with booth layouts (in KRW).", + "evCompEmptyTitle": "No events to compare", + "evCompEmptyDesc": "Displayed once revenue of events with booth layouts is aggregated.", + "revenue": "Revenue", + "retention": "Exhibitor retention", + "retentionCum": "Cumulative return rate", + "returning": "returning", + "retentionEmptyTitle": "Retention by year not aggregated", + "retentionEmptyDesc": "Displayed once the booth-assigned company source is connected.", + "retentionRate": "Return rate", + "occupancy": "Hall utilization trend (monthly)", + "occupancyHint": "Monthly utilization = event-days ÷ (halls × days in month).", + "occupancyEmpty": "No utilization data", + "occupancyRate": "Utilization", + "forecast": "Demand forecast", + "forecastTitle": "Demand forecast (hosting trend)", + "trendProjection": "Trend projection", + "forecastHint": "Actual annual event count + least-squares linear trend projected 2 years ahead (dotted).", + "forecastEmptyTitle": "No history to forecast", + "forecastEmptyDesc": "Displayed once annual hosting history is aggregated.", + "casesUnit": "{{n}}", + "actual": "Actual", + "projected": "Forecast" + }, + "ops": { + "title": "Hall Operations", + "subtitle": "Status based on check-in / utility live aggregation", + "modeAria": "View mode", + "live": "Live", + "history": "History", + "noEventTitle": "Please select an event", + "noEventDesc": "No event has been designated for on-site operations.", + "offlineSample": "Offline — Sample", + "degradedMsg": "Could not reach the aggregation API; showing demo sample data.", + "loadError": "Failed to load on-site operations status.", + "hallStatus": "Hall status", + "checkinDerived": "Derived from check-in (M10) · distributed by area weight", + "sensorNoneHalls": "No sensor · assigned hall list", + "noHallsTitle": "No assigned halls", + "noHallsDesc": "Displayed once halls are assigned to the event.", + "busy": "Busy", + "smooth": "Smooth", + "moderate": "Moderate", + "people": "{{n}}", + "onSiteCheckin": "On-site check-in <0>{{n}}", + "noCheckinAgg": "No check-in aggregation", + "powerLoad": "Power load", + "totalKw": "Total <0>{{v}}kW", + "utilLoadAgg": "Utility request (M4) load aggregation", + "noLoadTitle": "No requested load", + "noLoadDesc": "Displayed per hall once electrical utility requests are received.", + "kw": "{{v}}kW", + "hourlyCheckin": "Hourly check-in", + "hourlyAgg": "Check-in (M10) hourly aggregation", + "noSeriesTitle": "No check-in trend", + "noSeriesDesc": "Hourly trend appears once on-site check-ins are recorded.", + "facilitySensor": "Facility sensor integration", + "facilitySensorTitle": "Facility sensors (HVAC · Lighting · Parking)", + "sensorNoneTitle": "Facility sensors not connected", + "sensorNoneDesc": "HVAC · lighting IoT · parking (iparking) integration is shown once sensors (M14) are connected.", + "temp": "Temp", + "humidity": "Humidity", + "parkingSlots": "{{zone}}: {{occ}}/{{cap}} slots" + }, + "admin": { + "deniedTitle": "Access denied", + "deniedAuthed": "This page is available only to system administrators (Hall Manager · ADMIN). Contact an administrator if you need access.", + "deniedGuest": "The admin back office is available after login.", + "overviewTitle": "System Overview", + "overviewSub": "Real-time metrics and operational status", + "loginSlides": "Manage login slides", + "tenantSwitch": "Switch tenant", + "systemNormal": "System normal", + "moduleShortcuts": "Admin module shortcuts", + "offlineSample": "Offline — Sample", + "degradedMsg": "Could not reach the aggregation API; showing demo sample data.", + "dashLoadError": "Failed to load the admin dashboard.", + "kpisAria": "Key metrics", + "kpiEmpty": "No aggregated metrics", + "visitorTrend": "Visitor trend", + "hourlyVisitors": "Hourly visitors", + "visitors": "Visitors", + "visitorTrendEmptyTitle": "Visitor trend not aggregated", + "visitorTrendEmptyDesc": "Hourly trend appears once visitor sensors (M14) are connected.", + "liveEvents": "Live events", + "noLiveEvents": "No ongoing events", + "hallTbd": "Hall unassigned", + "occupancy": "Occupancy {{n}}%", + "modUsers": "Users", + "modRoles": "Roles & Permissions", + "modCodes": "Common codes", + "modMenus": "Menus", + "modAudit": "Audit log", + "modSettings": "System settings", + "modRulesets": "Rulesets", + "modTenants": "Tenants" + }, + "tenant": { + "title": "Tenant Management · Onboarding", + "subtitle": "Platform super-admin only · add venues via data onboarding without code deployment.", + "sampleTag": "Sample · Not implemented", + "sampleNote": "Multi-tenancy (tenant CRUD, onboarding, isolation) is not yet in the backend, so this screen shows the target IA. Live data will be wired after multi-tenancy is introduced.", + "listAria": "Tenant list", + "venue": "Venue", + "notImpl": "Not implemented", + "addVenue": "Add venue", + "code": "Code", + "domain": "Domain", + "status": "Status", + "events": "Events", + "users": "Users", + "wizardAria": "Onboarding wizard", + "onboardingOf": "{{name}} onboarding", + "dataOnboarding": "Data onboarding without code deployment", + "wiz": { + "create": { + "label": "Create tenant", + "desc": "Register code & display name" + }, + "domain": { + "label": "Subdomain", + "desc": "Assign DNS & branding domain" + }, + "brand": { + "label": "Branding", + "desc": "Logo, colors, public-site theme" + }, + "master": { + "label": "Master data entry", + "desc": "Seed halls, rates, rulesets" + }, + "admin": { + "label": "Admin account", + "desc": "Invite tenant administrator" + }, + "smoke": { + "label": "Isolation smoke test", + "desc": "Verify cross-tenant isolation" + }, + "activate": { + "label": "Activate", + "desc": "Switch to operation" + } + }, + "tstatus": { + "active": "Active", + "onboarding": "Onboarding", + "suspended": "Suspended" + } + }, + "ruleset": { + "title": "Regulation Ruleset Versions", + "subtitle": "Ruleset version history and rule items for regulation revisions.", + "readonly": "Read only", + "readonlyNote": "Rulesets are version-controlled as deployment resources (rulesets/*.json). Editing and version creation are done by replacing resources when regulations are revised; this screen is view-only.", + "listError": "Failed to load the ruleset list.", + "noRulesets": "No deployed rulesets", + "versionHistory": "Version history", + "rulesCount": "{{n}} rules", + "effectiveDate": "Effective {{date}}", + "ruleList": "Rule list", + "rulesOf": "{{name}} rules ({{n}})", + "detailError": "Failed to load the full rules.", + "noRulesTitle": "Ruleset has no rule array", + "noRulesDesc": "A ruleset that defines only rates/unit prices without rules (e.g. rate master).", + "colRuleName": "Rule name", + "colValue": "Value/setting", + "colLogic": "Logic / Requirement", + "colSeverity": "Violation level", + "block": "Block", + "warn": "Warn", + "required": "Required", + "perHall": "Per hall {{unit}}", + "docNeeded": "Document required: {{doc}}" + }, + "audit": { + "title": "Audit Log", + "subtitle": "Tracks all admin actions (approvals, awards, setting changes) and key domain events. (Integrity preserved)", + "exportCsv": "Export CSV", + "filterAria": "Audit log filter", + "actionType": "Action type", + "allActions": "All actions", + "actorId": "Actor ID", + "actorIdPh": "e.g. user-102", + "eventId": "Event ID", + "eventIdPh": "e.g. EVT-2026-01", + "reset": "Reset", + "applyFilter": "Apply filter", + "loadError": "Failed to load the audit log.", + "tableAria": "Audit log table", + "emptyTitle": "No audit records match the criteria", + "emptyDesc": "Adjust or reset filters and search again.", + "colTime": "Time", + "colUser": "User", + "colAction": "Action", + "colTarget": "Target", + "colEvent": "Event", + "colResult": "Result", + "showing": "Showing <0>{{from}}-{{to}} / <1>{{total}} total", + "prev": "Prev", + "next": "Next", + "rowsShow": "Rows", + "rowsPerPage": "Rows per page", + "rowsN": "{{n}}", + "success": "Success", + "failure": "Failure", + "csvTime": "Time", + "csvActorId": "ActorID", + "csvActorName": "ActorName", + "csvAction": "Action", + "csvTargetType": "TargetType", + "csvTargetId": "TargetID", + "csvEventId": "EventID", + "csvResult": "Result", + "csvSummary": "Summary" + }, + "role": { + "title": "Roles & Permissions (RBAC)", + "subtitle": "Assign resource permissions per role (Organizer, Exhibitor, Contractor, Hall Manager, Admin, Visitor) in a matrix.", + "addRole": "Add role", + "loadError": "Failed to load roles/permissions.", + "noRolesTitle": "No roles defined", + "noRolesDesc": "Add a role to configure RBAC.", + "roleList": "Role list", + "role": "Role", + "codePerm": "{{code}} · {{n}} permissions", + "unused": "Unused", + "permMatrix": "Permission matrix", + "rolePerm": "{{name}} permissions", + "roleInfo": "Role info", + "deleteConfirm": "Delete the role '{{name}}'?", + "delete": "Delete", + "noPerms": "No permissions defined", + "selectRole": "Select a role", + "saved": "Role saved.", + "deleted": "Role deleted.", + "addRoleModal": "Add role", + "editRole": "Edit role info", + "modalDesc": "Permission assignment is managed by checkboxes in the matrix after saving.", + "roleCode": "Role code *", + "roleCodePh": "e.g. ORGANIZER", + "roleName": "Role name *", + "description": "Description", + "useYn": "In use", + "use": "In use", + "noUse": "Unused", + "cancel": "Cancel", + "save": "Save", + "saving": "Saving…", + "errRequired": "Role code and name are required.", + "errDupCode": "This role code already exists." + }, + "menu": { + "title": "Menu Management", + "subtitle": "Manage the per-role navigation menu tree with paths and access roles.", + "addMenu": "Add menu", + "loadError": "Failed to load menus.", + "treeAria": "Menu tree", + "emptyTitle": "No registered menus", + "emptyDesc": "Add a menu.", + "colName": "Menu name", + "colPath": "Path", + "colType": "Type", + "colRole": "Access role", + "colSort": "Order", + "colUse": "In use", + "colManage": "Manage", + "all": "All", + "unused": "Unused", + "used": "In use", + "edit": "Edit", + "delete": "Delete", + "deleteConfirm": "Delete the menu '{{name}}'? Sub-menus, if any, will be cleaned up together.", + "saved": "Menu saved.", + "deleted": "Menu deleted.", + "editMenu": "Edit menu", + "menuId": "Menu ID (unique key) *", + "menuIdPh": "e.g. admin-users", + "menuName": "Menu name *", + "parent": "Parent menu", + "topLevel": "(Top level)", + "path": "Path", + "pathPh": "e.g. /admin/users", + "type": "Type", + "accessRole": "Access role", + "accessRolePh": "e.g. ADMIN (empty = all)", + "sort": "Order", + "useYn": "In use", + "cancel": "Cancel", + "save": "Save", + "saving": "Saving…", + "errName": "Menu name is required.", + "errId": "Menu ID (unique key) is required.", + "errDupId": "This menu ID already exists." + }, + "code": { + "title": "Common Code Management", + "subtitle": "Manage common code groups and code values used in dropdowns and classifications.", + "addGroup": "Add group", + "groupLoadError": "Failed to load code groups.", + "noGroupsTitle": "No code groups", + "noGroupsDesc": "Add a group to configure common codes.", + "codeGroup": "Code group", + "codeValues": "Code values", + "valuesOf": "{{name}} values", + "editGroup": "Edit code group", + "deleteGroup": "Delete group", + "deleteGroupConfirm": "Delete group '{{name}}' and its codes?", + "addCode": "Add code", + "codeLoadError": "Failed to load code values.", + "noCodesTitle": "No codes", + "noCodesDesc": "Add a code.", + "code": "Code", + "name": "Name", + "value": "Value", + "sort": "Order", + "use": "In use", + "manage": "Manage", + "unused": "Unused", + "used": "In use", + "edit": "Edit", + "delete": "Delete", + "deleteCodeConfirm": "Delete code '{{name}}'?", + "groupSaved": "Code group saved.", + "groupDeleted": "Code group deleted.", + "codeSaved": "Code saved.", + "codeDeleted": "Code deleted.", + "groupCode": "Group code *", + "groupName": "Group name *", + "description": "Description", + "useYn": "In use", + "cancel": "Cancel", + "save": "Save", + "saving": "Saving…", + "errGroupRequired": "Group code and name are required.", + "errDupGroup": "This group code already exists.", + "editCode": "Edit code", + "group": "Group", + "codeReq": "Code *", + "nameReq": "Name *", + "attr1": "Attribute 1 (attr1)", + "errCodeRequired": "Code and name are required.", + "errDupCode": "This code already exists." + }, + "sysuser": { + "title": "User Management", + "subtitle": "Manage account creation/editing, role assignment, status (active/locked/disabled), and OTP reset. Passwords are masked and not displayed.", + "addUser": "Add user", + "searchAria": "User search", + "keyword": "Keyword", + "keywordPh": "Name·Email", + "role": "Role", + "status": "Status", + "all": "All", + "reset": "Reset", + "search": "Search", + "loadError": "Failed to load the user list.", + "listAria": "User list", + "emptyTitle": "No users", + "emptyDesc": "Adjust search criteria or add a user.", + "colUser": "User", + "colEmail": "Email", + "colRole": "Role", + "colDept": "Dept", + "colStatus": "Status", + "colLastLogin": "Last login", + "colManage": "Manage", + "hallManagerTag": "Hall Mgr", + "otpSet": "Set", + "otpUnset": "Not set", + "edit": "Edit", + "lock": "Lock", + "unlock": "Unlock", + "otpResetBtn": "Reset OTP", + "otpResetConfirm": "Reset OTP for {{name}}?", + "saved": "User saved.", + "statusChanged": "Status changed.", + "otpReset": "OTP reset.", + "active": "Active", + "locked": "Locked", + "disabled": "Disabled", + "editUser": "Edit user", + "newDesc": "The initial password is not displayed on screen after saving.", + "editDesc": "Email cannot be edited. Password reset follows a separate policy.", + "email": "Email *", + "displayName": "Display name *", + "dept": "Department", + "initPassword": "Initial password *", + "hallManagerCheck": "Hall Manager (internal operator)", + "cancel": "Cancel", + "save": "Save", + "saving": "Saving…", + "errRequired": "Email and display name are required.", + "errPassword": "New users require an initial password.", + "totalUsers": "<0>{{total}} users total", + "prev": "Prev", + "next": "Next" + }, + "settings": { + "title": "System Settings", + "subtitle": "Manage system parameters such as global policies, feature toggles, and AI gates. Secret values are masked.", + "loadError": "Failed to load system settings.", + "emptyTitle": "No settings registered", + "emptyDesc": "Add your first setting item in the form below.", + "saved": "Setting saved.", + "deleted": "Setting deleted.", + "deleteConfirm": "Delete the setting '{{key}}'?", + "general": "General", + "groupAria": "Settings group {{name}}", + "secret": "Secret", + "secretTitle": "Secret — value masked", + "on": "On", + "off": "Off", + "secretPh": "Set (masked) — enter new value to change", + "save": "Save", + "delete": "Delete", + "deleteKey": "Delete {{key}}", + "secretHint": "The secret value is never exposed. Saving without entering a value keeps the existing value.", + "addAria": "Add setting", + "addTitle": "Add / override setting", + "settingKey": "Setting key", + "settingKeyPh": "e.g. deadline.utility.days", + "value": "Value", + "type": "Type", + "description": "Description", + "secretCheck": "Secret (mask value)" + }, + "slide": { + "title": "Login Slide Management", + "subtitle": "Login screen left carousel images/text — the <0>latest 5 by registration order among active slides rotate.", + "addAria": "Add new slide", + "addTitle": "Add new slide", + "imageLabel": "Image (PNG/JPG/WebP, up to 8MB)", + "preview": "Preview", + "titleLabel": "Title text", + "titlePh": "e.g. KINTEX, Asia's leading exhibition & convention center", + "captionLabel": "Caption (subtext)", + "captionPh": "e.g. Discover business opportunities across 100,000 sqm of exhibition space.", + "submitting": "Registering…", + "submit": "Register slide", + "listAria": "Slide list", + "registered": "Registered slides", + "countActive": "{{total}} total · {{active}} active", + "emptyTitle": "No registered slides", + "emptyDesc": "Registered images and text appear in the login carousel. (5 defaults shown when none registered)", + "live": "Live", + "inactive": "Inactive", + "registeredAt": "Registered {{date}}", + "active": "Active", + "delete": "Delete", + "listError": "Failed to load the list.", + "errImage": "Please select a slide image.", + "errTitle": "Please enter the title text.", + "createFail": "Registration failed.", + "updateFail": "Update failed.", + "deleteFail": "Deletion failed.", + "deleteConfirm": "Delete the slide \"{{title}}\"?" + }, + "approval": { + "queueTitle": "Approval Inbox", + "search": "Search", + "searchPlaceholder": "Search title...", + "pendingCount": "Pending", + "pendingList": "Documents awaiting my approval", + "colTitle": "Title", + "colDocType": "Type", + "colDrafter": "Drafter", + "colSubmitted": "Submitted", + "colStep": "Step", + "colStatus": "Status", + "colAction": "Action", + "open": "Open", + "emptyPending": "No documents to approve", + "status": { + "DRAFT": "Draft", + "SUBMITTED": "Submitted", + "IN_PROGRESS": "In progress", + "APPROVED": "Approved", + "REJECTED": "Rejected", + "CANCELED": "Canceled" + }, + "reviewTitle": "Approval Review", + "version": "Version", + "drafter": "Drafter", + "step": "Step", + "demoMode": "Preview (demo)", + "downloadOriginal": "Download original", + "previewAria": "Document preview", + "lineAria": "Approval line & history", + "docBody": "Body", + "line": "Approval line", + "history": "History", + "noHistory": "No history yet", + "lineStatus": { + "WAIT": "Waiting", + "CURRENT": "In review", + "APPROVED": "Approved", + "REJECTED": "Rejected", + "SKIPPED": "Skipped" + }, + "action": { + "SUBMIT": "Submit", + "APPROVE": "Approve", + "REJECT": "Reject", + "RESUBMIT": "Resubmit", + "CANCEL": "Cancel" + }, + "approve": "Approve", + "reject": "Reject", + "approvedDone": "Approved.", + "rejectedDone": "Rejected.", + "canActHint": "You are the current approver for this document.", + "notApproverHint": "Only the current-step approver can act.", + "demoFootNote": "Select a document from the approval inbox to approve or reject.", + "demoHint": "No approval document selected. Please open one from the approval inbox.", + "commentPlaceholder": "Enter a comment (required to reject)", + "comment": "Comment", + "boxTitle": "Approvals", + "compose": "New Draft", + "composeTitle": "New Approval Draft", + "resubmitTitle": "Resubmit Rejected Document", + "backToList": "Back to list", + "tab": { + "PENDING": "To Approve", + "DRAFTED": "My Drafts", + "REJECTED": "Rejected", + "DONE": "Completed" + }, + "empty": { + "PENDING": "No documents to approve", + "DRAFTED": "No submitted documents", + "REJECTED": "No rejected documents", + "DONE": "No completed documents" + }, + "resubmitBtn": "Resubmit", + "draftSave": "Save Draft", + "submitDoc": "Submit", + "cancel": "Cancel", + "saving": "Processing…", + "docType": "Document Type", + "docTypes": { + "GENERAL": "General", + "DESIGN": "Design/Drawing", + "DOCUMENT": "Document", + "EXPENSE": "Expense", + "ETC": "Other" + }, + "titleLabel": "Title", + "titlePlaceholder": "Enter the document title", + "contentLabel": "Content", + "contentPlaceholder": "Enter the document content", + "err": { + "titleRequired": "Please enter a title.", + "lineRequired": "Add at least one approver to the line." + }, + "createdDraft": "Saved as draft.", + "submittedDone": "Submitted for approval.", + "resubmittedDone": "Resubmitted for approval.", + "rejectedReason": "Rejection Reason", + "canResubmitHint": "This draft was rejected. You can edit and resubmit it.", + "lineEditor": { + "empty": "No approvers yet. Add an approver.", + "stepNo": "Step {{n}}", + "idPlaceholder": "Approver ID", + "namePlaceholder": "Display name (optional)", + "approverId": "Step {{n}} approver ID", + "approverName": "Step {{n}} approver name", + "moveUp": "Move up", + "moveDown": "Move down", + "remove": "Remove approver", + "add": "Add approver" + }, + "rejectModalTitle": "Reject Document", + "approveModalTitle": "Approve Document", + "rejectReason": "Rejection reason", + "rejectReasonPlaceholder": "Enter the rejection reason", + "rejectReasonHint": "The reason is sent to the drafter and shown on resubmission.", + "commentOptional": "Enter a comment (optional)" + }, + "auction": { + "boq": { + "title": "Bill of Quantities (auto)", + "error": "Failed to load the bill of quantities.", + "scopeBooth": "Booth {{label}}", + "scopeEvent": "All booths in the event", + "summary": "{{count}} booth(s) · {{area}}㎡", + "colSeq": "No", + "colTrade": "Trade", + "colItem": "Item", + "colQty": "Qty", + "colUnit": "Unit", + "colBasis": "Basis" + } + }, + "logistics": { + "title": "Logistics Hub", + "subtitle": "Move-in/out docks · equipment · rentals · inbound tracking", + "tabsAria": "Switch logistics function", + "tabs": { + "dock": "Dock Booking", + "equipment": "Equipment", + "rental": "Rentals", + "inbound": "Inbound" + }, + "boothNo": "Booth No.", + "qty": "Qty", + "estimate": "Estimated amount", + "submitting": "Processing…", + "submitOk": "Request received.", + "submitErr": "Request failed.", + "statusUpdated": "Status updated.", + "loadErr": "Failed to load logistics data.", + "serverAmountNote": "Amount is finalized by the server", + "equipment": { + "formTitle": "Equipment Request", + "item": "Equipment", + "days": "Days of use", + "daysUnit": "d", + "useDate": "Planned use date", + "submit": "Request Equipment", + "listTitle": "Requests", + "empty": "No requests yet", + "emptyDesc": "Request forklifts, lifts and more.", + "approve": "Approve", + "reject": "Reject", + "rejectReason": "Rejected due to site conditions", + "done": "Mark done", + "st": { + "requested": "Requested", + "approved": "Approved", + "rejected": "Rejected", + "done": "Done" + } + }, + "rental": { + "formTitle": "Rental Order", + "item": "Rental item", + "start": "Start date", + "end": "End date", + "submit": "Place Order", + "listTitle": "Orders", + "empty": "No orders yet", + "emptyDesc": "Order tables, chairs, monitors and more.", + "period": "{{days}} day(s)", + "confirm": "Confirm", + "cancel": "Cancel", + "deliver": "Mark delivered", + "st": { + "ordered": "Ordered", + "confirmed": "Confirmed", + "cancelled": "Cancelled", + "delivered": "Delivered" + } + }, + "inbound": { + "formTitle": "Register Inbound Shipment", + "trackingNo": "Tracking no.", + "carrier": "Carrier", + "itemDesc": "Cargo", + "eta": "ETA date", + "submit": "Register Shipment", + "submitSub": "Track inbound status after registering", + "listTitle": "Inbound Status", + "empty": "No inbound shipments", + "emptyDesc": "Register pre-delivery tracking numbers.", + "st": { + "registered": "Registered", + "inbound_scheduled": "Scheduled", + "arrived_warehouse": "At warehouse", + "delivered_booth": "Delivered to booth" + }, + "advance": { + "inbound_scheduled": "Mark scheduled", + "arrived_warehouse": "Mark arrived", + "delivered_booth": "Mark delivered to booth" + } + } + }, + "appqr": { + "title": "Download the KINTEX Exhibition App", + "subtitle": "Install the mobile app", + "intro": "Scan the QR code or use the button below to install the KINTEX Exhibition App.", + "about": "App size {{size}}", + "appName": "KINTEX AI Exhibition App", + "builtAt": "Built {{date}}", + "download": "Download APK", + "copyLink": "Copy link", + "copied": "Copied", + "refresh": "Refresh", + "retry": "Retry", + "qrAlt": "App download QR code", + "iosNote": "iOS support will be available after the official App Store release.", + "notReady": { + "title": "App is being prepared", + "desc": "The installation file has not been published yet. Please try again shortly." + }, + "steps": { + "heading": "How to install", + "s1": "Scan the QR code with your phone camera.", + "s2": "Open the link shown and download the APK.", + "s3": "Allow \"Install unknown apps\".", + "s4": "After installation, open the app and sign in." + } + }, + "authPolicy": { + "title": "Authentication Policy", + "subtitle": "Configure password rules and login lockout policy.", + "loadError": "Failed to load the authentication policy.", + "saved": "Authentication policy saved.", + "pwSection": "Password Policy", + "pwMinLength": "Minimum length", + "pwExpireDays": "Expiry period (days)", + "pwRequireUpper": "Require uppercase", + "pwRequireNumber": "Require number", + "pwRequireSpecial": "Require special character", + "lockSection": "Login Lockout", + "loginMaxFail": "Max failed attempts", + "lockMinutes": "Lockout duration (min)", + "sessionTimeoutMin": "Session timeout (min)" + }, + "company": { + "title": "Company Management", + "subtitle": "Manage exhibitor and partner company information.", + "add": "Add company", + "edit": "Edit company", + "searchPh": "Search by company name or business number", + "partnerType": "Type", + "allTypes": "All types", + "bizType": "Industry", + "ceo": "CEO", + "contact": "Contact person", + "tel": "Phone", + "telEditHint": "Enter digits only.", + "telMaskNote": "The phone number is masked for security.", + "address": "Address", + "colName": "Company name", + "colBizNo": "Business number", + "colType": "Type", + "colContact": "Contact", + "colTel": "Phone", + "colUse": "Active", + "deleteConfirm": "Delete company {{name}}?", + "deleted": "Company deleted.", + "saved": "Company information saved.", + "errRequired": "Please fill in the required fields.", + "loadError": "Failed to load the company list.", + "emptyTitle": "No companies registered", + "emptyDesc": "Please add a new company." + }, + "dept": { + "title": "Department Management", + "subtitle": "Manage the organizational department structure.", + "addRoot": "Add top-level department", + "addChild": "Add sub-department", + "add": "Add department", + "edit": "Edit department", + "name": "Department name", + "deleteConfirm": "Delete department {{name}}?", + "deleted": "Department deleted.", + "saved": "Department saved.", + "errRequired": "Please enter a department name.", + "loadError": "Failed to load the department list.", + "emptyTitle": "No departments registered", + "emptyDesc": "Please add a top-level department.", + "searchPlaceholder": "Search departments", + "searchNoResult": "No matching departments.", + "treeAria": "Department organization tree", + "expand": "Expand", + "collapse": "Collapse", + "expandAll": "Expand all", + "collapseAll": "Collapse all", + "selectHint": "Select a department from the tree.", + "colId": "Department ID", + "colParent": "Parent department", + "topLevel": "Top level", + "colChildCount": "Sub-departments", + "childCountValue": "{{n}}", + "errHasChildren": "Cannot delete a department that has sub-departments." + }, + "errorLog": { + "title": "Error Log", + "subtitle": "View the system error history.", + "filterAria": "Error log filter", + "code": "Error code", + "codePh": "Enter error code", + "loadError": "Failed to load the error log.", + "emptyTitle": "No error logs", + "emptyDesc": "No error logs match the criteria.", + "colTime": "Time", + "colCode": "Code", + "colMethod": "Method", + "colPath": "Path", + "colSummary": "Summary" + }, + "loginHistory": { + "title": "Login History", + "subtitle": "View successful and failed login history.", + "filterAria": "Login history filter", + "result": "Result", + "allResults": "All results", + "userId": "User ID", + "userIdPh": "Enter user ID", + "loadError": "Failed to load the login history.", + "emptyTitle": "No login history", + "emptyDesc": "No login history matches the criteria.", + "colTime": "Date/Time", + "colResult": "Result", + "colUser": "User", + "colEmail": "Email", + "colIp": "IP address", + "colReason": "Reason" + }, + "marketing": { + "sentDone": "{{n}} messages sent.", + "sentDisabled": "Already sent ({{n}})", + "sendFail": "Failed to send.", + "confirm": "Send the {{name}} campaign?", + "sending": "Sending…", + "sendBtn": "Send" + }, + "program": { + "title": "Program Management", + "subtitle": "Manage screen programs and their access URLs.", + "add": "Add program", + "edit": "Edit program", + "searchPh": "Search by program name", + "deleteConfirm": "Delete program {{name}}?", + "deleted": "Program deleted.", + "saved": "Program saved.", + "errRequired": "Please fill in the required fields.", + "loadError": "Failed to load the program list.", + "emptyTitle": "No programs registered", + "emptyDesc": "Please add a new program.", + "colName": "Program name", + "colType": "Type", + "colUrl": "URL", + "colCategory": "Category", + "colUse": "Active" + }, + "roleMenu": { + "title": "Role Menu Permissions", + "subtitle": "Grant menu access permissions to roles.", + "loadError": "Failed to load permission information.", + "noRoles": "No roles registered.", + "roleList": "Role list", + "role": "Role", + "matrix": "Permission matrix", + "noMenus": "No menus.", + "colMenu": "Menu", + "colAccess": "Access", + "colRead": "Read", + "colWrite": "Write", + "saved": "Permissions saved." + }, + "sysHealth": { + "title": "System Health", + "subtitle": "Monitor server and service status.", + "refresh": "Refresh", + "loadError": "Failed to load system health.", + "db": "Database", + "redis": "Redis", + "worker": "Worker", + "queueDepth": "Queue depth {{n}}", + "disk": "Disk", + "diskFree": "{{mb}}MB free", + "mem": "Memory", + "uptime": "Uptime", + "version": "Version" + }, + "sysadmin": { + "actions": "Actions", + "cancel": "Cancel", + "delete": "Delete", + "edit": "Edit", + "keyword": "Keyword", + "next": "Next", + "noUse": "Inactive", + "prev": "Previous", + "save": "Save", + "saving": "Saving…", + "search": "Search", + "sortOrder": "Sort order", + "totalN": "Total {{n}}", + "use": "Active", + "useYn": "Active" + }, + "public": { + "home": { + "heroTitle": "The future of exhibitions, designed by AI" + } + }, + "calendar": { + "prev": "Prev", + "next": "Next", + "today": "Today", + "yearMonth": "{{y}}-{{m}}", + "viewSwitch": "Switch view", + "view": { + "month": "Month", + "week": "Week", + "day": "Day" + }, + "loading": "Loading…", + "legend": "Legend", + "dayEmpty": "No events.", + "dayAll": "All events on {{date}}", + "close": "Close" + }, + "holiday": { + "title": "Holidays", + "subtitle": "View statutory/substitute holidays and manage temporary holidays. Shown in red on the calendar.", + "year": "Year", + "yearLabel": "{{y}}", + "add": "Add Holiday", + "created": "Holiday added.", + "deleted": "Deleted.", + "toggled": "Holiday status updated.", + "loadError": "Failed to load holidays.", + "emptyTitle": "No holidays", + "emptyDesc": "No holidays registered for the selected year.", + "listOf": "Holidays in {{y}}", + "count": "{{n}} days off", + "date": "Date", + "weekday": "Day", + "name": "Name", + "type": "Type", + "status": "Status", + "manage": "Manage", + "substitute": "Substitute", + "legal": "Statutory", + "on": "On", + "off": "Off", + "setOff": "Set working", + "setOn": "Set day off", + "delete": "Delete", + "deleteConfirm": "Delete '{{name}}'?", + "errRequired": "Enter date and name.", + "errDup": "This date is already registered.", + "substituteHint": "Register as substitute holiday", + "cancel": "Cancel", + "saving": "Saving…", + "save": "Save" + }, + "track": { + "shell": { + "wordmark": "KINTEX AI Exhibition & Event System", + "tablistAria": "Select track", + "tab": { + "visitor": "Visitor", + "business": "Business", + "agency": "Agency" + }, + "login": "Log in", + "myHome": "My Home" + }, + "gateway": { + "heroAria": "Product hero", + "aiWatermark": "AI-generated preview image", + "eyebrow": "AI Exhibition & Event Platform", + "title": "KINTEX AI Exhibition & Event System", + "subtitle": "Automating the entire journey from planning to construction and visiting with AI.", + "ctaPreReg": "Visitor Pre-registration", + "ctaInquiry": "Exhibitor Inquiry", + "tracksAria": "Track selection", + "tracksTitle": "What brings you here?", + "tracksSub": "Choose the track that fits your purpose.", + "card": { + "visitor": { + "label": "Visitor", + "title": "Visit an Event", + "desc": "Schedules, pre-registration, and directions", + "cta": "Visitor Track" + }, + "business": { + "label": "Organizer / Exhibitor", + "title": "Host or Exhibit", + "desc": "Rental, auto-quotes, booth applications, construction previews", + "cta": "Business Track" + }, + "agency": { + "label": "Construction Partner", + "title": "Join Construction", + "desc": "Registered vendors, construction auctions, work reports", + "cta": "Agency Track" + } + }, + "eventsAria": "Current and upcoming exhibitions", + "eventsTitle": "Current & Upcoming Exhibitions", + "eventsSub": "Explore ongoing and upcoming exhibitions.", + "eventsMore": "View all schedules" + }, + "visitor": { + "heroAria": "Visitor hero", + "eyebrow": "Visitor Guide", + "title": "Start Your Visit Here", + "subtitle": "Pre-register for faster entry and get alerts for topics you care about.", + "ctaPreReg": "Pre-register", + "ctaTicket": "Buy Tickets", + "eventsAria": "Event schedule", + "eventsTitle": "Event Schedule", + "eventsSub": "Check current and upcoming exhibitions and pre-register.", + "guideAria": "Visit guide", + "guideTitle": "Visit Guide", + "guideSub": "Transport, parking, amenities, and accessibility in one place.", + "guide": { + "transport": { + "title": "Transport", + "desc": "3 min walk from GTX-A KINTEX Stn · intercity buses", + "link": "Directions" + }, + "parking": { + "title": "Parking", + "desc": "Real-time availability, rates, and gates", + "link": "Parking info" + }, + "wayfinding": { + "title": "Indoor Wayfinding", + "desc": "Indoor routes to halls and booths", + "link": "Open wayfinding" + }, + "amenities": { + "title": "Amenities", + "desc": "Dining, nursing room, storage, ATM", + "link": "View amenities" + }, + "accessibility": { + "title": "Accessibility", + "desc": "Wheelchair access, sign-language guidance", + "link": "Accessibility info" + }, + "inquiry": { + "title": "Support", + "desc": "FAQ and contact info", + "link": "Contact us" + } + }, + "noticeAria": "Notices", + "noticeTitle": "Notices", + "noticeSub": "Check the latest notices and alerts.", + "noticeEmpty": "No notices yet.", + "aiWatermark": "AI-generated preview image", + "hero": { + "title": "Ask anything — AI guides your visit", + "subtitle": "Schedules, directions, tickets and booth locations — all in one chat" + }, + "aiTiles": { + "title": "How our AI helps", + "sub": "AI supports every moment of your visit.", + "soon": "Coming soon", + "assistant": { + "title": "AI Visit Assistant", + "desc": "Ask anything" + }, + "recommend": { + "title": "AI Recommendations", + "desc": "Curated to your interests" + }, + "wayfinding": { + "title": "AI Wayfinding", + "desc": "Best indoor route" + }, + "schedule": { + "title": "AI Itinerary", + "desc": "Your own visit course" + }, + "crowd": { + "title": "AI Crowd & Wait", + "desc": "Best low-crowd times" + }, + "render": { + "title": "AI Booth Preview", + "desc": "Booth preview (Business track)" + } + }, + "showcaseTitle": "Ongoing & upcoming", + "showcaseSub": "See what's on now and coming up.", + "recommendTitle": "Exhibitions for your interests", + "recommendSub": "Pick your interests and AI curates for you.", + "recommendTag": "AI picks", + "interests": { + "robot": "Robotics", + "smartfactory": "Smart factory", + "healthcare": "Healthcare", + "eco": "Eco & energy", + "mobility": "Mobility", + "content": "Content & culture" + }, + "guideMore": "Learn more", + "journeyTitle": "How your visit works", + "journeySub": "From pre-registration to check-in in three simple steps.", + "journey": { + "register": { + "title": "Pre-register", + "desc": "Register your visit online.", + "link": "Browse exhibitions" + }, + "badge": { + "title": "Badge & QR", + "desc": "Get your mobile badge and entry QR.", + "link": "Find my ticket" + }, + "checkin": { + "title": "On-site check-in", + "desc": "Scan your QR at the gate and walk in.", + "link": "Sign in" + } + }, + "venueTitle": "About KINTEX", + "venueSub": "Korea's largest exhibition & convention center.", + "venue": { + "halls": { + "label": "Exhibition halls", + "value": "10" + }, + "area": { + "label": "Exhibition area", + "value": "108,556㎡" + }, + "parking": { + "label": "Parking", + "value": "7,500" + }, + "access": { + "label": "Access", + "value": "GTX-A 3-min walk" + } + }, + "briefing": { + "title": "AI Exhibition Briefing", + "sub": "AI curates this year's and this month's upcoming exhibitions for you.", + "viewYear": "Yearly ({{year}})", + "viewMonth": "Monthly", + "aiSummary": "AI summary", + "loading": "Generating AI summary…", + "empty": "No exhibitions scheduled for this period.", + "yearSummary": "{{count}} exhibitions & events are planned in {{year}}, concentrated around {{peak}}.", + "monthSummary": "{{count}} exhibitions this month · weekend visits recommended.", + "monthLabel": "month {{month}}", + "eventsCount": "{{count}} events", + "prevMonth": "Previous month", + "nextMonth": "Next month" + } + }, + "business": { + "heroAria": "Business hero", + "eyebrow": "For Organizers & Exhibitors", + "title": "Host or Exhibit — All Applications Online", + "subtitle": "Handle everything online — from rental to booth application and construction.", + "ctaApply": "Apply / Inquire", + "ctaLogin": "Log in", + "ctaInquiry": "Inquire", + "valueAria": "Value propositions", + "valueTitle": "Choose Your Role", + "valueSub": "Features for organizers and exhibitors.", + "value": { + "organizer": { + "title": "Organizer · Hall Rental", + "desc": "From rental to hall assignment and floor plans in one place.", + "item": { + "rental": "Rental process", + "quote": "Auto quotation", + "floorplan": "Hall assignment & floor plan", + "rate": "Rates & facility specs" + }, + "cta": "Rental inquiry · Log in" + }, + "exhibitor": { + "title": "Exhibitor · Booth Application", + "desc": "From booth and utility applications to AI construction previews.", + "item": { + "apply": "Booth application", + "utility": "Utility application", + "compliance": "Compliance pre-check", + "render": "AI construction preview" + }, + "cta": "Apply · Log in" + } + }, + "processAria": "Rental process", + "processTitle": "Rental Process", + "processSub": "From inquiry to construction and inspection at a glance.", + "process": { + "inquiry": { + "title": "Inquiry", + "desc": "Rental consultation" + }, + "quote": { + "title": "Estimate", + "desc": "Automated estimate" + }, + "contract": { + "title": "Contract", + "desc": "Sign the contract" + }, + "assign": { + "title": "Hall Assignment", + "desc": "Hall and zone assignment" + }, + "booth": { + "title": "Booth Application", + "desc": "Exhibitor booths and utilities" + }, + "inspect": { + "title": "Construction & Inspection", + "desc": "On-site inspection after construction" + } + }, + "rateAria": "Rates and documents", + "rateTitle": "Rates & Documents", + "rateSub": "Rates by booth type and key documents.", + "rate": { + "shell": { + "label": "Shell Scheme", + "price": "Standard", + "desc": "Basic booth with basic power included" + }, + "space": { + "label": "Space Only", + "price": "Space", + "desc": "Custom build, structural calc required" + }, + "premium": { + "label": "Premium", + "price": "Premium", + "desc": "Premium location with extra utilities" + } + }, + "doc": { + "assign": { + "title": "Assignment Application", + "desc": "Hall assignment application form" + }, + "flame": { + "title": "Flame-retardant Certificate", + "desc": "Flame-retardant treatment certificate" + }, + "structure": { + "title": "Structural Calculation", + "desc": "Structural review for space-only booths and rigging" + } + }, + "ctaBandAria": "Log in or inquire", + "ctaBandText": "Already have an account?" + }, + "agency": { + "heroAria": "Agency hero", + "eyebrow": "For Construction & Booth Partners", + "title": "Join Exhibition Construction as a KINTEX Registered Vendor", + "subtitle": "Win projects transparently through construction auctions (reverse auction) — a KINTEX-exclusive approach.", + "ctaLogin": "Vendor Log in", + "ctaRegister": "Apply to Register", + "ctaAuctionLogin": "Log in to bid on auctions", + "ctaWorkReport": "Submit Work Report", + "registryAria": "Registered vendor info", + "registryTitle": "Registered Vendors", + "registrySub": "Operated with 739 registered vendors across 14 categories.", + "gateTitle": "Unregistered vendors cannot participate in construction (self-construction prohibited)", + "gateBody": "Exhibition construction must go through KINTEX-registered vendors. Review the registration process and apply.", + "reg": { + "apply": { + "title": "Apply", + "desc": "Submit registration form" + }, + "review": { + "title": "Review", + "desc": "Qualification and track-record review" + }, + "register": { + "title": "Register", + "desc": "Listed as an official vendor" + }, + "eligible": { + "title": "Eligibility", + "desc": "Bid on auctions and win projects" + } + }, + "auctionAria": "Construction auctions", + "auctionTitle": "Ongoing Construction Auctions (Reverse Auction)", + "auctionSub": "Compete transparently within the budget range.", + "auctionEmptyTitle": "Auction listings are available after logging in", + "auctionEmptyBody": "After logging in as a registered vendor, view ongoing auction listings, budgets, deadlines, and bid status.", + "safetyAria": "Work reports and safety rules", + "safetyTitle": "Work Reports & Safety Rules", + "safetySub": "Review required procedures and rules before on-site work.", + "safety": { + "report": { + "title": "Work Report Procedure", + "desc": "Online work report before on-site work" + }, + "prohibited": { + "title": "Prohibited Works & Noise", + "desc": "Prohibited works, noise limits, rigging structural calc" + }, + "docs": { + "title": "Required Documents", + "desc": "Flame-retardant certificate, insurance" + } + }, + "ctaBandAria": "Vendor log in", + "ctaBandText": "Already a registered vendor?" + } + } +} diff --git a/src/frontend/src/i18n/locales/ja.json b/src/frontend/src/i18n/locales/ja.json new file mode 100644 index 0000000..17ed7f2 --- /dev/null +++ b/src/frontend/src/i18n/locales/ja.json @@ -0,0 +1,2530 @@ +{ + "common": { + "brand": "KINTEX", + "appSuffix": "AI展示・イベント", + "actions": { + "prev": "戻る", + "next": "次へ", + "cancel": "キャンセル", + "close": "閉じる", + "home": "ホームへ", + "viewMore": "詳細を見る", + "confirm": "確認" + }, + "states": { + "loading": "読み込み中…", + "empty": "表示する内容がありません。" + }, + "aiWatermark": "AI 生成の予想画像 — 実際の施工結果と異なる場合があります", + "aiNotice": "AI 生成画像は契約・審査書類には使用できません — 施工基準は図面です", + "weekday": { + "0": "日", + "1": "月", + "2": "火", + "3": "水", + "4": "木", + "5": "金", + "6": "土" + } + }, + "lang": { + "select": "言語を選択" + }, + "shell": { + "menu": { + "home": "ホーム", + "groups": { + "ops": "展示運営", + "design": "設計・施工", + "visitor": "来場者・マーケティング", + "finance": "精算・分析", + "work": "業務共通", + "system": "システム管理" + }, + "items": { + "dashboard": "ダッシュボード", + "exhibitors": "出展社管理", + "schedule": "展示日程", + "halls": "ホール割当", + "boothSales": "ブース販売", + "operations": "現場運営", + "floorplan": "フロアプランスタジオ", + "documents": "書類・マイルストーン", + "auctions": "工事オークション", + "contractor": "受注ブース", + "logistics": "搬入・搬出", + "visitors": "来場者", + "checkin": "チェックインデスク", + "leads": "リード", + "campaigns": "マーケティング", + "sponsorship": "スポンサーシップ", + "cms": "コンテンツCMS", + "settlement": "精算", + "analytics": "経営分析", + "worklog": "業務日誌", + "workSchedule": "日程", + "message": "メッセージ", + "notice": "お知らせ", + "meeting": "議事録", + "report": "業務報告", + "approval": "決裁", + "opinion": "意見受付", + "search": "統合検索", + "appqr": "モバイルアプリ", + "admin": "管理ダッシュボード", + "users": "ユーザー管理", + "roles": "役割/権限", + "depts": "組織管理", + "companies": "会社管理", + "menus": "メニュー管理", + "programs": "プログラム管理", + "roleMenus": "役割-メニュー割当", + "codes": "共通コード", + "authPolicy": "認証ポリシー", + "loginHistory": "ログイン履歴", + "audit": "監査ログ", + "errorLog": "エラーログ", + "systemHealth": "システム状態", + "settings": "システム設定", + "mailConfig": "メール設定", + "notifyConfig": "通知設定", + "tenants": "テナント", + "rulesets": "ルールセット", + "slides": "ログインスライド" + }, + "sections": { + "userOrg": "ユーザー・組織", + "menuAuth": "メニュー・コード", + "policyLog": "ポリシー・ログ", + "statusConfig": "状態・設定", + "masterEtc": "マスター・その他" + } + }, + "nav": { + "events": "イベント", + "exhibit": "出展案内", + "visit": "来場案内", + "transport": "交通" + }, + "searchPlaceholder": "イベントを検索", + "cta": { + "register": "来場事前登録" + }, + "menuOpen": "メニューを開く", + "menuClose": "メニューを閉じる", + "homeAria": "{{brand}} ホーム", + "primaryMenu": "メインメニュー", + "mobileMenu": "モバイルメニュー", + "footer": { + "brandDesc": "韓国最大規模の展示コンベンションセンター。ビジネスと文化の革新をつなぎます。", + "quickTitle": "クイックリンク", + "quickSchedule": "イベント日程", + "quickExhibit": "出展案内", + "quickDirections": "アクセス", + "quickSitemap": "サイトマップ", + "supportTitle": "カスタマーサポート", + "supportPrivacy": "プライバシーポリシー", + "supportTerms": "利用規約", + "supportContact": "お問い合わせ", + "contactTitle": "連絡先", + "contactAddress": "京畿道高陽市一山西区KINTEXロ217-60", + "contactTel": "代表番号 1899-1001", + "contactEmail": "exhibition@kintex.com", + "bottom": "© KINTEX. All Rights Reserved. (10390) 217-60, Kintex-ro, Ilsanseo-gu, Goyang-si" + }, + "footerbar": { + "copyright": "© 2026 KINTEX. All rights reserved.", + "systemOk": "システム正常", + "systemDown": "システム点検", + "support": "カスタマーサポート" + }, + "login": "ログイン" + }, + "home": { + "heroAria": "KINTEX について", + "eyebrow": "Global Exhibition Platform", + "heroTitleLine1": "世界へつながる展示会、", + "heroTitleEm": "KINTEX", + "heroLead": "韓国最大規模の展示コンベンションセンター KINTEX で繰り広げられる、ビジネスと文化の新たな革新を体験してください。", + "ctaRegister": "来場事前登録", + "ctaFacility": "施設案内を見る", + "eventsAria": "開催中・開催予定のイベント", + "eventsTitle": "開催中 · 開催予定", + "eventsSub": "今 KINTEX で開催中の注目情報をご確認ください。", + "eventsMore": "全日程を見る", + "loading": "イベント情報を読み込み中…", + "empty": "現在、開催中または開催予定のイベントはありません。", + "tagExhibition": "EXHIBITION", + "booth": "ブース {{count}}", + "aiOptimized": "AI 最適化", + "ongoing": "開催中", + "ended": "終了", + "dday": "D-{{n}}", + "ddayZero": "D-DAY", + "register": "事前登録", + "hallTbd": "ホール割当予定", + "transportAria": "アクセス", + "transportTitle": "アクセス", + "transportSub": "さらに便利になったアクセスで KINTEX へ。", + "gtxTitle": "GTX-A KINTEX 駅開通", + "gtxDesc": "KINTEX 駅から徒歩3分", + "transit": "公共交通", + "transitDesc": "広域バスおよび地下鉄", + "parking": "駐車案内", + "parkingDesc": "4,000台同時駐車", + "shuttle": "シャトルバス", + "shuttleDesc": "主要拠点を循環", + "mapAria": "KINTEX 位置地図", + "mapAddress": "高陽市一山西区KINTEXロ217-60", + "mapPlace": "KINTEX 第1・2展示場", + "mapViewAria": "地図を見る", + "pageAria": "メインホーム", + "greeting": "こんにちは、{{name}}様", + "greetingGuest": "こんにちは", + "viewAll": "すべて表示", + "loadError": "読み込めませんでした", + "role": { + "organizer": "主催者", + "exhibitor": "出展社", + "contractor": "施工業者", + "hallManager": "ホールマネージャー", + "admin": "管理者" + }, + "kpi": { + "aria": "サマリー指標" + }, + "banner": { + "aria": "イベント紹介バナー", + "prev": "前のバナー", + "next": "次のバナー", + "emptyTitle": "登録されたバナーがありません", + "emptyDesc": "管理者で登録したイベントバナーがここに表示されます。" + }, + "showcase": { + "title": "開催中・開催予定の展示会", + "all": "すべて表示", + "prev": "前へ", + "next": "次へ", + "statusOngoing": "開催中", + "statusUpcoming": "予定", + "emptyTitle": "この期間の展示会はありません", + "emptyCta": "全日程を見る", + "tab": { + "ongoing": "開催中", + "thisMonth": "今月", + "nextMonth": "来月" + } + }, + "calendar": { + "title": "展示会スケジュール", + "prev": "前月", + "next": "翌月", + "today": "今日", + "all": "すべて", + "centerFilter": "展示場フィルター", + "yearMonth": "{{y}}年{{m}}月", + "legendOngoing": "開催中", + "legendUpcoming": "予定", + "legendEnded": "終了", + "more": "+{{n}}", + "moreTitle": "{{date}} の展示会", + "popupEmpty": "その日の展示会はありません", + "listTitle": "開催中・開催予定", + "listEmpty": "予定された展示会はありません", + "listEmptyCta": "全日程を見る", + "loadError": "スケジュールを読み込めませんでした" + }, + "todo": { + "title": "やること", + "noDue": "期限なし", + "emptyTitle": "すべて完了", + "emptyDesc": "対応する作業はありません", + "emptyCta": "通知を開く" + }, + "notice": { + "title": "お知らせ", + "more": "もっと見る", + "new": "NEW", + "pinned": "固定", + "emptyTitle": "お知らせはありません", + "emptyCta": "すべてのお知らせ" + }, + "quick": { + "title": "クイック操作", + "editor": "レイアウトエディタ", + "invite": "出展社を招待", + "docs": "書類ワークフロー", + "settlement": "精算", + "notice": "お知らせ作成", + "search": "統合検索" + }, + "activity": { + "title": "最近の活動", + "emptyTitle": "最近の活動はありません", + "emptyCta": "通知設定" + }, + "time": { + "justNow": "たった今", + "minutes": "{{n}}分前", + "hours": "{{n}}時間前", + "days": "{{n}}日前" + }, + "workspace": { + "title": "マイイベント", + "emptyTitle": "参加中のイベントがありません", + "emptyDesc": "招待リンクまたは招待コードをご確認ください", + "invite": "招待コード確認", + "codePh": "招待コードを入力" + }, + "charts": { + "title": "展示会チャート", + "statusTitle": "イベント状態", + "trendTitle": "月別推移", + "centerTitle": "展示場別開催", + "monthSuffix": "月", + "empty": "表示するデータがありません" + }, + "ai": { + "aria": "KINTEX AI 機能", + "title": "KINTEX AI", + "badge": "AI", + "subtitle": "ブース設計から施工プレビュー、リード分析まで AI が対応", + "askPh": "何でも質問 — 例：今月の売上は？", + "askBtn": "質問", + "askAria": "AI に質問", + "tool": { + "layout": { + "title": "AI ブース配置スタジオ", + "desc": "1・2・3案を自動生成" + }, + "gallery": { + "title": "施工プレビューギャラリー", + "desc": "Nano-Banana AI レンダー" + }, + "nlquery": { + "title": "自然言語クエリ", + "desc": "質問すると表で回答" + }, + "rules": { + "title": "規程 AI チャット", + "desc": "規程に基づく回答" + }, + "leads": { + "title": "リード AI スコアリング", + "desc": "有望リードを自動分析" + } + } + }, + "prodEyebrow": "AI展示会自動化プラットフォーム", + "prodTitle": "KINTEX AI 展示会運営プラットフォーム", + "prodTagline": "ブース設計から施工プレビュー、精算まで一つの流れで完結します。", + "ctaLogin": "ログイン", + "ctaPreReg": "事前登録", + "roleAria": "ロール別のご紹介", + "roleTitle": "ロールごとの最適な機能", + "roleSub": "主催者・出展企業・施工会社・来場者すべてのためのツール。", + "stepsAria": "主要機能", + "stepsTitle": "AIで完成する展示会運営", + "stepsSub": "AI配置から施工プレビュー、逆オークション、リアルタイム精算まで。" + }, + "detail": { + "tabs": { + "intro": "紹介", + "program": "プログラム", + "speakers": "登壇者", + "exhibitors": "出展企業", + "transport": "交通", + "faq": "FAQ" + }, + "eyebrow": "KINTEX Exhibition", + "loadingTitle": "イベント情報を読み込み中…", + "fallbackTitle": "イベント詳細", + "dateTbd": "日程確認中", + "placeTbd": "ホール割当予定", + "lead": "KINTEX で開催される展示会情報を確認し、事前登録しましょう。", + "factDate": "日時", + "factPlace": "場所", + "ctaRegister": "事前登録する", + "ctaFloorplan": "会場フロアマップを見る", + "navAria": "イベント詳細ナビゲーション", + "shareAria": "共有", + "share": "共有する", + "copyLink": "リンクをコピー", + "overviewAria": "展示会概要", + "overviewTitle": "展示会概要", + "overviewLead": "スマートファクトリー・コリア 2026 は次世代製造技術の集大成です。AI、ロボティクス、IoT、そしてデジタルツイン技術を融合した最新ソリューションを一堂に。世界500社以上のリーディング企業が参加します。", + "statBooth": "出展ブース", + "statVisitors": "予想来場者数", + "statVisitorsValue": "30,000+", + "themesTitle": "主要展示テーマ", + "theme1Title": "AI & 自律ロボット", + "theme1Desc": "自ら学習し判断するスマートロボットソリューション", + "theme2Title": "デジタルツイン & IoT", + "theme2Desc": "仮想世界と現実の製造現場のリアルタイム同期", + "theme3Title": "カーボンニュートラル・スマート製造", + "theme3Desc": "エネルギー効率を最大化する環境配慮型プロセス技術", + "programAria": "プログラム日程", + "programTitle": "プログラム日程", + "day1": "9月5日 (Day 1)", + "day2": "9月6日 (Day 2)", + "agenda1Title": "製造業の未来：AI が導く生産性革命", + "agenda1Desc": "AI のグローバル権威が提案する2030製造戦略と実際の導入事例分析", + "agenda1Room": "メインカンファレンスホール", + "agenda2Title": "産業用5Gとエッジコンピューティングの融合", + "agenda2Desc": "遅延のないデータ伝送によるリアルタイム工程制御技術の実演", + "agenda2Room": "セミナールーム A", + "agenda3Title": "Global Buyers Matching Day", + "agenda3Desc": "海外有望企業と国内サプライヤーによる1対1のビジネスミーティング", + "agenda3Room": "ビジネスラウンジ", + "speakersTitle": "主要登壇者", + "speaker1Role": "AI 研究所長 | TechCorp", + "speaker2Role": "CTO | Automatech", + "speaker3Role": "ロボット工学碩座教授 | Korea Univ.", + "speaker4Role": "Global VP | Digitron", + "profileAria": "{{name}} プロフィール", + "faqAria": "よくある質問", + "faqTitle": "よくある質問", + "faq1Q": "事前登録はどうすればよいですか？", + "faq1A": "上部の「事前登録する」ボタンからタイプを選択し情報を入力すると、モバイルバッジが発行されます。", + "faq2Q": "入場料はかかりますか？", + "faq2A": "一般来場者は事前登録で無料です。当日登録は有料の場合があります。", + "faq3Q": "駐車場はありますか？", + "faq3A": "KINTEX 第1・2展示場で最大4,000台の同時駐車が可能です。", + "fabCta": "事前登録へ" + }, + "register": { + "steps": { + "type": "タイプ", + "info": "情報", + "interest": "関心分野", + "done": "完了" + }, + "stepsAria": "事前登録ステップ", + "type": { + "general": "一般来場者", + "generalDesc": "展示および公開セッションを参観できる一般来場者", + "buyer": "バイヤー", + "buyerDesc": "B2Bマッチングおよびビジネス商談のための企業担当者", + "vip": "VIP", + "vipDesc": "招待者専用ラウンジおよび全セッション入場の来賓" + }, + "step0Title": "参加タイプの選択", + "step0Sub": "KINTEX 展示会にご参加いただく資格を選択してください。", + "typeGroupAria": "参加タイプ", + "step1Title": "基本情報の入力", + "step1Sub": "連絡および入場証発行のための情報を入力してください。", + "name": "氏名", + "namePh": "お名前を入力", + "phone": "連絡先 (携帯)", + "email": "メール", + "emailPh": "example@domain.com", + "org": "所属 (会社/機関)", + "orgPh": "会社名または学校名", + "step2Title": "関心分野の選択", + "step2Sub": "関心分野を選択いただくと、最適な情報をご提供します。", + "interestsAria": "関心分野", + "interest": { + "ai": "AI ソリューション", + "factory": "スマートファクトリー", + "robotics": "ロボティクス", + "bigdata": "ビッグデータ", + "cloud": "クラウド" + }, + "consentPrivacy": "個人情報の収集・利用に同意", + "required": "(必須)", + "consentMarketing": "マーケティング配信に同意 (任意)", + "consentMore": "詳細を見る", + "errPrivacy": "個人情報の収集・利用への同意（必須）にチェックしてください。", + "errName": "お名前を入力してください。", + "errEvent": "イベント情報を確認できません。", + "doneTitle": "事前登録を受け付けました", + "doneSub": "{{name}} 様の事前登録が完了しました。入口キオスクでモバイルバッジをご利用ください。", + "visitorDefault": "来場者", + "badgeAria": "モバイルバッジプレビュー", + "badgeName": "山田太郎", + "badgeCodeLabel": "Badge Code", + "doneNote": "入口キオスクで QR を読み取ると実物バッジを印刷できます。", + "regNo": "登録番号：{{id}}", + "submitting": "登録中…", + "submit": "登録する", + "eventBrowse": "イベントを見る", + "floorplan": "会場フロアマップを見る" + }, + "floorplan": { + "sideAria": "ブース検索および一覧", + "filtersTitle": "業種 · ゾーン · キーワード", + "searchPh": "出展企業またはブース番号を検索", + "searchAria": "ブース検索", + "typeFilter": "ブースタイプフィルター", + "hallSelect": "展示場を選択", + "allHalls": "全ホール", + "listAria": "ブース一覧 (非ビジュアル代替)", + "loading": "ブース情報を読み込み中…", + "searchResults": "検索結果 ({{count}})", + "noMatch": "一致するブースがありません。", + "reservedBooth": "予約済みブース", + "availableBooth": "分譲可能", + "type": { + "assembled": "パッケージブース", + "independent": "スペースのみ", + "corner": "コーナーブース", + "island": "アイランド", + "default": "ブース" + }, + "stageAria": "インタラクティブホールマップ", + "boothLayoutAria": "ブース配置", + "boothAria": "ブース {{no}} {{name}}", + "loadFail": "フロアマップを読み込めませんでした。", + "noBooth": "表示するブースがありません。", + "popInfoAria": "{{name}} 情報", + "popDetail": "ブース詳細", + "directions": "経路案内", + "zoomIn": "拡大", + "zoomOut": "縮小", + "reset": "リセット", + "myLocation": "現在地", + "legendAria": "凡例", + "legendAvailable": "販売 (Available)", + "legendReserved": "予約 (Reserved)", + "legendPublic": "共用部 (Public)" + }, + "inquiry": { + "heroAria": "出展のお問い合わせ", + "heroTitle": "出展のお問い合わせ", + "heroLead": "KINTEX とともに、貴社のビジネスをグローバル市場へ拡大しましょう。専門コンサルタントが最適な展示スペースをご提案します。", + "cta": "出展のお問い合わせ", + "guideAria": "出展案内", + "guideTitle": "出展案内", + "booth1Tier": "Entry Tier", + "booth1Title": "パッケージブース (Shell Scheme)", + "booth1Desc": "基本の壁体と床が提供される最も経済的な選択。小規模企業におすすめです。", + "booth1Price": "₩ 2,500,000 / unit", + "booth2Tier": "Design Freedom", + "booth2Title": "スペースのみ (Raw Space)", + "booth2Desc": "スペースのみが提供され、ブランドに合わせた自由な設計が可能です。", + "booth2Price": "₩ 2,000,000 / unit", + "booth3Tier": "Full Solution", + "booth3Title": "プレミアム (Premium)", + "booth3Desc": "AI 最適化された動線設計とカスタムブランディングパッケージを含むオールインワンソリューションです。", + "booth3Price": "別途お問い合わせ", + "boothExampleAria": "{{title}} 例", + "formAria": "お問い合わせ", + "formTitle": "お問い合わせ", + "formSub": "出展申込や展示に関するご質問をお残しください。担当者が営業日24時間以内に回答します。", + "contactPhone": "電話でのお問い合わせ", + "contactPhoneVal": "+82-31-810-8114", + "contactEmail": "メールでのお問い合わせ", + "contactEmailVal": "exhibit@kintex.com", + "contactLoc": "所在地", + "contactLocVal": "京畿道高陽市一山西区KINTEXロ217-60", + "loginHintQ": "すでにアカウントをお持ちですか？", + "loginHintA": "ログインして素早くお問い合わせ", + "company": "会社名", + "companyPh": "会社名を入力", + "name": "担当者", + "namePh": "お名前を入力", + "contact": "連絡先 (メールまたは電話番号)", + "contactPh": "連絡可能な情報を入力", + "scale": "予想規模", + "scaleSelect": "選択してください", + "scale1": "1ブース (9sqm)", + "scale2": "2-4ブース (18-36sqm)", + "scale3": "5-9ブース (45-81sqm)", + "scale4": "10以上", + "hall": "希望ホール", + "hallSelect": "ホールを選択", + "message": "お問い合わせ内容", + "messagePh": "出展目的や特別なご要望があればお残しください。", + "agree": "個人情報の収集および利用に同意します。", + "required": "(必須)", + "errAgree": "個人情報の収集および利用に同意してください。", + "errName": "担当者名を入力してください。", + "errContact": "連絡可能なメールまたは電話番号を入力してください。", + "errMessage": "お問い合わせ内容を入力してください。", + "success": "お問い合わせを受け付けました。受付番号 {{no}}", + "submitting": "送信中…", + "submit": "問い合わせを送信" + }, + "microsite": { + "introAria": "{{brand}} について", + "eyebrow": "KINTEX Exhibitor", + "ctaMeeting": "ミーティング予約", + "ctaBrochure": "会社案内", + "defaultBrand": "ハンビットロボティクス株式会社", + "defaultTagline": "未来を動かすインテリジェント・ロボティクスソリューション", + "defaultBoothLoc": "ブース A-102 · ホール7", + "boothUndetermined": "未定", + "boothPrefix": "ブース", + "boothLocLabel": "KINTEX 展示場ブース位置", + "viewMap": "会場フロアマップを見る", + "productsAria": "主力製品ラインナップ", + "productsTitle": "主力製品ラインナップ", + "productsSub": "現場でご覧いただける代表製品です。", + "product": "製品", + "product1Tag": "Industrial COBOT", + "product1Title": "HR-A1 協働ロボット", + "product1Desc": "高い精度と安全性を備えた産業用協働ロボット。人との協働を最優先に設計しました。", + "product2Tag": "Smart Logistics", + "product2Title": "HR-M3 自律走行 AMR", + "product2Desc": "スマートファクトリーの物流効率を最大化する自律移動ロボット。リアルタイムの障害物回避と経路最適化。", + "product3Tag": "AI Vision", + "product3Title": "HR-Q Vision スキャナー", + "product3Desc": "AI ディープラーニングによる完璧な品質検査。微細な欠陥も見逃さない超精密3Dスキャニング。", + "productImgAria": "{{title}} 画像", + "previewAria": "ブースプレビュー", + "previewTitle": "ブースプレビュー", + "previewSub": "AI が生成した予想ブース画像です。実際の施工結果と異なる場合があります。", + "galleryMain": "メイン展示ゾーン", + "galleryVip": "VIP ラウンジ", + "galleryAria": "{{label}} AI 生成の予想画像", + "watermark": "AI 生成の予想画像 — 実際の施工結果と異なる場合があります", + "meetingAria": "ミーティング予約", + "ctaBanner": "貴社のビジネスに合わせたカスタムロボットソリューションをご提案します。", + "ctaBannerBtn": "今すぐミーティング予約" + }, + "ticket": { + "viewPurchase": "チケット購入", + "viewManage": "確認 · キャンセル", + "viewSwitchAria": "チケット画面切替", + "type": { + "general": "一般券", + "generalDesc": "一般来場者および個人参加者", + "generalPrice": "₩0 (事前登録割引価格)", + "buyer": "バイヤー券", + "buyerDesc": "関連企業従事者およびバイヤー専用", + "buyerPrice": "無料 · 資格審査必要", + "group": "団体券 (10枚以上)", + "groupDesc": "企業団体来場専用", + "groupPrice": "₩9,000 / 1人", + "vip": "VIP 券", + "vipDesc": "展示会オールパス + VIP ラウンジ利用券", + "vipPrice": "₩50,000" + }, + "steps": { + "s1": "イベント·券種", + "s2": "予約者", + "s3": "決済", + "s4": "完了" + }, + "stepsAria": "予約ステップ", + "bannerTitle": "スマートファクトリー・コリア 2026", + "bannerDate": "2026.09.05 – 09.08", + "bannerPlace": "第2展示場ホール7", + "posterAria": "イベントポスター", + "loginBanner": "ログインすると予約内容が自動保存されます。", + "loginLink": "ログイン", + "sample": "サンプルデータ", + "h2Type": "チケット券種の選択", + "aiOptimized": "AI OPTIMIZED", + "off10": "10% OFF", + "soldout": "完売", + "qtyAria": "{{name}} 数量", + "decrease": "減らす", + "increase": "増やす", + "h2Booker": "予約者情報", + "bookerName": "氏名", + "bookerNamePh": "お名前", + "bookerTel": "連絡先", + "bookerEmail": "メール (チケット送付)", + "consentPrivacy": "個人情報の収集・利用に同意", + "required": "(必須)", + "consentMarketing": "マーケティング配信に同意 (任意)", + "h2Pay": "決済方法", + "payCard": "クレジットカード", + "payEasy": "簡単決済", + "payBank": "口座振込", + "payGroupAria": "決済方法", + "pgNote": "決済は PG 社のセキュアページで行われ、カード情報は本サイトに保存されません。すべての取引は256ビット SSL 暗号化で保護されます。(PG 未連携 — デモフロー)", + "doneTitle": "予約を受け付けました", + "doneNo": "KTX-2026-0000-DEMO", + "doneSub": "メールでチケットをお送りします。(本サービス連携時) 合計 {{count}} 枚 · 決済 {{total}}", + "sampleReady": "サンプルデータ · 決済準備中", + "walletBtn": "モバイルチケットウォレットを開く", + "manageBtn": "予約確認 / キャンセル", + "summaryAria": "予約内容の概要", + "summaryTitle": "予約内容の概要", + "summaryCount": "選択枚数", + "count": "{{n}} 枚", + "subtotal": "小計", + "discount": "割引", + "finalTotal": "最終決済金額", + "nextStep": "次のステップへ", + "freeDone": "無料予約を完了", + "pay": "決済する", + "payProceed": "決済へ進む", + "customerCenter": "カスタマーセンター 1588-0000 (平日 09–18時)", + "manageTitle": "予約確認 · キャンセル", + "manageSub": "非会員の予約内容を照会・キャンセルできます。", + "lookNo": "予約番号", + "lookNoPh": "KTX-YYYY-XXXXXX", + "lookEmail": "メール", + "lookEmailPh": "example@email.com", + "lookBtn": "照会", + "loginToView": "ログインして予約を確認", + "notLooked": "予約番号とメールを入力して照会してください。(サンプル：任意の値を入力して照会)", + "booked": "予約完了", + "bookNoLabel": "予約番号", + "paidAt": "決済日時", + "colType": "券種", + "colQty": "数量", + "colAmount": "金額", + "bookerInfo": "予約者情報", + "totalPaid": "総決済金額", + "refundTitle": "キャンセル·返金ポリシー", + "refundD7": "来場7日前 (D-7)", + "refundD7Val": "100% 返金", + "refundD3": "来場3日前 (D-3)", + "refundD3Val": "50% 返金", + "refundDay": "来場当日", + "refundDayVal": "0% (返金不可)", + "refundEst": "現在の予想返金額", + "cancelBooking": "予約キャンセル", + "refundNote": "返金は PG 社を通じて元の決済手段へ処理されます。", + "aiHelper": "AI 精算アシスタント", + "aiHelperDesc": "クレジットカード分割払いの場合、キャンセル後カード会社を通じた限度復元まで約3–5営業日かかることがあります。", + "cancelModalAria": "予約キャンセルの確認", + "cancelModalTitle": "予約をキャンセルしますか？", + "cancelModalDesc": "D-15 基準で100%返金(₩40,000)が適用されます。返金は元の決済手段へ PG 社を通じて処理され、本サービス連携時に実際の返金が行われます。", + "cancelConfirm": "キャンセルする" + }, + "login": { + "title": "ログイン", + "sub": "KINTEX 展示会管理システムへようこそ。", + "email": "メール", + "emailPh": "name@company.com", + "password": "パスワード", + "remember": "ID を記憶", + "forgot": "パスワードを探す", + "errResponse": "ログイン応答を処理できませんでした。もう一度お試しください。", + "errLocked": "ログイン試行が一時的に制限されています。しばらくしてからお試しください。", + "errNotImpl": "ログインサービスは準備中です。しばらくしてからお試しください。", + "errGeneric": "ログイン中にエラーが発生しました。", + "submitting": "ログイン中…", + "submit": "ログイン", + "signupPrompt": "アカウントをお持ちでないですか？", + "signup": "新規登録", + "or": "または", + "internalLogin": "KINTEX 内部アカウントでログイン", + "inviteLink": "招待コードで参加 →", + "copyright": "© 2026 KINTEX. All rights reserved.", + "wsTitle": "イベントワークスペース", + "wsSub": "参加中のイベントを選択してください。", + "wsEmptyTitle": "参加中のイベントがありません", + "wsEmptyDesc": "招待リンクを確認するか、招待コードで参加してください。", + "wsInvite": "招待コードで参加", + "prodTagline": "KINTEX AI 展示会運営プラットフォーム" + }, + "signup": { + "title": "新規登録", + "desc": "KINTEX AI 展示会管理アカウントを作成します。会社名・招待コードは任意です。", + "email": "メール", + "emailPh": "name@company.com", + "name": "氏名", + "namePh": "山田太郎", + "password": "パスワード", + "passwordPh": "8文字以上", + "password2": "パスワード確認", + "password2Ph": "パスワード再入力", + "company": "会社名 (任意)", + "companyPh": "KINTEX 株式会社", + "invite": "招待コード (任意)", + "invitePh": "INV-XXXX", + "mismatch": "パスワードが一致しません。", + "errNotImpl": "新規登録サービスは準備中です。しばらくしてからお試しください。", + "errConflict": "すでに登録済みのメールです。", + "errGeneric": "新規登録中にエラーが発生しました。", + "noticePending": "アカウントが作成されました。管理者の承認後にログインできます。", + "noticeActive": "アカウントが作成されました。今すぐログインしてください。", + "doneTitle": "新規登録完了", + "goLogin": "ログインへ", + "cancel": "キャンセル", + "submitting": "登録中…", + "submit": "登録する" + }, + "forgot": { + "requestTitle": "パスワードを探す", + "requestDesc": "登録済みのメールに認証コードをお送りします。登録済みアカウントの場合、メールが送信されます。", + "email": "メール", + "emailPh": "name@company.com", + "sending": "送信中…", + "requestBtn": "認証コードを受け取る", + "resetTitle": "パスワード再設定", + "resetDesc": "<0>{{email}} に届いた認証コードと新しいパスワードを入力してください。", + "code": "認証コード", + "codePh": "メールで受け取ったコード", + "newpw": "新しいパスワード", + "newpwPh": "8文字以上", + "prev": "戻る", + "changing": "変更中…", + "changeBtn": "パスワード変更", + "doneTitle": "パスワード変更完了", + "doneDesc": "新しいパスワードでログインしてください。", + "goLogin": "ログインへ", + "errInvalid": "認証コードが正しくないか、期限切れです。", + "errNotImpl": "パスワード再設定サービスは準備中です。しばらくしてからお試しください。", + "errRequest": "リクエスト中にエラーが発生しました。", + "errReset": "再設定中にエラーが発生しました。", + "cancel": "キャンセル" + }, + "dashboard": { + "countdown": "開場 D-{{n}}", + "degradedTag": "オフライン — サンプル", + "degradedMsg": "集計 API に接続できず、デモ用サンプルを表示しています。", + "loadError": "ダッシュボード集計を読み込めませんでした。", + "timelineAria": "マイルストーンタイムライン", + "milestoneEmptyTitle": "派生スケジュールがありません", + "milestoneEmptyDesc": "イベント開始日が確定するとマイルストーンが表示されます。", + "mstate": { + "done": "完了", + "current": "進行中", + "upcoming": "予定" + }, + "kpisAria": "主要指標", + "kpiEmpty": "集計された指標がありません", + "exhibitorStatus": "出展社状況", + "sampleTag": "サンプル", + "exhibitorEmptyTitle": "出展社ブースがありません", + "exhibitorEmptyDesc": "ブース配置・設計案が登録されるとここに表示されます。", + "colBoothNo": "ブース番号", + "colCompany": "会社名", + "colStatus": "設計状態", + "feedAria": "通知フィード", + "feedTitle": "通知", + "feedEmpty": "新しい通知はありません", + "aerialAria": "ホール全景俯瞰", + "aerialTitle": "ホール全景俯瞰", + "aerialShot": "S7 ホール全景", + "aerialAlt": "ホール全景俯瞰の予想画像" + }, + "schedule": { + "title": "展示スケジュール", + "subtitle": "KINTEX 全ホールのイベント日程管理・モニタリング — {{n}}件", + "crawlFallback": "(kintex.com クロールフォールバック)", + "yearFilter": "年度フィルター", + "allYears": "全年度", + "yearN": "{{y}}年", + "hallFilter": "ホールフィルター", + "allHalls": "全ホール (1-10)", + "hall1": "第1展示場 (ホール 1-5)", + "hall2": "第2展示場 (ホール 6-10)", + "catFilter": "カテゴリーフィルター", + "allCats": "全カテゴリー", + "statusFilter": "ステータスフィルター", + "allStatus": "全ステータス", + "cat": { + "exhibition": "展示", + "culture": "文化・芸術", + "trade": "貿易・産業", + "tech": "技術" + }, + "status": { + "ongoing": "開催中", + "upcoming": "予定", + "ended": "終了" + }, + "catExhibit": "{{cat}}展", + "apiWait": "イベント API 待機 (クロールデータ)", + "viewSwitch": "表示切替", + "viewList": "リスト", + "viewCalendar": "カレンダー", + "listLoading": "イベント一覧を読み込み中", + "listAria": "イベント一覧", + "loadError": "展示スケジュールを読み込めませんでした。", + "count": "{{n}}件", + "emptyTitle": "登録されたイベントがありません", + "emptyDesc": "フィルターを調整するか新規イベントを作成してください。", + "newEvent": "新規イベント作成", + "period": "期間", + "assignedHall": "割当ホール", + "estVisitors": "推定人数", + "editDetail": "詳細編集", + "viewLogistics": "搬入/物流を見る", + "monthCal": "月カレンダー", + "prev": "前へ", + "next": "次へ", + "today": "今日", + "yearMonth": "{{y}}年{{m}}月", + "miniCal": "ミニカレンダー", + "prevMonth": "前月", + "nextMonth": "翌月", + "offlineSample": "オフライン — サンプル", + "day": "{{d}}日", + "dayHasEvent": "{{d}}日 (イベントあり)", + "hallUtil": "ホール稼働率", + "hallUtilMonth": "ホール稼働率 ({{y}}年{{m}}月)", + "availTitle": "ホール空き状況", + "availMonth": "ホール空き状況 ({{y}}年{{m}}月)", + "availHalls": "全ホール {{n}} 件", + "availFreeDays": "空き {{free}}/{{total}}日", + "availOpen": "空きあり", + "availFull": "満室" + }, + "boothsales": { + "title": "ブース販売", + "subtitleManager": "ブース販売在庫の管理 — 状態・価格・ブロックおよび精算連携", + "subtitleExhibitor": "空きブースを選んで仮押さえ後、購入を確定してください", + "noEventTitle": "イベントを選択してください", + "noEventDesc": "ブース販売の対象イベントが未選択です。", + "summaryAria": "ブース販売状態のサマリー", + "stAvailable": "空き", + "stHeld": "仮押さえ", + "stSold": "販売済", + "stBlocked": "ブロック", + "rate": "賃料レート {{rate}}ウォン/㎡ ({{ver}})", + "hallFilter": "ホール絞り込み", + "allHalls": "全ホール", + "loadError": "ブース販売在庫を読み込めませんでした。", + "emptyTitle": "表示するブースがありません", + "emptyManage": "このイベントのレイアウトに登録されたブースがありません。", + "emptyExhibitor": "現在選択可能な空きブースがありません。", + "status": { + "available": "空き", + "held": "仮押さえ", + "sold": "販売済", + "blocked": "ブロック" + }, + "wonUnit": "ウォン", + "hallLabel": "ホール", + "areaLabel": "面積", + "soldTo": "販売先：{{c}}", + "hold": "仮押さえ", + "purchase": "購入確定", + "release": "仮押さえ解除", + "setPrice": "価格設定", + "block": "ブロック", + "unblock": "ブロック解除", + "settle": "請求書生成", + "settling": "生成中…", + "heldToast": "ブースを仮押さえしました。期限内に購入を確定してください。", + "purchasedToast": "購入が確定しました。", + "releasedToast": "仮押さえを解除しました。", + "blockToast": "ブース状態を更新しました。", + "priceToast": "販売価格を更新しました。", + "settleToast": "請求書生成完了 — 新規 {{created}}件、維持 {{skipped}}件。", + "settleFail": "請求書の生成に失敗しました（権限を確認してください）。", + "holdConflict": "このブースは他のユーザーが仮押さえ済み、または販売済/ブロック済です。", + "purchaseConflict": "仮押さえが期限切れ、または他のユーザーが仮押さえしました。", + "blockConflict": "販売済のブースはブロックできません。", + "actionFail": "リクエストを処理できませんでした。", + "pricePrompt": "販売価格（ウォン）を入力してください。空欄の場合は面積×レートで自動計算します。", + "priceInvalid": "0以上の金額を入力してください。" + }, + "settlement": { + "title": "精算・決済", + "subtitle": "イベント出展社の請求・入金状況を管理", + "generate": "請求書生成", + "generating": "生成中…", + "noEventTitle": "イベントを選択してください", + "noEventDesc": "精算状況を照会するイベントが指定されていません。", + "genDone": "請求書生成完了 — 新規 {{created}}件、既存維持 {{skipped}}件。", + "genError": "請求書の生成に失敗しました。権限または対象データを確認してください。", + "dashError": "精算状況の集計を読み込めませんでした。", + "kpisAria": "精算主要指標", + "kpiBilled": "総請求額", + "kpiCollected": "入金額", + "kpiOutstanding": "未収金", + "kpiOverdue": "延滞請求", + "count": "{{n}}件", + "collectionRate": "入金率 {{rate}}%", + "outstandingSub": "未収残高", + "overdueSub": "納付期限超過", + "distTitle": "請求ステータス分布", + "distEmpty": "集計された請求がありません", + "listTitle": "請求書一覧", + "invoices": "請求書", + "statusFilter": "ステータスフィルター", + "status": { + "all": "全て", + "pending": "未発行", + "invoiced": "請求済", + "paid": "完納", + "overdue": "延滞", + "cancelled": "取消" + }, + "listError": "請求書一覧を読み込めませんでした。", + "emptyTitle": "請求書がありません", + "emptyManage": "上部の請求書生成で出展社別に請求を集計してください。", + "emptyView": "まだ発行された請求書がありません。", + "colNo": "請求番号", + "colExhibitor": "出展社", + "colBilled": "請求額", + "colPaid": "入金", + "colOutstanding": "未収", + "colDue": "納付期限", + "colStatus": "ステータス", + "detail": "詳細", + "prev": "前へ", + "next": "次へ", + "pageInfo": "{{page}} / {{total}} · 全 {{cnt}}件", + "modalAria": "請求書詳細", + "invoice": "請求書", + "close": "閉じる", + "detailError": "請求書詳細を読み込めませんでした。", + "liItem": "項目", + "liQty": "数量", + "liUnit": "単価", + "liAmount": "金額", + "noLines": "明細項目なし", + "supplyAmount": "供給価額", + "vat": "消費税(10%)", + "grandTotal": "請求総額", + "paidOutstanding": "入金 / 未収", + "payHistory": "入金履歴", + "noPayments": "入金記録がありません。", + "won": "{{v}}ウォン", + "issue": "請求書発行", + "issuing": "発行中…", + "payAmount": "入金額", + "payAmountPh": "入金額(ウォン)", + "payMethod": "入金方法", + "methodTransfer": "口座振込", + "methodCard": "カード", + "methodOther": "その他", + "memo": "メモ", + "memoPh": "メモ(任意)", + "recordPay": "入金記録", + "recording": "記録中…", + "payFail": "入金記録に失敗しました。金額(総額以内)・権限を確認してください。", + "errPositive": "0より大きい金額を入力してください。", + "errExceed": "未収残高を超えることはできません。", + "pgNote": "実際の決済は外部 PG に委任されます。本画面は入金確認記録専用です。", + "managerOnly": "入金・発行は主催者/ホールマネージャーのみ実行できます。", + "colCategory": "種別", + "catRental": "賃貸·設備", + "catAuctionFee": "オークション手数料", + "reportTitle": "精算レポート", + "reportShow": "レポート表示", + "reportHide": "閉じる", + "reportHint": "カテゴリ・状態別の合計、収納率、未収を集計しCSVで出力します。", + "reportError": "レポートを読み込めませんでした。", + "reportCsv": "CSVダウンロード", + "reportByCategory": "カテゴリ別合計", + "reportByStatus": "状態別合計", + "reportEmpty": "集計対象の請求がありません。", + "reportNote": "合計は取消請求を除いた値です。金額はサーバー計算基準です。", + "reportRate": "収納率", + "reportCount": "件数", + "taxTitle": "税金計算書", + "taxNo": "計算書番号", + "taxSupplier": "供給者", + "taxBuyer": "供給を受ける者", + "taxItem": "品目", + "taxNone": "発行された税金計算書がありません。", + "taxIssue": "税金計算書発行", + "taxIssuing": "発行中…", + "taxIssueFail": "税金計算書の発行に失敗しました。", + "cancelledNote": "取消された請求です。", + "cancelInvoice": "請求取消", + "refundPreview": "返金試算プレビュー", + "refundError": "返金試算を読み込めませんでした。", + "refundBracket": "適用区間", + "refundRate": "返金率", + "refundBase": "基準額(入金)", + "refundAmount": "返金額", + "forfeitAmount": "控除・違約額", + "refundManual": "開催日未確定などで自動試算ができません — 財務の手動確認対象です。", + "cancelReason": "取消理由", + "cancelReasonPh": "取消理由(任意)", + "cancelAbort": "中断", + "cancelConfirm": "取消確定", + "cancelling": "処理中…", + "cancelFail": "請求の取消に失敗しました。" + }, + "hallassign": { + "title": "ホール割当 · 自動見積", + "subtitle": "ホール×期間の割当状況と料率ルールセットに基づく即時見積(M1)。", + "start": "開始", + "end": "終了", + "newAssign": "新規割当", + "board": "割当ボード", + "boardHint": "重複する割当は競合として表示されます。", + "forbiddenTitle": "ホールマネージャー専用ボード", + "forbiddenDesc": "割当状況の照会は KINTEX ホールマネージャーアカウントのみ可能です。自動見積は下部をご利用ください。", + "noHalls": "ホールマスターがありません。", + "noAssign": "割当なし", + "release": "割当解除", + "releaseConfirm": "{{event}} の {{hall}} 割当を解除しますか？", + "assignedToast": "ホールが割り当てられました。", + "releasedToast": "割当が解除されました。", + "releaseFail": "解除に失敗しました(権限確認)。", + "conflictErr": "割り当てるホール・期間が他のイベントと重複します。", + "assignFail": "割当に失敗しました。", + "pickEventHall": "イベントとホールを選択してください。", + "modalTitle": "ホール割当", + "close": "閉じる", + "event": "イベント", + "pickEvent": "イベント選択…", + "hall": "ホール", + "pickHall": "ホール選択…", + "occupyStart": "占有開始", + "occupyEnd": "占有終了", + "primary": "主割当ホール(primary)", + "note": "備考", + "optional": "任意入力", + "cancel": "キャンセル", + "assign": "割当", + "assigning": "割当中…", + "autoQuote": "自動見積", + "quoteHint": "料率ルールセット基準 · 最終金額は KINTEX 確定時に案内", + "startDate": "開始日", + "endDate": "終了日", + "boothSize": "ブース規模(任意)", + "countPh": "数量", + "calcQuote": "見積計算", + "calculating": "計算中…", + "quoteFail": "見積計算に失敗しました。", + "quoteReq": "ホール・開始日・終了日を入力してください。", + "qItem": "項目", + "qBasis": "算出根拠", + "qAmount": "金額", + "rentalSubtotal": "賃料小計", + "rentalTotal": "賃料合計 ({{days}}日)", + "deposit": "管理費予託金(別途)", + "ruleset": "(ルールセット {{v}})", + "openDetail": "{{event}} の割当詳細を開く", + "detailTitle": "割当詳細", + "edit": "編集", + "dHall": "ホール", + "dPeriod": "占有期間", + "dStatus": "ステータス", + "dNote": "備考", + "primaryTag": "主ホール", + "dConflict": "競合状況", + "dNoConflict": "重複する割当はありません。", + "dQuote": "自動見積サマリー", + "dQuoteNoPeriod": "占有期間がないため見積を計算できません。", + "dQuoteFail": "見積を取得できませんでした。" + }, + "ai": { + "console": { + "title": "AIコンソール", + "subtitle": "自然言語でデータを照会し、展示規定を質問します。結果は参考用で、根拠も併記します。", + "badge": "参考用", + "tabsAria": "AIコンソールタブ", + "tabNlquery": "自然言語照会", + "tabRules": "規定チャットボット" + }, + "common": { + "running": "実行中…", + "provClaude": "Claude応答", + "provOllama": "Ollama応答", + "provRules": "規定原文に基づく", + "provNone": "応答なし", + "unavailable": "AI機能が一時的に利用できません。しばらくして再度お試しください。", + "invalid": "安全ルールに違反するため実行できない照会です。", + "forbidden": "この機能を使用する権限がありません。", + "error": "リクエスト処理中にエラーが発生しました。" + }, + "nlquery": { + "placeholder": "例：ステータスがactiveのイベント一覧を表示", + "inputAria": "自然言語照会の質問", + "run": "照会", + "guardNote": "読み取り専用のSELECTのみ実行し、個人情報の列は照会しません。最大200行。", + "rowCount": "{{n}}行", + "showSql": "生成SQLを表示", + "hideSql": "生成SQLを非表示", + "sqlAria": "生成されたSQL", + "emptyTitle": "結果がありません", + "emptyDesc": "条件に該当するデータがありません。質問を変えて再度お試しください。" + }, + "rules": { + "placeholder": "例：装置物の最大高さはいくらですか？", + "inputAria": "規定に関する質問", + "run": "質問", + "groundNote": "規定・料率ルールセットを根拠に回答し、根拠がなければ正直にお知らせします。", + "citations": "根拠規定", + "notFound": "規定で見つかりませんでした", + "degraded": "規定原文の要約（AI利用不可）" + }, + "assistant": { + "label": "AI ガイド", + "inputAria": "来場アシスタントに質問", + "sendAria": "質問を送信", + "chipsLabel": "よくある質問", + "chip1": "今週末にロボット展はある？", + "chip2": "KINTEXの駐車場はどこ？", + "chip3": "家族向けの展示を教えて", + "chip4": "事前登録の方法は？", + "chip5": "GTX-Aでどのくらい？", + "thinking": "回答を生成中…", + "error": "回答を取得できませんでした。再度お試しください。", + "retry": "再試行", + "degraded": "AIガイド点検中 — 蓄積データ検索でご案内します", + "providerAi": "AI 回答", + "notFound": "該当情報が見つかりませんでした — 全日程・ガイドをご確認ください。", + "cardEventsTitle": "関連展示", + "cardTransportTitle": "アクセス", + "cardGuideTitle": "来場案内", + "followupLabel": "続けて質問", + "followup1": "無料ですか？", + "followup2": "駐車場はどこ？", + "followup3": "事前登録の方法", + "citations": "出典", + "register": "事前登録", + "disclaimer": "AI生成の回答 — 正確な情報は公式案内をご確認ください。" + } + }, + "analytics": { + "title": "経営分析", + "subtitle": "KINTEX 運営収益性 · 出展社インサイト", + "perspective": "分析視点", + "operator": "運営社", + "exhibitor": "出展社", + "periodAria": "分析期間", + "periodEvent": "今回のイベント", + "periodD90": "直近 90 日", + "periodAnnual": "年間", + "exportPdf": "PDF 出力", + "exportExcel": "Excel 出力", + "noEventTitle": "イベントを選択してください", + "noEventDesc": "分析するイベントが指定されていません。", + "offlineSample": "オフライン — サンプル", + "degradedMsg": "集計 API に接続できず、デモ用サンプルを表示しています。", + "loadError": "経営分析集計を読み込めませんでした。", + "kpisAria": "主要指標", + "kpiEmpty": "集計された指標がありません", + "trendAria": "トレンドチャート", + "trendTitle": "売上 · ブース推移", + "monthlyAgg": "月別集計", + "trendHint": "月別の賃貸・ユーティリティ売上とブース数の推移です(売上単位：ウォン)。", + "trendEmptyTitle": "推移データがありません", + "trendEmptyDesc": "集計可能な期間の売上・ブースレコードがありません。", + "revenue": "売上", + "booth": "ブース", + "boothsUnit": "{{n}} ブース", + "sectorsAria": "業種別構成", + "sectorsTitle": "業種別構成", + "sectorsEmptyTitle": "業種分類未集計", + "sectorsEmptyDesc": "業種分類ソース(M13)が連携されると表示されます。", + "perfTable": "成果テーブル", + "pnlTitle": "損益(P&L)構成", + "exhibitorPerfTitle": "出展社成果", + "sampleTag": "サンプル", + "pnlEmptyTitle": "損益項目がありません", + "pnlEmptyDesc": "ブース賃貸・ユーティリティ売上レコードが集計されると表示されます。", + "colItem": "項目", + "colAmount": "金額", + "colGrade": "等級", + "perfEmptyTitle": "出展社成果未集計", + "perfEmptyDesc": "リード・転換率ソース(M13 来場者)が連携されると表示されます。", + "colCompany": "会社名", + "colLeads": "リード", + "colConversion": "転換率" + }, + "global": { + "sectionAria": "テナント全域経営分析", + "title": "全社経営分析 (イベント横断)", + "subtitle": "イベント間売上比較 · ホール稼働率推移 · 出展社リテンション · 需要予測", + "yearsAria": "分析年数", + "years3": "直近 3 年", + "years5": "直近 5 年", + "years10": "直近 10 年", + "loadErrorTitle": "全域集計を読み込めませんでした", + "loadErrorDesc": "しばらくしてから再試行してください。", + "kpisAria": "全域主要指標", + "kpiEmpty": "集計された指標がありません", + "evComp": "イベント間売上比較", + "top8": "上位 8 件", + "evCompHint": "ブースが配置されたイベントの賃貸+ユーティリティ売上ランキングです(単位：ウォン)。", + "evCompEmptyTitle": "比較するイベントがありません", + "evCompEmptyDesc": "ブースが配置されたイベント売上が集計されると表示されます。", + "revenue": "売上", + "retention": "出展社リテンション", + "retentionCum": "累積再出展率", + "returning": "再出展", + "retentionEmptyTitle": "年度別リテンション未集計", + "retentionEmptyDesc": "ブース割当社ソースが連携されると表示されます。", + "retentionRate": "再出展率", + "occupancy": "ホール稼働率推移 (月別)", + "occupancyHint": "開催イベント-日数 ÷ (ホール数 × その月の日数) 基準の月別稼働率です。", + "occupancyEmpty": "稼働率データがありません", + "occupancyRate": "稼働率", + "forecast": "需要予測", + "forecastTitle": "需要予測 (開催トレンド)", + "trendProjection": "トレンド投影", + "forecastHint": "年度別開催イベント数の実測 + 最小二乗線形トレンドで今後 2 年を投影(点線)。", + "forecastEmptyTitle": "予測する履歴がありません", + "forecastEmptyDesc": "年度別開催履歴が集計されると表示されます。", + "casesUnit": "{{n}}件", + "actual": "実測", + "projected": "予測" + }, + "ops": { + "title": "ホール現場運営", + "subtitle": "チェックイン・ユーティリティ実集計に基づく状況", + "modeAria": "照会モード", + "live": "リアルタイム", + "history": "履歴照会", + "noEventTitle": "イベントを選択してください", + "noEventDesc": "現場運営を照会するイベントが指定されていません。", + "offlineSample": "オフライン — サンプル", + "degradedMsg": "集計 API に接続できず、デモ用サンプルを表示しています。", + "loadError": "現場運営状況を読み込めませんでした。", + "hallStatus": "ホール別状況", + "checkinDerived": "チェックイン(M10)派生 · 面積比重で分配", + "sensorNoneHalls": "センサー未連携 · 割当ホール一覧", + "noHallsTitle": "割り当てられたホールがありません", + "noHallsDesc": "イベントにホールが割り当てられると表示されます。", + "busy": "混雑", + "smooth": "円滑", + "moderate": "普通", + "people": "{{n}}名", + "onSiteCheckin": "現場チェックイン <0>{{n}}名", + "noCheckinAgg": "チェックイン集計なし", + "powerLoad": "電力負荷", + "totalKw": "計 <0>{{v}}kW", + "utilLoadAgg": "ユーティリティ申請(M4)負荷集計", + "noLoadTitle": "申請負荷なし", + "noLoadDesc": "電気ユーティリティ申請が受け付けられるとホール別負荷が表示されます。", + "kw": "{{v}}kW", + "hourlyCheckin": "時間帯別チェックイン", + "hourlyAgg": "チェックイン(M10)時間帯集計", + "noSeriesTitle": "チェックイン推移なし", + "noSeriesDesc": "現場チェックインが記録されると時間帯別推移が表示されます。", + "facilitySensor": "施設センサー連携", + "facilitySensorTitle": "施設センサー (空調·照明·駐車)", + "sensorNoneTitle": "施設センサー未連携", + "sensorNoneDesc": "空調(HVAC)·照明 IoT·駐車(iparking)連携はセンサー(M14)連携時に表示されます。", + "temp": "温度", + "humidity": "湿度", + "parkingSlots": "{{zone}}: {{occ}}/{{cap}}台" + }, + "admin": { + "deniedTitle": "アクセス権限がありません", + "deniedAuthed": "このページはシステム管理者(ホールマネージャー·ADMIN)のみ利用できます。アクセスが必要な場合は管理者にお問い合わせください。", + "deniedGuest": "管理バックオフィスはログイン後に利用できます。", + "overviewTitle": "システム概要", + "overviewSub": "リアルタイム指標と運用状態", + "loginSlides": "ログインスライド管理", + "tenantSwitch": "テナント切替", + "systemNormal": "システム正常", + "moduleShortcuts": "管理モジュールショートカット", + "offlineSample": "オフライン — サンプル", + "degradedMsg": "集計 API に接続できず、デモ用サンプルを表示しています。", + "dashLoadError": "管理者ダッシュボードを読み込めませんでした。", + "kpisAria": "主要指標", + "kpiEmpty": "集計された指標がありません", + "visitorTrend": "来場者推移", + "hourlyVisitors": "時間帯別来場者", + "visitors": "来場者", + "visitorTrendEmptyTitle": "来場者推移未集計", + "visitorTrendEmptyDesc": "来場者計測センサー(M14)が連携されると時間帯別推移が表示されます。", + "liveEvents": "開催中イベント", + "noLiveEvents": "開催中のイベントがありません", + "hallTbd": "ホール未割当", + "occupancy": "占有 {{n}}%", + "modUsers": "ユーザー", + "modRoles": "役割·権限", + "modCodes": "共通コード", + "modMenus": "メニュー", + "modAudit": "監査ログ", + "modSettings": "システム設定", + "modRulesets": "ルールセット", + "modTenants": "テナント" + }, + "tenant": { + "title": "テナント管理·オンボーディング", + "subtitle": "プラットフォームスーパー管理者専用 · コード配備なしにデータオンボーディングで展示館を追加します。", + "sampleTag": "サンプル · 未実装", + "sampleNote": "マルチテナンシー(テナント CRUD·オンボーディング·分離)がバックエンドにまだ無いため、画面は目標 IA を表示します。実データ連携はマルチテナンシー導入後に配線されます。", + "listAria": "テナント一覧", + "venue": "展示館", + "notImpl": "未実装", + "addVenue": "展示館追加", + "code": "コード", + "domain": "ドメイン", + "status": "ステータス", + "events": "イベント", + "users": "ユーザー", + "wizardAria": "オンボーディングウィザード", + "onboardingOf": "{{name}} オンボーディング", + "dataOnboarding": "コード配備なしのデータオンボーディング", + "wiz": { + "create": { + "label": "テナント作成", + "desc": "コード·表示名の登録" + }, + "domain": { + "label": "サブドメイン", + "desc": "DNS·ブランディングドメイン割当" + }, + "brand": { + "label": "ブランディング", + "desc": "ロゴ·色·公開サイトテーマ" + }, + "master": { + "label": "マスターデータ入力", + "desc": "ホール·料率·ルールセットシード" + }, + "admin": { + "label": "管理者アカウント", + "desc": "テナント管理者を招待" + }, + "smoke": { + "label": "分離スモーク", + "desc": "クロステナント分離検証" + }, + "activate": { + "label": "有効化", + "desc": "運用へ切替" + } + }, + "tstatus": { + "active": "有効", + "onboarding": "オンボーディング中", + "suspended": "停止" + } + }, + "ruleset": { + "title": "規定ルールセットバージョン管理", + "subtitle": "規定改定対応のためのルールセットバージョン履歴と規則項目です。", + "readonly": "読み取り専用", + "readonlyNote": "ルールセットはデプロイリソース(rulesets/*.json)でバージョン管理されます。編集・バージョン作成は規定改定時のリソース差し替えで行われ、画面では照会のみ可能です。", + "listError": "ルールセット一覧を読み込めませんでした。", + "noRulesets": "デプロイされたルールセットがありません", + "versionHistory": "バージョン履歴", + "rulesCount": "規則 {{n}}", + "effectiveDate": "発効日 {{date}}", + "ruleList": "規則一覧", + "rulesOf": "{{name}} 規則 ({{n}}件)", + "detailError": "規則全文を読み込めませんでした。", + "noRulesTitle": "規則配列がないルールセットです", + "noRulesDesc": "料率マスターなど、規則(rules)なしで料率・単価のみ定義されたルールセットです。", + "colRuleName": "規則名", + "colValue": "数値/設定値", + "colLogic": "論理 / 要件", + "colSeverity": "違反レベル", + "block": "遮断", + "warn": "警告", + "required": "必須", + "perHall": "ホール別 {{unit}}", + "docNeeded": "文書必要: {{doc}}" + }, + "audit": { + "title": "監査ログ", + "subtitle": "承認·落札·設定変更などすべての管理アクションと重要なドメインイベントを追跡します。(整合性維持)", + "exportCsv": "CSV 出力", + "filterAria": "監査ログフィルター", + "actionType": "アクション種別", + "allActions": "全アクション", + "actorId": "担当者 ID", + "actorIdPh": "例: user-102", + "eventId": "イベント ID", + "eventIdPh": "例: EVT-2026-01", + "reset": "リセット", + "applyFilter": "フィルター適用", + "loadError": "監査ログを読み込めませんでした。", + "tableAria": "監査ログテーブル", + "emptyTitle": "条件に一致する監査記録がありません", + "emptyDesc": "フィルターを調整またはリセットして再照会してください。", + "colTime": "時刻", + "colUser": "ユーザー", + "colAction": "アクション", + "colTarget": "対象", + "colEvent": "イベント", + "colResult": "結果", + "showing": "表示中 <0>{{from}}-{{to}} / 全 <1>{{total}}件", + "prev": "前へ", + "next": "次へ", + "rowsShow": "行表示", + "rowsPerPage": "ページあたり行数", + "rowsN": "{{n}}件", + "success": "成功", + "failure": "失敗", + "csvTime": "時刻", + "csvActorId": "担当者ID", + "csvActorName": "担当者名", + "csvAction": "アクション", + "csvTargetType": "対象種別", + "csvTargetId": "対象ID", + "csvEventId": "イベントID", + "csvResult": "結果", + "csvSummary": "要約" + }, + "role": { + "title": "役割 · 権限 (RBAC)", + "subtitle": "役割(主催者·出展社·装置業者·ホールマネージャー·管理者·来場者)ごとにリソース権限をマトリックスで割り当てます。", + "addRole": "役割追加", + "loadError": "役割·権限情報を読み込めませんでした。", + "noRolesTitle": "定義された役割がありません", + "noRolesDesc": "役割を追加して RBAC を構成してください。", + "roleList": "役割一覧", + "role": "役割", + "codePerm": "{{code}} · 権限 {{n}}", + "unused": "未使用", + "permMatrix": "権限マトリックス", + "rolePerm": "{{name}} 権限", + "roleInfo": "役割情報", + "deleteConfirm": "役割 '{{name}}' を削除しますか？", + "delete": "削除", + "noPerms": "定義された権限がありません", + "selectRole": "役割を選択してください", + "saved": "役割を保存しました。", + "deleted": "役割を削除しました。", + "addRoleModal": "役割追加", + "editRole": "役割情報の編集", + "modalDesc": "権限割当は保存後にマトリックスでチェックにより管理します。", + "roleCode": "役割コード *", + "roleCodePh": "例: ORGANIZER", + "roleName": "役割名 *", + "description": "説明", + "useYn": "使用可否", + "use": "使用", + "noUse": "未使用", + "cancel": "キャンセル", + "save": "保存", + "saving": "保存中…", + "errRequired": "役割コードと名前は必須です。", + "errDupCode": "既に存在する役割コードです。" + }, + "menu": { + "title": "メニュー管理", + "subtitle": "役割別ナビゲーションメニューツリーとパス·アクセス役割を管理します。", + "addMenu": "メニュー追加", + "loadError": "メニューを読み込めませんでした。", + "treeAria": "メニューツリー", + "emptyTitle": "登録されたメニューがありません", + "emptyDesc": "メニューを追加してください。", + "colName": "メニュー名", + "colPath": "パス", + "colType": "種別", + "colRole": "アクセス役割", + "colSort": "並び順", + "colUse": "使用", + "colManage": "管理", + "all": "全体", + "unused": "未使用", + "used": "使用", + "edit": "編集", + "delete": "削除", + "deleteConfirm": "メニュー '{{name}}' を削除しますか？下位メニューがある場合は一緒に整理されます。", + "saved": "メニューを保存しました。", + "deleted": "メニューを削除しました。", + "editMenu": "メニュー編集", + "menuId": "メニュー ID (一意キー) *", + "menuIdPh": "例: admin-users", + "menuName": "メニュー名 *", + "parent": "上位メニュー", + "topLevel": "(最上位)", + "path": "パス(path)", + "pathPh": "例: /admin/users", + "type": "種別", + "accessRole": "アクセス役割", + "accessRolePh": "例: ADMIN (空欄で全体)", + "sort": "並び順", + "useYn": "使用可否", + "cancel": "キャンセル", + "save": "保存", + "saving": "保存中…", + "errName": "メニュー名は必須です。", + "errId": "メニュー ID(一意キー)は必須です。", + "errDupId": "既に存在するメニュー ID です。" + }, + "code": { + "title": "共通コード管理", + "subtitle": "ドロップダウン·分類に使う共通コードグループとコード値を管理します。", + "addGroup": "グループ追加", + "groupLoadError": "コードグループを読み込めませんでした。", + "noGroupsTitle": "コードグループがありません", + "noGroupsDesc": "グループを追加して共通コードを構成してください。", + "codeGroup": "コードグループ", + "codeValues": "コード値", + "valuesOf": "{{name}} 値", + "editGroup": "コードグループ編集", + "deleteGroup": "グループ削除", + "deleteGroupConfirm": "グループ '{{name}}' と下位コードを削除しますか？", + "addCode": "コード追加", + "codeLoadError": "コード値を読み込めませんでした。", + "noCodesTitle": "コードがありません", + "noCodesDesc": "コードを追加してください。", + "code": "コード", + "name": "名前", + "value": "値", + "sort": "並び順", + "use": "使用", + "manage": "管理", + "unused": "未使用", + "used": "使用", + "edit": "編集", + "delete": "削除", + "deleteCodeConfirm": "コード '{{name}}' を削除しますか？", + "groupSaved": "コードグループを保存しました。", + "groupDeleted": "コードグループを削除しました。", + "codeSaved": "コードを保存しました。", + "codeDeleted": "コードを削除しました。", + "groupCode": "グループコード *", + "groupName": "グループ名 *", + "description": "説明", + "useYn": "使用可否", + "cancel": "キャンセル", + "save": "保存", + "saving": "保存中…", + "errGroupRequired": "グループコードと名前は必須です。", + "errDupGroup": "既に存在するグループコードです。", + "editCode": "コード編集", + "group": "グループ", + "codeReq": "コード *", + "nameReq": "名前 *", + "attr1": "属性1(attr1)", + "errCodeRequired": "コードと名前は必須です。", + "errDupCode": "既に存在するコードです。" + }, + "sysuser": { + "title": "ユーザー管理", + "subtitle": "アカウント作成·編集、役割割当、ステータス(有効/ロック/無効)と OTP 初期化を管理します。パスワードはマスクされ表示されません。", + "addUser": "ユーザー追加", + "searchAria": "ユーザー検索", + "keyword": "検索語", + "keywordPh": "名前·メール", + "role": "役割", + "status": "ステータス", + "all": "全体", + "reset": "リセット", + "search": "検索", + "loadError": "ユーザー一覧を読み込めませんでした。", + "listAria": "ユーザー一覧", + "emptyTitle": "ユーザーがいません", + "emptyDesc": "検索条件を調整するかユーザーを追加してください。", + "colUser": "ユーザー", + "colEmail": "メール", + "colRole": "役割", + "colDept": "部署", + "colStatus": "ステータス", + "colLastLogin": "最終ログイン", + "colManage": "管理", + "hallManagerTag": "ホールMgr", + "otpSet": "設定済", + "otpUnset": "未設定", + "edit": "編集", + "lock": "ロック", + "unlock": "ロック解除", + "otpResetBtn": "OTP初期化", + "otpResetConfirm": "{{name}} の OTP を初期化しますか？", + "saved": "ユーザーを保存しました。", + "statusChanged": "ステータスを変更しました。", + "otpReset": "OTP を初期化しました。", + "active": "有効", + "locked": "ロック", + "disabled": "無効", + "editUser": "ユーザー編集", + "newDesc": "初期パスワードは保存後に画面に表示されません。", + "editDesc": "メールは編集できません。パスワード再設定は別途ポリシーに従います。", + "email": "メール *", + "displayName": "表示名 *", + "dept": "部署", + "initPassword": "初期パスワード *", + "hallManagerCheck": "ホールマネージャー(内部運営者)", + "cancel": "キャンセル", + "save": "保存", + "saving": "保存中…", + "errRequired": "メールと表示名は必須です。", + "errPassword": "新規ユーザーは初期パスワードが必要です。", + "totalUsers": "全 <0>{{total}}名", + "prev": "前へ", + "next": "次へ" + }, + "settings": { + "title": "システム設定", + "subtitle": "グローバルポリシー·機能トグル·AI ゲートなどのシステムパラメータを管理します。シークレット値はマスキング表示されます。", + "loadError": "システム設定を読み込めませんでした。", + "emptyTitle": "登録された設定がありません", + "emptyDesc": "下のフォームで最初の設定項目を追加してください。", + "saved": "設定を保存しました。", + "deleted": "設定を削除しました。", + "deleteConfirm": "設定 '{{key}}' を削除しますか？", + "general": "一般", + "groupAria": "設定グループ {{name}}", + "secret": "シークレット", + "secretTitle": "シークレット — 値マスキング", + "on": "オン", + "off": "オフ", + "secretPh": "設定済(マスキング) — 変更時に新しい値を入力", + "save": "保存", + "delete": "削除", + "deleteKey": "{{key}} 削除", + "secretHint": "シークレット原文は表示されません。値を入力せず保存すると既存の値が維持されます。", + "addAria": "設定追加", + "addTitle": "設定追加 / 再定義", + "settingKey": "設定キー", + "settingKeyPh": "例: deadline.utility.days", + "value": "値", + "type": "タイプ", + "description": "説明", + "secretCheck": "シークレット(値マスキング)" + }, + "slide": { + "title": "ログインスライド管理", + "subtitle": "ログイン画面左側カルーセルの画像·文言 — 有効なスライドのうち<0>最新登録順5件がローテーションされます。", + "addAria": "新規スライド追加", + "addTitle": "新規スライド追加", + "imageLabel": "画像 (PNG/JPG/WebP, 8MB 以下)", + "preview": "プレビュー", + "titleLabel": "タイトル文言", + "titlePh": "例) アジアを代表する展示コンベンションセンター、KINTEX", + "captionLabel": "キャプション(補助文言)", + "captionPh": "例) 10万㎡の展示スペースで広がるビジネスチャンスをご体験ください。", + "submitting": "登録中…", + "submit": "スライド登録", + "listAria": "スライド一覧", + "registered": "登録されたスライド", + "countActive": "全 {{total}}件 · 有効 {{active}}件", + "emptyTitle": "登録されたスライドがありません", + "emptyDesc": "画像と文言を登録するとログイン画面のカルーセルに表示されます。(未登録時はデフォルト5種を表示)", + "live": "表示中", + "inactive": "無効", + "registeredAt": "登録 {{date}}", + "active": "有効", + "delete": "削除", + "listError": "一覧を読み込めませんでした。", + "errImage": "スライド画像を選択してください。", + "errTitle": "タイトル文言を入力してください。", + "createFail": "登録に失敗しました。", + "updateFail": "変更に失敗しました。", + "deleteFail": "削除に失敗しました。", + "deleteConfirm": "\"{{title}}\" スライドを削除しますか？" + }, + "approval": { + "queueTitle": "承認受信箱", + "search": "検索", + "searchPlaceholder": "タイトル検索...", + "pendingCount": "承認待ち", + "pendingList": "自分の承認待ち文書", + "colTitle": "タイトル", + "colDocType": "種別", + "colDrafter": "起案者", + "colSubmitted": "申請日", + "colStep": "段階", + "colStatus": "状態", + "colAction": "処理", + "open": "開く", + "emptyPending": "承認する文書がありません", + "status": { + "DRAFT": "一時保存", + "SUBMITTED": "申請", + "IN_PROGRESS": "進行中", + "APPROVED": "承認完了", + "REJECTED": "却下", + "CANCELED": "取消" + }, + "reviewTitle": "承認レビュー", + "version": "バージョン", + "drafter": "起案者", + "step": "段階", + "demoMode": "プレビュー(デモ)", + "downloadOriginal": "原本ダウンロード", + "previewAria": "文書プレビュー", + "lineAria": "承認ライン・履歴", + "docBody": "本文", + "line": "承認ライン", + "history": "処理履歴", + "noHistory": "処理履歴がありません", + "lineStatus": { + "WAIT": "待機", + "CURRENT": "審査中", + "APPROVED": "承認", + "REJECTED": "却下", + "SKIPPED": "スキップ" + }, + "action": { + "SUBMIT": "申請", + "APPROVE": "承認", + "REJECT": "却下", + "RESUBMIT": "再申請", + "CANCEL": "取消" + }, + "approve": "承認", + "reject": "却下", + "approvedDone": "承認しました。", + "rejectedDone": "却下しました。", + "canActHint": "この文書の現在の承認者です。", + "notApproverHint": "現在段階の承認者のみ処理できます。", + "demoFootNote": "承認受信箱から文書を選択すると承認/却下できます。", + "demoHint": "承認文書が指定されていません。承認受信箱から開いてください。", + "commentPlaceholder": "コメント(却下時は必須)を入力", + "comment": "コメント", + "boxTitle": "決裁箱", + "compose": "起案", + "composeTitle": "決裁起案", + "resubmitTitle": "却下文書の再申請", + "backToList": "一覧へ", + "tab": { + "PENDING": "決裁待ち", + "DRAFTED": "申請済み", + "REJECTED": "却下", + "DONE": "完了" + }, + "empty": { + "PENDING": "決裁する文書がありません", + "DRAFTED": "申請した文書がありません", + "REJECTED": "却下された文書がありません", + "DONE": "完了した文書がありません" + }, + "resubmitBtn": "再申請", + "draftSave": "一時保存", + "submitDoc": "申請", + "cancel": "キャンセル", + "saving": "処理中…", + "docType": "文書種別", + "docTypes": { + "GENERAL": "一般", + "DESIGN": "デザイン/図面", + "DOCUMENT": "書類", + "EXPENSE": "費用/支出", + "ETC": "その他" + }, + "titleLabel": "タイトル", + "titlePlaceholder": "決裁文書のタイトルを入力してください", + "contentLabel": "内容", + "contentPlaceholder": "決裁文書の内容を入力してください", + "err": { + "titleRequired": "タイトルを入力してください。", + "lineRequired": "決裁ラインを1名以上指定してください。" + }, + "createdDraft": "一時保存しました。", + "submittedDone": "申請しました。", + "resubmittedDone": "再申請しました。", + "rejectedReason": "却下理由", + "canResubmitHint": "却下された起案です。修正して再申請できます。", + "lineEditor": { + "empty": "決裁者が指定されていません。決裁者を追加してください。", + "stepNo": "{{n}}段階", + "idPlaceholder": "決裁者ID", + "namePlaceholder": "表示名(任意)", + "approverId": "{{n}}段階の決裁者ID", + "approverName": "{{n}}段階の決裁者名", + "moveUp": "上へ移動", + "moveDown": "下へ移動", + "remove": "決裁者を削除", + "add": "決裁者を追加" + }, + "rejectModalTitle": "却下処理", + "approveModalTitle": "承認処理", + "rejectReason": "却下理由", + "rejectReasonPlaceholder": "却下理由を入力してください", + "rejectReasonHint": "却下理由は起案者に通知され、再申請時に表示されます。", + "commentOptional": "コメント(任意)を入力してください" + }, + "auction": { + "boq": { + "title": "数量書(BOQ)自動算出", + "error": "数量書を読み込めませんでした。", + "scopeBooth": "{{label}} ブース基準", + "scopeEvent": "イベント全ブース集計", + "summary": "ブース {{count}}件 · {{area}}㎡", + "colSeq": "No", + "colTrade": "工種", + "colItem": "品名", + "colQty": "数量", + "colUnit": "単位", + "colBasis": "算出根拠" + } + }, + "logistics": { + "title": "物流ハブ", + "subtitle": "搬入・搬出ドック · 付帯機材 · レンタル · 事前入荷追跡", + "tabsAria": "物流機能の切替", + "tabs": { + "dock": "ドック予約", + "equipment": "機材申請", + "rental": "レンタル注文", + "inbound": "事前入荷" + }, + "boothNo": "ブース番号", + "qty": "数量", + "estimate": "概算金額", + "submitting": "処理中…", + "submitOk": "受け付けました。", + "submitErr": "処理に失敗しました。", + "statusUpdated": "ステータスを変更しました。", + "loadErr": "物流情報を読み込めませんでした。", + "serverAmountNote": "金額はサーバー基準で確定します", + "equipment": { + "formTitle": "付帯機材の申請", + "item": "機材品目", + "days": "使用日数", + "daysUnit": "日", + "useDate": "使用予定日", + "submit": "機材を申請", + "listTitle": "申請履歴", + "empty": "申請履歴がありません", + "emptyDesc": "フォークリフト・リフト等を申請してください。", + "approve": "承認", + "reject": "却下", + "rejectReason": "現場状況により却下", + "done": "処理完了", + "st": { + "requested": "申請済", + "approved": "承認", + "rejected": "却下", + "done": "完了" + } + }, + "rental": { + "formTitle": "付帯物品のレンタル注文", + "item": "レンタル品目", + "start": "開始日", + "end": "終了日", + "submit": "レンタル注文", + "listTitle": "注文履歴", + "empty": "注文履歴がありません", + "emptyDesc": "テーブル・椅子・モニター等を注文してください。", + "period": "{{days}}日", + "confirm": "確定", + "cancel": "キャンセル", + "deliver": "納品完了", + "st": { + "ordered": "注文済", + "confirmed": "確定", + "cancelled": "キャンセル", + "delivered": "納品" + } + }, + "inbound": { + "formTitle": "事前入荷の送り状登録", + "trackingNo": "送り状番号", + "carrier": "運送会社", + "itemDesc": "貨物内容", + "eta": "入荷予定日", + "submit": "送り状を登録", + "submitSub": "登録後に入荷状況を追跡します", + "listTitle": "事前入荷状況", + "empty": "事前入荷がありません", + "emptyDesc": "事前配送の送り状を登録してください。", + "st": { + "registered": "登録済", + "inbound_scheduled": "入荷予定", + "arrived_warehouse": "倉庫到着", + "delivered_booth": "ブース配達" + }, + "advance": { + "inbound_scheduled": "入荷予定にする", + "arrived_warehouse": "倉庫到着にする", + "delivered_booth": "ブース配達完了" + } + } + }, + "appqr": { + "title": "KINTEXエキシビションアプリのダウンロード", + "subtitle": "モバイルアプリのインストール", + "intro": "QRコードをスキャンするか、下のボタンからKINTEXエキシビションアプリをインストールしてください。", + "about": "アプリサイズ {{size}}", + "appName": "KINTEX AI エキシビションアプリ", + "builtAt": "{{date}} ビルド", + "download": "APK をダウンロード", + "copyLink": "リンクをコピー", + "copied": "コピーしました", + "refresh": "更新", + "retry": "再試行", + "qrAlt": "アプリダウンロードQRコード", + "iosNote": "iOSはApp Storeの正式リリース後に対応予定です。", + "notReady": { + "title": "アプリを準備中です", + "desc": "インストールファイルはまだ公開されていません。しばらくしてから再度お試しください。" + }, + "steps": { + "heading": "インストール方法", + "s1": "スマートフォンのカメラでQRコードをスキャンします。", + "s2": "表示されたリンクを開いてAPKをダウンロードします。", + "s3": "「提供元不明のアプリのインストール」を許可します。", + "s4": "インストール後、アプリを開いてログインします。" + } + }, + "authPolicy": { + "title": "認証ポリシー", + "subtitle": "パスワード規則とログインロックポリシーを設定します。", + "loadError": "認証ポリシーの読み込みに失敗しました。", + "saved": "認証ポリシーを保存しました。", + "pwSection": "パスワードポリシー", + "pwMinLength": "最小文字数", + "pwExpireDays": "有効期間（日）", + "pwRequireUpper": "大文字を含む", + "pwRequireNumber": "数字を含む", + "pwRequireSpecial": "特殊文字を含む", + "lockSection": "ログインロック", + "loginMaxFail": "最大失敗回数", + "lockMinutes": "ロック時間（分）", + "sessionTimeoutMin": "セッションタイムアウト（分）" + }, + "company": { + "title": "企業管理", + "subtitle": "出展企業と協力会社の情報を管理します。", + "add": "企業を追加", + "edit": "企業を編集", + "searchPh": "企業名または事業者番号で検索", + "partnerType": "区分", + "allTypes": "すべての区分", + "bizType": "業種", + "ceo": "代表者", + "contact": "担当者", + "tel": "連絡先", + "telEditHint": "数字のみ入力してください。", + "telMaskNote": "連絡先はセキュリティのためマスク表示されます。", + "address": "住所", + "colName": "企業名", + "colBizNo": "事業者番号", + "colType": "区分", + "colContact": "担当者", + "colTel": "連絡先", + "colUse": "使用", + "deleteConfirm": "{{name}} 企業を削除しますか？", + "deleted": "企業を削除しました。", + "saved": "企業情報を保存しました。", + "errRequired": "必須項目を入力してください。", + "loadError": "企業一覧の読み込みに失敗しました。", + "emptyTitle": "登録された企業がありません", + "emptyDesc": "新しい企業を追加してください。" + }, + "dept": { + "title": "部門管理", + "subtitle": "組織の部門構成を管理します。", + "addRoot": "最上位部門を追加", + "addChild": "下位部門を追加", + "add": "部門を追加", + "edit": "部門を編集", + "name": "部門名", + "deleteConfirm": "{{name}} 部門を削除しますか？", + "deleted": "部門を削除しました。", + "saved": "部門を保存しました。", + "errRequired": "部門名を入力してください。", + "loadError": "部門一覧の読み込みに失敗しました。", + "emptyTitle": "登録された部門がありません", + "emptyDesc": "最上位部門を追加してください。", + "searchPlaceholder": "部署名で検索", + "searchNoResult": "一致する部署がありません。", + "treeAria": "部署組織ツリー", + "expand": "展開", + "collapse": "折りたたむ", + "expandAll": "すべて展開", + "collapseAll": "すべて折りたたむ", + "selectHint": "左のツリーから部署を選択してください。", + "colId": "部署ID", + "colParent": "上位部署", + "topLevel": "最上位", + "colChildCount": "下位部署数", + "childCountValue": "{{n}}件", + "errHasChildren": "下位部署があるため削除できません。" + }, + "errorLog": { + "title": "エラーログ", + "subtitle": "システムエラー履歴を照会します。", + "filterAria": "エラーログフィルター", + "code": "エラーコード", + "codePh": "エラーコードを入力", + "loadError": "エラーログの読み込みに失敗しました。", + "emptyTitle": "エラーログがありません", + "emptyDesc": "条件に一致するエラーログがありません。", + "colTime": "発生時刻", + "colCode": "コード", + "colMethod": "メソッド", + "colPath": "パス", + "colSummary": "概要" + }, + "loginHistory": { + "title": "ログイン履歴", + "subtitle": "ログイン成功／失敗の履歴を照会します。", + "filterAria": "ログイン履歴フィルター", + "result": "結果", + "allResults": "すべての結果", + "userId": "ユーザーID", + "userIdPh": "ユーザーIDを入力", + "loadError": "ログイン履歴の読み込みに失敗しました。", + "emptyTitle": "ログイン履歴がありません", + "emptyDesc": "条件に一致するログイン履歴がありません。", + "colTime": "日時", + "colResult": "結果", + "colUser": "ユーザー", + "colEmail": "メール", + "colIp": "IPアドレス", + "colReason": "理由" + }, + "marketing": { + "sentDone": "{{n}} 件を送信しました。", + "sentDisabled": "送信済み（{{n}}）", + "sendFail": "送信に失敗しました。", + "confirm": "{{name}} キャンペーンを送信しますか？", + "sending": "送信中…", + "sendBtn": "送信" + }, + "program": { + "title": "プログラム管理", + "subtitle": "画面プログラムとアクセスURLを管理します。", + "add": "プログラムを追加", + "edit": "プログラムを編集", + "searchPh": "プログラム名で検索", + "deleteConfirm": "{{name}} プログラムを削除しますか？", + "deleted": "プログラムを削除しました。", + "saved": "プログラムを保存しました。", + "errRequired": "必須項目を入力してください。", + "loadError": "プログラム一覧の読み込みに失敗しました。", + "emptyTitle": "登録されたプログラムがありません", + "emptyDesc": "新しいプログラムを追加してください。", + "colName": "プログラム名", + "colType": "種別", + "colUrl": "URL", + "colCategory": "分類", + "colUse": "使用" + }, + "roleMenu": { + "title": "ロール別メニュー権限", + "subtitle": "ロールにメニューアクセス権限を付与します。", + "loadError": "権限情報の読み込みに失敗しました。", + "noRoles": "登録されたロールがありません。", + "roleList": "ロール一覧", + "role": "ロール", + "matrix": "権限マトリクス", + "noMenus": "メニューがありません。", + "colMenu": "メニュー", + "colAccess": "アクセス", + "colRead": "閲覧", + "colWrite": "編集", + "saved": "権限を保存しました。" + }, + "sysHealth": { + "title": "システム状態", + "subtitle": "サーバーとサービスの状態を監視します。", + "refresh": "更新", + "loadError": "システム状態の読み込みに失敗しました。", + "db": "データベース", + "redis": "Redis", + "worker": "ワーカー", + "queueDepth": "キュー滞留 {{n}}", + "disk": "ディスク", + "diskFree": "空き {{mb}}MB", + "mem": "メモリ", + "uptime": "稼働時間", + "version": "バージョン" + }, + "sysadmin": { + "actions": "操作", + "cancel": "キャンセル", + "delete": "削除", + "edit": "編集", + "keyword": "キーワード", + "next": "次へ", + "noUse": "未使用", + "prev": "前へ", + "save": "保存", + "saving": "保存中…", + "search": "検索", + "sortOrder": "並び順", + "totalN": "全 {{n}} 件", + "use": "使用", + "useYn": "使用可否" + }, + "public": { + "home": { + "heroTitle": "AIが設計する展示会の未来" + } + }, + "calendar": { + "prev": "前へ", + "next": "次へ", + "today": "今日", + "yearMonth": "{{y}}年{{m}}月", + "viewSwitch": "ビュー切替", + "view": { + "month": "月", + "week": "週", + "day": "日" + }, + "loading": "読み込み中…", + "legend": "凡例", + "dayEmpty": "予定がありません。", + "dayAll": "{{date}} の全予定", + "close": "閉じる" + }, + "holiday": { + "title": "祝日管理", + "subtitle": "法定・振替休日の照会と臨時休日の管理。カレンダーに赤色で表示されます。", + "year": "年度", + "yearLabel": "{{y}}年", + "add": "臨時休日を追加", + "created": "祝日を追加しました。", + "deleted": "削除しました。", + "toggled": "休業状態を更新しました。", + "loadError": "祝日を読み込めませんでした。", + "emptyTitle": "祝日がありません", + "emptyDesc": "選択した年度に登録された祝日がありません。", + "listOf": "{{y}}年の祝日", + "count": "休業 {{n}} 日", + "date": "日付", + "weekday": "曜日", + "name": "名称", + "type": "区分", + "status": "休業", + "manage": "管理", + "substitute": "振替休日", + "legal": "法定休日", + "on": "休業", + "off": "通常勤務", + "setOff": "休業解除", + "setOn": "休業設定", + "delete": "削除", + "deleteConfirm": "「{{name}}」を削除しますか？", + "errRequired": "日付と名称を入力してください。", + "errDup": "既に登録済みの日付です。", + "substituteHint": "振替休日として登録", + "cancel": "キャンセル", + "saving": "保存中…", + "save": "保存" + }, + "track": { + "shell": { + "wordmark": "KINTEX AI 展示·イベントシステム", + "tablistAria": "トラック選択", + "tab": { + "visitor": "観覧", + "business": "ビジネス", + "agency": "協力会社" + }, + "login": "ログイン", + "myHome": "マイホーム" + }, + "gateway": { + "heroAria": "製品ヒーロー", + "aiWatermark": "AI生成の予想画像", + "eyebrow": "AI展示·イベント運営プラットフォーム", + "title": "KINTEX AI 展示·イベントシステム", + "subtitle": "展示企画から施工·観覧まで、全工程をAIで自動化します。", + "ctaPreReg": "観覧事前登録", + "ctaInquiry": "出展のお問い合わせ", + "tracksAria": "トラック分岐", + "tracksTitle": "どのような目的でお越しですか？", + "tracksSub": "目的に合ったトラックをお選びください。", + "card": { + "visitor": { + "label": "観覧者", + "title": "イベント観覧", + "desc": "イベント日程·事前登録·アクセス", + "cta": "観覧トラック" + }, + "business": { + "label": "主催·出展", + "title": "開催·出展", + "desc": "貸館·自動見積·ブース申請·施工案", + "cta": "ビジネストラック" + }, + "agency": { + "label": "工事·協力会社", + "title": "展示施工に参加", + "desc": "登録業者·工事オークション·作業申告", + "cta": "協力会社トラック" + } + }, + "eventsAria": "開催中·予定の展示", + "eventsTitle": "開催中 · 予定の展示", + "eventsSub": "開催中および今後の展示をご確認ください。", + "eventsMore": "全日程を見る" + }, + "visitor": { + "heroAria": "観覧案内ヒーロー", + "eyebrow": "観覧者ご案内", + "title": "展示観覧はここから", + "subtitle": "事前登録で入場がスムーズに。関心分野の通知も受け取れます。", + "ctaPreReg": "事前登録", + "ctaTicket": "チケット予約", + "eventsAria": "イベント日程", + "eventsTitle": "イベント日程", + "eventsSub": "開催中·予定の展示を確認して事前登録。", + "guideAria": "訪問ガイド", + "guideTitle": "訪問ガイド", + "guideSub": "交通·駐車·施設·アクセシビリティを一か所で。", + "guide": { + "transport": { + "title": "交通", + "desc": "GTX-A キンテックス駅徒歩3分·広域バス", + "link": "アクセス" + }, + "parking": { + "title": "駐車", + "desc": "リアルタイム空き·料金·ゲート", + "link": "駐車案内" + }, + "wayfinding": { + "title": "屋内ナビ", + "desc": "ホール·ブースまでの屋内経路", + "link": "ナビを開く" + }, + "amenities": { + "title": "施設", + "desc": "飲食·授乳室·手荷物·ATM", + "link": "施設を見る" + }, + "accessibility": { + "title": "アクセシビリティ", + "desc": "車いす·手話通訳案内", + "link": "アクセシビリティ案内" + }, + "inquiry": { + "title": "お問い合わせ", + "desc": "FAQ·連絡先", + "link": "問い合わせ" + } + }, + "noticeAria": "お知らせ", + "noticeTitle": "お知らせ", + "noticeSub": "最近のお知らせをご確認ください。", + "noticeEmpty": "お知らせはありません。", + "aiWatermark": "AI生成の予想画像", + "hero": { + "title": "何でも聞いてください — AIが観覧をご案内", + "subtitle": "展示日程・アクセス・入場券・ブース位置を対話でまとめて" + }, + "aiTiles": { + "title": "AIがお手伝いします", + "sub": "観覧のあらゆる瞬間をAIがサポートします。", + "soon": "準備中", + "assistant": { + "title": "AI 観覧アシスタント", + "desc": "何でも聞いてください" + }, + "recommend": { + "title": "AI 展示レコメンド", + "desc": "興味に合わせたキュレーション" + }, + "wayfinding": { + "title": "AI 道案内", + "desc": "屋内の最適ルート" + }, + "schedule": { + "title": "AI 日程アシスタント", + "desc": "自分だけの観覧コース" + }, + "crowd": { + "title": "AI 混雑・待ち時間案内", + "desc": "空いている時間帯を提案" + }, + "render": { + "title": "AI 施工予想画像", + "desc": "ブースプレビュー（ビジネス）" + } + }, + "showcaseTitle": "開催中・開催予定", + "showcaseSub": "開催中と開催予定の展示を一目で。", + "recommendTitle": "あなたの興味に合う展示", + "recommendSub": "関心分野を選ぶとAIがおすすめします。", + "recommendTag": "AI おすすめ", + "interests": { + "robot": "ロボット・自動化", + "smartfactory": "スマートファクトリー", + "healthcare": "ヘルスケア", + "eco": "環境・エネルギー", + "mobility": "モビリティ", + "content": "コンテンツ・文化" + }, + "guideMore": "詳しく見る", + "journeyTitle": "観覧の流れ", + "journeySub": "事前登録から入場まで、かんたん3ステップ。", + "journey": { + "register": { + "title": "事前登録", + "desc": "オンラインで来場情報を登録。", + "link": "展示を見る" + }, + "badge": { + "title": "バッジ・QR発行", + "desc": "モバイルバッジと入場QRを受け取り。", + "link": "入場券照会" + }, + "checkin": { + "title": "現地チェックイン", + "desc": "入口でQRをスキャンして入場。", + "link": "ログイン" + } + }, + "venueTitle": "KINTEX会場のご案内", + "venueSub": "国内最大級の展示・コンベンションセンター。", + "venue": { + "halls": { + "label": "展示ホール", + "value": "10" + }, + "area": { + "label": "展示面積", + "value": "108,556㎡" + }, + "parking": { + "label": "駐車", + "value": "7,500台" + }, + "access": { + "label": "アクセス", + "value": "GTX-A 徒歩3分" + } + }, + "briefing": { + "title": "AI 展示・イベント企画ブリーフィング", + "sub": "今年と今月の開催予定展示をAIが先にまとめます。", + "viewYear": "年間（{{year}}）", + "viewMonth": "月間", + "aiSummary": "AI 要約", + "loading": "AI要約を生成中…", + "empty": "この期間に予定された展示はありません。", + "yearSummary": "{{year}}年は計{{count}}件の展示・イベントが予定され、{{peak}}に集中します。", + "monthSummary": "今月は{{count}}件の展示が開催されます · 週末の来場がおすすめ。", + "monthLabel": "{{month}}月", + "eventsCount": "{{count}}件", + "prevMonth": "前の月", + "nextMonth": "次の月" + } + }, + "business": { + "heroAria": "ビジネス案内ヒーロー", + "eyebrow": "主催者·出展者ご案内", + "title": "開催·出展、オンライン申請を一元化", + "subtitle": "貸館からブース申請·施工まで、すべてオンラインで。", + "ctaApply": "申請·問い合わせ", + "ctaLogin": "ログイン", + "ctaInquiry": "問い合わせ", + "valueAria": "提供価値", + "valueTitle": "役割に合った入口", + "valueSub": "主催者·出展者向けの機能をご案内します。", + "value": { + "organizer": { + "title": "主催者 · ホール貸館", + "desc": "貸館手続きからホール割当·フロアプランまで一括。", + "item": { + "rental": "貸館手続き", + "quote": "自動見積", + "floorplan": "ホール割当·フロアプラン", + "rate": "料金·施設規格" + }, + "cta": "貸館問い合わせ·ログイン" + }, + "exhibitor": { + "title": "出展者 · ブース申請", + "desc": "ブース·ユーティリティ申請からAI施工案まで。", + "item": { + "apply": "ブース申請", + "utility": "ユーティリティ申請", + "compliance": "規定事前検証", + "render": "AI施工案" + }, + "cta": "出展申請·ログイン" + } + }, + "processAria": "貸館プロセス", + "processTitle": "貸館プロセス", + "processSub": "問い合わせから施工·検収まで一目で。", + "process": { + "inquiry": { + "title": "問い合わせ", + "desc": "貸館相談受付" + }, + "quote": { + "title": "仮見積", + "desc": "自動見積算出" + }, + "contract": { + "title": "契約", + "desc": "契約締結" + }, + "assign": { + "title": "ホール割当", + "desc": "ホール·区画割当" + }, + "booth": { + "title": "ブース申請", + "desc": "出展ブース·ユーティリティ" + }, + "inspect": { + "title": "施工·検収", + "desc": "施工後の現場検収" + } + }, + "rateAria": "料金·書類", + "rateTitle": "料金 · 書類のご案内", + "rateSub": "ブースタイプ別の料率と主な書類。", + "rate": { + "shell": { + "label": "組立ブース", + "price": "基本型", + "desc": "基本ブース·基本電気込み" + }, + "space": { + "label": "独立ブース", + "price": "スペース型", + "desc": "自由施工·構造計算書必要" + }, + "premium": { + "label": "プレミアム", + "price": "特化型", + "desc": "プレミアム位置·追加ユーティリティ" + } + }, + "doc": { + "assign": { + "title": "割当申請書", + "desc": "ホール割当申請書式" + }, + "flame": { + "title": "防炎確認書", + "desc": "防炎処理確認書類" + }, + "structure": { + "title": "構造計算書", + "desc": "独立ブース·リギング構造検討" + } + }, + "ctaBandAria": "ログイン·問い合わせ", + "ctaBandText": "すでにアカウントをお持ちですか？" + }, + "agency": { + "heroAria": "協力会社案内ヒーロー", + "eyebrow": "工事·装置·協力会社ご案内", + "title": "KINTEX公式登録業者として展示施工に参加", + "subtitle": "工事オークション（逆オークション）で透明に受注。KINTEXならではの方式です。", + "ctaLogin": "登録業者ログイン", + "ctaRegister": "登録申請", + "ctaAuctionLogin": "ログインして応札", + "ctaWorkReport": "作業申告する", + "registryAria": "登録業者案内", + "registryTitle": "登録業者のご案内", + "registrySub": "登録業者739社·14分類で運営されます。", + "gateTitle": "未登録業者は展示施工に参加できません（自主施工不可）", + "gateBody": "展示施工は必ずKINTEX公式登録業者を通す必要があります。登録手続きをご確認のうえ申請してください。", + "reg": { + "apply": { + "title": "申請", + "desc": "登録申請書提出" + }, + "review": { + "title": "資格審査", + "desc": "資格·実績審査" + }, + "register": { + "title": "登録", + "desc": "公式登録業者に登載" + }, + "eligible": { + "title": "受注資格", + "desc": "オークション応札·受注可能" + } + }, + "auctionAria": "工事オークション", + "auctionTitle": "進行中の工事オークション（逆オークション）", + "auctionSub": "予算範囲内で透明に競争応札。", + "auctionEmptyTitle": "オークション公告はログイン後にご確認いただけます", + "auctionEmptyBody": "登録業者としてログインすると、進行中の工事オークション公告·予算·締切·応札状況を確認し応札できます。", + "safetyAria": "作業申告·安全規定", + "safetyTitle": "作業申告 · 安全規定", + "safetySub": "現場作業前に必須の手続きと規定をご確認ください。", + "safety": { + "report": { + "title": "作業申告手続き", + "desc": "現場作業前のオンライン作業申告" + }, + "prohibited": { + "title": "禁止作業·騒音", + "desc": "禁止作業·騒音限度·リギング構造計算書" + }, + "docs": { + "title": "必須書類", + "desc": "防炎確認書·保険証書" + } + }, + "ctaBandAria": "登録業者ログイン", + "ctaBandText": "すでに登録業者ですか？" + } + } +} diff --git a/src/frontend/src/i18n/locales/ko.json b/src/frontend/src/i18n/locales/ko.json new file mode 100644 index 0000000..c0dd147 --- /dev/null +++ b/src/frontend/src/i18n/locales/ko.json @@ -0,0 +1,2530 @@ +{ + "common": { + "brand": "KINTEX", + "appSuffix": "AI 전시·행사시스템", + "actions": { + "prev": "이전", + "next": "다음", + "cancel": "취소", + "close": "닫기", + "home": "홈으로 이동", + "viewMore": "자세히 보기", + "confirm": "확인" + }, + "states": { + "loading": "불러오는 중입니다…", + "empty": "표시할 내용이 없습니다." + }, + "aiWatermark": "AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있습니다", + "aiNotice": "AI 생성 이미지는 계약·심사 서류에 사용할 수 없습니다 — 시공 기준은 도면입니다", + "weekday": { + "0": "일", + "1": "월", + "2": "화", + "3": "수", + "4": "목", + "5": "금", + "6": "토" + } + }, + "lang": { + "select": "언어 선택" + }, + "shell": { + "menu": { + "home": "홈", + "groups": { + "ops": "전시 운영", + "design": "설계·시공", + "visitor": "관람객·마케팅", + "finance": "정산·분석", + "work": "업무 공통", + "system": "시스템관리" + }, + "items": { + "dashboard": "대시보드", + "exhibitors": "참가업체 관리", + "schedule": "전시 일정", + "halls": "홀 배정", + "boothSales": "부스 판매", + "operations": "현장운영", + "floorplan": "플로어플랜 스튜디오", + "documents": "서류·마일스톤", + "auctions": "공사 옥션", + "contractor": "수주 부스", + "logistics": "반입·반출", + "visitors": "관람객", + "checkin": "체크인 데스크", + "leads": "리드", + "campaigns": "마케팅", + "sponsorship": "스폰서십", + "cms": "콘텐츠 CMS", + "settlement": "정산", + "analytics": "경영분석", + "worklog": "업무일지", + "workSchedule": "일정", + "message": "쪽지", + "notice": "공지", + "meeting": "회의록", + "report": "업무보고", + "approval": "결재", + "opinion": "의견접수", + "search": "통합검색", + "appqr": "모바일 앱 설치", + "admin": "관리 대시보드", + "users": "사용자 관리", + "roles": "역할/권한", + "depts": "조직 관리", + "companies": "회사 관리", + "menus": "메뉴 관리", + "programs": "프로그램 관리", + "roleMenus": "역할-메뉴 매핑", + "codes": "공통코드", + "authPolicy": "인증 정책", + "loginHistory": "로그인 이력", + "audit": "감사로그", + "errorLog": "오류 로그", + "systemHealth": "시스템 상태", + "settings": "시스템설정", + "mailConfig": "메일 설정", + "notifyConfig": "알림 설정", + "tenants": "테넌트", + "rulesets": "룰셋", + "slides": "로그인 슬라이드" + }, + "sections": { + "userOrg": "사용자·조직", + "menuAuth": "메뉴·프로그램·코드", + "policyLog": "정책·이력·로그", + "statusConfig": "상태·설정", + "masterEtc": "마스터·기타" + } + }, + "nav": { + "events": "행사", + "exhibit": "참가안내", + "visit": "관람안내", + "transport": "교통" + }, + "searchPlaceholder": "행사 검색", + "cta": { + "register": "관람 사전등록" + }, + "menuOpen": "메뉴 열기", + "menuClose": "메뉴 닫기", + "homeAria": "{{brand}} 홈", + "primaryMenu": "주요 메뉴", + "mobileMenu": "모바일 메뉴", + "footer": { + "brandDesc": "대한민국 최대 규모의 전시 컨벤션 센터. 비즈니스와 문화의 혁신을 잇습니다.", + "quickTitle": "바로가기", + "quickSchedule": "행사 일정", + "quickExhibit": "참가 안내", + "quickDirections": "오시는 길", + "quickSitemap": "사이트맵", + "supportTitle": "고객지원", + "supportPrivacy": "개인정보처리방침", + "supportTerms": "이용약관", + "supportContact": "문의하기", + "contactTitle": "연락처", + "contactAddress": "경기도 고양시 일산서구 킨텍스로 217-60", + "contactTel": "대표번호 1899-1001", + "contactEmail": "exhibition@kintex.com", + "bottom": "© KINTEX. All Rights Reserved. (10390) 217-60, Kintex-ro, Ilsanseo-gu, Goyang-si" + }, + "footerbar": { + "copyright": "© 2026 KINTEX. All rights reserved.", + "systemOk": "시스템 정상", + "systemDown": "시스템 점검", + "support": "고객지원" + }, + "login": "로그인" + }, + "home": { + "heroAria": "킨텍스 소개", + "eyebrow": "Global Exhibition Platform", + "heroTitleLine1": "세계로 통하는 전시,", + "heroTitleEm": "킨텍스", + "heroLead": "대한민국 최대 규모의 전시 컨벤션 센터 KINTEX에서 펼쳐지는 비즈니스와 문화의 새로운 혁신을 경험하세요.", + "ctaRegister": "관람 사전등록", + "ctaFacility": "시설 안내 보기", + "eventsAria": "진행중 예정 행사", + "eventsTitle": "진행중 · 예정 행사", + "eventsSub": "지금 킨텍스에서 열리는 주요 소식을 확인하세요.", + "eventsMore": "전체 일정 보기", + "loading": "행사 정보를 불러오는 중입니다…", + "empty": "현재 진행 중이거나 예정된 행사가 없습니다.", + "tagExhibition": "EXHIBITION", + "booth": "부스 {{count}}", + "aiOptimized": "AI 최적화", + "ongoing": "진행중", + "ended": "종료", + "dday": "D-{{n}}", + "ddayZero": "D-DAY", + "register": "사전등록", + "hallTbd": "홀 배정 예정", + "transportAria": "오시는 길", + "transportTitle": "오시는 길", + "transportSub": "더욱 빨라진 접근성으로 킨텍스를 만나보세요.", + "gtxTitle": "GTX-A 킨텍스역 개통", + "gtxDesc": "킨텍스역에서 도보 3분 거리", + "transit": "대중교통", + "transitDesc": "광역버스 및 지하철", + "parking": "주차안내", + "parkingDesc": "4,000대 동시 주차", + "shuttle": "셔틀버스", + "shuttleDesc": "주요 거점 순환", + "mapAria": "킨텍스 위치 지도", + "mapAddress": "고양시 일산서구 킨텍스로 217-60", + "mapPlace": "KINTEX 제1, 2전시장", + "mapViewAria": "지도 보기", + "pageAria": "메인 홈", + "greeting": "안녕하세요, {{name}}님", + "greetingGuest": "안녕하세요", + "viewAll": "전체 보기", + "loadError": "불러오지 못했습니다", + "role": { + "organizer": "주최자", + "exhibitor": "참가업체", + "contractor": "장치업체", + "hallManager": "홀매니저", + "admin": "관리자" + }, + "kpi": { + "aria": "요약 지표" + }, + "banner": { + "aria": "행사 소개 배너", + "prev": "이전 배너", + "next": "다음 배너", + "emptyTitle": "등록된 배너가 없습니다", + "emptyDesc": "관리자에서 행사 배너를 등록하면 이곳에 노출됩니다." + }, + "showcase": { + "title": "진행 중·다가오는 전시", + "all": "전체 보기", + "prev": "이전", + "next": "다음", + "statusOngoing": "진행중", + "statusUpcoming": "예정", + "emptyTitle": "해당 기간 전시가 없습니다", + "emptyCta": "전체 일정 보기", + "tab": { + "ongoing": "진행 중", + "thisMonth": "이번 달", + "nextMonth": "다음 달" + } + }, + "calendar": { + "title": "전시 일정", + "prev": "이전 달", + "next": "다음 달", + "today": "오늘", + "all": "전체", + "centerFilter": "전시장 필터", + "yearMonth": "{{y}}년 {{m}}월", + "legendOngoing": "진행중", + "legendUpcoming": "예정", + "legendEnded": "종료", + "more": "+{{n}}", + "moreTitle": "{{date}} 전시", + "popupEmpty": "해당 일자에 전시가 없습니다", + "listTitle": "진행 중·예정 전시", + "listEmpty": "예정된 전시가 없습니다", + "listEmptyCta": "전체 일정 보기", + "loadError": "일정을 불러오지 못했습니다" + }, + "todo": { + "title": "내 할 일", + "noDue": "기한 없음", + "emptyTitle": "모두 완료", + "emptyDesc": "처리할 작업이 없습니다", + "emptyCta": "알림 열기" + }, + "notice": { + "title": "공지사항", + "more": "더보기", + "new": "NEW", + "pinned": "고정", + "emptyTitle": "등록된 공지가 없습니다", + "emptyCta": "전체 공지 보기" + }, + "quick": { + "title": "빠른 작업", + "editor": "배치 에디터", + "invite": "참가업체 초대", + "docs": "서류 워크플로", + "settlement": "정산", + "notice": "공지 작성", + "search": "통합검색" + }, + "activity": { + "title": "최근 활동", + "emptyTitle": "최근 활동이 없습니다", + "emptyCta": "알림 설정" + }, + "time": { + "justNow": "방금", + "minutes": "{{n}}분 전", + "hours": "{{n}}시간 전", + "days": "{{n}}일 전" + }, + "workspace": { + "title": "내 행사", + "emptyTitle": "참여 중인 행사가 없습니다", + "emptyDesc": "초대 링크 또는 초대 코드를 확인하세요", + "invite": "초대 코드 확인", + "codePh": "초대 코드 입력" + }, + "charts": { + "title": "전시 현황 차트", + "statusTitle": "행사 상태", + "trendTitle": "월별 추이", + "centerTitle": "전시장별 개최", + "monthSuffix": "월", + "empty": "표시할 데이터가 없습니다" + }, + "ai": { + "aria": "KINTEX AI 기능", + "title": "KINTEX AI", + "badge": "AI", + "subtitle": "배치 설계부터 시공 시안·리드 분석까지 AI가 합니다", + "askPh": "무엇이든 물어보세요 — 예: 이번 달 매출은?", + "askBtn": "질문", + "askAria": "AI에게 질문", + "tool": { + "layout": { + "title": "AI 부스 배치 스튜디오", + "desc": "1·2·3안 자동 생성" + }, + "gallery": { + "title": "시공 예상 시안 갤러리", + "desc": "나노바나나 AI 렌더" + }, + "nlquery": { + "title": "자연어 데이터 조회", + "desc": "질문하면 표로 답합니다" + }, + "rules": { + "title": "규정 AI 챗봇", + "desc": "전시 규정 근거 답변" + }, + "leads": { + "title": "리드 AI 스코어링", + "desc": "유망 리드 자동 분석" + } + } + }, + "prodEyebrow": "AI 전시 자동화 플랫폼", + "prodTitle": "킨텍스 AI 전시 운영 플랫폼", + "prodTagline": "부스 설계부터 시공 시안, 정산까지 하나의 흐름으로 완성합니다.", + "ctaLogin": "로그인", + "ctaPreReg": "사전등록", + "roleAria": "역할별 소개", + "roleTitle": "역할별 맞춤 기능", + "roleSub": "주최자·참가업체·시공사·관람객 모두를 위한 도구를 제공합니다.", + "stepsAria": "핵심 기능", + "stepsTitle": "AI로 완성하는 전시 운영", + "stepsSub": "AI 배치에서 시공 시안, 역경매 옥션, 실시간 정산까지 이어집니다." + }, + "detail": { + "tabs": { + "intro": "소개", + "program": "프로그램", + "speakers": "연사", + "exhibitors": "참가업체", + "transport": "교통", + "faq": "FAQ" + }, + "eyebrow": "KINTEX Exhibition", + "loadingTitle": "행사 정보를 불러오는 중…", + "fallbackTitle": "행사 상세", + "dateTbd": "일정 확인 중", + "placeTbd": "홀 배정 예정", + "lead": "킨텍스에서 열리는 전시회 정보를 확인하고 사전등록하세요.", + "factDate": "일시", + "factPlace": "장소", + "ctaRegister": "사전등록하기", + "ctaFloorplan": "전시장 도면 보기", + "navAria": "행사 상세 내비게이션", + "shareAria": "공유", + "share": "공유하기", + "copyLink": "링크 복사", + "overviewAria": "전시회 개요", + "overviewTitle": "전시회 개요", + "overviewLead": "스마트팩토리 코리아 2026은 차세대 제조 기술의 집약체입니다. AI, 로보틱스, IoT, 그리고 디지털 트윈 기술이 결합된 최신 솔루션을 한자리에서 확인하십시오. 전 세계 500개 이상의 선도 기업이 참여합니다.", + "statBooth": "참가 부스", + "statVisitors": "예상 참관객", + "statVisitorsValue": "30,000+", + "themesTitle": "주요 전시 테마", + "theme1Title": "AI & 자율 로봇", + "theme1Desc": "스스로 학습하고 판단하는 스마트 로봇 솔루션", + "theme2Title": "디지털 트윈 & IoT", + "theme2Desc": "가상 세계와 현실 제조 현장의 실시간 동기화", + "theme3Title": "탄소중립 스마트 제조", + "theme3Desc": "에너지 효율 극대화를 위한 친환경 공정 기술", + "programAria": "프로그램 일정", + "programTitle": "프로그램 일정", + "day1": "9월 5일 (Day 1)", + "day2": "9월 6일 (Day 2)", + "agenda1Title": "제조업의 미래: AI가 이끄는 생산성 혁명", + "agenda1Desc": "AI 글로벌 석학들이 제안하는 2030 제조 전략과 실제 구현 사례 분석", + "agenda1Room": "메인 컨퍼런스 홀", + "agenda2Title": "산업용 5G와 엣지 컴퓨팅의 결합", + "agenda2Desc": "지연 없는 데이터 전송을 통한 실시간 공정 제어 기술 시연", + "agenda2Room": "세미나실 A", + "agenda3Title": "Global Buyers Matching Day", + "agenda3Desc": "해외 유망 기업과 국내 공급사 간의 1:1 비즈니스 미팅", + "agenda3Room": "비즈니스 라운지", + "speakersTitle": "주요 연사", + "speaker1Role": "AI 연구소장 | TechCorp", + "speaker2Role": "CTO | Automatech", + "speaker3Role": "로봇공학 석좌교수 | Korea Univ.", + "speaker4Role": "Global VP | Digitron", + "profileAria": "{{name}} 프로필", + "faqAria": "자주 묻는 질문", + "faqTitle": "자주 묻는 질문", + "faq1Q": "사전등록은 어떻게 하나요?", + "faq1A": "상단 \"사전등록하기\" 버튼에서 유형 선택 후 정보를 입력하면 모바일 배지가 발급됩니다.", + "faq2Q": "입장료가 있나요?", + "faq2A": "일반 관람객은 사전등록 시 무료입니다. 현장 등록은 유료로 운영될 수 있습니다.", + "faq3Q": "주차 공간이 있나요?", + "faq3A": "킨텍스 제1·2전시장에 최대 4,000대 동시 주차가 가능합니다.", + "fabCta": "사전등록 바로가기" + }, + "register": { + "steps": { + "type": "유형", + "info": "정보", + "interest": "관심분야", + "done": "완료" + }, + "stepsAria": "사전등록 단계", + "type": { + "general": "일반 관람객", + "generalDesc": "전시 및 공개 세션 참관이 가능한 일반 방문객", + "buyer": "바이어", + "buyerDesc": "B2B 매칭 및 비즈니스 상담을 위한 기업 담당자", + "vip": "VIP", + "vipDesc": "초청 인사 전용 라운지 및 전 세션 입장 귀빈" + }, + "step0Title": "참가 유형 선택", + "step0Sub": "KINTEX 전시회에 참여하실 자격을 선택해 주세요.", + "typeGroupAria": "참가 유형", + "step1Title": "기본 정보 입력", + "step1Sub": "연락 및 출입증 발급을 위한 정보를 입력해 주세요.", + "name": "이름", + "namePh": "성함을 입력하세요", + "phone": "연락처 (Mobile)", + "email": "이메일", + "emailPh": "example@domain.com", + "org": "소속 (회사/기관)", + "orgPh": "회사명 또는 학교명", + "step2Title": "관심 분야 선택", + "step2Sub": "관심 분야를 선택하시면 맞춤형 정보를 제공해 드립니다.", + "interestsAria": "관심 분야", + "interest": { + "ai": "AI 솔루션", + "factory": "스마트 팩토리", + "robotics": "로보틱스", + "bigdata": "빅데이터", + "cloud": "클라우드" + }, + "consentPrivacy": "개인정보 수집·이용 동의", + "required": "(필수)", + "consentMarketing": "마케팅 수신 동의 (선택)", + "consentMore": "상세보기", + "errPrivacy": "개인정보 수집·이용 동의(필수)에 체크해 주세요.", + "errName": "이름을 입력해 주세요.", + "errEvent": "행사 정보를 확인할 수 없습니다.", + "doneTitle": "사전등록이 접수되었습니다", + "doneSub": "{{name}}님의 사전등록이 완료되었습니다. 모바일 배지를 입구 키오스크에서 사용하세요.", + "visitorDefault": "관람객", + "badgeAria": "모바일 배지 미리보기", + "badgeName": "홍길동", + "badgeCodeLabel": "Badge Code", + "doneNote": "입구 키오스크에서 QR을 인식해 실물 배지를 출력할 수 있습니다.", + "regNo": "등록번호: {{id}}", + "submitting": "등록 중…", + "submit": "등록하기", + "eventBrowse": "행사 둘러보기", + "floorplan": "전시장 도면 보기" + }, + "floorplan": { + "sideAria": "부스 검색 및 목록", + "filtersTitle": "업종 · 존 · 키워드", + "searchPh": "참가업체 또는 부스번호 검색", + "searchAria": "부스 검색", + "typeFilter": "부스 유형 필터", + "hallSelect": "전시장 선택", + "allHalls": "전체 홀", + "listAria": "부스 목록 (비시각 대안)", + "loading": "부스 정보를 불러오는 중…", + "searchResults": "검색 결과 ({{count}})", + "noMatch": "일치하는 부스가 없습니다.", + "reservedBooth": "예약 부스", + "availableBooth": "분양 가능", + "type": { + "assembled": "조립부스", + "independent": "독립부스", + "corner": "코너부스", + "island": "아일랜드", + "default": "부스" + }, + "stageAria": "인터랙티브 홀 지도", + "boothLayoutAria": "부스 배치", + "boothAria": "부스 {{no}} {{name}}", + "loadFail": "도면을 불러오지 못했습니다.", + "noBooth": "표시할 부스가 없습니다.", + "popInfoAria": "{{name}} 정보", + "popDetail": "부스 상세", + "directions": "길찾기", + "zoomIn": "확대", + "zoomOut": "축소", + "reset": "초기화", + "myLocation": "내 위치", + "legendAria": "범례", + "legendAvailable": "판매 (Available)", + "legendReserved": "예약 (Reserved)", + "legendPublic": "공용부 (Public)" + }, + "inquiry": { + "heroAria": "참가 문의", + "heroTitle": "참가 문의", + "heroLead": "KINTEX와 함께 귀사의 비즈니스를 글로벌 시장으로 확장하세요. 전문 컨설턴트가 최적의 전시 공간을 제안해 드립니다.", + "cta": "참가 문의", + "guideAria": "참가 안내", + "guideTitle": "참가 안내", + "booth1Tier": "Entry Tier", + "booth1Title": "조립부스 (Shell Scheme)", + "booth1Desc": "기본 벽체와 바닥이 제공되는 가장 경제적인 선택. 소규모 기업에 추천합니다.", + "booth1Price": "₩ 2,500,000 / unit", + "booth2Tier": "Design Freedom", + "booth2Title": "독립부스 (Raw Space)", + "booth2Desc": "공간만 제공되어 브랜드에 맞는 자유로운 디자인 설계가 가능합니다.", + "booth2Price": "₩ 2,000,000 / unit", + "booth3Tier": "Full Solution", + "booth3Title": "프리미엄 (Premium)", + "booth3Desc": "AI 최적화 동선 설계 및 맞춤형 브랜딩 패키지가 포함된 올인원 솔루션입니다.", + "booth3Price": "별도 문의", + "boothExampleAria": "{{title}} 예시", + "formAria": "문의하기", + "formTitle": "문의하기", + "formSub": "참가 신청 및 전시 관련 궁금한 점을 남겨주세요. 담당자가 영업일 기준 24시간 이내에 답변드립니다.", + "contactPhone": "전화 문의", + "contactPhoneVal": "+82-31-810-8114", + "contactEmail": "이메일 문의", + "contactEmailVal": "exhibit@kintex.com", + "contactLoc": "위치 안내", + "contactLocVal": "경기도 고양시 일산서구 킨텍스로 217-60", + "loginHintQ": "이미 계정이 있으신가요?", + "loginHintA": "로그인하여 빠른 문의하기", + "company": "회사명", + "companyPh": "회사명을 입력하세요", + "name": "담당자", + "namePh": "성함을 입력하세요", + "contact": "연락처 (이메일 또는 전화번호)", + "contactPh": "연락 가능한 정보를 입력하세요", + "scale": "예상 규모", + "scaleSelect": "선택하세요", + "scale1": "1개 부스 (9sqm)", + "scale2": "2-4개 부스 (18-36sqm)", + "scale3": "5-9개 부스 (45-81sqm)", + "scale4": "10개 이상", + "hall": "희망 홀", + "hallSelect": "홀 선택", + "message": "문의 내용", + "messagePh": "참가 목적이나 특별 요청사항이 있다면 남겨주세요.", + "agree": "개인정보 수집 및 이용에 동의합니다.", + "required": "(필수)", + "errAgree": "개인정보 수집 및 이용에 동의해 주세요.", + "errName": "담당자 이름을 입력해 주세요.", + "errContact": "연락 가능한 이메일 또는 전화번호를 입력해 주세요.", + "errMessage": "문의 내용을 입력해 주세요.", + "success": "문의가 접수되었습니다. 접수번호 {{no}}", + "submitting": "전송 중…", + "submit": "문의 보내기" + }, + "microsite": { + "introAria": "{{brand}} 소개", + "eyebrow": "KINTEX Exhibitor", + "ctaMeeting": "미팅 예약", + "ctaBrochure": "기업 소개서", + "defaultBrand": "(주)한빛로보틱스", + "defaultTagline": "미래를 움직이는 지능형 로보틱스 솔루션", + "defaultBoothLoc": "부스 A-102 · 홀7", + "boothUndetermined": "미정", + "boothPrefix": "부스", + "boothLocLabel": "KINTEX 전시장 부스 위치", + "viewMap": "전시장 도면 보기", + "productsAria": "핵심 제품 라인업", + "productsTitle": "핵심 제품 라인업", + "productsSub": "현장에서 만나보실 대표 제품입니다.", + "product": "제품", + "product1Tag": "Industrial COBOT", + "product1Title": "HR-A1 협동 로봇", + "product1Desc": "고도의 정밀도와 안전성을 갖춘 산업용 협동 로봇. 인간과의 협업을 최우선으로 설계했습니다.", + "product2Tag": "Smart Logistics", + "product2Title": "HR-M3 자율주행 AMR", + "product2Desc": "스마트 팩토리 물류 효율을 극대화하는 자율 이동 로봇. 실시간 장애물 회피와 경로 최적화.", + "product3Tag": "AI Vision", + "product3Title": "HR-Q Vision 스캐너", + "product3Desc": "AI 딥러닝 기반 완벽한 품질 검수. 미세 결함도 놓치지 않는 초정밀 3D 스캐닝.", + "productImgAria": "{{title}} 이미지", + "previewAria": "부스 미리보기", + "previewTitle": "부스 미리보기", + "previewSub": "AI가 생성한 예상 부스 이미지입니다. 실제 시공 결과와 다를 수 있습니다.", + "galleryMain": "메인 전시 존", + "galleryVip": "VIP 라운지", + "galleryAria": "{{label}} AI 생성 예상 이미지", + "watermark": "AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있음", + "meetingAria": "미팅 예약", + "ctaBanner": "귀사의 비즈니스에 맞는 맞춤형 로봇 솔루션을 제안해 드립니다.", + "ctaBannerBtn": "지금 미팅 예약하기" + }, + "ticket": { + "viewPurchase": "입장권 예매", + "viewManage": "예매 확인 · 취소", + "viewSwitchAria": "티켓 화면 전환", + "type": { + "general": "일반권", + "generalDesc": "일반 관람객 및 개인 참가자", + "generalPrice": "₩0 (사전등록 할인가)", + "buyer": "바이어권", + "buyerDesc": "유관 기업 종사자 및 바이어 전용", + "buyerPrice": "무료 · 자격심사 필요", + "group": "단체권 (10매 이상)", + "groupDesc": "기업 단체 관람 전용", + "groupPrice": "₩9,000 / 1인", + "vip": "VIP권", + "vipDesc": "전시회 올패스 + VIP 라운지 이용권", + "vipPrice": "₩50,000" + }, + "steps": { + "s1": "행사·권종", + "s2": "예매자", + "s3": "결제", + "s4": "완료" + }, + "stepsAria": "예매 단계", + "bannerTitle": "스마트팩토리 코리아 2026", + "bannerDate": "2026.09.05 – 09.08", + "bannerPlace": "제2전시장 홀7", + "posterAria": "행사 포스터", + "loginBanner": "로그인하면 예매 내역이 자동 저장됩니다.", + "loginLink": "로그인하기", + "sample": "샘플 데이터", + "h2Type": "티켓 권종 선택", + "aiOptimized": "AI OPTIMIZED", + "off10": "10% OFF", + "soldout": "매진", + "qtyAria": "{{name}} 수량", + "decrease": "감소", + "increase": "증가", + "h2Booker": "예매자 정보", + "bookerName": "이름", + "bookerNamePh": "성함", + "bookerTel": "연락처", + "bookerEmail": "이메일 (티켓 발송)", + "consentPrivacy": "개인정보 수집·이용 동의", + "required": "(필수)", + "consentMarketing": "마케팅 수신 동의 (선택)", + "h2Pay": "결제 수단", + "payCard": "신용카드", + "payEasy": "간편결제", + "payBank": "계좌이체", + "payGroupAria": "결제 수단", + "pgNote": "결제는 PG사 보안 페이지에서 진행되며, 카드정보는 본 사이트에 저장되지 않습니다. 모든 거래는 256비트 SSL 암호화로 보호됩니다. (PG 미연동 — 데모 플로우)", + "doneTitle": "예매가 접수되었습니다", + "doneNo": "KTX-2026-0000-DEMO", + "doneSub": "이메일로 티켓을 보내드립니다. (실서비스 연동 시) 총 {{count}}매 · 결제 {{total}}", + "sampleReady": "샘플 데이터 · 결제 준비 중", + "walletBtn": "모바일 티켓 지갑 열기", + "manageBtn": "예매 확인 / 취소", + "summaryAria": "예매 내역 요약", + "summaryTitle": "예매 내역 요약", + "summaryCount": "선택 매수", + "count": "{{n}}매", + "subtotal": "소계", + "discount": "할인", + "finalTotal": "최종 결제 금액", + "nextStep": "다음 단계로 이동", + "freeDone": "무료 예매 완료", + "pay": "결제하기", + "payProceed": "결제 진행", + "customerCenter": "고객센터 1588-0000 (평일 09–18시)", + "manageTitle": "예매 확인 · 취소", + "manageSub": "비회원 예매 내역을 조회하고 취소하실 수 있습니다.", + "lookNo": "예매번호", + "lookNoPh": "KTX-YYYY-XXXXXX", + "lookEmail": "이메일", + "lookEmailPh": "example@email.com", + "lookBtn": "조회하기", + "loginToView": "로그인하여 내 예매 보기", + "notLooked": "예매번호와 이메일을 입력해 조회하세요. (샘플: 아무 값이나 입력 후 조회)", + "booked": "예매완료", + "bookNoLabel": "예매번호", + "paidAt": "결제일시", + "colType": "권종", + "colQty": "수량", + "colAmount": "금액", + "bookerInfo": "예매자 정보", + "totalPaid": "총 결제 금액", + "refundTitle": "취소·환불 정책", + "refundD7": "방문 7일 전 (D-7)", + "refundD7Val": "100% 환불", + "refundD3": "방문 3일 전 (D-3)", + "refundD3Val": "50% 환불", + "refundDay": "방문 당일", + "refundDayVal": "0% (환불불가)", + "refundEst": "현재 예상 환불액", + "cancelBooking": "예매 취소", + "refundNote": "환불은 PG사를 통해 원결제수단으로 처리됩니다.", + "aiHelper": "AI 정산 도우미", + "aiHelperDesc": "신용카드 할부 결제 건은 취소 시 카드사를 통해 한도 복구까지 약 3–5영업일이 소요될 수 있습니다.", + "cancelModalAria": "예매 취소 확인", + "cancelModalTitle": "예매를 취소하시겠습니까?", + "cancelModalDesc": "D-15 기준 100% 환불(₩40,000)이 적용됩니다. 환불은 원결제수단으로 PG사를 통해 처리되며, 실서비스 연동 시 실제 환불이 진행됩니다.", + "cancelConfirm": "취소하기" + }, + "login": { + "title": "로그인", + "sub": "KINTEX 전시 관리 시스템에 오신 것을 환영합니다.", + "email": "이메일", + "emailPh": "name@company.com", + "password": "비밀번호", + "remember": "아이디 기억", + "forgot": "비밀번호 찾기", + "errResponse": "로그인 응답을 처리하지 못했습니다. 다시 시도해 주세요.", + "errLocked": "로그인 시도가 일시적으로 제한되었습니다. 잠시 후 다시 시도해 주세요.", + "errNotImpl": "로그인 서비스가 준비 중입니다. 잠시 후 다시 시도해 주세요.", + "errGeneric": "로그인 중 오류가 발생했습니다.", + "submitting": "로그인 중…", + "submit": "로그인", + "signupPrompt": "아직 계정이 없으신가요?", + "signup": "회원가입", + "or": "또는", + "internalLogin": "킨텍스 내부 계정으로 로그인", + "inviteLink": "초대 코드로 참여하기 →", + "copyright": "© 2026 KINTEX. All rights reserved.", + "wsTitle": "행사 워크스페이스", + "wsSub": "참여 중인 행사를 선택하세요.", + "wsEmptyTitle": "참여 중인 행사가 없습니다", + "wsEmptyDesc": "초대 링크를 확인하거나 초대 코드로 참여하세요.", + "wsInvite": "초대 코드로 참여하기", + "prodTagline": "킨텍스 AI 전시 운영 플랫폼" + }, + "signup": { + "title": "회원가입", + "desc": "KINTEX AI 전시관리 계정을 만듭니다. 회사명·초대코드는 선택 사항입니다.", + "email": "이메일", + "emailPh": "name@company.com", + "name": "이름", + "namePh": "홍길동", + "password": "비밀번호", + "passwordPh": "8자 이상", + "password2": "비밀번호 확인", + "password2Ph": "비밀번호 재입력", + "company": "회사명 (선택)", + "companyPh": "(주)킨텍스", + "invite": "초대 코드 (선택)", + "invitePh": "INV-XXXX", + "mismatch": "비밀번호가 일치하지 않습니다.", + "errNotImpl": "회원가입 서비스가 준비 중입니다. 잠시 후 다시 시도해 주세요.", + "errConflict": "이미 가입된 이메일입니다.", + "errGeneric": "회원가입 중 오류가 발생했습니다.", + "noticePending": "계정이 생성되었습니다. 관리자 승인 후 로그인할 수 있습니다.", + "noticeActive": "계정이 생성되었습니다. 이제 로그인해 주세요.", + "doneTitle": "회원가입 완료", + "goLogin": "로그인하러 가기", + "cancel": "취소", + "submitting": "가입 중…", + "submit": "가입하기" + }, + "forgot": { + "requestTitle": "비밀번호 찾기", + "requestDesc": "가입한 이메일로 인증코드를 보내드립니다. 등록된 계정인 경우 메일이 발송됩니다.", + "email": "이메일", + "emailPh": "name@company.com", + "sending": "전송 중…", + "requestBtn": "인증코드 받기", + "resetTitle": "비밀번호 재설정", + "resetDesc": "<0>{{email}} 로 받은 인증코드와 새 비밀번호를 입력하세요.", + "code": "인증코드", + "codePh": "메일로 받은 코드", + "newpw": "새 비밀번호", + "newpwPh": "8자 이상", + "prev": "이전", + "changing": "변경 중…", + "changeBtn": "비밀번호 변경", + "doneTitle": "비밀번호 변경 완료", + "doneDesc": "새 비밀번호로 로그인해 주세요.", + "goLogin": "로그인하러 가기", + "errInvalid": "인증코드가 올바르지 않거나 만료되었습니다.", + "errNotImpl": "비밀번호 재설정 서비스가 준비 중입니다. 잠시 후 다시 시도해 주세요.", + "errRequest": "요청 중 오류가 발생했습니다.", + "errReset": "재설정 중 오류가 발생했습니다.", + "cancel": "취소" + }, + "dashboard": { + "countdown": "개장 D-{{n}}", + "degradedTag": "오프라인 — 샘플", + "degradedMsg": "집계 API에 연결하지 못해 시연용 샘플을 표시합니다.", + "loadError": "대시보드 집계를 불러오지 못했습니다.", + "timelineAria": "마일스톤 타임라인", + "milestoneEmptyTitle": "파생 일정이 없습니다", + "milestoneEmptyDesc": "행사 시작일이 확정되면 마일스톤이 표시됩니다.", + "mstate": { + "done": "완료", + "current": "진행 중", + "upcoming": "예정" + }, + "kpisAria": "핵심 지표", + "kpiEmpty": "집계된 지표가 없습니다", + "exhibitorStatus": "참가업체 현황", + "sampleTag": "샘플", + "exhibitorEmptyTitle": "참가업체 부스가 없습니다", + "exhibitorEmptyDesc": "부스 배치·설계안이 등록되면 여기에 표시됩니다.", + "colBoothNo": "부스번호", + "colCompany": "업체명", + "colStatus": "설계 상태", + "feedAria": "알림 피드", + "feedTitle": "알림", + "feedEmpty": "새 알림이 없습니다", + "aerialAria": "홀 전경 조감", + "aerialTitle": "홀 전경 조감", + "aerialShot": "S7 홀 전경", + "aerialAlt": "홀 전경 조감 예상 이미지" + }, + "schedule": { + "title": "전시 일정", + "subtitle": "킨텍스 전 홀 행사 일정 관리·모니터링 — {{n}}건", + "crawlFallback": "(kintex.com 크롤링 폴백)", + "yearFilter": "연도 필터", + "allYears": "전체 연도", + "yearN": "{{y}}년", + "hallFilter": "홀 필터", + "allHalls": "전체 홀 (1-10)", + "hall1": "제1전시장 (홀 1-5)", + "hall2": "제2전시장 (홀 6-10)", + "catFilter": "카테고리 필터", + "allCats": "전체 카테고리", + "statusFilter": "상태 필터", + "allStatus": "전체 상태", + "cat": { + "exhibition": "전시", + "culture": "문화·예술", + "trade": "무역·산업", + "tech": "기술" + }, + "status": { + "ongoing": "진행중", + "upcoming": "예정", + "ended": "종료" + }, + "catExhibit": "{{cat}} 전시", + "apiWait": "행사 API 대기 (크롤링 데이터)", + "viewSwitch": "보기 전환", + "viewList": "목록", + "viewCalendar": "캘린더", + "listLoading": "행사 목록 로딩 중", + "listAria": "행사 목록", + "loadError": "전시 일정을 불러오지 못했습니다.", + "count": "{{n}}건", + "emptyTitle": "등록된 행사가 없습니다", + "emptyDesc": "필터를 조정하거나 새 행사를 생성하세요.", + "newEvent": "새 행사 생성", + "period": "기간", + "assignedHall": "배정 홀", + "estVisitors": "추정 인원", + "editDetail": "상세 편집", + "viewLogistics": "반입/물류 보기", + "monthCal": "월 캘린더", + "prev": "이전", + "next": "다음", + "today": "오늘", + "yearMonth": "{{y}}년 {{m}}월", + "miniCal": "미니 캘린더", + "prevMonth": "이전 달", + "nextMonth": "다음 달", + "offlineSample": "오프라인 — 샘플", + "day": "{{d}}일", + "dayHasEvent": "{{d}}일 (행사 있음)", + "hallUtil": "홀 가동률", + "hallUtilMonth": "홀 가동률 ({{y}}년 {{m}}월)", + "availTitle": "홀 가용 현황", + "availMonth": "홀 가용 ({{y}}년 {{m}}월)", + "availHalls": "전체 홀 {{n}}개", + "availFreeDays": "가용 {{free}}/{{total}}일", + "availOpen": "가용", + "availFull": "만실" + }, + "boothsales": { + "title": "부스 판매", + "subtitleManager": "부스 판매 인벤토리 관리 — 상태·가격·차단 및 정산 연계", + "subtitleExhibitor": "가용 부스를 선택해 선점 후 구매를 확정하세요", + "noEventTitle": "행사를 선택해 주세요", + "noEventDesc": "부스 판매를 조회할 행사가 지정되지 않았습니다.", + "summaryAria": "부스 판매 상태 요약", + "stAvailable": "가용", + "stHeld": "선점", + "stSold": "판매완료", + "stBlocked": "차단", + "rate": "임대 요율 {{rate}}원/㎡ ({{ver}})", + "hallFilter": "홀 필터", + "allHalls": "전체 홀", + "loadError": "부스 판매 인벤토리를 불러오지 못했습니다.", + "emptyTitle": "표시할 부스가 없습니다", + "emptyManage": "이 행사의 배치안(layout)에 등록된 부스가 없습니다.", + "emptyExhibitor": "현재 선택 가능한 가용 부스가 없습니다.", + "status": { + "available": "가용", + "held": "선점됨", + "sold": "판매완료", + "blocked": "차단됨" + }, + "wonUnit": "원", + "hallLabel": "홀", + "areaLabel": "면적", + "soldTo": "판매처: {{c}}", + "hold": "선점하기", + "purchase": "구매 확정", + "release": "선점 해제", + "setPrice": "가격 설정", + "block": "차단", + "unblock": "차단 해제", + "settle": "청구서 생성", + "settling": "생성 중…", + "heldToast": "부스를 선점했습니다. 제한 시간 내에 구매를 확정하세요.", + "purchasedToast": "구매가 확정되었습니다.", + "releasedToast": "선점을 해제했습니다.", + "blockToast": "부스 상태를 변경했습니다.", + "priceToast": "판매가를 변경했습니다.", + "settleToast": "청구서 생성 완료 — 신규 {{created}}건, 기존 유지 {{skipped}}건.", + "settleFail": "청구서 생성에 실패했습니다(권한 확인).", + "holdConflict": "이미 다른 사용자가 선점했거나 판매/차단된 부스입니다.", + "purchaseConflict": "선점이 만료되었거나 다른 사용자가 선점한 부스입니다.", + "blockConflict": "이미 판매된 부스는 차단할 수 없습니다.", + "actionFail": "요청을 처리하지 못했습니다.", + "pricePrompt": "판매가(원)를 입력하세요. 빈칸이면 면적×요율 자동 계산으로 복원합니다.", + "priceInvalid": "0 이상의 금액을 입력해 주세요." + }, + "settlement": { + "title": "정산·결제", + "subtitle": "행사 참가업체 청구 · 수납 현황 관리", + "generate": "청구서 생성", + "generating": "생성 중…", + "noEventTitle": "행사를 선택해 주세요", + "noEventDesc": "정산 현황을 조회할 행사가 지정되지 않았습니다.", + "genDone": "청구서 생성 완료 — 신규 {{created}}건, 기존 유지 {{skipped}}건.", + "genError": "청구서 생성에 실패했습니다. 권한 또는 대상 데이터를 확인해 주세요.", + "dashError": "정산 현황 집계를 불러오지 못했습니다.", + "kpisAria": "정산 핵심 지표", + "kpiBilled": "총 청구액", + "kpiCollected": "수납액", + "kpiOutstanding": "미수금", + "kpiOverdue": "연체 청구", + "count": "{{n}}건", + "collectionRate": "수납률 {{rate}}%", + "outstandingSub": "미수 잔액", + "overdueSub": "납부 기한 경과", + "distTitle": "청구 상태 분포", + "distEmpty": "집계된 청구가 없습니다", + "listTitle": "청구서 목록", + "invoices": "청구서", + "statusFilter": "상태 필터", + "status": { + "all": "전체", + "pending": "미발행", + "invoiced": "청구됨", + "paid": "완납", + "overdue": "연체", + "cancelled": "취소" + }, + "listError": "청구서 목록을 불러오지 못했습니다.", + "emptyTitle": "청구서가 없습니다", + "emptyManage": "상단의 청구서 생성으로 참가업체별 청구를 집계하세요.", + "emptyView": "아직 발행된 청구서가 없습니다.", + "colNo": "청구번호", + "colExhibitor": "참가업체", + "colBilled": "청구액", + "colPaid": "수납", + "colOutstanding": "미수", + "colDue": "납부기한", + "colStatus": "상태", + "detail": "상세", + "prev": "이전", + "next": "다음", + "pageInfo": "{{page}} / {{total}} · 총 {{cnt}}건", + "modalAria": "청구서 상세", + "invoice": "청구서", + "close": "닫기", + "detailError": "청구서 상세를 불러오지 못했습니다.", + "liItem": "항목", + "liQty": "수량", + "liUnit": "단가", + "liAmount": "금액", + "noLines": "라인 항목 없음", + "supplyAmount": "공급가액", + "vat": "부가세(10%)", + "grandTotal": "청구 총액", + "paidOutstanding": "수납 / 미수", + "payHistory": "수납 이력", + "noPayments": "수납 기록이 없습니다.", + "won": "{{v}}원", + "issue": "청구서 발행", + "issuing": "발행 중…", + "payAmount": "수납 금액", + "payAmountPh": "수납 금액(원)", + "payMethod": "수납 방법", + "methodTransfer": "계좌이체", + "methodCard": "카드", + "methodOther": "기타", + "memo": "메모", + "memoPh": "메모(선택)", + "recordPay": "수납 기록", + "recording": "기록 중…", + "payFail": "수납 기록에 실패했습니다. 금액(총액 이내)·권한을 확인해 주세요.", + "errPositive": "0보다 큰 금액을 입력해 주세요.", + "errExceed": "미수 잔액을 초과할 수 없습니다.", + "pgNote": "실제 결제는 외부 PG로 위임됩니다. 본 화면은 수납 확인 기록 전용입니다.", + "managerOnly": "수납·발행은 주최자/홀매니저만 수행할 수 있습니다.", + "colCategory": "유형", + "catRental": "임대·유틸", + "catAuctionFee": "옥션 수수료", + "reportTitle": "정산 리포트", + "reportShow": "리포트 보기", + "reportHide": "닫기", + "reportHint": "카테고리·상태별 합계와 수납율·미수를 집계하고 CSV로 내려받습니다.", + "reportError": "리포트를 불러오지 못했습니다.", + "reportCsv": "CSV 다운로드", + "reportByCategory": "카테고리별 합계", + "reportByStatus": "상태별 합계", + "reportEmpty": "집계할 청구가 없습니다.", + "reportNote": "합계는 취소된 청구를 제외한 값입니다. 금액은 서버 계산 기준입니다.", + "reportRate": "수납율", + "reportCount": "건수", + "taxTitle": "세금계산서", + "taxNo": "계산서 번호", + "taxSupplier": "공급자", + "taxBuyer": "공급받는자", + "taxItem": "품목", + "taxNone": "발행된 세금계산서가 없습니다.", + "taxIssue": "세금계산서 발행", + "taxIssuing": "발행 중…", + "taxIssueFail": "세금계산서 발행에 실패했습니다.", + "cancelledNote": "취소된 청구입니다.", + "cancelInvoice": "청구 취소", + "refundPreview": "환불 산정 미리보기", + "refundError": "환불 산정을 불러오지 못했습니다.", + "refundBracket": "적용 구간", + "refundRate": "환불율", + "refundBase": "기준액(납입)", + "refundAmount": "환불액", + "forfeitAmount": "공제·위약액", + "refundManual": "행사 개막일 미확정 등으로 자동 산정이 불가합니다 — 재무 수기 검토 대상입니다.", + "cancelReason": "취소 사유", + "cancelReasonPh": "취소 사유(선택)", + "cancelAbort": "취소 중단", + "cancelConfirm": "취소 확정", + "cancelling": "처리 중…", + "cancelFail": "청구 취소에 실패했습니다." + }, + "hallassign": { + "title": "홀 배정 · 자동 견적", + "subtitle": "홀×기간 배정 현황과 요율 룰셋 기반 즉시 견적(M1).", + "start": "시작", + "end": "종료", + "newAssign": "새 배정", + "board": "배정 보드", + "boardHint": "겹치는 배정은 충돌로 표시됩니다.", + "forbiddenTitle": "홀매니저 전용 보드", + "forbiddenDesc": "배정 현황 조회는 킨텍스 홀매니저 계정만 가능합니다. 자동 견적은 아래에서 이용하세요.", + "noHalls": "홀 마스터가 없습니다.", + "noAssign": "배정 없음", + "release": "배정 해제", + "releaseConfirm": "{{event}}의 {{hall}} 배정을 해제할까요?", + "assignedToast": "홀이 배정되었습니다.", + "releasedToast": "배정이 해제되었습니다.", + "releaseFail": "해제에 실패했습니다(권한 확인).", + "conflictErr": "배정하려는 홀·기간이 다른 행사와 겹칩니다.", + "assignFail": "배정에 실패했습니다.", + "pickEventHall": "행사와 홀을 선택하세요.", + "modalTitle": "홀 배정", + "close": "닫기", + "event": "행사", + "pickEvent": "행사 선택…", + "hall": "홀", + "pickHall": "홀 선택…", + "occupyStart": "점유 시작", + "occupyEnd": "점유 종료", + "primary": "주 배정 홀(primary)", + "note": "비고", + "optional": "선택 입력", + "cancel": "취소", + "assign": "배정", + "assigning": "배정 중…", + "autoQuote": "자동 견적", + "quoteHint": "요율 룰셋 기준 · 최종 금액은 킨텍스 확정 시 안내", + "startDate": "시작일", + "endDate": "종료일", + "boothSize": "부스 규모(선택)", + "countPh": "개수", + "calcQuote": "견적 계산", + "calculating": "계산 중…", + "quoteFail": "견적 계산에 실패했습니다.", + "quoteReq": "홀·시작일·종료일을 입력하세요.", + "qItem": "항목", + "qBasis": "산출 근거", + "qAmount": "금액", + "rentalSubtotal": "임대료 소계", + "rentalTotal": "임대료 합계 ({{days}}일)", + "deposit": "관리비 예치금(별도)", + "ruleset": "(룰셋 {{v}})", + "openDetail": "{{event}} 배정 상세 열기", + "detailTitle": "배정 상세", + "edit": "수정", + "dHall": "홀", + "dPeriod": "점유 기간", + "dStatus": "상태", + "dNote": "비고", + "primaryTag": "주 배정 홀", + "dConflict": "충돌 여부", + "dNoConflict": "겹치는 배정이 없습니다.", + "dQuote": "자동 견적 요약", + "dQuoteNoPeriod": "점유 기간이 없어 견적을 계산할 수 없습니다.", + "dQuoteFail": "견적을 불러오지 못했습니다." + }, + "ai": { + "console": { + "title": "AI 콘솔", + "subtitle": "자연어로 데이터를 조회하고 전시 규정을 질의합니다. 결과는 참고용이며 근거를 함께 표기합니다.", + "badge": "참고용", + "tabsAria": "AI 콘솔 탭", + "tabNlquery": "자연어 조회", + "tabRules": "규정 챗봇" + }, + "common": { + "running": "실행 중…", + "provClaude": "Claude 응답", + "provOllama": "Ollama 응답", + "provRules": "규정 원문 기반", + "provNone": "응답 없음", + "unavailable": "AI 기능을 일시적으로 사용할 수 없습니다. 잠시 후 다시 시도해 주세요.", + "invalid": "안전 규칙에 위배되어 실행할 수 없는 조회입니다.", + "forbidden": "이 기능을 사용할 권한이 없습니다.", + "error": "요청 처리 중 오류가 발생했습니다." + }, + "nlquery": { + "placeholder": "예: 상태가 active 인 행사 목록을 보여줘", + "inputAria": "자연어 조회 질문", + "run": "조회", + "guardNote": "읽기 전용 SELECT만 실행되며 개인정보 컬럼은 조회되지 않습니다. 최대 200행.", + "rowCount": "{{n}}행", + "showSql": "생성 SQL 보기", + "hideSql": "생성 SQL 숨기기", + "sqlAria": "생성된 SQL", + "emptyTitle": "결과가 없습니다", + "emptyDesc": "조건에 해당하는 데이터가 없습니다. 질문을 바꿔 다시 시도해 주세요." + }, + "rules": { + "placeholder": "예: 장치물 최대 높이가 얼마인가요?", + "inputAria": "규정 질문", + "run": "질의", + "groundNote": "규정·요율 룰셋을 근거로 답하며, 근거가 없으면 정직하게 알려드립니다.", + "citations": "근거 규정", + "notFound": "규정에서 찾지 못함", + "degraded": "규정 원문 요약(AI 미가용)" + }, + "assistant": { + "label": "AI 도우미", + "inputAria": "관람 도우미에게 질문하기", + "sendAria": "질문 보내기", + "chipsLabel": "자주 묻는 질문", + "chip1": "이번 주말 로봇 전시 있어?", + "chip2": "킨텍스 주차 어디에 해요?", + "chip3": "가족과 볼만한 전시 추천", + "chip4": "사전등록 어떻게 해요?", + "chip5": "GTX-A로 얼마나 걸려요?", + "thinking": "답변 생성 중…", + "error": "답변을 가져오지 못했습니다. 다시 시도해 주세요.", + "retry": "다시 시도", + "degraded": "AI 도우미 점검 중 — 적재 데이터 검색으로 안내합니다", + "providerAi": "AI 답변", + "notFound": "해당 정보를 찾지 못했어요 — 전체 일정·가이드를 확인해 보세요.", + "cardEventsTitle": "관련 전시", + "cardTransportTitle": "오시는 길", + "cardGuideTitle": "방문 안내", + "followupLabel": "이어서 물어보기", + "followup1": "무료인가요?", + "followup2": "주차 어디에 해요?", + "followup3": "사전등록 방법", + "citations": "근거 출처", + "register": "사전등록", + "disclaimer": "AI 생성 답변 — 정확한 정보는 공식 안내를 확인하세요." + } + }, + "analytics": { + "title": "경영분석", + "subtitle": "킨텍스 운영 수익성 · 참가업체 인사이트", + "perspective": "분석 관점", + "operator": "운영사", + "exhibitor": "참가업체", + "periodAria": "분석 기간", + "periodEvent": "이번 행사", + "periodD90": "최근 90일", + "periodAnnual": "연간", + "exportPdf": "PDF 내보내기", + "exportExcel": "Excel 내보내기", + "noEventTitle": "행사를 선택해 주세요", + "noEventDesc": "분석할 행사가 지정되지 않았습니다.", + "offlineSample": "오프라인 — 샘플", + "degradedMsg": "집계 API에 연결하지 못해 시연용 샘플을 표시합니다.", + "loadError": "경영분석 집계를 불러오지 못했습니다.", + "kpisAria": "핵심 지표", + "kpiEmpty": "집계된 지표가 없습니다", + "trendAria": "추세 차트", + "trendTitle": "매출 · 부스 추이", + "monthlyAgg": "월별 집계", + "trendHint": "월별 임대·유틸리티 매출과 부스 수 추이입니다 (매출 단위: 원).", + "trendEmptyTitle": "추이 데이터가 없습니다", + "trendEmptyDesc": "집계 가능한 기간의 매출·부스 레코드가 없습니다.", + "revenue": "매출", + "booth": "부스", + "boothsUnit": "{{n}} 부스", + "sectorsAria": "업종별 구성", + "sectorsTitle": "업종별 구성", + "sectorsEmptyTitle": "업종 분류 미집계", + "sectorsEmptyDesc": "업종 분류 원천(M13)이 연동되면 표시됩니다.", + "perfTable": "성과 테이블", + "pnlTitle": "손익(P&L) 구성", + "exhibitorPerfTitle": "참가사 성과", + "sampleTag": "샘플", + "pnlEmptyTitle": "손익 항목이 없습니다", + "pnlEmptyDesc": "부스 임대·유틸리티 매출 레코드가 집계되면 표시됩니다.", + "colItem": "항목", + "colAmount": "금액", + "colGrade": "등급", + "perfEmptyTitle": "참가사 성과 미집계", + "perfEmptyDesc": "리드·전환율 원천(M13 방문자)이 연동되면 표시됩니다.", + "colCompany": "업체명", + "colLeads": "리드", + "colConversion": "전환율" + }, + "global": { + "sectionAria": "테넌트 전역 경영분석", + "title": "전사 경영분석 (행사 횡단)", + "subtitle": "행사 간 매출 비교 · 홀 가동률 추이 · 참가사 리텐션 · 수요예측", + "yearsAria": "분석 연수", + "years3": "최근 3년", + "years5": "최근 5년", + "years10": "최근 10년", + "loadErrorTitle": "전역 집계를 불러오지 못했습니다", + "loadErrorDesc": "잠시 후 다시 시도해 주세요.", + "kpisAria": "전역 핵심 지표", + "kpiEmpty": "집계된 지표가 없습니다", + "evComp": "행사 간 매출 비교", + "top8": "상위 8개", + "evCompHint": "부스가 배치된 행사의 임대+유틸리티 매출 순위입니다 (단위: 원).", + "evCompEmptyTitle": "비교할 행사가 없습니다", + "evCompEmptyDesc": "부스가 배치된 행사 매출이 집계되면 표시됩니다.", + "revenue": "매출", + "retention": "참가사 리텐션", + "retentionCum": "누적 재참가율", + "returning": "재참가", + "retentionEmptyTitle": "연도별 리텐션 미집계", + "retentionEmptyDesc": "부스 배정사 원천이 연동되면 표시됩니다.", + "retentionRate": "재참가율", + "occupancy": "홀 가동률 추이 (월별)", + "occupancyHint": "개최 행사-일수 ÷ (홀수 × 그달 일수) 기준 월별 가동률입니다.", + "occupancyEmpty": "가동률 데이터가 없습니다", + "occupancyRate": "가동률", + "forecast": "수요예측", + "forecastTitle": "수요예측 (개최 추세)", + "trendProjection": "추세 투영", + "forecastHint": "연도별 개최 행사 수 실측 + 최소자승 선형 추세로 향후 2년 투영(점선).", + "forecastEmptyTitle": "예측할 이력이 없습니다", + "forecastEmptyDesc": "연도별 개최 이력이 집계되면 표시됩니다.", + "casesUnit": "{{n}}건", + "actual": "실측", + "projected": "예측" + }, + "ops": { + "title": "홀 현장운영", + "subtitle": "체크인·유틸리티 실집계 기반 현황", + "modeAria": "조회 모드", + "live": "실시간", + "history": "이력 조회", + "noEventTitle": "행사를 선택해 주세요", + "noEventDesc": "현장 운영을 조회할 행사가 지정되지 않았습니다.", + "offlineSample": "오프라인 — 샘플", + "degradedMsg": "집계 API에 연결하지 못해 시연용 샘플을 표시합니다.", + "loadError": "현장 운영 현황을 불러오지 못했습니다.", + "hallStatus": "홀별 현황", + "checkinDerived": "체크인(M10) 파생 · 면적 비중 분배", + "sensorNoneHalls": "센서 미연동 · 배정 홀 목록", + "noHallsTitle": "배정된 홀이 없습니다", + "noHallsDesc": "행사에 홀이 배정되면 표시됩니다.", + "busy": "혼잡", + "smooth": "원활", + "moderate": "보통", + "people": "{{n}}명", + "onSiteCheckin": "현장 체크인 <0>{{n}}명", + "noCheckinAgg": "체크인 집계 없음", + "powerLoad": "전력 부하", + "totalKw": "총 <0>{{v}}kW", + "utilLoadAgg": "유틸리티 신청(M4) 부하 집계", + "noLoadTitle": "신청 부하 없음", + "noLoadDesc": "전기 유틸리티 신청이 접수되면 홀별 부하가 표시됩니다.", + "kw": "{{v}}kW", + "hourlyCheckin": "시간대별 체크인", + "hourlyAgg": "체크인(M10) 시간대 집계", + "noSeriesTitle": "체크인 추이 없음", + "noSeriesDesc": "현장 체크인이 기록되면 시간대별 추이가 표시됩니다.", + "facilitySensor": "시설 센서 연동", + "facilitySensorTitle": "시설 센서 (공조·조명·주차)", + "sensorNoneTitle": "시설 센서 미연동", + "sensorNoneDesc": "공조(HVAC)·조명 IoT·주차(iparking) 연계는 센서(M14) 연동 시 표시됩니다.", + "temp": "온도", + "humidity": "습도", + "parkingSlots": "{{zone}}: {{occ}}/{{cap}}면" + }, + "admin": { + "deniedTitle": "접근 권한이 없습니다", + "deniedAuthed": "이 페이지는 시스템 관리자(홀매니저·ADMIN)만 이용할 수 있습니다. 접근이 필요하면 관리자에게 문의하세요.", + "deniedGuest": "관리자 백오피스는 로그인 후 이용할 수 있습니다.", + "overviewTitle": "시스템 개요", + "overviewSub": "실시간 지표 및 운영 상태", + "loginSlides": "로그인 슬라이드 관리", + "tenantSwitch": "테넌트 전환", + "systemNormal": "시스템 정상", + "moduleShortcuts": "관리 모듈 바로가기", + "offlineSample": "오프라인 — 샘플", + "degradedMsg": "집계 API에 연결하지 못해 시연용 샘플을 표시합니다.", + "dashLoadError": "관리자 대시보드를 불러오지 못했습니다.", + "kpisAria": "핵심 지표", + "kpiEmpty": "집계된 지표가 없습니다", + "visitorTrend": "방문객 추이", + "hourlyVisitors": "시간대별 관람객", + "visitors": "관람객", + "visitorTrendEmptyTitle": "관람객 추이 미집계", + "visitorTrendEmptyDesc": "관람객 계측 센서(M14)가 연동되면 시간대별 추이가 표시됩니다.", + "liveEvents": "진행 중 이벤트", + "noLiveEvents": "진행 중인 행사가 없습니다", + "hallTbd": "홀 미배정", + "occupancy": "점유 {{n}}%", + "modUsers": "사용자", + "modRoles": "역할·권한", + "modCodes": "공통코드", + "modMenus": "메뉴", + "modAudit": "감사로그", + "modSettings": "시스템설정", + "modRulesets": "룰셋", + "modTenants": "테넌트" + }, + "tenant": { + "title": "테넌트 관리·온보딩", + "subtitle": "플랫폼 슈퍼관리자 전용 · 코드 배포 없이 데이터 온보딩으로 전시관을 추가합니다.", + "sampleTag": "샘플 · 미구현", + "sampleNote": "멀티테넌시(테넌트 CRUD·온보딩·격리)가 백엔드에 아직 없어 화면은 목표 IA 를 표시합니다. 실 데이터 연동은 멀티테넌시 도입 후 배선됩니다.", + "listAria": "테넌트 목록", + "venue": "전시관", + "notImpl": "미구현", + "addVenue": "전시관 추가", + "code": "코드", + "domain": "도메인", + "status": "상태", + "events": "행사", + "users": "사용자", + "wizardAria": "온보딩 위저드", + "onboardingOf": "{{name}} 온보딩", + "dataOnboarding": "코드 배포 없이 데이터 온보딩", + "wiz": { + "create": { + "label": "테넌트 생성", + "desc": "코드·표시명 등록" + }, + "domain": { + "label": "서브도메인", + "desc": "DNS·브랜딩 도메인 배정" + }, + "brand": { + "label": "브랜딩", + "desc": "로고·색상·공개사이트 테마" + }, + "master": { + "label": "마스터데이터 입력", + "desc": "홀·요율·룰셋 시드" + }, + "admin": { + "label": "관리자 계정", + "desc": "테넌트 관리자 초대" + }, + "smoke": { + "label": "격리 스모크", + "desc": "크로스-테넌트 격리 검증" + }, + "activate": { + "label": "활성화", + "desc": "운영 전환" + } + }, + "tstatus": { + "active": "활성", + "onboarding": "온보딩중", + "suspended": "중지" + } + }, + "ruleset": { + "title": "규정 룰셋 버전 관리", + "subtitle": "규정 개정 대응을 위한 룰셋 버전 이력과 규칙 항목입니다.", + "readonly": "읽기 전용", + "readonlyNote": "룰셋은 배포 리소스(rulesets/*.json)로 버전 관리됩니다. 편집·버전 생성은 규정 개정 시 리소스 교체로 수행되며 화면에서는 조회만 가능합니다.", + "listError": "룰셋 목록을 불러오지 못했습니다.", + "noRulesets": "배포된 룰셋이 없습니다", + "versionHistory": "버전 히스토리", + "rulesCount": "규칙 {{n}}", + "effectiveDate": "발효일 {{date}}", + "ruleList": "규칙 목록", + "rulesOf": "{{name}} 규칙 ({{n}}개)", + "detailError": "규칙 전문을 불러오지 못했습니다.", + "noRulesTitle": "규칙 배열이 없는 룰셋입니다", + "noRulesDesc": "요율 마스터 등 규칙(rules) 없이 요율·단가만 정의된 룰셋입니다.", + "colRuleName": "규칙명", + "colValue": "수치/설정값", + "colLogic": "논리 / 요구사항", + "colSeverity": "위반 수준", + "block": "차단", + "warn": "경고", + "required": "필수", + "perHall": "홀별 {{unit}}", + "docNeeded": "문서 필요: {{doc}}" + }, + "audit": { + "title": "감사 로그", + "subtitle": "승인·낙찰·설정변경 등 모든 관리 액션과 중요 도메인 이벤트를 추적합니다. (무결성 유지)", + "exportCsv": "CSV 내보내기", + "filterAria": "감사 로그 필터", + "actionType": "액션 유형", + "allActions": "전체 액션", + "actorId": "담당자 ID", + "actorIdPh": "예: user-102", + "eventId": "행사 ID", + "eventIdPh": "예: EVT-2026-01", + "reset": "초기화", + "applyFilter": "필터 적용", + "loadError": "감사 로그를 불러오지 못했습니다.", + "tableAria": "감사 로그 테이블", + "emptyTitle": "조건에 맞는 감사 기록이 없습니다", + "emptyDesc": "필터를 조정하거나 초기화해 다시 조회하세요.", + "colTime": "시각", + "colUser": "사용자", + "colAction": "액션", + "colTarget": "대상", + "colEvent": "행사", + "colResult": "결과", + "showing": "표시 중 <0>{{from}}-{{to}} / 총 <1>{{total}}개", + "prev": "이전", + "next": "다음", + "rowsShow": "행 표시", + "rowsPerPage": "페이지당 행 수", + "rowsN": "{{n}}개", + "success": "성공", + "failure": "실패", + "csvTime": "시각", + "csvActorId": "담당자ID", + "csvActorName": "담당자명", + "csvAction": "액션", + "csvTargetType": "대상유형", + "csvTargetId": "대상ID", + "csvEventId": "행사ID", + "csvResult": "결과", + "csvSummary": "요약" + }, + "role": { + "title": "역할 · 권한 (RBAC)", + "subtitle": "역할(주최자·참가업체·장치업체·홀매니저·관리자·관람객)별 리소스 권한을 매트릭스로 배정합니다.", + "addRole": "역할 추가", + "loadError": "역할·권한 정보를 불러오지 못했습니다.", + "noRolesTitle": "정의된 역할이 없습니다", + "noRolesDesc": "역할을 추가해 RBAC 를 구성하세요.", + "roleList": "역할 목록", + "role": "역할", + "codePerm": "{{code}} · 권한 {{n}}", + "unused": "미사용", + "permMatrix": "권한 매트릭스", + "rolePerm": "{{name}} 권한", + "roleInfo": "역할 정보", + "deleteConfirm": "역할 '{{name}}' 을(를) 삭제하시겠습니까?", + "delete": "삭제", + "noPerms": "정의된 권한이 없습니다", + "selectRole": "역할을 선택하세요", + "saved": "역할을 저장했습니다.", + "deleted": "역할을 삭제했습니다.", + "addRoleModal": "역할 추가", + "editRole": "역할 정보 수정", + "modalDesc": "권한 배정은 저장 후 매트릭스에서 체크로 관리합니다.", + "roleCode": "역할 코드 *", + "roleCodePh": "예: ORGANIZER", + "roleName": "역할 이름 *", + "description": "설명", + "useYn": "사용 여부", + "use": "사용", + "noUse": "미사용", + "cancel": "취소", + "save": "저장", + "saving": "저장 중…", + "errRequired": "역할 코드와 이름은 필수입니다.", + "errDupCode": "이미 존재하는 역할 코드입니다." + }, + "menu": { + "title": "메뉴 관리", + "subtitle": "역할별 내비게이션 메뉴 트리와 경로·접근 역할을 관리합니다.", + "addMenu": "메뉴 추가", + "loadError": "메뉴를 불러오지 못했습니다.", + "treeAria": "메뉴 트리", + "emptyTitle": "등록된 메뉴가 없습니다", + "emptyDesc": "메뉴를 추가하세요.", + "colName": "메뉴명", + "colPath": "경로", + "colType": "유형", + "colRole": "접근 역할", + "colSort": "정렬", + "colUse": "사용", + "colManage": "관리", + "all": "전체", + "unused": "미사용", + "used": "사용", + "edit": "수정", + "delete": "삭제", + "deleteConfirm": "메뉴 '{{name}}' 을(를) 삭제하시겠습니까? 하위 메뉴가 있으면 함께 정리됩니다.", + "saved": "메뉴를 저장했습니다.", + "deleted": "메뉴를 삭제했습니다.", + "editMenu": "메뉴 수정", + "menuId": "메뉴 ID (고유 키) *", + "menuIdPh": "예: admin-users", + "menuName": "메뉴명 *", + "parent": "상위 메뉴", + "topLevel": "(최상위)", + "path": "경로(path)", + "pathPh": "예: /admin/users", + "type": "유형", + "accessRole": "접근 역할", + "accessRolePh": "예: ADMIN (비우면 전체)", + "sort": "정렬", + "useYn": "사용 여부", + "cancel": "취소", + "save": "저장", + "saving": "저장 중…", + "errName": "메뉴명은 필수입니다.", + "errId": "메뉴 ID(고유 키)는 필수입니다.", + "errDupId": "이미 존재하는 메뉴 ID 입니다." + }, + "code": { + "title": "공통코드 관리", + "subtitle": "드롭다운·분류에 쓰이는 공통코드 그룹과 코드 값을 관리합니다.", + "addGroup": "그룹 추가", + "groupLoadError": "코드 그룹을 불러오지 못했습니다.", + "noGroupsTitle": "코드 그룹이 없습니다", + "noGroupsDesc": "그룹을 추가해 공통코드를 구성하세요.", + "codeGroup": "코드 그룹", + "codeValues": "코드 값", + "valuesOf": "{{name}} 값", + "editGroup": "코드 그룹 수정", + "deleteGroup": "그룹 삭제", + "deleteGroupConfirm": "그룹 '{{name}}' 과 하위 코드를 삭제하시겠습니까?", + "addCode": "코드 추가", + "codeLoadError": "코드 값을 불러오지 못했습니다.", + "noCodesTitle": "코드가 없습니다", + "noCodesDesc": "코드를 추가하세요.", + "code": "코드", + "name": "이름", + "value": "값", + "sort": "정렬", + "use": "사용", + "manage": "관리", + "unused": "미사용", + "used": "사용", + "edit": "수정", + "delete": "삭제", + "deleteCodeConfirm": "코드 '{{name}}' 을(를) 삭제하시겠습니까?", + "groupSaved": "코드 그룹을 저장했습니다.", + "groupDeleted": "코드 그룹을 삭제했습니다.", + "codeSaved": "코드를 저장했습니다.", + "codeDeleted": "코드를 삭제했습니다.", + "groupCode": "그룹 코드 *", + "groupName": "그룹 이름 *", + "description": "설명", + "useYn": "사용 여부", + "cancel": "취소", + "save": "저장", + "saving": "저장 중…", + "errGroupRequired": "그룹 코드와 이름은 필수입니다.", + "errDupGroup": "이미 존재하는 그룹 코드입니다.", + "editCode": "코드 수정", + "group": "그룹", + "codeReq": "코드 *", + "nameReq": "이름 *", + "attr1": "속성1(attr1)", + "errCodeRequired": "코드와 이름은 필수입니다.", + "errDupCode": "이미 존재하는 코드입니다." + }, + "sysuser": { + "title": "사용자 관리", + "subtitle": "계정 생성·수정, 역할 배정, 상태(활성/잠금/비활성)와 OTP 초기화를 관리합니다. 비밀번호는 마스킹되어 표시되지 않습니다.", + "addUser": "사용자 추가", + "searchAria": "사용자 검색", + "keyword": "검색어", + "keywordPh": "이름·이메일", + "role": "역할", + "status": "상태", + "all": "전체", + "reset": "초기화", + "search": "검색", + "loadError": "사용자 목록을 불러오지 못했습니다.", + "listAria": "사용자 목록", + "emptyTitle": "사용자가 없습니다", + "emptyDesc": "검색 조건을 조정하거나 사용자를 추가하세요.", + "colUser": "사용자", + "colEmail": "이메일", + "colRole": "역할", + "colDept": "부서", + "colStatus": "상태", + "colLastLogin": "최근 로그인", + "colManage": "관리", + "hallManagerTag": "홀매니저", + "otpSet": "설정됨", + "otpUnset": "미설정", + "edit": "수정", + "lock": "잠금", + "unlock": "잠금해제", + "otpResetBtn": "OTP초기화", + "otpResetConfirm": "{{name}} 의 OTP 를 초기화하시겠습니까?", + "saved": "사용자를 저장했습니다.", + "statusChanged": "상태를 변경했습니다.", + "otpReset": "OTP 를 초기화했습니다.", + "active": "활성", + "locked": "잠금", + "disabled": "비활성", + "editUser": "사용자 수정", + "newDesc": "초기 비밀번호는 저장 후 화면에 표시되지 않습니다.", + "editDesc": "이메일은 수정할 수 없습니다. 비밀번호 재설정은 별도 정책을 따릅니다.", + "email": "이메일 *", + "displayName": "표시 이름 *", + "dept": "부서", + "initPassword": "초기 비밀번호 *", + "hallManagerCheck": "홀매니저(내부 운영자)", + "cancel": "취소", + "save": "저장", + "saving": "저장 중…", + "errRequired": "이메일과 표시 이름은 필수입니다.", + "errPassword": "신규 사용자는 초기 비밀번호가 필요합니다.", + "totalUsers": "총 <0>{{total}}명", + "prev": "이전", + "next": "다음" + }, + "settings": { + "title": "시스템 설정", + "subtitle": "전역 정책·기능 토글·AI 게이트 등 시스템 파라미터를 관리합니다. 시크릿 값은 마스킹 표시됩니다.", + "loadError": "시스템 설정을 불러오지 못했습니다.", + "emptyTitle": "등록된 설정이 없습니다", + "emptyDesc": "아래 폼에서 첫 설정 항목을 추가하세요.", + "saved": "설정을 저장했습니다.", + "deleted": "설정을 삭제했습니다.", + "deleteConfirm": "설정 '{{key}}' 을(를) 삭제하시겠습니까?", + "general": "일반", + "groupAria": "설정 그룹 {{name}}", + "secret": "시크릿", + "secretTitle": "시크릿 — 값 마스킹", + "on": "켜짐", + "off": "꺼짐", + "secretPh": "설정됨(마스킹) — 변경 시 새 값 입력", + "save": "저장", + "delete": "삭제", + "deleteKey": "{{key}} 삭제", + "secretHint": "시크릿 원문은 노출되지 않습니다. 값을 입력하지 않고 저장하면 기존 값이 유지됩니다.", + "addAria": "설정 추가", + "addTitle": "설정 추가 / 재정의", + "settingKey": "설정 키", + "settingKeyPh": "예: deadline.utility.days", + "value": "값", + "type": "타입", + "description": "설명", + "secretCheck": "시크릿(값 마스킹)" + }, + "slide": { + "title": "로그인 슬라이드 관리", + "subtitle": "로그인 화면 좌측 캐러셀 이미지·문구 — 활성 슬라이드 중 <0>최신 등록순 5건이 로테이션됩니다.", + "addAria": "새 슬라이드 추가", + "addTitle": "새 슬라이드 추가", + "imageLabel": "이미지 (PNG/JPG/WebP, 8MB 이하)", + "preview": "미리보기", + "titleLabel": "타이틀 문구", + "titlePh": "예) 아시아를 대표하는 전시컨벤션센터, KINTEX", + "captionLabel": "캡션(보조 문구)", + "captionPh": "예) 10만㎡ 전시 공간에서 펼쳐지는 비즈니스 기회를 만나보세요.", + "submitting": "등록 중…", + "submit": "슬라이드 등록", + "listAria": "슬라이드 목록", + "registered": "등록된 슬라이드", + "countActive": "총 {{total}}건 · 활성 {{active}}건", + "emptyTitle": "등록된 슬라이드가 없습니다", + "emptyDesc": "이미지와 문구를 등록하면 로그인 화면 캐러셀에 노출됩니다. (미등록 시 기본 5종 표시)", + "live": "노출 중", + "inactive": "비활성", + "registeredAt": "등록 {{date}}", + "active": "활성", + "delete": "삭제", + "listError": "목록을 불러오지 못했습니다.", + "errImage": "슬라이드 이미지를 선택해 주세요.", + "errTitle": "타이틀 문구를 입력해 주세요.", + "createFail": "등록에 실패했습니다.", + "updateFail": "변경에 실패했습니다.", + "deleteFail": "삭제에 실패했습니다.", + "deleteConfirm": "\"{{title}}\" 슬라이드를 삭제할까요?" + }, + "approval": { + "queueTitle": "결재 대기함", + "search": "검색", + "searchPlaceholder": "제목 검색…", + "pendingCount": "결재 대기", + "pendingList": "내 결재 대기 문서", + "colTitle": "제목", + "colDocType": "유형", + "colDrafter": "기안자", + "colSubmitted": "상신일", + "colStep": "단계", + "colStatus": "상태", + "colAction": "처리", + "open": "열기", + "emptyPending": "결재할 문서가 없습니다", + "status": { + "DRAFT": "임시저장", + "SUBMITTED": "상신", + "IN_PROGRESS": "진행중", + "APPROVED": "승인완료", + "REJECTED": "반려", + "CANCELED": "회수" + }, + "reviewTitle": "결재 검토", + "version": "버전", + "drafter": "기안자", + "step": "단계", + "demoMode": "미리보기(데모)", + "downloadOriginal": "원본 다운로드", + "previewAria": "문서 미리보기", + "lineAria": "결재선·이력", + "docBody": "본문", + "line": "결재선", + "history": "처리 이력", + "noHistory": "처리 이력이 없습니다", + "lineStatus": { + "WAIT": "대기", + "CURRENT": "결재 진행", + "APPROVED": "승인", + "REJECTED": "반려", + "SKIPPED": "건너뜀" + }, + "action": { + "SUBMIT": "상신", + "APPROVE": "승인", + "REJECT": "반려", + "RESUBMIT": "재상신", + "CANCEL": "회수" + }, + "approve": "승인", + "reject": "반려", + "approvedDone": "승인 처리되었습니다.", + "rejectedDone": "반려 처리되었습니다.", + "canActHint": "이 문서의 현재 단계 결재자입니다.", + "notApproverHint": "현재 단계 결재자만 처리할 수 있습니다.", + "demoFootNote": "결재 대기함에서 문서를 선택하면 실제 승인/반려가 가능합니다.", + "demoHint": "결재 문서가 지정되지 않았습니다. 결재 대기함에서 문서를 열어 주세요.", + "commentPlaceholder": "의견(반려 시 필수)을 입력하세요", + "comment": "의견", + "boxTitle": "결재함", + "compose": "기안", + "composeTitle": "결재 기안", + "resubmitTitle": "반려 문서 재상신", + "backToList": "목록", + "tab": { + "PENDING": "결재할 문서", + "DRAFTED": "상신한 문서", + "REJECTED": "반려", + "DONE": "완료" + }, + "empty": { + "PENDING": "결재할 문서가 없습니다", + "DRAFTED": "상신한 문서가 없습니다", + "REJECTED": "반려된 문서가 없습니다", + "DONE": "완료된 문서가 없습니다" + }, + "resubmitBtn": "재상신", + "draftSave": "임시저장", + "submitDoc": "상신", + "cancel": "취소", + "saving": "처리 중…", + "docType": "문서유형", + "docTypes": { + "GENERAL": "일반", + "DESIGN": "디자인/도면", + "DOCUMENT": "서류", + "EXPENSE": "비용/지출", + "ETC": "기타" + }, + "titleLabel": "제목", + "titlePlaceholder": "결재 문서 제목을 입력하세요", + "contentLabel": "내용", + "contentPlaceholder": "결재 문서 내용을 입력하세요", + "err": { + "titleRequired": "제목을 입력하세요.", + "lineRequired": "결재선을 1명 이상 지정하세요." + }, + "createdDraft": "임시저장되었습니다.", + "submittedDone": "상신되었습니다.", + "resubmittedDone": "재상신되었습니다.", + "rejectedReason": "반려 사유", + "canResubmitHint": "반려된 기안입니다. 수정 후 재상신할 수 있습니다.", + "lineEditor": { + "empty": "지정된 결재자가 없습니다. 결재자를 추가하세요.", + "stepNo": "{{n}}단계", + "idPlaceholder": "결재자 ID", + "namePlaceholder": "표시명(선택)", + "approverId": "{{n}}단계 결재자 ID", + "approverName": "{{n}}단계 결재자 이름", + "moveUp": "위로 이동", + "moveDown": "아래로 이동", + "remove": "결재자 삭제", + "add": "결재자 추가" + }, + "rejectModalTitle": "반려 처리", + "approveModalTitle": "승인 처리", + "rejectReason": "반려 사유", + "rejectReasonPlaceholder": "반려 사유를 입력하세요", + "rejectReasonHint": "반려 사유는 기안자에게 전달되며 재상신 시 표시됩니다.", + "commentOptional": "의견(선택)을 입력하세요" + }, + "auction": { + "boq": { + "title": "물량서(BOQ) 자동산출", + "error": "물량서를 불러오지 못했습니다.", + "scopeBooth": "{{label}} 부스 기준", + "scopeEvent": "행사 전체 부스 집계", + "summary": "부스 {{count}}실 · {{area}}㎡", + "colSeq": "No", + "colTrade": "공종", + "colItem": "품명", + "colQty": "수량", + "colUnit": "단위", + "colBasis": "산출 근거" + } + }, + "logistics": { + "title": "물류 허브", + "subtitle": "반입·반출 도크 · 부대장비 · 렌탈 · 선입고 트래킹", + "tabsAria": "물류 기능 전환", + "tabs": { + "dock": "도크 예약", + "equipment": "장비 신청", + "rental": "렌탈 주문", + "inbound": "선입고" + }, + "boothNo": "부스 번호", + "qty": "수량", + "estimate": "예상 금액", + "submitting": "처리 중…", + "submitOk": "접수되었습니다.", + "submitErr": "처리에 실패했습니다.", + "statusUpdated": "상태가 변경되었습니다.", + "loadErr": "물류 정보를 불러오지 못했습니다.", + "serverAmountNote": "금액은 서버 기준으로 확정됩니다", + "equipment": { + "formTitle": "부대장비 신청", + "item": "장비 품목", + "days": "사용 일수", + "daysUnit": "일", + "useDate": "사용 예정일", + "submit": "장비 신청", + "listTitle": "신청 내역", + "empty": "신청 내역이 없습니다", + "emptyDesc": "지게차·리프트 등 부대장비를 신청하세요.", + "approve": "승인", + "reject": "반려", + "rejectReason": "현장 여건상 반려", + "done": "처리 완료", + "st": { + "requested": "신청됨", + "approved": "승인", + "rejected": "반려", + "done": "완료" + } + }, + "rental": { + "formTitle": "부대물품 렌탈 주문", + "item": "렌탈 품목", + "start": "시작일", + "end": "종료일", + "submit": "렌탈 주문", + "listTitle": "주문 내역", + "empty": "주문 내역이 없습니다", + "emptyDesc": "테이블·의자·모니터 등을 주문하세요.", + "period": "{{days}}일", + "confirm": "확정", + "cancel": "취소", + "deliver": "납품 완료", + "st": { + "ordered": "주문됨", + "confirmed": "확정", + "cancelled": "취소", + "delivered": "납품" + } + }, + "inbound": { + "formTitle": "선입고 운송장 등록", + "trackingNo": "운송장 번호", + "carrier": "운송사", + "itemDesc": "화물 내용", + "eta": "입고 예정일", + "submit": "운송장 등록", + "submitSub": "등록 후 입고 상태를 추적합니다", + "listTitle": "선입고 현황", + "empty": "선입고 내역이 없습니다", + "emptyDesc": "사전 배송 운송장을 등록하세요.", + "st": { + "registered": "등록됨", + "inbound_scheduled": "입고 예정", + "arrived_warehouse": "창고 도착", + "delivered_booth": "부스 전달" + }, + "advance": { + "inbound_scheduled": "입고 예정 처리", + "arrived_warehouse": "창고 도착 처리", + "delivered_booth": "부스 전달 완료" + } + } + }, + "appqr": { + "title": "킨텍스 전시 앱 다운로드", + "subtitle": "모바일 앱 설치", + "intro": "QR 코드를 스캔하거나 아래 버튼으로 킨텍스 전시 앱을 설치하세요.", + "about": "앱 크기 {{size}}", + "appName": "킨텍스 AI 전시 앱", + "builtAt": "{{date}} 빌드", + "download": "APK 다운로드", + "copyLink": "링크 복사", + "copied": "복사됨", + "refresh": "새로고침", + "retry": "다시 시도", + "qrAlt": "앱 다운로드 QR 코드", + "iosNote": "iOS는 App Store 정식 출시 후 지원될 예정입니다.", + "notReady": { + "title": "앱을 준비 중입니다", + "desc": "설치 파일이 아직 게시되지 않았습니다. 잠시 후 다시 시도해 주세요." + }, + "steps": { + "heading": "설치 방법", + "s1": "휴대폰 카메라로 QR 코드를 스캔합니다.", + "s2": "표시된 링크를 열어 APK를 다운로드합니다.", + "s3": "'출처를 알 수 없는 앱 설치'를 허용합니다.", + "s4": "설치 후 앱을 열어 로그인합니다." + } + }, + "authPolicy": { + "title": "인증 정책", + "subtitle": "비밀번호 규칙과 로그인 잠금 정책을 설정합니다.", + "loadError": "인증 정책을 불러오지 못했습니다.", + "saved": "인증 정책이 저장되었습니다.", + "pwSection": "비밀번호 정책", + "pwMinLength": "최소 길이", + "pwExpireDays": "만료 기간(일)", + "pwRequireUpper": "대문자 포함", + "pwRequireNumber": "숫자 포함", + "pwRequireSpecial": "특수문자 포함", + "lockSection": "로그인 잠금", + "loginMaxFail": "최대 실패 횟수", + "lockMinutes": "잠금 시간(분)", + "sessionTimeoutMin": "세션 만료(분)" + }, + "company": { + "title": "업체 관리", + "subtitle": "참가업체와 협력사 정보를 관리합니다.", + "add": "업체 추가", + "edit": "업체 수정", + "searchPh": "업체명 또는 사업자번호 검색", + "partnerType": "구분", + "allTypes": "전체 유형", + "bizType": "업종", + "ceo": "대표자", + "contact": "담당자", + "tel": "연락처", + "telEditHint": "숫자만 입력하세요.", + "telMaskNote": "연락처는 보안을 위해 마스킹되어 표시됩니다.", + "address": "주소", + "colName": "업체명", + "colBizNo": "사업자번호", + "colType": "구분", + "colContact": "담당자", + "colTel": "연락처", + "colUse": "사용", + "deleteConfirm": "{{name}} 업체를 삭제하시겠습니까?", + "deleted": "업체가 삭제되었습니다.", + "saved": "업체 정보가 저장되었습니다.", + "errRequired": "필수 항목을 입력하세요.", + "loadError": "업체 목록을 불러오지 못했습니다.", + "emptyTitle": "등록된 업체가 없습니다", + "emptyDesc": "새 업체를 추가해 주세요." + }, + "dept": { + "title": "부서 관리", + "subtitle": "조직 부서 구조를 관리합니다.", + "addRoot": "최상위 부서 추가", + "addChild": "하위 부서 추가", + "add": "부서 추가", + "edit": "부서 수정", + "name": "부서명", + "deleteConfirm": "{{name}} 부서를 삭제하시겠습니까?", + "deleted": "부서가 삭제되었습니다.", + "saved": "부서가 저장되었습니다.", + "errRequired": "부서명을 입력하세요.", + "loadError": "부서 목록을 불러오지 못했습니다.", + "emptyTitle": "등록된 부서가 없습니다", + "emptyDesc": "최상위 부서를 추가해 주세요.", + "searchPlaceholder": "부서명 검색", + "searchNoResult": "검색 결과가 없습니다.", + "treeAria": "부서 조직도 트리", + "expand": "펼치기", + "collapse": "접기", + "expandAll": "모두 펼치기", + "collapseAll": "모두 접기", + "selectHint": "좌측에서 부서를 선택하세요.", + "colId": "부서 ID", + "colParent": "상위 부서", + "topLevel": "최상위", + "colChildCount": "하위 부서 수", + "childCountValue": "{{n}}개", + "errHasChildren": "하위 부서가 있어 삭제할 수 없습니다." + }, + "errorLog": { + "title": "오류 로그", + "subtitle": "시스템 오류 이력을 조회합니다.", + "filterAria": "오류 로그 필터", + "code": "오류 코드", + "codePh": "오류 코드 입력", + "loadError": "오류 로그를 불러오지 못했습니다.", + "emptyTitle": "오류 로그가 없습니다", + "emptyDesc": "조건에 맞는 오류 로그가 없습니다.", + "colTime": "발생 시각", + "colCode": "코드", + "colMethod": "메서드", + "colPath": "경로", + "colSummary": "요약" + }, + "loginHistory": { + "title": "로그인 이력", + "subtitle": "로그인 성공/실패 이력을 조회합니다.", + "filterAria": "로그인 이력 필터", + "result": "결과", + "allResults": "전체 결과", + "userId": "사용자 ID", + "userIdPh": "사용자 ID 입력", + "loadError": "로그인 이력을 불러오지 못했습니다.", + "emptyTitle": "로그인 이력이 없습니다", + "emptyDesc": "조건에 맞는 로그인 이력이 없습니다.", + "colTime": "일시", + "colResult": "결과", + "colUser": "사용자", + "colEmail": "이메일", + "colIp": "IP 주소", + "colReason": "사유" + }, + "marketing": { + "sentDone": "{{n}}건이 발송되었습니다.", + "sentDisabled": "이미 발송됨 ({{n}})", + "sendFail": "발송에 실패했습니다.", + "confirm": "{{name}} 캠페인을 발송하시겠습니까?", + "sending": "발송 중…", + "sendBtn": "발송" + }, + "program": { + "title": "프로그램 관리", + "subtitle": "화면 프로그램과 접근 URL을 관리합니다.", + "add": "프로그램 추가", + "edit": "프로그램 수정", + "searchPh": "프로그램명 검색", + "deleteConfirm": "{{name}} 프로그램을 삭제하시겠습니까?", + "deleted": "프로그램이 삭제되었습니다.", + "saved": "프로그램이 저장되었습니다.", + "errRequired": "필수 항목을 입력하세요.", + "loadError": "프로그램 목록을 불러오지 못했습니다.", + "emptyTitle": "등록된 프로그램이 없습니다", + "emptyDesc": "새 프로그램을 추가해 주세요.", + "colName": "프로그램명", + "colType": "유형", + "colUrl": "URL", + "colCategory": "분류", + "colUse": "사용" + }, + "roleMenu": { + "title": "역할별 메뉴 권한", + "subtitle": "역할에 메뉴 접근 권한을 부여합니다.", + "loadError": "권한 정보를 불러오지 못했습니다.", + "noRoles": "등록된 역할이 없습니다.", + "roleList": "역할 목록", + "role": "역할", + "matrix": "권한 매트릭스", + "noMenus": "메뉴가 없습니다.", + "colMenu": "메뉴", + "colAccess": "접근", + "colRead": "읽기", + "colWrite": "쓰기", + "saved": "권한이 저장되었습니다." + }, + "sysHealth": { + "title": "시스템 상태", + "subtitle": "서버와 서비스 상태를 모니터링합니다.", + "refresh": "새로고침", + "loadError": "시스템 상태를 불러오지 못했습니다.", + "db": "데이터베이스", + "redis": "Redis", + "worker": "워커", + "queueDepth": "큐 적재량 {{n}}", + "disk": "디스크", + "diskFree": "여유 {{mb}}MB", + "mem": "메모리", + "uptime": "가동 시간", + "version": "버전" + }, + "sysadmin": { + "actions": "작업", + "cancel": "취소", + "delete": "삭제", + "edit": "수정", + "keyword": "검색어", + "next": "다음", + "noUse": "미사용", + "prev": "이전", + "save": "저장", + "saving": "저장 중…", + "search": "검색", + "sortOrder": "정렬 순서", + "totalN": "총 {{n}}건", + "use": "사용", + "useYn": "사용 여부" + }, + "public": { + "home": { + "heroTitle": "AI가 설계하는 전시의 미래" + } + }, + "calendar": { + "prev": "이전", + "next": "다음", + "today": "오늘", + "yearMonth": "{{y}}년 {{m}}월", + "viewSwitch": "뷰 전환", + "view": { + "month": "월", + "week": "주", + "day": "일" + }, + "loading": "불러오는 중…", + "legend": "범례", + "dayEmpty": "등록된 일정이 없습니다.", + "dayAll": "{{date}} 전체 일정", + "close": "닫기" + }, + "holiday": { + "title": "공휴일 관리", + "subtitle": "법정공휴일·대체공휴일 조회 및 임시공휴일 관리. 달력에 붉은색으로 표시됩니다.", + "year": "연도", + "yearLabel": "{{y}}년", + "add": "임시공휴일 추가", + "created": "공휴일이 추가되었습니다.", + "deleted": "삭제되었습니다.", + "toggled": "휴무 여부가 변경되었습니다.", + "loadError": "공휴일을 불러오지 못했습니다.", + "emptyTitle": "공휴일이 없습니다", + "emptyDesc": "선택한 연도에 등록된 공휴일이 없습니다.", + "listOf": "{{y}}년 공휴일", + "count": "휴무 {{n}}일", + "date": "날짜", + "weekday": "요일", + "name": "명칭", + "type": "구분", + "status": "휴무", + "manage": "관리", + "substitute": "대체공휴일", + "legal": "법정공휴일", + "on": "휴무", + "off": "정상근무", + "setOff": "임시휴무 해제", + "setOn": "임시휴무 설정", + "delete": "삭제", + "deleteConfirm": "'{{name}}'을(를) 삭제할까요?", + "errRequired": "날짜와 명칭을 입력해 주세요.", + "errDup": "이미 등록된 날짜입니다.", + "substituteHint": "대체공휴일로 등록", + "cancel": "취소", + "saving": "저장 중…", + "save": "저장" + }, + "track": { + "shell": { + "wordmark": "KINTEX AI 전시·행사시스템", + "tablistAria": "트랙 선택", + "tab": { + "visitor": "관람", + "business": "비즈니스", + "agency": "협력사" + }, + "login": "로그인", + "myHome": "내 홈" + }, + "gateway": { + "heroAria": "제품 소개 히어로", + "aiWatermark": "AI 생성 예상 이미지", + "eyebrow": "AI 전시·행사 운영 플랫폼", + "title": "KINTEX AI 전시·행사시스템", + "subtitle": "전시 기획부터 시공·관람까지 전 과정을 AI로 자동화합니다.", + "ctaPreReg": "관람 사전등록", + "ctaInquiry": "참가 문의", + "tracksAria": "트랙 분기", + "tracksTitle": "어떤 목적으로 방문하셨나요?", + "tracksSub": "목적에 맞는 트랙을 선택하세요.", + "card": { + "visitor": { + "label": "관람객", + "title": "행사 관람", + "desc": "행사 일정·사전등록·오시는 길", + "cta": "관람 트랙" + }, + "business": { + "label": "주최·참가", + "title": "전시 개최·참가", + "desc": "대관·자동견적·부스 신청·시공 시안", + "cta": "비즈니스 트랙" + }, + "agency": { + "label": "공사·협력사", + "title": "전시 시공 참여", + "desc": "등록업체·공사 옥션·작업신고", + "cta": "협력사 트랙" + } + }, + "eventsAria": "진행 중·예정 전시", + "eventsTitle": "진행 중 · 예정 전시", + "eventsSub": "지금 열리는 전시와 곧 열릴 전시를 확인하세요.", + "eventsMore": "전체 일정 보기" + }, + "visitor": { + "heroAria": "관람 안내 히어로", + "eyebrow": "관람객 안내", + "title": "전시 관람, 여기서 시작하세요", + "subtitle": "사전등록하고 더 빠르게 입장하세요. 관심 분야 알림도 받아보세요.", + "ctaPreReg": "사전등록", + "ctaTicket": "입장권 예매", + "eventsAria": "행사 일정", + "eventsTitle": "행사 일정", + "eventsSub": "진행 중·예정 전시를 확인하고 사전등록하세요.", + "guideAria": "방문 가이드", + "guideTitle": "방문 가이드", + "guideSub": "교통·주차·편의시설·접근성 정보를 한 곳에서.", + "guide": { + "transport": { + "title": "교통", + "desc": "GTX-A 킨텍스역 도보 3분·광역버스", + "link": "오시는 길" + }, + "parking": { + "title": "주차", + "desc": "실시간 주차 안내·요금·게이트", + "link": "주차 안내" + }, + "wayfinding": { + "title": "실내 길찾기", + "desc": "홀·부스까지 실내 경로 안내", + "link": "길찾기 열기" + }, + "amenities": { + "title": "편의시설", + "desc": "식음·수유실·물품보관·ATM", + "link": "편의시설 보기" + }, + "accessibility": { + "title": "접근성·편의", + "desc": "휠체어·수어통역 안내", + "link": "접근성 안내" + }, + "inquiry": { + "title": "고객문의", + "desc": "FAQ·연락처 안내", + "link": "문의하기" + } + }, + "noticeAria": "공지사항", + "noticeTitle": "공지사항", + "noticeSub": "최근 공지·알림을 확인하세요.", + "noticeEmpty": "등록된 공지가 없습니다.", + "aiWatermark": "AI 생성 예상 이미지", + "hero": { + "title": "무엇이든 물어보세요 — AI가 관람을 안내합니다", + "subtitle": "전시 일정·오시는 길·입장권·부스 위치를 대화로 한 번에" + }, + "aiTiles": { + "title": "AI가 도와드립니다", + "sub": "관람의 모든 순간을 AI가 함께합니다.", + "soon": "준비 중", + "assistant": { + "title": "AI 관람 도우미", + "desc": "무엇이든 물어보세요" + }, + "recommend": { + "title": "AI 전시 추천", + "desc": "관심사 맞춤 큐레이션" + }, + "wayfinding": { + "title": "AI 길찾기", + "desc": "실내 최적 동선" + }, + "schedule": { + "title": "AI 일정 도우미", + "desc": "나만의 관람 코스" + }, + "crowd": { + "title": "AI 혼잡·대기 안내", + "desc": "여유로운 시간 추천" + }, + "render": { + "title": "AI 시공 예상 이미지", + "desc": "부스 미리보기 (비즈니스 트랙)" + } + }, + "showcaseTitle": "진행 중 · 예정 전시", + "showcaseSub": "지금 열리는 전시와 곧 열릴 전시를 한눈에.", + "recommendTitle": "당신의 관심사에 맞는 전시", + "recommendSub": "관심 분야를 선택하면 AI가 맞춤 전시를 추천합니다.", + "recommendTag": "AI 추천", + "interests": { + "robot": "로봇·자동화", + "smartfactory": "스마트팩토리", + "healthcare": "헬스케어", + "eco": "친환경·에너지", + "mobility": "모빌리티", + "content": "콘텐츠·문화" + }, + "guideMore": "자세히 보기", + "journeyTitle": "관람은 이렇게 진행됩니다", + "journeySub": "사전등록부터 현장 입장까지 3단계로 간편하게.", + "journey": { + "register": { + "title": "사전등록", + "desc": "온라인으로 관람 정보를 등록하세요.", + "link": "전시 보기" + }, + "badge": { + "title": "배지·QR 발급", + "desc": "모바일 배지와 입장 QR을 받으세요.", + "link": "입장권 조회" + }, + "checkin": { + "title": "현장 체크인", + "desc": "입구에서 QR을 스캔하고 바로 입장하세요.", + "link": "로그인" + } + }, + "venueTitle": "킨텍스 전시장 소개", + "venueSub": "국내 최대 규모의 전시·컨벤션 센터.", + "venue": { + "halls": { + "label": "전시홀", + "value": "10개" + }, + "area": { + "label": "전시면적", + "value": "108,556㎡" + }, + "parking": { + "label": "주차", + "value": "7,500대" + }, + "access": { + "label": "교통", + "value": "GTX-A 도보 3분" + } + }, + "briefing": { + "title": "AI 전시·행사 기획 브리핑", + "sub": "올 한 해와 이번 달, AI가 개최 예정 전시를 먼저 정리해 드립니다.", + "viewYear": "연간 ({{year}})", + "viewMonth": "월간", + "aiSummary": "AI 요약", + "loading": "AI 요약 생성 중…", + "empty": "이 기간에 예정된 전시가 없습니다.", + "yearSummary": "{{year}}년에는 총 {{count}}건의 전시·행사가 예정되어 있으며, {{peak}}에 집중됩니다.", + "monthSummary": "이번 달은 {{count}}건의 전시가 열립니다 · 주말 방문을 추천합니다.", + "monthLabel": "{{month}}월", + "eventsCount": "{{count}}건", + "prevMonth": "이전 달", + "nextMonth": "다음 달" + } + }, + "business": { + "heroAria": "비즈니스 안내 히어로", + "eyebrow": "주최자·참가업체 안내", + "title": "전시 개최·참가, 온라인 신청 일원화", + "subtitle": "대관부터 부스 신청·시공까지 모든 절차를 온라인에서 처리하세요.", + "ctaApply": "신청·문의", + "ctaLogin": "로그인", + "ctaInquiry": "문의하기", + "valueAria": "가치 제안", + "valueTitle": "역할에 맞는 진입", + "valueSub": "주최자와 참가업체를 위한 기능을 안내합니다.", + "value": { + "organizer": { + "title": "주최자 · 홀 임대", + "desc": "대관 절차부터 홀 배정·플로어플랜까지 한 번에.", + "item": { + "rental": "대관 절차 안내", + "quote": "자동견적", + "floorplan": "홀 배정·플로어플랜", + "rate": "요금·시설 규격" + }, + "cta": "대관 문의·로그인" + }, + "exhibitor": { + "title": "참가업체 · 부스 신청", + "desc": "부스 신청·유틸리티부터 AI 시공 시안까지.", + "item": { + "apply": "부스 신청", + "utility": "유틸리티 신청", + "compliance": "규정 사전검증", + "render": "AI 시공 시안" + }, + "cta": "참가 신청·로그인" + } + }, + "processAria": "임대 절차", + "processTitle": "임대 절차", + "processSub": "문의부터 시공·검수까지 한눈에.", + "process": { + "inquiry": { + "title": "문의", + "desc": "대관 상담 접수" + }, + "quote": { + "title": "가견적", + "desc": "자동견적 산출" + }, + "contract": { + "title": "계약", + "desc": "계약 체결" + }, + "assign": { + "title": "홀 배정", + "desc": "홀·구획 배정" + }, + "booth": { + "title": "부스 신청", + "desc": "참가업체 부스·유틸리티" + }, + "inspect": { + "title": "시공·검수", + "desc": "시공 후 현장 검수" + } + }, + "rateAria": "요금·서류", + "rateTitle": "요금 · 서류 안내", + "rateSub": "부스 유형별 요율과 주요 서류를 안내합니다.", + "rate": { + "shell": { + "label": "조립부스", + "price": "기본형", + "desc": "기본 부스·기본 전기 포함" + }, + "space": { + "label": "독립부스", + "price": "공간형", + "desc": "자유 시공·구조계산서 필요" + }, + "premium": { + "label": "프리미엄", + "price": "특화형", + "desc": "프리미엄 위치·추가 유틸리티" + } + }, + "doc": { + "assign": { + "title": "배정신청서", + "desc": "홀 배정 신청 서식" + }, + "flame": { + "title": "방염 확인서", + "desc": "방염 처리 확인 서류" + }, + "structure": { + "title": "구조계산서", + "desc": "독립부스·리깅 구조 검토" + } + }, + "ctaBandAria": "로그인·문의", + "ctaBandText": "이미 계정이 있으신가요?" + }, + "agency": { + "heroAria": "협력사 안내 히어로", + "eyebrow": "공사·장치·협력업체 안내", + "title": "킨텍스 공식 등록업체로 전시 시공에 참여하세요", + "subtitle": "공사 옥션(역경매)으로 투명하게 수주하세요. 킨텍스만의 차별화된 방식입니다.", + "ctaLogin": "등록업체 로그인", + "ctaRegister": "등록 신청", + "ctaAuctionLogin": "로그인하고 옥션 응찰", + "ctaWorkReport": "작업신고 하기", + "registryAria": "등록업체 안내", + "registryTitle": "등록업체 안내", + "registrySub": "등록업체 739개사 · 14개 분류로 운영됩니다.", + "gateTitle": "미등록 업체는 전시 시공에 참여할 수 없습니다 (자체시공 불가)", + "gateBody": "전시 시공은 반드시 킨텍스 공식 등록업체를 통해야 합니다. 등록 절차를 확인하고 신청하세요.", + "reg": { + "apply": { + "title": "신청", + "desc": "등록 신청서 제출" + }, + "review": { + "title": "자격심사", + "desc": "자격·실적 심사" + }, + "register": { + "title": "등록", + "desc": "공식 등록업체 등재" + }, + "eligible": { + "title": "수주 자격", + "desc": "옥션 응찰·수주 가능" + } + }, + "auctionAria": "공사 옥션", + "auctionTitle": "진행 중 공사 옥션 (역경매)", + "auctionSub": "예산 범위 안에서 투명하게 경쟁 응찰하세요.", + "auctionEmptyTitle": "공개 옥션 공고는 로그인 후 확인하실 수 있습니다", + "auctionEmptyBody": "등록업체 로그인 시 진행 중인 공사 옥션 공고·예산·마감·응찰 현황을 확인하고 응찰할 수 있습니다.", + "safetyAria": "작업신고·안전 규정", + "safetyTitle": "작업신고 · 안전 규정", + "safetySub": "현장 작업 전 필수 절차와 규정을 확인하세요.", + "safety": { + "report": { + "title": "작업신고 절차", + "desc": "현장 작업 전 온라인 작업신고" + }, + "prohibited": { + "title": "금지작업·소음", + "desc": "금지작업·소음 한도·리깅 구조계산서" + }, + "docs": { + "title": "필수 서류", + "desc": "방염 확인서·보험 증서" + } + }, + "ctaBandAria": "등록업체 로그인", + "ctaBandText": "이미 등록된 업체이신가요?" + } + } +} diff --git a/src/frontend/src/i18n/locales/zh.json b/src/frontend/src/i18n/locales/zh.json new file mode 100644 index 0000000..be19c52 --- /dev/null +++ b/src/frontend/src/i18n/locales/zh.json @@ -0,0 +1,2530 @@ +{ + "common": { + "brand": "KINTEX", + "appSuffix": "AI展览·活动", + "actions": { + "prev": "上一步", + "next": "下一步", + "cancel": "取消", + "close": "关闭", + "home": "返回首页", + "viewMore": "查看详情", + "confirm": "确认" + }, + "states": { + "loading": "加载中…", + "empty": "暂无内容。" + }, + "aiWatermark": "AI 生成的预览图 — 实际施工效果可能不同", + "aiNotice": "AI 生成图像不可用于合同或审核文件 — 施工以图纸为准", + "weekday": { + "0": "日", + "1": "一", + "2": "二", + "3": "三", + "4": "四", + "5": "五", + "6": "六" + } + }, + "lang": { + "select": "选择语言" + }, + "shell": { + "menu": { + "home": "首页", + "groups": { + "ops": "展会运营", + "design": "设计·施工", + "visitor": "观众·营销", + "finance": "结算·分析", + "work": "通用业务", + "system": "系统管理" + }, + "items": { + "dashboard": "仪表板", + "exhibitors": "参展商管理", + "schedule": "展会日程", + "halls": "展厅分配", + "boothSales": "展位销售", + "operations": "现场运营", + "floorplan": "平面图工作室", + "documents": "文件·里程碑", + "auctions": "施工竞标", + "contractor": "中标展位", + "logistics": "进场·退场", + "visitors": "观众", + "checkin": "签到台", + "leads": "潜在客户", + "campaigns": "营销", + "sponsorship": "赞助", + "cms": "内容CMS", + "settlement": "结算", + "analytics": "经营分析", + "worklog": "工作日志", + "workSchedule": "日程", + "message": "便签", + "notice": "公告", + "meeting": "会议记录", + "report": "工作报告", + "approval": "审批", + "opinion": "意见收集", + "search": "综合搜索", + "appqr": "移动应用安装", + "admin": "管理仪表板", + "users": "用户管理", + "roles": "角色/权限", + "depts": "组织管理", + "companies": "公司管理", + "menus": "菜单管理", + "programs": "程序管理", + "roleMenus": "角色-菜单映射", + "codes": "公共代码", + "authPolicy": "认证策略", + "loginHistory": "登录历史", + "audit": "审计日志", + "errorLog": "错误日志", + "systemHealth": "系统状态", + "settings": "系统设置", + "mailConfig": "邮件设置", + "notifyConfig": "通知设置", + "tenants": "租户", + "rulesets": "规则集", + "slides": "登录幻灯片" + }, + "sections": { + "userOrg": "用户·组织", + "menuAuth": "菜单·代码", + "policyLog": "策略·日志", + "statusConfig": "状态·设置", + "masterEtc": "主数据·其他" + } + }, + "nav": { + "events": "展会", + "exhibit": "参展指南", + "visit": "参观指南", + "transport": "交通" + }, + "searchPlaceholder": "搜索展会", + "cta": { + "register": "观众预登记" + }, + "menuOpen": "打开菜单", + "menuClose": "关闭菜单", + "homeAria": "{{brand}} 首页", + "primaryMenu": "主菜单", + "mobileMenu": "移动菜单", + "footer": { + "brandDesc": "韩国最大规模的展览会议中心，连接商业与文化的创新。", + "quickTitle": "快速链接", + "quickSchedule": "展会日程", + "quickExhibit": "参展指南", + "quickDirections": "交通路线", + "quickSitemap": "网站地图", + "supportTitle": "客户支持", + "supportPrivacy": "隐私政策", + "supportTerms": "使用条款", + "supportContact": "联系我们", + "contactTitle": "联系方式", + "contactAddress": "京畿道高阳市一山西区KINTEX路217-60", + "contactTel": "总机 1899-1001", + "contactEmail": "exhibition@kintex.com", + "bottom": "© KINTEX. 版权所有。(10390) 217-60, Kintex-ro, Ilsanseo-gu, Goyang-si" + }, + "footerbar": { + "copyright": "© 2026 KINTEX. 版权所有。", + "systemOk": "系统正常", + "systemDown": "系统维护", + "support": "客户支持" + }, + "login": "登录" + }, + "home": { + "heroAria": "关于 KINTEX", + "eyebrow": "全球展览平台", + "heroTitleLine1": "连接世界的展会，", + "heroTitleEm": "KINTEX", + "heroLead": "在韩国最大规模的展览会议中心 KINTEX，体验商业与文化的全新创新。", + "ctaRegister": "观众预登记", + "ctaFacility": "查看设施指南", + "eventsAria": "正在进行及即将举办的展会", + "eventsTitle": "正在进行 · 即将举办", + "eventsSub": "了解 KINTEX 当前的重要资讯。", + "eventsMore": "查看全部日程", + "loading": "正在加载展会信息…", + "empty": "当前没有正在进行或即将举办的展会。", + "tagExhibition": "EXHIBITION", + "booth": "{{count}} 个展位", + "aiOptimized": "AI 优化", + "ongoing": "进行中", + "ended": "已结束", + "dday": "倒计时 {{n}} 天", + "ddayZero": "今日开幕", + "register": "预登记", + "hallTbd": "展厅待分配", + "transportAria": "交通路线", + "transportTitle": "交通路线", + "transportSub": "以更便捷的交通抵达 KINTEX。", + "gtxTitle": "GTX-A KINTEX 站正式开通", + "gtxDesc": "距 KINTEX 站步行3分钟", + "transit": "公共交通", + "transitDesc": "城际巴士及地铁", + "parking": "停车指南", + "parkingDesc": "可同时停放4,000辆", + "shuttle": "接驳巴士", + "shuttleDesc": "主要枢纽循环运行", + "mapAria": "KINTEX 位置地图", + "mapAddress": "高阳市一山西区KINTEX路217-60", + "mapPlace": "KINTEX 第1、2展馆", + "mapViewAria": "查看地图", + "pageAria": "主页", + "greeting": "您好，{{name}}", + "greetingGuest": "您好", + "viewAll": "查看全部", + "loadError": "加载失败", + "role": { + "organizer": "主办方", + "exhibitor": "参展商", + "contractor": "施工商", + "hallManager": "展馆经理", + "admin": "管理员" + }, + "kpi": { + "aria": "概要指标" + }, + "banner": { + "aria": "活动介绍横幅", + "prev": "上一张", + "next": "下一张", + "emptyTitle": "暂无横幅", + "emptyDesc": "管理员登记的活动横幅将显示在此处。" + }, + "showcase": { + "title": "进行中·即将举办的展会", + "all": "查看全部", + "prev": "上一个", + "next": "下一个", + "statusOngoing": "进行中", + "statusUpcoming": "即将举办", + "emptyTitle": "该期间暂无展会", + "emptyCta": "查看全部日程", + "tab": { + "ongoing": "进行中", + "thisMonth": "本月", + "nextMonth": "下月" + } + }, + "calendar": { + "title": "展会日程", + "prev": "上个月", + "next": "下个月", + "today": "今天", + "all": "全部", + "centerFilter": "展馆筛选", + "yearMonth": "{{y}}年{{m}}月", + "legendOngoing": "进行中", + "legendUpcoming": "即将举办", + "legendEnded": "已结束", + "more": "+{{n}}", + "moreTitle": "{{date}} 展会", + "popupEmpty": "当天没有展会", + "listTitle": "进行中·即将举办", + "listEmpty": "暂无即将举办的展会", + "listEmptyCta": "查看全部日程", + "loadError": "日程加载失败" + }, + "todo": { + "title": "我的待办", + "noDue": "无截止日期", + "emptyTitle": "全部完成", + "emptyDesc": "没有待处理的事项", + "emptyCta": "打开通知" + }, + "notice": { + "title": "公告", + "more": "更多", + "new": "新", + "pinned": "置顶", + "emptyTitle": "暂无公告", + "emptyCta": "查看全部公告" + }, + "quick": { + "title": "快捷操作", + "editor": "布局编辑器", + "invite": "邀请参展商", + "docs": "文件流程", + "settlement": "结算", + "notice": "撰写公告", + "search": "综合搜索" + }, + "activity": { + "title": "最近动态", + "emptyTitle": "暂无最近动态", + "emptyCta": "通知设置" + }, + "time": { + "justNow": "刚刚", + "minutes": "{{n}}分钟前", + "hours": "{{n}}小时前", + "days": "{{n}}天前" + }, + "workspace": { + "title": "我的活动", + "emptyTitle": "尚未参与任何活动", + "emptyDesc": "请确认邀请链接或邀请码", + "invite": "验证邀请码", + "codePh": "输入邀请码" + }, + "charts": { + "title": "展会图表", + "statusTitle": "活动状态", + "trendTitle": "月度趋势", + "centerTitle": "各展馆举办", + "monthSuffix": "月", + "empty": "暂无数据" + }, + "ai": { + "aria": "KINTEX AI 功能", + "title": "KINTEX AI", + "badge": "AI", + "subtitle": "从展位设计到施工预览、线索分析，全部由 AI 完成", + "askPh": "尽管提问 — 例如：本月营收？", + "askBtn": "提问", + "askAria": "询问 AI", + "tool": { + "layout": { + "title": "AI 展位布局工作室", + "desc": "自动生成 1·2·3 方案" + }, + "gallery": { + "title": "施工预览图库", + "desc": "Nano-Banana AI 渲染" + }, + "nlquery": { + "title": "自然语言查询", + "desc": "提问即得表格" + }, + "rules": { + "title": "规程 AI 聊天", + "desc": "基于规程作答" + }, + "leads": { + "title": "线索 AI 评分", + "desc": "自动分析优质线索" + } + } + }, + "prodEyebrow": "AI 展会自动化平台", + "prodTitle": "KINTEX AI 展会运营平台", + "prodTagline": "从展位设计到施工预览、结算，一站式完成。", + "ctaLogin": "登录", + "ctaPreReg": "预先登记", + "roleAria": "按角色介绍", + "roleTitle": "为每个角色量身定制的功能", + "roleSub": "为主办方、参展商、施工方与观众提供工具。", + "stepsAria": "核心功能", + "stepsTitle": "AI 赋能的展会运营", + "stepsSub": "从 AI 布局到施工预览、反向竞价、实时结算。" + }, + "detail": { + "tabs": { + "intro": "介绍", + "program": "议程", + "speakers": "演讲嘉宾", + "exhibitors": "参展商", + "transport": "交通", + "faq": "常见问题" + }, + "eyebrow": "KINTEX Exhibition", + "loadingTitle": "正在加载展会信息…", + "fallbackTitle": "展会详情", + "dateTbd": "日期确认中", + "placeTbd": "展厅待分配", + "lead": "查看 KINTEX 举办的展会信息并进行预登记。", + "factDate": "日期", + "factPlace": "地点", + "ctaRegister": "立即预登记", + "ctaFloorplan": "查看展馆平面图", + "navAria": "展会详情导航", + "shareAria": "分享", + "share": "分享", + "copyLink": "复制链接", + "overviewAria": "展会概览", + "overviewTitle": "展会概览", + "overviewLead": "智能工厂韩国 2026 是新一代制造技术的集大成。在同一场地体验结合 AI、机器人、物联网和数字孪生技术的最新解决方案，全球500余家领先企业参展。", + "statBooth": "参展展位", + "statVisitors": "预计参观人数", + "statVisitorsValue": "30,000+", + "themesTitle": "主要展示主题", + "theme1Title": "AI 与自主机器人", + "theme1Desc": "能够自主学习与判断的智能机器人解决方案", + "theme2Title": "数字孪生与物联网", + "theme2Desc": "虚拟世界与现实制造现场的实时同步", + "theme3Title": "碳中和智能制造", + "theme3Desc": "最大化能源效率的环保工艺技术", + "programAria": "议程安排", + "programTitle": "议程安排", + "day1": "9月5日 (Day 1)", + "day2": "9月6日 (Day 2)", + "agenda1Title": "制造业的未来：AI 引领的生产力革命", + "agenda1Desc": "全球 AI 学者提出的2030制造战略与实际实施案例分析", + "agenda1Room": "主会议厅", + "agenda2Title": "工业5G与边缘计算的结合", + "agenda2Desc": "通过无延迟数据传输实现实时工艺控制技术演示", + "agenda2Room": "研讨室 A", + "agenda3Title": "全球采购商配对日", + "agenda3Desc": "海外优质企业与国内供应商之间的一对一商务洽谈", + "agenda3Room": "商务休息室", + "speakersTitle": "主要演讲嘉宾", + "speaker1Role": "AI 研究所所长 | TechCorp", + "speaker2Role": "CTO | Automatech", + "speaker3Role": "机器人工程学讲席教授 | Korea Univ.", + "speaker4Role": "Global VP | Digitron", + "profileAria": "{{name}} 简介", + "faqAria": "常见问题", + "faqTitle": "常见问题", + "faq1Q": "如何进行预登记？", + "faq1A": "点击顶部\"立即预登记\"按钮，选择类型并填写信息后，即可获得移动徽章。", + "faq2Q": "是否收取门票？", + "faq2A": "普通观众预登记后免费。现场登记可能收费。", + "faq3Q": "是否提供停车位？", + "faq3A": "KINTEX 第1、2展馆最多可同时停放4,000辆车。", + "fabCta": "前往预登记" + }, + "register": { + "steps": { + "type": "类型", + "info": "信息", + "interest": "兴趣领域", + "done": "完成" + }, + "stepsAria": "预登记步骤", + "type": { + "general": "普通观众", + "generalDesc": "可参观展览及公开会议的普通访客", + "buyer": "采购商", + "buyerDesc": "用于B2B配对及商务洽谈的企业负责人", + "vip": "VIP", + "vipDesc": "享有专属贵宾休息室及全场次入场的受邀嘉宾" + }, + "step0Title": "选择参加类型", + "step0Sub": "请选择您参加 KINTEX 展会的资格。", + "typeGroupAria": "参加类型", + "step1Title": "填写基本信息", + "step1Sub": "请填写用于联系及发放通行证的信息。", + "name": "姓名", + "namePh": "请输入姓名", + "phone": "联系电话 (手机)", + "email": "电子邮箱", + "emailPh": "example@domain.com", + "org": "所属 (公司/机构)", + "orgPh": "公司或学校名称", + "step2Title": "选择兴趣领域", + "step2Sub": "选择您的兴趣领域，我们将为您提供定制化信息。", + "interestsAria": "兴趣领域", + "interest": { + "ai": "AI 解决方案", + "factory": "智能工厂", + "robotics": "机器人", + "bigdata": "大数据", + "cloud": "云计算" + }, + "consentPrivacy": "同意收集及使用个人信息", + "required": "(必填)", + "consentMarketing": "同意接收营销信息 (选填)", + "consentMore": "查看详情", + "errPrivacy": "请勾选同意收集及使用个人信息 (必填)。", + "errName": "请输入姓名。", + "errEvent": "无法确认展会信息。", + "doneTitle": "预登记已受理", + "doneSub": "{{name}}，您的预登记已完成。请在入口自助终端使用移动徽章。", + "visitorDefault": "观众", + "badgeAria": "移动徽章预览", + "badgeName": "张三", + "badgeCodeLabel": "Badge Code", + "doneNote": "在入口自助终端扫描二维码即可打印实体徽章。", + "regNo": "登记编号：{{id}}", + "submitting": "登记中…", + "submit": "立即登记", + "eventBrowse": "浏览展会", + "floorplan": "查看展馆平面图" + }, + "floorplan": { + "sideAria": "展位搜索及列表", + "filtersTitle": "行业 · 区域 · 关键词", + "searchPh": "搜索参展商或展位号", + "searchAria": "搜索展位", + "typeFilter": "展位类型筛选", + "hallSelect": "选择展馆", + "allHalls": "全部展厅", + "listAria": "展位列表 (非可视替代)", + "loading": "正在加载展位信息…", + "searchResults": "搜索结果 ({{count}})", + "noMatch": "没有匹配的展位。", + "reservedBooth": "已预订展位", + "availableBooth": "可预订", + "type": { + "assembled": "标准展位", + "independent": "光地展位", + "corner": "角落展位", + "island": "岛型展位", + "default": "展位" + }, + "stageAria": "交互式展厅地图", + "boothLayoutAria": "展位布局", + "boothAria": "展位 {{no}} {{name}}", + "loadFail": "无法加载平面图。", + "noBooth": "没有可显示的展位。", + "popInfoAria": "{{name}} 信息", + "popDetail": "展位详情", + "directions": "路线导航", + "zoomIn": "放大", + "zoomOut": "缩小", + "reset": "重置", + "myLocation": "我的位置", + "legendAria": "图例", + "legendAvailable": "可售 (Available)", + "legendReserved": "已订 (Reserved)", + "legendPublic": "公共区 (Public)" + }, + "inquiry": { + "heroAria": "参展咨询", + "heroTitle": "参展咨询", + "heroLead": "与 KINTEX 一起将贵公司的业务拓展至全球市场。专业顾问将为您提供最佳展位方案。", + "cta": "参展咨询", + "guideAria": "参展指南", + "guideTitle": "参展指南", + "booth1Tier": "Entry Tier", + "booth1Title": "标准展位 (Shell Scheme)", + "booth1Desc": "提供基本墙体和地板的最经济选择。推荐给中小型企业。", + "booth1Price": "₩ 2,500,000 / 单位", + "booth2Tier": "Design Freedom", + "booth2Title": "光地展位 (Raw Space)", + "booth2Desc": "仅提供空间，可根据品牌进行自由设计。", + "booth2Price": "₩ 2,000,000 / 单位", + "booth3Tier": "Full Solution", + "booth3Title": "高级 (Premium)", + "booth3Desc": "包含 AI 优化动线设计及定制品牌套餐的一站式解决方案。", + "booth3Price": "另行咨询", + "boothExampleAria": "{{title}} 示例", + "formAria": "咨询", + "formTitle": "咨询", + "formSub": "请留下有关参展申请及展会的疑问。负责人将在工作日24小时内回复。", + "contactPhone": "电话咨询", + "contactPhoneVal": "+82-31-810-8114", + "contactEmail": "邮件咨询", + "contactEmailVal": "exhibit@kintex.com", + "contactLoc": "位置指南", + "contactLocVal": "京畿道高阳市一山西区KINTEX路217-60", + "loginHintQ": "已有账户？", + "loginHintA": "登录以快速咨询", + "company": "公司名称", + "companyPh": "请输入公司名称", + "name": "负责人", + "namePh": "请输入姓名", + "contact": "联系方式 (邮箱或电话)", + "contactPh": "请输入可联系的信息", + "scale": "预计规模", + "scaleSelect": "请选择", + "scale1": "1个展位 (9sqm)", + "scale2": "2-4个展位 (18-36sqm)", + "scale3": "5-9个展位 (45-81sqm)", + "scale4": "10个以上", + "hall": "意向展厅", + "hallSelect": "选择展厅", + "message": "咨询内容", + "messagePh": "如有参展目的或特殊要求，请留言。", + "agree": "我同意收集及使用个人信息。", + "required": "(必填)", + "errAgree": "请同意收集及使用个人信息。", + "errName": "请输入负责人姓名。", + "errContact": "请输入可联系的邮箱或电话号码。", + "errMessage": "请输入咨询内容。", + "success": "咨询已受理。受理编号 {{no}}", + "submitting": "发送中…", + "submit": "发送咨询" + }, + "microsite": { + "introAria": "关于 {{brand}}", + "eyebrow": "KINTEX Exhibitor", + "ctaMeeting": "预约会议", + "ctaBrochure": "企业介绍手册", + "defaultBrand": "翰光机器人有限公司", + "defaultTagline": "驱动未来的智能机器人解决方案", + "defaultBoothLoc": "展位 A-102 · 7号厅", + "boothUndetermined": "待定", + "boothPrefix": "展位", + "boothLocLabel": "KINTEX 展馆展位位置", + "viewMap": "查看展馆平面图", + "productsAria": "核心产品线", + "productsTitle": "核心产品线", + "productsSub": "您可在现场见到的代表性产品。", + "product": "产品", + "product1Tag": "Industrial COBOT", + "product1Title": "HR-A1 协作机器人", + "product1Desc": "兼具高精度与安全性的工业协作机器人。以人机协作为最优先设计。", + "product2Tag": "Smart Logistics", + "product2Title": "HR-M3 自动驾驶 AMR", + "product2Desc": "最大化智能工厂物流效率的自主移动机器人。实时避障与路径优化。", + "product3Tag": "AI Vision", + "product3Title": "HR-Q Vision 扫描仪", + "product3Desc": "基于 AI 深度学习的完美质量检测。不放过任何微小缺陷的超精密3D扫描。", + "productImgAria": "{{title}} 图片", + "previewAria": "展位预览", + "previewTitle": "展位预览", + "previewSub": "由 AI 生成的预期展位图像。实际施工结果可能有所不同。", + "galleryMain": "主展示区", + "galleryVip": "VIP 休息室", + "galleryAria": "{{label}} AI 生成的预期图像", + "watermark": "AI 生成的预期图像 — 实际施工结果可能不同", + "meetingAria": "预约会议", + "ctaBanner": "我们将为您的业务提供量身定制的机器人解决方案。", + "ctaBannerBtn": "立即预约会议" + }, + "ticket": { + "viewPurchase": "购票", + "viewManage": "查询 · 取消", + "viewSwitchAria": "切换票务视图", + "type": { + "general": "普通票", + "generalDesc": "普通观众及个人参加者", + "generalPrice": "₩0 (预登记优惠价)", + "buyer": "采购商票", + "buyerDesc": "仅限相关企业从业者及采购商", + "buyerPrice": "免费 · 需资格审核", + "group": "团体票 (10张以上)", + "groupDesc": "仅限企业团体参观", + "groupPrice": "₩9,000 / 人", + "vip": "VIP 票", + "vipDesc": "展会通票 + VIP 休息室使用权", + "vipPrice": "₩50,000" + }, + "steps": { + "s1": "展会·票种", + "s2": "购票人", + "s3": "支付", + "s4": "完成" + }, + "stepsAria": "预订步骤", + "bannerTitle": "智能工厂韩国 2026", + "bannerDate": "2026.09.05 – 09.08", + "bannerPlace": "第2展馆 7号厅", + "posterAria": "展会海报", + "loginBanner": "登录后将自动保存预订记录。", + "loginLink": "登录", + "sample": "示例数据", + "h2Type": "选择票种", + "aiOptimized": "AI OPTIMIZED", + "off10": "10% OFF", + "soldout": "售罄", + "qtyAria": "{{name}} 数量", + "decrease": "减少", + "increase": "增加", + "h2Booker": "购票人信息", + "bookerName": "姓名", + "bookerNamePh": "姓名", + "bookerTel": "联系电话", + "bookerEmail": "邮箱 (票据发送)", + "consentPrivacy": "同意收集及使用个人信息", + "required": "(必填)", + "consentMarketing": "同意接收营销信息 (选填)", + "h2Pay": "支付方式", + "payCard": "信用卡", + "payEasy": "快捷支付", + "payBank": "银行转账", + "payGroupAria": "支付方式", + "pgNote": "支付在 PG 公司的安全页面进行，卡片信息不会存储在本网站。所有交易均受256位SSL加密保护。(PG 未接入 — 演示流程)", + "doneTitle": "预订已受理", + "doneNo": "KTX-2026-0000-DEMO", + "doneSub": "我们将通过邮件发送票据。(正式服务接入时) 共 {{count}} 张 · 支付 {{total}}", + "sampleReady": "示例数据 · 支付准备中", + "walletBtn": "打开移动票夹", + "manageBtn": "查询 / 取消预订", + "summaryAria": "预订明细摘要", + "summaryTitle": "预订明细摘要", + "summaryCount": "所选张数", + "count": "{{n}} 张", + "subtotal": "小计", + "discount": "优惠", + "finalTotal": "最终支付金额", + "nextStep": "进入下一步", + "freeDone": "完成免费预订", + "pay": "支付", + "payProceed": "继续支付", + "customerCenter": "客服中心 1588-0000 (工作日 09–18时)", + "manageTitle": "查询 · 取消预订", + "manageSub": "您可以查询并取消非会员预订记录。", + "lookNo": "预订编号", + "lookNoPh": "KTX-YYYY-XXXXXX", + "lookEmail": "邮箱", + "lookEmailPh": "example@email.com", + "lookBtn": "查询", + "loginToView": "登录查看我的预订", + "notLooked": "请输入预订编号和邮箱进行查询。(示例：输入任意值后查询)", + "booked": "预订完成", + "bookNoLabel": "预订编号", + "paidAt": "支付时间", + "colType": "票种", + "colQty": "数量", + "colAmount": "金额", + "bookerInfo": "购票人信息", + "totalPaid": "总支付金额", + "refundTitle": "取消·退款政策", + "refundD7": "参观前7天 (D-7)", + "refundD7Val": "100% 退款", + "refundD3": "参观前3天 (D-3)", + "refundD3Val": "50% 退款", + "refundDay": "参观当天", + "refundDayVal": "0% (不可退款)", + "refundEst": "当前预计退款额", + "cancelBooking": "取消预订", + "refundNote": "退款将通过 PG 公司按原支付方式处理。", + "aiHelper": "AI 结算助手", + "aiHelperDesc": "信用卡分期付款的订单，取消后通过卡公司恢复额度约需3–5个工作日。", + "cancelModalAria": "确认取消预订", + "cancelModalTitle": "确定取消此预订吗？", + "cancelModalDesc": "按 D-15 标准适用100%退款(₩40,000)。退款将通过 PG 公司按原支付方式处理，正式服务接入时进行实际退款。", + "cancelConfirm": "取消" + }, + "login": { + "title": "登录", + "sub": "欢迎使用 KINTEX 展会管理系统。", + "email": "电子邮箱", + "emailPh": "name@company.com", + "password": "密码", + "remember": "记住账号", + "forgot": "找回密码", + "errResponse": "无法处理登录响应。请重试。", + "errLocked": "登录尝试暂时受限。请稍后重试。", + "errNotImpl": "登录服务正在准备中。请稍后重试。", + "errGeneric": "登录时发生错误。", + "submitting": "登录中…", + "submit": "登录", + "signupPrompt": "还没有账户？", + "signup": "注册", + "or": "或", + "internalLogin": "使用 KINTEX 内部账户登录", + "inviteLink": "使用邀请码加入 →", + "copyright": "© 2026 KINTEX. 版权所有。", + "wsTitle": "展会工作区", + "wsSub": "请选择您正在参与的展会。", + "wsEmptyTitle": "尚未加入任何展会", + "wsEmptyDesc": "请确认邀请链接或使用邀请码加入。", + "wsInvite": "使用邀请码加入", + "prodTagline": "KINTEX AI 展会运营平台" + }, + "signup": { + "title": "注册", + "desc": "创建 KINTEX AI 展会管理账户。公司名称及邀请码为选填项。", + "email": "电子邮箱", + "emailPh": "name@company.com", + "name": "姓名", + "namePh": "张三", + "password": "密码", + "passwordPh": "8位以上", + "password2": "确认密码", + "password2Ph": "再次输入密码", + "company": "公司名称 (选填)", + "companyPh": "KINTEX 有限公司", + "invite": "邀请码 (选填)", + "invitePh": "INV-XXXX", + "mismatch": "两次密码不一致。", + "errNotImpl": "注册服务正在准备中。请稍后重试。", + "errConflict": "该邮箱已注册。", + "errGeneric": "注册时发生错误。", + "noticePending": "账户已创建。管理员审核后即可登录。", + "noticeActive": "账户已创建。现在请登录。", + "doneTitle": "注册完成", + "goLogin": "前往登录", + "cancel": "取消", + "submitting": "注册中…", + "submit": "注册" + }, + "forgot": { + "requestTitle": "找回密码", + "requestDesc": "我们将向您注册的邮箱发送验证码。若账户存在，将发送邮件。", + "email": "电子邮箱", + "emailPh": "name@company.com", + "sending": "发送中…", + "requestBtn": "获取验证码", + "resetTitle": "重置密码", + "resetDesc": "请输入发送至 <0>{{email}} 的验证码及新密码。", + "code": "验证码", + "codePh": "邮件收到的验证码", + "newpw": "新密码", + "newpwPh": "8位以上", + "prev": "上一步", + "changing": "更改中…", + "changeBtn": "更改密码", + "doneTitle": "密码更改完成", + "doneDesc": "请使用新密码登录。", + "goLogin": "前往登录", + "errInvalid": "验证码不正确或已过期。", + "errNotImpl": "密码重置服务正在准备中。请稍后重试。", + "errRequest": "请求时发生错误。", + "errReset": "重置时发生错误。", + "cancel": "取消" + }, + "dashboard": { + "countdown": "开展 D-{{n}}", + "degradedTag": "离线 — 示例", + "degradedMsg": "无法连接汇总接口，正在显示演示示例数据。", + "loadError": "无法加载仪表盘汇总数据。", + "timelineAria": "里程碑时间轴", + "milestoneEmptyTitle": "暂无派生日程", + "milestoneEmptyDesc": "确认活动开始日期后将显示里程碑。", + "mstate": { + "done": "已完成", + "current": "进行中", + "upcoming": "待进行" + }, + "kpisAria": "核心指标", + "kpiEmpty": "暂无汇总指标", + "exhibitorStatus": "参展商现状", + "sampleTag": "示例", + "exhibitorEmptyTitle": "暂无参展商展位", + "exhibitorEmptyDesc": "登记展位布局与设计后将在此显示。", + "colBoothNo": "展位号", + "colCompany": "公司名称", + "colStatus": "设计状态", + "feedAria": "通知动态", + "feedTitle": "通知", + "feedEmpty": "暂无新通知", + "aerialAria": "展厅鸟瞰", + "aerialTitle": "展厅鸟瞰", + "aerialShot": "S7 展厅鸟瞰", + "aerialAlt": "展厅鸟瞰预览图" + }, + "schedule": { + "title": "展览日程", + "subtitle": "KINTEX 全展厅活动日程管理与监控 — {{n}} 项", + "crawlFallback": "(kintex.com 采集回退)", + "yearFilter": "年份筛选", + "allYears": "全部年份", + "yearN": "{{y}}年", + "hallFilter": "展厅筛选", + "allHalls": "全部展厅 (1-10)", + "hall1": "第一展馆 (1-5 厅)", + "hall2": "第二展馆 (6-10 厅)", + "catFilter": "类别筛选", + "allCats": "全部类别", + "statusFilter": "状态筛选", + "allStatus": "全部状态", + "cat": { + "exhibition": "展览", + "culture": "文化艺术", + "trade": "贸易产业", + "tech": "技术" + }, + "status": { + "ongoing": "进行中", + "upcoming": "待举办", + "ended": "已结束" + }, + "catExhibit": "{{cat}}展", + "apiWait": "等待活动接口 (采集数据)", + "viewSwitch": "切换视图", + "viewList": "列表", + "viewCalendar": "日历", + "listLoading": "正在加载活动列表", + "listAria": "活动列表", + "loadError": "无法加载展览日程。", + "count": "{{n}} 项", + "emptyTitle": "暂无已登记活动", + "emptyDesc": "请调整筛选条件或创建新活动。", + "newEvent": "新建活动", + "period": "期间", + "assignedHall": "分配展厅", + "estVisitors": "预计人数", + "editDetail": "编辑详情", + "viewLogistics": "查看进场/物流", + "monthCal": "月历", + "prev": "上一个", + "next": "下一个", + "today": "今天", + "yearMonth": "{{y}}年{{m}}月", + "miniCal": "迷你日历", + "prevMonth": "上个月", + "nextMonth": "下个月", + "offlineSample": "离线 — 示例", + "day": "{{d}}日", + "dayHasEvent": "{{d}}日 (有活动)", + "hallUtil": "展厅使用率", + "hallUtilMonth": "展厅使用率 ({{y}}年{{m}}月)", + "availTitle": "展厅可用情况", + "availMonth": "展厅可用情况 ({{y}}年{{m}}月)", + "availHalls": "共 {{n}} 个展厅", + "availFreeDays": "可用 {{free}}/{{total}} 天", + "availOpen": "可用", + "availFull": "已满" + }, + "boothsales": { + "title": "展位销售", + "subtitleManager": "管理展位销售库存 — 状态、价格、封锁及结算联动", + "subtitleExhibitor": "选择可用展位，先占位再确认购买", + "noEventTitle": "请选择展会", + "noEventDesc": "未选择用于展位销售的展会。", + "summaryAria": "展位销售状态汇总", + "stAvailable": "可售", + "stHeld": "占位中", + "stSold": "已售", + "stBlocked": "已封锁", + "rate": "租金费率 {{rate}} 韩元/㎡ ({{ver}})", + "hallFilter": "展厅筛选", + "allHalls": "全部展厅", + "loadError": "无法加载展位销售库存。", + "emptyTitle": "没有可显示的展位", + "emptyManage": "该展会的布局中未登记展位。", + "emptyExhibitor": "当前没有可选择的展位。", + "status": { + "available": "可售", + "held": "占位中", + "sold": "已售", + "blocked": "已封锁" + }, + "wonUnit": " 韩元", + "hallLabel": "展厅", + "areaLabel": "面积", + "soldTo": "购买方：{{c}}", + "hold": "占位", + "purchase": "确认购买", + "release": "取消占位", + "setPrice": "设置价格", + "block": "封锁", + "unblock": "解除封锁", + "settle": "生成账单", + "settling": "生成中…", + "heldToast": "已占位。请在到期前确认购买。", + "purchasedToast": "购买已确认。", + "releasedToast": "已取消占位。", + "blockToast": "展位状态已更新。", + "priceToast": "销售价格已更新。", + "settleToast": "账单生成完成 — 新增 {{created}} 条，保留 {{skipped}} 条。", + "settleFail": "生成账单失败（请检查权限）。", + "holdConflict": "该展位已被他人占位或已售/已封锁。", + "purchaseConflict": "占位已过期或该展位已被他人占用。", + "blockConflict": "已售展位无法封锁。", + "actionFail": "无法处理请求。", + "pricePrompt": "请输入销售价格（韩元）。留空则恢复为面积×费率自动计算。", + "priceInvalid": "请输入不小于 0 的金额。" + }, + "settlement": { + "title": "结算·付款", + "subtitle": "管理参展商的账单与收款状况", + "generate": "生成账单", + "generating": "生成中…", + "noEventTitle": "请选择活动", + "noEventDesc": "尚未指定要查询结算状况的活动。", + "genDone": "账单生成完成 — 新增 {{created}} 项，保留 {{skipped}} 项。", + "genError": "账单生成失败。请检查权限或目标数据。", + "dashError": "无法加载结算汇总数据。", + "kpisAria": "结算核心指标", + "kpiBilled": "总账单额", + "kpiCollected": "收款额", + "kpiOutstanding": "未收款", + "kpiOverdue": "逾期账单", + "count": "{{n}} 项", + "collectionRate": "收款率 {{rate}}%", + "outstandingSub": "未收余额", + "overdueSub": "已过缴款期限", + "distTitle": "账单状态分布", + "distEmpty": "暂无汇总账单", + "listTitle": "账单列表", + "invoices": "账单", + "statusFilter": "状态筛选", + "status": { + "all": "全部", + "pending": "未开具", + "invoiced": "已开具", + "paid": "已付清", + "overdue": "逾期", + "cancelled": "已取消" + }, + "listError": "无法加载账单列表。", + "emptyTitle": "暂无账单", + "emptyManage": "请使用上方的生成账单，按参展商汇总账单。", + "emptyView": "尚未开具任何账单。", + "colNo": "账单编号", + "colExhibitor": "参展商", + "colBilled": "账单额", + "colPaid": "收款", + "colOutstanding": "未收", + "colDue": "缴款期限", + "colStatus": "状态", + "detail": "详情", + "prev": "上一页", + "next": "下一页", + "pageInfo": "{{page}} / {{total}} · 共 {{cnt}} 项", + "modalAria": "账单详情", + "invoice": "账单", + "close": "关闭", + "detailError": "无法加载账单详情。", + "liItem": "项目", + "liQty": "数量", + "liUnit": "单价", + "liAmount": "金额", + "noLines": "无明细项", + "supplyAmount": "供货金额", + "vat": "增值税(10%)", + "grandTotal": "账单总额", + "paidOutstanding": "收款 / 未收", + "payHistory": "收款记录", + "noPayments": "暂无收款记录。", + "won": "{{v}}韩元", + "issue": "开具账单", + "issuing": "开具中…", + "payAmount": "收款金额", + "payAmountPh": "收款金额(韩元)", + "payMethod": "收款方式", + "methodTransfer": "银行转账", + "methodCard": "刷卡", + "methodOther": "其他", + "memo": "备注", + "memoPh": "备注(可选)", + "recordPay": "记录收款", + "recording": "记录中…", + "payFail": "记录收款失败。请检查金额(不超过总额)和权限。", + "errPositive": "请输入大于 0 的金额。", + "errExceed": "不能超过未收余额。", + "pgNote": "实际付款委托外部支付网关处理。本页面仅用于记录收款确认。", + "managerOnly": "仅主办方/展厅经理可记录或开具收款。", + "colCategory": "类型", + "catRental": "租赁·公用", + "catAuctionFee": "拍卖手续费", + "reportTitle": "结算报告", + "reportShow": "查看报告", + "reportHide": "关闭", + "reportHint": "按类别/状态汇总合计、收款率与未收，并支持CSV导出。", + "reportError": "无法加载报告。", + "reportCsv": "下载CSV", + "reportByCategory": "按类别合计", + "reportByStatus": "按状态合计", + "reportEmpty": "没有可汇总的账单。", + "reportNote": "合计不含已取消账单。金额以服务器计算为准。", + "reportRate": "收款率", + "reportCount": "数量", + "taxTitle": "税务发票", + "taxNo": "发票编号", + "taxSupplier": "供应方", + "taxBuyer": "受票方", + "taxItem": "项目", + "taxNone": "尚未开具税务发票。", + "taxIssue": "开具税务发票", + "taxIssuing": "开具中…", + "taxIssueFail": "开具税务发票失败。", + "cancelledNote": "该账单已取消。", + "cancelInvoice": "取消账单", + "refundPreview": "退款测算预览", + "refundError": "无法加载退款测算。", + "refundBracket": "适用区间", + "refundRate": "退款比例", + "refundBase": "基准额(已付)", + "refundAmount": "退款额", + "forfeitAmount": "扣除·违约金", + "refundManual": "因开展日未确定等无法自动测算 — 需财务人工审核。", + "cancelReason": "取消原因", + "cancelReasonPh": "取消原因(可选)", + "cancelAbort": "中止", + "cancelConfirm": "确认取消", + "cancelling": "处理中…", + "cancelFail": "取消账单失败。" + }, + "hallassign": { + "title": "展厅分配 · 自动报价", + "subtitle": "展厅×期间分配现状与基于费率规则集的即时报价(M1)。", + "start": "开始", + "end": "结束", + "newAssign": "新分配", + "board": "分配看板", + "boardHint": "重叠的分配将显示为冲突。", + "forbiddenTitle": "展厅经理专用看板", + "forbiddenDesc": "分配现状查询仅限 KINTEX 展厅经理账户。自动报价请在下方使用。", + "noHalls": "暂无展厅主数据。", + "noAssign": "无分配", + "release": "解除分配", + "releaseConfirm": "解除 {{event}} 的 {{hall}} 分配吗？", + "assignedToast": "展厅已分配。", + "releasedToast": "分配已解除。", + "releaseFail": "解除失败(请检查权限)。", + "conflictErr": "所选展厅·期间与其他活动重叠。", + "assignFail": "分配失败。", + "pickEventHall": "请选择活动和展厅。", + "modalTitle": "展厅分配", + "close": "关闭", + "event": "活动", + "pickEvent": "选择活动…", + "hall": "展厅", + "pickHall": "选择展厅…", + "occupyStart": "占用开始", + "occupyEnd": "占用结束", + "primary": "主分配展厅(primary)", + "note": "备注", + "optional": "可选输入", + "cancel": "取消", + "assign": "分配", + "assigning": "分配中…", + "autoQuote": "自动报价", + "quoteHint": "按费率规则集 · 最终金额以 KINTEX 确定为准", + "startDate": "开始日期", + "endDate": "结束日期", + "boothSize": "展位规模(可选)", + "countPh": "数量", + "calcQuote": "计算报价", + "calculating": "计算中…", + "quoteFail": "报价计算失败。", + "quoteReq": "请输入展厅·开始日期·结束日期。", + "qItem": "项目", + "qBasis": "计算依据", + "qAmount": "金额", + "rentalSubtotal": "租金小计", + "rentalTotal": "租金合计 ({{days}}天)", + "deposit": "管理费押金(另计)", + "ruleset": "(规则集 {{v}})", + "openDetail": "打开 {{event}} 分配详情", + "detailTitle": "分配详情", + "edit": "修改", + "dHall": "展厅", + "dPeriod": "占用期间", + "dStatus": "状态", + "dNote": "备注", + "primaryTag": "主展厅", + "dConflict": "冲突情况", + "dNoConflict": "没有重叠的分配。", + "dQuote": "自动报价摘要", + "dQuoteNoPeriod": "无占用期间，无法计算报价。", + "dQuoteFail": "无法加载报价。" + }, + "ai": { + "console": { + "title": "AI 控制台", + "subtitle": "用自然语言查询数据并咨询展会规定。结果仅供参考，并标注依据。", + "badge": "仅供参考", + "tabsAria": "AI 控制台标签", + "tabNlquery": "自然语言查询", + "tabRules": "规定聊天机器人" + }, + "common": { + "running": "执行中…", + "provClaude": "Claude 回复", + "provOllama": "Ollama 回复", + "provRules": "基于规定原文", + "provNone": "无回复", + "unavailable": "AI 功能暂时不可用，请稍后重试。", + "invalid": "该查询违反安全规则，无法执行。", + "forbidden": "您无权使用此功能。", + "error": "处理请求时发生错误。" + }, + "nlquery": { + "placeholder": "例如：显示状态为 active 的活动列表", + "inputAria": "自然语言查询问题", + "run": "查询", + "guardNote": "仅执行只读 SELECT，不查询个人信息列。最多 200 行。", + "rowCount": "{{n}} 行", + "showSql": "查看生成的 SQL", + "hideSql": "隐藏生成的 SQL", + "sqlAria": "生成的 SQL", + "emptyTitle": "无结果", + "emptyDesc": "没有符合条件的数据。请更换问题后重试。" + }, + "rules": { + "placeholder": "例如：装置物的最大高度是多少？", + "inputAria": "规定问题", + "run": "提问", + "groundNote": "回答以规定与费率规则集为依据；若无依据将如实告知。", + "citations": "依据规定", + "notFound": "在规定中未找到", + "degraded": "规定原文摘要（AI 不可用）" + }, + "assistant": { + "label": "AI 助手", + "inputAria": "向参观助手提问", + "sendAria": "发送问题", + "chipsLabel": "常见问题", + "chip1": "这周末有机器人展吗？", + "chip2": "KINTEX 停车在哪里？", + "chip3": "推荐适合家庭参观的展览", + "chip4": "如何预先登记？", + "chip5": "乘 GTX-A 需要多久？", + "thinking": "正在生成回答…", + "error": "无法获取回答，请重试。", + "retry": "重试", + "degraded": "AI 助手维护中 — 以已存数据检索结果作答", + "providerAi": "AI 回答", + "notFound": "未找到相关信息 — 请查看完整日程与指南。", + "cardEventsTitle": "相关展览", + "cardTransportTitle": "交通路线", + "cardGuideTitle": "参观须知", + "followupLabel": "继续提问", + "followup1": "是免费的吗？", + "followup2": "在哪里停车？", + "followup3": "如何预先登记", + "citations": "来源", + "register": "预先登记", + "disclaimer": "AI 生成的回答 — 准确信息请以官方通知为准。" + } + }, + "analytics": { + "title": "经营分析", + "subtitle": "KINTEX 运营盈利能力 · 参展商洞察", + "perspective": "分析视角", + "operator": "运营方", + "exhibitor": "参展商", + "periodAria": "分析期间", + "periodEvent": "本次活动", + "periodD90": "最近 90 天", + "periodAnnual": "年度", + "exportPdf": "导出 PDF", + "exportExcel": "导出 Excel", + "noEventTitle": "请选择活动", + "noEventDesc": "尚未指定要分析的活动。", + "offlineSample": "离线 — 示例", + "degradedMsg": "无法连接汇总接口，正在显示演示示例数据。", + "loadError": "无法加载经营分析汇总。", + "kpisAria": "核心指标", + "kpiEmpty": "暂无汇总指标", + "trendAria": "趋势图表", + "trendTitle": "营收 · 展位趋势", + "monthlyAgg": "按月汇总", + "trendHint": "按月租赁/公用事业营收与展位数量趋势(营收单位：韩元)。", + "trendEmptyTitle": "暂无趋势数据", + "trendEmptyDesc": "可汇总期间内暂无营收/展位记录。", + "revenue": "营收", + "booth": "展位", + "boothsUnit": "{{n}} 个展位", + "sectorsAria": "行业构成", + "sectorsTitle": "行业构成", + "sectorsEmptyTitle": "行业分类未汇总", + "sectorsEmptyDesc": "接入行业分类来源(M13)后将显示。", + "perfTable": "绩效表", + "pnlTitle": "损益(P&L)构成", + "exhibitorPerfTitle": "参展商绩效", + "sampleTag": "示例", + "pnlEmptyTitle": "暂无损益项", + "pnlEmptyDesc": "汇总展位租赁/公用事业营收记录后将显示。", + "colItem": "项目", + "colAmount": "金额", + "colGrade": "等级", + "perfEmptyTitle": "参展商绩效未汇总", + "perfEmptyDesc": "接入潜客/转化率来源(M13 访客)后将显示。", + "colCompany": "公司名称", + "colLeads": "潜客", + "colConversion": "转化率" + }, + "global": { + "sectionAria": "租户全域经营分析", + "title": "全公司经营分析 (跨活动)", + "subtitle": "跨活动营收对比 · 展厅使用率趋势 · 参展商留存 · 需求预测", + "yearsAria": "分析年数", + "years3": "最近 3 年", + "years5": "最近 5 年", + "years10": "最近 10 年", + "loadErrorTitle": "无法加载全域汇总", + "loadErrorDesc": "请稍后再试。", + "kpisAria": "全域核心指标", + "kpiEmpty": "暂无汇总指标", + "evComp": "跨活动营收对比", + "top8": "前 8 名", + "evCompHint": "已布展活动的租赁+公用事业营收排名(单位：韩元)。", + "evCompEmptyTitle": "暂无可对比的活动", + "evCompEmptyDesc": "汇总已布展活动营收后将显示。", + "revenue": "营收", + "retention": "参展商留存", + "retentionCum": "累计再参展率", + "returning": "再参展", + "retentionEmptyTitle": "按年度留存未汇总", + "retentionEmptyDesc": "接入展位分配企业来源后将显示。", + "retentionRate": "再参展率", + "occupancy": "展厅使用率趋势 (按月)", + "occupancyHint": "按举办活动-天数 ÷ (展厅数 × 当月天数) 计算的月度使用率。", + "occupancyEmpty": "暂无使用率数据", + "occupancyRate": "使用率", + "forecast": "需求预测", + "forecastTitle": "需求预测 (举办趋势)", + "trendProjection": "趋势投影", + "forecastHint": "按年度举办活动数实测 + 最小二乘线性趋势，向未来 2 年投影(虚线)。", + "forecastEmptyTitle": "暂无可预测的历史", + "forecastEmptyDesc": "汇总年度举办历史后将显示。", + "casesUnit": "{{n}} 项", + "actual": "实测", + "projected": "预测" + }, + "ops": { + "title": "展厅现场运营", + "subtitle": "基于签到·公用事业实时汇总的现状", + "modeAria": "查看模式", + "live": "实时", + "history": "历史查询", + "noEventTitle": "请选择活动", + "noEventDesc": "尚未指定要查询现场运营的活动。", + "offlineSample": "离线 — 示例", + "degradedMsg": "无法连接汇总接口，正在显示演示示例数据。", + "loadError": "无法加载现场运营状况。", + "hallStatus": "各展厅现状", + "checkinDerived": "由签到(M10)派生 · 按面积占比分配", + "sensorNoneHalls": "无传感器 · 分配展厅列表", + "noHallsTitle": "暂无已分配展厅", + "noHallsDesc": "为活动分配展厅后将显示。", + "busy": "拥挤", + "smooth": "顺畅", + "moderate": "一般", + "people": "{{n}}人", + "onSiteCheckin": "现场签到 <0>{{n}}人", + "noCheckinAgg": "无签到汇总", + "powerLoad": "电力负荷", + "totalKw": "共 <0>{{v}}kW", + "utilLoadAgg": "公用事业申请(M4)负荷汇总", + "noLoadTitle": "无申请负荷", + "noLoadDesc": "受理电力公用事业申请后将按展厅显示负荷。", + "kw": "{{v}}kW", + "hourlyCheckin": "分时段签到", + "hourlyAgg": "签到(M10)分时段汇总", + "noSeriesTitle": "无签到趋势", + "noSeriesDesc": "记录现场签到后将显示分时段趋势。", + "facilitySensor": "设施传感器接入", + "facilitySensorTitle": "设施传感器 (空调·照明·停车)", + "sensorNoneTitle": "设施传感器未接入", + "sensorNoneDesc": "空调(HVAC)·照明 IoT·停车(iparking)联动将在接入传感器(M14)后显示。", + "temp": "温度", + "humidity": "湿度", + "parkingSlots": "{{zone}}: {{occ}}/{{cap}} 车位" + }, + "admin": { + "deniedTitle": "无访问权限", + "deniedAuthed": "本页面仅系统管理员(展厅经理·ADMIN)可使用。如需访问请联系管理员。", + "deniedGuest": "管理后台需登录后使用。", + "overviewTitle": "系统概览", + "overviewSub": "实时指标与运营状态", + "loginSlides": "登录轮播管理", + "tenantSwitch": "切换租户", + "systemNormal": "系统正常", + "moduleShortcuts": "管理模块快捷入口", + "offlineSample": "离线 — 示例", + "degradedMsg": "无法连接汇总接口，正在显示演示示例数据。", + "dashLoadError": "无法加载管理员仪表盘。", + "kpisAria": "核心指标", + "kpiEmpty": "暂无汇总指标", + "visitorTrend": "访客趋势", + "hourlyVisitors": "分时段访客", + "visitors": "访客", + "visitorTrendEmptyTitle": "访客趋势未汇总", + "visitorTrendEmptyDesc": "接入访客计量传感器(M14)后将显示分时段趋势。", + "liveEvents": "进行中活动", + "noLiveEvents": "暂无进行中的活动", + "hallTbd": "展厅未分配", + "occupancy": "占用 {{n}}%", + "modUsers": "用户", + "modRoles": "角色·权限", + "modCodes": "通用代码", + "modMenus": "菜单", + "modAudit": "审计日志", + "modSettings": "系统设置", + "modRulesets": "规则集", + "modTenants": "租户" + }, + "tenant": { + "title": "租户管理·上线", + "subtitle": "仅平台超级管理员 · 无需部署代码，通过数据上线添加展馆。", + "sampleTag": "示例 · 未实现", + "sampleNote": "多租户(租户 CRUD·上线·隔离)后端尚未实现，本页面展示目标信息架构。多租户引入后将接入实数据。", + "listAria": "租户列表", + "venue": "展馆", + "notImpl": "未实现", + "addVenue": "添加展馆", + "code": "代码", + "domain": "域名", + "status": "状态", + "events": "活动", + "users": "用户", + "wizardAria": "上线向导", + "onboardingOf": "{{name}} 上线", + "dataOnboarding": "无需部署代码的数据上线", + "wiz": { + "create": { + "label": "创建租户", + "desc": "登记代码·显示名" + }, + "domain": { + "label": "子域名", + "desc": "分配 DNS·品牌域名" + }, + "brand": { + "label": "品牌", + "desc": "Logo·颜色·公开站主题" + }, + "master": { + "label": "录入主数据", + "desc": "展厅·费率·规则集种子" + }, + "admin": { + "label": "管理员账户", + "desc": "邀请租户管理员" + }, + "smoke": { + "label": "隔离冒烟测试", + "desc": "验证跨租户隔离" + }, + "activate": { + "label": "激活", + "desc": "转入运营" + } + }, + "tstatus": { + "active": "活跃", + "onboarding": "上线中", + "suspended": "已停用" + } + }, + "ruleset": { + "title": "规则集版本管理", + "subtitle": "应对法规修订的规则集版本历史与规则项。", + "readonly": "只读", + "readonlyNote": "规则集以部署资源(rulesets/*.json)进行版本管理。编辑与版本创建通过在法规修订时替换资源完成，本页面仅供查询。", + "listError": "无法加载规则集列表。", + "noRulesets": "暂无已部署的规则集", + "versionHistory": "版本历史", + "rulesCount": "规则 {{n}}", + "effectiveDate": "生效日 {{date}}", + "ruleList": "规则列表", + "rulesOf": "{{name}} 规则 ({{n}} 项)", + "detailError": "无法加载规则全文。", + "noRulesTitle": "该规则集无规则数组", + "noRulesDesc": "仅定义费率/单价而无规则(rules)的规则集，如费率主数据。", + "colRuleName": "规则名", + "colValue": "数值/设定值", + "colLogic": "逻辑 / 要求", + "colSeverity": "违规级别", + "block": "阻断", + "warn": "警告", + "required": "必填", + "perHall": "各展厅 {{unit}}", + "docNeeded": "需文件: {{doc}}" + }, + "audit": { + "title": "审计日志", + "subtitle": "追踪审批·中标·设置变更等所有管理操作及重要领域事件。(保持完整性)", + "exportCsv": "导出 CSV", + "filterAria": "审计日志筛选", + "actionType": "操作类型", + "allActions": "全部操作", + "actorId": "操作人 ID", + "actorIdPh": "例: user-102", + "eventId": "活动 ID", + "eventIdPh": "例: EVT-2026-01", + "reset": "重置", + "applyFilter": "应用筛选", + "loadError": "无法加载审计日志。", + "tableAria": "审计日志表", + "emptyTitle": "无符合条件的审计记录", + "emptyDesc": "请调整或重置筛选条件后重新查询。", + "colTime": "时间", + "colUser": "用户", + "colAction": "操作", + "colTarget": "对象", + "colEvent": "活动", + "colResult": "结果", + "showing": "显示 <0>{{from}}-{{to}} / 共 <1>{{total}} 条", + "prev": "上一页", + "next": "下一页", + "rowsShow": "行显示", + "rowsPerPage": "每页行数", + "rowsN": "{{n}} 条", + "success": "成功", + "failure": "失败", + "csvTime": "时间", + "csvActorId": "操作人ID", + "csvActorName": "操作人姓名", + "csvAction": "操作", + "csvTargetType": "对象类型", + "csvTargetId": "对象ID", + "csvEventId": "活动ID", + "csvResult": "结果", + "csvSummary": "摘要" + }, + "role": { + "title": "角色 · 权限 (RBAC)", + "subtitle": "按角色(主办方·参展商·装置商·展厅经理·管理员·访客)以矩阵方式分配资源权限。", + "addRole": "添加角色", + "loadError": "无法加载角色·权限信息。", + "noRolesTitle": "尚未定义角色", + "noRolesDesc": "添加角色以配置 RBAC。", + "roleList": "角色列表", + "role": "角色", + "codePerm": "{{code}} · 权限 {{n}}", + "unused": "未使用", + "permMatrix": "权限矩阵", + "rolePerm": "{{name}} 权限", + "roleInfo": "角色信息", + "deleteConfirm": "确定删除角色 '{{name}}' 吗？", + "delete": "删除", + "noPerms": "尚未定义权限", + "selectRole": "请选择角色", + "saved": "角色已保存。", + "deleted": "角色已删除。", + "addRoleModal": "添加角色", + "editRole": "编辑角色信息", + "modalDesc": "权限分配在保存后于矩阵中通过勾选管理。", + "roleCode": "角色代码 *", + "roleCodePh": "例: ORGANIZER", + "roleName": "角色名称 *", + "description": "说明", + "useYn": "是否使用", + "use": "使用", + "noUse": "未使用", + "cancel": "取消", + "save": "保存", + "saving": "保存中…", + "errRequired": "角色代码和名称为必填。", + "errDupCode": "该角色代码已存在。" + }, + "menu": { + "title": "菜单管理", + "subtitle": "管理按角色的导航菜单树及路径·访问角色。", + "addMenu": "添加菜单", + "loadError": "无法加载菜单。", + "treeAria": "菜单树", + "emptyTitle": "暂无已登记菜单", + "emptyDesc": "请添加菜单。", + "colName": "菜单名", + "colPath": "路径", + "colType": "类型", + "colRole": "访问角色", + "colSort": "排序", + "colUse": "使用", + "colManage": "管理", + "all": "全部", + "unused": "未使用", + "used": "使用", + "edit": "编辑", + "delete": "删除", + "deleteConfirm": "确定删除菜单 '{{name}}' 吗？如有子菜单将一并清理。", + "saved": "菜单已保存。", + "deleted": "菜单已删除。", + "editMenu": "编辑菜单", + "menuId": "菜单 ID (唯一键) *", + "menuIdPh": "例: admin-users", + "menuName": "菜单名 *", + "parent": "上级菜单", + "topLevel": "(最上级)", + "path": "路径(path)", + "pathPh": "例: /admin/users", + "type": "类型", + "accessRole": "访问角色", + "accessRolePh": "例: ADMIN (留空=全部)", + "sort": "排序", + "useYn": "是否使用", + "cancel": "取消", + "save": "保存", + "saving": "保存中…", + "errName": "菜单名为必填。", + "errId": "菜单 ID(唯一键)为必填。", + "errDupId": "该菜单 ID 已存在。" + }, + "code": { + "title": "通用代码管理", + "subtitle": "管理下拉·分类所用的通用代码组与代码值。", + "addGroup": "添加组", + "groupLoadError": "无法加载代码组。", + "noGroupsTitle": "暂无代码组", + "noGroupsDesc": "添加组以配置通用代码。", + "codeGroup": "代码组", + "codeValues": "代码值", + "valuesOf": "{{name}} 值", + "editGroup": "编辑代码组", + "deleteGroup": "删除组", + "deleteGroupConfirm": "确定删除组 '{{name}}' 及其下代码吗？", + "addCode": "添加代码", + "codeLoadError": "无法加载代码值。", + "noCodesTitle": "暂无代码", + "noCodesDesc": "请添加代码。", + "code": "代码", + "name": "名称", + "value": "值", + "sort": "排序", + "use": "使用", + "manage": "管理", + "unused": "未使用", + "used": "使用", + "edit": "编辑", + "delete": "删除", + "deleteCodeConfirm": "确定删除代码 '{{name}}' 吗？", + "groupSaved": "代码组已保存。", + "groupDeleted": "代码组已删除。", + "codeSaved": "代码已保存。", + "codeDeleted": "代码已删除。", + "groupCode": "组代码 *", + "groupName": "组名称 *", + "description": "说明", + "useYn": "是否使用", + "cancel": "取消", + "save": "保存", + "saving": "保存中…", + "errGroupRequired": "组代码和名称为必填。", + "errDupGroup": "该组代码已存在。", + "editCode": "编辑代码", + "group": "组", + "codeReq": "代码 *", + "nameReq": "名称 *", + "attr1": "属性1(attr1)", + "errCodeRequired": "代码和名称为必填。", + "errDupCode": "该代码已存在。" + }, + "sysuser": { + "title": "用户管理", + "subtitle": "管理账户创建·编辑、角色分配、状态(激活/锁定/停用)及 OTP 重置。密码以掩码显示，不予展示。", + "addUser": "添加用户", + "searchAria": "用户搜索", + "keyword": "搜索词", + "keywordPh": "姓名·邮箱", + "role": "角色", + "status": "状态", + "all": "全部", + "reset": "重置", + "search": "搜索", + "loadError": "无法加载用户列表。", + "listAria": "用户列表", + "emptyTitle": "暂无用户", + "emptyDesc": "请调整搜索条件或添加用户。", + "colUser": "用户", + "colEmail": "邮箱", + "colRole": "角色", + "colDept": "部门", + "colStatus": "状态", + "colLastLogin": "最近登录", + "colManage": "管理", + "hallManagerTag": "展厅经理", + "otpSet": "已设置", + "otpUnset": "未设置", + "edit": "编辑", + "lock": "锁定", + "unlock": "解锁", + "otpResetBtn": "重置OTP", + "otpResetConfirm": "确定重置 {{name}} 的 OTP 吗？", + "saved": "用户已保存。", + "statusChanged": "状态已变更。", + "otpReset": "OTP 已重置。", + "active": "激活", + "locked": "锁定", + "disabled": "停用", + "editUser": "编辑用户", + "newDesc": "初始密码在保存后不会显示在界面上。", + "editDesc": "邮箱不可编辑。密码重置遵循单独策略。", + "email": "邮箱 *", + "displayName": "显示名称 *", + "dept": "部门", + "initPassword": "初始密码 *", + "hallManagerCheck": "展厅经理(内部运营者)", + "cancel": "取消", + "save": "保存", + "saving": "保存中…", + "errRequired": "邮箱和显示名称为必填。", + "errPassword": "新用户需设置初始密码。", + "totalUsers": "共 <0>{{total}} 人", + "prev": "上一页", + "next": "下一页" + }, + "settings": { + "title": "系统设置", + "subtitle": "管理全局策略·功能开关·AI 门控等系统参数。密钥值以掩码显示。", + "loadError": "无法加载系统设置。", + "emptyTitle": "暂无已登记设置", + "emptyDesc": "请在下方表单中添加第一个设置项。", + "saved": "设置已保存。", + "deleted": "设置已删除。", + "deleteConfirm": "确定删除设置 '{{key}}' 吗？", + "general": "常规", + "groupAria": "设置组 {{name}}", + "secret": "密钥", + "secretTitle": "密钥 — 值掩码", + "on": "开", + "off": "关", + "secretPh": "已设置(掩码) — 更改时输入新值", + "save": "保存", + "delete": "删除", + "deleteKey": "删除 {{key}}", + "secretHint": "密钥原文不会展示。不输入值直接保存则保留原值。", + "addAria": "添加设置", + "addTitle": "添加 / 覆盖设置", + "settingKey": "设置键", + "settingKeyPh": "例: deadline.utility.days", + "value": "值", + "type": "类型", + "description": "说明", + "secretCheck": "密钥(值掩码)" + }, + "slide": { + "title": "登录轮播管理", + "subtitle": "登录界面左侧轮播图片·文案 — 活跃幻灯片中<0>按登记顺序最新 5 张进行轮播。", + "addAria": "添加新幻灯片", + "addTitle": "添加新幻灯片", + "imageLabel": "图片 (PNG/JPG/WebP, 8MB 以内)", + "preview": "预览", + "titleLabel": "标题文案", + "titlePh": "例) 代表亚洲的展览会议中心 KINTEX", + "captionLabel": "副标题(辅助文案)", + "captionPh": "例) 在 10 万㎡展览空间中探索商机。", + "submitting": "登记中…", + "submit": "登记幻灯片", + "listAria": "幻灯片列表", + "registered": "已登记幻灯片", + "countActive": "共 {{total}} 张 · 活跃 {{active}} 张", + "emptyTitle": "暂无已登记幻灯片", + "emptyDesc": "登记图片和文案后将在登录界面轮播中展示。(未登记时显示默认 5 种)", + "live": "展示中", + "inactive": "未激活", + "registeredAt": "登记 {{date}}", + "active": "激活", + "delete": "删除", + "listError": "无法加载列表。", + "errImage": "请选择幻灯片图片。", + "errTitle": "请输入标题文案。", + "createFail": "登记失败。", + "updateFail": "变更失败。", + "deleteFail": "删除失败。", + "deleteConfirm": "确定删除幻灯片 \"{{title}}\" 吗？" + }, + "approval": { + "queueTitle": "审批收件箱", + "search": "搜索", + "searchPlaceholder": "搜索标题...", + "pendingCount": "待审批", + "pendingList": "待我审批的文档", + "colTitle": "标题", + "colDocType": "类型", + "colDrafter": "起草人", + "colSubmitted": "提交日", + "colStep": "步骤", + "colStatus": "状态", + "colAction": "操作", + "open": "打开", + "emptyPending": "没有待审批的文档", + "status": { + "DRAFT": "草稿", + "SUBMITTED": "已提交", + "IN_PROGRESS": "进行中", + "APPROVED": "已批准", + "REJECTED": "已驳回", + "CANCELED": "已撤回" + }, + "reviewTitle": "审批审查", + "version": "版本", + "drafter": "起草人", + "step": "步骤", + "demoMode": "预览(演示)", + "downloadOriginal": "下载原件", + "previewAria": "文档预览", + "lineAria": "审批线与历史", + "docBody": "正文", + "line": "审批线", + "history": "处理历史", + "noHistory": "暂无处理历史", + "lineStatus": { + "WAIT": "等待", + "CURRENT": "审批中", + "APPROVED": "已批准", + "REJECTED": "已驳回", + "SKIPPED": "已跳过" + }, + "action": { + "SUBMIT": "提交", + "APPROVE": "批准", + "REJECT": "驳回", + "RESUBMIT": "重新提交", + "CANCEL": "撤回" + }, + "approve": "批准", + "reject": "驳回", + "approvedDone": "已批准。", + "rejectedDone": "已驳回。", + "canActHint": "您是该文档当前步骤的审批人。", + "notApproverHint": "仅当前步骤审批人可操作。", + "demoFootNote": "从审批收件箱选择文档即可批准或驳回。", + "demoHint": "未指定审批文档，请从审批收件箱打开。", + "commentPlaceholder": "输入意见(驳回时必填)", + "comment": "意见", + "boxTitle": "审批箱", + "compose": "拟稿", + "composeTitle": "审批拟稿", + "resubmitTitle": "退回文件再上报", + "backToList": "返回列表", + "tab": { + "PENDING": "待审批", + "DRAFTED": "已上报", + "REJECTED": "已退回", + "DONE": "已完成" + }, + "empty": { + "PENDING": "没有待审批的文件", + "DRAFTED": "没有已上报的文件", + "REJECTED": "没有被退回的文件", + "DONE": "没有已完成的文件" + }, + "resubmitBtn": "再上报", + "draftSave": "临时保存", + "submitDoc": "上报", + "cancel": "取消", + "saving": "处理中…", + "docType": "文件类型", + "docTypes": { + "GENERAL": "一般", + "DESIGN": "设计/图纸", + "DOCUMENT": "文件", + "EXPENSE": "费用/支出", + "ETC": "其他" + }, + "titleLabel": "标题", + "titlePlaceholder": "请输入审批文件标题", + "contentLabel": "内容", + "contentPlaceholder": "请输入审批文件内容", + "err": { + "titleRequired": "请输入标题。", + "lineRequired": "请至少指定一名审批人。" + }, + "createdDraft": "已临时保存。", + "submittedDone": "已上报审批。", + "resubmittedDone": "已再次上报。", + "rejectedReason": "退回原因", + "canResubmitHint": "该拟稿已被退回。可修改后再上报。", + "lineEditor": { + "empty": "尚未指定审批人。请添加审批人。", + "stepNo": "第{{n}}级", + "idPlaceholder": "审批人ID", + "namePlaceholder": "显示名(可选)", + "approverId": "第{{n}}级审批人ID", + "approverName": "第{{n}}级审批人姓名", + "moveUp": "上移", + "moveDown": "下移", + "remove": "删除审批人", + "add": "添加审批人" + }, + "rejectModalTitle": "退回处理", + "approveModalTitle": "批准处理", + "rejectReason": "退回原因", + "rejectReasonPlaceholder": "请输入退回原因", + "rejectReasonHint": "退回原因将发送给拟稿人,并在再上报时显示。", + "commentOptional": "请输入意见(可选)" + }, + "auction": { + "boq": { + "title": "工程量清单(BOQ)自动生成", + "error": "无法加载工程量清单。", + "scopeBooth": "{{label}} 展位", + "scopeEvent": "全场展位汇总", + "summary": "展位 {{count}}个 · {{area}}㎡", + "colSeq": "序号", + "colTrade": "工种", + "colItem": "品名", + "colQty": "数量", + "colUnit": "单位", + "colBasis": "计算依据" + } + }, + "logistics": { + "title": "物流中心", + "subtitle": "进出场月台 · 附加设备 · 租赁 · 预入库追踪", + "tabsAria": "切换物流功能", + "tabs": { + "dock": "月台预约", + "equipment": "设备申请", + "rental": "租赁订单", + "inbound": "预入库" + }, + "boothNo": "展位号", + "qty": "数量", + "estimate": "预估金额", + "submitting": "处理中…", + "submitOk": "已受理。", + "submitErr": "处理失败。", + "statusUpdated": "状态已更新。", + "loadErr": "无法加载物流信息。", + "serverAmountNote": "金额以服务器为准确定", + "equipment": { + "formTitle": "附加设备申请", + "item": "设备品目", + "days": "使用天数", + "daysUnit": "天", + "useDate": "预计使用日", + "submit": "申请设备", + "listTitle": "申请记录", + "empty": "暂无申请记录", + "emptyDesc": "申请叉车、升降机等附加设备。", + "approve": "批准", + "reject": "驳回", + "rejectReason": "因现场条件驳回", + "done": "处理完成", + "st": { + "requested": "已申请", + "approved": "已批准", + "rejected": "已驳回", + "done": "已完成" + } + }, + "rental": { + "formTitle": "附加物品租赁订单", + "item": "租赁品目", + "start": "开始日期", + "end": "结束日期", + "submit": "下单租赁", + "listTitle": "订单记录", + "empty": "暂无订单记录", + "emptyDesc": "订购桌椅、显示器等。", + "period": "{{days}}天", + "confirm": "确认", + "cancel": "取消", + "deliver": "交付完成", + "st": { + "ordered": "已下单", + "confirmed": "已确认", + "cancelled": "已取消", + "delivered": "已交付" + } + }, + "inbound": { + "formTitle": "预入库运单登记", + "trackingNo": "运单号", + "carrier": "承运商", + "itemDesc": "货物内容", + "eta": "预计入库日", + "submit": "登记运单", + "submitSub": "登记后追踪入库状态", + "listTitle": "预入库状态", + "empty": "暂无预入库记录", + "emptyDesc": "登记预配送运单号。", + "st": { + "registered": "已登记", + "inbound_scheduled": "待入库", + "arrived_warehouse": "到达仓库", + "delivered_booth": "送达展位" + }, + "advance": { + "inbound_scheduled": "标记待入库", + "arrived_warehouse": "标记到仓", + "delivered_booth": "标记送达展位" + } + } + }, + "appqr": { + "title": "下载 KINTEX 展会应用", + "subtitle": "安装移动应用", + "intro": "扫描二维码或使用下方按钮安装 KINTEX 展会应用。", + "about": "应用大小 {{size}}", + "appName": "KINTEX AI 展会应用", + "builtAt": "构建于 {{date}}", + "download": "下载 APK", + "copyLink": "复制链接", + "copied": "已复制", + "refresh": "刷新", + "retry": "重试", + "qrAlt": "应用下载二维码", + "iosNote": "iOS 将在 App Store 正式上线后提供支持。", + "notReady": { + "title": "应用正在准备中", + "desc": "安装文件尚未发布，请稍后重试。" + }, + "steps": { + "heading": "安装步骤", + "s1": "用手机相机扫描二维码。", + "s2": "打开显示的链接并下载 APK。", + "s3": "允许\"安装未知来源应用\"。", + "s4": "安装后打开应用并登录。" + } + }, + "authPolicy": { + "title": "认证策略", + "subtitle": "设置密码规则和登录锁定策略。", + "loadError": "无法加载认证策略。", + "saved": "认证策略已保存。", + "pwSection": "密码策略", + "pwMinLength": "最小长度", + "pwExpireDays": "有效期（天）", + "pwRequireUpper": "需包含大写字母", + "pwRequireNumber": "需包含数字", + "pwRequireSpecial": "需包含特殊字符", + "lockSection": "登录锁定", + "loginMaxFail": "最大失败次数", + "lockMinutes": "锁定时长（分钟）", + "sessionTimeoutMin": "会话超时（分钟）" + }, + "company": { + "title": "企业管理", + "subtitle": "管理参展商与合作企业信息。", + "add": "添加企业", + "edit": "编辑企业", + "searchPh": "按企业名称或营业执照号搜索", + "partnerType": "类别", + "allTypes": "全部类别", + "bizType": "行业", + "ceo": "法人代表", + "contact": "联系人", + "tel": "联系电话", + "telEditHint": "请仅输入数字。", + "telMaskNote": "联系电话为安全起见以掩码显示。", + "address": "地址", + "colName": "企业名称", + "colBizNo": "营业执照号", + "colType": "类别", + "colContact": "联系人", + "colTel": "联系电话", + "colUse": "启用", + "deleteConfirm": "确定删除企业 {{name}} 吗？", + "deleted": "企业已删除。", + "saved": "企业信息已保存。", + "errRequired": "请填写必填项。", + "loadError": "无法加载企业列表。", + "emptyTitle": "尚无已登记企业", + "emptyDesc": "请添加新企业。" + }, + "dept": { + "title": "部门管理", + "subtitle": "管理组织部门结构。", + "addRoot": "添加顶级部门", + "addChild": "添加子部门", + "add": "添加部门", + "edit": "编辑部门", + "name": "部门名称", + "deleteConfirm": "确定删除部门 {{name}} 吗？", + "deleted": "部门已删除。", + "saved": "部门已保存。", + "errRequired": "请输入部门名称。", + "loadError": "无法加载部门列表。", + "emptyTitle": "尚无已登记部门", + "emptyDesc": "请添加顶级部门。", + "searchPlaceholder": "搜索部门", + "searchNoResult": "无匹配部门。", + "treeAria": "部门组织树", + "expand": "展开", + "collapse": "折叠", + "expandAll": "全部展开", + "collapseAll": "全部折叠", + "selectHint": "请从左侧选择一个部门。", + "colId": "部门ID", + "colParent": "上级部门", + "topLevel": "最高级", + "colChildCount": "下级部门数", + "childCountValue": "{{n}}个", + "errHasChildren": "存在下级部门，无法删除。" + }, + "errorLog": { + "title": "错误日志", + "subtitle": "查看系统错误记录。", + "filterAria": "错误日志筛选", + "code": "错误代码", + "codePh": "输入错误代码", + "loadError": "无法加载错误日志。", + "emptyTitle": "暂无错误日志", + "emptyDesc": "没有符合条件的错误日志。", + "colTime": "发生时间", + "colCode": "代码", + "colMethod": "方法", + "colPath": "路径", + "colSummary": "摘要" + }, + "loginHistory": { + "title": "登录记录", + "subtitle": "查看登录成功/失败记录。", + "filterAria": "登录记录筛选", + "result": "结果", + "allResults": "全部结果", + "userId": "用户 ID", + "userIdPh": "输入用户 ID", + "loadError": "无法加载登录记录。", + "emptyTitle": "暂无登录记录", + "emptyDesc": "没有符合条件的登录记录。", + "colTime": "时间", + "colResult": "结果", + "colUser": "用户", + "colEmail": "邮箱", + "colIp": "IP 地址", + "colReason": "原因" + }, + "marketing": { + "sentDone": "已发送 {{n}} 封。", + "sentDisabled": "已发送（{{n}}）", + "sendFail": "发送失败。", + "confirm": "确定发送 {{name}} 活动吗？", + "sending": "发送中…", + "sendBtn": "发送" + }, + "program": { + "title": "程序管理", + "subtitle": "管理页面程序及访问 URL。", + "add": "添加程序", + "edit": "编辑程序", + "searchPh": "按程序名称搜索", + "deleteConfirm": "确定删除程序 {{name}} 吗？", + "deleted": "程序已删除。", + "saved": "程序已保存。", + "errRequired": "请填写必填项。", + "loadError": "无法加载程序列表。", + "emptyTitle": "尚无已登记程序", + "emptyDesc": "请添加新程序。", + "colName": "程序名称", + "colType": "类型", + "colUrl": "URL", + "colCategory": "分类", + "colUse": "启用" + }, + "roleMenu": { + "title": "角色菜单权限", + "subtitle": "为角色授予菜单访问权限。", + "loadError": "无法加载权限信息。", + "noRoles": "尚无已登记角色。", + "roleList": "角色列表", + "role": "角色", + "matrix": "权限矩阵", + "noMenus": "暂无菜单。", + "colMenu": "菜单", + "colAccess": "访问", + "colRead": "读取", + "colWrite": "写入", + "saved": "权限已保存。" + }, + "sysHealth": { + "title": "系统状态", + "subtitle": "监控服务器与服务状态。", + "refresh": "刷新", + "loadError": "无法加载系统状态。", + "db": "数据库", + "redis": "Redis", + "worker": "工作进程", + "queueDepth": "队列积压 {{n}}", + "disk": "磁盘", + "diskFree": "剩余 {{mb}}MB", + "mem": "内存", + "uptime": "运行时间", + "version": "版本" + }, + "sysadmin": { + "actions": "操作", + "cancel": "取消", + "delete": "删除", + "edit": "编辑", + "keyword": "关键词", + "next": "下一页", + "noUse": "停用", + "prev": "上一页", + "save": "保存", + "saving": "保存中…", + "search": "搜索", + "sortOrder": "排序", + "totalN": "共 {{n}} 条", + "use": "启用", + "useYn": "是否启用" + }, + "public": { + "home": { + "heroTitle": "AI 设计的展会未来" + } + }, + "calendar": { + "prev": "上一个", + "next": "下一个", + "today": "今天", + "yearMonth": "{{y}}年{{m}}月", + "viewSwitch": "切换视图", + "view": { + "month": "月", + "week": "周", + "day": "日" + }, + "loading": "加载中…", + "legend": "图例", + "dayEmpty": "没有日程。", + "dayAll": "{{date}} 全部日程", + "close": "关闭" + }, + "holiday": { + "title": "节假日管理", + "subtitle": "查看法定/替代节假日并管理临时节假日。在日历中以红色显示。", + "year": "年度", + "yearLabel": "{{y}}年", + "add": "添加临时节假日", + "created": "已添加节假日。", + "deleted": "已删除。", + "toggled": "休息状态已更新。", + "loadError": "无法加载节假日。", + "emptyTitle": "无节假日", + "emptyDesc": "所选年度没有已登记的节假日。", + "listOf": "{{y}}年节假日", + "count": "休息 {{n}} 天", + "date": "日期", + "weekday": "星期", + "name": "名称", + "type": "类型", + "status": "休息", + "manage": "管理", + "substitute": "替代节假日", + "legal": "法定节假日", + "on": "休息", + "off": "正常上班", + "setOff": "取消休息", + "setOn": "设为休息", + "delete": "删除", + "deleteConfirm": "删除“{{name}}”？", + "errRequired": "请输入日期和名称。", + "errDup": "该日期已登记。", + "substituteHint": "登记为替代节假日", + "cancel": "取消", + "saving": "保存中…", + "save": "保存" + }, + "track": { + "shell": { + "wordmark": "KINTEX AI 展览·活动系统", + "tablistAria": "选择通道", + "tab": { + "visitor": "参观", + "business": "商务", + "agency": "合作商" + }, + "login": "登录", + "myHome": "我的主页" + }, + "gateway": { + "heroAria": "产品介绍", + "aiWatermark": "AI 生成预览图", + "eyebrow": "AI 展览·活动运营平台", + "title": "KINTEX AI 展览·活动系统", + "subtitle": "从展览策划到施工·参观，全流程 AI 自动化。", + "ctaPreReg": "参观预登记", + "ctaInquiry": "参展咨询", + "tracksAria": "通道分流", + "tracksTitle": "您此次访问的目的是？", + "tracksSub": "请选择符合您目的的通道。", + "card": { + "visitor": { + "label": "参观者", + "title": "参观活动", + "desc": "活动日程·预登记·交通指引", + "cta": "参观通道" + }, + "business": { + "label": "主办·参展", + "title": "举办·参展", + "desc": "租馆·自动报价·展位申请·施工方案", + "cta": "商务通道" + }, + "agency": { + "label": "施工·合作商", + "title": "参与展览施工", + "desc": "注册企业·施工竞标·作业申报", + "cta": "合作商通道" + } + }, + "eventsAria": "进行中·预定展览", + "eventsTitle": "进行中 · 预定展览", + "eventsSub": "查看正在举办及即将举办的展览。", + "eventsMore": "查看全部日程" + }, + "visitor": { + "heroAria": "参观介绍", + "eyebrow": "参观者指南", + "title": "参观从这里开始", + "subtitle": "预登记可更快入场，还可接收关注领域的通知。", + "ctaPreReg": "预登记", + "ctaTicket": "购票", + "eventsAria": "活动日程", + "eventsTitle": "活动日程", + "eventsSub": "查看进行中·预定展览并预登记。", + "guideAria": "参观指南", + "guideTitle": "参观指南", + "guideSub": "交通·停车·便利设施·无障碍信息一站式了解。", + "guide": { + "transport": { + "title": "交通", + "desc": "GTX-A KINTEX站步行3分钟·城际巴士", + "link": "交通指引" + }, + "parking": { + "title": "停车", + "desc": "实时车位·费用·出入口", + "link": "停车指南" + }, + "wayfinding": { + "title": "室内导航", + "desc": "至展厅·展位的室内路线", + "link": "打开导航" + }, + "amenities": { + "title": "便利设施", + "desc": "餐饮·母婴室·寄存·ATM", + "link": "查看设施" + }, + "accessibility": { + "title": "无障碍", + "desc": "轮椅·手语翻译指引", + "link": "无障碍指南" + }, + "inquiry": { + "title": "客户咨询", + "desc": "FAQ·联系方式", + "link": "联系我们" + } + }, + "noticeAria": "公告", + "noticeTitle": "公告", + "noticeSub": "查看最新公告·通知。", + "noticeEmpty": "暂无公告。", + "aiWatermark": "AI 生成的预览图", + "hero": { + "title": "尽管提问 — AI 为您导览", + "subtitle": "展会日程、交通、门票与展位，一次对话全搞定" + }, + "aiTiles": { + "title": "AI 为您服务", + "sub": "AI 陪伴您参观的每一刻。", + "soon": "敬请期待", + "assistant": { + "title": "AI 参观助手", + "desc": "尽管提问" + }, + "recommend": { + "title": "AI 展会推荐", + "desc": "按兴趣精选" + }, + "wayfinding": { + "title": "AI 室内导航", + "desc": "室内最优路线" + }, + "schedule": { + "title": "AI 行程助手", + "desc": "专属参观路线" + }, + "crowd": { + "title": "AI 拥挤·等候提示", + "desc": "推荐空闲时段" + }, + "render": { + "title": "AI 施工预览图", + "desc": "展位预览（商务通道）" + } + }, + "showcaseTitle": "进行中·即将举办", + "showcaseSub": "一览当前与即将举办的展会。", + "recommendTitle": "为您兴趣定制的展会", + "recommendSub": "选择兴趣领域，AI 为您推荐。", + "recommendTag": "AI 推荐", + "interests": { + "robot": "机器人·自动化", + "smartfactory": "智能工厂", + "healthcare": "医疗健康", + "eco": "环保·能源", + "mobility": "出行", + "content": "内容·文化" + }, + "guideMore": "查看详情", + "journeyTitle": "参观流程", + "journeySub": "从预先登记到现场入场，三步搞定。", + "journey": { + "register": { + "title": "预先登记", + "desc": "在线登记参观信息。", + "link": "浏览展会" + }, + "badge": { + "title": "领取胸卡·二维码", + "desc": "获取手机胸卡与入场二维码。", + "link": "查询门票" + }, + "checkin": { + "title": "现场签到", + "desc": "在入口扫码即可入场。", + "link": "登录" + } + }, + "venueTitle": "KINTEX 展馆介绍", + "venueSub": "韩国最大的展览会议中心。", + "venue": { + "halls": { + "label": "展厅", + "value": "10 个" + }, + "area": { + "label": "展览面积", + "value": "108,556㎡" + }, + "parking": { + "label": "停车", + "value": "7,500 辆" + }, + "access": { + "label": "交通", + "value": "GTX-A 步行3分" + } + }, + "briefing": { + "title": "AI 展会企划简报", + "sub": "AI 提前为您梳理全年与本月的展会。", + "viewYear": "全年（{{year}}）", + "viewMonth": "月度", + "aiSummary": "AI 摘要", + "loading": "正在生成 AI 摘要…", + "empty": "该期间暂无展会安排。", + "yearSummary": "{{year}}年共安排 {{count}} 场展会，集中在{{peak}}。", + "monthSummary": "本月共 {{count}} 场展会 · 建议周末参观。", + "monthLabel": "{{month}}月", + "eventsCount": "{{count}} 场", + "prevMonth": "上个月", + "nextMonth": "下个月" + } + }, + "business": { + "heroAria": "商务介绍", + "eyebrow": "主办方·参展商指南", + "title": "举办·参展，在线申请一站式", + "subtitle": "从租馆到展位申请·施工，全流程在线办理。", + "ctaApply": "申请·咨询", + "ctaLogin": "登录", + "ctaInquiry": "咨询", + "valueAria": "价值主张", + "valueTitle": "按角色进入", + "valueSub": "为主办方与参展商提供的功能。", + "value": { + "organizer": { + "title": "主办方 · 租馆", + "desc": "从租馆流程到展厅分配·平面图，一站搞定。", + "item": { + "rental": "租馆流程", + "quote": "自动报价", + "floorplan": "展厅分配·平面图", + "rate": "费用·设施规格" + }, + "cta": "租馆咨询·登录" + }, + "exhibitor": { + "title": "参展商 · 展位申请", + "desc": "从展位·水电申请到 AI 施工方案。", + "item": { + "apply": "展位申请", + "utility": "水电等申请", + "compliance": "规定预检", + "render": "AI 施工方案" + }, + "cta": "参展申请·登录" + } + }, + "processAria": "租赁流程", + "processTitle": "租赁流程", + "processSub": "从咨询到施工·验收一目了然。", + "process": { + "inquiry": { + "title": "咨询", + "desc": "受理租馆咨询" + }, + "quote": { + "title": "初步报价", + "desc": "自动报价" + }, + "contract": { + "title": "签约", + "desc": "签订合同" + }, + "assign": { + "title": "展厅分配", + "desc": "展厅·分区分配" + }, + "booth": { + "title": "展位申请", + "desc": "参展商展位·水电" + }, + "inspect": { + "title": "施工·验收", + "desc": "施工后现场验收" + } + }, + "rateAria": "费用·文件", + "rateTitle": "费用 · 文件指南", + "rateSub": "各展位类型的费率及主要文件。", + "rate": { + "shell": { + "label": "标准展位", + "price": "基本型", + "desc": "含基本展位·基础用电" + }, + "space": { + "label": "光地展位", + "price": "空间型", + "desc": "自由施工·需结构计算书" + }, + "premium": { + "label": "高级", + "price": "特化型", + "desc": "优质位置·附加水电" + } + }, + "doc": { + "assign": { + "title": "分配申请书", + "desc": "展厅分配申请表" + }, + "flame": { + "title": "阻燃确认书", + "desc": "阻燃处理确认文件" + }, + "structure": { + "title": "结构计算书", + "desc": "光地展位·吊挂结构审查" + } + }, + "ctaBandAria": "登录·咨询", + "ctaBandText": "已经拥有账号？" + }, + "agency": { + "heroAria": "合作商介绍", + "eyebrow": "施工·装置·合作商指南", + "title": "成为 KINTEX 官方注册企业，参与展览施工", + "subtitle": "通过施工竞标（反向竞价）透明中标 — KINTEX 独有方式。", + "ctaLogin": "注册企业登录", + "ctaRegister": "注册申请", + "ctaAuctionLogin": "登录参与竞标", + "ctaWorkReport": "提交作业申报", + "registryAria": "注册企业指南", + "registryTitle": "注册企业指南", + "registrySub": "由 739 家注册企业·14 个分类运营。", + "gateTitle": "未注册企业不得参与展览施工（不可自行施工）", + "gateBody": "展览施工必须通过 KINTEX 官方注册企业。请查看注册流程并申请。", + "reg": { + "apply": { + "title": "申请", + "desc": "提交注册申请" + }, + "review": { + "title": "资格审查", + "desc": "资格·业绩审查" + }, + "register": { + "title": "注册", + "desc": "登记为官方注册企业" + }, + "eligible": { + "title": "中标资格", + "desc": "可参与竞标·中标" + } + }, + "auctionAria": "施工竞标", + "auctionTitle": "进行中的施工竞标（反向竞价）", + "auctionSub": "在预算范围内透明竞标。", + "auctionEmptyTitle": "竞标公告需登录后查看", + "auctionEmptyBody": "以注册企业登录后，可查看进行中的施工竞标公告·预算·截止·应标情况并参与竞标。", + "safetyAria": "作业申报·安全规定", + "safetyTitle": "作业申报 · 安全规定", + "safetySub": "现场作业前请确认必要流程与规定。", + "safety": { + "report": { + "title": "作业申报流程", + "desc": "现场作业前在线申报" + }, + "prohibited": { + "title": "禁止作业·噪音", + "desc": "禁止作业·噪音限值·吊挂结构计算书" + }, + "docs": { + "title": "必需文件", + "desc": "阻燃确认书·保险单" + } + }, + "ctaBandAria": "注册企业登录", + "ctaBandText": "已是注册企业？" + } + } +} diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx new file mode 100644 index 0000000..288c253 --- /dev/null +++ b/src/frontend/src/main.tsx @@ -0,0 +1,28 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { BrowserRouter } from 'react-router-dom'; +import { App } from './App'; +import './store/themeStore'; // 진입 즉시 data-theme 스탬프(셸 밖 화면 포함) +import './i18n'; // i18next 초기화(다국어 ko/en/zh/ja) +import './styles/global.css'; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: 1, + staleTime: 30_000, + refetchOnWindowFocus: false, + }, + }, +}); + +createRoot(document.getElementById('root')!).render( + + + + + + + , +); diff --git a/src/frontend/src/screens/admin/AdminDashboardPage.tsx b/src/frontend/src/screens/admin/AdminDashboardPage.tsx new file mode 100644 index 0000000..a810ca9 --- /dev/null +++ b/src/frontend/src/screens/admin/AdminDashboardPage.tsx @@ -0,0 +1,225 @@ +import { useState } from 'react'; +import { Link } from 'react-router-dom'; +import { useQuery } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { + Bar, + BarChart, + CartesianGrid, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from 'recharts'; +import { CHART } from '../chartColors'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { adminApi } from '../../api/endpoints'; +import { ApiRequestError } from '../../api/client'; +import { StatusPill } from '../work/workShared'; +import type { AdminDashboardData } from '../../api/types'; +import { ADMIN_KPIS, LIVE_EVENTS, TENANTS, VISITOR_TREND } from './sampleAdmin'; +import './admin.css'; + +/* + * SCR-14 관리자 백오피스 대시보드 (M18 랜딩). Stitch admin_dashboard 이식. + * 정상 경로: GET /api/admin/dashboard?tenant (실집계 — 진행/예정 행사·사용자·라이브 점유). + * 폴백: NETWORK/NOT_FOUND 시에만 sampleAdmin 로 강등. 관람객 추이는 센서 부재로 백엔드 빈배열 → 빈 상태. + */ +export function AdminDashboardPage() { + const { t } = useTranslation(); + const [tenant, setTenant] = useState(undefined); + + const q = useQuery({ + queryKey: ['admin-dashboard', tenant], + queryFn: () => adminApi.dashboard(tenant), + retry: false, + }); + + const degraded = isDegradable(q.error); + const data: AdminDashboardData | null = q.data ?? (degraded ? FALLBACK : null); + const hardError = q.isError && !degraded; + const tenants = data?.tenants?.length ? data.tenants : TENANTS; + const activeTenant = tenant ?? tenants[0]; + + return ( +

{t('admin.overviewTitle')}

{t('admin.overviewSub')}

+ + {t('admin.loginSlides')} + + + + +

+ + + + {degraded && ( +

+ {t('admin.offlineSample')} + {t('admin.degradedMsg')} +

+ )} + + {q.isLoading && } + + {hardError && ( + q.refetch()} /> + )} + + {data && ( + <> +

+ {data.kpis.length === 0 ? ( + + ) : ( + data.kpis.map((k, i) => ( +

+ {k.label} + {k.value} + {k.sub && {k.sub}} +

+ )) + )} +

+ +

{t('admin.hourlyVisitors')}

+ {data.visitorTrend.length === 0 ? ( + + ) : ( + + + + + + + + + + )} +

+ +

{t('admin.liveEvents')}

+ {data.liveEvents.length === 0 ? ( + + ) : ( +

+ {data.liveEvents.map((e) => ( +

{e.name}

{e.hall ?? t('admin.hallTbd')}

+ +

+ {t('admin.occupancy', { n: clamp(e.occupancy) })} +

+ ))} +

+ )} +

+ + )} +

+ ); +} + +const TOOLTIP_STYLE = { + fontSize: 12, + borderRadius: 8, + border: '1px solid #E4E7EC', + boxShadow: '0 4px 12px rgba(16,24,40,0.1)', +} as const; + +function AdminSkeleton() { + return ( + + ); +} + +function clamp(n: number): number { + return Math.max(0, Math.min(100, Math.round(n))); +} + +function isDegradable(error: unknown): boolean { + return ( + error instanceof ApiRequestError && + (error.code === 'NETWORK' || error.code === 'NOT_FOUND' || error.code === 'NOT_IMPLEMENTED') + ); +} + +/** + * 샘플 폴백(백엔드 shape 매핑) — 정상 경로는 실 API. NETWORK/NOT_FOUND 시에만 사용. + * 근거: 기존 sampleAdmin.ts(집계·센서 미구축 시연 데이터)를 AdminDashboardData 로 강등 변환. + */ +const FALLBACK: AdminDashboardData = { + kpis: ADMIN_KPIS.map((k) => ({ label: k.label, value: k.value, sub: k.delta ?? null })), + visitorTrend: VISITOR_TREND.map((p) => ({ hour: p.hour, count: p.today })), + liveEvents: LIVE_EVENTS.filter((e) => e.live).map((e) => ({ + eventId: e.id, + name: e.title, + hall: e.hallTime, + occupancy: e.progress ?? 60, + status: 'ongoing', + })), + tenants: TENANTS, +}; + +/** 관리 모듈 바로가기(M18) — 라우트는 App.tsx AdminGuard 배선과 동일. 첫 항목은 i18n 키. */ +const ADMIN_MODULES: [string, string][] = [ + ['admin.modUsers', '/admin/users'], + ['admin.modRoles', '/admin/roles'], + ['admin.modCodes', '/admin/codes'], + ['admin.modMenus', '/admin/menus'], + ['admin.modAudit', '/admin/audit'], + ['admin.modSettings', '/admin/settings'], + ['admin.modRulesets', '/admin/masterdata/rulesets'], + ['admin.modTenants', '/admin/tenants'], +]; diff --git a/src/frontend/src/screens/admin/AdminGuard.tsx b/src/frontend/src/screens/admin/AdminGuard.tsx new file mode 100644 index 0000000..a148a5b --- /dev/null +++ b/src/frontend/src/screens/admin/AdminGuard.tsx @@ -0,0 +1,53 @@ +/* + * 관리자 백오피스(M18) 프론트 RBAC 가드 — 방어 심층화(Defense-in-depth). + * 백엔드 SystemAccessGuard.requireAdmin 이 최종 권위(홀매니저 || app_user.role_code=ADMIN)이며, + * 이 컴포넌트는 비관리자에게 관리자 화면 UI 를 노출하지 않기 위한 프론트 게이트다. + * + * ★ 판정 근거: authStore(AuthUser)는 이제 전역 role_code(app_user.role_code)를 순증 노출한다. + * 프론트 관리자 신호 = roleCode==='ADMIN' || roleCode==='MANAGER' || hallManager===true, + * 보조 폴백으로 현재 행사 역할 HALL_MANAGER. roleCode 는 로그인 응답 user.roleCode 로 전달된다 + * (관람객 등 미지정 계정은 null → 비관리자). 백엔드 SystemAccessGuard.requireAdmin 이 최종 권위이며, + * 이 게이트는 UI 노출 차단(방어 심층화) 목적이다. (기존 hallManager 단독 판정의 전역 ADMIN/MANAGER + * 식별 불가 한계는 roleCode 순증으로 해소.) + * + * 사용(통합자 배선): 관리자 라우트 element 를 로 감싼다. App.tsx 는 이 트랙에서 수정하지 않는다. + */ +import type { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useAuthStore } from '../../store/authStore'; +import { IconBlock } from '../../components/ui/icons'; +import './admin-modules.css'; + +/** 프론트에서 확인 가능한 관리자 접근 여부(백엔드가 최종 권위). */ +export function useIsAdmin(): boolean { + const user = useAuthStore((s) => s.user); + const roleForCurrent = useAuthStore((s) => s.roleForCurrent); + if (!user) return false; + const role = (user.roleCode ?? '').toUpperCase(); + if (role === 'ADMIN' || role === 'MANAGER') return true; + if (user.hallManager) return true; + return roleForCurrent() === 'HALL_MANAGER'; // 폴백: 현재 행사 홀매니저 역할 +} + +export function AdminGuard({ children }: { children: ReactNode }) { + const { t } = useTranslation(); + const authed = useAuthStore((s) => s.isAuthenticated); + const isAdmin = useIsAdmin(); + + if (authed && isAdmin) return <>{children}; + + return ( +

+ +

{t('admin.deniedTitle')}

+ {authed ? t('admin.deniedAuthed') : t('admin.deniedGuest')} +

403 · FORBIDDEN

+ ); +} diff --git a/src/frontend/src/screens/admin/AuditLogPage.tsx b/src/frontend/src/screens/admin/AuditLogPage.tsx new file mode 100644 index 0000000..70f2ab2 --- /dev/null +++ b/src/frontend/src/screens/admin/AuditLogPage.tsx @@ -0,0 +1,314 @@ +/* + * SCR-A5 감사로그 (M18 · §5B-1). Stitch scr_a5 이식 + 라이브 백엔드 실배선. + * 정본: GET /api/admin/audit?action&actorId&eventId&page&size → PageResponse (AuditLogController). + * 보안: 백엔드 DTO에 IP/자격증명 원문 미포함 → IP 컬럼 미표시(포렌식·PII 무결성). summary 는 백엔드가 정제(민감정보 제거). + * 상태 3종: 로딩 스켈레톤 / 빈 / 에러(재시도). 포렌식 무결성 원칙상 샘플 폴백을 두지 않는다. + * CSV 내보내기: 현재 페이지 로드분만 클라이언트 생성(서버측 전량 export 엔드포인트는 미제공 — 갭). + */ +import { useState } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { Trans, useTranslation } from 'react-i18next'; +import type { TFunction } from 'i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconDownload, IconSearch } from '../../components/ui/icons'; +import { auditApi, KNOWN_AUDIT_ACTIONS, type AuditLogRow } from './adminModulesApi'; +import './admin-modules.css'; + +const PAGE_SIZES = [20, 50, 100]; + +export function AuditLogPage() { + const { t } = useTranslation(); + const [action, setAction] = useState(''); + const [actorId, setActorId] = useState(''); + const [eventId, setEventId] = useState(''); + const [size, setSize] = useState(50); + const [page, setPage] = useState(0); + // 실제 조회에 반영된 확정 필터(입력과 분리 — "필터 적용" 클릭 시 반영) + const [applied, setApplied] = useState<{ action: string; actorId: string; eventId: string }>({ + action: '', + actorId: '', + eventId: '', + }); + + const q = useQuery({ + queryKey: ['admin-audit', applied, page, size], + queryFn: () => + auditApi.search({ + action: applied.action || undefined, + actorId: applied.actorId || undefined, + eventId: applied.eventId || undefined, + page, + size, + }), + retry: false, + }); + + const rows = q.data?.items ?? []; + const total = q.data?.total ?? 0; + const totalPages = Math.max(1, Math.ceil(total / size)); + const from = total === 0 ? 0 : page * size + 1; + const to = Math.min(total, (page + 1) * size); + + function applyFilters() { + setPage(0); + setApplied({ action, actorId, eventId }); + } + function resetFilters() { + setAction(''); + setActorId(''); + setEventId(''); + setPage(0); + setApplied({ action: '', actorId: '', eventId: '' }); + } + + return ( +

{t('audit.title')}

+ {t('audit.subtitle')} +

+ +

+ + {/* 필터 바 */} +

+ + {t('audit.actionType')} + setAction(e.target.value)} + /> + + {KNOWN_AUDIT_ACTIONS.map((a) => ( + + + + {t('audit.actorId')} + setActorId(e.target.value)} + /> + + + {t('audit.eventId')} + setEventId(e.target.value)} + /> + +

+ + +

+ + {/* 본문 */} + {q.isLoading && } + + {q.isError && !q.isLoading && ( + q.refetch()} /> + )} + + {!q.isLoading && !q.isError && ( +

+ {rows.length === 0 ? ( + + ) : ( + <> +

+ + + + + + + + + + + + + {rows.map((r) => ( + + + + + + + + + ))} + +

{t('audit.colTime')}	{t('audit.colUser')}	{t('audit.colAction')}	{t('audit.colTarget')}	{t('audit.colEvent')}	{t('audit.colResult')}
{fmtTs(r.createdAt)}	+ + + + {r.actorName ?? '—'} + {r.actorId && ( + {r.actorId} + )} + + +	+ {r.action ?? '—'} + {r.summary && {r.summary}} +	+ {r.targetType ? ( + + {r.targetType} + {r.targetId && ( + #{r.targetId} + )} + + ) : ( + — + )} +	{r.eventId ?? '—'}	+ +

+ +

+ , ]} /> +

+
+ + + {page + 1} / {totalPages} + + +
+ + {t('audit.rowsShow')} + + +

+ + )} +

+ )} +

+ ); +} + +function ResultPill({ value }: { value: string | null }) { + const { t } = useTranslation(); + const v = (value ?? '').toUpperCase(); + const tone = + v === 'SUCCESS' || v === 'OK' + ? 'success' + : v === 'FAILURE' || v === 'FAIL' || v === 'ERROR' || v === 'DENIED' + ? 'error' + : 'neutral'; + const label = tone === 'success' ? t('audit.success') : tone === 'error' ? t('audit.failure') : value ?? '—'; + return {label}; +} + +function TableSkeleton() { + return ( + + ); +} + +function initial(name: string | null | undefined): string { + const s = (name ?? '').trim(); + return s ? s.charAt(0) : '?'; +} + +function fmtTs(s: string | null | undefined): string { + if (!s) return '—'; + const d = new Date(s); + if (Number.isNaN(d.getTime())) return s; + const p = (n: number) => String(n).padStart(2, '0'); + return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`; +} + +/** 현재 로드된 페이지 rows 를 CSV 로 내보낸다. IP/자격증명 컬럼은 애초에 존재하지 않는다. */ +function exportCsv(t: TFunction, rows: AuditLogRow[]): void { + if (rows.length === 0) return; + const headers = [ + t('audit.csvTime'), t('audit.csvActorId'), t('audit.csvActorName'), t('audit.csvAction'), + t('audit.csvTargetType'), t('audit.csvTargetId'), t('audit.csvEventId'), t('audit.csvResult'), t('audit.csvSummary'), + ]; + const esc = (v: unknown) => { + const s = v == null ? '' : String(v); + return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s; + }; + const lines = [ + headers.join(','), + ...rows.map((r) => + [r.createdAt, r.actorId, r.actorName, r.action, r.targetType, r.targetId, r.eventId, r.result, r.summary] + .map(esc) + .join(','), + ), + ]; + const blob = new Blob(['' + lines.join('\r\n')], { type: 'text/csv;charset=utf-8;' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `audit-log-${new Date().toISOString().slice(0, 10)}.csv`; + a.click(); + URL.revokeObjectURL(url); +} diff --git a/src/frontend/src/screens/admin/AuthPolicyPage.tsx b/src/frontend/src/screens/admin/AuthPolicyPage.tsx new file mode 100644 index 0000000..3d9218e --- /dev/null +++ b/src/frontend/src/screens/admin/AuthPolicyPage.tsx @@ -0,0 +1,120 @@ +/* + * W12 시스템관리 — 인증 정책(비밀번호·로그인 잠금·세션). + * 정본: GET/PUT /api/admin/auth-policy → AuthPolicy (AuthPolicyController). 서버가 범위 클램프. + * 로그인 잠금 수치는 LoginAttemptService(login.*)와 정합(관리 화면 계약). + */ +import { useEffect, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { errMessage, useToast } from '../work/workShared'; +import { authPolicyApi, type AuthPolicy, type AuthPolicySaveBody } from './systemBasicsApi'; +import './admin-modules.css'; + +export function AuthPolicyPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + const q = useQuery({ queryKey: ['admin-auth-policy'], queryFn: authPolicyApi.get, retry: false }); + const [form, setForm] = useState(null); + + useEffect(() => { + if (q.data) setForm(q.data); + }, [q.data]); + + const saveM = useMutation({ + mutationFn: (body: AuthPolicySaveBody) => authPolicyApi.save(body), + onSuccess: () => { + show(t('authPolicy.saved')); + qc.invalidateQueries({ queryKey: ['admin-auth-policy'] }); + }, + onError: (e) => show(errMessage(e)), + }); + + function num(key: keyof AuthPolicy, v: string) { + setForm((f) => (f ? { ...f, [key]: Number(v) } : f)); + } + function yn(key: keyof AuthPolicy, checked: boolean) { + setForm((f) => (f ? { ...f, [key]: checked ? 'Y' : 'N' } : f)); + } + function submit(e: React.FormEvent) { + e.preventDefault(); + if (!form) return; + const { updatedAt: _a, updatedBy: _b, ...body } = form; + saveM.mutate(body); + } + + return ( +
+
+
+
{t('authPolicy.title')}
+
{t('authPolicy.subtitle')}
+
+
+ + {q.isLoading && } + {q.isError && !q.isLoading && q.refetch()} />} + + {!q.isLoading && !q.isError && form && ( +
+
{t('authPolicy.pwSection')}
+
+ + {t('authPolicy.pwMinLength')} + num('pwMinLength', e.target.value)} /> + + + {t('authPolicy.pwExpireDays')} + num('pwExpireDays', e.target.value)} /> + + + yn('pwRequireUpper', e.target.checked)} /> + {t('authPolicy.pwRequireUpper')} + + + yn('pwRequireNumber', e.target.checked)} /> + {t('authPolicy.pwRequireNumber')} + + + yn('pwRequireSpecial', e.target.checked)} /> + {t('authPolicy.pwRequireSpecial')} + +
+ +
{t('authPolicy.lockSection')}
+
+ + {t('authPolicy.loginMaxFail')} + num('loginMaxFail', e.target.value)} /> + + + {t('authPolicy.lockMinutes')} + num('lockMinutes', e.target.value)} /> + + + {t('authPolicy.sessionTimeoutMin')} + num('sessionTimeoutMin', e.target.value)} /> + +
+ +
+ +
+
+ )} + {toast} +
+ ); +} diff --git a/src/frontend/src/screens/admin/CommonCodeAdminPage.tsx b/src/frontend/src/screens/admin/CommonCodeAdminPage.tsx new file mode 100644 index 0000000..feef8a6 --- /dev/null +++ b/src/frontend/src/screens/admin/CommonCodeAdminPage.tsx @@ -0,0 +1,409 @@ +/* + * M18 공통코드 관리 (SCR-A3 · §5B). CommonCodeController 실배선. + * 정본: GET /api/common/code-groups(인증) · GET /api/common/codes/{grp}(인증) · POST /api/admin/codes/groups · POST /api/admin/codes · + * DELETE /api/admin/codes/groups/{grp} · DELETE /api/admin/codes/{grp}/{code} (ADMIN). + * UI: 좌 그룹 목록(선택·추가), 우 코드 값 테이블(추가/수정/삭제 모달). 저장은 upsert(코드 존재 시 갱신). + */ +import { useEffect, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconPlus } from '../../components/ui/icons'; +import { errMessage, useToast } from '../work/workShared'; +import { codeApi, type Code, type CodeGroup } from './adminCrudApi'; +import './admin-modules.css'; + +export function CommonCodeAdminPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + + const groupsQ = useQuery({ queryKey: ['admin-code-groups'], queryFn: codeApi.groups, retry: false }); + const [selected, setSelected] = useState(null); + const [groupModal, setGroupModal] = useState(undefined); + const [codeModal, setCodeModal] = useState(undefined); + + const groups = groupsQ.data ?? []; + useEffect(() => { + if (!selected && groups.length > 0) setSelected(groups[0].grpCode); + }, [groups, selected]); + + const activeGroup = groups.find((g) => g.grpCode === selected) ?? null; + + const codesQ = useQuery({ + queryKey: ['admin-codes', selected], + queryFn: () => codeApi.codes(selected as string), + enabled: !!selected, + retry: false, + }); + + const saveGroupM = useMutation({ + mutationFn: (g: CodeGroup) => codeApi.saveGroup(g), + onSuccess: (_d, g) => { + show(t('code.groupSaved')); + setGroupModal(undefined); + setSelected(g.grpCode); + qc.invalidateQueries({ queryKey: ['admin-code-groups'] }); + }, + onError: (e) => show(errMessage(e)), + }); + const delGroupM = useMutation({ + mutationFn: (grpCode: string) => codeApi.removeGroup(grpCode), + onSuccess: () => { + show(t('code.groupDeleted')); + setSelected(null); + qc.invalidateQueries({ queryKey: ['admin-code-groups'] }); + }, + onError: (e) => show(errMessage(e)), + }); + const saveCodeM = useMutation({ + mutationFn: (c: Code) => codeApi.saveCode(c), + onSuccess: () => { + show(t('code.codeSaved')); + setCodeModal(undefined); + qc.invalidateQueries({ queryKey: ['admin-codes', selected] }); + }, + onError: (e) => show(errMessage(e)), + }); + const delCodeM = useMutation({ + mutationFn: ({ grpCode, code }: { grpCode: string; code: string }) => codeApi.removeCode(grpCode, code), + onSuccess: () => { + show(t('code.codeDeleted')); + qc.invalidateQueries({ queryKey: ['admin-codes', selected] }); + }, + onError: (e) => show(errMessage(e)), + }); + + const codes = codesQ.data ?? []; + + return ( + + + + {t('code.title')} + {t('code.subtitle')} + + + + + {groupsQ.isLoading && } + {groupsQ.isError && !groupsQ.isLoading && ( + groupsQ.refetch()} /> + )} + + {!groupsQ.isLoading && !groupsQ.isError && ( + groups.length === 0 ? ( + + ) : ( + + {/* 좌: 그룹 */} + + + {t('code.codeGroup')} + + + {groups.map((g) => ( + + + + ))} + + + + {/* 우: 코드 값 */} + + + + {t('code.valuesOf', { name: activeGroup?.grpName ?? t('code.code') })} + {activeGroup?.description && {activeGroup.description}} + + + {activeGroup && ( + <> + + + + + )} + + + + {codesQ.isLoading && } + {codesQ.isError && !codesQ.isLoading && ( + + codesQ.refetch()} /> + + )} + {!codesQ.isLoading && !codesQ.isError && ( + codes.length === 0 ? ( + + + + ) : ( + + + + + + + + + + + + + + {codes.map((c) => ( + + + + + + + + + ))} + + {t('code.code')} {t('code.name')} {t('code.value')} {t('code.sort')} {t('code.use')} {t('code.manage')} {c.code} {c.codeName} {c.codeValue ?? '—'} {c.sortOrder} + + {c.useYn === 'N' ? t('code.unused') : t('code.used')} + + + + + + + + + ) + )} + + + ) + )} + + {groupModal !== undefined && ( + g.grpCode)} + saving={saveGroupM.isPending} + onClose={() => setGroupModal(undefined)} + onSubmit={(g) => saveGroupM.mutate(g)} + /> + )} + {codeModal !== undefined && activeGroup && ( + c.code)} + saving={saveCodeM.isPending} + onClose={() => setCodeModal(undefined)} + onSubmit={(c) => saveCodeM.mutate(c)} + /> + )} + {toast} + + ); +} + +function GroupModal({ + group, + existingCodes, + saving, + onClose, + onSubmit, +}: { + group: CodeGroup | null; + existingCodes: string[]; + saving: boolean; + onClose: () => void; + onSubmit: (g: CodeGroup) => void; +}) { + const { t } = useTranslation(); + const isNew = group === null; + const [grpCode, setGrpCode] = useState(group?.grpCode ?? ''); + const [grpName, setGrpName] = useState(group?.grpName ?? ''); + const [description, setDescription] = useState(group?.description ?? ''); + const [useYn, setUseYn] = useState(group?.useYn ?? 'Y'); + const [sortOrder, setSortOrder] = useState(String(group?.sortOrder ?? 0)); + const [error, setError] = useState(null); + + function submit(e: React.FormEvent) { + e.preventDefault(); + setError(null); + if (!grpCode.trim() || !grpName.trim()) { + setError(t('code.errGroupRequired')); + return; + } + if (isNew && existingCodes.includes(grpCode.trim())) { + setError(t('code.errDupGroup')); + return; + } + onSubmit({ + grpCode: grpCode.trim(), + grpName: grpName.trim(), + description: description.trim() || null, + useYn, + sortOrder: Number(sortOrder) || 0, + }); + } + + return ( + + + + {isNew ? t('code.addGroup') : t('code.editGroup')} + + + {t('code.groupCode')} + setGrpCode(e.target.value)} /> + + + {t('code.groupName')} + setGrpName(e.target.value)} /> + + + {t('code.description')} + setDescription(e.target.value)} /> + + + {t('code.sort')} + setSortOrder(e.target.value)} /> + + + {t('code.useYn')} + + + + {error && {error}} + + + + + + + ); +} + +function CodeModal({ + grpCode, + code, + existingCodes, + saving, + onClose, + onSubmit, +}: { + grpCode: string; + code: Code | null; + existingCodes: string[]; + saving: boolean; + onClose: () => void; + onSubmit: (c: Code) => void; +}) { + const { t } = useTranslation(); + const isNew = code === null; + const [codeVal, setCodeVal] = useState(code?.code ?? ''); + const [codeName, setCodeName] = useState(code?.codeName ?? ''); + const [codeValue, setCodeValue] = useState(code?.codeValue ?? ''); + const [attr1, setAttr1] = useState(code?.attr1 ?? ''); + const [sortOrder, setSortOrder] = useState(String(code?.sortOrder ?? 0)); + const [useYn, setUseYn] = useState(code?.useYn ?? 'Y'); + const [error, setError] = useState(null); + + function submit(e: React.FormEvent) { + e.preventDefault(); + setError(null); + if (!codeVal.trim() || !codeName.trim()) { + setError(t('code.errCodeRequired')); + return; + } + if (isNew && existingCodes.includes(codeVal.trim())) { + setError(t('code.errDupCode')); + return; + } + onSubmit({ + grpCode, + code: codeVal.trim(), + codeName: codeName.trim(), + codeValue: codeValue.trim() || null, + sortOrder: Number(sortOrder) || 0, + useYn, + attr1: attr1.trim() || null, + }); + } + + return ( + + + + {isNew ? t('code.addCode') : t('code.editCode')} + {t('code.group')} {grpCode} + + + {t('code.codeReq')} + setCodeVal(e.target.value)} /> + + + {t('code.nameReq')} + setCodeName(e.target.value)} /> + + + {t('code.value')} + setCodeValue(e.target.value)} /> + + + {t('code.attr1')} + setAttr1(e.target.value)} /> + + + {t('code.sort')} + setSortOrder(e.target.value)} /> + + + {t('code.useYn')} + + + + {error && {error}} + + + + + + + ); +} diff --git a/src/frontend/src/screens/admin/CompanyAdminPage.tsx b/src/frontend/src/screens/admin/CompanyAdminPage.tsx new file mode 100644 index 0000000..f937db1 --- /dev/null +++ b/src/frontend/src/screens/admin/CompanyAdminPage.tsx @@ -0,0 +1,232 @@ +/* + * W12 시스템관리 — 회사(거래처) 관리. + * 정본: GET/POST /api/admin/companies · DELETE /{id} (CompanyController). 목록 PageResponse, 연락처 마스킹. + * 보안: 목록의 contactTel 은 마스킹되어 도착. 수정 시 마스킹된 값을 다시 전송하면 마스킹이 저장되므로 + * 전화 필드는 편집 시 공란 시작(미입력=미변경 아님 → 명시적으로 다시 입력) — 화면 안내. + */ +import { useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconPlus, IconSearch } from '../../components/ui/icons'; +import { errMessage, useToast } from '../work/workShared'; +import { companyApi, PARTNER_TYPES, type Company, type CompanySaveBody } from './systemBasicsApi'; +import { Pager } from './LoginHistoryPage'; +import './admin-modules.css'; + +export function CompanyAdminPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + const [keyword, setKeyword] = useState(''); + const [partnerType, setPartnerType] = useState(''); + const [applied, setApplied] = useState<{ keyword: string; partnerType: string }>({ keyword: '', partnerType: '' }); + const [page, setPage] = useState(0); + const size = 20; + const [editing, setEditing] = useState(undefined); + + const q = useQuery({ + queryKey: ['admin-companies', applied, page], + queryFn: () => companyApi.list({ ...applied, page, size }), + retry: false, + }); + const rows = q.data?.items ?? []; + const total = q.data?.total ?? 0; + const totalPages = Math.max(1, Math.ceil(total / size)); + + const saveM = useMutation({ + mutationFn: (body: CompanySaveBody) => companyApi.save(body), + onSuccess: () => { show(t('company.saved')); setEditing(undefined); qc.invalidateQueries({ queryKey: ['admin-companies'] }); }, + onError: (e) => show(errMessage(e)), + }); + const delM = useMutation({ + mutationFn: (id: string) => companyApi.remove(id), + onSuccess: () => { show(t('company.deleted')); qc.invalidateQueries({ queryKey: ['admin-companies'] }); }, + onError: (e) => show(errMessage(e)), + }); + + function apply() { setPage(0); setApplied({ keyword, partnerType }); } + + return ( + + + + {t('company.title')} + {t('company.subtitle')} + + + + + + + + {t('sysadmin.keyword')} + setKeyword(e.target.value)} + placeholder={t('company.searchPh')} /> + + + {t('company.partnerType')} + + + + + + + + + {q.isLoading && } + {q.isError && !q.isLoading && q.refetch()} />} + + {!q.isLoading && !q.isError && ( + + {rows.length === 0 ? ( + + ) : ( + <> + + + + + + + + + + + + + + {rows.map((r) => ( + + + + + + + + + + ))} + + {t('company.colName')} {t('company.colBizNo')} {t('company.colType')} {t('company.colContact')} {t('company.colTel')} {t('company.colUse')} + {r.companyName} {r.bizNo ?? '-'} {r.partnerType ? t(`company.pt_${r.partnerType}`) : '-'} {r.contactName ?? '-'} {r.contactTel ?? '-'} {r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')} + + + + + setPage((p) => Math.max(0, p - 1))} + onNext={() => setPage((p) => Math.min(totalPages - 1, p + 1))} /> + + )} + + )} + + {editing !== undefined && ( + setEditing(undefined)} onSubmit={(b) => saveM.mutate(b)} /> + )} + {toast} + + ); +} + +function CompanyModal({ company, saving, onClose, onSubmit }: { + company: Company | null; saving: boolean; onClose: () => void; onSubmit: (b: CompanySaveBody) => void; +}) { + const { t } = useTranslation(); + const isNew = company === null; + const [companyName, setName] = useState(company?.companyName ?? ''); + const [bizNo, setBizNo] = useState(company?.bizNo ?? ''); + const [ceoName, setCeo] = useState(company?.ceoName ?? ''); + const [bizType, setBizType] = useState(company?.bizType ?? ''); + const [contactName, setContact] = useState(company?.contactName ?? ''); + const [contactTel, setTel] = useState(''); // 마스킹 방지: 편집 시 공란 시작 + const [address, setAddress] = useState(company?.address ?? ''); + const [partnerType, setPartner] = useState(company?.partnerType ?? ''); + const [useYn, setUseYn] = useState(company?.useYn ?? 'Y'); + const [error, setError] = useState(null); + + function submit(e: React.FormEvent) { + e.preventDefault(); + if (!companyName.trim()) { setError(t('company.errRequired')); return; } + onSubmit({ + id: company?.id ?? null, + companyName: companyName.trim(), + bizNo: bizNo.trim() || null, + ceoName: ceoName.trim() || null, + bizType: bizType.trim() || null, + contactName: contactName.trim() || null, + contactTel: contactTel.trim() || null, + address: address.trim() || null, + partnerType: partnerType || null, + useYn, + }); + } + + return ( + + + + {isNew ? t('company.add') : t('company.edit')} + + + {t('company.colName')} + setName(e.target.value)} /> + + + {t('company.colBizNo')} + setBizNo(e.target.value)} /> + + + {t('company.ceo')} + setCeo(e.target.value)} /> + + + {t('company.partnerType')} + + + + {t('company.bizType')} + setBizType(e.target.value)} /> + + + {t('company.contact')} + setContact(e.target.value)} /> + + + {t('company.tel')} + setTel(e.target.value)} + placeholder={isNew ? '' : t('company.telEditHint')} /> + + + {t('company.address')} + setAddress(e.target.value)} /> + + + {t('sysadmin.useYn')} + + + + {!isNew && {t('company.telMaskNote')}} + {error && {error}} + + + + + + + ); +} diff --git a/src/frontend/src/screens/admin/DeptAdminPage.tsx b/src/frontend/src/screens/admin/DeptAdminPage.tsx new file mode 100644 index 0000000..56881c8 --- /dev/null +++ b/src/frontend/src/screens/admin/DeptAdminPage.tsx @@ -0,0 +1,417 @@ +/* + * W12 시스템관리 — 조직(부서) 관리. WISE 조직도(UIWS system/dept·org) 이식. + * 좌: 부서 계층 트리(상위→하위 들여쓰기·펼침/접힘·정렬/사용 배지·선택 강조·통합검색·자동펼침). + * 우: 선택 부서 상세(부서명·ID·상위경로·정렬·사용·하위 수) + CRUD(하위 추가/수정/삭제, 최상위 추가). + * 정본 계약(불변): GET/POST /api/admin/depts · DELETE /{id} (DeptController). 트리 응답(children 중첩), upsert 저장. + * 표현만 트리 조직도화 — 삭제 가드(하위 존재 시 클라 선검사 + 서버 권위). + */ +import { useEffect, useMemo, useRef, useState, type FormEvent, type ReactNode } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { + IconPlus, IconUsers, IconSearch, IconChevronRight, IconChevronDown, +} from '../../components/ui/icons'; +import { errMessage, useToast } from '../work/workShared'; +import { deptApi, type DeptNode, type DeptSaveBody } from './systemBasicsApi'; +import './admin-modules.css'; +import './dept-admin.css'; + +// ── 트리 유틸 ───────────────────────────────────────────── +/** id → 노드 인덱스(상세·경로·부모명 조회). */ +function indexNodes(nodes: DeptNode[]): Map { + const map = new Map(); + const walk = (ns: DeptNode[]) => { + for (const n of ns) { map.set(n.id, n); walk(n.children ?? []); } + }; + walk(nodes); + return map; +} + +/** 전위순회 평면화 — 부모 후보 select·정렬값 산출. */ +function flattenNodes(nodes: DeptNode[], acc: DeptNode[] = []): DeptNode[] { + for (const n of nodes) { acc.push(n); flattenNodes(n.children ?? [], acc); } + return acc; +} + +/** 모든 노드 id(전체 펼침용). */ +function collectIds(nodes: DeptNode[], acc: string[] = []): string[] { + for (const n of nodes) { acc.push(n.id); collectIds(n.children ?? [], acc); } + return acc; +} + +interface FlatRow { node: DeptNode; depth: number; hasChildren: boolean } +/** 펼침 상태를 반영해 가시 행만 평탄화. */ +function flattenVisible(nodes: DeptNode[], expanded: Set, depth = 0, acc: FlatRow[] = []): FlatRow[] { + for (const node of nodes) { + const hasChildren = (node.children?.length ?? 0) > 0; + acc.push({ node, depth, hasChildren }); + if (hasChildren && expanded.has(node.id)) flattenVisible(node.children!, expanded, depth + 1, acc); + } + return acc; +} + +/** 부서명 매칭 id 집합 + 조상(자동 펼침용). */ +function computeMatches(nodes: DeptNode[], q: string): { matched: Set; ancestors: Set } { + const matched = new Set(); + const ancestors = new Set(); + const lc = q.toLowerCase(); + const walk = (node: DeptNode, chain: string[]) => { + if (node.deptName.toLowerCase().includes(lc)) { + matched.add(node.id); + chain.forEach((a) => ancestors.add(a)); + } + (node.children ?? []).forEach((c) => walk(c, [...chain, node.id])); + }; + nodes.forEach((n) => walk(n, [])); + return { matched, ancestors }; +} + +/** 선택 부서의 전체 경로(루트 › … › 부서). */ +function deptPath(id: string, index: Map): string { + const parts: string[] = []; + let cur: DeptNode | undefined = index.get(id); + const guard = new Set(); + while (cur && !guard.has(cur.id)) { + guard.add(cur.id); + parts.unshift(cur.deptName); + cur = cur.parentId ? index.get(cur.parentId) : undefined; + } + return parts.join(' › '); +} + +/** 자손 id 집합(부모 후보 순환 제외용). */ +function descendantsOf(node: DeptNode): Set { + const set = new Set(); + const walk = (n: DeptNode) => (n.children ?? []).forEach((c) => { set.add(c.id); walk(c); }); + walk(node); + return set; +} + +/** 검색어 하이라이트. */ +function Highlight({ text, term }: { text: string; term: string }): ReactNode { + if (!term) return text; + const idx = text.toLowerCase().indexOf(term.toLowerCase()); + if (idx < 0) return text; + return ( + <> + {text.slice(0, idx)} + {text.slice(idx, idx + term.length)} + {text.slice(idx + term.length)} + + ); +} + +// ── 메인 ────────────────────────────────────────────────── +type ModalState = + | { mode: 'create'; parentId: string | null } + | { mode: 'edit'; node: DeptNode } + | null; + +export function DeptAdminPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + const q = useQuery({ queryKey: ['admin-depts'], queryFn: deptApi.tree, retry: false }); + + const [expanded, setExpanded] = useState>(new Set()); + const [selectedId, setSelectedId] = useState(null); + const [query, setQuery] = useState(''); + const [debouncedQ, setDebouncedQ] = useState(''); + const [modal, setModal] = useState(null); + const bootRef = useRef(false); + + const tree = q.data ?? []; + const index = useMemo(() => indexNodes(tree), [tree]); + const flat = useMemo(() => flattenNodes(tree), [tree]); + + // 최초 로드 시 전체 펼침 + 첫 부서 선택. + useEffect(() => { + if (!q.data || bootRef.current) return; + bootRef.current = true; + setExpanded(new Set(collectIds(q.data))); + if (q.data.length > 0) setSelectedId(q.data[0].id); + }, [q.data]); + + // 검색 디바운스 250ms. + useEffect(() => { + const id = window.setTimeout(() => setDebouncedQ(query.trim()), 250); + return () => window.clearTimeout(id); + }, [query]); + + const searching = debouncedQ.length > 0; + const matches = useMemo(() => (searching ? computeMatches(tree, debouncedQ) : null), [searching, tree, debouncedQ]); + useEffect(() => { + if (!matches) return; + setExpanded((prev) => { + const next = new Set(prev); + matches.ancestors.forEach((a) => next.add(a)); + matches.matched.forEach((d) => next.add(d)); + return next; + }); + }, [matches]); + + const rows = useMemo(() => flattenVisible(tree, expanded), [tree, expanded]); + const selectedNode = selectedId ? index.get(selectedId) ?? null : null; + const nextSort = useMemo(() => flat.reduce((m, d) => Math.max(m, d.sortOrder ?? 0), 0) + 1, [flat]); + + const toggle = (id: string) => setExpanded((prev) => { + const next = new Set(prev); + if (next.has(id)) next.delete(id); else next.add(id); + return next; + }); + + const saveM = useMutation({ + mutationFn: (body: DeptSaveBody) => deptApi.save(body), + onSuccess: () => { show(t('dept.saved')); setModal(null); qc.invalidateQueries({ queryKey: ['admin-depts'] }); }, + onError: (e) => show(errMessage(e)), + }); + const delM = useMutation({ + mutationFn: (id: string) => deptApi.remove(id), + onSuccess: (_r, id) => { + show(t('dept.deleted')); + if (selectedId === id) setSelectedId(index.get(id)?.parentId ?? null); + qc.invalidateQueries({ queryKey: ['admin-depts'] }); + }, + onError: (e) => show(errMessage(e)), + }); + + const onDelete = (node: DeptNode) => { + if ((node.children?.length ?? 0) > 0) { show(t('dept.errHasChildren')); return; } + if (window.confirm(t('dept.deleteConfirm', { name: node.deptName }))) delM.mutate(node.id); + }; + + return ( + + + + {t('dept.title')} + {t('dept.subtitle')} + + + + + + + + + {q.isLoading && } + {q.isError && !q.isLoading && q.refetch()} />} + + {!q.isLoading && !q.isError && ( + <> + + + + setQuery(e.target.value)} + aria-label={t('dept.searchPlaceholder')} + /> + + + + {flat.length === 0 ? ( + + + + ) : ( + + {/* 좌 — 부서 트리 */} + + + {rows.length === 0 ? ( + {t('dept.searchNoResult')} + ) : rows.map(({ node, depth, hasChildren }) => { + const selected = node.id === selectedId; + const open = expanded.has(node.id); + return ( + { setSelectedId(node.id); setQuery(''); }} + > + {hasChildren ? ( + + ) : ( + + )} + + + #{node.sortOrder ?? 0} + {node.useYn === 'N' && {t('sysadmin.noUse')}} + + ); + })} + + + + {/* 우 — 선택 부서 상세/편집 */} + + {!selectedNode ? ( + + + {t('dept.selectHint')} + + ) : ( + <> + + + {selectedNode.deptName} + {deptPath(selectedNode.id, index)} + + + + + + + + + + {t('dept.name')} {selectedNode.deptName} + + + {t('dept.colId')} {selectedNode.id} + + + {t('dept.colParent')} + {selectedNode.parentId + ? `${index.get(selectedNode.parentId)?.deptName ?? selectedNode.parentId}` + : t('dept.topLevel')} + + + {t('sysadmin.sortOrder')} #{selectedNode.sortOrder ?? 0} + + + {t('sysadmin.useYn')} + {selectedNode.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')} + + + {t('dept.colChildCount')} + {t('dept.childCountValue', { n: selectedNode.children?.length ?? 0 })} + + + + )} + + + )} + + )} + + {modal && ( + setModal(null)} + onSubmit={(b) => saveM.mutate(b)} + /> + )} + {toast} + + ); +} + +// ── 추가/수정 모달(상위 부서 선택 포함) ── +function DeptModal({ state, allDepts, nextSort, saving, onClose, onSubmit }: { + state: NonNullable; + allDepts: DeptNode[]; + nextSort: number; + saving: boolean; + onClose: () => void; + onSubmit: (b: DeptSaveBody) => void; +}) { + const { t } = useTranslation(); + const isEdit = state.mode === 'edit'; + const node = isEdit ? state.node : null; + const [deptName, setName] = useState(node?.deptName ?? ''); + const [parentId, setParentId] = useState(isEdit ? node!.parentId : state.parentId); + const [sortOrder, setSort] = useState(node?.sortOrder ?? nextSort); + const [useYn, setUseYn] = useState(node?.useYn ?? 'Y'); + const [error, setError] = useState(null); + + // 상위 후보: 수정 시 자기 자신 + 자손 배제(순환 방지). + const parentCandidates = useMemo(() => { + if (!isEdit) return allDepts; + const excluded = descendantsOf(node!); + excluded.add(node!.id); + return allDepts.filter((d) => !excluded.has(d.id)); + }, [isEdit, allDepts, node]); + + function submit(e: FormEvent) { + e.preventDefault(); + if (!deptName.trim()) { setError(t('dept.errRequired')); return; } + onSubmit({ id: node?.id ?? null, deptName: deptName.trim(), parentId, sortOrder, useYn }); + } + + return ( + + + + {isEdit ? t('dept.edit') : (state.parentId ? t('dept.addChild') : t('dept.add'))} + + + {t('dept.colParent')} + + + + {t('dept.name')} + setName(e.target.value)} /> + + + {t('sysadmin.sortOrder')} + setSort(Number(e.target.value))} /> + + + {t('sysadmin.useYn')} + + + + {error && {error}} + + + + + + + ); +} diff --git a/src/frontend/src/screens/admin/ErrorLogPage.tsx b/src/frontend/src/screens/admin/ErrorLogPage.tsx new file mode 100644 index 0000000..25c0a5c --- /dev/null +++ b/src/frontend/src/screens/admin/ErrorLogPage.tsx @@ -0,0 +1,98 @@ +/* + * W12 시스템관리 — 오류 로그 조회 (읽기전용). + * 정본: GET /api/admin/error-log?errorCode&page&size → PageResponse (ErrorLogController). + * 보안: summary 는 백엔드에서 요약 1줄로만 저장/전달(스택트레이스·민감정보 제외, §0-3). + */ +import { useState } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconSearch } from '../../components/ui/icons'; +import { fmtDateTime } from '../work/workShared'; +import { errorLogApi } from './systemBasicsApi'; +import { Pager } from './LoginHistoryPage'; +import './admin-modules.css'; + +export function ErrorLogPage() { + const { t } = useTranslation(); + const [errorCode, setErrorCode] = useState(''); + const [applied, setApplied] = useState(''); + const [page, setPage] = useState(0); + const size = 20; + + const q = useQuery({ + queryKey: ['admin-error-log', applied, page], + queryFn: () => errorLogApi.list(applied, page, size), + retry: false, + }); + const rows = q.data?.items ?? []; + const total = q.data?.total ?? 0; + const totalPages = Math.max(1, Math.ceil(total / size)); + + return ( + + + + {t('errorLog.title')} + {t('errorLog.subtitle')} + + + + + + + {t('errorLog.code')} + setErrorCode(e.target.value)} + placeholder={t('errorLog.codePh')} /> + + + + + + + + {q.isLoading && } + {q.isError && !q.isLoading && q.refetch()} />} + + {!q.isLoading && !q.isError && ( + + {rows.length === 0 ? ( + + ) : ( + <> + + + + + + + + + + + + + {rows.map((r) => ( + + + + + + + + ))} + + {t('errorLog.colTime')} {t('errorLog.colCode')} {t('errorLog.colMethod')} {t('errorLog.colPath')} {t('errorLog.colSummary')} {fmtDateTime(r.createdAt)} {r.errorCode ?? '-'} {r.method ?? '-'} {r.path ?? '-'} {r.summary ?? '-'} + + setPage((p) => Math.max(0, p - 1))} + onNext={() => setPage((p) => Math.min(totalPages - 1, p + 1))} /> + + )} + + )} + + ); +} diff --git a/src/frontend/src/screens/admin/HolidayAdminPage.tsx b/src/frontend/src/screens/admin/HolidayAdminPage.tsx new file mode 100644 index 0000000..6b3aeca --- /dev/null +++ b/src/frontend/src/screens/admin/HolidayAdminPage.tsx @@ -0,0 +1,271 @@ +/* + * 시스템관리 — 공휴일 관리 (SCR-A · §5B). HolidayController 실배선. + * 정본: GET /api/admin/holidays?year=(ADMIN) · POST/DELETE/PATCH /api/admin/holidays (ADMIN). + * UI: 연도 선택 + 공휴일 목록(날짜·요일·명칭·대체 배지·휴무 토글·삭제) + 임시공휴일 추가 모달. + * 데이터·시드(2024~2050)는 V41 소유 — 본 화면은 그 위 조회·임시공휴일 관리만. 캘린더 붉은색과 동일 소스. + */ +import { useMemo, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconPlus } from '../../components/ui/icons'; +import { errMessage, useToast } from '../work/workShared'; +import { holidayApi, type HolidayCreateBody } from './holidayApi'; +import './admin-modules.css'; + +/** 데이터 미존재 시 폴백 연도 목록(V41 시드 범위). */ +function fallbackYears(): number[] { + const arr: number[] = []; + for (let y = 2050; y >= 2024; y--) arr.push(y); + return arr; +} +function weekdayIndex(ymd: string): number { + const [y, m, d] = ymd.split('-').map(Number); + return new Date(y, (m || 1) - 1, d || 1).getDay(); +} + +export function HolidayAdminPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + + const yearsQ = useQuery({ queryKey: ['admin-holiday-years'], queryFn: holidayApi.years, retry: false }); + const years = yearsQ.data && yearsQ.data.length > 0 ? yearsQ.data : fallbackYears(); + const [year, setYear] = useState(new Date().getFullYear()); + const [adding, setAdding] = useState(false); + + const listQ = useQuery({ + queryKey: ['admin-holidays', year], + queryFn: () => holidayApi.adminList(year), + retry: false, + }); + const list = listQ.data ?? []; + + const createM = useMutation({ + mutationFn: (body: HolidayCreateBody) => holidayApi.create(body), + onSuccess: () => { + show(t('holiday.created')); + setAdding(false); + qc.invalidateQueries({ queryKey: ['admin-holidays'] }); + qc.invalidateQueries({ queryKey: ['admin-holiday-years'] }); + }, + onError: (e) => show(errMessage(e)), + }); + const delM = useMutation({ + mutationFn: (ymd: string) => holidayApi.remove(ymd), + onSuccess: () => { + show(t('holiday.deleted')); + qc.invalidateQueries({ queryKey: ['admin-holidays'] }); + }, + onError: (e) => show(errMessage(e)), + }); + const toggleM = useMutation({ + mutationFn: ({ ymd, isHoliday }: { ymd: string; isHoliday: boolean }) => + holidayApi.toggle(ymd, isHoliday), + onSuccess: () => { + show(t('holiday.toggled')); + qc.invalidateQueries({ queryKey: ['admin-holidays'] }); + }, + onError: (e) => show(errMessage(e)), + }); + + const count = useMemo(() => list.filter((h) => h.isHoliday).length, [list]); + + return ( + + + + {t('holiday.title')} + {t('holiday.subtitle')} + + + + {t('holiday.year')} + + + + + + + {listQ.isLoading && } + {listQ.isError && !listQ.isLoading && ( + listQ.refetch()} /> + )} + + {!listQ.isLoading && !listQ.isError && ( + list.length === 0 ? ( + + ) : ( + + + {t('holiday.listOf', { y: year })} + {t('holiday.count', { n: count })} + + + + + + + + + + + + + + + {list.map((h) => { + const dow = weekdayIndex(h.ymd); + const isSun = dow === 0; + return ( + + + + + + + + + ); + })} + + {t('holiday.date')} {t('holiday.weekday')} {t('holiday.name')} {t('holiday.type')} {t('holiday.status')} {t('holiday.manage')} + {h.ymd} + + {t(`common.weekday.${dow}`)} + + {h.name} + + {h.isSubstitute ? ( + {t('holiday.substitute')} + ) : ( + {t('holiday.legal')} + )} + + + {h.isHoliday ? t('holiday.on') : t('holiday.off')} + + + + + + + + + + ) + )} + + {adding && ( + h.ymd)} + saving={createM.isPending} + onClose={() => setAdding(false)} + onSubmit={(body) => createM.mutate(body)} + /> + )} + {toast} + + ); +} + +function HolidayAddModal({ + defaultYear, + existing, + saving, + onClose, + onSubmit, +}: { + defaultYear: number; + existing: string[]; + saving: boolean; + onClose: () => void; + onSubmit: (body: HolidayCreateBody) => void; +}) { + const { t } = useTranslation(); + const [ymd, setYmd] = useState(`${defaultYear}-01-01`); + const [name, setName] = useState(''); + const [isSubstitute, setIsSubstitute] = useState(false); + const [error, setError] = useState(null); + + function submit(e: React.FormEvent) { + e.preventDefault(); + setError(null); + if (!/^\d{4}-\d{2}-\d{2}$/.test(ymd) || !name.trim()) { + setError(t('holiday.errRequired')); + return; + } + if (existing.includes(ymd)) { + setError(t('holiday.errDup')); + return; + } + onSubmit({ ymd, name: name.trim(), isSubstitute }); + } + + return ( + + + + {t('holiday.add')} + + + {t('holiday.date')} + setYmd(e.target.value)} + /> + + + {t('holiday.name')} + setName(e.target.value)} /> + + + setIsSubstitute(e.target.checked)} + /> + {t('holiday.substituteHint')} + + + {error && {error}} + + + + + + + ); +} diff --git a/src/frontend/src/screens/admin/InfraConfigPage.tsx b/src/frontend/src/screens/admin/InfraConfigPage.tsx new file mode 100644 index 0000000..66d504c --- /dev/null +++ b/src/frontend/src/screens/admin/InfraConfigPage.tsx @@ -0,0 +1,115 @@ +/* + * W12 시스템관리 — 메일/알림 설정(sys_setting mail./notify. 프리픽스). + * 정본: GET/PUT /api/admin/mail-config · /api/admin/notify-config (MailConfigController/NotifyConfigController). + * 보안: secretYn='Y' 값은 마스킹(********)되어 도착 — 마스킹 그대로 저장하면 미변경 처리(원문 보존). + */ +import { useEffect, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { errMessage, useToast } from '../work/workShared'; +import { + CONFIG_MASK, mailConfigApi, notifyConfigApi, + type InfraConfigRow, type InfraConfigUpdateBody, +} from './systemBasicsApi'; +import './admin-modules.css'; + +type Variant = 'mail' | 'notify'; + +function InfraConfig({ variant }: { variant: Variant }) { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + const apiObj = variant === 'mail' ? mailConfigApi : notifyConfigApi; + const titleKey = variant === 'mail' ? 'mailConfig' : 'notifyConfig'; + + const q = useQuery({ queryKey: ['admin-infra', variant], queryFn: apiObj.list, retry: false }); + const [values, setValues] = useState>({}); + + useEffect(() => { + if (q.data) { + const v: Record = {}; + for (const r of q.data) v[r.settingKey] = r.settingValue ?? ''; + setValues(v); + } + }, [q.data]); + + const saveM = useMutation({ + mutationFn: (body: InfraConfigUpdateBody) => apiObj.save(body), + onSuccess: () => { show(t(`${titleKey}.saved`)); qc.invalidateQueries({ queryKey: ['admin-infra', variant] }); }, + onError: (e) => show(errMessage(e)), + }); + + function submit(e: React.FormEvent) { + e.preventDefault(); + const rows = q.data ?? []; + const items = rows.map((r) => ({ settingKey: r.settingKey, settingValue: values[r.settingKey] ?? '' })); + saveM.mutate({ items }); + } + + const rows = q.data ?? []; + + return ( + + + + {t(`${titleKey}.title`)} + {t(`${titleKey}.subtitle`)} + + + + {q.isLoading && } + {q.isError && !q.isLoading && q.refetch()} />} + + {!q.isLoading && !q.isError && ( + + + {rows.map((r) => ( + setValues((s) => ({ ...s, [r.settingKey]: v }))} /> + ))} + + + + + + )} + {toast} + + ); +} + +function ConfigField({ row, value, onChange }: { + row: InfraConfigRow; value: string; onChange: (v: string) => void; +}) { + const isBool = (row.valueType ?? '').toUpperCase() === 'BOOL'; + const isSecret = row.secretYn === 'Y'; + return ( + + + {row.settingKey} + {row.description && {row.description}} + + {isBool ? ( + + ) : ( + onChange(e.target.value)} /> + )} + + ); +} + +export function MailConfigPage() { + return ; +} +export function NotifyConfigPage() { + return ; +} diff --git a/src/frontend/src/screens/admin/LoginHistoryPage.tsx b/src/frontend/src/screens/admin/LoginHistoryPage.tsx new file mode 100644 index 0000000..1c42ca8 --- /dev/null +++ b/src/frontend/src/screens/admin/LoginHistoryPage.tsx @@ -0,0 +1,137 @@ +/* + * W12 시스템관리 — 로그인 이력(접속 세션) 조회 (읽기전용). + * 정본: GET /api/admin/login-history?result&userId&page&size → PageResponse (LoginHistoryController). + * 보안: 이메일/IP 는 백엔드에서 마스킹되어 도착(원문 미저장·미노출, §0-3). + */ +import { useState } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconSearch } from '../../components/ui/icons'; +import { fmtDateTime } from '../work/workShared'; +import { loginHistoryApi } from './systemBasicsApi'; +import './admin-modules.css'; + +const RESULTS = ['', 'SUCCESS', 'FAIL', 'LOCKED']; + +export function LoginHistoryPage() { + const { t } = useTranslation(); + const [result, setResult] = useState(''); + const [userId, setUserId] = useState(''); + const [applied, setApplied] = useState<{ result: string; userId: string }>({ result: '', userId: '' }); + const [page, setPage] = useState(0); + const size = 20; + + const q = useQuery({ + queryKey: ['admin-login-history', applied, page], + queryFn: () => loginHistoryApi.list(applied.result, applied.userId, page, size), + retry: false, + }); + const rows = q.data?.items ?? []; + const total = q.data?.total ?? 0; + const totalPages = Math.max(1, Math.ceil(total / size)); + + return ( + + + + {t('loginHistory.title')} + {t('loginHistory.subtitle')} + + + + + + + {t('loginHistory.result')} + + + + {t('loginHistory.userId')} + setUserId(e.target.value)} + placeholder={t('loginHistory.userIdPh')} /> + + + + + + + + {q.isLoading && } + {q.isError && !q.isLoading && q.refetch()} />} + + {!q.isLoading && !q.isError && ( + + {rows.length === 0 ? ( + + ) : ( + <> + + + + + + + + + + + + + + {rows.map((r) => ( + + + + + + + + + ))} + + {t('loginHistory.colTime')} {t('loginHistory.colResult')} {t('loginHistory.colUser')} {t('loginHistory.colEmail')} {t('loginHistory.colIp')} {t('loginHistory.colReason')} {fmtDateTime(r.createdAt)} {r.userId ?? '-'} {r.emailMasked ?? '-'} {r.ipMasked ?? '-'} {r.failReason ?? '-'} + + setPage((p) => Math.max(0, p - 1))} + onNext={() => setPage((p) => Math.min(totalPages - 1, p + 1))} /> + + )} + + )} + + ); +} + +function ResultPill({ value }: { value: string | null }) { + const { t } = useTranslation(); + const v = (value ?? '').toUpperCase(); + const tone = v === 'SUCCESS' ? 'success' : v === 'FAIL' || v === 'LOCKED' ? 'error' : 'neutral'; + const label = v ? t(`loginHistory.result_${v}`) : '-'; + return {label}; +} + +export function Pager({ page, totalPages, total, onPrev, onNext }: { + page: number; totalPages: number; total: number; onPrev: () => void; onNext: () => void; +}) { + const { t } = useTranslation(); + return ( + + {t('sysadmin.totalN', { n: total.toLocaleString() })} + + + {page + 1} / {totalPages} + + + + ); +} diff --git a/src/frontend/src/screens/admin/LoginSlideAdminPage.tsx b/src/frontend/src/screens/admin/LoginSlideAdminPage.tsx new file mode 100644 index 0000000..993a1bb --- /dev/null +++ b/src/frontend/src/screens/admin/LoginSlideAdminPage.tsx @@ -0,0 +1,259 @@ +import { useEffect, useRef, useState } from 'react'; +import { Trans, useTranslation } from 'react-i18next'; +import { loginSlideApi } from '../../api/endpoints'; +import { ApiRequestError } from '../../api/client'; +import type { LoginSlideDto } from '../../api/types'; +import { Button } from '../../components/ui/Button'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import './admin.css'; + +/** + * 관리자 — 로그인 슬라이드 관리 (M18 · /admin/login-slides). + * 로그인 화면 좌측 캐러셀에 노출할 이미지+문구를 등록·수정·삭제·활성 토글한다. + * 공개 노출 규칙: 활성 슬라이드 중 최신 등록순(created_at DESC) 최대 5건. + */ +export function LoginSlideAdminPage() { + const { t } = useTranslation(); + const [slides, setSlides] = useState(null); + const [loadError, setLoadError] = useState(null); + + // 추가 폼 상태 + const [file, setFile] = useState(null); + const [preview, setPreview] = useState(null); + const [title, setTitle] = useState(''); + const [caption, setCaption] = useState(''); + const [formError, setFormError] = useState(null); + const [submitting, setSubmitting] = useState(false); + const [busyId, setBusyId] = useState(null); + const fileInputRef = useRef(null); + + async function load() { + setLoadError(null); + setSlides(null); + try { + setSlides(await loginSlideApi.adminList()); + } catch (err) { + setSlides([]); + setLoadError(err instanceof ApiRequestError ? err.message : t('slide.listError')); + } + } + + useEffect(() => { + void load(); + }, []); + + // 파일 선택 → 미리보기 URL 관리(누수 방지 revoke) + useEffect(() => { + if (!file) { + setPreview(null); + return; + } + const url = URL.createObjectURL(file); + setPreview(url); + return () => URL.revokeObjectURL(url); + }, [file]); + + async function handleCreate(e: React.FormEvent) { + e.preventDefault(); + setFormError(null); + if (!file) { + setFormError(t('slide.errImage')); + return; + } + if (!title.trim()) { + setFormError(t('slide.errTitle')); + return; + } + setSubmitting(true); + try { + const created = await loginSlideApi.create(file, title.trim(), caption.trim()); + setSlides((prev) => [created, ...(prev ?? [])]); // 최신 등록이 맨 위(공개 로테이션 첫 슬라이드) + setFile(null); + setTitle(''); + setCaption(''); + if (fileInputRef.current) fileInputRef.current.value = ''; + } catch (err) { + setFormError(err instanceof ApiRequestError ? err.message : t('slide.createFail')); + } finally { + setSubmitting(false); + } + } + + async function handleToggleActive(slide: LoginSlideDto) { + setBusyId(slide.id); + try { + const updated = await loginSlideApi.update(slide.id, { + title: slide.title, + caption: slide.caption, + sortOrder: slide.sortOrder, + active: !slide.active, + }); + setSlides((prev) => (prev ?? []).map((s) => (s.id === slide.id ? updated : s))); + } catch (err) { + setLoadError(err instanceof ApiRequestError ? err.message : t('slide.updateFail')); + } finally { + setBusyId(null); + } + } + + async function handleDelete(slide: LoginSlideDto) { + if (!window.confirm(t('slide.deleteConfirm', { title: slide.title }))) return; + setBusyId(slide.id); + try { + await loginSlideApi.remove(slide.id); + setSlides((prev) => (prev ?? []).filter((s) => s.id !== slide.id)); + } catch (err) { + setLoadError(err instanceof ApiRequestError ? err.message : t('slide.deleteFail')); + } finally { + setBusyId(null); + } + } + + const activeCount = (slides ?? []).filter((s) => s.active).length; + + return ( + + + + {t('slide.title')} + + ]} /> + + + + + {/* 새 슬라이드 추가 */} + + + {t('slide.addTitle')} + + + + + + {t('slide.imageLabel')} + + setFile(e.target.files?.[0] ?? null)} + /> + + {!preview && {t('slide.preview')}} + + + + + {t('slide.titleLabel')} + setTitle(e.target.value)} + required + /> + + + {t('slide.captionLabel')} + setCaption(e.target.value)} + /> + + {formError && ( + + {formError} + + )} + + + + + + + + + {/* 목록 */} + + + + {t('slide.registered')}{' '} + {slides && ( + + {t('slide.countActive', { total: slides.length, active: activeCount })} + + )} + + + + {loadError && void load()} />} + + {slides === null ? ( + + + + + + ) : slides.length === 0 && !loadError ? ( + + ) : ( + + {slides.map((s, i) => ( + + + + + {s.title} + {s.active && i < 5 && {t('slide.live')}} + {!s.active && {t('slide.inactive')}} + + {s.caption && {s.caption}} + {t('slide.registeredAt', { date: s.createdAt })} + + + + void handleToggleActive(s)} + /> + {t('slide.active')} + + + + + ))} + + )} + + + ); +} diff --git a/src/frontend/src/screens/admin/MenuAdminPage.tsx b/src/frontend/src/screens/admin/MenuAdminPage.tsx new file mode 100644 index 0000000..36815ad --- /dev/null +++ b/src/frontend/src/screens/admin/MenuAdminPage.tsx @@ -0,0 +1,289 @@ +/* + * M18 메뉴 관리 (SCR-A4 · §5B). MenuController 실배선. + * 정본: GET /api/admin/menus → MenuNode[] (flat) · POST /api/admin/menus(upsert) · DELETE /api/admin/menus/{id}. + * UI: parentId 로 트리를 구성해 깊이 들여쓰기 표로 표시. 추가/수정 모달(상위 메뉴 선택·경로·역할·정렬·사용). + */ +import { useMemo, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconPlus } from '../../components/ui/icons'; +import { errMessage, useToast } from '../work/workShared'; +import { menuApi, MENU_PRG_TYPES, type MenuNode, type MenuSaveBody } from './adminCrudApi'; +import './admin-modules.css'; + +interface FlatMenu extends MenuNode { + depth: number; +} + +/** 서버 응답(flat 또는 nested)을 parentId 기준 깊이 정렬 평면 목록으로 정규화. */ +function toDepthList(nodes: MenuNode[]): FlatMenu[] { + // children 이 있으면 우선 평탄화 + const flat: MenuNode[] = []; + const walk = (arr: MenuNode[]) => { + for (const n of arr) { + flat.push(n); + if (n.children && n.children.length > 0) walk(n.children); + } + }; + walk(nodes); + const byId = new Map(flat.map((n) => [n.id, n])); + const childrenOf = new Map(); + for (const n of flat) { + const pid = n.parentId && byId.has(n.parentId) ? n.parentId : null; + const arr = childrenOf.get(pid) ?? []; + arr.push(n); + childrenOf.set(pid, arr); + } + const out: FlatMenu[] = []; + const emit = (pid: string | null, depth: number) => { + const arr = (childrenOf.get(pid) ?? []).sort((a, b) => a.sortOrder - b.sortOrder); + for (const n of arr) { + out.push({ ...n, depth }); + emit(n.id, depth + 1); + } + }; + emit(null, 0); + return out; +} + +export function MenuAdminPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + + const q = useQuery({ queryKey: ['admin-menus'], queryFn: menuApi.all, retry: false }); + const [editing, setEditing] = useState(undefined); + + const flat = useMemo(() => toDepthList(q.data ?? []), [q.data]); + + const saveM = useMutation({ + mutationFn: (body: MenuSaveBody) => menuApi.save(body), + onSuccess: () => { + show(t('menu.saved')); + setEditing(undefined); + qc.invalidateQueries({ queryKey: ['admin-menus'] }); + }, + onError: (e) => show(errMessage(e)), + }); + const delM = useMutation({ + mutationFn: (id: string) => menuApi.remove(id), + onSuccess: () => { + show(t('menu.deleted')); + qc.invalidateQueries({ queryKey: ['admin-menus'] }); + }, + onError: (e) => show(errMessage(e)), + }); + + return ( + + + + {t('menu.title')} + {t('menu.subtitle')} + + + + + {q.isLoading && } + {q.isError && !q.isLoading && ( + q.refetch()} /> + )} + + {!q.isLoading && !q.isError && ( + + {flat.length === 0 ? ( + + ) : ( + + + + + + + + + + + + + + + {flat.map((m) => ( + + + + + + + + + + ))} + + {t('menu.colName')} {t('menu.colPath')} {t('menu.colType')} {t('menu.colRole')} {t('menu.colSort')} {t('menu.colUse')} {t('menu.colManage')} + + {m.depth > 0 && ( + + {' '.repeat(m.depth)}└ + + )} + {m.menuName} + + {m.menuPath ?? '—'} {m.prgType ?? '—'} {m.requiredRole ?? t('menu.all')} {m.sortOrder} + + {m.useYn === 'N' ? t('menu.unused') : t('menu.used')} + + + + + + + + + )} + + )} + + {editing !== undefined && ( + setEditing(undefined)} + onSubmit={(body) => saveM.mutate(body)} + /> + )} + {toast} + + ); +} + +function MenuModal({ + menu, + options, + saving, + onClose, + onSubmit, +}: { + menu: MenuNode | null; + options: FlatMenu[]; + saving: boolean; + onClose: () => void; + onSubmit: (body: MenuSaveBody) => void; +}) { + const { t } = useTranslation(); + const isNew = menu === null; + const [id, setId] = useState(menu?.id ?? ''); + const [menuName, setMenuName] = useState(menu?.menuName ?? ''); + const [parentId, setParentId] = useState(menu?.parentId ?? ''); + const [menuPath, setMenuPath] = useState(menu?.menuPath ?? ''); + const [prgType, setPrgType] = useState(menu?.prgType ?? 'SCREEN'); + const [requiredRole, setRequiredRole] = useState(menu?.requiredRole ?? ''); + const [sortOrder, setSortOrder] = useState(String(menu?.sortOrder ?? 0)); + const [useYn, setUseYn] = useState(menu?.useYn ?? 'Y'); + const [error, setError] = useState(null); + + // 자기 자신은 상위 후보에서 제외(순환 방지 — 하위까지 엄격 제외는 서버 검증 위임) + const parentOptions = options.filter((o) => o.id !== menu?.id); + + function submit(e: React.FormEvent) { + e.preventDefault(); + setError(null); + if (!menuName.trim()) { + setError(t('menu.errName')); + return; + } + if (isNew && !id.trim()) { + setError(t('menu.errId')); + return; + } + if (isNew && options.some((o) => o.id === id.trim())) { + setError(t('menu.errDupId')); + return; + } + onSubmit({ + id: isNew ? id.trim() : (menu?.id ?? null), + parentId: parentId || null, + menuName: menuName.trim(), + menuPath: menuPath.trim() || null, + prgType, + requiredRole: requiredRole.trim() || null, + sortOrder: Number(sortOrder) || 0, + useYn, + }); + } + + return ( + + + + {isNew ? t('menu.addMenu') : t('menu.editMenu')} + + {isNew && ( + + {t('menu.menuId')} + setId(e.target.value)} /> + + )} + + {t('menu.menuName')} + setMenuName(e.target.value)} /> + + + {t('menu.parent')} + + + + {t('menu.path')} + setMenuPath(e.target.value)} /> + + + {t('menu.type')} + + + + {t('menu.accessRole')} + setRequiredRole(e.target.value)} /> + + + {t('menu.sort')} + setSortOrder(e.target.value)} /> + + + {t('menu.useYn')} + + + + {error && {error}} + + + + + + + ); +} diff --git a/src/frontend/src/screens/admin/ProgramAdminPage.tsx b/src/frontend/src/screens/admin/ProgramAdminPage.tsx new file mode 100644 index 0000000..b1a3396 --- /dev/null +++ b/src/frontend/src/screens/admin/ProgramAdminPage.tsx @@ -0,0 +1,183 @@ +/* + * W12 시스템관리 — 프로그램(화면) 등록부. + * 정본: GET/POST /api/admin/programs · DELETE /{id} (ProgramController). 라우트/화면 마스터(메뉴와 연결). + */ +import { useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconPlus, IconSearch } from '../../components/ui/icons'; +import { errMessage, useToast } from '../work/workShared'; +import { programApi, PROGRAM_TYPES, type Program, type ProgramSaveBody } from './systemBasicsApi'; +import './admin-modules.css'; + +export function ProgramAdminPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + const [keyword, setKeyword] = useState(''); + const [applied, setApplied] = useState(''); + const [editing, setEditing] = useState(undefined); + + const q = useQuery({ + queryKey: ['admin-programs', applied], + queryFn: () => programApi.list(applied || undefined), + retry: false, + }); + const rows = q.data ?? []; + + const saveM = useMutation({ + mutationFn: (body: ProgramSaveBody) => programApi.save(body), + onSuccess: () => { show(t('program.saved')); setEditing(undefined); qc.invalidateQueries({ queryKey: ['admin-programs'] }); }, + onError: (e) => show(errMessage(e)), + }); + const delM = useMutation({ + mutationFn: (id: string) => programApi.remove(id), + onSuccess: () => { show(t('program.deleted')); qc.invalidateQueries({ queryKey: ['admin-programs'] }); }, + onError: (e) => show(errMessage(e)), + }); + + return ( + + + + {t('program.title')} + {t('program.subtitle')} + + + + + + + + {t('sysadmin.keyword')} + setKeyword(e.target.value)} + placeholder={t('program.searchPh')} /> + + + + + + + + {q.isLoading && } + {q.isError && !q.isLoading && q.refetch()} />} + + {!q.isLoading && !q.isError && ( + + {rows.length === 0 ? ( + + ) : ( + + + + + + + + + + + + + {rows.map((r) => ( + + + + + + + + + ))} + + {t('program.colName')} {t('program.colType')} {t('program.colUrl')} {t('program.colCategory')} {t('program.colUse')} + {r.programName} {r.programType} {r.programUrl ?? '-'} {r.category ?? '-'} {r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')} + + + + + )} + + )} + + {editing !== undefined && ( + setEditing(undefined)} onSubmit={(b) => saveM.mutate(b)} /> + )} + {toast} + + ); +} + +function ProgramModal({ program, saving, onClose, onSubmit }: { + program: Program | null; saving: boolean; onClose: () => void; onSubmit: (b: ProgramSaveBody) => void; +}) { + const { t } = useTranslation(); + const isNew = program === null; + const [programName, setName] = useState(program?.programName ?? ''); + const [programType, setType] = useState(program?.programType ?? 'SCREEN'); + const [programUrl, setUrl] = useState(program?.programUrl ?? ''); + const [category, setCategory] = useState(program?.category ?? ''); + const [useYn, setUseYn] = useState(program?.useYn ?? 'Y'); + const [error, setError] = useState(null); + + function submit(e: React.FormEvent) { + e.preventDefault(); + if (!programName.trim()) { setError(t('program.errRequired')); return; } + onSubmit({ + id: program?.id ?? null, + programName: programName.trim(), + programType, + programUrl: programUrl.trim() || null, + category: category.trim() || null, + useYn, + }); + } + + return ( + + + + {isNew ? t('program.add') : t('program.edit')} + + + {t('program.colName')} + setName(e.target.value)} /> + + + {t('program.colType')} + + + + {t('program.colCategory')} + setCategory(e.target.value)} /> + + + {t('program.colUrl')} + setUrl(e.target.value)} + placeholder="/admin/users" /> + + + {t('sysadmin.useYn')} + + + + {error && {error}} + + + + + + + ); +} diff --git a/src/frontend/src/screens/admin/RoleAdminPage.tsx b/src/frontend/src/screens/admin/RoleAdminPage.tsx new file mode 100644 index 0000000..441e85b --- /dev/null +++ b/src/frontend/src/screens/admin/RoleAdminPage.tsx @@ -0,0 +1,275 @@ +/* + * M18 역할/권한(RBAC) 관리 (SCR-A2 · §5B). RoleController 실배선. + * 정본: GET /api/admin/roles → Role[] · GET /api/admin/roles/permissions → Permission[] · POST 저장 · DELETE /{roleCode}. + * UI: 좌 역할 목록(선택), 우 권한 매트릭스(역할 × 권한 체크). 역할 저장 시 permissions[] 갱신. + * 상태 3종: 로딩 스켈레톤 / 빈 / 에러(재시도). + */ +import { useEffect, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconPlus } from '../../components/ui/icons'; +import { errMessage, useToast } from '../work/workShared'; +import { roleApi, type Role } from './adminCrudApi'; +import './admin-modules.css'; + +export function RoleAdminPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + + const rolesQ = useQuery({ queryKey: ['admin-roles'], queryFn: roleApi.list, retry: false }); + const permsQ = useQuery({ queryKey: ['admin-permissions'], queryFn: roleApi.permissions, retry: false }); + + const [selected, setSelected] = useState(null); + const [editing, setEditing] = useState(undefined); + + const roles = rolesQ.data ?? []; + const perms = permsQ.data ?? []; + + useEffect(() => { + if (!selected && roles.length > 0) setSelected(roles[0].roleCode); + }, [roles, selected]); + + const activeRole = roles.find((r) => r.roleCode === selected) ?? null; + + const saveM = useMutation({ + mutationFn: (role: Role) => roleApi.save(role), + onSuccess: () => { + show(t('role.saved')); + setEditing(undefined); + qc.invalidateQueries({ queryKey: ['admin-roles'] }); + }, + onError: (e) => show(errMessage(e)), + }); + const delM = useMutation({ + mutationFn: (roleCode: string) => roleApi.remove(roleCode), + onSuccess: () => { + show(t('role.deleted')); + setSelected(null); + qc.invalidateQueries({ queryKey: ['admin-roles'] }); + }, + onError: (e) => show(errMessage(e)), + }); + + function togglePerm(permCode: string, on: boolean) { + if (!activeRole) return; + const next = on + ? [...new Set([...activeRole.permissions, permCode])] + : activeRole.permissions.filter((p) => p !== permCode); + saveM.mutate({ ...activeRole, permissions: next }); + } + + const loading = rolesQ.isLoading || permsQ.isLoading; + const errored = rolesQ.isError || permsQ.isError; + + return ( + + + + {t('role.title')} + + {t('role.subtitle')} + + + + + + {loading && } + {errored && !loading && ( + { + rolesQ.refetch(); + permsQ.refetch(); + }} + /> + )} + + {!loading && !errored && ( + roles.length === 0 ? ( + + ) : ( + + {/* 좌: 역할 목록 */} + + + {t('role.role')} + + + {roles.map((r) => ( + + + + ))} + + + + {/* 우: 권한 매트릭스 */} + + {activeRole ? ( + <> + + + {t('role.rolePerm', { name: activeRole.roleName })} + {activeRole.description ?? activeRole.roleCode} + + + + + + + + {perms.length === 0 ? ( + + ) : ( + + {perms.map((p) => { + const on = activeRole.permissions.includes(p.permCode); + return ( + + togglePerm(p.permCode, e.target.checked)} + /> + + {p.permName} + {p.permCode} + {p.description && ( + {p.description} + )} + + + ); + })} + + )} + + ) : ( + + )} + + + ) + )} + + {editing !== undefined && ( + r.roleCode)} + saving={saveM.isPending} + onClose={() => setEditing(undefined)} + onSubmit={(role) => saveM.mutate(role)} + /> + )} + {toast} + + ); +} + +function RoleModal({ + role, + existingCodes, + saving, + onClose, + onSubmit, +}: { + role: Role | null; + existingCodes: string[]; + saving: boolean; + onClose: () => void; + onSubmit: (role: Role) => void; +}) { + const { t } = useTranslation(); + const isNew = role === null; + const [roleCode, setRoleCode] = useState(role?.roleCode ?? ''); + const [roleName, setRoleName] = useState(role?.roleName ?? ''); + const [description, setDescription] = useState(role?.description ?? ''); + const [useYn, setUseYn] = useState(role?.useYn ?? 'Y'); + const [error, setError] = useState(null); + + function submit(e: React.FormEvent) { + e.preventDefault(); + setError(null); + if (!roleCode.trim() || !roleName.trim()) { + setError(t('role.errRequired')); + return; + } + if (isNew && existingCodes.includes(roleCode.trim().toUpperCase())) { + setError(t('role.errDupCode')); + return; + } + onSubmit({ + roleCode: roleCode.trim().toUpperCase(), + roleName: roleName.trim(), + description: description.trim() || null, + useYn, + permissions: role?.permissions ?? [], + }); + } + + return ( + + + + {isNew ? t('role.addRole') : t('role.editRole')} + {t('role.modalDesc')} + + + {t('role.roleCode')} + setRoleCode(e.target.value)} + /> + + + {t('role.roleName')} + setRoleName(e.target.value)} /> + + + {t('role.description')} + setDescription(e.target.value)} /> + + + {t('role.useYn')} + + + + {error && {error}} + + + + + + + ); +} diff --git a/src/frontend/src/screens/admin/RoleMenuAdminPage.tsx b/src/frontend/src/screens/admin/RoleMenuAdminPage.tsx new file mode 100644 index 0000000..6aeff47 --- /dev/null +++ b/src/frontend/src/screens/admin/RoleMenuAdminPage.tsx @@ -0,0 +1,148 @@ +/* + * W12 시스템관리 — 역할-메뉴 접근 매핑(역할 × 메뉴 read/write 매트릭스). + * 정본: GET/POST /api/admin/roles/{roleCode}/menus (RoleMenuController). 역할 목록은 기존 roleApi(RoleController). + * 기존 역할/권한(rolePerm=RoleAdminPage)과 직교 — 여긴 메뉴 접근 매핑. + */ +import { useEffect, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { errMessage, useToast } from '../work/workShared'; +import { roleApi } from './adminCrudApi'; +import { roleMenuApi, type RoleMenu } from './systemBasicsApi'; +import './admin-modules.css'; + +export function RoleMenuAdminPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + const rolesQ = useQuery({ queryKey: ['admin-roles'], queryFn: roleApi.list, retry: false }); + const [selected, setSelected] = useState(null); + const roles = rolesQ.data ?? []; + + useEffect(() => { + if (!selected && roles.length > 0) setSelected(roles[0].roleCode); + }, [roles, selected]); + + const menusQ = useQuery({ + queryKey: ['admin-role-menus', selected], + queryFn: () => roleMenuApi.list(selected!), + enabled: !!selected, + retry: false, + }); + + const [draft, setDraft] = useState>({}); + useEffect(() => { + if (menusQ.data) { + const d: Record = {}; + for (const m of menusQ.data) d[m.menuId] = { readYn: m.readYn, writeYn: m.writeYn, mapped: m.mapped }; + setDraft(d); + } + }, [menusQ.data]); + + const saveM = useMutation({ + mutationFn: () => { + const menus = Object.entries(draft) + .filter(([, v]) => v.mapped) + .map(([menuId, v]) => ({ menuId, readYn: v.readYn, writeYn: v.writeYn })); + return roleMenuApi.save(selected!, { menus }); + }, + onSuccess: () => { show(t('roleMenu.saved')); qc.invalidateQueries({ queryKey: ['admin-role-menus', selected] }); }, + onError: (e) => show(errMessage(e)), + }); + + function toggleMapped(m: RoleMenu, on: boolean) { + setDraft((d) => ({ ...d, [m.menuId]: { ...d[m.menuId], mapped: on, readYn: on ? (d[m.menuId]?.readYn || 'Y') : 'N' } })); + } + function setFlag(m: RoleMenu, key: 'readYn' | 'writeYn', on: boolean) { + setDraft((d) => ({ ...d, [m.menuId]: { ...d[m.menuId], [key]: on ? 'Y' : 'N' } })); + } + + const menus = menusQ.data ?? []; + + return ( + + + + {t('roleMenu.title')} + {t('roleMenu.subtitle')} + + + + + {rolesQ.isLoading && } + {rolesQ.isError && !rolesQ.isLoading && rolesQ.refetch()} />} + + {!rolesQ.isLoading && !rolesQ.isError && ( + roles.length === 0 ? ( + + ) : ( + + + {t('roleMenu.role')} + + {roles.map((r) => ( + + + + ))} + + + + + {menusQ.isLoading && } + {menusQ.isError && !menusQ.isLoading && menusQ.refetch()} />} + {!menusQ.isLoading && !menusQ.isError && ( + menus.length === 0 ? ( + + ) : ( + + + + + + + + + + + + {menus.map((m) => { + const st = draft[m.menuId] ?? { readYn: 'N', writeYn: 'N', mapped: false }; + return ( + + + + + + + ); + })} + + {t('roleMenu.colMenu')} {t('roleMenu.colAccess')} {t('roleMenu.colRead')} {t('roleMenu.colWrite')} {m.menuName} + toggleMapped(m, e.target.checked)} /> + + setFlag(m, 'readYn', e.target.checked)} /> + + setFlag(m, 'writeYn', e.target.checked)} /> + + + ) + )} + + + ) + )} + {toast} + + ); +} diff --git a/src/frontend/src/screens/admin/RulesetVersionsPage.tsx b/src/frontend/src/screens/admin/RulesetVersionsPage.tsx new file mode 100644 index 0000000..a7431e5 --- /dev/null +++ b/src/frontend/src/screens/admin/RulesetVersionsPage.tsx @@ -0,0 +1,224 @@ +/* + * SCR-A8 규정 룰셋 버전 관리 (M18). Stitch scr_a8 이식. + * 데이터 원천: 실 API(읽기 전용) — GET /api/admin/rulesets(요약 목록) · GET /api/admin/rulesets/{name}(규칙 전문). + * 백엔드는 룰셋을 classpath 리소스(resources/rulesets/*.json)로 버전 관리하며 편집 엔드포인트는 없다(규정 개정=리소스 교체). + */ +import { useEffect, useState } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import type { TFunction } from 'i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { rulesetApi, type RulesetRule } from './adminModulesApi'; +import './admin-modules.css'; + +export function RulesetVersionsPage() { + const { t } = useTranslation(); + const listQ = useQuery({ + queryKey: ['admin-rulesets'], + queryFn: () => rulesetApi.list(), + retry: false, + }); + + const versions = listQ.data ?? []; + const [selected, setSelected] = useState(null); + + // 목록 로드 시 최초 파일 자동 선택(사용자 선택이 우선). + useEffect(() => { + if (!selected && versions.length > 0) { + setSelected(versions[0].name); + } + }, [versions, selected]); + + const activeName = selected ?? versions[0]?.name ?? null; + const current = versions.find((v) => v.name === activeName) ?? null; + + const detailQ = useQuery({ + queryKey: ['admin-ruleset', activeName], + queryFn: () => rulesetApi.detail(activeName as string), + enabled: !!activeName, + retry: false, + }); + + const rules: RulesetRule[] = detailQ.data?.rules ?? []; + + return ( + + + + {t('ruleset.title')} + {t('ruleset.subtitle')} + + + + + {t('ruleset.readonly')} + {t('ruleset.readonlyNote')} + + + {listQ.isLoading && } + {listQ.isError && ( + listQ.refetch()} /> + )} + + {!listQ.isLoading && !listQ.isError && versions.length === 0 && ( + + )} + + {versions.length > 0 && ( + + {/* 좌: 버전 히스토리 */} + + + {t('ruleset.versionHistory')} + + + {versions.map((v) => ( + + + + ))} + + + + {/* 우: 규칙 목록 */} + + + + + {t('ruleset.rulesOf', { name: current?.version ?? activeName, n: rules.length })} + + + {detailQ.data?.effectiveDate + ? t('ruleset.effectiveDate', { date: detailQ.data.effectiveDate }) + : current?.name} + + + + + {detailQ.isLoading && } + {detailQ.isError && ( + detailQ.refetch()} /> + )} + + {!detailQ.isLoading && !detailQ.isError && rules.length === 0 && ( + + )} + + {rules.length > 0 && ( + + + + + + + + + + + + {rules.map((r) => ( + + + + + + + ))} + + {t('ruleset.colRuleName')} {t('ruleset.colValue')} {t('ruleset.colLogic')} {t('ruleset.colSeverity')} + {r.label ?? r.code} + {r.code} + {formatValue(t, r)} {formatLogic(t, r)} + + {r.severity === 'block' ? t('ruleset.block') : t('ruleset.warn')} + + + + )} + + {detailQ.data?.disclaimer && ( + {detailQ.data.disclaimer} + )} + + + )} + + ); +} + +function ModuleDistribution({ dist }: { dist: Record }) { + const entries = Object.entries(dist); + if (entries.length === 0) return null; + return ( + + {entries.map(([m, n]) => `${m} ${n}`).join(' · ')} + + ); +} + +/** 원문 규칙에서 표시용 수치/설정값을 유도한다(operator + threshold/min/max/unit). */ +function formatValue(t: TFunction, r: RulesetRule): string { + const unit = r.unit ?? ''; + switch (r.operator) { + case 'lte': + return `≤ ${fmtNum(r.threshold)}${unit}`; + case 'gte': + return `≥ ${fmtNum(r.threshold)}${unit}`; + case 'eq': + return `= ${fmtNum(r.threshold)}${unit}`; + case 'between': + return `${fmtNum(r.min)}–${fmtNum(r.max)}${unit}`; + case 'isTrue': + return t('ruleset.required'); + case 'excludesAll': + return (r.forbidden ?? []).join(' · '); + case 'lteHall': + return r.hallLimits + ? Object.entries(r.hallLimits) + .map(([h, v]) => `${h} ${v}`) + .join(' · ') + unit + : t('ruleset.perHall', { unit }); + default: + return r.threshold != null ? `${fmtNum(r.threshold)}${unit}` : '—'; + } +} + +/** 원문 규칙에서 논리/요구사항 설명을 유도한다(metric·requiresDocument·note). */ +function formatLogic(t: TFunction, r: RulesetRule): string { + const parts: string[] = []; + if (r.metric) parts.push(r.metric); + if (r.requiresDocument) parts.push(t('ruleset.docNeeded', { doc: r.requiresDocument })); + if (r.note) parts.push(r.note); + return parts.length > 0 ? parts.join(' · ') : (r.group ?? '—'); +} + +function fmtNum(n: number | null | undefined): string { + return n == null ? '—' : String(n); +} + +function RulesetSkeleton() { + return ( + + + + + ); +} diff --git a/src/frontend/src/screens/admin/SysUserAdminPage.tsx b/src/frontend/src/screens/admin/SysUserAdminPage.tsx new file mode 100644 index 0000000..34145e3 --- /dev/null +++ b/src/frontend/src/screens/admin/SysUserAdminPage.tsx @@ -0,0 +1,399 @@ +/* + * M18 사용자 관리 (SCR-A1 · §5B). SysUserController 실배선. + * 정본: GET /api/admin/users?keyword&status&roleCode&page&size → PageResponse · POST/PUT · PATCH status · POST password/otp reset. + * 보안: 비밀번호는 생성 시에만 입력·전송하고 목록/응답에는 노출되지 않는다(SysUserDto 미포함). 재설정은 서버 정책 위임(값 미표시). + * 상태 3종: 로딩 스켈레톤 / 빈 / 에러(재시도). 검색·페이지네이션·생성/수정 모달. + */ +import { useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { Trans, useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconPlus, IconSearch } from '../../components/ui/icons'; +import { errMessage, fmtDateTime, useToast } from '../work/workShared'; +import { + sysUserApi, + USER_ROLE_CODES, + USER_STATUSES, + type SysUser, + type UserSaveBody, + type UserSearchParams, +} from './adminCrudApi'; +import './admin-modules.css'; + +const PAGE_SIZE = 20; + +export function SysUserAdminPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + + const [keyword, setKeyword] = useState(''); + const [status, setStatus] = useState(''); + const [roleCode, setRoleCode] = useState(''); + const [page, setPage] = useState(0); + const [applied, setApplied] = useState({}); + const [editing, setEditing] = useState(undefined); // undefined=닫힘, null=신규 + + const q = useQuery({ + queryKey: ['admin-users', applied, page], + queryFn: () => sysUserApi.list({ ...applied, page, size: PAGE_SIZE }), + retry: false, + }); + + const saveM = useMutation({ + mutationFn: ({ userId, body }: { userId: string | null; body: UserSaveBody }) => + userId ? sysUserApi.update(userId, body) : sysUserApi.create(body), + onSuccess: () => { + show(t('sysuser.saved')); + setEditing(undefined); + qc.invalidateQueries({ queryKey: ['admin-users'] }); + }, + onError: (e) => show(errMessage(e)), + }); + + const statusM = useMutation({ + mutationFn: ({ userId, value }: { userId: string; value: string }) => + sysUserApi.changeStatus(userId, value), + onSuccess: () => { + show(t('sysuser.statusChanged')); + qc.invalidateQueries({ queryKey: ['admin-users'] }); + }, + onError: (e) => show(errMessage(e)), + }); + + const otpM = useMutation({ + mutationFn: (userId: string) => sysUserApi.resetOtp(userId), + onSuccess: () => show(t('sysuser.otpReset')), + onError: (e) => show(errMessage(e)), + }); + + const rows = q.data?.items ?? []; + const total = q.data?.total ?? 0; + const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE)); + + function applyFilters() { + setPage(0); + setApplied({ + keyword: keyword.trim() || undefined, + status: status || undefined, + roleCode: roleCode || undefined, + }); + } + function resetFilters() { + setKeyword(''); + setStatus(''); + setRoleCode(''); + setPage(0); + setApplied({}); + } + + return ( + + + + {t('sysuser.title')} + + {t('sysuser.subtitle')} + + + + + + {/* 검색 툴바 */} + + + + + {t('sysuser.keyword')} + setKeyword(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && applyFilters()} + /> + + + {t('sysuser.role')} + + + + {t('sysuser.status')} + + + + + + + + + + + {q.isLoading && } + {q.isError && !q.isLoading && ( + q.refetch()} /> + )} + + {!q.isLoading && !q.isError && ( + + {rows.length === 0 ? ( + + ) : ( + <> + + + + + + + + + + + + + + + + {rows.map((u) => ( + + + + + + + + + + + ))} + + {t('sysuser.colUser')} {t('sysuser.colEmail')} {t('sysuser.colRole')} {t('sysuser.colDept')} {t('sysuser.colStatus')} OTP {t('sysuser.colLastLogin')} {t('sysuser.colManage')} + {u.displayName ?? '—'} + {u.hallManager && ( + {t('sysuser.hallManagerTag')} + )} + {u.email ?? '—'} {u.deptId ?? '—'} + + {u.otpEnabled ? t('sysuser.otpSet') : t('sysuser.otpUnset')} + + {u.lastLoginAt ? fmtDateTime(u.lastLoginAt) : '—'} + + + {u.status !== 'LOCKED' ? ( + + ) : ( + + )} + {u.otpEnabled && ( + + )} + + + + + + )} + + )} + + {editing !== undefined && ( + setEditing(undefined)} + onSubmit={(body) => saveM.mutate({ userId: editing?.userId ?? null, body })} + /> + )} + {toast} + + ); +} + +function RoleChip({ value }: { value: string | null }) { + const v = (value ?? 'USER').toUpperCase(); + const cls = v === 'ADMIN' ? 'admin' : v === 'MANAGER' ? 'manager' : 'user'; + return {v}; +} + +function StatusCell({ status }: { status: string | null }) { + const { t } = useTranslation(); + const v = (status ?? 'ACTIVE').toUpperCase(); + const tone = v === 'ACTIVE' ? 'success' : v === 'LOCKED' ? 'error' : 'neutral'; + const label = v === 'ACTIVE' ? t('sysuser.active') : v === 'LOCKED' ? t('sysuser.locked') : v === 'DISABLED' ? t('sysuser.disabled') : v; + return {label}; +} + +function UserModal({ + user, + saving, + onClose, + onSubmit, +}: { + user: SysUser | null; + saving: boolean; + onClose: () => void; + onSubmit: (body: UserSaveBody) => void; +}) { + const { t } = useTranslation(); + const isNew = user === null; + const [email, setEmail] = useState(user?.email ?? ''); + const [displayName, setDisplayName] = useState(user?.displayName ?? ''); + const [password, setPassword] = useState(''); + const [roleCode, setRoleCode] = useState(user?.roleCode ?? 'USER'); + const [deptId, setDeptId] = useState(user?.deptId ?? ''); + const [hallManager, setHallManager] = useState(user?.hallManager ?? false); + const [error, setError] = useState(null); + + function submit(e: React.FormEvent) { + e.preventDefault(); + setError(null); + if (!email.trim() || !displayName.trim()) { + setError(t('sysuser.errRequired')); + return; + } + if (isNew && password.trim() === '') { + setError(t('sysuser.errPassword')); + return; + } + const body: UserSaveBody = { + email: email.trim(), + displayName: displayName.trim(), + roleCode, + deptId: deptId.trim() || null, + hallManager, + }; + if (isNew) body.password = password; + onSubmit(body); + } + + return ( + + + + {isNew ? t('sysuser.addUser') : t('sysuser.editUser')} + + {isNew ? t('sysuser.newDesc') : t('sysuser.editDesc')} + + + + {t('sysuser.email')} + setEmail(e.target.value)} + /> + + + {t('sysuser.displayName')} + setDisplayName(e.target.value)} /> + + + {t('sysuser.dept')} + setDeptId(e.target.value)} /> + + {isNew && ( + + {t('sysuser.initPassword')} + setPassword(e.target.value)} + /> + + )} + + {t('sysuser.role')} + + + + setHallManager(e.target.checked)} /> + {t('sysuser.hallManagerCheck')} + + + {error && {error}} + + + + + + + ); +} + +function Pager({ + page, + totalPages, + total, + onPage, +}: { + page: number; + totalPages: number; + total: number; + onPage: (p: number) => void; +}) { + const { t } = useTranslation(); + return ( + + ]} /> + + + {page + 1} / {totalPages} + + + + ); +} + +function TableSkeleton() { + return ( + + {[0, 1, 2, 3, 4, 5].map((i) => ( + + ))} + + ); +} diff --git a/src/frontend/src/screens/admin/SystemHealthPage.tsx b/src/frontend/src/screens/admin/SystemHealthPage.tsx new file mode 100644 index 0000000..12c58f8 --- /dev/null +++ b/src/frontend/src/screens/admin/SystemHealthPage.tsx @@ -0,0 +1,101 @@ +/* + * W12 시스템관리 — 시스템 상태 대시보드. + * 정본: GET /api/admin/system-health → SystemHealth (SystemHealthController). DB/Redis/워커/디스크/메모리/가동시간. + * 보안: 내부IP·스택트레이스 미노출(백엔드 집계값만). + */ +import { useQuery } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { systemHealthApi, type SystemHealth } from './systemBasicsApi'; +import './admin-modules.css'; + +export function SystemHealthPage() { + const { t } = useTranslation(); + const q = useQuery({ + queryKey: ['admin-system-health'], + queryFn: systemHealthApi.get, + retry: false, + refetchInterval: 15000, + }); + const h = q.data; + + return ( + + + + {t('sysHealth.title')} + {t('sysHealth.subtitle')} + + + + + {q.isLoading && } + {q.isError && !q.isLoading && q.refetch()} />} + + {!q.isLoading && !q.isError && h && ( + <> + + + + + + + + + + + + + )} + + ); +} + +function statusTone(v: string): 'success' | 'error' | 'neutral' { + const s = (v ?? '').toUpperCase(); + if (s === 'UP') return 'success'; + if (s === 'DOWN') return 'error'; + return 'neutral'; +} + +function metricPct(n: number): string { + return n < 0 ? 'N/A' : `${n}%`; +} + +function StatusCard({ label, value, sub, tone }: { + label: string; value: string; sub?: string; tone: 'success' | 'error' | 'neutral'; +}) { + return ( + + {label} + {value} + {sub && {sub}} + + ); +} + +function Metric({ label, value, sub }: { label: string; value: string; sub?: string }) { + return ( + + {label} + {value} + {sub && {sub}} + + ); +} + +function fmtUptime(sec: number): string { + if (sec < 0) return 'N/A'; + const d = Math.floor(sec / 86400); + const h = Math.floor((sec % 86400) / 3600); + const m = Math.floor((sec % 3600) / 60); + if (d > 0) return `${d}d ${h}h`; + if (h > 0) return `${h}h ${m}m`; + return `${m}m`; +} + +export type { SystemHealth }; diff --git a/src/frontend/src/screens/admin/SystemSettingsPage.tsx b/src/frontend/src/screens/admin/SystemSettingsPage.tsx new file mode 100644 index 0000000..2a29d77 --- /dev/null +++ b/src/frontend/src/screens/admin/SystemSettingsPage.tsx @@ -0,0 +1,342 @@ +/* + * SCR-A6 시스템설정 (M18 · §5B-1). Stitch scr_a6 이식 + 라이브 백엔드 실배선. + * 정본: GET/POST /api/admin/settings, DELETE /{key} (SettingController). 백엔드는 범용 key/value 저장소. + * 보안: secretYn='Y' 값은 백엔드가 ******** 로 마스킹해 도착 → 화면은 마스킹 유지, 신규 입력이 있을 때만 저장 전송(원문 미노출·미상실). + * Stitch 의 그룹 카드(마감정책·AI게이트·알림·보안)는 개념 매핑 — 실제 렌더는 key 접두어(prefix)로 그룹화한 실데이터. + * 상태: 로딩 스켈레톤 / 빈 / 에러(재시도). + */ +import { useMemo, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States'; +import { Button } from '../../components/ui/Button'; +import { IconPlus } from '../../components/ui/icons'; +import { errMessage, useToast } from '../work/workShared'; +import { settingApi, type SettingRow, type SettingSaveBody } from './adminModulesApi'; +import './admin-modules.css'; + +const VALUE_TYPES = ['STRING', 'NUMBER', 'BOOLEAN', 'JSON']; +const GENERAL_GROUP = '__general__'; + +export function SystemSettingsPage() { + const { t } = useTranslation(); + const qc = useQueryClient(); + const { show, node: toast } = useToast(); + + const q = useQuery({ queryKey: ['admin-settings'], queryFn: settingApi.list, retry: false }); + + const saveM = useMutation({ + mutationFn: (body: SettingSaveBody) => settingApi.save(body), + onSuccess: () => { + show(t('settings.saved')); + qc.invalidateQueries({ queryKey: ['admin-settings'] }); + }, + onError: (e) => show(errMessage(e)), + }); + const delM = useMutation({ + mutationFn: (key: string) => settingApi.remove(key), + onSuccess: () => { + show(t('settings.deleted')); + qc.invalidateQueries({ queryKey: ['admin-settings'] }); + }, + onError: (e) => show(errMessage(e)), + }); + + const groups = useMemo(() => groupByPrefix(q.data ?? []), [q.data]); + + return ( + + + + {t('settings.title')} + + {t('settings.subtitle')} + + + + + {q.isLoading && } + + {q.isError && !q.isLoading && ( + q.refetch()} /> + )} + + {!q.isLoading && !q.isError && ( + <> + {(q.data ?? []).length === 0 ? ( + + ) : ( + + {groups.map((g) => ( + saveM.mutate(b)} + onDelete={(k) => { + if (window.confirm(t('settings.deleteConfirm', { key: k }))) delM.mutate(k); + }} + /> + ))} + + )} + + saveM.mutate(b)} /> + + )} + {toast} + + ); +} + +function SettingGroupCard({ + name, + rows, + saving, + deleting, + onSave, + onDelete, +}: { + name: string; + rows: SettingRow[]; + saving: boolean; + deleting: boolean; + onSave: (b: SettingSaveBody) => void; + onDelete: (key: string) => void; +}) { + const { t } = useTranslation(); + const displayName = name === GENERAL_GROUP ? t('settings.general') : name; + return ( + + + + {displayName} + + {rows.map((r) => ( + + ))} + + + + ); +} + +function SettingRowItem({ + row, + saving, + deleting, + onSave, + onDelete, +}: { + row: SettingRow; + saving: boolean; + deleting: boolean; + onSave: (b: SettingSaveBody) => void; + onDelete: (key: string) => void; +}) { + const { t } = useTranslation(); + const isSecret = row.secretYn === 'Y'; + const isBool = (row.valueType ?? '').toUpperCase() === 'BOOLEAN'; + // 시크릿: 입력 비움 상태에서 시작(마스킹 값을 재저장하지 않기 위함). 비-시크릿: 현재값 편집. + const [val, setVal] = useState(isSecret ? '' : row.settingValue ?? ''); + const [dirty, setDirty] = useState(false); + + const boolChecked = String(row.settingValue ?? '').toLowerCase() === 'true'; + + function submit(nextValue: string) { + onSave({ + settingKey: row.settingKey, + settingValue: nextValue, + valueType: row.valueType, + description: row.description, + secretYn: row.secretYn, + }); + setDirty(false); + } + + return ( +

{t('code.code')}	{t('code.name')}	{t('code.value')}	{t('code.sort')}	{t('code.use')}	{t('code.manage')}
{c.code}	{c.codeName}	{c.codeValue ?? '—'}	{c.sortOrder}	+ + {c.useYn === 'N' ? t('code.unused') : t('code.used')} + +	+ + + + +

{t('company.colName')}	{t('company.colBizNo')}	{t('company.colType')}	{t('company.colContact')}	{t('company.colTel')}	{t('company.colUse')}	+
{r.companyName}	{r.bizNo ?? '-'}	{r.partnerType ? t(`company.pt_${r.partnerType}`) : '-'}	{r.contactName ?? '-'}	{r.contactTel ?? '-'}	{r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')}	+ + +

{t('errorLog.colTime')}	{t('errorLog.colCode')}	{t('errorLog.colMethod')}	{t('errorLog.colPath')}	{t('errorLog.colSummary')}
{fmtDateTime(r.createdAt)}	{r.errorCode ?? '-'}	{r.method ?? '-'}	{r.path ?? '-'}	{r.summary ?? '-'}

{t('holiday.date')}	{t('holiday.weekday')}	{t('holiday.name')}	{t('holiday.type')}	{t('holiday.status')}	{t('holiday.manage')}
+ {h.ymd} +	+ {t(`common.weekday.${dow}`)} +	+ {h.name} +	+ {h.isSubstitute ? ( + {t('holiday.substitute')} + ) : ( + {t('holiday.legal')} + )} +	+ + {h.isHoliday ? t('holiday.on') : t('holiday.off')} + +	+ + + + +

{t('loginHistory.colTime')}	{t('loginHistory.colResult')}	{t('loginHistory.colUser')}	{t('loginHistory.colEmail')}	{t('loginHistory.colIp')}	{t('loginHistory.colReason')}
{fmtDateTime(r.createdAt)}		{r.userId ?? '-'}	{r.emailMasked ?? '-'}	{r.ipMasked ?? '-'}	{r.failReason ?? '-'}

{t('menu.colName')}	{t('menu.colPath')}	{t('menu.colType')}	{t('menu.colRole')}	{t('menu.colSort')}	{t('menu.colUse')}	{t('menu.colManage')}
+ + {m.depth > 0 && ( + + )} + {m.menuName} + +	{m.menuPath ?? '—'}	{m.prgType ?? '—'}	{m.requiredRole ?? t('menu.all')}	{m.sortOrder}	+ + {m.useYn === 'N' ? t('menu.unused') : t('menu.used')} + +	+ + + + +

{t('program.colName')}	{t('program.colType')}	{t('program.colUrl')}	{t('program.colCategory')}	{t('program.colUse')}	+
{r.programName}	{r.programType}	{r.programUrl ?? '-'}	{r.category ?? '-'}	{r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')}	+ + +

{t('roleMenu.colMenu')}	{t('roleMenu.colAccess')}	{t('roleMenu.colRead')}	{t('roleMenu.colWrite')}
{m.menuName}	+ toggleMapped(m, e.target.checked)} /> +	+ setFlag(m, 'readYn', e.target.checked)} /> +	+ setFlag(m, 'writeYn', e.target.checked)} /> +

{t('ruleset.colRuleName')}	{t('ruleset.colValue')}	{t('ruleset.colLogic')}	{t('ruleset.colSeverity')}
+ {r.label ?? r.code} + {r.code} +	{formatValue(t, r)}	{formatLogic(t, r)}	+ + {r.severity === 'block' ? t('ruleset.block') : t('ruleset.warn')} + +

{t('sysuser.colUser')}	{t('sysuser.colEmail')}	{t('sysuser.colRole')}	{t('sysuser.colDept')}	{t('sysuser.colStatus')}	OTP	{t('sysuser.colLastLogin')}	{t('sysuser.colManage')}
+ {u.displayName ?? '—'} + {u.hallManager && ( + {t('sysuser.hallManagerTag')} + )} +	{u.email ?? '—'}		{u.deptId ?? '—'}		+ + {u.otpEnabled ? t('sysuser.otpSet') : t('sysuser.otpUnset')} + +	{u.lastLoginAt ? fmtDateTime(u.lastLoginAt) : '—'}	+ + + {u.status !== 'LOCKED' ? ( + + ) : ( + + )} + {u.otpEnabled && ( + + )} + +

{t('tenant.venue')}	{t('tenant.code')}	{t('tenant.domain')}	{t('tenant.status')}	{t('tenant.events')}	{t('tenant.users')}
{tn.name}	{tn.code}	{tn.domain}		{tn.events}	{tn.users.toLocaleString()}

{c}
{cell(row[c])}

{t('analytics.colItem')}	{t('analytics.colAmount')}	{t('analytics.colGrade')}
{r.item}	{formatWon(r.amount)}

{t('analytics.colCompany')}	{t('analytics.colLeads')}	{t('analytics.colConversion')}
{r.companyName}	{r.leads.toLocaleString()}	{r.conversionPercent.toFixed(1)}%

+ +

{mode === 'resubmit' ? t('approval.resubmitTitle') : t('approval.composeTitle')}

+ {mode === 'resubmit' && source ? ( + + {t('approval.version')}: v{source.version} → v{source.version + 1} + + ) : null} +

+ + {error && ( +

+ {error} +

+ )} + + {/* 반려 사유·이전 이력 — 재상신 근거 */} + {mode === 'resubmit' && source ? ( +

+ {t('approval.rejectedReason')} +

{rejectReason ?? '-'}

+ {source.history.length > 0 ? ( +

+ {t(`approval.action.${h.action}`)} + + {(h.actorName ?? h.actorId)} · {dt(h.actedAt)} + + {h.comment ? — {h.comment} : null} +

+ ) : null} +

+ ) : null} + +

e.preventDefault()}> +

+ + {t('approval.docType')} + + + + + {t('approval.titleLabel')} * + + setTitle(e.target.value)} + /> + +

+ + + {t('approval.contentLabel')} +

setContent(e.target.value)}
+          />
+        </label>
+
+        <div className="kx-apf__field">
+          <span className="kx-apf__label">
+            {t('approval.line')} <em className="kx-apf__req">*</em>
+          </span>
+          <ApprovalLineEditor lines={lines} onChange={setLines} disabled={busy} />
+        </div>
+
+        <div className="kx-apf__actions">
+          <Button variant="ghost" type="button" disabled={busy} onClick={onCancel}>
+            {t('approval.cancel')}
+          </Button>
+          {mode === 'create' ? (
+            <>
+              <Button variant="secondary" type="button" disabled={busy} onClick={saveDraft}>
+                {t('approval.draftSave')}
+              </Button>
+              <Button type="button" disabled={busy} onClick={submitDoc}>
+                {busy ? t('approval.saving') : t('approval.submitDoc')}
+              </Button>
+            </>
+          ) : (
+            <Button type="button" disabled={busy} onClick={doResubmit}>
+              {busy ? t('approval.saving') : t('approval.resubmitBtn')}
+            </Button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/approval/ApprovalLineEditor.tsx b/src/frontend/src/screens/approval/ApprovalLineEditor.tsx
new file mode 100644
index 0000000..ed2f7d5
--- /dev/null
+++ b/src/frontend/src/screens/approval/ApprovalLineEditor.tsx
@@ -0,0 +1,104 @@
+import { useTranslation } from 'react-i18next';
+import { IconChevronDown, IconClose, IconPlus } from '../../components/ui/icons';
+
+/*
+ * §5B 전자결재(F028) 결재선 순차 지정 UI — WISE/UIWS ApprovalFormPage 결재선 편집 패턴.
+ * ★ kintex 사용자 디렉터리 검색 엔드포인트 부재(07_work_api_gaps.md, MessagePage 동일 제약)
+ *   → 결재자는 사용자 ID 직접 입력 + 표시명(선택). 단계는 배열 순서(stepNo=index+1)로 파생.
+ */
+export interface ApprovalLineDraft {
+  approverId: string;
+  approverName: string;
+}
+
+export function ApprovalLineEditor({
+  lines,
+  onChange,
+  disabled,
+}: {
+  lines: ApprovalLineDraft[];
+  onChange: (next: ApprovalLineDraft[]) => void;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation();
+
+  const patch = (idx: number, p: Partial<ApprovalLineDraft>) =>
+    onChange(lines.map((l, i) => (i === idx ? { ...l, ...p } : l)));
+  const add = () => onChange([...lines, { approverId: '', approverName: '' }]);
+  const remove = (idx: number) => onChange(lines.filter((_, i) => i !== idx));
+  const move = (idx: number, dir: -1 | 1) => {
+    const j = idx + dir;
+    if (j < 0 || j >= lines.length) return;
+    const next = [...lines];
+    [next[idx], next[j]] = [next[j], next[idx]];
+    onChange(next);
+  };
+
+  return (
+    <div className="kx-line-editor">
+      {lines.length === 0 ? (
+        <p className="kx-line-editor__empty">{t('approval.lineEditor.empty')}</p>
+      ) : (
+        <ol className="kx-line-editor__list">
+          {lines.map((l, idx) => (
+            <li className="kx-line-editor__row" key={idx}>
+              <span className="kx-line-editor__step" aria-hidden="true">
+                {t('approval.lineEditor.stepNo', { n: idx + 1 })}
+              </span>
+              <input
+                className="kx-line-editor__id"
+                value={l.approverId}
+                disabled={disabled}
+                placeholder={t('approval.lineEditor.idPlaceholder')}
+                aria-label={t('approval.lineEditor.approverId', { n: idx + 1 })}
+                onChange={(e) => patch(idx, { approverId: e.target.value })}
+              />
+              <input
+                className="kx-line-editor__name"
+                value={l.approverName}
+                disabled={disabled}
+                placeholder={t('approval.lineEditor.namePlaceholder')}
+                aria-label={t('approval.lineEditor.approverName', { n: idx + 1 })}
+                onChange={(e) => patch(idx, { approverName: e.target.value })}
+              />
+              <div className="kx-line-editor__ops">
+                <button
+                  type="button"
+                  className="kx-line-editor__op"
+                  disabled={disabled || idx === 0}
+                  aria-label={t('approval.lineEditor.moveUp')}
+                  onClick={() => move(idx, -1)}
+                >
+                  <span className="kx-line-editor__up" aria-hidden="true">
+                    <IconChevronDown size={15} />
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  className="kx-line-editor__op"
+                  disabled={disabled || idx === lines.length - 1}
+                  aria-label={t('approval.lineEditor.moveDown')}
+                  onClick={() => move(idx, 1)}
+                >
+                  <IconChevronDown size={15} />
+                </button>
+                <button
+                  type="button"
+                  className="kx-line-editor__op kx-line-editor__op--del"
+                  disabled={disabled}
+                  aria-label={t('approval.lineEditor.remove')}
+                  onClick={() => remove(idx)}
+                >
+                  <IconClose size={14} />
+                </button>
+              </div>
+            </li>
+          ))}
+        </ol>
+      )}
+      <button type="button" className="kx-line-editor__add" disabled={disabled} onClick={add}>
+        <IconPlus size={15} /> {t('approval.lineEditor.add')}
+      </button>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/approval/ManagerApprovalQueuePage.tsx b/src/frontend/src/screens/approval/ManagerApprovalQueuePage.tsx
new file mode 100644
index 0000000..ebefeaa
--- /dev/null
+++ b/src/frontend/src/screens/approval/ManagerApprovalQueuePage.tsx
@@ -0,0 +1,231 @@
+import { useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconPlus, IconSearch } from '../../components/ui/icons';
+import { approvalApi, type ApprovalBox, type ApprovalListItem, type ApprovalStatus } from './approvalApi';
+import { ApprovalComposePanel } from './ApprovalComposePanel';
+import './approval-queue.css';
+
+/*
+ * SCR-10 결재함(홀매니저·기안자·결재자). §5B 공통 전자결재(F028) 실배선 — WISE 결재함 구조.
+ * - 탭: 결재할 문서(PENDING) · 상신한 문서(DRAFTED) · 반려(REJECTED, 내 기안) · 완료(DONE).
+ * - 기안: 기안 작성 + 결재선 지정 패널(ApprovalComposePanel mode=create).
+ * - 반려건 재상신: 반려/상신 탭의 REJECTED 문서 → 재상신 패널(mode=resubmit, version+1).
+ * - 결재할 문서 열기 → ReviewDetailsPage(승인/반려). 라우트 미변경: approvalId 쿼리 전달.
+ * ★ App.tsx 불변 — 기안/재상신은 인-페이지 패널(?compose=1 / ?resubmit=<id> 쿼리로 딥링크 가능).
+ */
+type TabKey = 'PENDING' | 'DRAFTED' | 'REJECTED' | 'DONE';
+
+const TABS: TabKey[] = ['PENDING', 'DRAFTED', 'REJECTED', 'DONE'];
+
+function statusTone(s: ApprovalStatus): string {
+  switch (s) {
+    case 'APPROVED':
+      return 'kx-aq__st--ok';
+    case 'REJECTED':
+      return 'kx-aq__st--bad';
+    case 'IN_PROGRESS':
+    case 'SUBMITTED':
+      return 'kx-aq__st--wip';
+    default:
+      return '';
+  }
+}
+
+export function ManagerApprovalQueuePage() {
+  const { eventId = '', hallId = 'H7', booth = 'A-101' } = useParams();
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const { t } = useTranslation();
+  const [sp, setSp] = useSearchParams();
+
+  const [tab, setTab] = useState<TabKey>('PENDING');
+  const [keyword, setKeyword] = useState('');
+  const [term, setTerm] = useState('');
+  const [notice, setNotice] = useState<string | null>(null);
+
+  // 인-페이지 뷰: ?compose=1(기안) / ?resubmit=<id>(재상신) / 그 외 목록.
+  const composing = sp.get('compose') === '1';
+  const resubmitId = sp.get('resubmit');
+
+  const box: ApprovalBox = tab === 'REJECTED' ? 'DRAFTED' : (tab as ApprovalBox);
+  const listQ = useQuery({
+    queryKey: ['approvals', box, term],
+    queryFn: () => approvalApi.list({ box, keyword: term || undefined, page: 0, size: 100 }),
+    enabled: !composing && !resubmitId,
+  });
+
+  const allRows = listQ.data?.items ?? [];
+  const rows = tab === 'REJECTED' ? allRows.filter((r) => r.status === 'REJECTED') : allRows;
+
+  const statusLabel = (s: ApprovalStatus) => t(`approval.status.${s}`);
+
+  const openCompose = () => {
+    setNotice(null);
+    setSp({ compose: '1' });
+  };
+  const openResubmit = (id: string) => {
+    setNotice(null);
+    setSp({ resubmit: id });
+  };
+  const backToList = () => setSp({});
+
+  const onDone = (_id: string, msg: string) => {
+    setNotice(msg);
+    setSp({});
+    qc.invalidateQueries({ queryKey: ['approvals'] });
+  };
+
+  // 행 클릭: 반려 문서(내 기안)는 재상신, 그 외는 검수/조회 화면으로.
+  const onRowOpen = (r: ApprovalListItem) => {
+    if (r.status === 'REJECTED') {
+      openResubmit(r.id);
+      return;
+    }
+    navigate(
+      `/events/${eventId}/halls/${hallId}/booths/${r.refId ?? booth}/review?approvalId=${encodeURIComponent(r.id)}`,
+    );
+  };
+
+  if (composing) {
+    return (
+      <ApprovalComposePanel
+        mode="create"
+        eventId={eventId || undefined}
+        onDone={onDone}
+        onCancel={backToList}
+      />
+    );
+  }
+  if (resubmitId) {
+    return (
+      <ApprovalComposePanel
+        mode="resubmit"
+        approvalId={resubmitId}
+        eventId={eventId || undefined}
+        onDone={onDone}
+        onCancel={backToList}
+      />
+    );
+  }
+
+  return (
+    <div className="kx-aq">
+      <header className="kx-aq__head">
+        <div className="kx-aq__head-top">
+          <div className="kx-aq__title-row">
+            <h1>{t('approval.boxTitle')}</h1>
+          </div>
+          <div className="kx-aq__head-actions">
+            <form
+              className="kx-aq__search"
+              onSubmit={(e) => {
+                e.preventDefault();
+                setTerm(keyword.trim());
+              }}
+            >
+              <span aria-hidden="true">
+                <IconSearch size={16} />
+              </span>
+              <input
+                placeholder={t('approval.searchPlaceholder')}
+                aria-label={t('approval.search')}
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
+              />
+            </form>
+            <Button leadingIcon={<IconPlus size={16} />} onClick={openCompose}>
+              {t('approval.compose')}
+            </Button>
+          </div>
+        </div>
+
+        <div className="kx-aq__tabs" role="tablist" aria-label={t('approval.boxTitle')}>
+          {TABS.map((tk) => (
+            <button
+              key={tk}
+              type="button"
+              role="tab"
+              aria-selected={tab === tk}
+              className={`kx-aq__tab ${tab === tk ? 'is-active' : ''}`}
+              onClick={() => {
+                setTab(tk);
+                setNotice(null);
+              }}
+            >
+              {t(`approval.tab.${tk}`)}
+            </button>
+          ))}
+        </div>
+      </header>
+
+      <div className="kx-aq__body">
+        <section className="kx-aq__main" aria-label={t('approval.boxTitle')}>
+          {notice && (
+            <div className="kx-aq__notice" role="status">
+              {notice}
+            </div>
+          )}
+          <div className="kx-aq__main-head">
+            <h2>{t(`approval.tab.${tab}`)}</h2>
+            <span className="kx-aq__count tnum">{rows.length}</span>
+          </div>
+          <div className="kx-aq__table-wrap">
+            {listQ.isLoading ? (
+              <div className="kx-aq__skel">
+                <Skeleton height={20} />
+                <Skeleton height={20} />
+                <Skeleton height={20} />
+              </div>
+            ) : listQ.isError ? (
+              <ErrorState onRetry={() => listQ.refetch()} />
+            ) : rows.length === 0 ? (
+              <EmptyState title={t(`approval.empty.${tab}`)} />
+            ) : (
+              <table className="kx-aq__table">
+                <thead>
+                  <tr>
+                    <th>{t('approval.colTitle')}</th>
+                    <th>{t('approval.colDocType')}</th>
+                    <th>{t('approval.colDrafter')}</th>
+                    <th>{t('approval.colSubmitted')}</th>
+                    <th>{t('approval.colStep')}</th>
+                    <th>{t('approval.colStatus')}</th>
+                    <th className="kx-aq__col-act">{t('approval.colAction')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((r) => (
+                    <tr key={r.id}>
+                      <td>
+                        <div className="kx-aq__event">{r.title}</div>
+                        {r.refId ? <div className="kx-aq__booth tnum">{r.refId}</div> : null}
+                      </td>
+                      <td>{t(`approval.docTypes.${r.docType}`, { defaultValue: r.docType })}</td>
+                      <td className="kx-aq__muted">{r.drafterName ?? r.drafterId}</td>
+                      <td className="kx-aq__muted tnum">{(r.submittedAt ?? '').slice(0, 10) || '-'}</td>
+                      <td className="tnum">
+                        {r.totalSteps > 0 ? `${r.curStep}/${r.totalSteps}` : '-'}
+                      </td>
+                      <td>
+                        <span className={`kx-aq__st ${statusTone(r.status)}`}>{statusLabel(r.status)}</span>
+                      </td>
+                      <td className="kx-aq__col-act">
+                        <button className="kx-aq__review" onClick={() => onRowOpen(r)}>
+                          {r.status === 'REJECTED' ? t('approval.resubmitBtn') : t('approval.open')}
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/approval/ReviewDetailsPage.tsx b/src/frontend/src/screens/approval/ReviewDetailsPage.tsx
new file mode 100644
index 0000000..d9636b9
--- /dev/null
+++ b/src/frontend/src/screens/approval/ReviewDetailsPage.tsx
@@ -0,0 +1,375 @@
+import { useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../components/ui/Button';
+import { AiLabel } from '../../components/ui/Badge';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import {
+  IconChevronRight,
+  IconClose,
+  IconDownload,
+  IconExpand,
+  IconMinus,
+  IconPlus,
+  IconSpark,
+} from '../../components/ui/icons';
+import { approvalApi, type ApprovalLine } from './approvalApi';
+import './review-details.css';
+import './approval-form.css';
+
+/*
+ * SCR-11 검수 상세. §5B 공통 전자결재(F028) 실배선.
+ * - 좌: 문서/도면 프리뷰(참고용 샘플 캔버스 유지) / 우: 실 결재선 타임라인·이력 + 승인/반려(실동작).
+ * - approvalId 쿼리 존재 시 실 결재 문서 로드·처리(승인/반려는 현재 단계 결재자만 백엔드 403).
+ *   반려는 사유 입력 모달(사유 필수). 반려된 내 기안은 재상신 링크(결재함 재상신 패널) 노출.
+ *   미존재 시 기존 데모(도면·AI 오버레이) 유지 — 라우트 하위호환.
+ */
+const MOCK = `${import.meta.env.BASE_URL}mock/review_details`;
+const BLUEPRINT = `${MOCK}/img1.jpg`;
+
+const TABS = ['도면', '예상 사진 (참고용)', '버전 비교'];
+
+type ActionKind = 'approve' | 'reject';
+
+function lineTone(s: ApprovalLine['lineStatus']): string {
+  switch (s) {
+    case 'CURRENT':
+      return 'kx-rev__step--cur';
+    case 'APPROVED':
+      return 'kx-rev__step--ok';
+    case 'REJECTED':
+      return 'kx-rev__step--bad';
+    case 'SKIPPED':
+      return 'kx-rev__step--skip';
+    default:
+      return '';
+  }
+}
+
+export function ReviewDetailsPage() {
+  const { booth = 'A-102' } = useParams();
+  const [sp] = useSearchParams();
+  const approvalId = sp.get('approvalId');
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const { t } = useTranslation();
+  const [tab, setTab] = useState(0);
+  const [overlay, setOverlay] = useState(true);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [actionKind, setActionKind] = useState<ActionKind | null>(null);
+
+  const detailQ = useQuery({
+    queryKey: ['approval', approvalId],
+    queryFn: () => approvalApi.get(approvalId as string),
+    enabled: !!approvalId,
+  });
+
+  const invalidate = () => {
+    qc.invalidateQueries({ queryKey: ['approval', approvalId] });
+    qc.invalidateQueries({ queryKey: ['approvals'] });
+  };
+
+  const approveM = useMutation({
+    mutationFn: (comment: string) => approvalApi.approve(approvalId as string, comment.trim() || undefined),
+    onSuccess: () => {
+      setNotice(t('approval.approvedDone'));
+      setActionKind(null);
+      invalidate();
+    },
+    onError: (e: Error) => setNotice(e.message),
+  });
+
+  const rejectM = useMutation({
+    mutationFn: (comment: string) => approvalApi.reject(approvalId as string, comment.trim()),
+    onSuccess: () => {
+      setNotice(t('approval.rejectedDone'));
+      setActionKind(null);
+      invalidate();
+    },
+    onError: (e: Error) => setNotice(e.message),
+  });
+
+  const d = detailQ.data;
+  const busy = approveM.isPending || rejectM.isPending;
+  const statusLabel = d ? t(`approval.status.${d.status}`) : '';
+
+  const doAction = (comment: string) => {
+    if (actionKind === 'approve') approveM.mutate(comment);
+    else if (actionKind === 'reject') rejectM.mutate(comment);
+  };
+
+  return (
+    <div className="kx-rev">
+      <header className="kx-rev__head">
+        <div>
+          <nav className="kx-rev__crumb" aria-label="경로">
+            <button onClick={() => navigate(-1)}>{t('approval.boxTitle')}</button>
+            <span aria-hidden="true">
+              <IconChevronRight size={14} />
+            </span>
+            <span className="kx-rev__crumb-cur">{d ? d.title : `부스 ${booth}`}</span>
+          </nav>
+          <div className="kx-rev__title-row">
+            <h1>{d ? d.title : t('approval.reviewTitle')}</h1>
+            {d ? (
+              <>
+                <span className="kx-rev__meta">
+                  {t('approval.version')}: v{d.version}
+                </span>
+                <span className="kx-rev__meta">
+                  {t('approval.drafter')}: {d.drafterName ?? d.drafterId}
+                </span>
+                <span className="kx-rev__meta">{statusLabel}</span>
+                <span className="kx-rev__meta">
+                  {t('approval.step')} {d.curStep}/{d.totalSteps}
+                </span>
+              </>
+            ) : (
+              <span className="kx-rev__meta">{t('approval.demoMode')}</span>
+            )}
+          </div>
+        </div>
+        <Button variant="ghost" leadingIcon={<IconDownload size={16} />}>
+          {t('approval.downloadOriginal')}
+        </Button>
+      </header>
+
+      <div className="kx-rev__body">
+        {/* 좌: 문서/도면 프리뷰(참고용) */}
+        <section className="kx-rev__canvas" aria-label={t('approval.previewAria')}>
+          <div className="kx-rev__canvas-top">
+            <div className="kx-rev__tabs" role="tablist">
+              {TABS.map((tabLabel, i) => (
+                <button
+                  key={tabLabel}
+                  role="tab"
+                  aria-selected={tab === i}
+                  className={tab === i ? 'is-active' : ''}
+                  onClick={() => setTab(i)}
+                >
+                  {tabLabel}
+                </button>
+              ))}
+            </div>
+            <button
+              className={`kx-rev__overlay-toggle ${overlay ? 'is-on' : ''}`}
+              onClick={() => setOverlay((o) => !o)}
+              aria-pressed={overlay}
+            >
+              <span aria-hidden="true">
+                <IconSpark size={15} />
+              </span>{' '}
+              AI 오버레이
+              <span className="kx-rev__switch" aria-hidden="true">
+                <span className="kx-rev__switch-knob" />
+              </span>
+            </button>
+          </div>
+          <div className="kx-rev__viewer">
+            <div className="kx-rev__grid-bg" aria-hidden="true" />
+            <div className="kx-rev__drawing">
+              <img src={BLUEPRINT} alt={t('approval.previewAria')} loading="lazy" />
+            </div>
+            <div className="kx-rev__zoom">
+              <button aria-label="확대">
+                <IconPlus size={18} />
+              </button>
+              <button aria-label="축소">
+                <IconMinus size={18} />
+              </button>
+              <button aria-label="화면맞춤">
+                <IconExpand size={18} />
+              </button>
+            </div>
+          </div>
+        </section>
+
+        {/* 우: 실 결재선 타임라인·이력·의견 */}
+        <aside className="kx-rev__panel" aria-label={t('approval.lineAria')}>
+          {!approvalId ? (
+            <div className="kx-rev__ai-card">
+              <div className="kx-rev__ai-card-head">
+                <AiLabel>{t('approval.demoMode')}</AiLabel>
+              </div>
+              <p className="kx-rev__vdetail">{t('approval.demoHint')}</p>
+            </div>
+          ) : detailQ.isLoading ? (
+            <div className="kx-rev__ai-card">
+              <Skeleton height={24} width="70%" />
+              <Skeleton height={16} />
+              <Skeleton height={120} />
+            </div>
+          ) : detailQ.isError || !d ? (
+            <ErrorState onRetry={() => detailQ.refetch()} />
+          ) : (
+            <>
+              {d.content ? (
+                <div className="kx-rev__ai-card">
+                  <div className="kx-rev__ai-card-head">
+                    <strong>{t('approval.docBody')}</strong>
+                  </div>
+                  <p className="kx-rev__vdetail">{d.content}</p>
+                </div>
+              ) : null}
+
+              <div className="kx-rev__ai-card">
+                <div className="kx-rev__ai-card-head">
+                  <strong>{t('approval.line')}</strong>
+                </div>
+                <ol className="kx-rev__steps">
+                  {d.lines.map((l) => (
+                    <li key={l.id} className={`kx-rev__step ${lineTone(l.lineStatus)}`}>
+                      <span className="kx-rev__step-no" aria-hidden="true">
+                        {l.stepNo}
+                      </span>
+                      <div>
+                        <p className="kx-rev__vtitle">{l.approverName ?? l.approverId}</p>
+                        <p className="kx-rev__vdetail">
+                          {t(`approval.lineStatus.${l.lineStatus}`)}
+                          {l.comment ? ` — ${l.comment}` : ''}
+                        </p>
+                      </div>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+
+              <div className="kx-rev__thread">
+                <h3>{t('approval.history')}</h3>
+                {d.history.length === 0 ? (
+                  <EmptyState title={t('approval.noHistory')} />
+                ) : (
+                  d.history.map((h) => (
+                    <div key={h.id} className="kx-rev__comment">
+                      <span className="kx-rev__avatar">{t(`approval.action.${h.action}`)}</span>
+                      <div>
+                        <div className="kx-rev__comment-top">
+                          <strong>{h.actorName ?? h.actorId}</strong>
+                          <span>{(h.actedAt ?? '').replace('T', ' ').slice(0, 16)}</span>
+                        </div>
+                        {h.comment ? <p>{h.comment}</p> : null}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </>
+          )}
+        </aside>
+      </div>
+
+      {/* 하단 액션 — 승인/반려(현재 단계 결재자) · 재상신(반려된 내 기안) */}
+      <footer className="kx-rev__footer">
+        <div className="kx-rev__foot-left">
+          <p className="kx-rev__foot-note">
+            {notice
+              ? notice
+              : approvalId && d
+                ? d.canAct
+                  ? t('approval.canActHint')
+                  : d.canResubmit
+                    ? t('approval.canResubmitHint')
+                    : t('approval.notApproverHint')
+                : t('approval.demoFootNote')}
+          </p>
+        </div>
+        <div className="kx-rev__foot-actions">
+          {approvalId && d?.canResubmit ? (
+            <Button
+              variant="secondary"
+              onClick={() => navigate(`/work/approval?resubmit=${encodeURIComponent(d.id)}`)}
+            >
+              {t('approval.resubmitBtn')}
+            </Button>
+          ) : null}
+          <Button
+            variant="danger"
+            disabled={!approvalId || !d?.canAct || busy}
+            onClick={() => {
+              setNotice(null);
+              setActionKind('reject');
+            }}
+          >
+            {t('approval.reject')}
+          </Button>
+          <Button
+            disabled={!approvalId || !d?.canAct || busy}
+            onClick={() => {
+              setNotice(null);
+              setActionKind('approve');
+            }}
+          >
+            {t('approval.approve')}
+          </Button>
+        </div>
+      </footer>
+
+      {actionKind && (
+        <ActionModal
+          kind={actionKind}
+          busy={busy}
+          onClose={() => setActionKind(null)}
+          onConfirm={doAction}
+        />
+      )}
+    </div>
+  );
+}
+
+function ActionModal({
+  kind,
+  busy,
+  onClose,
+  onConfirm,
+}: {
+  kind: ActionKind;
+  busy: boolean;
+  onClose: () => void;
+  onConfirm: (comment: string) => void;
+}) {
+  const { t } = useTranslation();
+  const [comment, setComment] = useState('');
+  const required = kind === 'reject';
+  const canConfirm = !busy && (!required || comment.trim().length > 0);
+
+  return (
+    <div className="kx-apm__backdrop" role="dialog" aria-modal="true" onClick={onClose}>
+      <div className="kx-apm" onClick={(e) => e.stopPropagation()}>
+        <div className="kx-apm__head">
+          <h2>{kind === 'reject' ? t('approval.rejectModalTitle') : t('approval.approveModalTitle')}</h2>
+          <button className="kx-apm__close" aria-label={t('approval.cancel')} onClick={onClose}>
+            <IconClose size={18} />
+          </button>
+        </div>
+        <div className="kx-apm__body">
+          <label className="kx-apm__label" htmlFor="kx-apm-comment">
+            {required ? t('approval.rejectReason') : t('approval.comment')}
+            {required ? <em style={{ color: 'var(--color-error)', fontStyle: 'normal' }}> *</em> : null}
+          </label>
+          <textarea
+            id="kx-apm-comment"
+            className="kx-apm__textarea"
+            rows={4}
+            value={comment}
+            placeholder={required ? t('approval.rejectReasonPlaceholder') : t('approval.commentOptional')}
+            onChange={(e) => setComment(e.target.value)}
+          />
+          {required ? <span className="kx-apm__hint">{t('approval.rejectReasonHint')}</span> : null}
+        </div>
+        <div className="kx-apm__foot">
+          <Button variant="ghost" onClick={onClose} disabled={busy}>
+            {t('approval.cancel')}
+          </Button>
+          <Button
+            variant={kind === 'reject' ? 'danger' : 'primary'}
+            disabled={!canConfirm}
+            onClick={() => onConfirm(comment)}
+          >
+            {busy ? t('approval.saving') : kind === 'reject' ? t('approval.reject') : t('approval.approve')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/approval/approval-form.css b/src/frontend/src/screens/approval/approval-form.css
new file mode 100644
index 0000000..f1aa746
--- /dev/null
+++ b/src/frontend/src/screens/approval/approval-form.css
@@ -0,0 +1,346 @@
+/* §5B 전자결재(F028) 기안/재상신 패널 + 결재선 편집기 + 반려 모달 스타일. */
+
+.kx-apf {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  overflow-y: auto;
+  height: 100%;
+  min-height: 0;
+}
+.kx-apf__head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-apf__head h1 {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-apf__back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  border-radius: var(--radius-sm);
+  padding: 5px 12px;
+  font-size: var(--fs-caption);
+  cursor: pointer;
+}
+.kx-apf__back:hover {
+  background: var(--color-neutral-050);
+}
+.kx-apf__ver {
+  margin-left: auto;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+}
+.kx-apf__error {
+  border: 1px solid #fecdca;
+  background: #fef3f2;
+  color: var(--color-error);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  font-size: var(--fs-caption);
+}
+
+.kx-apf__reject {
+  border: 1px solid #fecdca;
+  background: #fffbfa;
+  border-radius: var(--radius-lg);
+  padding: var(--space-3) var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-apf__reject-head strong {
+  font-size: var(--fs-caption);
+  color: #b91c1c;
+  font-weight: 700;
+}
+.kx-apf__reject-body {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-800);
+  line-height: var(--lh-body);
+}
+.kx-apf__prev {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-2) 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-top: 1px dashed var(--color-neutral-200);
+}
+.kx-apf__prev li {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: baseline;
+  font-size: var(--fs-caption);
+}
+.kx-apf__prev-act {
+  font-weight: 700;
+  color: var(--color-neutral-800);
+}
+.kx-apf__prev-meta {
+  color: var(--color-neutral-500);
+}
+.kx-apf__prev-cmt {
+  color: var(--color-neutral-700);
+}
+
+.kx-apf__card {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  max-width: 900px;
+}
+.kx-apf__row {
+  display: flex;
+  gap: var(--space-4);
+}
+.kx-apf__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.kx-apf__field--type {
+  flex: 0 0 200px;
+}
+.kx-apf__field--title {
+  flex: 1;
+}
+.kx-apf__label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+.kx-apf__req {
+  color: var(--color-error);
+  font-style: normal;
+}
+.kx-apf__input,
+.kx-apf__select,
+.kx-apf__textarea {
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  background: var(--color-white);
+  width: 100%;
+}
+.kx-apf__textarea {
+  resize: vertical;
+  line-height: var(--lh-body);
+}
+.kx-apf__input:focus,
+.kx-apf__select:focus,
+.kx-apf__textarea:focus {
+  outline: none;
+  border-color: var(--color-primary-600);
+}
+.kx-apf__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  border-top: 1px solid var(--color-neutral-100);
+  padding-top: var(--space-4);
+}
+
+/* 결재선 편집기 */
+.kx-line-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  border: 1px dashed var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+}
+.kx-line-editor__empty {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-line-editor__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-line-editor__row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.kx-line-editor__step {
+  flex: 0 0 auto;
+  min-width: 52px;
+  text-align: center;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-primary-700);
+  background: var(--color-primary-050);
+  border-radius: var(--radius-pill);
+  padding: 3px 8px;
+}
+.kx-line-editor__id {
+  flex: 0 0 200px;
+}
+.kx-line-editor__name {
+  flex: 1;
+  min-width: 120px;
+}
+.kx-line-editor__id,
+.kx-line-editor__name {
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  padding: 7px 10px;
+  font-size: var(--fs-body);
+}
+.kx-line-editor__id:focus,
+.kx-line-editor__name:focus {
+  outline: none;
+  border-color: var(--color-primary-600);
+}
+.kx-line-editor__ops {
+  display: flex;
+  gap: 2px;
+}
+.kx-line-editor__op {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  color: var(--color-neutral-500);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.kx-line-editor__op:hover:not(:disabled) {
+  background: var(--color-neutral-050);
+  color: var(--color-neutral-800);
+}
+.kx-line-editor__op:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.kx-line-editor__op--del:hover:not(:disabled) {
+  color: var(--color-error);
+  border-color: #fecdca;
+}
+.kx-line-editor__up {
+  display: inline-flex;
+  transform: rotate(180deg);
+}
+.kx-line-editor__add {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  align-self: flex-start;
+  border: 1px solid var(--color-primary-600);
+  background: var(--color-white);
+  color: var(--color-primary-600);
+  border-radius: var(--radius-sm);
+  padding: 6px 14px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  cursor: pointer;
+}
+.kx-line-editor__add:hover:not(:disabled) {
+  background: var(--color-primary-050);
+}
+.kx-line-editor__add:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 반려/승인 사유 모달 */
+.kx-apm__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: var(--space-4);
+}
+.kx-apm {
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  width: 100%;
+  max-width: 440px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+}
+.kx-apm__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+.kx-apm__head h2 {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-apm__close {
+  border: none;
+  background: none;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+  display: inline-flex;
+}
+.kx-apm__body {
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.kx-apm__label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+.kx-apm__textarea {
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  font-size: var(--fs-body);
+  resize: vertical;
+  line-height: var(--lh-body);
+}
+.kx-apm__textarea:focus {
+  outline: none;
+  border-color: var(--color-primary-600);
+}
+.kx-apm__hint {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-apm__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-top: 1px solid var(--color-neutral-100);
+}
diff --git a/src/frontend/src/screens/approval/approval-queue.css b/src/frontend/src/screens/approval/approval-queue.css
new file mode 100644
index 0000000..c2868ad
--- /dev/null
+++ b/src/frontend/src/screens/approval/approval-queue.css
@@ -0,0 +1,369 @@
+.kx-aq {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.kx-aq__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-5);
+  border-bottom: var(--border-card);
+  background: var(--color-white);
+}
+.kx-aq__head-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+.kx-aq__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+.kx-aq__title-row h1 {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-aq__hall-tabs {
+  display: flex;
+  gap: var(--space-2);
+}
+.kx-aq__hall-tabs button {
+  padding: 4px 14px;
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kx-aq__hall-tabs button.is-active {
+  border-color: var(--color-primary-600);
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+  font-weight: 700;
+}
+.kx-aq__search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  color: var(--color-neutral-500);
+}
+.kx-aq__search input {
+  border: none;
+  outline: none;
+  font-size: var(--fs-body);
+  width: 220px;
+}
+.kx-aq__stats {
+  display: flex;
+  gap: var(--space-3);
+}
+.kx-aq__stat {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  padding: var(--space-2) var(--space-4);
+}
+.kx-aq__stat span {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-aq__stat strong {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-aq__stat--primary {
+  color: var(--color-primary-600) !important;
+}
+.kx-aq__stat--alert {
+  background: #fef3f2;
+  border-color: #fecdca;
+}
+.kx-aq__stat--alert span,
+.kx-aq__stat--alert strong {
+  color: var(--color-error);
+}
+
+.kx-aq__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.kx-aq__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-5);
+  overflow: auto;
+}
+.kx-aq__main-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.kx-aq__main-head h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-aq__table-wrap {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: auto;
+  background: var(--color-white);
+}
+.kx-aq__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-body);
+}
+.kx-aq__table thead {
+  position: sticky;
+  top: 0;
+}
+.kx-aq__table th {
+  text-align: left;
+  padding: 10px 12px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: var(--color-neutral-050);
+  border-bottom: 2px solid var(--color-neutral-200);
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+.kx-aq__col-ai {
+  color: var(--color-ai-accent) !important;
+}
+.kx-aq__col-act {
+  text-align: right;
+}
+.kx-aq__table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-neutral-200);
+  vertical-align: middle;
+}
+.kx-aq__table tbody tr:hover {
+  background: var(--row-hover);
+}
+.kx-aq__event {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-aq__booth {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-aq__muted {
+  color: var(--color-neutral-500);
+}
+.kx-aq__ai {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+}
+.kx-aq__ai--block {
+  color: var(--color-error);
+  background: #fef3f2;
+  border: 1px solid #fecdca;
+}
+.kx-aq__ai--pass {
+  color: var(--color-success);
+  background: #e6f4ee;
+  border: 1px solid #a6e0c8;
+}
+.kx-aq__review {
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  color: var(--color-primary-600);
+  border-radius: var(--radius-sm);
+  padding: 5px 14px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  cursor: pointer;
+}
+.kx-aq__review:hover {
+  background: var(--color-primary-050);
+}
+
+/* side */
+.kx-aq__side {
+  width: 320px;
+  border-left: var(--border-card);
+  background: var(--color-neutral-050);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  overflow-y: auto;
+}
+.kx-aq__card {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-aq__card h3 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  border-bottom: 1px solid var(--color-neutral-100);
+  padding-bottom: var(--space-2);
+}
+.kx-aq__load {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-aq__load-top {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+.kx-aq__load-top span {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-aq__load-top strong {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-aq__bar {
+  height: 8px;
+  background: var(--color-neutral-100);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+.kx-aq__bar-fill {
+  height: 100%;
+  background: var(--color-primary-600);
+}
+.kx-aq__bar-fill--green {
+  background: var(--color-success);
+}
+.kx-aq__load-scale {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-aq__card--ai {
+  border-color: var(--color-ai-accent);
+  background: var(--color-ai-surface);
+}
+.kx-aq__ai-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-ai-accent);
+}
+.kx-aq__ai-head h3 {
+  border: none;
+  padding: 0;
+  font-size: var(--fs-h3);
+}
+.kx-aq__card--ai p {
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  color: var(--color-neutral-700);
+}
+
+@media (max-width: 1100px) {
+  .kx-aq__side {
+    display: none;
+  }
+}
+
+/* F028 결재함 — 헤더 액션·탭·알림·카운트 */
+.kx-aq__head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-aq__tabs {
+  display: flex;
+  gap: var(--space-1);
+  border-bottom: 1px solid var(--color-neutral-200);
+}
+.kx-aq__tab {
+  border: none;
+  background: none;
+  padding: 8px 16px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.kx-aq__tab:hover {
+  color: var(--color-neutral-800);
+}
+.kx-aq__tab.is-active {
+  color: var(--color-primary-700);
+  font-weight: 700;
+  border-bottom-color: var(--color-primary-600);
+}
+.kx-aq__notice {
+  border: 1px solid #a6e0c8;
+  background: #e6f4ee;
+  color: #047857;
+  border-radius: var(--radius-sm);
+  padding: 8px 14px;
+  font-size: var(--fs-caption);
+}
+.kx-aq__count {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-primary-600);
+  background: var(--color-primary-050);
+  border-radius: var(--radius-pill);
+  padding: 2px 10px;
+}
+
+/* F028 실배선 — 상태 배지·스켈레톤 */
+.kx-aq__skel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+.kx-aq__st {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  background: rgba(148, 163, 184, 0.16);
+  color: #475569;
+}
+.kx-aq__st--wip {
+  background: rgba(31, 41, 252, 0.12);
+  color: #1f29fc;
+}
+.kx-aq__st--ok {
+  background: rgba(16, 185, 129, 0.14);
+  color: #047857;
+}
+.kx-aq__st--bad {
+  background: rgba(239, 68, 68, 0.14);
+  color: #b91c1c;
+}
diff --git a/src/frontend/src/screens/approval/approvalApi.ts b/src/frontend/src/screens/approval/approvalApi.ts
new file mode 100644
index 0000000..3f2dee7
--- /dev/null
+++ b/src/frontend/src/screens/approval/approvalApi.ts
@@ -0,0 +1,134 @@
+/*
+ * §5B 공통 전자결재(F028) API 클라이언트 — 자체 모듈.
+ * ★ 공유 api/endpoints.ts·types.ts 를 수정하지 않기 위해 결재 엔드포인트/타입을 여기에 캡슐화한다.
+ *   공용 client.ts 의 api(get/post) 만 재사용하여 JWT·에러 봉투 처리를 공유한다.
+ * 백엔드: /api/work/approvals (ApprovalController). 상태: DRAFT→SUBMITTED→IN_PROGRESS→APPROVED|REJECTED(+CANCELED).
+ */
+import { api } from '../../api/client';
+import type { PageResponse } from '../../api/types';
+
+export type ApprovalStatus =
+  | 'DRAFT'
+  | 'SUBMITTED'
+  | 'IN_PROGRESS'
+  | 'APPROVED'
+  | 'REJECTED'
+  | 'CANCELED';
+
+export type ApprovalBox = 'DRAFT' | 'DRAFTED' | 'PENDING' | 'DONE';
+
+export interface ApprovalListItem {
+  id: string;
+  docType: string;
+  title: string;
+  status: ApprovalStatus;
+  drafterId: string;
+  drafterName: string | null;
+  curStep: number;
+  totalSteps: number;
+  version: number;
+  eventId: string | null;
+  refType: string | null;
+  refId: string | null;
+  submittedAt: string | null;
+  createdAt: string | null;
+}
+
+export interface ApprovalLine {
+  id: string;
+  stepNo: number;
+  approverId: string;
+  approverName: string | null;
+  lineStatus: 'WAIT' | 'CURRENT' | 'APPROVED' | 'REJECTED' | 'SKIPPED';
+  actedAt: string | null;
+  comment: string | null;
+}
+
+export interface ApprovalHistoryItem {
+  id: string;
+  stepNo: number | null;
+  actorId: string;
+  actorName: string | null;
+  action: 'SUBMIT' | 'APPROVE' | 'REJECT' | 'RESUBMIT' | 'CANCEL';
+  comment: string | null;
+  actedAt: string | null;
+}
+
+export interface ApprovalDetail {
+  id: string;
+  docType: string;
+  title: string;
+  content: string | null;
+  status: ApprovalStatus;
+  drafterId: string;
+  drafterName: string | null;
+  curStep: number;
+  totalSteps: number;
+  version: number;
+  eventId: string | null;
+  refType: string | null;
+  refId: string | null;
+  submittedAt: string | null;
+  completedAt: string | null;
+  createdAt: string | null;
+  lines: ApprovalLine[];
+  history: ApprovalHistoryItem[];
+  canAct: boolean;
+  canCancel: boolean;
+  canResubmit: boolean;
+}
+
+export interface ApprovalLineSaveRequest {
+  stepNo: number;
+  approverId: string;
+  approverName?: string;
+}
+
+export interface ApprovalSaveRequest {
+  eventId?: string;
+  docType?: string;
+  title: string;
+  content?: string;
+  refType?: string;
+  refId?: string;
+  lines?: ApprovalLineSaveRequest[];
+}
+
+const BASE = '/api/work/approvals';
+
+export const approvalApi = {
+  /** GET / — 결재함 목록(box=DRAFT|DRAFTED|PENDING|DONE). */
+  list: (params?: { box?: ApprovalBox; keyword?: string; page?: number; size?: number }) => {
+    const q = new URLSearchParams();
+    if (params?.box) q.set('box', params.box);
+    if (params?.keyword) q.set('keyword', params.keyword);
+    if (params?.page != null) q.set('page', String(params.page));
+    if (params?.size != null) q.set('size', String(params.size));
+    const qs = q.toString();
+    return api.get<PageResponse<ApprovalListItem>>(`${BASE}${qs ? `?${qs}` : ''}`);
+  },
+
+  /** GET /{id} — 상세(결재선·이력·액션 플래그). */
+  get: (id: string) => api.get<ApprovalDetail>(`${BASE}/${encodeURIComponent(id)}`),
+
+  /** POST / — 기안(DRAFT). */
+  create: (body: ApprovalSaveRequest) => api.post<ApprovalDetail>(BASE, body),
+
+  /** POST /{id}/submit — 상신. */
+  submit: (id: string) => api.post<ApprovalDetail>(`${BASE}/${encodeURIComponent(id)}/submit`),
+
+  /** POST /{id}/approve — 승인(현재 단계 결재자). */
+  approve: (id: string, comment?: string) =>
+    api.post<ApprovalDetail>(`${BASE}/${encodeURIComponent(id)}/approve`, { comment }),
+
+  /** POST /{id}/reject — 반려(사유 필수). */
+  reject: (id: string, comment: string) =>
+    api.post<ApprovalDetail>(`${BASE}/${encodeURIComponent(id)}/reject`, { comment }),
+
+  /** POST /{id}/resubmit — 재상신(version+1). */
+  resubmit: (id: string, body?: ApprovalSaveRequest) =>
+    api.post<ApprovalDetail>(`${BASE}/${encodeURIComponent(id)}/resubmit`, body ?? {}),
+
+  /** POST /{id}/cancel — 회수. */
+  cancel: (id: string) => api.post<ApprovalDetail>(`${BASE}/${encodeURIComponent(id)}/cancel`),
+};
diff --git a/src/frontend/src/screens/approval/review-details.css b/src/frontend/src/screens/approval/review-details.css
new file mode 100644
index 0000000..9b52723
--- /dev/null
+++ b/src/frontend/src/screens/approval/review-details.css
@@ -0,0 +1,432 @@
+.kx-rev {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.kx-rev__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-5);
+  border-bottom: var(--border-card);
+  background: var(--color-white);
+}
+.kx-rev__crumb {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-bottom: var(--space-1);
+}
+.kx-rev__crumb button {
+  border: none;
+  background: none;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+  font-size: var(--fs-caption);
+  padding: 0;
+}
+.kx-rev__crumb button:hover {
+  color: var(--color-primary-600);
+}
+.kx-rev__crumb-cur {
+  color: var(--color-neutral-900);
+}
+.kx-rev__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.kx-rev__title-row h1 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-rev__meta {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+}
+
+.kx-rev__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* 캔버스 */
+.kx-rev__canvas {
+  flex: 7;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-canvas-bg);
+  border-right: var(--border-card);
+}
+.kx-rev__canvas-top {
+  position: absolute;
+  top: var(--space-4);
+  left: var(--space-4);
+  right: var(--space-4);
+  z-index: 2;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  pointer-events: none;
+}
+.kx-rev__tabs {
+  display: flex;
+  gap: 2px;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--radius-sm);
+  padding: 3px;
+  pointer-events: auto;
+}
+.kx-rev__tabs button {
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-caption);
+  cursor: pointer;
+}
+.kx-rev__tabs button.is-active {
+  background: rgba(0, 102, 179, 0.35);
+  color: var(--color-white);
+  border: 1px solid rgba(0, 102, 179, 0.5);
+}
+.kx-rev__overlay-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--color-ai-accent);
+  color: var(--color-white);
+  border-radius: var(--radius-sm);
+  padding: 7px 12px;
+  font-size: var(--fs-caption);
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 0 15px rgba(109, 74, 255, 0.2);
+}
+.kx-rev__switch {
+  width: 30px;
+  height: 16px;
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.25);
+  position: relative;
+}
+.kx-rev__overlay-toggle.is-on .kx-rev__switch {
+  background: var(--color-ai-accent);
+}
+.kx-rev__switch-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--color-white);
+  transition: left 0.15s;
+}
+.kx-rev__overlay-toggle.is-on .kx-rev__switch-knob {
+  left: 16px;
+}
+
+.kx-rev__viewer {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.kx-rev__grid-bg {
+  position: absolute;
+  inset: 0;
+  opacity: 0.2;
+  background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
+  background-size: 40px 40px;
+}
+.kx-rev__drawing {
+  position: relative;
+  width: 78%;
+  height: 78%;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
+}
+.kx-rev__drawing img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.75;
+  mix-blend-mode: screen;
+}
+.kx-rev__pin {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: var(--color-error);
+  color: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: var(--fs-caption);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+.kx-rev__zoom {
+  position: absolute;
+  bottom: var(--space-4);
+  right: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.kx-rev__zoom button {
+  border: none;
+  background: transparent;
+  color: var(--color-white);
+  padding: 8px 10px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 15px;
+}
+.kx-rev__zoom button:last-child {
+  border-bottom: none;
+}
+.kx-rev__zoom button:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+/* 우 패널 */
+.kx-rev__panel {
+  flex: 3;
+  min-width: 300px;
+  background: var(--color-white);
+  overflow-y: auto;
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+.kx-rev__ai-card {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.kx-rev__ai-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3);
+  background: var(--color-ai-surface);
+  border-bottom: 1px solid var(--color-neutral-200);
+}
+.kx-rev__ai-count {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-error);
+  background: #fef3f2;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+}
+.kx-rev__vlist {
+  list-style: none;
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-rev__vlist li {
+  display: flex;
+  gap: var(--space-3);
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+.kx-rev__vlist li:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+.kx-rev__vpin {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #fef3f2;
+  color: var(--color-error);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+.kx-rev__vtitle {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  margin-bottom: 2px;
+}
+.kx-rev__vdetail {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-bottom: var(--space-2);
+  line-height: 16px;
+}
+.kx-rev__vcheck {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+
+.kx-rev__thread h3 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin-bottom: var(--space-3);
+}
+.kx-rev__comment {
+  display: flex;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+.kx-rev__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.kx-rev__avatar--con {
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent);
+}
+.kx-rev__comment-top {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+  margin-bottom: 2px;
+}
+.kx-rev__comment-top strong {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-900);
+}
+.kx-rev__comment-top span {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-rev__comment p {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  line-height: 16px;
+}
+
+/* 하단 */
+.kx-rev__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-5);
+  border-top: var(--border-card);
+  background: var(--color-white);
+}
+.kx-rev__foot-note {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-rev__foot-actions {
+  display: flex;
+  gap: var(--space-3);
+}
+
+/* F028 실배선 — 결재선 단계·의견 입력 */
+.kx-rev__foot-left {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+.kx-rev__comment-input {
+  width: 100%;
+  max-width: 520px;
+  padding: 8px 12px;
+  border: var(--border-card);
+  border-radius: 8px;
+  font-size: var(--fs-caption);
+}
+.kx-rev__steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.kx-rev__step {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--color-neutral-50, #f8fafc);
+}
+.kx-rev__step-no {
+  flex: 0 0 22px;
+  height: 22px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  background: rgba(148, 163, 184, 0.2);
+  color: #475569;
+}
+.kx-rev__step--cur {
+  background: rgba(31, 41, 252, 0.08);
+}
+.kx-rev__step--cur .kx-rev__step-no {
+  background: #1f29fc;
+  color: #fff;
+}
+.kx-rev__step--ok .kx-rev__step-no {
+  background: #10b981;
+  color: #fff;
+}
+.kx-rev__step--bad .kx-rev__step-no {
+  background: #ef4444;
+  color: #fff;
+}
+.kx-rev__step--skip {
+  opacity: 0.6;
+}
diff --git a/src/frontend/src/screens/auction/AuctionDetailPage.tsx b/src/frontend/src/screens/auction/AuctionDetailPage.tsx
new file mode 100644
index 0000000..bff805e
--- /dev/null
+++ b/src/frontend/src/screens/auction/AuctionDetailPage.tsx
@@ -0,0 +1,460 @@
+/*
+ * SCR-27 옥션 상세·실시간 순위·응찰 [M15]. 실 API 전환(폴링).
+ * 정본: GET /api/auctions/{id} (AuctionDetail) · POST /{id}/bids · POST /{id}/close.
+ * 대상: 장치업체(응찰)·발주자. 좌 AI 자료 뷰어 + 우 봉인 순위·응찰.
+ * ★ 봉인 입찰(서버 강제): 응답의 ranking 은 이미 마스킹됨 — 타사 금액/업체명 없음.
+ *   화면은 서버가 준 priceMasked/price 만 렌더(클라이언트 언마스킹 없음). refetchInterval 5초.
+ */
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../components/ui/Button';
+import { AiLabel } from '../../components/ui/Badge';
+import { ErrorState, Skeleton } from '../../components/ui/States';
+import { IconDocument, IconExpand, IconImage, IconPlus } from '../../components/ui/icons';
+import {
+  auctionApi,
+  formatWon,
+  type AuctionDetail,
+  type MaterialKind,
+  type RankRow,
+} from './auctionApi';
+import { errMessage, useToast } from './aucShared';
+import './auction.css';
+
+const REF_DESC: Record<MaterialKind, { label: string; title: string; desc: string; ai?: boolean }> = {
+  layout: {
+    label: '배치도',
+    title: '배치도 (M2)',
+    desc: '부스 위치·주변 통로·트렌치 좌표가 표시된 홀 배치도입니다.',
+  },
+  design: {
+    label: '부스 설계안',
+    title: '부스 설계안 (M3)',
+    desc: '선택·병합된 최종 부스 설계 초안(3D/평면)입니다.',
+  },
+  boq: {
+    label: '물량서(BOQ)',
+    title: '물량서 (M4 · BOQ)',
+    desc: '공종·자재·수량·규격이 정리된 시공 물량 산출서입니다.',
+  },
+  aiimage: {
+    label: '예상 이미지',
+    title: '예상 이미지 (M5)',
+    desc: '나노바나나로 생성한 시공 후 예상 결과 이미지입니다.',
+    ai: true,
+  },
+};
+
+export function AuctionDetailPage() {
+  const { auctionId = '' } = useParams();
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const { show, node: toast } = useToast();
+  const [tab, setTab] = useState<MaterialKind>('layout');
+  const [anon, setAnon] = useState(true);
+  const [seconds, setSeconds] = useState(0);
+  const [bidPrice, setBidPrice] = useState('');
+  const [leadDays, setLeadDays] = useState('');
+
+  const q = useQuery({
+    queryKey: ['auction', auctionId],
+    queryFn: () => auctionApi.detail(auctionId),
+    enabled: !!auctionId,
+    retry: false,
+    refetchInterval: 5000,
+  });
+  const detail = q.data;
+
+  // F035 물량서(BOQ) — 자료 탭이 boq 일 때만 서버 규칙 기반 산출 조회.
+  const boqQ = useQuery({
+    queryKey: ['auction', auctionId, 'boq'],
+    queryFn: () => auctionApi.boq(auctionId),
+    enabled: !!auctionId && tab === 'boq',
+    retry: false,
+  });
+
+  // 카운트다운(로컬 tick) — deadline 기준. detail 갱신 시 재동기화.
+  useEffect(() => {
+    if (!detail?.deadline) return;
+    const target = new Date(detail.deadline).getTime();
+    const sync = () => setSeconds(Math.max(0, Math.floor((target - Date.now()) / 1000)));
+    sync();
+    const id = window.setInterval(sync, 1000);
+    return () => window.clearInterval(id);
+  }, [detail?.deadline]);
+
+  // 자료 탭 초기값 = 존재하는 첫 자료
+  useEffect(() => {
+    if (detail && detail.materials.length && !detail.materials.includes(tab)) {
+      setTab(detail.materials[0]);
+    }
+  }, [detail, tab]);
+
+  const bidM = useMutation({
+    mutationFn: () =>
+      auctionApi.bid(auctionId, {
+        total: Number(bidPrice),
+        leadDays: leadDays ? Number(leadDays) : undefined,
+      }),
+    onSuccess: (r) => {
+      show(`응찰 완료 — 현재 ${r.myRank ?? '-'}위 (v${r.version})`);
+      setBidPrice('');
+      qc.invalidateQueries({ queryKey: ['auction', auctionId] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  const closeM = useMutation({
+    mutationFn: () => auctionApi.close(auctionId),
+    onSuccess: () => {
+      show('라운드를 마감했습니다. 봉인이 해제되어 견적 비교가 가능합니다.');
+      qc.invalidateQueries({ queryKey: ['auction', auctionId] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  if (q.isLoading) {
+    return (
+      <div className="kx-page kx-auc">
+        <Skeleton height={64} radius={12} />
+        <div style={{ height: 16 }} />
+        <Skeleton height={420} radius={16} />
+      </div>
+    );
+  }
+  if (q.isError || !detail) {
+    return (
+      <div className="kx-page kx-auc">
+        <ErrorState message="옥션 상세를 불러오지 못했습니다." onRetry={() => q.refetch()} />
+      </div>
+    );
+  }
+
+  const active = REF_DESC[tab];
+  const closed = detail.status !== '진행중';
+
+  return (
+    <div className="kx-page kx-auc">
+      {/* 상단 컨텍스트 바 */}
+      <div className="kx-aucd__bar">
+        <div className="kx-aucd__bar-left">
+          {!closed && (
+            <span className="kx-live">
+              <span className="kx-live__dot" aria-hidden="true" />
+              실시간
+            </span>
+          )}
+          <h1 className="kx-auc__title" style={{ fontSize: 'var(--fs-h2)' }}>
+            {detail.title}
+          </h1>
+          <span className="kx-tag kx-tag--type">{detail.type}</span>
+          <span className="kx-tag kx-tag--muted">라운드 {detail.round}</span>
+        </div>
+        <div className="kx-aucd__bar-metrics">
+          <div className="kx-aucd__metric">
+            <span className="kx-aucd__metric-label">상태</span>
+            <span
+              className={`kx-aucd__metric-value ${!closed ? 'kx-aucd__metric-value--ok' : ''}`}
+            >
+              {detail.status === '진행중' ? '활성 응찰 중' : detail.status}
+            </span>
+          </div>
+          <div className="kx-aucd__metric">
+            <span className="kx-aucd__metric-label">현재 최저가</span>
+            <span className="kx-aucd__metric-value tnum">
+              {detail.lowestPrice != null ? formatWon(detail.lowestPrice) : '—'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="kx-aucd__grid">
+        {/* 좌 — AI 자료 뷰어 */}
+        <section className="kx-viewer" aria-label="AI 설계 자료 뷰어">
+          <div className="kx-viewer__tabs" role="tablist" aria-label="자료 종류">
+            {detail.materials.map((kind) => (
+              <button
+                key={kind}
+                role="tab"
+                aria-selected={tab === kind}
+                className={`kx-viewer__tab ${tab === kind ? 'is-active' : ''}`}
+                onClick={() => setTab(kind)}
+              >
+                {REF_DESC[kind].label}
+              </button>
+            ))}
+          </div>
+          <div className="kx-viewer__stage">
+            {tab === 'boq' ? (
+              <BoqPanel query={boqQ} onRetry={() => boqQ.refetch()} />
+            ) : (
+              <div className="kx-viewer__placeholder">
+                {tab === 'aiimage' ? <IconImage size={40} /> : <IconDocument size={40} />}
+                <p className="kx-viewer__placeholder-title">{active.title}</p>
+                <p className="kx-viewer__placeholder-desc">{active.desc}</p>
+                {active.ai && <AiLabel>AI 생성 예상 이미지</AiLabel>}
+              </div>
+            )}
+            {active.ai && <span className="kx-viewer__watermark">AI 생성 예상 이미지</span>}
+            <div style={{ position: 'absolute', top: 12, right: 12 }}>
+              <button
+                type="button"
+                className="kx-viewer__tab"
+                style={{ color: 'rgba(255,255,255,0.8)', height: 'auto' }}
+                onClick={() => show('전체화면 뷰어는 자료 스토리지 연동 후 제공됩니다.')}
+                aria-label="전체화면"
+              >
+                <IconExpand size={18} />
+              </button>
+            </div>
+          </div>
+        </section>
+
+        {/* 우 — 실시간 순위·응찰 */}
+        <aside className="kx-rank" aria-label="실시간 순위">
+          <div className="kx-rank__head">
+            <h2>실시간 순위</h2>
+            <button
+              type="button"
+              className="kx-toggle"
+              aria-pressed={anon}
+              onClick={() => setAnon((v) => !v)}
+            >
+              익명 순위
+              <span className={`kx-toggle__track ${anon ? 'is-on' : ''}`}>
+                <span className="kx-toggle__knob" />
+              </span>
+            </button>
+          </div>
+
+          <div className="kx-auc__gate kx-auc__gate--seal" style={{ margin: '0 16px' }}>
+            {detail.sealed
+              ? '봉인 입찰 — 마감 전 경쟁 견적 금액은 비공개, 최저가만 공개됩니다.'
+              : '마감됨 — 발주자 견적 비교에서 전체가 공개됩니다.'}
+          </div>
+
+          <div className="kx-rank__list">
+            {detail.ranking.length === 0 ? (
+              <p className="kx-rank__note" style={{ padding: '8px 16px' }}>
+                아직 응찰이 없습니다.
+              </p>
+            ) : (
+              detail.ranking.map((r) => <RankRowItem key={r.rank} row={r} anon={anon} />)
+            )}
+          </div>
+
+          <div className="kx-rank__foot">
+            {!closed && (
+              <div className="kx-countdown">
+                <span className="kx-countdown__label">라운드 종료까지</span>
+                <span className="kx-countdown__value">{fmtClock(seconds)}</span>
+              </div>
+            )}
+
+            {detail.canBid ? (
+              <>
+                <div className="kx-grid-2" style={{ marginBottom: 8 }}>
+                  <div className="kx-field">
+                    <label className="kx-field__label" htmlFor="bid-price">
+                      응찰 총액(부가세 별도)
+                    </label>
+                    <input
+                      id="bid-price"
+                      className="kx-input"
+                      type="number"
+                      min={1}
+                      value={bidPrice}
+                      placeholder="예: 8400000"
+                      onChange={(e) => setBidPrice(e.target.value)}
+                    />
+                  </div>
+                  <div className="kx-field">
+                    <label className="kx-field__label" htmlFor="bid-lead">
+                      납기(일)
+                    </label>
+                    <input
+                      id="bid-lead"
+                      className="kx-input"
+                      type="number"
+                      min={0}
+                      value={leadDays}
+                      placeholder="예: 12"
+                      onChange={(e) => setLeadDays(e.target.value)}
+                    />
+                  </div>
+                </div>
+                <Button
+                  block
+                  leadingIcon={<IconPlus size={16} />}
+                  onClick={() => {
+                    if (!bidPrice || Number(bidPrice) <= 0) return show('응찰 금액을 입력해 주세요.');
+                    bidM.mutate();
+                  }}
+                  disabled={bidM.isPending}
+                >
+                  {bidM.isPending ? '제출 중…' : '견적서 제출 · 재응찰'}
+                </Button>
+                <p className="kx-rank__note">
+                  재응찰 시 이전 응찰 정보는 자동 대체됩니다(버전 증가). 킨텍스 등록업체만 응찰할 수
+                  있습니다.
+                </p>
+              </>
+            ) : (
+              <p className="kx-rank__note">
+                {closed
+                  ? '마감된 옥션입니다. 응찰이 종료되었습니다.'
+                  : '응찰 권한이 없습니다 — 킨텍스 등록 장치업체(초대 대상)만 응찰할 수 있습니다.'}
+              </p>
+            )}
+
+            {detail.canViewAward && (
+              <Button
+                variant="secondary"
+                block
+                style={{ marginTop: 8 }}
+                onClick={() => navigate(`/auctions/${auctionId}/award`)}
+              >
+                견적 비교·낙찰로 이동
+              </Button>
+            )}
+            {!closed && detail.canViewAward === false && isOrdererHint(detail) && (
+              <Button
+                variant="ghost"
+                block
+                style={{ marginTop: 8 }}
+                onClick={() => closeM.mutate()}
+                disabled={closeM.isPending}
+              >
+                {closeM.isPending ? '마감 중…' : '라운드 마감(발주자)'}
+              </Button>
+            )}
+          </div>
+        </aside>
+      </div>
+      {toast}
+    </div>
+  );
+}
+
+/** 발주자이면서 아직 마감 전이라 close 버튼을 노출할지 힌트. canBid=false + !canViewAward + 응찰 불가 상태에서 노출. */
+function isOrdererHint(d: AuctionDetail): boolean {
+  // 발주자 판단은 서버가 canViewAward(마감 후)로만 노출하므로, 마감 전에는 close 버튼을 항상 시도 가능하게 둔다
+  // (권한 없으면 서버가 403 → 토스트). 응찰 가능한 업체에는 노출하지 않는다.
+  return !d.canBid;
+}
+
+function RankRowItem({ row, anon }: { row: RankRow; anon: boolean }) {
+  const cls = row.isMe ? 'kx-rank__row--me' : row.isLowest ? 'kx-rank__row--lowest' : '';
+  const name = row.isMe ? '나의 응찰 (ME)' : anon ? row.alias : `(주)협력사 ${row.rank}`;
+  return (
+    <div className={`kx-rank__row ${cls}`}>
+      <span className="kx-rank__badge">{row.rank}</span>
+      <div className="kx-rank__main">
+        <p className="kx-rank__alias">{name}</p>
+        {!row.priceMasked && row.price != null ? (
+          <p className="kx-rank__price tnum">{formatWon(row.price)}</p>
+        ) : (
+          <p className="kx-rank__price--masked" title="봉인 입찰 — 마감 후 공개">
+            비공개 · 봉인
+          </p>
+        )}
+      </div>
+      {row.isLowest && <span className="kx-rank__tag">최저가</span>}
+      {row.isMe && (
+        <span
+          className="kx-rank__tag"
+          style={{ background: 'var(--color-ai-surface)', color: 'var(--color-ai-accent)' }}
+        >
+          나의 순위
+        </span>
+      )}
+    </div>
+  );
+}
+
+function fmtClock(total: number): string {
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  const p = (n: number) => n.toString().padStart(2, '0');
+  return `${p(h)}:${p(m)}:${p(s)}`;
+}
+
+/** F035 물량서(BOQ) 표 — 서버 규칙 기반 산출값(공종·품명·단위·수량·근거). 금액은 응찰 견적서에서 산정. */
+function BoqPanel({
+  query,
+  onRetry,
+}: {
+  query: ReturnType<typeof useQuery<import('./auctionApi').BoqResult>>;
+  onRetry: () => void;
+}) {
+  const { t } = useTranslation();
+  if (query.isLoading) {
+    return (
+      <div className="kx-boq">
+        <Skeleton height={28} radius={8} />
+        <div style={{ height: 8 }} />
+        <Skeleton height={180} radius={8} />
+      </div>
+    );
+  }
+  if (query.isError || !query.data) {
+    return (
+      <div className="kx-boq">
+        <ErrorState message={t('auction.boq.error')} onRetry={onRetry} />
+      </div>
+    );
+  }
+  const boq = query.data;
+  return (
+    <div className="kx-boq">
+      <div className="kx-boq__head">
+        <h3 className="kx-boq__title">{t('auction.boq.title')}</h3>
+        <span className="kx-boq__scope">
+          {boq.scope === 'booth'
+            ? t('auction.boq.scopeBooth', { label: boq.scopeLabel })
+            : t('auction.boq.scopeEvent')}
+          {' · '}
+          {t('auction.boq.summary', { count: boq.boothCount, area: boq.totalAreaM2.toLocaleString() })}
+        </span>
+      </div>
+      {boq.lines.length === 0 ? (
+        <p className="kx-boq__note">{boq.note}</p>
+      ) : (
+        <>
+          <div className="kx-boq__scroll">
+            <table className="kx-boq__table">
+              <thead>
+                <tr>
+                  <th>{t('auction.boq.colSeq')}</th>
+                  <th>{t('auction.boq.colTrade')}</th>
+                  <th>{t('auction.boq.colItem')}</th>
+                  <th className="kx-boq__num">{t('auction.boq.colQty')}</th>
+                  <th>{t('auction.boq.colUnit')}</th>
+                  <th>{t('auction.boq.colBasis')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {boq.lines.map((l) => (
+                  <tr key={l.seq}>
+                    <td className="tnum">{l.seq}</td>
+                    <td>
+                      <span className="kx-boq__trade">{l.trade}</span>
+                    </td>
+                    <td>{l.item}</td>
+                    <td className="kx-boq__num tnum">{l.qty.toLocaleString()}</td>
+                    <td>{l.unit}</td>
+                    <td className="kx-boq__basis">{l.basis}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <p className="kx-boq__note">{boq.note}</p>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/auction/AuctionListPage.tsx b/src/frontend/src/screens/auction/AuctionListPage.tsx
new file mode 100644
index 0000000..cfdd018
--- /dev/null
+++ b/src/frontend/src/screens/auction/AuctionListPage.tsx
@@ -0,0 +1,458 @@
+/*
+ * SCR-26 공사/장치 옥션 목록·개설 [M15]. 실 API 전환.
+ * 정본: GET /api/auctions (AuctionSummary[]) · POST /api/auctions (개설 — 발주자 권한, 서버 검증).
+ * 대상: 참가업체·주최자(발주). 좌 옥션 카드 목록 + 우 옥션 개설 패널.
+ * 보안: 개설·초대는 등록업체 게이트가 서버에서 강제(미등록 초대 id 는 서버가 필터). 발주 권한 없으면 403.
+ */
+import { useMemo, useState, type ReactNode } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '../../components/ui/Button';
+import { DdayChip } from '../../components/ui/Badge';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import {
+  IconPlus,
+  IconDocument,
+  IconFloorplan,
+  IconImage,
+  IconSettings,
+} from '../../components/ui/icons';
+import {
+  MATERIAL_LABEL,
+  auctionApi,
+  formatWon,
+  type AuctionStatus,
+  type AuctionSummary,
+  type AwardCriteria,
+  type AuctionType,
+  type MaterialKind,
+} from './auctionApi';
+import { errMessage, useToast } from './aucShared';
+import './auction.css';
+
+type TabKey = 'live' | 'closed' | 'mine';
+const TABS: { key: TabKey; label: string }[] = [
+  { key: 'live', label: '진행중' },
+  { key: 'closed', label: '마감' },
+  { key: 'mine', label: '역경매' },
+];
+
+const CATEGORIES = ['전시디자인설치', '구조물 임대', '전기/조명', '영상/음향', '네트워크'];
+const MATERIAL_KINDS: MaterialKind[] = ['layout', 'design', 'boq', 'aiimage'];
+
+const MAT_ICON: Record<MaterialKind, ReactNode> = {
+  layout: <IconFloorplan size={16} />,
+  design: <IconSettings size={16} />,
+  boq: <IconDocument size={16} />,
+  aiimage: <IconImage size={16} />,
+};
+
+export function AuctionListPage() {
+  const qc = useQueryClient();
+  const navigate = useNavigate();
+  const { show, node: toast } = useToast();
+  const [tab, setTab] = useState<TabKey>('live');
+
+  const q = useQuery({
+    queryKey: ['auctions'],
+    queryFn: () => auctionApi.list(),
+    retry: false,
+    refetchInterval: 15000,
+  });
+  const auctions = q.data ?? [];
+
+  // 개설 폼 상태
+  const eventIds = useMemo(
+    () => Array.from(new Set(auctions.map((a) => a.eventId))).filter(Boolean),
+    [auctions],
+  );
+  const [eventId, setEventId] = useState('');
+  const [title, setTitle] = useState('');
+  const [category, setCategory] = useState(CATEGORIES[0]);
+  const [type, setType] = useState<AuctionType>('역경매');
+  const [criteria, setCriteria] = useState<AwardCriteria>('comprehensive');
+  const [weights, setWeights] = useState({ price: 60, reputation: 25, delivery: 15 });
+  const [round, setRound] = useState(1);
+  const [deadline, setDeadline] = useState('');
+  const [materials, setMaterials] = useState<Set<MaterialKind>>(new Set(MATERIAL_KINDS));
+
+  const effectiveEventId = eventId || eventIds[0] || '';
+
+  const createM = useMutation({
+    mutationFn: () =>
+      auctionApi.create({
+        eventId: effectiveEventId,
+        title: title.trim(),
+        category,
+        type,
+        awardCriteria: criteria,
+        weights,
+        round,
+        deadline,
+        materials: Array.from(materials),
+        invitedCompanyIds: [], // 공개 옥션(등록업체 응찰). 초대 세분은 후속.
+      }),
+    onSuccess: () => {
+      show('옥션 공고를 게시했습니다.');
+      setTitle('');
+      setDeadline('');
+      qc.invalidateQueries({ queryKey: ['auctions'] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  const visible = useMemo(() => {
+    if (tab === 'closed') return auctions.filter((a) => a.status !== '진행중');
+    if (tab === 'mine') return auctions.filter((a) => a.type === '역경매');
+    return auctions.filter((a) => a.status === '진행중');
+  }, [tab, auctions]);
+
+  function submitCreate() {
+    if (!effectiveEventId) return show('행사를 선택해 주세요.');
+    if (!title.trim()) return show('공고명을 입력해 주세요.');
+    if (!deadline) return show('마감 기한을 선택해 주세요.');
+    createM.mutate();
+  }
+
+  return (
+    <div className="kx-page kx-auc">
+      <header className="kx-auc__head">
+        <div>
+          <h1 className="kx-auc__title">공사·장치 옥션</h1>
+          <p className="kx-auc__subtitle">AI 설계자료(M2~M5) 기반 역경매 · 등록업체 응찰</p>
+        </div>
+        <div className="kx-auc__head-actions">
+          <div className="kx-seg" role="tablist" aria-label="옥션 필터">
+            {TABS.map((t) => (
+              <button
+                key={t.key}
+                role="tab"
+                aria-selected={tab === t.key}
+                className={`kx-seg__btn ${tab === t.key ? 'is-active' : ''}`}
+                onClick={() => setTab(t.key)}
+              >
+                {t.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </header>
+
+      <div className="kx-auc__split">
+        {/* 좌 — 옥션 카드 목록 */}
+        <section className="kx-auc__list" aria-label="옥션 목록">
+          {q.isLoading && (
+            <>
+              <Skeleton height={168} radius={16} />
+              <Skeleton height={168} radius={16} />
+            </>
+          )}
+          {q.isError && !q.isLoading && (
+            <ErrorState message="옥션 목록을 불러오지 못했습니다." onRetry={() => q.refetch()} />
+          )}
+          {!q.isLoading && !q.isError && visible.length === 0 && (
+            <EmptyState
+              title="해당 조건의 옥션이 없습니다"
+              description="새로운 시공 옥션을 개설해 협력사를 모집하세요."
+            />
+          )}
+          {!q.isLoading &&
+            !q.isError &&
+            visible.map((a) => (
+              <AuctionCard key={a.id} auction={a} onOpen={() => navigate(`/auctions/${a.id}`)} />
+            ))}
+        </section>
+
+        {/* 우 — 옥션 개설 패널 */}
+        <aside className="kx-auc-open" aria-label="옥션 개설">
+          <div className="kx-auc-open__head">
+            <h2>
+              <IconPlus size={18} /> 옥션 개설
+            </h2>
+            <p>새 시공 옥션을 공고하고 등록 협력사를 모집합니다.</p>
+          </div>
+          <div className="kx-auc-open__body">
+            <div className="kx-field">
+              <label className="kx-field__label" htmlFor="auc-event">
+                행사 선택
+              </label>
+              <select
+                id="auc-event"
+                className="kx-input"
+                value={effectiveEventId}
+                onChange={(e) => setEventId(e.target.value)}
+              >
+                {eventIds.length === 0 && <option value="">행사 없음</option>}
+                {eventIds.map((eid) => (
+                  <option key={eid} value={eid}>
+                    {eid}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="kx-field">
+              <label className="kx-field__label" htmlFor="auc-title">
+                공고명
+              </label>
+              <input
+                id="auc-title"
+                className="kx-input"
+                type="text"
+                value={title}
+                placeholder="예: A-102 독립부스 시공"
+                onChange={(e) => setTitle(e.target.value)}
+              />
+            </div>
+
+            <div className="kx-grid-2">
+              <div className="kx-field">
+                <label className="kx-field__label" htmlFor="auc-cat">
+                  카테고리
+                </label>
+                <select
+                  id="auc-cat"
+                  className="kx-input"
+                  value={category}
+                  onChange={(e) => setCategory(e.target.value)}
+                >
+                  {CATEGORIES.map((c) => (
+                    <option key={c}>{c}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="kx-field">
+                <span className="kx-field__label">옥션 유형</span>
+                <div className="kx-seg" role="tablist" aria-label="옥션 유형">
+                  <button
+                    role="tab"
+                    aria-selected={type === '역경매'}
+                    className={`kx-seg__btn ${type === '역경매' ? 'is-active' : ''}`}
+                    onClick={() => setType('역경매')}
+                  >
+                    역경매
+                  </button>
+                  <button
+                    role="tab"
+                    aria-selected={type === 'RFQ'}
+                    className={`kx-seg__btn ${type === 'RFQ' ? 'is-active' : ''}`}
+                    onClick={() => setType('RFQ')}
+                  >
+                    RFQ
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div className="kx-field">
+              <span className="kx-field__label">낙찰 기준 (Award Criteria)</span>
+              <div className="kx-seg" role="tablist" aria-label="낙찰 기준">
+                <button
+                  role="tab"
+                  aria-selected={criteria === 'lowest'}
+                  className={`kx-seg__btn ${criteria === 'lowest' ? 'is-active' : ''}`}
+                  onClick={() => setCriteria('lowest')}
+                >
+                  최저가
+                </button>
+                <button
+                  role="tab"
+                  aria-selected={criteria === 'comprehensive'}
+                  className={`kx-seg__btn ${criteria === 'comprehensive' ? 'is-active' : ''}`}
+                  onClick={() => setCriteria('comprehensive')}
+                >
+                  종합평가
+                </button>
+              </div>
+            </div>
+
+            {criteria === 'comprehensive' && (
+              <div className="kx-weights" aria-label="종합평가 가중치">
+                <WeightSlider
+                  label="가격 평가"
+                  value={weights.price}
+                  onChange={(v) => setWeights((w) => ({ ...w, price: v }))}
+                />
+                <WeightSlider
+                  label="평판/경력"
+                  value={weights.reputation}
+                  onChange={(v) => setWeights((w) => ({ ...w, reputation: v }))}
+                />
+                <WeightSlider
+                  label="납기/준수"
+                  value={weights.delivery}
+                  onChange={(v) => setWeights((w) => ({ ...w, delivery: v }))}
+                />
+              </div>
+            )}
+
+            <div className="kx-grid-2">
+              <div className="kx-field">
+                <label className="kx-field__label" htmlFor="auc-round">
+                  차수 (Round)
+                </label>
+                <input
+                  id="auc-round"
+                  className="kx-input"
+                  type="number"
+                  min={1}
+                  value={round}
+                  onChange={(e) => setRound(Math.max(1, Number(e.target.value) || 1))}
+                />
+              </div>
+              <div className="kx-field">
+                <label className="kx-field__label" htmlFor="auc-deadline">
+                  마감 기한
+                </label>
+                <input
+                  id="auc-deadline"
+                  className="kx-input"
+                  type="date"
+                  value={deadline}
+                  onChange={(e) => setDeadline(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="kx-field">
+              <span className="kx-field__label">설계 데이터 연동 (M2~M5)</span>
+              <div className="kx-invite" role="group" aria-label="첨부 자료">
+                {MATERIAL_KINDS.map((m) => (
+                  <label key={m} className="kx-invite__row">
+                    <span>{MATERIAL_LABEL[m]}</span>
+                    <input
+                      type="checkbox"
+                      checked={materials.has(m)}
+                      onChange={(e) =>
+                        setMaterials((prev) => {
+                          const next = new Set(prev);
+                          if (e.target.checked) next.add(m);
+                          else next.delete(m);
+                          return next;
+                        })
+                      }
+                      aria-label={`${MATERIAL_LABEL[m]} 첨부`}
+                    />
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <div className="kx-auc__gate">
+              킨텍스 등록업체만 응찰할 수 있습니다. 미등록 업체 초대는 서버에서 차단됩니다.
+            </div>
+
+            <Button
+              block
+              leadingIcon={<IconPlus size={16} />}
+              onClick={submitCreate}
+              disabled={createM.isPending}
+            >
+              {createM.isPending ? '게시 중…' : '옥션 공고 게시'}
+            </Button>
+          </div>
+        </aside>
+      </div>
+      {toast}
+    </div>
+  );
+}
+
+function WeightSlider({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <div className="kx-weight">
+      <div className="kx-weight__top">
+        <span>{label}</span>
+        <span className="tnum">{value}%</span>
+      </div>
+      <input
+        type="range"
+        min={0}
+        max={100}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        aria-label={`${label} 가중치`}
+      />
+    </div>
+  );
+}
+
+function StatusPill({ status }: { status: AuctionStatus }) {
+  if (status === '진행중') return <span className="kx-auc-pill kx-auc-pill--live">진행중</span>;
+  if (status === '정산중') return <span className="kx-auc-pill kx-auc-pill--settle">정산 중</span>;
+  return <span className="kx-auc-pill kx-auc-pill--closed">마감 완료</span>;
+}
+
+function AuctionCard({ auction, onOpen }: { auction: AuctionSummary; onOpen: () => void }) {
+  const closed = auction.status !== '진행중';
+  return (
+    <article
+      className={`kx-auc-card kx-auc-card--${auction.accent} ${closed ? 'kx-auc-card--closed' : ''}`}
+    >
+      <div className="kx-auc-card__top">
+        <div>
+          <div className="kx-auc-card__tags">
+            <span className={`kx-tag ${closed ? 'kx-tag--muted' : ''}`}>{auction.category}</span>
+            <span className={`kx-tag kx-tag--type ${closed ? 'kx-tag--muted' : ''}`}>
+              {auction.type}
+            </span>
+          </div>
+          <h3 className="kx-auc-card__name">{auction.title}</h3>
+        </div>
+        <div className="kx-auc-card__status">
+          {closed ? (
+            <span className="kx-auc-pill kx-auc-pill--closed">마감 완료</span>
+          ) : (
+            <DdayChip dday={auction.dday} />
+          )}
+          <StatusPill status={auction.status} />
+        </div>
+      </div>
+
+      <div className="kx-auc-card__metrics">
+        <div className="kx-auc-card__metric">
+          <span className="kx-auc-card__metric-label">
+            {auction.awardedCompany ? '낙찰 업체' : '응찰 현황'}
+          </span>
+          <span className="kx-auc-card__metric-value">
+            {auction.awardedCompany ?? `${auction.bidderCount}개 업체 응찰 중`}
+          </span>
+        </div>
+        <div className="kx-auc-card__metric kx-auc-card__metric--end">
+          <span className="kx-auc-card__metric-label">
+            {auction.finalPrice ? '최종 낙찰가' : '현재 최저가'}
+          </span>
+          <span className="kx-auc-card__metric-value kx-auc-card__metric-value--price tnum">
+            {auction.finalPrice != null
+              ? formatWon(auction.finalPrice)
+              : auction.lowestPrice != null
+                ? formatWon(auction.lowestPrice)
+                : '—'}
+          </span>
+        </div>
+      </div>
+
+      <div className="kx-auc-card__foot">
+        <div className="kx-auc-card__mats">
+          {auction.materials.map((m) => (
+            <span key={m} className="kx-auc-card__mat">
+              {MAT_ICON[m]}
+              {MATERIAL_LABEL[m]}
+            </span>
+          ))}
+        </div>
+        <Button variant="secondary" onClick={onOpen}>
+          상세보기
+        </Button>
+      </div>
+    </article>
+  );
+}
diff --git a/src/frontend/src/screens/auction/AwardComparePage.tsx b/src/frontend/src/screens/auction/AwardComparePage.tsx
new file mode 100644
index 0000000..4cff762
--- /dev/null
+++ b/src/frontend/src/screens/auction/AwardComparePage.tsx
@@ -0,0 +1,356 @@
+/*
+ * SCR-29 낙찰 비교·선정(Award) [M15]. 실 API 전환.
+ * 정본: GET /api/auctions/{id}/award-view (마감 후 발주자 전용, 봉인 해제) · POST /{id}/award.
+ * 대상: 발주자(주최자·참가업체). 마감 후 견적서 비교 → 낙찰 → 계약·발주 전환.
+ * 보안: 마감 전 또는 비발주자는 서버가 403 → 화면은 접근 불가 안내. 낙찰 사유 필수(서버 검증).
+ */
+import { useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Button } from '../../components/ui/Button';
+import { AiLabel } from '../../components/ui/Badge';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconAiBot, IconCheckCircle, IconDownload, IconWarning } from '../../components/ui/icons';
+import { auctionApi, formatWon, type Quote } from './auctionApi';
+import { errMessage, useToast } from './aucShared';
+import './auction.css';
+
+/** 인라인 별점 아이콘(★ 텍스트 글리프 대체 — stroke SVG). */
+function IconStar({ size = 14 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.9 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9L12 2.5z" />
+    </svg>
+  );
+}
+
+export function AwardComparePage() {
+  const { auctionId = '' } = useParams();
+  const qc = useQueryClient();
+  const { show, node: toast } = useToast();
+  const [reason, setReason] = useState('');
+  const [selectedBidId, setSelectedBidId] = useState<string | null>(null);
+
+  const q = useQuery({
+    queryKey: ['award-view', auctionId],
+    queryFn: () => auctionApi.awardView(auctionId),
+    enabled: !!auctionId,
+    retry: false,
+  });
+
+  const view = q.data;
+  const quotes = view?.quotes ?? [];
+  const recommended = useMemo(() => quotes.find((x) => x.recommended) ?? quotes[0], [quotes]);
+  const alreadyAwarded = !!view?.awarded;
+  const selected = quotes.find((x) => x.bidId === selectedBidId) ?? recommended;
+
+  const awardM = useMutation({
+    mutationFn: () =>
+      auctionApi.award(auctionId, { bidId: selected!.bidId, reason: reason.trim() }),
+    onSuccess: (r) => {
+      show(`${r.companyName ?? '선정 업체'} 낙찰 승인 완료 — 계약·발주 전환 대상입니다.`);
+      qc.invalidateQueries({ queryKey: ['award-view', auctionId] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  function onAward() {
+    if (!selected) return show('선정할 견적을 선택해 주세요.');
+    if (!reason.trim()) return show('선정 사유를 입력해 주세요.');
+    awardM.mutate();
+  }
+
+  if (q.isLoading) {
+    return (
+      <div className="kx-page kx-auc">
+        <Skeleton height={64} radius={12} />
+        <div style={{ height: 16 }} />
+        <Skeleton height={360} radius={16} />
+      </div>
+    );
+  }
+  if (q.isError) {
+    const msg =
+      (q.error as { code?: string })?.code === 'FORBIDDEN'
+        ? '마감 후 발주자만 견적 비교·낙찰을 열람할 수 있습니다.'
+        : '견적 비교 정보를 불러오지 못했습니다.';
+    return (
+      <div className="kx-page kx-auc">
+        <ErrorState message={msg} onRetry={() => q.refetch()} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="kx-page kx-auc">
+      <header className="kx-auc__head">
+        <div>
+          <h1 className="kx-auc__title">역경매 응찰 비교 및 낙찰</h1>
+          <p className="kx-auc__subtitle">
+            {view?.auctionTitle ?? ''} · 마감 후 발주자 뷰(봉인 해제)
+          </p>
+        </div>
+        <Button
+          variant="secondary"
+          leadingIcon={<IconDownload size={16} />}
+          onClick={() => show('응찰서 원본 다운로드는 견적서 PDF 산출 연동 후 제공됩니다.')}
+        >
+          응찰서 원본 다운로드
+        </Button>
+      </header>
+
+      <div className="kx-award__summary">
+        <div className="kx-award__chip">
+          <span className="kx-award__chip-label">공고명</span>
+          <span className="kx-award__chip-value">{view?.auctionTitle ?? '—'}</span>
+        </div>
+        <div className="kx-award__chip">
+          <span className="kx-award__chip-label">응찰 현황</span>
+          <span className="kx-award__chip-value">총 {view?.bidderCount ?? 0}개사 참여</span>
+        </div>
+        <div className="kx-award__chip">
+          <span className="kx-award__chip-label">낙찰 기준</span>
+          <span className="kx-award__chip-value">
+            {view?.awardCriteria === 'lowest'
+              ? '최저가'
+              : `종합평가 (가격 ${view?.weights.price ?? 0}% · 평판 ${view?.weights.reputation ?? 0}% · 납기 ${view?.weights.delivery ?? 0}%)`}
+          </span>
+        </div>
+      </div>
+
+      {quotes.length === 0 ? (
+        <EmptyState title="응찰이 없습니다" description="마감된 옥션에 제출된 견적서가 없습니다." />
+      ) : (
+        <div className="kx-award__grid">
+          <div className="kx-award__main">
+            {/* 비교 매트릭스 */}
+            <section className="kx-card" aria-label="견적 비교표">
+              <div className="kx-card__head">
+                <h2>견적서 비교표</h2>
+                <AiLabel>AI 가중 스코어</AiLabel>
+              </div>
+              <div className="kx-table-scroll">
+                <table className="kx-compare">
+                  <thead>
+                    <tr>
+                      <th className="kx-compare__metric-col">비교 항목</th>
+                      {quotes.map((qc2) => (
+                        <th
+                          key={qc2.bidId}
+                          className={`kx-compare__co ${qc2.bidId === selected?.bidId ? 'kx-compare__co--rec' : ''}`}
+                        >
+                          {qc2.recommended && <span className="kx-compare__rec-tag">최적 추천</span>}
+                          <button
+                            type="button"
+                            className="kx-compare__co-select"
+                            aria-pressed={qc2.bidId === selected?.bidId}
+                            onClick={() => setSelectedBidId(qc2.bidId)}
+                          >
+                            <span className="kx-compare__co-name">{qc2.alias}</span>
+                            <span className="kx-compare__co-sub">{qc2.subtitle}</span>
+                          </button>
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td className="kx-compare__metric-col">총액 (VAT 별도)</td>
+                      {quotes.map((qc2) => (
+                        <td key={qc2.bidId} className={qc2.isLowestPrice ? 'kx-compare__best' : ''}>
+                          <span className="kx-compare__val-strong tnum">
+                            {formatWon(qc2.totalPrice)}
+                          </span>
+                          <span
+                            className={`kx-compare__note ${qc2.isLowestPrice ? 'kx-compare__note--best' : ''}`}
+                          >
+                            {qc2.isLowestPrice ? '최저가' : `+${qc2.priceDeltaPct}% 차이`}
+                          </span>
+                        </td>
+                      ))}
+                    </tr>
+                    <tr>
+                      <td className="kx-compare__metric-col">납기 (시공 완료)</td>
+                      {quotes.map((qc2) => (
+                        <td key={qc2.bidId} className={qc2.isShortestLead ? 'kx-compare__best' : ''}>
+                          <span className="tnum">{qc2.leadDays}일</span>
+                          {qc2.isShortestLead && (
+                            <span className="kx-compare__note kx-compare__note--best">최단 납기</span>
+                          )}
+                        </td>
+                      ))}
+                    </tr>
+                    <tr>
+                      <td className="kx-compare__metric-col">업체 평판 (최근 1년)</td>
+                      {quotes.map((qc2) => {
+                        const best =
+                          qc2.reputation === Math.max(...quotes.map((x) => x.reputation));
+                        return (
+                          <td key={qc2.bidId} className={best ? 'kx-compare__best' : ''}>
+                            <span className="kx-compare__star">
+                              <IconStar size={14} />
+                            </span>{' '}
+                            <span className="tnum">{qc2.reputation.toFixed(1)}</span>
+                          </td>
+                        );
+                      })}
+                    </tr>
+                    <tr>
+                      <td className="kx-compare__metric-col">종합 점수</td>
+                      {quotes.map((qc2) => (
+                        <td key={qc2.bidId} className={qc2.recommended ? 'kx-compare__score' : ''}>
+                          {qc2.recommended ? (
+                            <span className="kx-compare__score-val tnum">
+                              {qc2.score.toFixed(1)}
+                            </span>
+                          ) : (
+                            <span
+                              className="kx-compare__val-strong tnum"
+                              style={{ color: 'var(--color-neutral-500)' }}
+                            >
+                              {qc2.score.toFixed(1)}
+                            </span>
+                          )}
+                        </td>
+                      ))}
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </section>
+
+            {/* AI 리스크 분석 */}
+            <section className="kx-card" aria-label="AI 리스크 분석">
+              <div className="kx-card__head">
+                <h2>AI 시뮬레이션 · 리스크 분석</h2>
+                <AiLabel>AI 분석</AiLabel>
+              </div>
+              <div className="kx-risk">
+                <ul className="kx-barlist">
+                  {(view?.riskBars ?? []).map((b) => (
+                    <li key={b.label}>
+                      <div className="kx-barlist__top">
+                        <span>{b.label}</span>
+                        <span
+                          className="tnum"
+                          style={{
+                            color:
+                              b.tone === 'success'
+                                ? 'var(--color-success)'
+                                : 'var(--color-neutral-700)',
+                            fontWeight: 700,
+                          }}
+                        >
+                          {b.pct}%
+                        </span>
+                      </div>
+                      <div className="kx-barlist__track">
+                        <span
+                          className={`kx-barlist__fill ${b.tone === 'success' ? 'kx-barlist__fill--success' : 'kx-barlist__fill--ai'}`}
+                          style={{ width: `${Math.min(b.pct, 100)}%` }}
+                        />
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </section>
+          </div>
+
+          {/* 우 — 낙찰 선정 패널 */}
+          <aside className="kx-award__panel" aria-label="낙찰 선정">
+            <h2>낙찰 선정</h2>
+            {selected && <RecommendCard quote={selected} />}
+
+            <div className="kx-field">
+              <label className="kx-field__label" htmlFor="award-reason">
+                선정 사유 입력 (필수)
+              </label>
+              <textarea
+                id="award-reason"
+                className="kx-award__textarea"
+                placeholder="종합 평가 결과 및 업체 강점을 입력하세요. 예: 최저가 응찰 + 과거 동일 규모 행사 수행 실적 우수"
+                value={alreadyAwarded ? (view?.awarded?.awardedAt ? '낙찰 완료' : reason) : reason}
+                onChange={(e) => setReason(e.target.value)}
+                disabled={alreadyAwarded}
+              />
+            </div>
+
+            <Button
+              variant={alreadyAwarded ? 'secondary' : 'primary'}
+              block
+              leadingIcon={<IconCheckCircle size={16} />}
+              onClick={onAward}
+              disabled={alreadyAwarded || awardM.isPending}
+            >
+              {alreadyAwarded
+                ? '낙찰 승인 완료'
+                : awardM.isPending
+                  ? '승인 중…'
+                  : '낙찰(Award) 최종 승인'}
+            </Button>
+
+            <div className="kx-award__warn">
+              <IconWarning size={16} />
+              <p>
+                낙찰 선정 후에는 취소가 불가하며, 해당 견적서는 즉시 계약·발주 문서로 전환되어 법적
+                효력을 갖습니다.
+              </p>
+            </div>
+
+            <div className="kx-award__steps">
+              <p className="kx-award__steps-title">낙찰 이후 프로세스</p>
+              <ol>
+                <li>
+                  <span>1</span> 전자 서명 및 계약 체결
+                </li>
+                <li>
+                  <span>2</span> 시공 착수 회의 예약
+                </li>
+                <li>
+                  <span>3</span> 정기 공정 보고서 발송
+                </li>
+              </ol>
+            </div>
+          </aside>
+        </div>
+      )}
+      {toast}
+    </div>
+  );
+}
+
+function RecommendCard({ quote }: { quote: Quote }) {
+  return (
+    <div className="kx-award__rec">
+      <div className="kx-award__rec-top">
+        <span className="kx-award__rec-avatar">{quote.alias.slice(0, 2)}</span>
+        <div>
+          <p className="kx-award__rec-name">
+            {quote.alias} ({quote.subtitle})
+          </p>
+          <span className="kx-award__rec-ai">
+            <IconAiBot size={16} /> 종합 점수 {quote.score.toFixed(1)}
+          </span>
+        </div>
+      </div>
+      <div className="kx-award__rec-grid">
+        <div className="kx-award__rec-cell">
+          <span className="kx-award__rec-cell-label">제안 가격</span>
+          <span className="kx-award__rec-cell-value tnum">{formatWon(quote.totalPrice)}</span>
+        </div>
+        <div className="kx-award__rec-cell">
+          <span className="kx-award__rec-cell-label">예상 기한</span>
+          <span className="kx-award__rec-cell-value tnum">{quote.leadDays}일</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/auction/aucShared.tsx b/src/frontend/src/screens/auction/aucShared.tsx
new file mode 100644
index 0000000..fa2accc
--- /dev/null
+++ b/src/frontend/src/screens/auction/aucShared.tsx
@@ -0,0 +1,40 @@
+/* 옥션 화면 공용 소도구 — 토스트(성공/오류) + 오류 메시지 추출. */
+import { useCallback, useRef, useState } from 'react';
+import { IconCheckCircle } from '../../components/ui/icons';
+import { ApiRequestError } from '../../api/client';
+
+export function useToast() {
+  const [msg, setMsg] = useState<string | null>(null);
+  const timer = useRef<number | null>(null);
+  const show = useCallback((text: string) => {
+    setMsg(text);
+    if (timer.current) window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setMsg(null), 2600);
+  }, []);
+  const node = msg ? (
+    <div className="kx-auc__toast" role="status">
+      <IconCheckCircle size={18} />
+      {msg}
+    </div>
+  ) : null;
+  return { show, node };
+}
+
+/** 서버 오류 봉투 → 사용자 메시지. 봉인/등록업체/마감 코드는 도메인 문구로 치환. */
+export function errMessage(e: unknown): string {
+  if (e instanceof ApiRequestError) {
+    switch (e.code) {
+      case 'NOT_REGISTERED_COMPANY':
+        return '킨텍스 등록업체만 응찰할 수 있습니다.';
+      case 'FORBIDDEN':
+        return '이 작업에 대한 권한이 없습니다.';
+      case 'CONFLICT':
+        return '마감되었거나 현재 상태와 충돌하여 처리할 수 없습니다.';
+      case 'VALIDATION':
+        return e.message || '입력값을 확인해 주세요.';
+      default:
+        return e.message || '요청을 처리하지 못했습니다.';
+    }
+  }
+  return '요청을 처리하지 못했습니다.';
+}
diff --git a/src/frontend/src/screens/auction/auction.css b/src/frontend/src/screens/auction/auction.css
new file mode 100644
index 0000000..5cb14a5
--- /dev/null
+++ b/src/frontend/src/screens/auction/auction.css
@@ -0,0 +1,1095 @@
+/*
+ * M15 공사/장치 옥션 화면(SCR-26/27/29) 공통 스타일.
+ * 토큰은 styles/tokens.css(§1)만 참조 — 하드코딩 색 금지. shared.css 프리미티브 선반영.
+ */
+@import '../shared.css';
+
+/* ── 페이지 헤드(제목 + 샘플 배지) ── */
+.kx-auc__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-auc__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+  font-weight: 700;
+}
+.kx-auc__subtitle {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-auc__head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+/* 샘플 데이터 배지 */
+.kx-auc__sample {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-warning);
+  background: #fff4e5;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+}
+
+/* 등록업체 게이트 고지 배너 */
+.kx-auc__gate {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-primary-700);
+  background: var(--color-primary-050);
+  border: 1px solid var(--color-primary-100);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+}
+.kx-auc__gate--seal {
+  color: var(--color-neutral-700);
+  background: var(--color-neutral-050);
+  border-color: var(--color-neutral-200);
+}
+
+/* ── SCR-26 목록 레이아웃(좌 목록 + 우 개설 패널) ── */
+.kx-auc__split {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
+  gap: var(--space-5);
+  align-items: start;
+}
+@media (max-width: 1080px) {
+  .kx-auc__split {
+    grid-template-columns: 1fr;
+  }
+}
+
+.kx-auc__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* 옥션 카드 */
+.kx-auc-card {
+  border: var(--border-card);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+}
+.kx-auc-card:hover {
+  box-shadow: var(--shadow-level2);
+  transform: translateY(-1px);
+}
+.kx-auc-card--secondary {
+  border-left-color: var(--color-ai-accent);
+}
+.kx-auc-card--tertiary {
+  border-left-color: var(--color-success);
+}
+.kx-auc-card--closed {
+  opacity: 0.85;
+}
+.kx-auc-card__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+.kx-auc-card__tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+.kx-auc-card__name {
+  font-size: var(--fs-h3);
+  line-height: var(--lh-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-auc-card__status {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+.kx-auc-card__metrics {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+  padding: var(--space-3) 0;
+  border-top: 1px dashed var(--color-neutral-200);
+  border-bottom: 1px dashed var(--color-neutral-200);
+  margin-bottom: var(--space-3);
+}
+.kx-auc-card__metric {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-auc-card__metric--end {
+  align-items: flex-end;
+  text-align: right;
+}
+.kx-auc-card__metric-label {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-auc-card__metric-value {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-auc-card__metric-value--price {
+  color: var(--color-primary-700);
+}
+.kx-auc-card__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-auc-card__mats {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-auc-card__mat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--fs-caption);
+  color: var(--color-ai-accent);
+  font-weight: 600;
+}
+
+/* 카테고리·유형 태그 */
+.kx-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+}
+.kx-tag--type {
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent);
+}
+.kx-tag--muted {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+/* 옥션 상태 pill */
+.kx-auc-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-caption);
+  font-weight: 700;
+}
+.kx-auc-pill--live {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kx-auc-pill--closed {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+.kx-auc-pill--settle {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+
+/* ── 개설 패널 ── */
+.kx-auc-open {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow: hidden;
+  position: sticky;
+  top: var(--space-4);
+}
+.kx-auc-open__head {
+  background: var(--color-primary-700);
+  color: var(--color-white);
+  padding: var(--space-4);
+}
+.kx-auc-open__head h2 {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.kx-auc-open__head p {
+  font-size: var(--fs-caption);
+  opacity: 0.9;
+  margin-top: 4px;
+}
+.kx-auc-open__body {
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  max-height: 720px;
+  overflow-y: auto;
+}
+/* ★ 폼 유틸(kx-field*/kx-input/kx-grid-2)은 .kx-auc 로 스코프 격리(QA: 전역 재정의 방지).
+   옥션/낙찰 화면 루트에 .kx-auc 를 부여하므로 타 화면의 동명 클래스에 영향을 주지 않는다. */
+.kx-auc .kx-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.kx-auc .kx-field__label {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.kx-auc .kx-field__label-note {
+  font-size: 11px;
+  color: var(--color-error);
+  font-weight: 500;
+}
+.kx-auc .kx-input {
+  height: 36px;
+  padding: 0 var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  width: 100%;
+}
+.kx-auc .kx-grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+/* 비교표 컬럼 선택 버튼(낙찰 대상 선택) — 헤더 텍스트 스택을 버튼으로 감싼다. */
+.kx-compare__co-select {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+.kx-compare__co-select[aria-pressed='true'] .kx-compare__co-name {
+  color: var(--color-primary, var(--color-ai-accent));
+}
+
+/* 가중치 슬라이더 카드 */
+.kx-weights {
+  padding: var(--space-3);
+  background: var(--color-ai-surface);
+  border: 1px solid var(--color-ai-accent);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-weight__top {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--fs-caption);
+  color: var(--color-ai-accent);
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.kx-weight input[type='range'] {
+  width: 100%;
+  accent-color: var(--color-ai-accent);
+  cursor: pointer;
+}
+
+/* AI 자료 첨부 dropzone */
+.kx-auc-attach {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: var(--space-5);
+  border: 2px dashed var(--color-ai-accent);
+  background: var(--color-ai-surface);
+  border-radius: var(--radius-lg);
+  color: var(--color-ai-accent);
+  cursor: pointer;
+  font-weight: 600;
+}
+.kx-auc-attach small {
+  color: var(--color-neutral-500);
+  font-weight: 400;
+  font-size: 11px;
+}
+
+/* 초대 업체 리스트 */
+.kx-invite {
+  max-height: 160px;
+  overflow-y: auto;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+}
+.kx-invite__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-neutral-100);
+  font-size: var(--fs-body);
+}
+.kx-invite__row:last-child {
+  border-bottom: none;
+}
+.kx-invite__row--blocked {
+  color: var(--color-neutral-500);
+}
+.kx-invite__blocked-tag {
+  font-size: 11px;
+  color: var(--color-error);
+  font-weight: 600;
+}
+
+/* ── SCR-27 상세 레이아웃 ── */
+.kx-aucd__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-3) var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-aucd__bar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: #fef3f2;
+  color: var(--color-error);
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: var(--radius-sm);
+}
+.kx-live__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-error);
+  animation: kx-pulse 1.4s ease-in-out infinite;
+}
+@keyframes kx-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+.kx-aucd__bar-metrics {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+.kx-aucd__metric {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.kx-aucd__metric-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-neutral-500);
+}
+.kx-aucd__metric-value {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-primary-700);
+}
+.kx-aucd__metric-value--ok {
+  color: var(--color-success);
+}
+
+.kx-aucd__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
+  gap: var(--space-5);
+  align-items: start;
+}
+@media (max-width: 1080px) {
+  .kx-aucd__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 자료 뷰어 */
+.kx-viewer {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow: hidden;
+}
+.kx-viewer__tabs {
+  display: flex;
+  gap: var(--space-4);
+  padding: 0 var(--space-4);
+  border-bottom: var(--border-card);
+  background: var(--color-neutral-050);
+}
+.kx-viewer__tab {
+  position: relative;
+  height: 44px;
+  border: none;
+  background: transparent;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kx-viewer__tab.is-active {
+  color: var(--color-primary-700);
+}
+.kx-viewer__tab.is-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--color-primary-700);
+}
+.kx-viewer__stage {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  background: var(--color-canvas-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.5);
+  overflow: hidden;
+}
+.kx-viewer__placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  text-align: center;
+  padding: var(--space-5);
+}
+.kx-viewer__placeholder-title {
+  font-size: var(--fs-h3);
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 600;
+}
+.kx-viewer__placeholder-desc {
+  font-size: var(--fs-caption);
+  color: rgba(255, 255, 255, 0.55);
+  max-width: 380px;
+}
+.kx-viewer__watermark {
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+  font-size: 11px;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.4);
+  pointer-events: none;
+}
+
+/* 실시간 순위 패널 */
+.kx-rank {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kx-rank__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4);
+  border-bottom: var(--border-card);
+}
+.kx-rank__head h2 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.kx-toggle__track {
+  width: 38px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-200);
+  position: relative;
+  transition: background 0.15s ease;
+}
+.kx-toggle__track.is-on {
+  background: var(--color-primary-600);
+}
+.kx-toggle__knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--color-white);
+  transition: transform 0.15s ease;
+}
+.kx-toggle__track.is-on .kx-toggle__knob {
+  transform: translateX(18px);
+}
+
+.kx-rank__list {
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  overflow-y: auto;
+}
+.kx-rank__row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+}
+.kx-rank__row--lowest {
+  border-left: 4px solid var(--color-primary-600);
+}
+.kx-rank__row--me {
+  background: var(--color-ai-surface);
+  border: 2px solid var(--color-ai-accent);
+}
+.kx-rank__badge {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+  flex-shrink: 0;
+}
+.kx-rank__row--me .kx-rank__badge {
+  background: var(--color-ai-accent);
+  color: var(--color-white);
+}
+.kx-rank__main {
+  flex: 1;
+  min-width: 0;
+}
+.kx-rank__alias {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-rank__row--me .kx-rank__alias {
+  color: var(--color-ai-accent);
+}
+.kx-rank__price {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-primary-700);
+}
+.kx-rank__price--masked {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  font-weight: 600;
+}
+.kx-rank__tag {
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+  background: #e6f4ee;
+  color: var(--color-success);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.kx-rank__foot {
+  border-top: var(--border-card);
+  padding: var(--space-4);
+  background: var(--color-neutral-050);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-countdown {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+}
+.kx-countdown__label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--color-neutral-500);
+  font-weight: 700;
+}
+.kx-countdown__value {
+  font-size: var(--fs-display);
+  line-height: var(--lh-display);
+  font-weight: 700;
+  color: var(--color-primary-700);
+  font-variant-numeric: tabular-nums;
+}
+.kx-rank__note {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  text-align: center;
+  line-height: 1.5;
+}
+
+/* ── SCR-29 낙찰 비교 ── */
+.kx-award__summary {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-award__chip {
+  padding: 8px 14px;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: var(--radius-sm);
+}
+.kx-award__chip:nth-child(2) {
+  border-left-color: var(--color-ai-accent);
+}
+.kx-award__chip:nth-child(3) {
+  border-left-color: var(--color-success);
+}
+.kx-award__chip-label {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-award__chip-value {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+
+.kx-award__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
+  gap: var(--space-5);
+  align-items: start;
+}
+@media (max-width: 1200px) {
+  .kx-award__grid {
+    grid-template-columns: 1fr;
+  }
+}
+.kx-award__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  min-width: 0;
+}
+
+/* 비교 매트릭스 */
+.kx-compare {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-body);
+}
+.kx-compare th,
+.kx-compare td {
+  padding: var(--space-4);
+  border-bottom: var(--border-card);
+  text-align: center;
+}
+.kx-compare thead th {
+  background: var(--color-neutral-050);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-compare thead th.kx-compare__metric-col,
+.kx-compare td.kx-compare__metric-col {
+  text-align: left;
+  width: 22%;
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+.kx-compare__co {
+  position: relative;
+}
+.kx-compare__co-name {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-compare__co--rec .kx-compare__co-name {
+  color: var(--color-primary-700);
+}
+.kx-compare__co-sub {
+  display: block;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-compare__rec-tag {
+  display: inline-block;
+  margin-bottom: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--color-white);
+  background: var(--color-primary-700);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-compare__best {
+  background: #f0fbf6;
+  color: var(--color-success);
+  font-weight: 700;
+}
+.kx-compare__val-strong {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+}
+.kx-compare__note {
+  display: block;
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-compare__note--best {
+  color: var(--color-success);
+}
+.kx-compare__score {
+  background: var(--color-ai-surface);
+}
+.kx-compare__score-val {
+  font-size: var(--fs-display);
+  font-weight: 700;
+  color: var(--color-ai-accent);
+}
+.kx-compare__star {
+  color: var(--color-warning);
+}
+
+/* 리스크 카드 */
+.kx-risk {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: center;
+}
+@media (max-width: 720px) {
+  .kx-risk {
+    grid-template-columns: 1fr;
+  }
+}
+.kx-risk__grade {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: var(--space-4);
+  background: var(--color-ai-surface);
+  border: 1px solid var(--color-ai-accent);
+  border-radius: var(--radius-lg);
+}
+.kx-risk__grade-value {
+  font-size: 40px;
+  font-weight: 700;
+  color: var(--color-ai-accent);
+  line-height: 1.1;
+}
+.kx-barlist__fill--success {
+  background: var(--color-success);
+}
+.kx-barlist__fill--ai {
+  background: var(--color-ai-accent);
+}
+
+/* 낙찰 선정 패널 */
+.kx-award__panel {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+  position: sticky;
+  top: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-award__panel h2 {
+  font-size: var(--fs-h2);
+  font-weight: 700;
+  color: var(--color-primary-700);
+}
+.kx-award__rec {
+  border: 1px solid var(--color-primary-600);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  position: relative;
+}
+.kx-award__rec-top {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+.kx-award__rec-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-lg);
+  background: var(--color-primary-700);
+  color: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fs-h2);
+  font-weight: 700;
+}
+.kx-award__rec-name {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+}
+.kx-award__rec-ai {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--fs-caption);
+  color: var(--color-ai-accent);
+}
+.kx-award__rec-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: var(--border-card);
+}
+.kx-award__rec-cell span {
+  display: block;
+}
+.kx-award__rec-cell-label {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-award__rec-cell-value {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-award__textarea {
+  width: 100%;
+  min-height: 110px;
+  padding: var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-body);
+  font-family: var(--font-sans);
+  resize: vertical;
+}
+.kx-award__warn {
+  display: flex;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  background: #fef3f2;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--color-error);
+}
+.kx-award__steps {
+  border-top: var(--border-card);
+  padding-top: var(--space-4);
+}
+.kx-award__steps-title {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-neutral-700);
+  margin-bottom: var(--space-3);
+}
+.kx-award__steps ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-award__steps li {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+}
+.kx-award__steps li span {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--color-neutral-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+/* 토스트 */
+.kx-auc__toast {
+  position: fixed;
+  bottom: var(--space-5);
+  right: var(--space-5);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 12px 16px;
+  background: var(--color-neutral-900);
+  color: var(--color-white);
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-body);
+  box-shadow: var(--shadow-level2);
+}
+
+/* F035 물량서(BOQ) 패널 — 자료 뷰어 스테이지 내부(밝은 카드·내부 스크롤) */
+.kx-boq {
+  position: absolute;
+  inset: 0;
+  background: var(--color-white);
+  color: var(--color-text-strong);
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-4);
+  gap: var(--space-3);
+  overflow: auto;
+  text-align: left;
+}
+.kx-boq__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.kx-boq__title {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-text-strong);
+}
+.kx-boq__scope {
+  font-size: var(--fs-caption);
+  color: var(--color-text-muted);
+}
+.kx-boq__scroll {
+  overflow: auto;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+}
+.kx-boq__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-boq__table th,
+.kx-boq__table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-neutral-200);
+  text-align: left;
+  vertical-align: top;
+}
+.kx-boq__table thead th {
+  background: var(--color-neutral-050);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--color-neutral-500);
+  border-bottom: 2px solid var(--color-neutral-200);
+  white-space: nowrap;
+  vertical-align: bottom;
+  position: sticky;
+  top: 0;
+}
+.kx-boq__num {
+  text-align: right;
+}
+.kx-boq__trade {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--color-primary-surface, #eef2ff);
+  color: var(--color-primary-600, #2f42fc);
+  font-size: 11px;
+  font-weight: 600;
+}
+.kx-boq__basis {
+  color: var(--color-text-muted);
+  font-size: 11px;
+}
+.kx-boq__note {
+  font-size: var(--fs-caption);
+  color: var(--color-text-muted);
+}
diff --git a/src/frontend/src/screens/auction/auctionApi.ts b/src/frontend/src/screens/auction/auctionApi.ts
new file mode 100644
index 0000000..cc3e643
--- /dev/null
+++ b/src/frontend/src/screens/auction/auctionApi.ts
@@ -0,0 +1,253 @@
+/*
+ * M15 공사/장치 옥션 실 API 클라이언트 (SCR-26·27·29·38).
+ * 공용 클라이언트(../../api/client)만 사용 — client.ts·endpoints.ts·types.ts 무수정.
+ * 정본: 백엔드 com.zioinfo.kintex.auction (AuctionController·ContractorController) 시그니처.
+ *
+ * ★ 봉인 입찰 보안은 서버가 강제한다:
+ *   - 상세(GET /{id})는 마감 전 타사 입찰가·업체명을 미반환(ranking 행의 priceMasked=true·price=null).
+ *   - 전체 견적 비교(award-view)는 마감 후 발주자에게만 200, 그 외 403.
+ *   프론트는 서버가 준 값만 렌더한다(클라이언트에서 임의 언마스킹 없음).
+ */
+import { api } from '../../api/client';
+
+export type AuctionType = '역경매' | 'RFQ';
+export type AuctionStatus = '진행중' | '마감' | '정산중';
+export type AwardCriteria = 'lowest' | 'comprehensive';
+export type MaterialKind = 'layout' | 'design' | 'boq' | 'aiimage';
+
+export interface AuctionSummary {
+  id: string;
+  eventId: string;
+  title: string;
+  category: string;
+  type: AuctionType;
+  status: AuctionStatus;
+  round: number;
+  dday: number;
+  bidderCount: number;
+  lowestPrice: number | null;
+  awardedCompany: string | null;
+  finalPrice: number | null;
+  materials: MaterialKind[];
+  accent: string; // primary | secondary | tertiary
+}
+
+export interface Weights {
+  price: number;
+  reputation: number;
+  delivery: number;
+}
+
+export interface MaterialPackage {
+  layoutUrl: string | null;
+  designUrl: string | null;
+  boqUrl: string | null;
+  aiImageUrl: string | null;
+}
+
+/** 봉인 순위 행 — priceMasked=true 이면 price 는 null(타사 비공개). */
+export interface RankRow {
+  rank: number;
+  alias: string;
+  isMe: boolean;
+  isLowest: boolean;
+  priceMasked: boolean;
+  price: number | null;
+}
+
+export interface AuctionDetail {
+  id: string;
+  eventId: string;
+  title: string;
+  category: string;
+  type: AuctionType;
+  status: AuctionStatus;
+  round: number;
+  dday: number;
+  deadline: string;
+  bidderCount: number;
+  lowestPrice: number | null;
+  awardCriteria: AwardCriteria;
+  weights: Weights;
+  materials: MaterialKind[];
+  materialPackage: MaterialPackage;
+  sealed: boolean;
+  myRank: number | null;
+  myPrice: number | null;
+  ranking: RankRow[];
+  canBid: boolean;
+  canViewAward: boolean;
+  awardedCompany: string | null;
+  finalPrice: number | null;
+}
+
+export interface BidResult {
+  id: string;
+  round: number;
+  subtotal: number;
+  vat: number;
+  total: number; // 경쟁 순위 금액(부가세 별도)
+  grandTotal: number; // 부가세 포함 총액
+  version: number;
+  myRank: number | null;
+  lowestPrice: number | null;
+}
+
+export interface QuoteLine {
+  trade: string;
+  material: string;
+  qty: number;
+  unitPrice: number;
+}
+
+export interface Quote {
+  bidId: string;
+  companyId: string;
+  alias: string;
+  subtitle: string;
+  recommended: boolean;
+  totalPrice: number;
+  priceDeltaPct: number;
+  isLowestPrice: boolean;
+  leadDays: number;
+  isShortestLead: boolean;
+  reputation: number;
+  score: number;
+}
+
+export interface RiskBar {
+  label: string;
+  pct: number;
+  tone: 'success' | 'ai' | 'warn';
+}
+
+export interface AwardResult {
+  id: string;
+  bidId: string;
+  companyName: string | null;
+  awardedAt: string | null;
+}
+
+export interface AwardView {
+  auctionId: string;
+  auctionTitle: string;
+  bidderCount: number;
+  awardCriteria: AwardCriteria;
+  weights: Weights;
+  quotes: Quote[];
+  riskBars: RiskBar[];
+  awarded: AwardResult | null;
+}
+
+// ── 업체 포털 대시보드(SCR-38) ──
+export interface Kpi {
+  label: string;
+  value: number;
+  tone: 'normal' | 'success' | 'error';
+}
+export interface AwardedBooth {
+  auctionId: string;
+  event: string;
+  name: string;
+  booth: string;
+  client: string | null;
+  dday: number | null;
+  stage: string;
+}
+export interface MyBid {
+  auctionId: string;
+  auctionTitle: string;
+  myPrice: number;
+  myRank: number | null;
+  dday: number;
+}
+export interface FeedItem {
+  text: string;
+  meta: string;
+  tone: 'ok' | 'warn' | 'info';
+}
+export interface ContractorDashboard {
+  companyName: string | null;
+  kpis: Kpi[];
+  awardedBooths: AwardedBooth[];
+  myAuctionBids: MyBid[];
+  feed: FeedItem[];
+}
+
+export interface CreateAuctionBody {
+  eventId: string;
+  title: string;
+  category: string;
+  type: AuctionType;
+  awardCriteria: AwardCriteria;
+  weights: Weights;
+  round: number;
+  deadline: string;
+  materialPackageId?: string | null;
+  materials: MaterialKind[];
+  invitedCompanyIds: string[];
+}
+
+export interface BidBody {
+  total?: number; // 라인아이템 미전송 시 경쟁 금액(부가세 별도)
+  leadDays?: number;
+  validUntil?: string | null;
+  terms?: string | null;
+  lines?: QuoteLine[];
+}
+
+export interface AwardBody {
+  bidId: string;
+  reason: string;
+}
+
+/** F035 물량서(BOQ) 라인 — 공종·품명·단위·수량·산출근거(금액 미포함). */
+export interface BoqLine {
+  seq: number;
+  trade: string;
+  item: string;
+  unit: string;
+  qty: number;
+  basis: string;
+}
+
+/** F035 물량서(BOQ) 자동산출 결과 — 서버 규칙 기반 집계(부스 설계 M2/M4 읽기). */
+export interface BoqResult {
+  auctionId: string;
+  eventId: string;
+  scope: 'booth' | 'event';
+  scopeLabel: string;
+  boothCount: number;
+  totalAreaM2: number;
+  lines: BoqLine[];
+  note: string;
+  generatedAt: string;
+}
+
+export const MATERIAL_LABEL: Record<MaterialKind, string> = {
+  layout: '배치',
+  design: '설계',
+  boq: '물량서',
+  aiimage: '예상이미지',
+};
+
+/** 원 금액 → ₩ 구분자 포맷. */
+export function formatWon(v: number): string {
+  return `₩${v.toLocaleString('ko-KR')}`;
+}
+
+export const auctionApi = {
+  list: (eventId?: string) =>
+    api.get<AuctionSummary[]>(`/api/auctions${eventId ? `?eventId=${encodeURIComponent(eventId)}` : ''}`),
+  detail: (id: string) => api.get<AuctionDetail>(`/api/auctions/${encodeURIComponent(id)}`),
+  create: (body: CreateAuctionBody) => api.post<AuctionSummary>('/api/auctions', body),
+  bid: (id: string, body: BidBody) => api.post<BidResult>(`/api/auctions/${encodeURIComponent(id)}/bids`, body),
+  close: (id: string) => api.post<AuctionSummary>(`/api/auctions/${encodeURIComponent(id)}/close`),
+  award: (id: string, body: AwardBody) => api.post<AwardResult>(`/api/auctions/${encodeURIComponent(id)}/award`, body),
+  awardView: (id: string) => api.get<AwardView>(`/api/auctions/${encodeURIComponent(id)}/award-view`),
+  boq: (id: string) => api.get<BoqResult>(`/api/auctions/${encodeURIComponent(id)}/boq`),
+};
+
+export const contractorApi = {
+  dashboard: () => api.get<ContractorDashboard>('/api/contractor/dashboard'),
+};
diff --git a/src/frontend/src/screens/auction/sampleAuction.ts b/src/frontend/src/screens/auction/sampleAuction.ts
new file mode 100644
index 0000000..8125a3c
--- /dev/null
+++ b/src/frontend/src/screens/auction/sampleAuction.ts
@@ -0,0 +1,210 @@
+/*
+ * M15 공사/장치 옥션 시연용 샘플 데이터.
+ * ★ M15 역경매 엔진은 미구현 — 실 API 연동 전까지 화면 시연을 위한 정적 데이터.
+ *   존재하지 않는 엔드포인트를 fetch 하지 않으며, 모든 화면 상단에 "샘플 데이터" 배지를 노출한다.
+ *   응찰/낙찰 등 뮤테이션은 로컬 상태 데모로만 처리한다.
+ * 보안 도메인 규칙(UI 반영):
+ *   - 등록업체만 응찰(초대·응찰 게이트) — verified 플래그.
+ *   - 봉인 입찰: 마감 전 경쟁 견적 금액 비공개, 현재 최저가(공개 벤치마크)와 내 견적만 노출.
+ *   - 낙찰 비교(SCR-29)는 마감 후 발주자 뷰 — 전 견적 공개.
+ */
+
+export type AuctionCategory =
+  | '전시디자인설치'
+  | '구조물 임대'
+  | '전기/조명'
+  | '영상/음향'
+  | '네트워크';
+
+export type AuctionType = '역경매' | 'RFQ';
+export type AuctionStatus = '진행중' | '마감' | '정산중';
+export type AwardCriteria = 'lowest' | 'comprehensive';
+
+/** M2~M5 AI 자료 첨부 종류. */
+export type MaterialKind = 'layout' | 'design' | 'boq' | 'aiimage';
+
+export interface AuctionSummary {
+  id: string;
+  title: string;
+  category: AuctionCategory;
+  type: AuctionType;
+  status: AuctionStatus;
+  round: number;
+  dday: number; // 음수면 마감 경과
+  bidderCount: number;
+  lowestPrice: number | null; // 공개 최저가(역경매 벤치마크)
+  awardedCompany: string | null; // 정산중/마감 낙찰 업체
+  finalPrice: number | null;
+  materials: MaterialKind[];
+  accent: 'primary' | 'secondary' | 'tertiary';
+}
+
+export interface RankRow {
+  rank: number;
+  /** 익명 표기(업체 A/B/C). 실명은 마감 후 발주자 뷰에서만. */
+  alias: string;
+  price: number;
+  isMe: boolean;
+  isLowest: boolean;
+}
+
+export interface QuoteColumn {
+  alias: string;
+  subtitle: string; // 종합 1위 등
+  recommended: boolean;
+  totalPrice: number;
+  priceDeltaPct: number; // 최저가 대비 %
+  isLowestPrice: boolean;
+  leadDays: number;
+  isShortestLead: boolean;
+  reputation: number; // 5점 만점
+  score: number; // 종합 점수
+}
+
+export const MATERIAL_LABEL: Record<MaterialKind, string> = {
+  layout: '배치',
+  design: '설계',
+  boq: '물량서',
+  aiimage: '예상이미지',
+};
+
+/** SCR-26 옥션 목록. */
+export const SAMPLE_AUCTIONS: AuctionSummary[] = [
+  {
+    id: 'AUC-2026-0102',
+    title: 'A-102 독립부스 시공',
+    category: '전시디자인설치',
+    type: '역경매',
+    status: '진행중',
+    round: 2,
+    dday: 2,
+    bidderCount: 5,
+    lowestPrice: 8_400_000,
+    awardedCompany: null,
+    finalPrice: null,
+    materials: ['layout', 'design', 'boq', 'aiimage'],
+    accent: 'primary',
+  },
+  {
+    id: 'AUC-2026-0405',
+    title: 'B-405 트러스 구조물 설치',
+    category: '구조물 임대',
+    type: '역경매',
+    status: '진행중',
+    round: 1,
+    dday: 1,
+    bidderCount: 12,
+    lowestPrice: 4_250_000,
+    awardedCompany: null,
+    finalPrice: null,
+    materials: ['layout', 'boq'],
+    accent: 'secondary',
+  },
+  {
+    id: 'AUC-2026-0210',
+    title: 'C-10 공용 통로 조명 공사',
+    category: '전기/조명',
+    type: '역경매',
+    status: '정산중',
+    round: 1,
+    dday: -3,
+    bidderCount: 7,
+    lowestPrice: 12_000_000,
+    awardedCompany: '(주)테크라이팅',
+    finalPrice: 12_000_000,
+    materials: ['layout', 'boq'],
+    accent: 'tertiary',
+  },
+  {
+    id: 'AUC-2026-0311',
+    title: '제2전시장 외벽 래핑',
+    category: '영상/음향',
+    type: 'RFQ',
+    status: '진행중',
+    round: 1,
+    dday: 6,
+    bidderCount: 3,
+    lowestPrice: 6_800_000,
+    awardedCompany: null,
+    finalPrice: null,
+    materials: ['design', 'aiimage'],
+    accent: 'secondary',
+  },
+];
+
+/** SCR-26 개설 패널 — 초대 후보 업체(등록 여부 게이트). */
+export const INVITABLE_COMPANIES: { name: string; verified: boolean }[] = [
+  { name: '(주)에이치디자인', verified: true },
+  { name: '(주)공간창작', verified: true },
+  { name: 'K-전시산업', verified: true },
+  { name: '한빛부스시공', verified: false }, // 미등록 — 초대 불가
+];
+
+/** SCR-27 실시간 순위(봉인 — 최저가·내 견적만 금액 공개). */
+export const SAMPLE_RANKS: RankRow[] = [
+  { rank: 1, alias: '업체 A', price: 8_400_000, isMe: false, isLowest: true },
+  { rank: 2, alias: '나의 응찰 (ME)', price: 8_700_000, isMe: true, isLowest: false },
+  { rank: 3, alias: '업체 C', price: 8_900_000, isMe: false, isLowest: false },
+  { rank: 4, alias: '업체 D', price: 9_050_000, isMe: false, isLowest: false },
+  { rank: 5, alias: '업체 E', price: 9_400_000, isMe: false, isLowest: false },
+];
+
+/** SCR-27 자료 뷰어 탭. */
+export const REFERENCE_TABS: { kind: MaterialKind; label: string }[] = [
+  { kind: 'layout', label: '배치도' },
+  { kind: 'design', label: '부스 설계안' },
+  { kind: 'boq', label: '물량서(BOQ)' },
+  { kind: 'aiimage', label: '예상 이미지' },
+];
+
+/** SCR-29 낙찰 비교표(마감 후 발주자 뷰 — 전 견적 공개). */
+export const SAMPLE_QUOTES: QuoteColumn[] = [
+  {
+    alias: '업체 A',
+    subtitle: '종합 1위 (추천)',
+    recommended: true,
+    totalPrice: 8_400_000,
+    priceDeltaPct: 0,
+    isLowestPrice: true,
+    leadDays: 12,
+    isShortestLead: false,
+    reputation: 4.8,
+    score: 92.4,
+  },
+  {
+    alias: '업체 B',
+    subtitle: '종합 2위',
+    recommended: false,
+    totalPrice: 8_700_000,
+    priceDeltaPct: 3.5,
+    isLowestPrice: false,
+    leadDays: 10,
+    isShortestLead: true,
+    reputation: 4.6,
+    score: 89.1,
+  },
+  {
+    alias: '업체 C',
+    subtitle: '종합 3위',
+    recommended: false,
+    totalPrice: 8_900_000,
+    priceDeltaPct: 5.9,
+    isLowestPrice: false,
+    leadDays: 14,
+    isShortestLead: false,
+    reputation: 4.2,
+    score: 84.7,
+  },
+];
+
+/** SCR-29 리스크 분석 바(AI 시뮬레이션). */
+export const RISK_BARS: { label: string; pct: number; tone: 'success' | 'ai' | 'warn' }[] = [
+  { label: '시공 지연 확률', pct: 2.4, tone: 'success' },
+  { label: '예산 초과 위험', pct: 12.8, tone: 'ai' },
+  { label: '자재 품질 신뢰도', pct: 96.5, tone: 'success' },
+];
+
+/** 원 금액 → ₩ 구분자 포맷. */
+export function formatWon(v: number): string {
+  return `₩${v.toLocaleString('ko-KR')}`;
+}
diff --git a/src/frontend/src/screens/boothsales/BoothSalesPage.tsx b/src/frontend/src/screens/boothsales/BoothSalesPage.tsx
new file mode 100644
index 0000000..a452a98
--- /dev/null
+++ b/src/frontend/src/screens/boothsales/BoothSalesPage.tsx
@@ -0,0 +1,271 @@
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { ApiRequestError } from '../../api/client';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconBlock, IconCheckCircle, IconGrid, IconSettlement } from '../../components/ui/icons';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { boothSalesApi } from './boothSalesApi';
+import type { BoothSaleStatus, BoothSaleUnit } from './boothSalesApi';
+import './boothsales.css';
+
+/*
+ * SCR /booth-sales — F005 부스 판매 인벤토리 + F006 온라인 셀프 선택·판매.
+ * 기존 M2 booth 좌표를 소비하는 판매 상태 오버레이(available|held|sold|blocked)를 심플 그리드로 표시한다.
+ * - 참가업체: available·본인 hold 부스만 노출 → hold(선점) → 구매 확정. 이중 hold 는 409 토스트.
+ * - 주최자/홀매니저: 전 상태 + blocked 전환·판매가 override·M9 정산 청구 생성(settle) 연계.
+ * ★ 금액은 서버 계산 권위 — 표시만 한다(재계산 없음).
+ */
+
+const WON = new Intl.NumberFormat('ko-KR');
+
+const STATUS_ORDER: BoothSaleStatus[] = ['available', 'held', 'sold', 'blocked'];
+
+function isConflict(err: unknown): boolean {
+  return err instanceof ApiRequestError && err.code === 'CONFLICT';
+}
+
+export function BoothSalesPage() {
+  const { t } = useTranslation();
+  const eventId = useResolvedEventId();
+  const qc = useQueryClient();
+  const [hallFilter, setHallFilter] = useState<string>('all');
+  const [toast, setToast] = useState<{ tone: 'ok' | 'err'; msg: string } | null>(null);
+
+  const invQ = useQuery({
+    queryKey: ['booth-sales', 'inventory', eventId],
+    queryFn: () => boothSalesApi.inventory(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const inv = invQ.data;
+  const canManage = inv?.canManage ?? false;
+
+  const flash = (tone: 'ok' | 'err', msg: string) => {
+    setToast({ tone, msg });
+    window.setTimeout(() => setToast(null), 3200);
+  };
+  const invalidate = () => qc.invalidateQueries({ queryKey: ['booth-sales', 'inventory', eventId] });
+
+  const holdM = useMutation({
+    mutationFn: (b: BoothSaleUnit) => boothSalesApi.hold(eventId as string, b.boothId),
+    onSuccess: () => { invalidate(); flash('ok', t('boothsales.heldToast')); },
+    onError: (e) => flash('err', isConflict(e) ? t('boothsales.holdConflict') : t('boothsales.actionFail')),
+  });
+  const purchaseM = useMutation({
+    mutationFn: (b: BoothSaleUnit) => boothSalesApi.purchase(eventId as string, b.boothId),
+    onSuccess: () => { invalidate(); flash('ok', t('boothsales.purchasedToast')); },
+    onError: (e) => flash('err', isConflict(e) ? t('boothsales.purchaseConflict') : t('boothsales.actionFail')),
+  });
+  const releaseM = useMutation({
+    mutationFn: (b: BoothSaleUnit) => boothSalesApi.release(eventId as string, b.boothId),
+    onSuccess: () => { invalidate(); flash('ok', t('boothsales.releasedToast')); },
+    onError: () => flash('err', t('boothsales.actionFail')),
+  });
+  const blockM = useMutation({
+    mutationFn: (v: { b: BoothSaleUnit; blocked: boolean }) =>
+      boothSalesApi.block(eventId as string, v.b.boothId, v.blocked),
+    onSuccess: () => { invalidate(); flash('ok', t('boothsales.blockToast')); },
+    onError: (e) => flash('err', isConflict(e) ? t('boothsales.blockConflict') : t('boothsales.actionFail')),
+  });
+  const priceM = useMutation({
+    mutationFn: (v: { b: BoothSaleUnit; price: number | null }) =>
+      boothSalesApi.price(eventId as string, v.b.boothId, v.price),
+    onSuccess: () => { invalidate(); flash('ok', t('boothsales.priceToast')); },
+    onError: () => flash('err', t('boothsales.actionFail')),
+  });
+  const settleM = useMutation({
+    mutationFn: () => boothSalesApi.settle(eventId as string),
+    onSuccess: (r) => flash('ok', t('boothsales.settleToast', { created: r.created, skipped: r.skipped })),
+    onError: () => flash('err', t('boothsales.settleFail')),
+  });
+
+  const halls = useMemo(() => {
+    const map = new Map<string, string>();
+    (inv?.units ?? []).forEach((u) => map.set(u.hallId, u.hallLabel));
+    return Array.from(map.entries()).map(([id, label]) => ({ id, label }));
+  }, [inv]);
+
+  const units = useMemo(() => {
+    const list = (inv?.units ?? []).filter((u) => hallFilter === 'all' || u.hallId === hallFilter);
+    return [...list].sort(
+      (a, b) =>
+        STATUS_ORDER.indexOf(a.status) - STATUS_ORDER.indexOf(b.status) ||
+        (a.boothNo ?? '').localeCompare(b.boothNo ?? ''),
+    );
+  }, [inv, hallFilter]);
+
+  const onPrice = (b: BoothSaleUnit) => {
+    const raw = window.prompt(t('boothsales.pricePrompt'), String(b.unitPrice));
+    if (raw === null) return;
+    const trimmed = raw.trim();
+    if (trimmed === '') { priceM.mutate({ b, price: null }); return; } // 빈값 = 파생가 복원
+    const n = Number(trimmed.replace(/[^0-9]/g, ''));
+    if (!Number.isFinite(n) || n < 0) { flash('err', t('boothsales.priceInvalid')); return; }
+    priceM.mutate({ b, price: n });
+  };
+
+  if (!eventId) {
+    return (
+      <div className="kx-bsales">
+        <div className="kx-card">
+          <EmptyState title={t('boothsales.noEventTitle')} description={t('boothsales.noEventDesc')} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="kx-bsales">
+      <header className="kx-bsales__head">
+        <div>
+          <h1 className="kx-bsales__title">{t('boothsales.title')}</h1>
+          <p className="kx-bsales__subtitle">
+            {canManage ? t('boothsales.subtitleManager') : t('boothsales.subtitleExhibitor')}
+          </p>
+        </div>
+        {canManage && (
+          <Button onClick={() => settleM.mutate()} disabled={settleM.isPending}>
+            <IconSettlement size={16} /> {settleM.isPending ? t('boothsales.settling') : t('boothsales.settle')}
+          </Button>
+        )}
+      </header>
+
+      {inv && (
+        <div className="kx-bsales__summary" aria-label={t('boothsales.summaryAria')}>
+          <StatChip tone="available" label={t('boothsales.stAvailable')} n={inv.available} />
+          <StatChip tone="held" label={t('boothsales.stHeld')} n={inv.held} />
+          <StatChip tone="sold" label={t('boothsales.stSold')} n={inv.sold} />
+          {canManage && <StatChip tone="blocked" label={t('boothsales.stBlocked')} n={inv.blocked} />}
+          <span className="kx-bsales__rate">
+            {t('boothsales.rate', { rate: WON.format(inv.ratePerM2), ver: inv.rulesetVersion })}
+          </span>
+        </div>
+      )}
+
+      <div className="kx-bsales__toolbar">
+        <select
+          className="kx-select"
+          aria-label={t('boothsales.hallFilter')}
+          value={hallFilter}
+          onChange={(e) => setHallFilter(e.target.value)}
+        >
+          <option value="all">{t('boothsales.allHalls')}</option>
+          {halls.map((h) => (
+            <option key={h.id} value={h.id}>{h.label}</option>
+          ))}
+        </select>
+      </div>
+
+      {toast && (
+        <div className={`kx-bsales__toast is-${toast.tone}`} role="status">{toast.msg}</div>
+      )}
+
+      {invQ.isLoading ? (
+        <div className="kx-bsales__grid" aria-busy="true">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="kx-boothcard" aria-hidden="true">
+              <Skeleton height={16} width="55%" />
+              <Skeleton height={28} width="70%" />
+              <Skeleton height={14} width="40%" />
+            </div>
+          ))}
+        </div>
+      ) : invQ.isError ? (
+        <ErrorState message={t('boothsales.loadError')} onRetry={() => invQ.refetch()} />
+      ) : units.length === 0 ? (
+        <div className="kx-card">
+          <EmptyState
+            title={t('boothsales.emptyTitle')}
+            description={canManage ? t('boothsales.emptyManage') : t('boothsales.emptyExhibitor')}
+          />
+        </div>
+      ) : (
+        <div className="kx-bsales__grid">
+          {units.map((b) => (
+            <BoothCard
+              key={b.boothId}
+              b={b}
+              canManage={canManage}
+              busy={holdM.isPending || purchaseM.isPending || releaseM.isPending || blockM.isPending}
+              onHold={() => holdM.mutate(b)}
+              onPurchase={() => purchaseM.mutate(b)}
+              onRelease={() => releaseM.mutate(b)}
+              onBlock={(blocked) => blockM.mutate({ b, blocked })}
+              onPrice={() => onPrice(b)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatChip({ tone, label, n }: { tone: string; label: string; n: number }) {
+  return (
+    <span className={`kx-bsales__stat is-${tone}`}>
+      <strong className="tnum">{n}</strong> {label}
+    </span>
+  );
+}
+
+function BoothCard({
+  b, canManage, busy, onHold, onPurchase, onRelease, onBlock, onPrice,
+}: {
+  b: BoothSaleUnit;
+  canManage: boolean;
+  busy: boolean;
+  onHold: () => void;
+  onPurchase: () => void;
+  onRelease: () => void;
+  onBlock: (blocked: boolean) => void;
+  onPrice: () => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <article className={`kx-boothcard is-${b.status}`}>
+      <div className="kx-boothcard__top">
+        <span className="kx-boothcard__no"><IconGrid size={14} /> {b.boothNo ?? b.boothId}</span>
+        <span className={`kx-boothstatus is-${b.status}`}>{t(`boothsales.status.${b.status}`)}</span>
+      </div>
+      <div className="kx-boothcard__price tnum">{WON.format(b.unitPrice)}<span className="kx-boothcard__won">{t('boothsales.wonUnit')}</span></div>
+      <ul className="kx-boothcard__meta">
+        <li>{t('boothsales.hallLabel')}: {b.hallLabel}</li>
+        <li className="tnum">{t('boothsales.areaLabel')}: {b.areaM2.toLocaleString()}㎡</li>
+        {b.status === 'sold' && b.soldToCompany && <li>{t('boothsales.soldTo', { c: b.soldToCompany })}</li>}
+      </ul>
+
+      <div className="kx-boothcard__actions">
+        {/* 참가업체 셀프 판매 흐름 */}
+        {!canManage && b.status === 'available' && (
+          <Button onClick={onHold} disabled={busy}>{t('boothsales.hold')}</Button>
+        )}
+        {!canManage && b.status === 'held' && b.heldByMe && (
+          <>
+            <Button onClick={onPurchase} disabled={busy}>
+              <IconCheckCircle size={14} /> {t('boothsales.purchase')}
+            </Button>
+            <Button variant="ghost" onClick={onRelease} disabled={busy}>{t('boothsales.release')}</Button>
+          </>
+        )}
+
+        {/* 주최자 관리 흐름 */}
+        {canManage && (
+          <>
+            <Button variant="secondary" onClick={onPrice} disabled={busy}>{t('boothsales.setPrice')}</Button>
+            {b.status !== 'sold' && b.status !== 'blocked' && (
+              <Button variant="ghost" onClick={() => onBlock(true)} disabled={busy}>
+                <IconBlock size={14} /> {t('boothsales.block')}
+              </Button>
+            )}
+            {b.status === 'blocked' && (
+              <Button variant="ghost" onClick={() => onBlock(false)} disabled={busy}>{t('boothsales.unblock')}</Button>
+            )}
+          </>
+        )}
+      </div>
+    </article>
+  );
+}
diff --git a/src/frontend/src/screens/boothsales/boothSalesApi.ts b/src/frontend/src/screens/boothsales/boothSalesApi.ts
new file mode 100644
index 0000000..22be954
--- /dev/null
+++ b/src/frontend/src/screens/boothsales/boothSalesApi.ts
@@ -0,0 +1,82 @@
+/*
+ * F005/F006 부스 판매 인벤토리·온라인 셀프 판매 실 API 클라이언트.
+ * 공용 client(../../api/client)의 api 만 사용 — client.ts·endpoints.ts·types.ts 무수정.
+ * 정본: 백엔드 com.zioinfo.kintex.boothsales (BoothSalesController) 시그니처.
+ *   - GET  /api/booth-sales/inventory?eventId=&hallId=  → ApiResponse<InventoryResponse>
+ *   - POST /api/booth-sales/hold      { eventId, boothId }            → BoothSaleResult (이중 hold 409)
+ *   - POST /api/booth-sales/purchase  { eventId, boothId, company? }  → BoothSaleResult (만료 409)
+ *   - POST /api/booth-sales/release   { eventId, boothId }            → BoothSaleResult
+ *   - POST /api/booth-sales/block     { eventId, boothId, blocked, reason? } → BoothSaleResult (매니저)
+ *   - POST /api/booth-sales/price     { eventId, boothId, unitPrice } → BoothSaleResult (매니저)
+ *   - POST /api/booth-sales/settle?eventId=  → GenerateResult (매니저, M9 정산 연계)
+ *
+ * ★ 금액은 서버 계산이 권위 — 프론트는 서버가 준 원 단위(number)를 표시만 한다(재계산 없음).
+ */
+import { api } from '../../api/client';
+
+export type BoothSaleStatus = 'available' | 'held' | 'sold' | 'blocked';
+
+export interface BoothSaleUnit {
+  boothId: string;
+  boothNo: string | null;
+  boothType: string | null;
+  hallId: string;
+  hallLabel: string;
+  areaM2: number;
+  status: BoothSaleStatus;
+  unitPrice: number;
+  heldByMe: boolean;
+  heldUntil: string | null;
+  soldToCompany: string | null;
+}
+
+export interface InventoryResponse {
+  eventId: string;
+  hallId: string | null;
+  rulesetVersion: string;
+  ratePerM2: number;
+  available: number;
+  held: number;
+  sold: number;
+  blocked: number;
+  canManage: boolean;
+  holdTtlMinutes: number;
+  units: BoothSaleUnit[];
+}
+
+export interface BoothSaleResult {
+  action: 'held' | 'purchased' | 'released' | 'blocked' | 'unblocked' | 'priced';
+  unit: BoothSaleUnit;
+}
+
+export interface SettleResult {
+  eventId: string;
+  created: number;
+  skipped: number;
+}
+
+export const boothSalesApi = {
+  inventory: (eventId: string, hallId?: string | null) => {
+    const qs = new URLSearchParams({ eventId });
+    if (hallId) qs.set('hallId', hallId);
+    return api.get<InventoryResponse>(`/api/booth-sales/inventory?${qs.toString()}`);
+  },
+
+  hold: (eventId: string, boothId: string) =>
+    api.post<BoothSaleResult>('/api/booth-sales/hold', { eventId, boothId }),
+
+  purchase: (eventId: string, boothId: string, company?: string) =>
+    api.post<BoothSaleResult>('/api/booth-sales/purchase', { eventId, boothId, company }),
+
+  release: (eventId: string, boothId: string) =>
+    api.post<BoothSaleResult>('/api/booth-sales/release', { eventId, boothId }),
+
+  block: (eventId: string, boothId: string, blocked: boolean, reason?: string) =>
+    api.post<BoothSaleResult>('/api/booth-sales/block', { eventId, boothId, blocked, reason }),
+
+  price: (eventId: string, boothId: string, unitPrice: number | null) =>
+    api.post<BoothSaleResult>('/api/booth-sales/price', { eventId, boothId, unitPrice }),
+
+  settle: (eventId: string) =>
+    api.post<SettleResult>(`/api/booth-sales/settle?eventId=${encodeURIComponent(eventId)}`),
+};
diff --git a/src/frontend/src/screens/boothsales/boothsales.css b/src/frontend/src/screens/boothsales/boothsales.css
new file mode 100644
index 0000000..3c5be3d
--- /dev/null
+++ b/src/frontend/src/screens/boothsales/boothsales.css
@@ -0,0 +1,138 @@
+/*
+ * F005/F006 부스 판매 인벤토리·셀프 판매 — 심플 그리드 + 상태 색.
+ * 디자인 토큰(색·간격·radius)은 전역 변수를 재사용한다(과도한 신규 스타일 지양).
+ */
+.kx-bsales {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.kx-bsales__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.kx-bsales__title {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+}
+.kx-bsales__subtitle {
+  color: var(--kx-text-muted, #64748b);
+  font-size: 13px;
+  margin: 4px 0 0;
+}
+
+.kx-bsales__summary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.kx-bsales__stat {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  background: var(--kx-surface-2, #f1f5f9);
+  border: 1px solid var(--kx-border, #e2e8f0);
+}
+.kx-bsales__stat strong { font-size: 15px; font-weight: 700; }
+.kx-bsales__stat.is-available { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
+.kx-bsales__stat.is-held { color: #b45309; background: #fffbeb; border-color: #fde68a; }
+.kx-bsales__stat.is-sold { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
+.kx-bsales__stat.is-blocked { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
+.kx-bsales__rate {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--kx-text-muted, #64748b);
+}
+
+.kx-bsales__toolbar { display: flex; gap: 8px; }
+
+.kx-bsales__toast {
+  padding: 10px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+}
+.kx-bsales__toast.is-ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
+.kx-bsales__toast.is-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
+
+.kx-bsales__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.kx-boothcard {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  border-radius: 8px;
+  background: var(--kx-surface, #fff);
+  border: 1px solid var(--kx-border, #e2e8f0);
+  border-left-width: 4px;
+}
+.kx-boothcard.is-available { border-left-color: #22c55e; }
+.kx-boothcard.is-held { border-left-color: #f59e0b; }
+.kx-boothcard.is-sold { border-left-color: #94a3b8; opacity: 0.92; }
+.kx-boothcard.is-blocked { border-left-color: #ef4444; opacity: 0.85; }
+
+.kx-boothcard__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.kx-boothcard__no {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 600;
+  font-size: 13px;
+}
+.kx-boothstatus {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: 600;
+}
+.kx-boothstatus.is-available { color: #15803d; background: #f0fdf4; }
+.kx-boothstatus.is-held { color: #b45309; background: #fffbeb; }
+.kx-boothstatus.is-sold { color: #475569; background: #f1f5f9; }
+.kx-boothstatus.is-blocked { color: #b91c1c; background: #fef2f2; }
+
+.kx-boothcard__price {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.1;
+}
+.kx-boothcard__won { font-size: 13px; font-weight: 500; color: var(--kx-text-muted, #64748b); margin-left: 2px; }
+
+.kx-boothcard__meta {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 12px;
+  color: var(--kx-text-muted, #64748b);
+}
+
+.kx-boothcard__actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 2px;
+}
+.kx-boothcard__actions .kx-btn {
+  padding: 5px 10px;
+  font-size: 12px;
+}
diff --git a/src/frontend/src/screens/chartColors.ts b/src/frontend/src/screens/chartColors.ts
new file mode 100644
index 0000000..28a8159
--- /dev/null
+++ b/src/frontend/src/screens/chartColors.ts
@@ -0,0 +1,26 @@
+/*
+ * Recharts 색상 상수 — design.md §1-2 토큰을 JS 상수로 미러링.
+ * SVG 속성(fill/stroke)은 CSS 변수 var()를 신뢰할 수 없어 토큰 16진값을 직접 매핑한다.
+ * ★ 값 변경 시 반드시 styles/tokens.css(§1 권위)와 동기화할 것.
+ */
+export const CHART = {
+  primary600: '#0066B3', // 주 브랜드 블루
+  primary700: '#004C86', // 짙은 톤(hover/강조)
+  primary100: '#D9EAF7', // 활성 배경
+  primary050: '#EFF6FC',
+  aiAccent: '#6D4AFF', // AI 전용(수요예측 등)
+  aiSurface: '#F5F3FF',
+  success: '#0E8A5F',
+  warning: '#F79009', // 오버레이/차트용 앰버(§1 violation-warn)
+  error: '#D92D20',
+  slate: '#667085', // 보조 계열
+  neutral200: '#E4E7EC',
+  neutral100: '#F2F4F7',
+} as const;
+
+/** 임계 상태색 — 점유율/부하 등급별. */
+export function occupancyTone(pct: number): 'success' | 'warning' | 'error' {
+  if (pct >= 90) return 'error';
+  if (pct >= 70) return 'warning';
+  return 'success';
+}
diff --git a/src/frontend/src/screens/cms/CmsWorkflowPage.tsx b/src/frontend/src/screens/cms/CmsWorkflowPage.tsx
new file mode 100644
index 0000000..a79c9be
--- /dev/null
+++ b/src/frontend/src/screens/cms/CmsWorkflowPage.tsx
@@ -0,0 +1,311 @@
+/*
+ * SCR-35 CMS 콘텐츠·게시 워크플로 [M17]. 참조: design.md §3 SCR-35.
+ * 좌: 콘텐츠 목록(상태 배지) · 중: 에디터(제목·블록·미디어) · 우: 게시 워크플로(전이 draft→review→approved→published·예약·사이니지 토글).
+ * ★실 API 전환: GET/POST /api/cms/contents · PATCH /api/cms/contents/{id}/status?value=. 상태 전이 실동작(역전이 400 방지 — 전진 버튼만 노출).
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Button } from '../../components/ui/Button';
+import { AiLabel } from '../../components/ui/Badge';
+import { ApiRequestError } from '../../api/client';
+import { cmsApi, type CmsContent, type FlowStatus } from './cmsApi';
+import {
+  IconDocument,
+  IconSpark,
+  IconCalendar,
+  IconCheckCircle,
+  IconImage,
+  IconPlus,
+  IconWarning,
+} from '../../components/ui/icons';
+import './cms.css';
+
+const STATUS_META: Record<FlowStatus, { label: string; cls: string }> = {
+  draft: { label: '초안', cls: 'kx-cms-pill--draft' },
+  review: { label: '검수 중', cls: 'kx-cms-pill--review' },
+  approved: { label: '승인', cls: 'kx-cms-pill--approved' },
+  published: { label: '게시 완료', cls: 'kx-cms-pill--published' },
+};
+const FLOW_ORDER: FlowStatus[] = ['draft', 'review', 'approved', 'published'];
+
+// 툴바용 소형 인라인 아이콘(stroke, currentColor) — 라이브러리 미보유분.
+function ToolIcon({ d }: { d: string }) {
+  return (
+    <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d={d} />
+    </svg>
+  );
+}
+const TOOLS = [
+  { title: '굵게', d: 'M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z' },
+  { title: '기울임', d: 'M19 4h-9M14 20H5M15 4L9 20' },
+  { title: '링크', d: 'M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1' },
+  { title: '목록', d: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01' },
+];
+
+function fmtDate(iso: string | null): string {
+  if (!iso) return '-';
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? '-' : d.toLocaleString('ko-KR', { dateStyle: 'medium', timeStyle: 'short' });
+}
+
+export function CmsWorkflowPage() {
+  const [items, setItems] = useState<CmsContent[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [signage, setSignage] = useState(true);
+  const [mailing, setMailing] = useState(false);
+
+  async function reload(keepSelection = true) {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await cmsApi.listContents({ size: 100 });
+      setItems(res.items);
+      if (!keepSelection || !res.items.some((c) => c.id === selectedId)) {
+        setSelectedId(res.items[0]?.id ?? null);
+      }
+    } catch (e) {
+      setError(e instanceof ApiRequestError ? e.message : '콘텐츠를 불러오지 못했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void reload(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const selected = useMemo(
+    () => items.find((c) => c.id === selectedId) ?? null,
+    [items, selectedId],
+  );
+
+  async function advance(next: FlowStatus) {
+    if (!selected) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const updated = await cmsApi.transition(selected.id, next);
+      setItems((prev) => prev.map((c) => (c.id === updated.id ? updated : c)));
+    } catch (e) {
+      setError(e instanceof ApiRequestError ? e.message : '상태 전이에 실패했습니다.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function createDraft() {
+    setBusy(true);
+    setError(null);
+    try {
+      const created = await cmsApi.createContent({ title: '새 콘텐츠 (초안)', contentType: 'PAGE' });
+      setItems((prev) => [created, ...prev]);
+      setSelectedId(created.id);
+    } catch (e) {
+      setError(e instanceof ApiRequestError ? e.message : '콘텐츠 생성에 실패했습니다.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const curIdx = selected ? FLOW_ORDER.indexOf(selected.status) : -1;
+
+  return (
+    <div className="kx-page">
+      <header className="kx-cms__head">
+        <div>
+          <h1 className="kx-cms__title">콘텐츠 (CMS)</h1>
+          <p className="kx-cms__subtitle">
+            헤드리스 콘텐츠 · 게시 워크플로(초안 → 검수 → 승인 → 게시) · 예약 게시 · 다국어
+          </p>
+        </div>
+        <div className="kx-cms__head-actions">
+          <Button variant="secondary" onClick={createDraft} disabled={busy} leadingIcon={<IconPlus size={16} />}>
+            새 콘텐츠
+          </Button>
+        </div>
+      </header>
+
+      {error && (
+        <div className="kx-cms-alert" role="alert">
+          <IconWarning size={14} /> {error}
+        </div>
+      )}
+
+      <div className="kx-cms-grid">
+        {/* 좌: 콘텐츠 목록 */}
+        <section className="kx-card kx-cms-col" aria-label="콘텐츠 목록">
+          {loading ? (
+            <div className="kx-cms-empty">불러오는 중…</div>
+          ) : items.length === 0 ? (
+            <div className="kx-cms-empty">콘텐츠가 없습니다. “새 콘텐츠”로 초안을 만드세요.</div>
+          ) : (
+            <ul className="kx-cms-list">
+              {items.map((c) => {
+                const m = STATUS_META[c.status];
+                return (
+                  <li key={c.id}>
+                    <button
+                      className={`kx-cms-list__item ${c.id === selectedId ? 'is-active' : ''}`}
+                      onClick={() => setSelectedId(c.id)}
+                      aria-current={c.id === selectedId}
+                    >
+                      <span className="kx-cms-list__label">
+                        <IconDocument size={18} />
+                        <span className="kx-cms-list__name">{c.title}</span>
+                      </span>
+                      <span className={`kx-cms-pill ${m.cls}`}>{m.label}</span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </section>
+
+        {/* 중: 에디터 */}
+        <section className="kx-card kx-cms-col kx-cms-editor" aria-label="콘텐츠 에디터">
+          <input
+            className="kx-cms-title-input"
+            defaultValue={selected?.title ?? ''}
+            aria-label="제목"
+            key={selected?.id ?? 'none'}
+            placeholder="콘텐츠 제목"
+          />
+
+          <div className="kx-cms-toolbar" role="toolbar" aria-label="서식">
+            {TOOLS.map((t) => (
+              <button key={t.title} className="kx-icon-btn" title={t.title} aria-label={t.title}>
+                <ToolIcon d={t.d} />
+              </button>
+            ))}
+            <span className="kx-cms-toolbar__divider" aria-hidden="true" />
+            <button className="kx-icon-btn" title="이미지 삽입" aria-label="이미지 삽입">
+              <IconImage size={18} />
+            </button>
+            <button className="kx-icon-btn" title="버튼 블록" aria-label="버튼 블록">
+              <IconPlus size={18} />
+            </button>
+          </div>
+
+          <div>
+            <div className="kx-cms-sublabel" style={{ marginBottom: 8 }}>
+              미디어 라이브러리
+            </div>
+            <div className="kx-cms-media">
+              <div className="kx-cms-media__thumb">
+                <IconImage size={22} />
+              </div>
+              <div className="kx-cms-media__thumb">
+                <IconImage size={22} />
+              </div>
+              <button className="kx-cms-media__add" title="이미지 추가" aria-label="이미지 추가">
+                <IconPlus size={20} />
+              </button>
+            </div>
+          </div>
+
+          <div className="kx-cms-blocks">
+            <div className="kx-cms-block">
+              <div className="kx-cms-block__head">
+                <span className="kx-cms-block__kind">본문</span>
+              </div>
+              <p className="kx-cms-block__body">
+                {selected?.body || '본문 블록을 편집하세요. 텍스트·이미지·버튼·AI 요약 블록을 조합할 수 있습니다.'}
+              </p>
+            </div>
+            <div className="kx-cms-block kx-cms-block--ai">
+              <div className="kx-cms-block__head">
+                <AiLabel>AI 요약 정보</AiLabel>
+                <span className="kx-cms-disabled-hint" title="AI 요약 자동 생성은 아직 배선되지 않았습니다(AiTextRouter 연동 예정).">
+                  미배선
+                </span>
+              </div>
+              <p className="kx-cms-block__body">
+                AI 요약 블록은 AiTextRouter(Claude) 연동 후 자동 생성됩니다.
+              </p>
+            </div>
+          </div>
+
+          <div>
+            <div className="kx-cms-sublabel" style={{ marginBottom: 8 }}>
+              예약 게시
+            </div>
+            <div className="kx-cms-sched">
+              <IconCalendar size={18} />
+              <span>{selected?.scheduledAt ? fmtDate(selected.scheduledAt) : '예약 없음'}</span>
+            </div>
+          </div>
+        </section>
+
+        {/* 우: 워크플로 */}
+        <aside className="kx-card kx-cms-flow" aria-label="게시 워크플로">
+          <div className="kx-cms-flow__section">
+            <span className="kx-cms-flow__label">게시 워크플로</span>
+            <div className="kx-cms-stepper" aria-label="게시 단계">
+              {FLOW_ORDER.map((s, i) => (
+                <div
+                  key={s}
+                  className={`kx-cms-step ${i < curIdx ? 'is-done' : ''} ${i === curIdx ? 'is-current' : ''}`}
+                >
+                  <span className="kx-cms-step__dot">
+                    {i < curIdx && <IconCheckCircle size={12} />}
+                  </span>
+                  {STATUS_META[s].label}
+                </div>
+              ))}
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
+              {selected?.status === 'draft' && (
+                <Button block variant="secondary" onClick={() => advance('review')} disabled={busy}>
+                  검수 요청
+                </Button>
+              )}
+              {selected?.status === 'review' && (
+                <Button block onClick={() => advance('approved')} disabled={busy} leadingIcon={<IconCheckCircle size={16} />}>
+                  검수 승인
+                </Button>
+              )}
+              {selected?.status === 'approved' && (
+                <Button block onClick={() => advance('published')} disabled={busy} leadingIcon={<IconSpark size={16} />}>
+                  최종 게시
+                </Button>
+              )}
+              {selected?.status === 'published' && (
+                <div className="kx-cms-terminal">
+                  <IconCheckCircle size={14} /> 게시 완료됨 — 새 버전은 “새 콘텐츠”로 작성
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="kx-cms-schedcard">
+            <div className="kx-cms-schedcard__t">
+              <IconCalendar size={14} /> 콘텐츠 정보
+            </div>
+            <div style={{ fontSize: 13, color: 'var(--color-neutral-700)' }}>
+              최근 수정 {fmtDate(selected?.updatedAt ?? null)}
+              {selected?.authorName ? ` · ${selected.authorName}` : ''}
+            </div>
+          </div>
+
+          <div className="kx-cms-flow__toggles">
+            <label className="kx-toggle">
+              <span>현장 사이니지 동시 배포</span>
+              <input type="checkbox" checked={signage} onChange={(e) => setSignage(e.target.checked)} />
+              <span className="kx-toggle__track" aria-hidden="true" />
+            </label>
+            <label className="kx-toggle">
+              <span>메일링 리스트 통보</span>
+              <input type="checkbox" checked={mailing} onChange={(e) => setMailing(e.target.checked)} />
+              <span className="kx-toggle__track" aria-hidden="true" />
+            </label>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/cms/MicrositeBuilderPage.tsx b/src/frontend/src/screens/cms/MicrositeBuilderPage.tsx
new file mode 100644
index 0000000..34583a2
--- /dev/null
+++ b/src/frontend/src/screens/cms/MicrositeBuilderPage.tsx
@@ -0,0 +1,402 @@
+/*
+ * SCR-36 참가업체 마이크로사이트 편집기 [M17]. 참조: design.md §3 SCR-36.
+ * 좌: 섹션 편집(표시/숨김)·테마 · 중: 라이브 프리뷰(데스크톱/모바일) · 우: 게시 상태·URL·SEO·언어·저장/배포.
+ * ★실 API 전환: GET/PUT /api/exhibitors/{exhibitorId}/microsite. 섹션·테마·SEO·상태 저장 실동작(공개 뷰 = /api/public/microsites/{id}).
+ * 나노바나나 예상샷 갤러리는 AiLabel 워터마크(미배선 렌더). 데모 참가업체 = 'hanbit'(V19 시드).
+ */
+import { useEffect, useState } from 'react';
+import { Button } from '../../components/ui/Button';
+import { AiLabel } from '../../components/ui/Badge';
+import { ApiRequestError } from '../../api/client';
+import { cmsApi, type Microsite, type MicrositeSection } from './cmsApi';
+import {
+  IconImage,
+  IconPlus,
+  IconWarning,
+  IconGrid,
+  IconExpand,
+  IconDownload,
+} from '../../components/ui/icons';
+import './cms.css';
+
+type Lang = 'ko' | 'en' | 'zh' | 'ja';
+const LANGS: { key: Lang; label: string }[] = [
+  { key: 'ko', label: '한' },
+  { key: 'en', label: '영' },
+  { key: 'zh', label: '중' },
+  { key: 'ja', label: '일' },
+];
+
+const THEMES = [
+  { key: 'blue', color: 'var(--color-primary-600)' },
+  { key: 'violet', color: 'var(--color-ai-accent)' },
+  { key: 'green', color: 'var(--color-success)' },
+  { key: 'red', color: 'var(--color-error)' },
+];
+
+// 데모 참가업체(라우트 param 미배선 트랙 — V19 시드 'hanbit').
+const DEMO_EXHIBITOR_ID = 'hanbit';
+
+function MiniIcon({ d, size = 16 }: { d: string; size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d={d} />
+    </svg>
+  );
+}
+const D_DRAG = 'M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01';
+const D_EYE = 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z M12 12h.01';
+const D_COPY = 'M9 9h10v10H9z M5 15H4V4h11v1';
+
+const SECTION_NAMES: Record<string, string> = {
+  intro: '부스 소개',
+  products: '제품',
+  gallery: '예상샷 갤러리',
+  contact: '연락처',
+  meeting: '미팅 예약',
+};
+
+export function MicrositeBuilderPage() {
+  const [site, setSite] = useState<Microsite | null>(null);
+  const [sections, setSections] = useState<MicrositeSection[]>([]);
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const [device, setDevice] = useState<'desktop' | 'mobile'>('desktop');
+  const [theme, setTheme] = useState('blue');
+  const [lang, setLang] = useState<Lang>('ko');
+  const [title, setTitle] = useState('');
+  const [meta, setMeta] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const m = await cmsApi.getMicrosite(DEMO_EXHIBITOR_ID);
+        applySite(m);
+      } catch (e) {
+        setError(e instanceof ApiRequestError ? e.message : '마이크로사이트를 불러오지 못했습니다.');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  function applySite(m: Microsite) {
+    setSite(m);
+    const secs = Array.isArray(m.sections) ? m.sections : [];
+    setSections(secs);
+    setActiveSection(secs[0]?.id ?? null);
+    setTheme(m.theme || 'blue');
+    setTitle(m.seoTitle ?? '');
+    setMeta(m.seoMeta ?? '');
+  }
+
+  async function persist(status: 'draft' | 'published') {
+    if (!site) return;
+    setBusy(true);
+    setError(null);
+    setNotice(null);
+    try {
+      const saved = await cmsApi.saveMicrosite(DEMO_EXHIBITOR_ID, {
+        eventId: site.eventId,
+        slug: site.slug,
+        exhibitorName: site.exhibitorName,
+        theme,
+        sections,
+        seoTitle: title,
+        seoMeta: meta,
+        langs: site.langs,
+        status,
+      });
+      applySite(saved);
+      setNotice(status === 'published' ? '마이크로사이트를 배포했습니다.' : '변경 사항을 저장했습니다.');
+    } catch (e) {
+      setError(e instanceof ApiRequestError ? e.message : '저장에 실패했습니다.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const brand = site?.exhibitorName ?? '(주)한빛로보틱스';
+
+  return (
+    <div className="kx-page">
+      <header className="kx-cms__head">
+        <div>
+          <h1 className="kx-cms__title">마이크로사이트 빌더</h1>
+          <p className="kx-cms__subtitle">{brand} · 참가업체 공개 소개 페이지(부스·제품·연락) 편집</p>
+        </div>
+        <div className="kx-cms__head-actions">
+          <Button variant="secondary" leadingIcon={<IconExpand size={16} />} onClick={() => persist('draft')} disabled={busy || loading}>
+            저장
+          </Button>
+          <Button onClick={() => persist('published')} disabled={busy || loading}>
+            배포하기
+          </Button>
+        </div>
+      </header>
+
+      {error && (
+        <div className="kx-cms-alert" role="alert">
+          <IconWarning size={14} /> {error}
+        </div>
+      )}
+      {notice && (
+        <div className="kx-cms-alert kx-cms-alert--ok" role="status">
+          {notice}
+        </div>
+      )}
+
+      <div className="kx-mb-grid">
+        {/* 좌: 섹션 편집 + 테마 */}
+        <section className="kx-card kx-cms-col kx-mb-sections" aria-label="섹션 편집">
+          <div className="kx-cms-sublabel">섹션 편집</div>
+          {loading ? (
+            <div className="kx-cms-empty">불러오는 중…</div>
+          ) : (
+            <ul className="kx-mb-sec">
+              {sections.map((s) => (
+                <li key={s.id}>
+                  <button
+                    className={`kx-mb-sec__item ${s.id === activeSection ? 'is-active' : ''}`}
+                    onClick={() => setActiveSection(s.id)}
+                    aria-current={s.id === activeSection}
+                  >
+                    <span className="kx-mb-sec__label">
+                      <MiniIcon d={D_DRAG} />
+                      {SECTION_NAMES[s.type] ?? s.type}
+                    </span>
+                    <span className="kx-mb-sec__ctrls">
+                      <span
+                        className={`kx-icon-btn ${s.visible ? '' : 'is-off'}`}
+                        title={s.visible ? '표시 중 (클릭하여 숨김)' : '숨김 (클릭하여 표시)'}
+                        role="button"
+                        tabIndex={0}
+                        aria-pressed={s.visible}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSections((prev) =>
+                            prev.map((x) => (x.id === s.id ? { ...x, visible: !x.visible } : x)),
+                          );
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            setSections((prev) =>
+                              prev.map((x) => (x.id === s.id ? { ...x, visible: !x.visible } : x)),
+                            );
+                          }
+                        }}
+                      >
+                        <MiniIcon d={D_EYE} />
+                      </span>
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+          <button
+            className="kx-mb-addbtn"
+            onClick={() =>
+              setSections((prev) => [
+                ...prev,
+                { id: `sec-${Date.now()}`, type: 'intro', visible: true, order: prev.length, payload: {} },
+              ])
+            }
+          >
+            <IconPlus size={16} /> 섹션 추가
+          </button>
+
+          <div className="kx-cms-sublabel" style={{ marginTop: 8 }}>
+            테마 설정
+          </div>
+          <div className="kx-cms-field">
+            <span className="kx-cms-label">기본 색상</span>
+            <div className="kx-mb-swatches">
+              {THEMES.map((t) => (
+                <button
+                  key={t.key}
+                  className={`kx-mb-swatch ${theme === t.key ? 'is-active' : ''}`}
+                  style={{ background: t.color }}
+                  onClick={() => setTheme(t.key)}
+                  title={`테마 ${t.key}`}
+                  aria-label={`테마 ${t.key}`}
+                  aria-pressed={theme === t.key}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* 중: 캔버스 프리뷰 */}
+        <section aria-label="라이브 미리보기">
+          <div className="kx-mb-canvas">
+            <div className="kx-mb-devicebar kx-seg" role="tablist" aria-label="디바이스">
+              <button
+                role="tab"
+                aria-selected={device === 'desktop'}
+                className={`kx-seg__btn ${device === 'desktop' ? 'is-active' : ''}`}
+                onClick={() => setDevice('desktop')}
+              >
+                데스크톱
+              </button>
+              <button
+                role="tab"
+                aria-selected={device === 'mobile'}
+                className={`kx-seg__btn ${device === 'mobile' ? 'is-active' : ''}`}
+                onClick={() => setDevice('mobile')}
+              >
+                모바일
+              </button>
+            </div>
+
+            <div className={`kx-mb-frame ${device === 'mobile' ? 'kx-mb-frame--mobile' : ''}`}>
+              <div className="kx-mb-site__nav">
+                <div className="kx-mb-site__brand">
+                  <span className="kx-mb-site__logo">{brand.replace(/[^가-힣A-Za-z]/g, '').charAt(0) || 'H'}</span>
+                  {brand}
+                </div>
+                <nav className="kx-mb-site__menu">
+                  {sections.filter((s) => s.visible).map((s) => (
+                    <span key={s.id}>{SECTION_NAMES[s.type] ?? s.type}</span>
+                  ))}
+                </nav>
+              </div>
+
+              <section className="kx-mb-hero">
+                <div>
+                  <span className="kx-mb-hero__eyebrow">KINTEX AI EXPO</span>
+                  <h2 className="kx-mb-hero__title">
+                    {(sections.find((s) => s.type === 'intro')?.payload?.headline as string) ??
+                      '지능형 로보틱스의 새로운 지평을 열다'}
+                  </h2>
+                  <p className="kx-mb-hero__desc">
+                    {(sections.find((s) => s.type === 'intro')?.payload?.desc as string) ??
+                      '산업용 로봇부터 서비스 자동화 솔루션까지, 미래 모빌리티 생태계를 경험하세요.'}
+                  </p>
+                  <div className="kx-mb-hero__cta">
+                    <span className="kx-mb-btn kx-mb-btn--solid">미팅 예약하기</span>
+                    <span className="kx-mb-btn kx-mb-btn--ghost">브로슈어 다운로드</span>
+                  </div>
+                </div>
+              </section>
+
+              {sections.some((s) => s.visible && s.type === 'products') && (
+                <section className="kx-mb-section kx-mb-section--alt">
+                  <div className="kx-mb-section__head">
+                    <span className="kx-mb-section__bar" />
+                    <h3 className="kx-mb-section__title">주요 혁신 제품</h3>
+                  </div>
+                  <div className="kx-mb-cards">
+                    <article className="kx-mb-card">
+                      <div className="kx-mb-card__img">
+                        <IconImage size={24} />
+                        <span className="kx-mb-card__tag">NEW</span>
+                      </div>
+                      <div className="kx-mb-card__body">
+                        <div className="kx-mb-card__title">HR-A1 협동로봇</div>
+                        <p className="kx-mb-card__desc">고정밀 센서·AI 비전 시스템 탑재 다목적 협동로봇.</p>
+                      </div>
+                    </article>
+                    <article className="kx-mb-card">
+                      <div className="kx-mb-card__img">
+                        <IconImage size={24} />
+                        <span className="kx-mb-card__tag">POPULAR</span>
+                      </div>
+                      <div className="kx-mb-card__body">
+                        <div className="kx-mb-card__title">ServiBot Elite</div>
+                        <p className="kx-mb-card__desc">전시장·호텔용 지능형 서비스 로봇.</p>
+                      </div>
+                    </article>
+                  </div>
+                </section>
+              )}
+
+              {sections.some((s) => s.visible && s.type === 'gallery') && (
+                <section className="kx-mb-section">
+                  <div className="kx-mb-section__head">
+                    <span className="kx-mb-section__bar" style={{ background: 'var(--color-ai-accent)' }} />
+                    <h3 className="kx-mb-section__title">AI 부스 예상 시뮬레이션</h3>
+                  </div>
+                  <div className="kx-mb-gallery">
+                    <div className="kx-mb-gallery__cell">
+                      <IconGrid size={28} />
+                      <span className="kx-mb-gallery__wm">
+                        <AiLabel>AI 생성 예상</AiLabel>
+                      </span>
+                    </div>
+                    <div className="kx-mb-gallery__cell">
+                      <IconGrid size={28} />
+                      <span className="kx-mb-gallery__wm">
+                        <AiLabel>AI 생성 예상</AiLabel>
+                      </span>
+                    </div>
+                  </div>
+                </section>
+              )}
+            </div>
+          </div>
+        </section>
+
+        {/* 우: 게시·SEO */}
+        <aside className="kx-card kx-mb-side" aria-label="게시 및 SEO">
+          <div className="kx-mb-side__section">
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <span className="kx-cms-sublabel">사이트 상태</span>
+              <span className={`kx-mb-status ${site?.status === 'published' ? '' : 'kx-mb-status--draft'}`}>
+                <span className="kx-mb-status__dot" /> {site?.status === 'published' ? '게시됨' : '초안'}
+              </span>
+            </div>
+            <span className="kx-cms-label">공개 URL</span>
+            <div className="kx-mb-url">
+              <span>{site?.slug ? `${site.slug}.expo.kintex.kr` : '슬러그 미설정'}</span>
+              <button className="kx-icon-btn" title="URL 복사" aria-label="URL 복사"
+                onClick={() => site?.slug && void navigator.clipboard?.writeText(`${site.slug}.expo.kintex.kr`)}>
+                <MiniIcon d={D_COPY} />
+              </button>
+            </div>
+          </div>
+
+          <div className="kx-mb-side__section">
+            <span className="kx-cms-sublabel">SEO · 검색 엔진</span>
+            <label className="kx-cms-field">
+              <span className="kx-cms-label">페이지 타이틀</span>
+              <input className="kx-cms-input" value={title} onChange={(e) => setTitle(e.target.value)} />
+            </label>
+            <label className="kx-cms-field">
+              <span className="kx-cms-label">메타 설명</span>
+              <textarea className="kx-cms-textarea" value={meta} onChange={(e) => setMeta(e.target.value)} />
+            </label>
+          </div>
+
+          <div className="kx-mb-side__section">
+            <span className="kx-cms-sublabel">언어 설정</span>
+            <div className="kx-seg" role="tablist" aria-label="언어">
+              {LANGS.map((l) => (
+                <button
+                  key={l.key}
+                  role="tab"
+                  aria-selected={lang === l.key}
+                  className={`kx-seg__btn ${lang === l.key ? 'is-active' : ''}`}
+                  onClick={() => setLang(l.key)}
+                >
+                  {l.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <Button block leadingIcon={<IconDownload size={16} />} style={{ marginTop: 'auto' }}
+            onClick={() => persist('published')} disabled={busy || loading}>
+            전시 라이브 적용
+          </Button>
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/cms/MultilingualCmsPage.tsx b/src/frontend/src/screens/cms/MultilingualCmsPage.tsx
new file mode 100644
index 0000000..bfbc98f
--- /dev/null
+++ b/src/frontend/src/screens/cms/MultilingualCmsPage.tsx
@@ -0,0 +1,337 @@
+/*
+ * SCR-37 다국어 콘텐츠 관리 [M17 / F069]. 참조: design.md §3 SCR-37.
+ * 상단: 언어 커버리지(한/영/중/일) · 좌: 번역 매트릭스(콘텐츠 × 대상언어 상태) · 우: 병렬 편집(원문 KO ↔ 번역) + 검수완료.
+ * ★실 API 전환: GET /api/cms/contents + GET/PUT /api/cms/contents/{id}/translations. 언어별 upsert·검수완료 실동작.
+ * AI 자동 번역/재생성은 미배선(AiTextRouter 연동 예정) → disabled + 툴팁.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Button } from '../../components/ui/Button';
+import { ApiRequestError } from '../../api/client';
+import { cmsApi, type CmsContent, type CmsTranslation, type Lang, type TransStatus } from './cmsApi';
+import { IconSpark, IconWarning, IconClose } from '../../components/ui/icons';
+import './cms.css';
+
+type Target = 'en' | 'zh' | 'ja';
+const TARGETS: { key: Target; label: string }[] = [
+  { key: 'en', label: 'English (EN)' },
+  { key: 'zh', label: 'Chinese (ZH)' },
+  { key: 'ja', label: 'Japanese (JA)' },
+];
+const COV_LANGS: { key: Lang; label: string }[] = [
+  { key: 'ko', label: '한국어 (KO)' },
+  { key: 'en', label: 'English (EN)' },
+  { key: 'zh', label: 'Chinese (ZH)' },
+  { key: 'ja', label: 'Japanese (JA)' },
+];
+
+const STATUS_META: Record<TransStatus, { label: string; cls: string }> = {
+  none: { label: '미번역', cls: 'kx-cms-pill--none' },
+  ai: { label: 'AI 초벌', cls: 'kx-cms-pill--ai' },
+  reviewed: { label: '검수완료', cls: 'kx-cms-pill--published' },
+};
+
+const GLOSSARY = [
+  { ko: '홀', en: 'Hall' },
+  { ko: '안내', en: 'Guide' },
+  { ko: '부스', en: 'Booth' },
+];
+
+const AI_TRANSLATE_HINT = 'AI(Claude)로 원문(KO)을 대상 언어로 번역합니다. 초벌은 사람 검수를 거쳐 확정하세요.';
+
+type TransMap = Record<string, Partial<Record<Lang, CmsTranslation>>>;
+
+function fmtRel(iso: string | null): string {
+  if (!iso) return '-';
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? '-' : d.toLocaleDateString('ko-KR', { dateStyle: 'medium' });
+}
+
+export function MultilingualCmsPage() {
+  const [target, setTarget] = useState<Target>('en');
+  const [contents, setContents] = useState<CmsContent[]>([]);
+  const [transMap, setTransMap] = useState<TransMap>({});
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [draftText, setDraftText] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await cmsApi.listContents({ size: 100 });
+        const list = res.items;
+        const pairs = await Promise.all(
+          list.map(async (c) => {
+            try {
+              const trs = await cmsApi.getTranslations(c.id);
+              const byLang: Partial<Record<Lang, CmsTranslation>> = {};
+              trs.forEach((t) => (byLang[t.lang] = t));
+              return [c.id, byLang] as const;
+            } catch {
+              return [c.id, {}] as const;
+            }
+          }),
+        );
+        if (cancelled) return;
+        const map: TransMap = {};
+        pairs.forEach(([id, byLang]) => (map[id] = byLang));
+        setContents(list);
+        setTransMap(map);
+        setSelectedId(list[0]?.id ?? null);
+      } catch (e) {
+        if (!cancelled) setError(e instanceof ApiRequestError ? e.message : '번역 데이터를 불러오지 못했습니다.');
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const selected = useMemo(
+    () => contents.find((c) => c.id === selectedId) ?? null,
+    [contents, selectedId],
+  );
+
+  const coverage = useMemo(() => {
+    const total = contents.length || 1;
+    return COV_LANGS.map((l) => {
+      const covered = contents.filter((c) => {
+        const t = transMap[c.id]?.[l.key];
+        return t && t.transStatus !== 'none' && !!(t.title || t.body);
+      }).length;
+      return { label: l.label, pct: Math.round((covered / total) * 100) };
+    });
+  }, [contents, transMap]);
+
+  // 선택/대상 변경 시 편집 텍스트 동기화
+  useEffect(() => {
+    if (!selected) {
+      setDraftText('');
+      return;
+    }
+    setDraftText(transMap[selected.id]?.[target]?.title ?? '');
+  }, [selected, target, transMap]);
+
+  /** AI 자동 번역/재생성(F100 배선) — 원문(KO)→target 초벌(trans_status='ai'). 실패 시 503 메시지 표기(환각 없이 저장 안 함). */
+  async function aiTranslate() {
+    if (!selected || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const tr = await cmsApi.aiTranslate(selected.id, target);
+      setTransMap((prev) => ({
+        ...prev,
+        [selected.id]: { ...(prev[selected.id] ?? {}), [tr.lang]: tr },
+      }));
+      setDraftText(tr.title ?? '');
+    } catch (e) {
+      setError(e instanceof ApiRequestError ? e.message : 'AI 자동 번역에 실패했습니다.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function save(status: TransStatus) {
+    if (!selected) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const rows = await cmsApi.saveTranslation(selected.id, {
+        lang: target,
+        title: draftText,
+        body: transMap[selected.id]?.[target]?.body ?? '',
+        transStatus: status,
+      });
+      const byLang: Partial<Record<Lang, CmsTranslation>> = {};
+      rows.forEach((t) => (byLang[t.lang] = t));
+      setTransMap((prev) => ({ ...prev, [selected.id]: byLang }));
+    } catch (e) {
+      setError(e instanceof ApiRequestError ? e.message : '번역 저장에 실패했습니다.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="kx-page">
+      <header className="kx-cms__head">
+        <div>
+          <h1 className="kx-cms__title">다국어 콘텐츠 관리</h1>
+          <p className="kx-cms__subtitle">번역 매트릭스 · 언어별 저장 → 사람 검수 워크플로 · 용어집·톤 가이드</p>
+        </div>
+      </header>
+
+      {error && (
+        <div className="kx-cms-alert" role="alert">
+          <IconWarning size={14} /> {error}
+        </div>
+      )}
+
+      {/* 커버리지 요약 */}
+      <div className="kx-i18n-cov" aria-label="언어 커버리지">
+        {coverage.map((c) => (
+          <div className="kx-i18n-covcard" key={c.label}>
+            <div className="kx-i18n-covcard__top">
+              <span>{c.label}</span>
+              <span className="kx-i18n-covcard__pct">{c.pct}%</span>
+            </div>
+            <div className="kx-i18n-bar">
+              <span className="kx-i18n-bar__fill" style={{ width: `${c.pct}%` }} />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="kx-i18n-main">
+        {/* 좌: 번역 매트릭스 */}
+        <section className="kx-card" aria-label="번역 매트릭스">
+          <div className="kx-i18n-toolbar">
+            <div className="kx-seg" role="tablist" aria-label="대상 언어">
+              {TARGETS.map((t) => (
+                <button
+                  key={t.key}
+                  role="tab"
+                  aria-selected={target === t.key}
+                  className={`kx-seg__btn ${target === t.key ? 'is-active' : ''}`}
+                  onClick={() => setTarget(t.key)}
+                >
+                  {t.label}
+                </button>
+              ))}
+            </div>
+            <Button
+              variant="ai"
+              leadingIcon={<IconSpark size={16} />}
+              onClick={aiTranslate}
+              disabled={!selected || busy}
+              title={AI_TRANSLATE_HINT}
+            >
+              {busy ? 'AI 번역 중…' : 'AI 자동 번역'}
+            </Button>
+          </div>
+
+          <div className="kx-table-scroll">
+            {loading ? (
+              <div className="kx-cms-empty">불러오는 중…</div>
+            ) : contents.length === 0 ? (
+              <div className="kx-cms-empty">콘텐츠가 없습니다.</div>
+            ) : (
+              <table className="kx-i18n-table">
+                <thead>
+                  <tr>
+                    <th style={{ width: '30%' }}>콘텐츠 / 원문(KO)</th>
+                    <th>번역본 ({target.toUpperCase()})</th>
+                    <th className="kx-i18n-cell--c" style={{ width: 96 }}>상태</th>
+                    <th className="kx-i18n-cell--r" style={{ width: 96 }}>최근 업데이트</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {contents.map((c) => {
+                    const t = transMap[c.id]?.[target];
+                    const st = t?.transStatus ?? 'none';
+                    const m = STATUS_META[st];
+                    return (
+                      <tr
+                        key={c.id}
+                        className={c.id === selectedId ? 'is-active' : ''}
+                        onClick={() => setSelectedId(c.id)}
+                      >
+                        <td>
+                          <div className="kx-i18n-row__key">{c.title}</div>
+                          <div className="kx-i18n-row__id">{c.id}</div>
+                        </td>
+                        <td className={t?.title ? '' : 'kx-i18n-row__trans--empty'}>
+                          {t?.title || '번역 대기 중…'}
+                        </td>
+                        <td className="kx-i18n-cell--c">
+                          <span className={`kx-cms-pill ${m.cls}`}>{m.label}</span>
+                        </td>
+                        <td className="kx-i18n-cell--r">{fmtRel(t?.updatedAt ?? null)}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </section>
+
+        {/* 우: 병렬 편집기 */}
+        <aside className="kx-card kx-i18n-editor" aria-label="번역 편집">
+          <div className="kx-i18n-editor__head">
+            <span className="kx-cms-sublabel">번역 편집: 원문(KO) ↔ 번역({target.toUpperCase()})</span>
+            <button className="kx-icon-btn" title="닫기" aria-label="편집 닫기" onClick={() => setSelectedId(null)}>
+              <IconClose size={16} />
+            </button>
+          </div>
+
+          {!selected ? (
+            <div className="kx-cms-empty">좌측에서 콘텐츠를 선택하세요.</div>
+          ) : (
+            <>
+              <div className="kx-cms-field">
+                <span className="kx-cms-label">Content ID</span>
+                <div className="kx-i18n-row__id" style={{ color: 'var(--color-primary-700)', fontWeight: 700 }}>
+                  {selected.id}
+                </div>
+              </div>
+
+              <div className="kx-cms-field">
+                <span className="kx-cms-label">원문 (KO)</span>
+                <div className="kx-i18n-src">{transMap[selected.id]?.ko?.title || selected.title}</div>
+              </div>
+
+              <div className="kx-cms-field">
+                <span className="kx-cms-label">번역 ({target.toUpperCase()})</span>
+                <textarea
+                  className="kx-cms-textarea kx-i18n-editor__ta"
+                  value={draftText}
+                  onChange={(e) => setDraftText(e.target.value)}
+                  placeholder="번역을 입력하세요"
+                />
+                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                  <Button
+                    variant="ghost"
+                    leadingIcon={<IconSpark size={14} />}
+                    onClick={aiTranslate}
+                    disabled={busy}
+                    title={AI_TRANSLATE_HINT}
+                  >
+                    AI 재생성
+                  </Button>
+                </div>
+              </div>
+
+              <div className="kx-cms-field">
+                <span className="kx-cms-sublabel">Glossary</span>
+                <div className="kx-i18n-glossary">
+                  {GLOSSARY.map((g) => (
+                    <div className="kx-i18n-glossary__row" key={g.ko}>
+                      <b>{g.ko}</b>
+                      <span>→ {g.en}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="kx-i18n-editor__actions">
+                <Button variant="secondary" onClick={() => save('ai')} disabled={busy}>
+                  임시 저장
+                </Button>
+                <Button onClick={() => save('reviewed')} disabled={busy}>
+                  적용 · 검수완료
+                </Button>
+              </div>
+            </>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/cms/cms.css b/src/frontend/src/screens/cms/cms.css
new file mode 100644
index 0000000..a7361fa
--- /dev/null
+++ b/src/frontend/src/screens/cms/cms.css
@@ -0,0 +1,1184 @@
+/*
+ * M17 CMS 화면(SCR-35 게시 워크플로 · SCR-36 마이크로사이트 편집기 · SCR-37 다국어 관리) 공유 스타일.
+ * design.md §1 토큰(tokens.css)만 참조. shared.css 프리미티브(kx-page·kx-card·kx-seg·kx-select·kx-kpi·kx-barlist) 위에 얹는다.
+ * M17 백엔드 미구현 → 전 화면 로컬 샘플 데이터 데모. 존재하지 않는 API 호출 없음.
+ */
+@import '../shared.css';
+
+/* ── 페이지 헤더(공통) ── */
+.kx-cms__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-cms__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-cms__subtitle {
+  margin-top: 2px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kx-cms__head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+/* 샘플 데이터 배지 — M17 백엔드 준비 전 시연 표기 */
+.kx-sample-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-warning);
+  background: #fff4e5;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+}
+
+/* ── 공통 프리미티브(cms 자기완결: pill·field·table·toggle) ── */
+.kx-cms-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.kx-cms-pill--draft {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+.kx-cms-pill--review {
+  background: var(--color-violation-warn-bg);
+  color: var(--color-violation-warn-text);
+}
+.kx-cms-pill--approved {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kx-cms-pill--published {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kx-cms-pill--ai {
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent);
+}
+.kx-cms-pill--none {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-500);
+}
+
+.kx-cms-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.kx-cms-label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-cms-input,
+.kx-cms-textarea {
+  padding: 8px var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  font-family: inherit;
+  width: 100%;
+}
+.kx-cms-textarea {
+  min-height: 88px;
+  line-height: var(--lh-body);
+  resize: vertical;
+}
+.kx-cms-input:focus,
+.kx-cms-textarea:focus {
+  outline: 2px solid var(--color-primary-100);
+  border-color: var(--color-primary-600);
+}
+
+/* 토글 스위치 */
+.kx-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  cursor: pointer;
+  width: 100%;
+  justify-content: space-between;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-toggle input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.kx-toggle__track {
+  position: relative;
+  flex-shrink: 0;
+  width: 40px;
+  height: 24px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-200);
+  transition: background 0.15s;
+}
+.kx-toggle__track::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-white);
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
+  transition: transform 0.15s;
+}
+.kx-toggle input:checked + .kx-toggle__track {
+  background: var(--color-primary-600);
+}
+.kx-toggle input:checked + .kx-toggle__track::after {
+  transform: translateX(16px);
+}
+.kx-toggle input:focus-visible + .kx-toggle__track {
+  outline: 2px solid var(--color-primary-100);
+  outline-offset: 2px;
+}
+
+/* 아이콘 버튼(툴바·리스트 액션) */
+.kx-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kx-icon-btn:hover {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-900);
+}
+.kx-icon-btn--danger:hover {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+
+/* ══════════════════════ SCR-35 게시 워크플로 ══════════════════════ */
+.kx-cms-grid {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 320px);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1200px) {
+  .kx-cms-grid {
+    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
+  }
+  .kx-cms-grid > .kx-cms-flow {
+    grid-column: 1 / -1;
+  }
+}
+@media (max-width: 820px) {
+  .kx-cms-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.kx-cms-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+/* 콘텐츠 목록 */
+.kx-cms-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.kx-cms-list__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+}
+.kx-cms-list__item:hover {
+  background: var(--color-neutral-050);
+}
+.kx-cms-list__item.is-active {
+  background: var(--color-primary-050);
+  border-color: var(--color-primary-100);
+}
+.kx-cms-list__label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  min-width: 0;
+}
+.kx-cms-list__label svg {
+  color: var(--color-neutral-500);
+  flex-shrink: 0;
+}
+.kx-cms-list__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 에디터 */
+.kx-cms-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-cms-title-input {
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid var(--color-neutral-200);
+  background: transparent;
+  padding: 0 0 8px;
+  font-size: var(--fs-display);
+  line-height: var(--lh-display);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  font-family: inherit;
+}
+.kx-cms-title-input:focus {
+  outline: none;
+  border-bottom-color: var(--color-primary-600);
+}
+.kx-cms-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-050);
+}
+.kx-cms-toolbar__divider {
+  width: 1px;
+  height: 18px;
+  background: var(--color-neutral-200);
+  margin: 0 4px;
+}
+
+/* 미디어 스트립 */
+.kx-cms-media {
+  display: flex;
+  gap: var(--space-2);
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+.kx-cms-media__thumb {
+  flex-shrink: 0;
+  width: 128px;
+  height: 88px;
+  border-radius: var(--radius-sm);
+  border: var(--border-card);
+  background: var(--color-neutral-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-neutral-500);
+  overflow: hidden;
+}
+.kx-cms-media__thumb--ph {
+  background: repeating-linear-gradient(
+    135deg,
+    var(--color-neutral-100),
+    var(--color-neutral-100) 8px,
+    var(--color-neutral-050) 8px,
+    var(--color-neutral-050) 16px
+  );
+  color: var(--color-primary-600);
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+  padding: 6px;
+}
+.kx-cms-media__add {
+  flex-shrink: 0;
+  width: 88px;
+  height: 88px;
+  border-radius: var(--radius-sm);
+  border: 1px dashed var(--color-neutral-200);
+  background: transparent;
+  cursor: pointer;
+  color: var(--color-neutral-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kx-cms-media__add:hover {
+  background: var(--color-neutral-050);
+  color: var(--color-primary-600);
+}
+
+/* 콘텐츠 블록 */
+.kx-cms-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-cms-block {
+  position: relative;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-3);
+}
+.kx-cms-block__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-2);
+}
+.kx-cms-block__kind {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-cms-block__body {
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  color: var(--color-neutral-700);
+}
+.kx-cms-block__img {
+  height: 180px;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, var(--color-primary-700), var(--color-canvas-bg));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: var(--fs-caption);
+}
+.kx-cms-block--ai {
+  border: 1px solid var(--color-ai-accent);
+  border-left: var(--accent-ai);
+  background: var(--color-ai-surface);
+}
+.kx-cms-block--ai .kx-cms-block__body {
+  color: var(--color-neutral-900);
+  font-style: italic;
+}
+
+/* 예약 게시 */
+.kx-cms-sched {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-050);
+  color: var(--color-primary-700);
+  font-weight: 600;
+  font-size: var(--fs-body);
+  flex-wrap: wrap;
+}
+.kx-cms-sched svg {
+  color: var(--color-primary-600);
+}
+
+/* 워크플로 패널 */
+.kx-cms-flow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  position: sticky;
+  top: 0;
+}
+.kx-cms-flow__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-cms-flow__label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-neutral-500);
+}
+.kx-cms-stepper {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-cms-step {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  padding: 4px 0;
+}
+.kx-cms-step__dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--color-neutral-200);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kx-cms-step.is-done {
+  color: var(--color-neutral-900);
+}
+.kx-cms-step.is-done .kx-cms-step__dot {
+  background: var(--color-success);
+  border-color: var(--color-success);
+  color: var(--color-white);
+}
+.kx-cms-step.is-current {
+  color: var(--color-primary-700);
+  font-weight: 700;
+}
+.kx-cms-step.is-current .kx-cms-step__dot {
+  border-color: var(--color-primary-600);
+  background: var(--color-primary-050);
+}
+
+/* 버전 히스토리 */
+.kx-cms-ver {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-cms-ver__item {
+  padding: 8px 10px;
+  border-left: 4px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-050);
+}
+.kx-cms-ver__item--current {
+  border-left-color: var(--color-primary-600);
+  background: var(--color-primary-050);
+}
+.kx-cms-ver__item--published {
+  border-left-color: var(--color-success);
+}
+.kx-cms-ver__v {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-cms-ver__meta {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-cms-schedcard {
+  padding: var(--space-3);
+  border: 1px solid var(--color-primary-100);
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-050);
+}
+.kx-cms-schedcard__t {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-primary-700);
+  margin-bottom: 4px;
+}
+.kx-cms-flow__toggles {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-top: var(--space-3);
+  border-top: var(--border-card);
+}
+
+/* ══════════════════════ SCR-36 마이크로사이트 편집기 ══════════════════════ */
+.kx-mb-grid {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(240px, 300px);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1200px) {
+  .kx-mb-grid {
+    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
+  }
+  .kx-mb-grid > .kx-mb-sections {
+    grid-column: 1 / -1;
+  }
+}
+@media (max-width: 820px) {
+  .kx-mb-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.kx-mb-sec {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.kx-mb-sec__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+}
+.kx-mb-sec__item:hover {
+  background: var(--color-neutral-050);
+}
+.kx-mb-sec__item.is-active {
+  background: var(--color-primary-050);
+  border-color: var(--color-primary-100);
+}
+.kx-mb-sec__label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-mb-sec__label svg {
+  color: var(--color-neutral-500);
+  cursor: grab;
+}
+.kx-mb-sec__ctrls {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.kx-mb-addbtn {
+  margin-top: var(--space-2);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px;
+  border: 1px dashed var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-neutral-500);
+  font-size: var(--fs-body);
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+}
+.kx-mb-addbtn:hover {
+  background: var(--color-neutral-050);
+  color: var(--color-primary-600);
+}
+
+/* 테마 */
+.kx-mb-swatches {
+  display: flex;
+  gap: var(--space-3);
+}
+.kx-mb-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid var(--color-white);
+  box-shadow: 0 0 0 1px var(--color-neutral-200);
+  cursor: pointer;
+  padding: 0;
+}
+.kx-mb-swatch.is-active {
+  box-shadow: 0 0 0 2px var(--color-primary-600);
+}
+
+/* 캔버스 */
+.kx-mb-canvas {
+  background-color: var(--color-neutral-050);
+  background-image: radial-gradient(var(--color-neutral-200) 0.5px, transparent 0.5px);
+  background-size: 20px 20px;
+  border-radius: var(--radius-lg);
+  border: var(--border-card);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  align-items: center;
+}
+.kx-mb-devicebar {
+  align-self: center;
+}
+.kx-mb-frame {
+  width: 100%;
+  max-width: 880px;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-level2);
+}
+.kx-mb-frame--mobile {
+  max-width: 400px;
+}
+
+/* 마이크로사이트 프리뷰 내부 */
+.kx-mb-site__nav {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-5);
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+.kx-mb-site__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-weight: 700;
+  color: var(--color-primary-700);
+}
+.kx-mb-site__logo {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-style: italic;
+}
+.kx-mb-site__menu {
+  display: flex;
+  gap: var(--space-4);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-mb-hero {
+  position: relative;
+  min-height: 320px;
+  display: flex;
+  align-items: center;
+  padding: var(--space-6);
+  color: var(--color-white);
+  background:
+    linear-gradient(90deg, rgba(0, 76, 134, 0.92), rgba(0, 76, 134, 0.35)),
+    linear-gradient(135deg, var(--color-primary-700), var(--color-canvas-bg));
+}
+.kx-mb-hero__eyebrow {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  font-size: 11px;
+  font-weight: 700;
+  margin-bottom: var(--space-3);
+}
+.kx-mb-hero__title {
+  font-size: 30px;
+  line-height: 1.2;
+  font-weight: 800;
+  margin-bottom: var(--space-3);
+  max-width: 30ch;
+}
+.kx-mb-hero__desc {
+  font-size: var(--fs-body);
+  color: rgba(255, 255, 255, 0.82);
+  max-width: 44ch;
+  margin-bottom: var(--space-4);
+}
+.kx-mb-hero__cta {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-mb-btn {
+  padding: 10px 20px;
+  border-radius: var(--radius-sm);
+  font-weight: 700;
+  font-size: var(--fs-body);
+  cursor: default;
+  border: 1px solid transparent;
+}
+.kx-mb-btn--solid {
+  background: var(--color-white);
+  color: var(--color-primary-700);
+}
+.kx-mb-btn--ghost {
+  background: transparent;
+  color: var(--color-white);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+.kx-mb-section {
+  padding: var(--space-6);
+}
+.kx-mb-section--alt {
+  background: var(--color-neutral-050);
+}
+.kx-mb-section__head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+}
+.kx-mb-section__bar {
+  width: 4px;
+  height: 22px;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-600);
+}
+.kx-mb-section__title {
+  font-size: var(--fs-h2);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-mb-cards {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+.kx-mb-card {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-white);
+}
+.kx-mb-card__img {
+  height: 140px;
+  position: relative;
+  background: linear-gradient(135deg, var(--color-primary-100), var(--color-neutral-100));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-neutral-500);
+}
+.kx-mb-card__tag {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  font-size: 10px;
+  font-weight: 700;
+}
+.kx-mb-card__body {
+  padding: var(--space-3);
+  border-left: 4px solid var(--color-primary-600);
+}
+.kx-mb-card__title {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin-bottom: 4px;
+}
+.kx-mb-card__desc {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-mb-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+.kx-mb-gallery__cell {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  border: var(--border-card);
+  background: linear-gradient(135deg, var(--color-ai-accent), var(--color-primary-700));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.5);
+}
+.kx-mb-gallery__wm {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+}
+
+/* 우측 게시 패널 */
+.kx-mb-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  position: sticky;
+  top: 0;
+}
+.kx-mb-side__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-mb-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  background: #e6f4ee;
+  color: var(--color-success);
+  font-size: 11px;
+  font-weight: 700;
+}
+.kx-mb-status__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-success);
+}
+.kx-mb-url {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 8px 10px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-050);
+}
+.kx-mb-url span {
+  flex: 1;
+  font-size: var(--fs-caption);
+  color: var(--color-primary-700);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kx-mb-activity {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-mb-activity__row {
+  display: flex;
+  gap: var(--space-2);
+}
+.kx-mb-activity__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-primary-600);
+  margin-top: 5px;
+  flex-shrink: 0;
+}
+.kx-mb-activity__dot--muted {
+  background: var(--color-neutral-200);
+}
+.kx-mb-activity__t {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-mb-activity__m {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+
+/* ══════════════════════ SCR-37 다국어 콘텐츠 관리 ══════════════════════ */
+.kx-i18n-cov {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+@media (max-width: 900px) {
+  .kx-i18n-cov {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.kx-i18n-covcard {
+  border: var(--border-card);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-i18n-covcard__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-i18n-covcard__pct {
+  color: var(--color-primary-700);
+}
+.kx-i18n-bar {
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-100);
+  overflow: hidden;
+}
+.kx-i18n-bar__fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-600);
+  transition: width 0.6s ease;
+}
+
+.kx-i18n-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1080px) {
+  .kx-i18n-main {
+    grid-template-columns: 1fr;
+  }
+}
+
+.kx-i18n-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-3);
+}
+
+/* 매트릭스 테이블 */
+.kx-i18n-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-body);
+}
+.kx-i18n-table thead th {
+  text-align: left;
+  padding: 10px 12px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-050);
+  border-bottom: 2px solid var(--color-neutral-200);
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+.kx-i18n-table tbody td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-neutral-200);
+  color: var(--color-neutral-700);
+  vertical-align: top;
+}
+.kx-i18n-table tbody tr {
+  cursor: pointer;
+}
+.kx-i18n-table tbody tr:hover {
+  background: var(--color-neutral-050);
+}
+.kx-i18n-table tbody tr.is-active {
+  background: var(--color-primary-050);
+}
+.kx-i18n-row__key {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-i18n-row__id {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  font-family: var(--font-mono);
+}
+.kx-i18n-row__trans--empty {
+  color: var(--color-neutral-500);
+  font-style: italic;
+  opacity: 0.7;
+}
+.kx-i18n-cell--c {
+  text-align: center;
+}
+.kx-i18n-cell--r {
+  text-align: right;
+  color: var(--color-neutral-500);
+  white-space: nowrap;
+}
+
+/* 우측 편집기 */
+.kx-i18n-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  position: sticky;
+  top: 0;
+}
+.kx-i18n-editor__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.kx-i18n-src {
+  padding: var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-050);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-i18n-editor__ta {
+  border: 2px solid var(--color-ai-accent);
+}
+.kx-i18n-glossary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-i18n-glossary__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-050);
+  font-size: var(--fs-caption);
+}
+.kx-i18n-glossary__row b {
+  color: var(--color-neutral-900);
+}
+.kx-i18n-glossary__row span {
+  color: var(--color-neutral-500);
+}
+.kx-i18n-tone {
+  padding: var(--space-3);
+  border: 1px solid var(--color-ai-accent);
+  border-radius: var(--radius-sm);
+  background: var(--color-ai-surface);
+}
+.kx-i18n-tone__t {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-ai-accent);
+  margin-bottom: 4px;
+}
+.kx-i18n-tone__p {
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--color-neutral-700);
+  font-style: italic;
+}
+.kx-i18n-editor__actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2);
+}
+
+/* 섹션 라벨(공통 소제목) */
+.kx-cms-sublabel {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-neutral-500);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* ── M17 실 API 전환 보강(상태/알림/빈상태/미배선 힌트) ───────────────────── */
+.kx-cms-alert {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 12px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--color-error) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
+  color: var(--color-error);
+  font-size: 13px;
+}
+.kx-cms-alert--ok {
+  background: color-mix(in srgb, var(--color-success) 12%, transparent);
+  border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
+  color: var(--color-success);
+}
+.kx-cms-empty {
+  padding: 28px 16px;
+  text-align: center;
+  color: var(--color-neutral-500);
+  font-size: 13px;
+}
+.kx-cms-terminal {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
+  color: var(--color-success);
+  font-size: 13px;
+  font-weight: 600;
+}
+.kx-cms-disabled-hint {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  border: 1px dashed var(--color-neutral-300);
+  border-radius: 6px;
+  padding: 1px 6px;
+  cursor: help;
+}
+.kx-icon-btn.is-off {
+  opacity: 0.4;
+}
+.kx-mb-status--draft {
+  color: var(--color-neutral-500);
+}
+.kx-mb-status--draft .kx-mb-status__dot {
+  background: var(--color-neutral-400);
+}
diff --git a/src/frontend/src/screens/cms/cmsApi.ts b/src/frontend/src/screens/cms/cmsApi.ts
new file mode 100644
index 0000000..7ceb390
--- /dev/null
+++ b/src/frontend/src/screens/cms/cmsApi.ts
@@ -0,0 +1,174 @@
+/*
+ * M17 CMS 실배선 API 계약(SCR-35·36·37). 공용 클라이언트(../../api/client)만 사용 — client/endpoints/types 무수정.
+ * 정본: 백엔드 컨트롤러
+ *   - GET  /api/cms/contents                          → PageResponse<CmsContent>
+ *   - POST /api/cms/contents                          → CmsContent(신규 초안)
+ *   - PATCH /api/cms/contents/{id}/status?value=      → CmsContent(전이·역전이 400)
+ *   - GET/PUT /api/cms/contents/{id}/translations     → CmsTranslation[]
+ *   - GET/PUT /api/exhibitors/{exhibitorId}/microsite → Microsite
+ *   - GET  /api/public/microsites/{exhibitorId}       → Microsite(공개·무인증)
+ */
+import { api } from '../../api/client';
+import type { PageResponse } from '../../api/types';
+
+export type FlowStatus = 'draft' | 'review' | 'approved' | 'published';
+export type TransStatus = 'none' | 'ai' | 'reviewed';
+export type Lang = 'ko' | 'en' | 'zh' | 'ja';
+
+export interface CmsContent {
+  id: string;
+  eventId: string | null;
+  contentType: string | null;
+  title: string;
+  body: string | null;
+  status: FlowStatus;
+  lang: string | null;
+  scheduledAt: string | null;
+  signage: boolean;
+  mailing: boolean;
+  authorName: string | null;
+  publishedAt: string | null;
+  createdAt: string | null;
+  updatedAt: string | null;
+}
+
+export interface CmsTranslation {
+  contentId: string;
+  lang: Lang;
+  title: string | null;
+  body: string | null;
+  transStatus: TransStatus;
+  updatedAt: string | null;
+}
+
+export interface CmsContentVersion {
+  id: string;
+  contentId: string;
+  versionNo: number;
+  title: string | null;
+  body: string | null;
+  status: FlowStatus;
+  authorName: string | null;
+  note: string | null;
+  createdAt: string | null;
+}
+
+export interface CmsMedia {
+  id: string;
+  eventId: string | null;
+  fileName: string;
+  url: string;
+  contentType: string | null;
+  sizeBytes: number | null;
+  altText: string | null;
+  uploaderName: string | null;
+  createdAt: string | null;
+}
+
+export interface ContentUpdateRequest {
+  title: string;
+  body?: string | null;
+  scheduledAt?: string | null;
+  signage?: boolean | null;
+  mailing?: boolean | null;
+}
+
+export interface MicrositeSection {
+  id: string;
+  type: string;
+  visible: boolean;
+  order?: number;
+  payload?: Record<string, unknown>;
+}
+
+export interface Microsite {
+  exhibitorId: string;
+  eventId: string | null;
+  slug: string | null;
+  exhibitorName: string | null;
+  theme: string;
+  sections: MicrositeSection[];
+  seoTitle: string | null;
+  seoMeta: string | null;
+  langs: string | null;
+  status: 'draft' | 'published';
+  publishedAt: string | null;
+  updatedAt: string | null;
+}
+
+export interface ContentCreateRequest {
+  eventId?: string | null;
+  contentType?: string;
+  title: string;
+  body?: string;
+  lang?: string;
+}
+
+export interface TranslationSaveRequest {
+  lang: Lang;
+  title?: string | null;
+  body?: string | null;
+  transStatus?: TransStatus;
+}
+
+export interface MicrositeSaveRequest {
+  eventId?: string | null;
+  slug?: string | null;
+  exhibitorName?: string | null;
+  theme?: string;
+  sections?: MicrositeSection[];
+  seoTitle?: string | null;
+  seoMeta?: string | null;
+  langs?: string | null;
+  status?: 'draft' | 'published';
+}
+
+export const cmsApi = {
+  listContents: (p: { status?: string; type?: string; keyword?: string; page?: number; size?: number } = {}) => {
+    const qs = new URLSearchParams();
+    if (p.status) qs.set('status', p.status);
+    if (p.type) qs.set('type', p.type);
+    if (p.keyword) qs.set('keyword', p.keyword);
+    qs.set('page', String(p.page ?? 0));
+    qs.set('size', String(p.size ?? 50));
+    return api.get<PageResponse<CmsContent>>(`/api/cms/contents?${qs.toString()}`);
+  },
+  createContent: (body: ContentCreateRequest) => api.post<CmsContent>('/api/cms/contents', body),
+  getContent: (id: string) => api.get<CmsContent>(`/api/cms/contents/${encodeURIComponent(id)}`),
+  updateContent: (id: string, body: ContentUpdateRequest) =>
+    api.put<CmsContent>(`/api/cms/contents/${encodeURIComponent(id)}`, body),
+  transition: (id: string, value: FlowStatus) =>
+    api.patch<CmsContent>(`/api/cms/contents/${encodeURIComponent(id)}/status?value=${value}`),
+  getVersions: (id: string) =>
+    api.get<CmsContentVersion[]>(`/api/cms/contents/${encodeURIComponent(id)}/versions`),
+  rollback: (id: string, versionNo: number) =>
+    api.post<CmsContent>(`/api/cms/contents/${encodeURIComponent(id)}/rollback?versionNo=${versionNo}`),
+  getTranslations: (id: string) =>
+    api.get<CmsTranslation[]>(`/api/cms/contents/${encodeURIComponent(id)}/translations`),
+  saveTranslation: (id: string, body: TranslationSaveRequest) =>
+    api.put<CmsTranslation[]>(`/api/cms/contents/${encodeURIComponent(id)}/translations`, body),
+  /** AI 자동 번역(초벌) — 백엔드 미배선 시 501. 프론트는 degraded("준비 중")로 처리. */
+  aiTranslate: (id: string, lang: Lang) =>
+    api.post<CmsTranslation>(
+      `/api/cms/contents/${encodeURIComponent(id)}/translations/ai?lang=${lang}`,
+    ),
+  // ── 미디어 라이브러리 ──
+  listMedia: (limit = 60) => api.get<CmsMedia[]>(`/api/cms/media?limit=${limit}`),
+  uploadMedia: (file: File, altText?: string) => {
+    const form = new FormData();
+    form.append('file', file);
+    if (altText) form.append('altText', altText);
+    return api.postForm<CmsMedia>('/api/cms/media', form);
+  },
+  // ── 공개 조회(무인증·게시 상태만) ──
+  publicByType: (type: string, limit = 50) =>
+    api.get<CmsContent[]>(`/api/public/cms/${encodeURIComponent(type)}?limit=${limit}`, {
+      anonymous: true,
+    }),
+  getMicrosite: (exhibitorId: string) =>
+    api.get<Microsite>(`/api/exhibitors/${encodeURIComponent(exhibitorId)}/microsite`),
+  saveMicrosite: (exhibitorId: string, body: MicrositeSaveRequest) =>
+    api.put<Microsite>(`/api/exhibitors/${encodeURIComponent(exhibitorId)}/microsite`, body),
+  getPublicMicrosite: (exhibitorId: string) =>
+    api.get<Microsite>(`/api/public/microsites/${encodeURIComponent(exhibitorId)}`, { anonymous: true }),
+};
diff --git a/src/frontend/src/screens/compliance/ComplianceReportPage.tsx b/src/frontend/src/screens/compliance/ComplianceReportPage.tsx
new file mode 100644
index 0000000..68aa27e
--- /dev/null
+++ b/src/frontend/src/screens/compliance/ComplianceReportPage.tsx
@@ -0,0 +1,140 @@
+import { useParams } from 'react-router-dom';
+import { Button } from '../../components/ui/Button';
+import { AiLabel } from '../../components/ui/Badge';
+import { IconBlock, IconCheck, IconUpload, IconWarning } from '../../components/ui/icons';
+import type { ComplianceReport, Violation } from '../../api/types';
+import './compliance-report.css';
+
+/*
+ * SCR-09 규정 검증 결과. Stitch compliance_report 이식.
+ * - 상단 요약 배너(차단/경고/통과) — 차단 존재 시 제출 불가
+ * - 좌: 자동 검증 체크리스트(그룹별) / 우: 상세 도면 검토(Elevation) + 위반 오버레이 핀
+ * ★ 계약 §4 precheck(ComplianceReport) shape 사용 — 여기선 확정 리포트 시연(샘플).
+ */
+const MOCK = `${import.meta.env.BASE_URL}mock/compliance_report`;
+const ELEVATION = `${MOCK}/img1.jpg`;
+
+const SAMPLE_REPORT: ComplianceReport = {
+  rulesetVersion: 'v1.0',
+  disclaimer: '본 검증은 사전 심사이며 최종 승인은 현장 검수·구조기술사 판단이 우선합니다.',
+  blockCount: 1,
+  warnCount: 2,
+  passCount: 14,
+  submittable: false,
+  violations: [
+    { pin: 1, code: 'H-01', group: '높이 규정', label: '장치물 높이 5m 이하', severity: 'block', measured: '5.4m (제한 5m)' },
+    { pin: 2, code: 'R-03', group: '리깅', label: '리깅 트러스 6.5m 초과 구조계산', severity: 'warn', measured: '7.0m', requiresDocument: '구조계산서 D-7' },
+    { pin: 3, code: 'A-02', group: '통로', label: '통로 여유 공간 확보', severity: 'warn', measured: '통로 인접 80% 여유' },
+  ],
+};
+
+const PASS_GROUPS = [
+  { group: '퇴출구', label: '퇴출구 확보' },
+  { group: '방염', label: '방염 자재 사용 확인' },
+  { group: '전기', label: '전력 부하 적정' },
+  { group: '표시', label: '통로 표시 도장 적정' },
+];
+
+const SEV_META: Record<Violation['severity'], { label: string; cls: string }> = {
+  block: { label: '차단', cls: 'block' },
+  warn: { label: '경고', cls: 'warn' },
+};
+
+export function ComplianceReportPage() {
+  const { boothId = 'A-102' } = useParams();
+  const report = SAMPLE_REPORT;
+
+  return (
+    <div className="kx-comp">
+      <header className="kx-comp__head">
+        <h1>부스 {boothId} · 설계 v2 · 규정 검증 결과</h1>
+      </header>
+
+      {/* 요약 배너 */}
+      <div
+        className={`kx-comp__banner ${report.submittable ? 'is-ok' : 'is-block'}`}
+        role="status"
+      >
+        <span className="kx-comp__banner-icon" aria-hidden="true">
+          {report.submittable ? <IconCheck size={18} /> : <IconBlock size={18} />}
+        </span>
+        <span className="tnum">
+          차단 {report.blockCount}건 · 경고 {report.warnCount}건 · 통과 {report.passCount}건
+        </span>
+        {!report.submittable && <span className="kx-comp__banner-note">차단 항목 해결 전 제출 불가</span>}
+      </div>
+
+      {/* PDF 업로드 존 */}
+      <div className="kx-comp__drop">
+        <span className="kx-comp__drop-icon" aria-hidden="true"><IconUpload size={28} /></span>
+        <p>기존 도면 업로드 (PDF/이미지)</p>
+        <span className="kx-comp__drop-hint">드래그 앤 드롭 또는 클릭해 파일 선택</span>
+        <AiLabel>AI 자동 검증</AiLabel>
+      </div>
+
+      <div className="kx-comp__body">
+        {/* 체크리스트 */}
+        <section className="kx-comp__list" aria-label="자동 검증 체크리스트">
+          <div className="kx-comp__list-head">
+            <h2>자동 검증 체크리스트</h2>
+            <div className="kx-comp__legend">
+              <span className="kx-comp__lg kx-comp__lg--pass">통과</span>
+              <span className="kx-comp__lg kx-comp__lg--warn">경고</span>
+              <span className="kx-comp__lg kx-comp__lg--block">차단</span>
+            </div>
+          </div>
+
+          <ul className="kx-comp__items">
+            {report.violations.map((v) => (
+              <li key={v.code} className={`kx-comp__item is-${SEV_META[v.severity].cls}`}>
+                <span className="kx-comp__pin tnum" aria-hidden="true">{v.pin}</span>
+                <div className="kx-comp__item-body">
+                  <div className="kx-comp__item-top">
+                    <span className="kx-comp__item-label">{v.label}</span>
+                    <span className={`kx-comp__sev kx-comp__sev--${SEV_META[v.severity].cls}`}>
+                      {SEV_META[v.severity].label}
+                    </span>
+                  </div>
+                  <span className="kx-comp__measured">
+                    {v.group} · 측정 {v.measured}
+                  </span>
+                  {v.requiresDocument && (
+                    <span className="kx-comp__doc">{v.requiresDocument} 제출 필요</span>
+                  )}
+                </div>
+              </li>
+            ))}
+            {PASS_GROUPS.map((p) => (
+              <li key={p.group} className="kx-comp__item is-pass">
+                <span className="kx-comp__pin kx-comp__pin--pass" aria-hidden="true"><IconCheck size={14} /></span>
+                <div className="kx-comp__item-body">
+                  <div className="kx-comp__item-top">
+                    <span className="kx-comp__item-label">{p.label}</span>
+                    <span className="kx-comp__sev kx-comp__sev--pass">통과</span>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        {/* 상세 도면 검토 */}
+        <section className="kx-comp__drawing" aria-label="상세 도면 검토">
+          <div className="kx-comp__drawing-head">
+            <h2>상세 도면 검토 (Elevation)</h2>
+          </div>
+          <figure className="kx-comp__drawing-frame">
+            <img src={ELEVATION} alt="상세 도면 (입면) 검토" loading="lazy" />
+            <span className="kx-comp__overlay-box" aria-hidden="true" />
+            <span className="kx-comp__overlay-badge"><IconWarning size={13} /> 5.4m 초과 · COMPLIANCE 차단</span>
+          </figure>
+        </section>
+      </div>
+
+      <footer className="kx-comp__footer">
+        <p className="kx-comp__disclaimer">{report.disclaimer} · 룰셋 {report.rulesetVersion}</p>
+        <Button disabled={!report.submittable}>검증 리포트 첨부하여 제출</Button>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/compliance/compliance-report.css b/src/frontend/src/screens/compliance/compliance-report.css
new file mode 100644
index 0000000..4489efd
--- /dev/null
+++ b/src/frontend/src/screens/compliance/compliance-report.css
@@ -0,0 +1,257 @@
+.kx-comp {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  max-width: var(--container-max);
+}
+.kx-comp__head h1 {
+  font-size: var(--fs-h1);
+  color: var(--color-neutral-900);
+}
+
+.kx-comp__banner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-body);
+  font-weight: 600;
+}
+.kx-comp__banner.is-block {
+  background: #fef3f2;
+  color: var(--color-error);
+  border: 1px solid #fecdca;
+}
+.kx-comp__banner.is-ok {
+  background: #e6f4ee;
+  color: var(--color-success);
+  border: 1px solid #a6e0c8;
+}
+.kx-comp__banner-note {
+  font-weight: 400;
+}
+
+.kx-comp__drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  border: 1px dashed var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  background: var(--color-neutral-050);
+  padding: var(--space-6);
+  color: var(--color-neutral-500);
+  font-size: var(--fs-body);
+}
+.kx-comp__drop-icon {
+  font-size: 22px;
+  color: var(--color-ai-accent);
+}
+.kx-comp__drop-hint {
+  font-size: var(--fs-caption);
+}
+
+.kx-comp__body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+  align-items: start;
+}
+
+.kx-comp__list {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+.kx-comp__list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+.kx-comp__list-head h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-comp__legend {
+  display: flex;
+  gap: var(--space-2);
+}
+.kx-comp__lg {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-comp__lg--pass {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kx-comp__lg--warn {
+  background: var(--color-violation-warn-bg);
+  color: var(--color-violation-warn-text);
+}
+.kx-comp__lg--block {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+
+.kx-comp__items {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-comp__item {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-neutral-200);
+}
+.kx-comp__item.is-block {
+  border-color: #fecdca;
+  background: #fffbfa;
+}
+.kx-comp__item.is-warn {
+  border-color: #fde3ad;
+  background: #fffcf5;
+}
+.kx-comp__item.is-pass {
+  border-color: var(--color-neutral-100);
+}
+.kx-comp__pin {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+  background: var(--color-error);
+  color: var(--color-white);
+}
+.kx-comp__item.is-warn .kx-comp__pin {
+  background: var(--color-violation-warn);
+}
+.kx-comp__pin--pass {
+  background: var(--color-success) !important;
+}
+.kx-comp__item-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-comp__item-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.kx-comp__item-label {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-comp__sev {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-comp__sev--block {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+.kx-comp__sev--warn {
+  background: var(--color-violation-warn-bg);
+  color: var(--color-violation-warn-text);
+}
+.kx-comp__sev--pass {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kx-comp__measured {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-comp__doc {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-ai-accent);
+  background: var(--color-ai-surface);
+  border: 1px solid var(--color-ai-accent);
+  border-radius: var(--radius-sm);
+  padding: 2px 8px;
+  align-self: flex-start;
+}
+
+/* 도면 */
+.kx-comp__drawing {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+.kx-comp__drawing-head h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin-bottom: var(--space-3);
+}
+.kx-comp__drawing-frame {
+  position: relative;
+  margin: 0;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: var(--border-card);
+  background: #f6f8fb;
+}
+.kx-comp__drawing-frame img {
+  width: 100%;
+  display: block;
+  object-fit: cover;
+}
+.kx-comp__overlay-box {
+  position: absolute;
+  top: 12%;
+  left: 30%;
+  width: 40%;
+  height: 22%;
+  border: 2px solid var(--color-error);
+  background: rgba(217, 45, 32, 0.15);
+  border-radius: 2px;
+}
+.kx-comp__overlay-badge {
+  position: absolute;
+  top: 12%;
+  right: 6%;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-white);
+  background: var(--color-error);
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+}
+
+.kx-comp__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+.kx-comp__disclaimer {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+@media (max-width: 1000px) {
+  .kx-comp__body {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/frontend/src/screens/contractor/ContractorBoothDashboardPage.tsx b/src/frontend/src/screens/contractor/ContractorBoothDashboardPage.tsx
new file mode 100644
index 0000000..2d9b16d
--- /dev/null
+++ b/src/frontend/src/screens/contractor/ContractorBoothDashboardPage.tsx
@@ -0,0 +1,218 @@
+/*
+ * SCR-38 업체 수주 부스 대시보드(업체 포털 홈) [M15]. 실 API 전환.
+ * 정본: GET /api/contractor/dashboard (ContractorDashboard).
+ * 대상: 장치·공사업체. 상단 KPI + 좌 수주 부스 리스트 + 우 옥션 참여·알림 피드.
+ * 보안: 옥션 참여 위젯은 자사 응찰 금액만 표기(타사 금액 비노출 — 서버가 자사 데이터만 반환).
+ */
+import { useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '../../components/ui/Button';
+import { DdayChip } from '../../components/ui/Badge';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import {
+  IconCheckCircle,
+  IconDocument,
+  IconGrid,
+  IconUsers,
+  IconWarning,
+} from '../../components/ui/icons';
+import { useToast } from '../auction/aucShared';
+import {
+  contractorApi,
+  formatWon,
+  type AwardedBooth,
+  type MyBid,
+} from '../auction/auctionApi';
+import './contractor.css';
+
+export function ContractorBoothDashboardPage() {
+  const navigate = useNavigate();
+  const { node: toast } = useToast();
+
+  const q = useQuery({
+    queryKey: ['contractor-dashboard'],
+    queryFn: () => contractorApi.dashboard(),
+    retry: false,
+    refetchInterval: 15000,
+  });
+  const data = q.data;
+
+  return (
+    <div className="kx-page">
+      <header className="kx-cbd__head">
+        <div>
+          <h1 className="kx-cbd__title">수주 부스</h1>
+          <p className="kx-cbd__subtitle">{data?.companyName ?? '업체 포털'}</p>
+        </div>
+        <Button variant="secondary" onClick={() => navigate('/auctions')}>
+          옥션 참여하기
+        </Button>
+      </header>
+
+      {q.isLoading && <Skeleton height={96} radius={12} />}
+      {q.isError && !q.isLoading && (
+        <ErrorState message="대시보드를 불러오지 못했습니다." onRetry={() => q.refetch()} />
+      )}
+
+      {!q.isLoading && !q.isError && data && (
+        <>
+          {/* KPI 밴드 */}
+          <section className="kx-cbd__kpis" aria-label="핵심 지표">
+            {data.kpis.map((k) => (
+              <div key={k.label} className={`kx-kpi ${k.tone === 'error' ? 'kx-kpi--error' : ''}`}>
+                <span className="kx-kpi__label">
+                  {k.tone === 'error' && <IconWarning size={14} />}
+                  {k.label}
+                </span>
+                <strong
+                  className="kx-kpi__value tnum"
+                  style={k.tone === 'success' ? { color: 'var(--color-success)' } : undefined}
+                >
+                  {k.value}
+                </strong>
+              </div>
+            ))}
+          </section>
+
+          <div className="kx-cbd__grid">
+            {/* 좌 — 수주 부스 리스트 */}
+            <section className="kx-cbd__col" aria-label="수주 부스 리스트">
+              <div className="kx-card__head" style={{ marginBottom: 0 }}>
+                <h2 style={{ fontSize: 'var(--fs-h2)' }}>수주 부스 리스트</h2>
+              </div>
+
+              {data.awardedBooths.length === 0 ? (
+                <EmptyState
+                  title="수주한 부스가 없습니다"
+                  description="진행 중인 옥션에 응찰해 시공을 수주하세요."
+                />
+              ) : (
+                data.awardedBooths.map((b) => (
+                  <BoothCard
+                    key={b.auctionId}
+                    booth={b}
+                    onOpen={() => navigate(`/auctions/${b.auctionId}`)}
+                  />
+                ))
+              )}
+            </section>
+
+            {/* 우 — 위젯 */}
+            <aside className="kx-cbd__col" aria-label="옥션·알림 위젯">
+              <div className="kx-cbd-widget">
+                <div className="kx-card__head">
+                  <h2 style={{ fontSize: 'var(--fs-h3)' }}>옥션 참여 현황</h2>
+                </div>
+                <div className="kx-cbd-widget__rows">
+                  {data.myAuctionBids.length === 0 ? (
+                    <p className="kx-cbd-bid__price" style={{ padding: '8px 0' }}>
+                      참여 중인 옥션이 없습니다.
+                    </p>
+                  ) : (
+                    data.myAuctionBids.map((bid) => (
+                      <BidItem
+                        key={bid.auctionId}
+                        bid={bid}
+                        onOpen={() => navigate(`/auctions/${bid.auctionId}`)}
+                      />
+                    ))
+                  )}
+                </div>
+                <Button
+                  variant="ghost"
+                  block
+                  onClick={() => navigate('/auctions')}
+                  style={{ marginTop: 16 }}
+                >
+                  옥션 대시보드로 이동
+                </Button>
+              </div>
+
+              <div className="kx-cbd-widget">
+                <div className="kx-card__head">
+                  <h2 style={{ fontSize: 'var(--fs-h3)' }}>알림 피드</h2>
+                </div>
+                <div className="kx-feed">
+                  {data.feed.length === 0 ? (
+                    <p className="kx-feed__meta">새로운 알림이 없습니다.</p>
+                  ) : (
+                    data.feed.map((f) => (
+                      <div key={f.text} className="kx-feed__item">
+                        <span className={`kx-feed__dot kx-feed__dot--${f.tone}`}>
+                          {f.tone === 'ok' ? (
+                            <IconCheckCircle size={14} />
+                          ) : f.tone === 'warn' ? (
+                            <IconWarning size={14} />
+                          ) : (
+                            <IconDocument size={14} />
+                          )}
+                        </span>
+                        <p className="kx-feed__text">{f.text}</p>
+                        <p className="kx-feed__meta">{f.meta}</p>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+            </aside>
+          </div>
+        </>
+      )}
+      {toast}
+    </div>
+  );
+}
+
+function BoothCard({ booth, onOpen }: { booth: AwardedBooth; onOpen: () => void }) {
+  return (
+    <article className="kx-booth">
+      <div className="kx-booth__top">
+        <div>
+          <span className="kx-booth__event-tag">{booth.event}</span>
+          <h4 className="kx-booth__name">{booth.name}</h4>
+          <div className="kx-booth__meta">
+            <span>
+              <IconGrid size={14} /> Booth {booth.booth || '—'}
+            </span>
+            {booth.client && (
+              <span>
+                <IconUsers size={14} /> {booth.client}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="kx-booth__right">
+          <p className="kx-booth__right-label">상태</p>
+          <p
+            className="kx-booth__right-value"
+            style={{ color: 'var(--color-success)', fontSize: 'var(--fs-body)' }}
+          >
+            {booth.stage}
+          </p>
+        </div>
+      </div>
+      <div className="kx-booth__actions">
+        <Button variant="secondary" leadingIcon={<IconDocument size={16} />} onClick={onOpen}>
+          옥션 상세
+        </Button>
+      </div>
+    </article>
+  );
+}
+
+function BidItem({ bid, onOpen }: { bid: MyBid; onOpen: () => void }) {
+  const rank = bid.myRank ?? 0;
+  const rankCls = rank === 1 ? 'kx-rankpill--1' : rank > 0 && rank <= 3 ? 'kx-rankpill--mid' : 'kx-rankpill--low';
+  return (
+    <button type="button" className="kx-cbd-bid" onClick={onOpen} style={{ width: '100%', textAlign: 'left', border: 0, background: 'transparent' }}>
+      <div>
+        <p className="kx-cbd-bid__name">{bid.auctionTitle}</p>
+        <p className="kx-cbd-bid__price tnum">내 입찰가: {formatWon(bid.myPrice)}</p>
+      </div>
+      <div className="kx-cbd-bid__right">
+        <span className={`kx-rankpill ${rankCls}`}>{rank > 0 ? `${rank}위` : '-'}</span>
+        <DdayChip dday={bid.dday} />
+      </div>
+    </button>
+  );
+}
diff --git a/src/frontend/src/screens/contractor/contractor.css b/src/frontend/src/screens/contractor/contractor.css
new file mode 100644
index 0000000..e88817f
--- /dev/null
+++ b/src/frontend/src/screens/contractor/contractor.css
@@ -0,0 +1,308 @@
+/*
+ * SCR-38 업체 수주 부스 대시보드(업체 포털). 토큰은 styles/tokens.css(§1)만 참조.
+ */
+@import '../shared.css';
+
+.kx-cbd__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-cbd__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+  font-weight: 700;
+}
+.kx-cbd__subtitle {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+
+/* KPI 밴드 */
+.kx-cbd__kpis {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--space-3);
+}
+@media (max-width: 1080px) {
+  .kx-cbd__kpis {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* 본문 2열 */
+.kx-cbd__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
+  gap: var(--space-5);
+  align-items: start;
+}
+@media (max-width: 1080px) {
+  .kx-cbd__grid {
+    grid-template-columns: 1fr;
+  }
+}
+.kx-cbd__col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+/* 수주 부스 카드 */
+.kx-booth {
+  border: var(--border-card);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+}
+.kx-booth--sub {
+  border-left-color: var(--color-success);
+  opacity: 0.92;
+}
+.kx-booth__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+.kx-booth__event-tag {
+  display: inline-block;
+  margin-bottom: 6px;
+  padding: 2px 10px;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+}
+.kx-booth--sub .kx-booth__event-tag {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kx-booth__name {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-booth__meta {
+  display: flex;
+  gap: var(--space-4);
+  margin-top: 4px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-booth__meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.kx-booth__right {
+  text-align: right;
+}
+.kx-booth__right-label {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-booth__right-value {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+}
+
+/* 시공 스테퍼 */
+.kx-stepper {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin: var(--space-5) var(--space-2) var(--space-5);
+}
+.kx-stepper::before {
+  content: '';
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  right: 16px;
+  height: 2px;
+  background: var(--color-neutral-200);
+  z-index: 0;
+}
+.kx-step {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.kx-step__dot {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-500);
+}
+.kx-step--done .kx-step__dot {
+  background: var(--color-primary-700);
+  color: var(--color-white);
+}
+.kx-step--current .kx-step__dot {
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  box-shadow: 0 0 0 4px var(--color-primary-100);
+}
+.kx-step__label {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-step--done .kx-step__label,
+.kx-step--current .kx-step__label {
+  color: var(--color-primary-700);
+  font-weight: 600;
+}
+
+.kx-booth__actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.kx-booth__actions .kx-btn {
+  flex: 1;
+  min-width: 130px;
+}
+.kx-booth__progress {
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-100);
+  overflow: hidden;
+}
+.kx-booth__progress span {
+  display: block;
+  height: 100%;
+  background: var(--color-success);
+  border-radius: var(--radius-pill);
+}
+
+/* 옥션 참여 위젯 */
+.kx-cbd-widget {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+}
+.kx-cbd-widget__rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-cbd-bid {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-050);
+}
+.kx-cbd-bid--dim {
+  opacity: 0.6;
+}
+.kx-cbd-bid__name {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-cbd-bid__price {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-cbd-bid__right {
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+.kx-rankpill {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-rankpill--1 {
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+}
+.kx-rankpill--mid {
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent);
+}
+.kx-rankpill--low {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+/* 알림 피드 타임라인 */
+.kx-feed {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-feed::before {
+  content: '';
+  position: absolute;
+  left: 11px;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  background: var(--color-neutral-200);
+}
+.kx-feed__item {
+  position: relative;
+  padding-left: 34px;
+}
+.kx-feed__dot {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kx-feed__dot--ok {
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+}
+.kx-feed__dot--warn {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+.kx-feed__dot--info {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+.kx-feed__text {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-feed__meta {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
diff --git a/src/frontend/src/screens/dashboard/OrganizerDashboardPage.tsx b/src/frontend/src/screens/dashboard/OrganizerDashboardPage.tsx
new file mode 100644
index 0000000..8ccc9bd
--- /dev/null
+++ b/src/frontend/src/screens/dashboard/OrganizerDashboardPage.tsx
@@ -0,0 +1,284 @@
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '../../store/authStore';
+import { AiLabel } from '../../components/ui/Badge';
+import { AiImage } from '../../components/ui/AiImage';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconCheck } from '../../components/ui/icons';
+import { dashboardApi } from '../../api/endpoints';
+import { ApiRequestError } from '../../api/client';
+import type { DashboardData } from '../../api/types';
+import { StatusPill, timeAgo } from '../work/workShared';
+import {
+  SAMPLE_EXHIBITORS,
+  SAMPLE_FEED,
+  SAMPLE_KPIS,
+  SAMPLE_MILESTONES,
+} from './sampleDashboard';
+import './dashboard.css';
+
+// Stitch organizer_dashboard 번들 이미지(실 KINTEX 촬영본 — 히어로 시각화 데코, AI 샘플 라벨).
+const MOCK = `${import.meta.env.BASE_URL}mock/organizer_dashboard`;
+const S7_AERIAL = `${MOCK}/img3.jpg`;
+
+/*
+ * SCR-02 주최자 대시보드. Stitch organizer_dashboard 이식.
+ * 정상 경로: GET /api/events/{eventId}/dashboard (실집계 — milestones·kpis·exhibitors·feed).
+ * 폴백: NETWORK/NOT_FOUND 시에만 sampleDashboard 로 강등(degraded 배너). 그 외 오류는 재시도 UI.
+ * 백엔드가 빈배열을 주는 섹션은 빈 상태로 표기(가짜 수치로 덮지 않음).
+ */
+export function OrganizerDashboardPage() {
+  const { t } = useTranslation();
+  const { eventId } = useParams();
+  const workspace = useAuthStore((s) => s.currentWorkspace());
+
+  const eventName = workspace?.eventName ?? '2026 스마트팩토리 코리아';
+  const hallLabel = workspace?.hallLabel ?? '제2전시장 홀7';
+  const period =
+    workspace && workspace.startDate
+      ? `${workspace.startDate} ~ ${workspace.endDate}`
+      : '2026.08.11 ~ 08.14';
+  const dday = workspace?.dday ?? 31;
+
+  const q = useQuery({
+    queryKey: ['dashboard', eventId],
+    queryFn: () => dashboardApi.get(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const degraded = isDegradable(q.error);
+  const data: DashboardData | null = q.data ?? (degraded ? FALLBACK : null);
+  const hardError = q.isError && !degraded;
+
+  return (
+    <div className="kx-dash">
+      {/* 행사 헤더 — 인증 워크스페이스 실데이터 */}
+      <header className="kx-dash__event">
+        <div>
+          <h1 className="kx-dash__event-name">{eventName}</h1>
+          <p className="kx-dash__event-meta">
+            {t('common.brand')} {hallLabel} · {period}
+          </p>
+        </div>
+        <span className="kx-dash__countdown tnum">{t('dashboard.countdown', { n: dday })}</span>
+      </header>
+
+      {degraded && (
+        <div className="kx-dash__degraded-bar">
+          <span className="kx-dash__degraded">{t('dashboard.degradedTag')}</span>
+          {t('dashboard.degradedMsg')}
+        </div>
+      )}
+
+      {q.isLoading && <DashboardSkeleton />}
+
+      {hardError && (
+        <ErrorState
+          message={t('dashboard.loadError')}
+          onRetry={() => q.refetch()}
+        />
+      )}
+
+      {data && (
+        <>
+          {/* 히어로: 마일스톤 타임라인 */}
+          <section className="kx-dash__hero" aria-label={t('dashboard.timelineAria')}>
+            {data.milestones.length === 0 ? (
+              <EmptyState title={t('dashboard.milestoneEmptyTitle')} description={t('dashboard.milestoneEmptyDesc')} />
+            ) : (
+              <ol className="kx-timeline">
+                {data.milestones.map((m, i) => (
+                  <li key={`${m.label}-${i}`} className={`kx-timeline__node is-${milestoneClass(m.state)}`}>
+                    {i < data.milestones.length - 1 && (
+                      <span className="kx-timeline__bar" aria-hidden="true" />
+                    )}
+                    <span className="kx-timeline__dot" aria-hidden="true">
+                      {m.state === 'done' ? <IconCheck size={12} /> : null}
+                    </span>
+                    <div className="kx-timeline__label">
+                      <span className="kx-timeline__d tnum">{ddayLabel(m.date)}</span>
+                      <span className="kx-timeline__title">{m.label}</span>
+                    </div>
+                    <div className="kx-timeline__card">
+                      <span className="kx-timeline__muted">{t(`dashboard.mstate.${normState(m.state)}`)}</span>
+                    </div>
+                  </li>
+                ))}
+              </ol>
+            )}
+          </section>
+
+          {/* KPI 카드 */}
+          <section className="kx-dash__kpis" aria-label={t('dashboard.kpisAria')}>
+            {data.kpis.length === 0 ? (
+              <EmptyState title={t('dashboard.kpiEmpty')} />
+            ) : (
+              data.kpis.map((k, i) => (
+                <div key={`${k.label}-${i}`} className={`kx-kpi kx-kpi--${kpiTone(k.trend)}`}>
+                  <span className="kx-kpi__label">{k.label}</span>
+                  <strong className="kx-kpi__value tnum">{k.value}</strong>
+                  {k.delta && (
+                    <span className={`kx-delta kx-delta--${k.trend === 'down' ? 'down' : 'up'}`}>
+                      {k.trend === 'down' ? '▼' : k.trend === 'up' ? '▲' : ''} {k.delta}
+                    </span>
+                  )}
+                </div>
+              ))
+            )}
+          </section>
+
+          {/* 하단: 참가업체 테이블(2/3) + 알림·S7(1/3) */}
+          <div className="kx-dash__split">
+            <section className="kx-dash__table-wrap" aria-label={t('dashboard.exhibitorStatus')}>
+              <div className="kx-dash__section-head">
+                <h2>{t('dashboard.exhibitorStatus')}</h2>
+                {degraded && <span className="kx-dash__degraded">{t('dashboard.sampleTag')}</span>}
+              </div>
+              {data.exhibitors.length === 0 ? (
+                <EmptyState
+                  title={t('dashboard.exhibitorEmptyTitle')}
+                  description={t('dashboard.exhibitorEmptyDesc')}
+                />
+              ) : (
+                <table className="kx-table">
+                  <thead>
+                    <tr>
+                      <th>{t('dashboard.colBoothNo')}</th>
+                      <th>{t('dashboard.colCompany')}</th>
+                      <th>{t('dashboard.colStatus')}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {data.exhibitors.map((r, i) => (
+                      <tr key={`${r.boothNo}-${i}`}>
+                        <td className="tnum">{r.boothNo}</td>
+                        <td>{r.companyName}</td>
+                        <td>
+                          <StatusPill value={r.status} />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </section>
+
+            <aside className="kx-dash__aside">
+              <section className="kx-feed" aria-label={t('dashboard.feedAria')}>
+                <h2 className="kx-feed__title">{t('dashboard.feedTitle')}</h2>
+                {data.feed.length === 0 ? (
+                  <EmptyState title={t('dashboard.feedEmpty')} />
+                ) : (
+                  <ul className="kx-feed__list">
+                    {data.feed.map((f) => (
+                      <li key={f.id} className={`kx-feed__item is-${feedKind(f.kind)}`}>
+                        <span className="kx-feed__dot" aria-hidden="true" />
+                        <span className="kx-feed__text">{f.message}</span>
+                        <span className="kx-feed__time">{timeAgo(f.at)}</span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </section>
+
+              <section className="kx-dash__s7" aria-label={t('dashboard.aerialAria')}>
+                <div className="kx-dash__s7-head">
+                  <h2>{t('dashboard.aerialTitle')}</h2>
+                  <AiLabel>S7</AiLabel>
+                </div>
+                <AiImage
+                  imageUrl={S7_AERIAL}
+                  status="DONE"
+                  sample
+                  watermarkText={t('common.aiWatermark')}
+                  notice={t('common.aiNotice')}
+                  shotLabel={t('dashboard.aerialShot')}
+                  alt={t('dashboard.aerialAlt')}
+                />
+              </section>
+            </aside>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function DashboardSkeleton() {
+  return (
+    <div aria-hidden="true" style={{ display: 'grid', gap: 16 }}>
+      <Skeleton height={72} radius={12} />
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
+        {[0, 1, 2, 3].map((i) => (
+          <Skeleton key={i} height={92} radius={12} />
+        ))}
+      </div>
+      <Skeleton height={260} radius={12} />
+    </div>
+  );
+}
+
+/** NETWORK/NOT_FOUND(백엔드 미배포·미접속) 만 샘플 폴백으로 강등. */
+function isDegradable(error: unknown): boolean {
+  return (
+    error instanceof ApiRequestError &&
+    (error.code === 'NETWORK' || error.code === 'NOT_FOUND' || error.code === 'NOT_IMPLEMENTED')
+  );
+}
+
+function milestoneClass(state: string): string {
+  if (state === 'done') return 'done';
+  if (state === 'current') return 'imminent';
+  return 'upcoming';
+}
+function normState(state: string): 'done' | 'current' | 'upcoming' {
+  if (state === 'done') return 'done';
+  if (state === 'current') return 'current';
+  return 'upcoming';
+}
+function kpiTone(trend: string): 'normal' | 'warn' | 'error' {
+  return trend === 'down' ? 'warn' : 'normal';
+}
+function feedKind(kind: string): string {
+  if (kind === 'approval' || kind === 'approved') return 'approved';
+  if (kind === 'violation' || kind === 'rejected') return 'rejected';
+  if (kind === 'deadline') return 'deadline';
+  return 'submitted';
+}
+/** "YYYY-MM-DD" → D-데이 라벨(오늘 기준). */
+function ddayLabel(dateStr: string): string {
+  const d = new Date(dateStr);
+  if (Number.isNaN(d.getTime())) return dateStr;
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  d.setHours(0, 0, 0, 0);
+  const diff = Math.round((d.getTime() - today.getTime()) / 86400000);
+  if (diff === 0) return 'D-DAY';
+  return diff > 0 ? `D-${diff}` : `D+${-diff}`;
+}
+
+/**
+ * 샘플 폴백(백엔드 shape 매핑) — 정상 경로는 실 API. NETWORK/NOT_FOUND 시에만 사용.
+ * 근거: 기존 sampleDashboard.ts(경계면 시연 데이터)를 DashboardData 형태로 강등 변환.
+ */
+const FALLBACK: DashboardData = {
+  milestones: SAMPLE_MILESTONES.map((m) => ({
+    label: m.title,
+    date: '',
+    state: m.state === 'imminent' ? 'current' : m.state === 'current' ? 'current' : m.state,
+  })),
+  kpis: SAMPLE_KPIS.map((k) => ({
+    label: k.label,
+    value: k.value,
+    delta: k.sub ?? null,
+    trend: k.tone === 'error' ? 'down' : k.tone === 'warn' ? 'down' : 'flat',
+  })),
+  exhibitors: SAMPLE_EXHIBITORS.map((e) => ({
+    companyName: e.company,
+    boothNo: e.boothNo,
+    status: e.designStatus,
+  })),
+  feed: SAMPLE_FEED.map((f) => ({ id: f.key, kind: f.kind, message: f.text, at: '' })),
+};
diff --git a/src/frontend/src/screens/dashboard/dashboard.css b/src/frontend/src/screens/dashboard/dashboard.css
new file mode 100644
index 0000000..9a3e46e
--- /dev/null
+++ b/src/frontend/src/screens/dashboard/dashboard.css
@@ -0,0 +1,330 @@
+.kx-dash {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  padding: var(--space-5);
+}
+
+/* 행사 헤더 */
+.kx-dash__event {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-dash__event-name {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+}
+.kx-dash__event-meta {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-dash__countdown {
+  padding: 8px 18px;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  font-size: var(--fs-h2);
+  font-weight: 700;
+}
+
+/* 히어로 타임라인 */
+.kx-dash__hero {
+  padding: var(--space-5) var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow-x: auto;
+}
+.kx-timeline {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 720px;
+}
+.kx-timeline__node {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-2);
+}
+.kx-timeline__bar {
+  position: absolute;
+  top: 11px;
+  left: 50%;
+  width: 100%;
+  height: 3px;
+  background: var(--color-neutral-200);
+}
+.kx-timeline__node.is-done .kx-timeline__bar {
+  background: var(--color-success);
+}
+.kx-timeline__dot {
+  position: relative;
+  z-index: 1;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--color-white);
+  background: var(--color-neutral-200);
+}
+.kx-timeline__node.is-done .kx-timeline__dot {
+  background: var(--color-success);
+}
+.kx-timeline__node.is-current .kx-timeline__dot {
+  background: var(--color-primary-600);
+}
+.kx-timeline__node.is-imminent .kx-timeline__dot {
+  background: var(--color-violation-warn);
+  animation: kx-pulse 1.6s ease-in-out infinite;
+}
+@keyframes kx-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(247, 144, 9, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(247, 144, 9, 0);
+  }
+}
+.kx-timeline__label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.kx-timeline__d {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-timeline__title {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-timeline__card {
+  font-size: var(--fs-caption);
+  text-align: center;
+}
+.kx-timeline__imminent {
+  color: var(--color-violation-warn-text);
+  font-weight: 700;
+}
+.kx-timeline__muted {
+  color: var(--color-neutral-500);
+}
+
+/* KPI */
+.kx-dash__kpis {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-4);
+}
+.kx-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+}
+.kx-kpi__label {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-kpi__value {
+  font-size: var(--fs-display);
+  line-height: var(--lh-display);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-kpi__sub {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-kpi--warn {
+  border-color: var(--color-violation-warn);
+}
+.kx-kpi--warn .kx-kpi__sub {
+  color: var(--color-violation-warn-text);
+  font-weight: 600;
+}
+.kx-kpi--error .kx-kpi__value {
+  color: var(--color-error);
+}
+
+/* 하단 split */
+.kx-dash__split {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--space-4);
+  align-items: start;
+}
+.kx-dash__table-wrap {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow: hidden;
+}
+.kx-dash__section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4);
+  border-bottom: var(--border-card);
+}
+.kx-dash__section-head h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-dash__degraded {
+  font-size: 11px;
+  color: var(--color-warning);
+  background: #fff4e5;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-dash__degraded-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  background: #fff8ef;
+  border: 1px solid #ffe4bf;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-lg);
+}
+
+/* 테이블 — 그리드 표준(Nifty Advanced headers, shared.css 정의와 동일) */
+.kx-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-table thead th {
+  text-align: left;
+  padding: 10px 12px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-050);
+  border-bottom: 2px solid var(--color-neutral-200);
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+.kx-table tbody td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-neutral-200);
+  color: var(--color-neutral-700);
+  vertical-align: middle;
+}
+.kx-table tbody tr:hover {
+  background: var(--row-hover);
+}
+.kx-table__thumb {
+  display: inline-block;
+  width: 44px;
+  height: 30px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  border: 1px solid var(--color-neutral-200);
+  background: linear-gradient(120deg, var(--color-neutral-100), var(--color-neutral-200));
+}
+
+/* aside */
+.kx-dash__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-feed,
+.kx-dash__s7 {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+}
+.kx-feed__title,
+.kx-dash__s7 h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin-bottom: var(--space-3);
+}
+.kx-feed__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-feed__item {
+  display: grid;
+  grid-template-columns: 8px 1fr auto;
+  gap: var(--space-2);
+  align-items: baseline;
+  font-size: var(--fs-body);
+}
+.kx-feed__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-top: 6px;
+  background: var(--color-neutral-200);
+}
+.kx-feed__item.is-approved .kx-feed__dot {
+  background: var(--color-success);
+}
+.kx-feed__item.is-rejected .kx-feed__dot {
+  background: var(--color-error);
+}
+.kx-feed__item.is-deadline .kx-feed__dot {
+  background: var(--color-violation-warn);
+}
+.kx-feed__item.is-submitted .kx-feed__dot {
+  background: var(--color-primary-600);
+}
+.kx-feed__text {
+  color: var(--color-neutral-700);
+}
+.kx-feed__time {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  white-space: nowrap;
+}
+.kx-dash__s7-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+.kx-dash__s7-head h2 {
+  margin-bottom: 0;
+}
+
+@media (max-width: 1100px) {
+  .kx-dash__kpis {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .kx-dash__split {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/frontend/src/screens/dashboard/sampleDashboard.ts b/src/frontend/src/screens/dashboard/sampleDashboard.ts
new file mode 100644
index 0000000..abbfdcd
--- /dev/null
+++ b/src/frontend/src/screens/dashboard/sampleDashboard.ts
@@ -0,0 +1,65 @@
+/*
+ * 주최자 대시보드 표시 데이터 (SCR-02).
+ * ★ 경계면 이슈: 계약(01_backend_contracts.md)에 대시보드 집계 엔드포인트가 없다.
+ *   마일스톤·KPI·참가업체·알림 피드는 아래 샘플로 시연 — 실 API 계약 확정 시 대체.
+ *   (workspace.dday·eventName 등 인증 응답 필드는 실데이터를 사용한다.)
+ */
+import type { FlowStatus } from '../../components/ui/Badge';
+
+export interface Milestone {
+  key: string;
+  dLabel: string;
+  title: string;
+  state: 'done' | 'current' | 'upcoming' | 'imminent';
+  progress?: string; // "3/7 완료"
+}
+export interface Kpi {
+  key: string;
+  label: string;
+  value: string;
+  sub?: string;
+  tone?: 'normal' | 'warn' | 'error';
+}
+export interface ExhibitorRow {
+  boothNo: string;
+  company: string;
+  designStatus: FlowStatus;
+  utilityStatus: FlowStatus;
+}
+export interface FeedItem {
+  key: string;
+  kind: 'approved' | 'rejected' | 'deadline' | 'submitted';
+  text: string;
+  time: string;
+}
+
+export const SAMPLE_MILESTONES: Milestone[] = [
+  { key: 'm150', dLabel: 'D-150', title: '홀 배정', state: 'done' },
+  { key: 'm30', dLabel: 'D-30', title: '사전업무협의', state: 'done' },
+  { key: 'm25', dLabel: 'D-25', title: '유틸리티 신청 마감', state: 'imminent', progress: 'D-6 남음' },
+  { key: 'm7', dLabel: 'D-7', title: '신고서류 제출', state: 'upcoming', progress: '신고서류 3/7 완료' },
+  { key: 'm0', dLabel: 'D-0', title: '개장', state: 'upcoming' },
+];
+
+export const SAMPLE_KPIS: Kpi[] = [
+  { key: 'apply', label: '참가업체 신청', value: '128/160', sub: '80%' },
+  { key: 'booth', label: '부스 배치 확정률', value: '92%' },
+  { key: 'util', label: '유틸리티 신청 완료', value: '74%', sub: 'D-25 임박', tone: 'warn' },
+  { key: 'viol', label: '규정 위반 미해결', value: '5건', tone: 'error' },
+];
+
+export const SAMPLE_EXHIBITORS: ExhibitorRow[] = [
+  { boothNo: 'A-102', company: '(주)한빛로보틱스', designStatus: 'approved', utilityStatus: 'submitted' },
+  { boothNo: 'A-104', company: '대성정밀', designStatus: 'ai-review', utilityStatus: 'draft' },
+  { boothNo: 'B-201', company: '누리테크놀로지', designStatus: 'submitted', utilityStatus: 'approved' },
+  { boothNo: 'B-205', company: '세종머신', designStatus: 'rejected', utilityStatus: 'draft' },
+  { boothNo: 'C-110', company: '한울오토메이션', designStatus: 'building', utilityStatus: 'submitted' },
+  { boothNo: 'C-118', company: '이엔지솔루션', designStatus: 'draft', utilityStatus: 'draft' },
+];
+
+export const SAMPLE_FEED: FeedItem[] = [
+  { key: 'f1', kind: 'approved', text: 'A-102 한빛로보틱스 설계 승인', time: '10분 전' },
+  { key: 'f2', kind: 'deadline', text: '유틸리티 신청 마감 D-6 임박', time: '1시간 전' },
+  { key: 'f3', kind: 'rejected', text: 'B-205 세종머신 설계 반려 (방염 자재 미확인)', time: '3시간 전' },
+  { key: 'f4', kind: 'submitted', text: 'C-110 한울오토메이션 유틸리티 신청 제출', time: '어제' },
+];
diff --git a/src/frontend/src/screens/design/BoothDesignStudioPage.tsx b/src/frontend/src/screens/design/BoothDesignStudioPage.tsx
new file mode 100644
index 0000000..82c593b
--- /dev/null
+++ b/src/frontend/src/screens/design/BoothDesignStudioPage.tsx
@@ -0,0 +1,539 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ApiRequestError } from '../../api/client';
+import { designApi, renderApi } from '../../api/endpoints';
+import { subscribeRenderJob } from '../../api/websocket';
+import { Button } from '../../components/ui/Button';
+import { AiLabel } from '../../components/ui/Badge';
+import { AiImage } from '../../components/ui/AiImage';
+import { CompareSlider } from '../../components/ui/CompareSlider';
+import type { ComplianceReport, DesignSpec, RenderJobDto, RenderJobRequest } from '../../api/types';
+import { AFTER_PLACEHOLDER, AFTER_SAMPLE, BEFORE_EMPTY_HALL, MOCK_SHOT_IMG } from './placeholders';
+import './studio.css';
+
+/*
+ * SCR-06 부스 설계 스튜디오 (M3 스펙 + M5 렌더). Stitch booth_design_studio 이식.
+ * - 좌: 스펙 아코디언 폼 → precheck(완성 API)로 사전검증. 중앙: 4샷 그리드(S1~S4) + Before/After(S5).
+ * - "예상 사진 생성" → render POST(완성 큐잉) → WebSocket /topic/render/{jobId} 로 타일 교체.
+ */
+
+const SHOTS = [
+  { preset: 'S1', label: 'S1 부스 정면' },
+  { preset: 'S2', label: 'S2 야간 점등' },
+  { preset: 'S3', label: 'S3 통로 뷰' },
+  { preset: 'S4', label: 'S4 부스 내부' },
+] as const;
+
+const DEFAULT_SPEC: DesignSpec = {
+  boothType: 'independent',
+  industry: '로봇/제조',
+  budget: 30000000,
+  zones: [
+    { type: 'demo', ratioPercent: 40 },
+    { type: 'consult', ratioPercent: 30 },
+    { type: 'reception', ratioPercent: 20 },
+    { type: 'storage', ratioPercent: 10 },
+  ],
+  wallHeightM: 4.2,
+  signageText: '한빛로보틱스',
+  rigging: { use: true, heightM: 7.0 },
+  mezzanineAreaRatio: 0.3,
+  materials: [{ part: 'wall', finish: 'matte_white', fireRetardant: true }],
+  lightingMode: 'night',
+  usesDesignatedLightingOnly: true,
+};
+
+type Section = 'basic' | 'zones' | 'structure' | 'material' | 'lighting';
+
+export function BoothDesignStudioPage() {
+  const { eventId = '', boothId = '' } = useParams();
+  const navigate = useNavigate();
+
+  const [spec, setSpec] = useState<DesignSpec>(DEFAULT_SPEC);
+  const [open, setOpen] = useState<Record<Section, boolean>>({
+    basic: true,
+    zones: false,
+    structure: true,
+    material: false,
+    lighting: false,
+  });
+  const [report, setReport] = useState<ComplianceReport | null>(null);
+  const [prechecking, setPrechecking] = useState(false);
+  const [jobs, setJobs] = useState<Record<string, RenderJobDto>>({}); // preset → job
+  const [generating, setGenerating] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmAgree, setConfirmAgree] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  // 초기 설계안 로드(501이면 degraded 기본 스펙 유지).
+  useEffect(() => {
+    let alive = true;
+    designApi
+      .get(eventId, boothId)
+      .then((d) => alive && setSpec(d.spec))
+      .catch(() => {
+        /* 501/미존재 → 기본 스펙 시연 */
+      });
+    return () => {
+      alive = false;
+    };
+  }, [eventId, boothId]);
+
+  // 발행된 렌더잡 WebSocket 구독.
+  useEffect(() => {
+    const ids = Object.values(jobs)
+      .map((j) => j.jobId)
+      .filter(Boolean);
+    if (ids.length === 0) return;
+    const unsubs = ids.map((id) =>
+      subscribeRenderJob(id, (job) => {
+        setJobs((prev) => ({ ...prev, [job.shotPreset]: job }));
+      }),
+    );
+    return () => unsubs.forEach((u) => u());
+  }, [jobs]);
+
+  const runPrecheck = useCallback(async () => {
+    setPrechecking(true);
+    setNotice(null);
+    try {
+      const r = await designApi.precheck(eventId, boothId, spec);
+      setReport(r);
+    } catch (err) {
+      setNotice(
+        err instanceof ApiRequestError ? err.message : '사전 검증 중 오류가 발생했습니다.',
+      );
+    } finally {
+      setPrechecking(false);
+    }
+  }, [eventId, boothId, spec]);
+
+  const buildScene = useCallback(
+    (): RenderJobRequest['scene'] => ({
+      hall: { id: 'H7', dims_m: [126, 90], ceiling_m: 12 },
+      booth: { id: boothId || 'A-102', size_m: [6, 3], type: spec.boothType },
+      design: { signage: { text: spec.signageText } },
+      lighting: { mode: spec.lightingMode },
+    }),
+    [boothId, spec.boothType, spec.signageText, spec.lightingMode],
+  );
+
+  const generateShots = useCallback(async () => {
+    setGenerating(true);
+    setNotice(null);
+    const scene = buildScene();
+    // S1·S2를 우선 발행(S3·S4는 온디맨드 타일에서 개별 생성).
+    for (const preset of ['S1', 'S2'] as const) {
+      try {
+        const job = await renderApi.create(eventId, boothId, { shotPreset: preset, scene });
+        setJobs((prev) => ({ ...prev, [preset]: job }));
+      } catch (err) {
+        if (err instanceof ApiRequestError && err.code === 'RENDER_QUOTA_EXCEEDED') {
+          setNotice('행사 이미지 생성 쿼터가 소진되었습니다.');
+          break;
+        }
+        if (err instanceof ApiRequestError && err.code === 'NOT_IMPLEMENTED') {
+          setNotice('렌더 이력 저장이 준비 중입니다(큐잉만 동작).');
+        } else {
+          setNotice(err instanceof ApiRequestError ? err.message : '예상 사진 생성 중 오류.');
+        }
+      }
+    }
+    setGenerating(false);
+    // 병행: precheck 갱신
+    void runPrecheck();
+  }, [eventId, boothId, buildScene, runPrecheck]);
+
+  const generateSingle = useCallback(
+    async (preset: string) => {
+      setNotice(null);
+      try {
+        const job = await renderApi.create(eventId, boothId, {
+          shotPreset: preset,
+          scene: buildScene(),
+        });
+        setJobs((prev) => ({ ...prev, [preset]: job }));
+      } catch (err) {
+        setNotice(err instanceof ApiRequestError ? err.message : '생성 중 오류가 발생했습니다.');
+      }
+    },
+    [eventId, boothId, buildScene],
+  );
+
+  const s1 = jobs.S1;
+  const afterReal = s1?.status === 'DONE' && s1.imageUrl ? s1.imageUrl : null;
+  const afterSrc = afterReal ?? AFTER_SAMPLE;
+
+  const passCount = report?.passCount ?? 0;
+  const warnCount = report?.warnCount ?? 0;
+  const blockCount = report?.blockCount ?? 0;
+  const submittable = report?.submittable ?? false;
+
+  return (
+    <div className="kx-studio">
+      {/* 상단 컨텍스트 바 */}
+      <header className="kx-studio__head">
+        <div className="kx-studio__ctx">
+          <button
+            type="button"
+            className="kx-studio__back"
+            aria-label="뒤로"
+            onClick={() => navigate(-1)}
+          >
+            ←
+          </button>
+          <div>
+            <h2>부스 {boothId || 'A-102'} · 독립부스 6×3m</h2>
+            <span className="kx-studio__ctx-sub">높이 제한 5m</span>
+          </div>
+          <span className="kx-studio__ctx-div" aria-hidden="true" />
+          <select
+            className="kx-studio__ver-select"
+            aria-label="설계 버전"
+            defaultValue="v2"
+          >
+            <option value="v2">설계 v2</option>
+            <option value="v1">설계 v1</option>
+          </select>
+        </div>
+        <Button variant="ai" leadingIcon="✦" onClick={generateShots} disabled={generating}>
+          {generating ? '생성 요청 중…' : '예상 사진 생성'}
+        </Button>
+      </header>
+
+      <div className="kx-studio__body">
+        {/* 좌: 스펙 아코디언 */}
+        <aside className="kx-studio__spec" aria-label="설계 스펙">
+          <Accordion
+            title="기본 정보"
+            open={open.basic}
+            onToggle={() => setOpen((o) => ({ ...o, basic: !o.basic }))}
+          >
+            <Field label="업종">
+              <input
+                value={spec.industry}
+                onChange={(e) => setSpec((s) => ({ ...s, industry: e.target.value }))}
+              />
+            </Field>
+            <Field label="예산 (₩)">
+              <input
+                type="number"
+                className="tnum"
+                value={spec.budget}
+                onChange={(e) => setSpec((s) => ({ ...s, budget: Number(e.target.value) }))}
+              />
+            </Field>
+          </Accordion>
+
+          <Accordion
+            title="공간 구성"
+            open={open.zones}
+            onToggle={() => setOpen((o) => ({ ...o, zones: !o.zones }))}
+          >
+            {spec.zones.map((z, i) => (
+              <Field key={z.type} label={ZONE_LABEL[z.type] ?? z.type}>
+                <div className="kx-studio__ratio">
+                  <input
+                    type="range"
+                    min={0}
+                    max={100}
+                    value={z.ratioPercent}
+                    aria-label={`${ZONE_LABEL[z.type] ?? z.type} 비율`}
+                    onChange={(e) =>
+                      setSpec((s) => ({
+                        ...s,
+                        zones: s.zones.map((x, j) =>
+                          j === i ? { ...x, ratioPercent: Number(e.target.value) } : x,
+                        ),
+                      }))
+                    }
+                  />
+                  <span className="tnum">{z.ratioPercent}%</span>
+                </div>
+              </Field>
+            ))}
+          </Accordion>
+
+          <Accordion
+            title="구조"
+            open={open.structure}
+            onToggle={() => setOpen((o) => ({ ...o, structure: !o.structure }))}
+          >
+            <Field label={`벽체 높이 (${spec.wallHeightM}m · 최대 5m)`}>
+              <input
+                type="range"
+                min={2}
+                max={6}
+                step={0.1}
+                value={spec.wallHeightM}
+                aria-label="벽체 높이"
+                onChange={(e) => setSpec((s) => ({ ...s, wallHeightM: Number(e.target.value) }))}
+              />
+              {spec.wallHeightM > 5 && (
+                <p className="kx-studio__inline-warn">높이 5m 초과 — 규정 차단 대상</p>
+              )}
+            </Field>
+            <Field label="간판 문구">
+              <input
+                value={spec.signageText}
+                onChange={(e) => setSpec((s) => ({ ...s, signageText: e.target.value }))}
+              />
+            </Field>
+            <label className="kx-studio__toggle">
+              <input
+                type="checkbox"
+                checked={spec.rigging.use}
+                onChange={(e) =>
+                  setSpec((s) => ({ ...s, rigging: { ...s.rigging, use: e.target.checked } }))
+                }
+              />
+              트러스/리깅 사용
+            </label>
+            {spec.rigging.use && (
+              <p className="kx-studio__inline-warn">
+                리깅 6.5~8.5m: 구조계산서 D-7 제출 필요
+              </p>
+            )}
+          </Accordion>
+
+          <Accordion
+            title="자재"
+            open={open.material}
+            onToggle={() => setOpen((o) => ({ ...o, material: !o.material }))}
+          >
+            <Field label="벽체 마감">
+              <select
+                value={spec.materials[0]?.finish}
+                onChange={(e) =>
+                  setSpec((s) => ({
+                    ...s,
+                    materials: [{ ...s.materials[0], finish: e.target.value }],
+                  }))
+                }
+              >
+                <option value="matte_white">무광 화이트</option>
+                <option value="wood">우드</option>
+                <option value="metal">메탈</option>
+              </select>
+            </Field>
+            <label className="kx-studio__toggle kx-studio__toggle--req">
+              <input
+                type="checkbox"
+                checked={spec.materials[0]?.fireRetardant ?? false}
+                onChange={(e) =>
+                  setSpec((s) => ({
+                    ...s,
+                    materials: [{ ...s.materials[0], fireRetardant: e.target.checked }],
+                  }))
+                }
+              />
+              방염 자재 사용 확인 (필수)
+            </label>
+          </Accordion>
+
+          <Accordion
+            title="조명"
+            open={open.lighting}
+            onToggle={() => setOpen((o) => ({ ...o, lighting: !o.lighting }))}
+          >
+            <div className="kx-studio__seg" role="radiogroup" aria-label="조명 모드">
+              {(['day', 'night'] as const).map((m) => (
+                <button
+                  key={m}
+                  role="radio"
+                  aria-checked={spec.lightingMode === m}
+                  className={spec.lightingMode === m ? 'is-active' : ''}
+                  onClick={() => setSpec((s) => ({ ...s, lightingMode: m }))}
+                >
+                  {m === 'day' ? '주간' : '야간'}
+                </button>
+              ))}
+            </div>
+          </Accordion>
+        </aside>
+
+        {/* 중앙: 4샷 그리드 + Before/After */}
+        <section className="kx-studio__hero">
+          <div className="kx-studio__grid">
+            {SHOTS.map((shot) => {
+              const job = jobs[shot.preset];
+              return (
+                <div className="kx-studio__tile" key={shot.preset}>
+                  {job ? (
+                    <AiImage
+                      imageUrl={job.imageUrl}
+                      status={job.status}
+                      watermarkText={job.watermarkText}
+                      notice={job.notice}
+                      shotLabel={shot.label}
+                      versionTag="설계 v2"
+                      onRetry={() => generateSingle(shot.preset)}
+                      alt={`${shot.label} 예상 이미지`}
+                    />
+                  ) : MOCK_SHOT_IMG[shot.preset] ? (
+                    <AiImage
+                      imageUrl={MOCK_SHOT_IMG[shot.preset]}
+                      status="DONE"
+                      watermarkText="AI 생성 예상 이미지"
+                      notice="AI 예시 이미지 — 실제 부스 렌더는 ‘이 뷰 생성’으로 요청하세요. 시공 기준은 도면입니다."
+                      shotLabel={shot.label}
+                      versionTag="설계 v2"
+                      sample
+                      onGenerate={() => generateSingle(shot.preset)}
+                      alt={`${shot.label} 예시 이미지`}
+                    />
+                  ) : (
+                    <div className="kx-studio__tile-empty">
+                      <div className="kx-studio__tile-icon" aria-hidden="true">✦</div>
+                      <span className="kx-studio__tile-label">{shot.label}</span>
+                      <button onClick={() => generateSingle(shot.preset)}>✦ 클릭해 생성</button>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Before/After 슬라이더 (S5) */}
+          <div className="kx-studio__compare">
+            <div className="kx-studio__compare-head">
+              <AiLabel>S5 Before / After</AiLabel>
+              {!afterReal && <span className="kx-studio__compare-note">예시 · S1 생성 시 실 이미지로 교체</span>}
+            </div>
+            <CompareSlider
+              beforeSrc={BEFORE_EMPTY_HALL}
+              afterSrc={afterSrc || AFTER_PLACEHOLDER}
+              beforeLabel="시공 전"
+              afterLabel="시공 후"
+              afterOverlay={
+                <>
+                  <div className="kx-studio__wm" aria-hidden="true">
+                    {s1?.watermarkText ?? 'AI 생성 예상 이미지'}
+                  </div>
+                  <span className="kx-studio__after-ai">
+                    <AiLabel>{afterReal ? 'AI 생성' : '예시'}</AiLabel>
+                  </span>
+                </>
+              }
+            />
+            <p className="kx-studio__compare-notice">
+              {s1?.notice ??
+                'AI 생성 이미지는 계약·심사 서류에 사용할 수 없습니다 — 시공 기준은 도면입니다'}
+            </p>
+          </div>
+        </section>
+      </div>
+
+      {/* 하단 고정 바: 규정 사전검증 요약 + 컨펌 CTA */}
+      <footer className="kx-studio__footer">
+        <div className="kx-studio__precheck">
+          <Button variant="ghost" onClick={runPrecheck} disabled={prechecking}>
+            {prechecking ? '검증 중…' : '규정 사전검증'}
+          </Button>
+          {report ? (
+            <div className="kx-studio__chips tnum">
+              <span className="kx-chip kx-chip--pass">통과 {passCount}</span>
+              {warnCount > 0 && <span className="kx-chip kx-chip--warn">경고 {warnCount}</span>}
+              {blockCount > 0 && <span className="kx-chip kx-chip--block">차단 {blockCount}</span>}
+              {report.violations.some((v) => v.requiresDocument) && (
+                <span className="kx-chip kx-chip--doc">구조계산서 D-7 필요</span>
+              )}
+            </div>
+          ) : (
+            <span className="kx-studio__precheck-hint">사전검증을 실행하세요</span>
+          )}
+        </div>
+        <Button disabled={!!report && !submittable} onClick={() => setConfirmOpen(true)}>
+          장치업체에 컨펌 요청
+        </Button>
+      </footer>
+
+      {notice && (
+        <p className="kx-studio__banner" role="status">
+          {notice}
+        </p>
+      )}
+
+      {/* 컨펌 모달 — "시공 기준은 도면입니다" 동의 필수 */}
+      {confirmOpen && (
+        <div className="kx-modal" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
+          <div className="kx-modal__backdrop" onClick={() => setConfirmOpen(false)} />
+          <div className="kx-studio__confirm">
+            <h3 id="confirm-title">컨펌 요청</h3>
+            <p>
+              장치업체에 이 설계안의 컨펌을 요청합니다. AI 예상 사진은 참고용이며 실제 시공 기준은
+              도면입니다.
+            </p>
+            <label className="kx-studio__toggle kx-studio__toggle--req">
+              <input
+                type="checkbox"
+                checked={confirmAgree}
+                onChange={(e) => setConfirmAgree(e.target.checked)}
+              />
+              시공 기준은 도면임을 확인했습니다 (필수)
+            </label>
+            <div className="kx-modal__actions">
+              <Button variant="ghost" onClick={() => setConfirmOpen(false)}>
+                취소
+              </Button>
+              <Button
+                disabled={!confirmAgree}
+                onClick={() => {
+                  setConfirmOpen(false);
+                  setNotice('컨펌 요청이 전송되었습니다.');
+                }}
+              >
+                컨펌 요청 전송
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const ZONE_LABEL: Record<string, string> = {
+  demo: '시연존',
+  consult: '상담존',
+  reception: '안내데스크',
+  storage: '창고',
+};
+
+function Accordion({
+  title,
+  open,
+  onToggle,
+  children,
+}: {
+  title: string;
+  open: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="kx-acc">
+      <button
+        className="kx-acc__head"
+        aria-expanded={open}
+        onClick={onToggle}
+        type="button"
+      >
+        <span>{title}</span>
+        <span className="kx-acc__chevron" aria-hidden="true">
+          {open ? '▾' : '▸'}
+        </span>
+      </button>
+      {open && <div className="kx-acc__body">{children}</div>}
+    </section>
+  );
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <label className="kx-field-block">
+      <span className="kx-field-block__label">{label}</span>
+      {children}
+    </label>
+  );
+}
diff --git a/src/frontend/src/screens/design/placeholders.ts b/src/frontend/src/screens/design/placeholders.ts
new file mode 100644
index 0000000..e812e8d
--- /dev/null
+++ b/src/frontend/src/screens/design/placeholders.ts
@@ -0,0 +1,42 @@
+/*
+ * Before/After 슬라이더 + 4샷 그리드용 이미지.
+ * ── Stitch booth_design_studio 산출 이미지(실 KINTEX 촬영본)를 public/mock/ 에 번들 ──
+ *   · 실 RenderJob DONE 시 해당 타일/after는 실 imageUrl로 대체된다.
+ *   · 번들 이미지도 "AI 생성 예상 이미지" 워터마크·고지문을 상시 노출한다(계약).
+ * BEFORE_EMPTY_HALL 은 백엔드/번들 부재 시 인라인 SVG 폴백.
+ */
+function svgDataUri(svg: string): string {
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+
+const BASE = `${import.meta.env.BASE_URL}mock/booth_design_studio`;
+
+/** Stitch 4샷 예시 이미지(번들). S1·S2·S3 채움, S4는 빈 상태(생성 유도). */
+export const MOCK_SHOT_IMG: Record<string, string> = {
+  S1: `${BASE}/img1.jpg`, // 부스 정면 (전시홀 내부)
+  S2: `${BASE}/img2.jpg`, // 야간 점등
+  S3: `${BASE}/img3.jpg`, // 통로 뷰
+};
+
+/** Before/After — after 기본 프리뷰(번들). */
+export const AFTER_SAMPLE = `${BASE}/img1.jpg`;
+
+/** 시공 전 — 빈 홀 콘크리트 바닥(격자) SVG 폴백. */
+export const BEFORE_EMPTY_HALL = svgDataUri(
+  `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='360'>
+    <rect width='640' height='360' fill='#d9d5cf'/>
+    <g stroke='#b8b2a8' stroke-width='1'>
+      ${Array.from({ length: 12 }, (_, i) => `<line x1='${i * 55}' y1='0' x2='${i * 55}' y2='360'/>`).join('')}
+      ${Array.from({ length: 7 }, (_, i) => `<line x1='0' y1='${i * 55}' x2='640' y2='${i * 55}'/>`).join('')}
+    </g>
+    <text x='320' y='185' fill='#7a746a' font-family='sans-serif' font-size='18' text-anchor='middle'>시공 전 · 빈 홀 바닥</text>
+  </svg>`,
+);
+
+/** 시공 후 자리 표시(S1 미생성·번들 부재). */
+export const AFTER_PLACEHOLDER = svgDataUri(
+  `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='360'>
+    <rect width='640' height='360' fill='#1c2536'/>
+    <text x='320' y='185' fill='#8aa0c6' font-family='sans-serif' font-size='18' text-anchor='middle'>예상 사진 생성 후 표시</text>
+  </svg>`,
+);
diff --git a/src/frontend/src/screens/design/studio.css b/src/frontend/src/screens/design/studio.css
new file mode 100644
index 0000000..3ce3889
--- /dev/null
+++ b/src/frontend/src/screens/design/studio.css
@@ -0,0 +1,344 @@
+.kx-studio {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+/* 상단 */
+.kx-studio__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  border-bottom: var(--border-card);
+  background: var(--color-white);
+}
+.kx-studio__ctx {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-studio__ctx h2 {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-studio__ctx-sub {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-studio__back {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  border-radius: var(--radius-sm);
+  color: var(--color-neutral-700);
+  font-size: 16px;
+  cursor: pointer;
+}
+.kx-studio__back:hover {
+  background: var(--color-neutral-050);
+}
+.kx-studio__ctx-div {
+  width: 1px;
+  height: 24px;
+  background: var(--color-neutral-200);
+}
+.kx-studio__ver-select {
+  padding: 5px 10px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  background: var(--color-white);
+}
+.kx-studio__tile-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent);
+  font-size: 20px;
+}
+
+.kx-studio__body {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* 좌: 스펙 아코디언 */
+.kx-studio__spec {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  overflow-y: auto;
+  padding-right: var(--space-1);
+}
+.kx-acc {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow: hidden;
+}
+.kx-acc__head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border: none;
+  background: transparent;
+  font-size: var(--fs-h3);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-acc__chevron {
+  color: var(--color-neutral-500);
+}
+.kx-acc__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: 0 var(--space-4) var(--space-4);
+}
+.kx-field-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.kx-field-block__label {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-field-block input[type='text'],
+.kx-field-block input[type='number'],
+.kx-field-block input:not([type]),
+.kx-field-block select {
+  padding: 8px 10px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+  width: 100%;
+}
+.kx-studio__ratio {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-studio__ratio input[type='range'] {
+  flex: 1;
+}
+.kx-studio__ratio span {
+  width: 42px;
+  text-align: right;
+  color: var(--color-neutral-700);
+}
+.kx-studio__inline-warn {
+  font-size: var(--fs-caption);
+  color: var(--color-violation-warn-text);
+  background: var(--color-violation-warn-bg);
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+}
+.kx-studio__toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-studio__toggle--req {
+  font-weight: 600;
+}
+.kx-studio__seg {
+  display: inline-flex;
+  gap: 3px;
+  background: var(--color-neutral-100);
+  padding: 3px;
+  border-radius: var(--radius-sm);
+}
+.kx-studio__seg button {
+  border: none;
+  background: transparent;
+  padding: 6px 18px;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-studio__seg button.is-active {
+  background: var(--color-white);
+  color: var(--color-primary-700);
+  box-shadow: var(--shadow-level2);
+}
+
+/* 중앙: 히어로 */
+.kx-studio__hero {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  overflow-y: auto;
+  min-height: 0;
+}
+.kx-studio__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+}
+.kx-studio__tile-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  aspect-ratio: 4 / 3;
+  border: 1px dashed var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  background: var(--color-neutral-050);
+  color: var(--color-neutral-500);
+}
+.kx-studio__tile-label {
+  font-weight: 600;
+}
+.kx-studio__tile-empty button {
+  border: 1px solid var(--color-ai-accent);
+  color: var(--color-ai-accent);
+  background: var(--color-white);
+  border-radius: var(--radius-sm);
+  padding: 6px 14px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+}
+
+/* Before/After */
+.kx-studio__compare {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-studio__compare-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-studio__compare-note {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-studio__wm {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(-24deg);
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  pointer-events: none;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+.kx-studio__after-ai {
+  position: absolute;
+  top: var(--space-2);
+  left: var(--space-2);
+}
+.kx-studio__compare-notice {
+  font-size: 11px;
+  line-height: 15px;
+  color: var(--color-neutral-500);
+}
+
+/* 하단 고정 바 */
+.kx-studio__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-5);
+  border-top: var(--border-card);
+  background: var(--color-white);
+}
+.kx-studio__precheck {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-studio__precheck-hint {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-studio__chips {
+  display: flex;
+  gap: var(--space-2);
+}
+.kx-chip {
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+}
+.kx-chip--pass {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kx-chip--warn {
+  background: var(--color-violation-warn-bg);
+  color: var(--color-violation-warn-text);
+}
+.kx-chip--block {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+.kx-chip--doc {
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent);
+  border: 1px solid var(--color-ai-accent);
+}
+.kx-studio__banner {
+  margin: 0 var(--space-5) var(--space-3);
+  font-size: var(--fs-caption);
+  color: var(--color-primary-700);
+  background: var(--color-primary-050);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+}
+
+/* 컨펌 모달 */
+.kx-studio__confirm {
+  position: relative;
+  z-index: 1;
+  width: min(480px, 92vw);
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  box-shadow: var(--shadow-level2);
+}
+.kx-studio__confirm h3 {
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+}
+
+@media (max-width: 1200px) {
+  .kx-studio__body {
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+  }
+  .kx-studio__spec {
+    overflow-y: visible;
+  }
+}
diff --git a/src/frontend/src/screens/docs/DocsMilestonePage.tsx b/src/frontend/src/screens/docs/DocsMilestonePage.tsx
new file mode 100644
index 0000000..3cf99d2
--- /dev/null
+++ b/src/frontend/src/screens/docs/DocsMilestonePage.tsx
@@ -0,0 +1,347 @@
+/*
+ * SCR-22 서류·마일스톤 워크플로 [M6]. Stitch scr_22_docs_milestones 이식.
+ * 진입: 주최자 대시보드 마일스톤 노드 / 사이드바 "서류·마일스톤" (design.md §3 SCR-22).
+ * 구성: ①상단 마일스톤 진행 바(D-150→D-0) ②좌 신고서류 체크리스트(상태·D-데이·액션)
+ *       ③우 AI 서류 검수 카드(불일치·누락·kxwp 안내) + 전체 공정률.
+ * ★ 실 API 배선(useQuery, 로딩/빈/에러 3상태) — GET /milestones · /documents · /documents/review.
+ *   HWP/PDF 생성은 파일 큐 후속 → 해당 버튼 disabled + 툴팁 유지.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { AiLabel, DdayChip, StatusBadge, type FlowStatus } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import {
+  IconCheck,
+  IconDocument,
+  IconSpark,
+  IconTrendUp,
+  IconWarning,
+} from '../../components/ui/icons';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { docsApi, type RequiredDocRow } from './docsApi';
+import './docs.css';
+
+type DocAction = 'view' | 'hwp' | 'write' | 'fix';
+
+const ACTION_LABEL: Record<DocAction, string> = {
+  view: '보기',
+  hwp: 'HWP 생성',
+  write: '작성',
+  fix: '수정',
+};
+
+const RENDER_TOOLTIP = 'HWP/PDF 생성은 파일 큐 연동 후속(준비중)';
+
+/** 서류 상태 → 리스트 액션 파생. pending 은 액션 없음(준비중 표기). */
+function actionFor(status: RequiredDocRow['status']): DocAction | undefined {
+  switch (status) {
+    case 'approved':
+      return 'view';
+    case 'submitted':
+      return 'hwp';
+    case 'draft':
+      return 'write';
+    case 'rejected':
+      return 'fix';
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * SCR-22 서류·마일스톤 워크플로 페이지.
+ * onOpenAuthoring: [작성] 클릭 시 SCR-23 신고서류 작성으로 이동(라우팅은 App 소관 — 미주입 시 토스트).
+ */
+export function DocsMilestonePage({ onOpenAuthoring }: { onOpenAuthoring?: (docType: string) => void }) {
+  const eventId = useResolvedEventId();
+  const [toast, setToast] = useState<string | null>(null);
+
+  const milestonesQ = useQuery({
+    queryKey: ['docs-milestones', eventId],
+    queryFn: () => docsApi.milestones(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+  const docsQ = useQuery({
+    queryKey: ['docs-documents', eventId],
+    queryFn: () => docsApi.documents(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+  const reviewQ = useQuery({
+    queryKey: ['docs-review', eventId],
+    queryFn: () => docsApi.review(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 2200);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  const milestones = milestonesQ.data ?? [];
+  const nextDday = useMemo(() => {
+    const active = milestones.find((m) => m.state === 'active') ?? milestones.find((m) => m.state === 'todo');
+    return active?.dueDate ? daysUntil(active.dueDate) : null;
+  }, [milestones]);
+
+  function handleAction(doc: RequiredDocRow, action: DocAction) {
+    if (action === 'write' || action === 'fix') {
+      if (onOpenAuthoring) onOpenAuthoring(doc.docType);
+      else setToast(`${doc.name} 작성 화면(SCR-23)으로 이동`);
+      return;
+    }
+    if (action === 'view') {
+      setToast(`${doc.name} · 보기`);
+    }
+  }
+
+  const activeIdx = milestones.findIndex((m) => m.state === 'active');
+  const fillPct = activeIdx <= 0 ? 0 : (activeIdx / (milestones.length - 1)) * 100;
+
+  const listStatus: 'loading' | 'error' | 'success' = docsQ.isPending
+    ? 'loading'
+    : docsQ.isError
+      ? 'error'
+      : 'success';
+  const docs = docsQ.data ?? [];
+
+  return (
+    <div className="kx-page">
+      <header className="kx-doc__head">
+        <div>
+          <h1 className="kx-doc__title">서류·마일스톤</h1>
+          <p className="kx-doc__subtitle">신고서류 준비 현황 · AI 서류 검수</p>
+        </div>
+      </header>
+
+      {/* 마일스톤 진행 바 */}
+      <section className="kx-card" aria-label="전시 마일스톤 현황">
+        <div className="kx-doc__miles-head">
+          <span className="kx-doc__miles-title">
+            <IconDocument size={18} /> 전시 마일스톤 현황
+          </span>
+          {nextDday != null && nextDday >= 0 && <DdayChip dday={nextDday} />}
+        </div>
+        {milestonesQ.isPending ? (
+          <Skeleton height={72} />
+        ) : milestones.length === 0 ? (
+          <EmptyState
+            title="구성된 마일스톤이 없습니다"
+            description="행사를 생성하면 마일스톤이 자동 구성됩니다."
+          />
+        ) : (
+          <div className="kx-doc__stepper">
+            <span className="kx-doc__track" aria-hidden="true" />
+            <span
+              className="kx-doc__track-fill"
+              aria-hidden="true"
+              style={{ width: `calc((100% - var(--space-5) * 2) * ${fillPct / 100})` }}
+            />
+            {milestones.map((m) => (
+              <div key={m.label} className={`kx-doc__step is-${m.state}`}>
+                <span className="kx-doc__node">
+                  {m.state === 'done' ? (
+                    <IconCheck size={20} />
+                  ) : (
+                    <span className="tnum" aria-hidden="true">
+                      {m.state === 'active' ? '⏳' : '·'}
+                    </span>
+                  )}
+                </span>
+                <span className="kx-doc__step-label">{m.label}</span>
+                <span className="kx-doc__step-sub">{m.sub}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* 서류 리스트 3상태 */}
+      {listStatus === 'loading' && (
+        <div className="kx-doc__grid" aria-busy="true">
+          <section className="kx-card">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} style={{ padding: '12px 0' }}>
+                <Skeleton height={22} />
+              </div>
+            ))}
+          </section>
+          <section className="kx-card">
+            <Skeleton height={120} />
+          </section>
+        </div>
+      )}
+
+      {listStatus === 'error' && (
+        <ErrorState message="서류 현황을 불러오지 못했습니다." onRetry={() => docsQ.refetch()} />
+      )}
+
+      {listStatus === 'success' && (
+        <div className="kx-doc__grid">
+          {/* 신고서류 체크리스트 */}
+          <section className="kx-card kx-doc__list" aria-label="신고서류 체크리스트">
+            <div className="kx-doc__list-head">
+              <div>
+                <h2>신고서류 체크리스트</h2>
+                <p>전시회 개최를 위한 필수 서류 목록 및 승인 현황</p>
+              </div>
+              <ChecklistProgress docs={docs} />
+            </div>
+
+            {docs.length === 0 ? (
+              <EmptyState
+                title="구성된 서류가 없습니다"
+                description="행사를 생성하면 마일스톤·서류가 자동 구성됩니다."
+              />
+            ) : (
+              docs.map((doc) => <DocRow key={doc.docType} doc={doc} onAction={handleAction} />)
+            )}
+          </section>
+
+          {/* 우측 — AI 서류 검수 + 공정률 */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
+            <section className="kx-doc__ai" aria-label="AI 서류 검수">
+              <div className="kx-doc__ai-head">
+                <IconSpark size={18} />
+                <h2>AI 서류 검수</h2>
+                <AiLabel>AI 검수</AiLabel>
+              </div>
+              {reviewQ.isPending ? (
+                <Skeleton height={96} />
+              ) : (reviewQ.data?.issues ?? []).length === 0 ? (
+                <p className="kx-doc__issue-desc">검출된 불일치·누락이 없습니다.</p>
+              ) : (
+                (reviewQ.data?.issues ?? []).map((iss) => (
+                  <div key={iss.title} className={`kx-doc__issue kx-doc__issue--${iss.tone}`}>
+                    <span className="kx-doc__issue-icon" aria-hidden="true">
+                      <IconWarning size={18} />
+                    </span>
+                    <div>
+                      <p className="kx-doc__issue-title">{iss.title}</p>
+                      <p className="kx-doc__issue-desc">{iss.description}</p>
+                    </div>
+                  </div>
+                ))
+              )}
+              <div className="kx-doc__note">
+                <p className="kx-doc__note-title">
+                  <IconDocument size={14} /> kxwp 제출 안내
+                </p>
+                <p className="kx-doc__note-body">
+                  작성 데이터를 기반으로 공문서 표준 서식(HWP/PDF)을 즉시 생성한 뒤, kxwp 시스템에
+                  수동 업로드하는 방식입니다.
+                </p>
+              </div>
+              <Button
+                variant="ai"
+                block
+                leadingIcon={<IconSpark size={16} />}
+                disabled
+                title={RENDER_TOOLTIP}
+              >
+                자동 문서 생성하기
+              </Button>
+            </section>
+
+            <section className="kx-doc__stat" aria-label="전체 공정률">
+              <p className="kx-doc__stat-label">전체 공정률</p>
+              <p className="kx-doc__stat-value tnum">
+                {reviewQ.isPending ? '—' : `${reviewQ.data?.progressPct ?? 0}%`}
+              </p>
+              <p className="kx-doc__stat-delta">
+                <IconTrendUp size={16} /> 준비중 제외 진척 기준
+              </p>
+            </section>
+          </div>
+        </div>
+      )}
+
+      {toast && (
+        <div className="kx-doc__toast" role="status">
+          {toast}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** 준비중(pending) 제외한 진척 집계. */
+function ChecklistProgress({ docs }: { docs: RequiredDocRow[] }) {
+  const total = docs.length;
+  const done = docs.filter((d) => d.status !== 'pending').length;
+  const pct = total ? Math.round((done / total) * 100) : 0;
+  return (
+    <div className="kx-doc__progress">
+      <span className="kx-doc__progress-num tnum">
+        {done}/{total} 완료
+      </span>
+      <span className="kx-doc__progress-track" aria-hidden="true">
+        <span className="kx-doc__progress-fill" style={{ width: `${pct}%` }} />
+      </span>
+    </div>
+  );
+}
+
+function DocRow({
+  doc,
+  onAction,
+}: {
+  doc: RequiredDocRow;
+  onAction: (d: RequiredDocRow, action: DocAction) => void;
+}) {
+  const isPending = doc.status === 'pending';
+  const action = actionFor(doc.status);
+  const rowCls = [
+    'kx-doc__row',
+    action === 'write' ? 'kx-doc__row--active' : '',
+    isPending ? 'kx-doc__row--muted' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const btnVariant =
+    action === 'write' ? 'primary' : action === 'fix' ? 'danger' : 'secondary';
+  // HWP/PDF 렌더 액션은 파일 큐 후속 → 비활성(툴팁).
+  const isRenderAction = action === 'hwp';
+
+  return (
+    <div className={rowCls}>
+      <div className="kx-doc__row-main">
+        <span className="kx-doc__doc-icon" aria-hidden="true">
+          <IconDocument size={18} />
+        </span>
+        <span className="kx-doc__doc-name">{doc.name}</span>
+        {doc.dday != null && <DdayChip dday={doc.dday} />}
+      </div>
+      <div className="kx-doc__row-actions">
+        {isPending ? (
+          <span className="kx-doc__pill-pending">준비중</span>
+        ) : (
+          <StatusBadge status={doc.status as FlowStatus} />
+        )}
+        {action && (
+          <Button
+            variant={btnVariant}
+            disabled={isRenderAction}
+            title={isRenderAction ? RENDER_TOOLTIP : undefined}
+            onClick={() => (isRenderAction ? undefined : onAction(doc, action))}
+          >
+            {ACTION_LABEL[action]}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** dueDate(YYYY-MM-DD)까지 남은 일수(음수 허용). */
+function daysUntil(dateStr: string): number {
+  const due = new Date(`${dateStr}T00:00:00`);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return Math.round((due.getTime() - today.getTime()) / 86_400_000);
+}
diff --git a/src/frontend/src/screens/docs/ReportAuthoringPage.tsx b/src/frontend/src/screens/docs/ReportAuthoringPage.tsx
new file mode 100644
index 0000000..9de20df
--- /dev/null
+++ b/src/frontend/src/screens/docs/ReportAuthoringPage.tsx
@@ -0,0 +1,495 @@
+/*
+ * SCR-23 신고서류 작성 (웹폼 → HWP/PDF) [M6 / F022]. Stitch scr_23_report_authoring 이식.
+ * 진입: SCR-22 서류·마일스톤에서 "[작성]" (design.md §3 SCR-23).
+ * 구성: ①좌 웹폼(섹션 아코디언 + AI 자동채움 + 필수 검증) ②우 실시간 A4 문서 미리보기
+ *       ③하단 고정 액션 바(임시 저장·HWP 생성·PDF 생성·제출 / kxwp 릴레이 안내).
+ * ★ 임시저장/제출은 실 API(POST /documents/{docType} — save|submit) 배선.
+ *   HWP/PDF 생성은 파일 큐 후속 → 해당 버튼 disabled + 툴팁 유지.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AiLabel } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
+import { ErrorState, Skeleton } from '../../components/ui/States';
+import { IconChevronDown, IconSpark, IconWarning } from '../../components/ui/icons';
+import { ApiRequestError } from '../../api/client';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { docsApi, type DocAction } from './docsApi';
+import './docs.css';
+
+const RENDER_TOOLTIP = 'HWP/PDF 생성은 파일 큐 연동 후속(준비중)';
+
+/** 서류 표시명 → doc_type 코드(백엔드 required_document.doc_type). 미매핑 시 재해대처계획서. */
+const DOC_TYPE_CODE: Record<string, string> = {
+  행사운영계획서: 'operation_plan',
+  부스배치도: 'booth_layout',
+  재해대처계획서: 'disaster_plan',
+  '리깅 구조계산서': 'rigging_calc',
+  '방화관리 책임서약서': 'fire_safety',
+  '주차관리 신청서': 'parking',
+  '보안요원 배치계획': 'security',
+  '위험물 반입신고서': 'hazmat',
+};
+
+interface ReportForm {
+  eventName: string;
+  eventDate: string;
+  venue: string;
+  visitors: string;
+  safetyManager: string;
+  safetyPhone: string;
+  guardCount: string;
+  fireStation: string;
+  policeStation: string;
+  medical: string;
+  hazardous: string;
+}
+
+const EMPTY_FORM: ReportForm = {
+  eventName: '',
+  eventDate: '',
+  venue: '제1전시장 1~3홀',
+  visitors: '',
+  safetyManager: '',
+  safetyPhone: '',
+  guardCount: '',
+  fireStation: '',
+  policeStation: '',
+  medical: '',
+  hazardous: '',
+};
+
+const AUTOFILL: ReportForm = {
+  eventName: '2026 스마트팩토리 코리아',
+  eventDate: '2026-08-11',
+  venue: '제1전시장 1~3홀',
+  visitors: '15000',
+  safetyManager: '김안전',
+  safetyPhone: '031-810-8000',
+  guardCount: '45',
+  fireStation: '고양소방서 (031-909-0119)',
+  policeStation: '일산동부경찰서 (031-8073-0112)',
+  medical: '현장 의무실 1개소 · 상주 간호사 2명',
+  hazardous: 'LPG 소형용기 2조, 배터리 시연 셀 (안전관리자 상시 배치)',
+};
+
+const VENUES = [
+  '제1전시장 1~3홀',
+  '제1전시장 4~5홀',
+  '제2전시장 7~8홀',
+  '제2전시장 9~10홀',
+];
+
+type SectionId = 'overview' | 'safety' | 'contact' | 'hazard';
+const SECTIONS: { id: SectionId; label: string }[] = [
+  { id: 'overview', label: '1. 행사 개요' },
+  { id: 'safety', label: '2. 안전 관리 담당' },
+  { id: 'contact', label: '3. 비상 연락 체계' },
+  { id: 'hazard', label: '4. 위험물 목록' },
+];
+
+/** 로컬 샘플 데이터의 로딩/성공/에러 3상태 시뮬레이션(실 API 호출 없음). */
+function useSampleReady() {
+  const [status, setStatus] = useState<'loading' | 'error' | 'success'>('loading');
+  const load = useCallback(() => {
+    setStatus('loading');
+    const t = setTimeout(() => setStatus('success'), 300);
+    return () => clearTimeout(t);
+  }, []);
+  useEffect(load, [load]);
+  return { status, retry: load };
+}
+
+/** 미리보기용 날짜 포맷: "2026-08-11" → "2026. 08. 11." */
+function fmtDate(v: string): string {
+  if (!v) return '—';
+  const [y, m, d] = v.split('-');
+  return `${y}. ${m}. ${d}.`;
+}
+
+export function ReportAuthoringPage({ docType = '재해대처계획서' }: { docType?: string }) {
+  const { status, retry } = useSampleReady();
+  const eventId = useResolvedEventId();
+  const queryClient = useQueryClient();
+  const docTypeCode = DOC_TYPE_CODE[docType] ?? 'disaster_plan';
+  const [form, setForm] = useState<ReportForm>(EMPTY_FORM);
+  const [open, setOpen] = useState<Record<SectionId, boolean>>({
+    overview: true,
+    safety: false,
+    contact: false,
+    hazard: false,
+  });
+  const [showErrors, setShowErrors] = useState(false);
+  const [toast, setToast] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 2200);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  const set = <K extends keyof ReportForm>(k: K, v: ReportForm[K]) =>
+    setForm((f) => ({ ...f, [k]: v }));
+  const toggle = (id: SectionId) => setOpen((o) => ({ ...o, [id]: !o[id] }));
+
+  const invalid = {
+    eventName: !form.eventName.trim(),
+    eventDate: !form.eventDate,
+    safetyManager: !form.safetyManager.trim(),
+  };
+  const hasError = Object.values(invalid).some(Boolean);
+
+  const transition = useMutation({
+    mutationFn: (action: DocAction) =>
+      docsApi.transition(eventId as string, docTypeCode, action),
+    onSuccess: (_data, action) => {
+      // 목록(SCR-22) 캐시 무효화 — 되돌아갈 때 상태 최신화.
+      queryClient.invalidateQueries({ queryKey: ['docs-documents', eventId] });
+      queryClient.invalidateQueries({ queryKey: ['docs-review', eventId] });
+      setToast(
+        action === 'submit'
+          ? '제출 완료 — kxwp에 업로드할 파일을 생성하세요.'
+          : '임시 저장 완료',
+      );
+    },
+    onError: (e) => {
+      const msg = e instanceof ApiRequestError ? e.message : '저장에 실패했습니다.';
+      setToast(msg);
+    },
+  });
+
+  function saveDraft() {
+    if (!eventId) {
+      setToast('대상 행사를 확인할 수 없습니다.');
+      return;
+    }
+    transition.mutate('save');
+  }
+
+  function submit() {
+    if (hasError) {
+      setShowErrors(true);
+      setOpen((o) => ({ ...o, overview: true, safety: true }));
+      setToast('필수 항목을 입력하세요.');
+      return;
+    }
+    if (!eventId) {
+      setToast('대상 행사를 확인할 수 없습니다.');
+      return;
+    }
+    transition.mutate('submit');
+  }
+
+  if (status === 'loading') {
+    return (
+      <div className="kx-page" aria-busy="true">
+        <div className="kx-rep">
+          <div className="kx-rep__form">
+            <Skeleton height={56} />
+            <Skeleton height={220} />
+          </div>
+          <div className="kx-card">
+            <Skeleton height={420} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+  if (status === 'error') {
+    return (
+      <div className="kx-page">
+        <ErrorState message="작성 서식을 불러오지 못했습니다." onRetry={retry} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="kx-page">
+      <header className="kx-doc__head">
+        <div>
+          <h1 className="kx-doc__title">{docType} 작성</h1>
+          <p className="kx-doc__subtitle">행사 성격에 맞는 안전 관리 계획을 수립하세요 · 웹폼 → HWP/PDF</p>
+        </div>
+      </header>
+
+      <div className="kx-rep">
+        {/* 좌: 폼 */}
+        <form className="kx-rep__form" onSubmit={(e) => e.preventDefault()}>
+          <Button
+            type="button"
+            variant="ai"
+            className="kx-rep__autofill"
+            leadingIcon={<IconSpark size={16} />}
+            onClick={() => {
+              setForm(AUTOFILL);
+              setShowErrors(false);
+              setToast('행사 데이터로 자동 채움 완료 (AI)');
+            }}
+          >
+            행사 데이터로 자동 채움
+          </Button>
+          <AiLabel>AI 자동 채움 — 검토 후 제출</AiLabel>
+
+          {SECTIONS.map((sec) => (
+            <div key={sec.id} className={`kx-rep__acc ${open[sec.id] ? 'is-open' : ''}`}>
+              <button
+                type="button"
+                className="kx-rep__acc-head"
+                aria-expanded={open[sec.id]}
+                onClick={() => toggle(sec.id)}
+              >
+                <h3>{sec.label}</h3>
+                <span className="kx-rep__chev" aria-hidden="true">
+                  <IconChevronDown size={20} />
+                </span>
+              </button>
+              {open[sec.id] && (
+                <div className="kx-rep__acc-body">
+                  {sec.id === 'overview' && (
+                    <>
+                      <label className="kx-doc__field kx-doc__field--full">
+                        <span className="kx-doc__label">행사명 *</span>
+                        <input
+                          className={`kx-doc__input ${showErrors && invalid.eventName ? 'is-invalid' : ''}`}
+                          value={form.eventName}
+                          placeholder="예: 2026 스마트팩토리 코리아"
+                          onChange={(e) => set('eventName', e.target.value)}
+                        />
+                        {showErrors && invalid.eventName && (
+                          <span className="kx-doc__err">행사명은 필수입니다.</span>
+                        )}
+                      </label>
+                      <label className="kx-doc__field">
+                        <span className="kx-doc__label">개최 일시 *</span>
+                        <input
+                          type="date"
+                          className={`kx-doc__input ${showErrors && invalid.eventDate ? 'is-invalid' : ''}`}
+                          value={form.eventDate}
+                          onChange={(e) => set('eventDate', e.target.value)}
+                        />
+                        {showErrors && invalid.eventDate && (
+                          <span className="kx-doc__err">개최 일시는 필수입니다.</span>
+                        )}
+                      </label>
+                      <label className="kx-doc__field">
+                        <span className="kx-doc__label">장소</span>
+                        <select
+                          className="kx-doc__select"
+                          value={form.venue}
+                          onChange={(e) => set('venue', e.target.value)}
+                        >
+                          {VENUES.map((v) => (
+                            <option key={v} value={v}>
+                              {v}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                      <label className="kx-doc__field kx-doc__field--full">
+                        <span className="kx-doc__label">예상 관람객 수(명)</span>
+                        <input
+                          type="number"
+                          min={0}
+                          className="kx-doc__input"
+                          value={form.visitors}
+                          placeholder="15000"
+                          onChange={(e) => set('visitors', e.target.value)}
+                        />
+                      </label>
+                    </>
+                  )}
+
+                  {sec.id === 'safety' && (
+                    <>
+                      <label className="kx-doc__field">
+                        <span className="kx-doc__label">총괄 안전책임자 *</span>
+                        <input
+                          className={`kx-doc__input ${showErrors && invalid.safetyManager ? 'is-invalid' : ''}`}
+                          value={form.safetyManager}
+                          placeholder="성명"
+                          onChange={(e) => set('safetyManager', e.target.value)}
+                        />
+                        {showErrors && invalid.safetyManager && (
+                          <span className="kx-doc__err">안전책임자는 필수입니다.</span>
+                        )}
+                      </label>
+                      <label className="kx-doc__field">
+                        <span className="kx-doc__label">비상 연락처</span>
+                        <input
+                          className="kx-doc__input"
+                          value={form.safetyPhone}
+                          placeholder="031-000-0000"
+                          onChange={(e) => set('safetyPhone', e.target.value)}
+                        />
+                      </label>
+                      <label className="kx-doc__field kx-doc__field--full">
+                        <span className="kx-doc__label">현장 안전요원 수(명)</span>
+                        <input
+                          type="number"
+                          min={0}
+                          className="kx-doc__input"
+                          value={form.guardCount}
+                          placeholder="45"
+                          onChange={(e) => set('guardCount', e.target.value)}
+                        />
+                      </label>
+                    </>
+                  )}
+
+                  {sec.id === 'contact' && (
+                    <>
+                      <label className="kx-doc__field kx-doc__field--full">
+                        <span className="kx-doc__label">관할 소방서</span>
+                        <input
+                          className="kx-doc__input"
+                          value={form.fireStation}
+                          placeholder="소방서명 · 연락처"
+                          onChange={(e) => set('fireStation', e.target.value)}
+                        />
+                      </label>
+                      <label className="kx-doc__field kx-doc__field--full">
+                        <span className="kx-doc__label">관할 경찰서</span>
+                        <input
+                          className="kx-doc__input"
+                          value={form.policeStation}
+                          placeholder="경찰서명 · 연락처"
+                          onChange={(e) => set('policeStation', e.target.value)}
+                        />
+                      </label>
+                      <label className="kx-doc__field kx-doc__field--full">
+                        <span className="kx-doc__label">의무·응급 체계</span>
+                        <input
+                          className="kx-doc__input"
+                          value={form.medical}
+                          placeholder="현장 의무실 · 상주 인력"
+                          onChange={(e) => set('medical', e.target.value)}
+                        />
+                      </label>
+                    </>
+                  )}
+
+                  {sec.id === 'hazard' && (
+                    <label className="kx-doc__field kx-doc__field--full">
+                      <span className="kx-doc__label">위험물 목록·관리 방안</span>
+                      <textarea
+                        className="kx-doc__textarea"
+                        value={form.hazardous}
+                        placeholder="반입 위험물 종류·수량·안전관리 방안을 기재하세요."
+                        onChange={(e) => set('hazardous', e.target.value)}
+                      />
+                    </label>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </form>
+
+        {/* 우: A4 실시간 미리보기 */}
+        <div className="kx-rep__preview" aria-label="문서 미리보기">
+          <article className="kx-rep__a4">
+            <div className="kx-rep__a4-title">
+              <h2>{docType}</h2>
+            </div>
+            <table className="kx-rep__table">
+              <tbody>
+                <tr>
+                  <th>행 사 명</th>
+                  <td colSpan={3}>{form.eventName || '—'}</td>
+                </tr>
+                <tr>
+                  <th>일 시</th>
+                  <td>{fmtDate(form.eventDate)}</td>
+                  <th>장 소</th>
+                  <td>{form.venue}</td>
+                </tr>
+                <tr>
+                  <th>주최/주관</th>
+                  <td>KINTEX 조직위원회</td>
+                  <th>예상인원</th>
+                  <td>
+                    {form.visitors
+                      ? `${Number(form.visitors).toLocaleString()}명`
+                      : '—'}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <section>
+              <h4>1. 안전관리 조직체계</h4>
+              <div className="kx-rep__box">
+                총괄 안전책임자 {form.safetyManager || '(미지정)'}
+                {form.safetyPhone ? ` (${form.safetyPhone})` : ''} 지휘 하에 현장 안전요원{' '}
+                {form.guardCount || '0'}인을 배치한다. 각 홀 출입구에 안전요원을 상주시켜 밀집도를
+                관리하며, 정기 장내 방송으로 안전 수칙을 안내한다.
+              </div>
+            </section>
+
+            <section>
+              <h4>2. 비상 연락 체계</h4>
+              <ul>
+                <li>관할 소방서: {form.fireStation || '—'}</li>
+                <li>관할 경찰서: {form.policeStation || '—'}</li>
+                <li>의무·응급: {form.medical || '—'}</li>
+              </ul>
+            </section>
+
+            <section>
+              <h4>3. 주요 재해대처 방안</h4>
+              <ul>
+                <li>화재 시: 소방시설 즉시 가동 및 안내 방송을 통한 관람객 대피 유도</li>
+                <li>응급환자 발생 시: 현장 의무실 이송 및 119 구급대 협조 요청</li>
+                <li>정전 시: 비상 발전기 가동 및 유도등 점등 확인</li>
+              </ul>
+            </section>
+
+            <section>
+              <h4>4. 위험물 관리</h4>
+              <div className="kx-rep__box">{form.hazardous || '해당 없음'}</div>
+            </section>
+
+            <div className="kx-rep__sign">
+              <div className="kx-rep__sign-date">{fmtDate(form.eventDate)}</div>
+              <div className="kx-rep__sign-row">
+                <span className="kx-rep__sign-name">주식회사 킨텍스 대표이사</span>
+                <span className="kx-rep__stamp" aria-hidden="true">
+                  KINTEX
+                  <br />
+                  직인
+                </span>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      {/* 하단 고정 액션 바 */}
+      <div className="kx-rep__bar">
+        <p className="kx-rep__bar-note">
+          <IconWarning size={16} /> 제출은 kxwp 업로드용 파일 생성 방식입니다
+        </p>
+        <div className="kx-rep__bar-actions">
+          <Button variant="ghost" onClick={saveDraft} disabled={transition.isPending}>
+            임시 저장
+          </Button>
+          <Button variant="secondary" disabled title={RENDER_TOOLTIP}>
+            HWP 생성
+          </Button>
+          <Button variant="secondary" disabled title={RENDER_TOOLTIP}>
+            PDF 생성
+          </Button>
+          <Button onClick={submit} disabled={transition.isPending}>
+            제출
+          </Button>
+        </div>
+      </div>
+
+      {toast && (
+        <div className="kx-doc__toast" role="status">
+          {toast}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/docs/docs.css b/src/frontend/src/screens/docs/docs.css
new file mode 100644
index 0000000..9b4d072
--- /dev/null
+++ b/src/frontend/src/screens/docs/docs.css
@@ -0,0 +1,600 @@
+/*
+ * SCR-22 서류·마일스톤 워크플로 · SCR-23 신고서류 작성 [M6] 전용 스타일.
+ * design.md §1 토큰만 참조(하드코딩 금지). shared.css 프리미티브(kx-page·kx-card·kx-bi__degraded·kx-barlist) 위에 얹는다.
+ * 클래스는 kx-doc__* / kx-rep__* 로 네임스페이스(다른 화면 CSS와 충돌 방지).
+ */
+@import '../shared.css';
+
+/* ── 공용 페이지 헤더 ── */
+.kx-doc__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-doc__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+}
+.kx-doc__subtitle {
+  margin-top: 2px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kx-doc__head-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+/* ── 공용 폼 필드(자립) ── */
+.kx-doc__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.kx-doc__field--full {
+  grid-column: 1 / -1;
+}
+.kx-doc__label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-doc__input,
+.kx-doc__select,
+.kx-doc__textarea {
+  height: 40px;
+  padding: 0 var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  font-family: inherit;
+  width: 100%;
+}
+.kx-doc__textarea {
+  height: auto;
+  min-height: 88px;
+  padding: var(--space-2) var(--space-3);
+  line-height: var(--lh-body);
+  resize: vertical;
+}
+.kx-doc__input:focus,
+.kx-doc__select:focus,
+.kx-doc__textarea:focus {
+  outline: 2px solid var(--color-primary-100);
+  border-color: var(--color-primary-600);
+}
+.kx-doc__input.is-invalid,
+.kx-doc__select.is-invalid {
+  border-color: var(--color-error);
+}
+.kx-doc__err {
+  font-size: var(--fs-caption);
+  color: var(--color-error);
+}
+
+/* ============================================================
+ * SCR-22 서류·마일스톤
+ * ============================================================ */
+
+/* 마일스톤 진행 바 */
+.kx-doc__miles-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-5);
+}
+.kx-doc__miles-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-doc__stepper {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 var(--space-3);
+}
+.kx-doc__track,
+.kx-doc__track-fill {
+  position: absolute;
+  top: 19px;
+  left: var(--space-5);
+  right: var(--space-5);
+  height: 2px;
+  background: var(--color-neutral-200);
+  z-index: 0;
+}
+.kx-doc__track-fill {
+  right: auto;
+  background: var(--color-primary-600);
+}
+.kx-doc__step {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 6px;
+  flex: 1;
+}
+.kx-doc__node {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-neutral-100);
+  border: 2px solid var(--color-neutral-200);
+  color: var(--color-neutral-500);
+}
+.kx-doc__step.is-done .kx-doc__node {
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+  color: #fff;
+}
+.kx-doc__step.is-active .kx-doc__node {
+  background: var(--color-white);
+  border: 3px solid var(--color-warning);
+  color: var(--color-warning);
+  box-shadow: 0 0 0 4px #fff4e5;
+}
+.kx-doc__step-label {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-neutral-700);
+}
+.kx-doc__step.is-active .kx-doc__step-label {
+  color: var(--color-warning);
+}
+.kx-doc__step-sub {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+
+/* 2열 그리드 */
+.kx-doc__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1100px) {
+  .kx-doc__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 서류 체크리스트 */
+.kx-doc__list {
+  padding: 0;
+  overflow: hidden;
+}
+.kx-doc__list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-bottom: var(--border-card);
+}
+.kx-doc__list-head h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-doc__list-head p {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-doc__progress {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  white-space: nowrap;
+}
+.kx-doc__progress-num {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-primary-700);
+}
+.kx-doc__progress-track {
+  width: 120px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-100);
+  overflow: hidden;
+}
+.kx-doc__progress-fill {
+  display: block;
+  height: 100%;
+  background: var(--color-primary-600);
+}
+.kx-doc__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+.kx-doc__row:last-child {
+  border-bottom: none;
+}
+.kx-doc__row--active {
+  background: var(--color-ai-surface);
+}
+.kx-doc__row--muted {
+  opacity: 0.6;
+}
+.kx-doc__row-main {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.kx-doc__doc-icon {
+  display: flex;
+  color: var(--color-neutral-500);
+  flex-shrink: 0;
+}
+.kx-doc__row--active .kx-doc__doc-icon {
+  color: var(--color-ai-accent);
+}
+.kx-doc__doc-name {
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  font-size: var(--fs-body);
+}
+.kx-doc__row-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-shrink: 0;
+}
+.kx-doc__pill-pending {
+  display: inline-flex;
+  padding: 1px 10px;
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-500);
+  white-space: nowrap;
+}
+
+/* AI 서류 검수 카드 */
+.kx-doc__ai {
+  border: 1px solid var(--color-neutral-200);
+  border-left: var(--accent-ai);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-doc__ai-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-ai-accent);
+}
+.kx-doc__ai-head h2 {
+  font-size: var(--fs-h3);
+}
+.kx-doc__issue {
+  display: flex;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  border: var(--border-card);
+}
+.kx-doc__issue--warn {
+  background: #fef3f2;
+  border-color: #fecdca;
+}
+.kx-doc__issue--warn .kx-doc__issue-icon {
+  color: var(--color-error);
+}
+.kx-doc__issue--info {
+  background: var(--color-primary-050);
+}
+.kx-doc__issue--info .kx-doc__issue-icon {
+  color: var(--color-primary-600);
+}
+.kx-doc__issue-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+.kx-doc__issue-title {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-doc__issue-desc {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  line-height: 1.4;
+  margin-top: 2px;
+}
+.kx-doc__note {
+  background: var(--color-ai-surface);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+}
+.kx-doc__note-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-ai-accent);
+  margin-bottom: 4px;
+}
+.kx-doc__note-body {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  line-height: var(--lh-body);
+}
+
+/* 전체 공정률 카드 */
+.kx-doc__stat {
+  border-radius: var(--radius-lg);
+  background: var(--color-primary-700);
+  color: #fff;
+  padding: var(--space-5);
+}
+.kx-doc__stat-label {
+  font-size: var(--fs-caption);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.85;
+}
+.kx-doc__stat-value {
+  font-size: var(--fs-display);
+  line-height: 1;
+  font-weight: 700;
+  margin: var(--space-2) 0;
+  font-variant-numeric: tabular-nums;
+}
+.kx-doc__stat-delta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  color: var(--color-primary-100);
+}
+
+/* ============================================================
+ * SCR-23 신고서류 작성
+ * ============================================================ */
+.kx-rep {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1100px) {
+  .kx-rep {
+    grid-template-columns: 1fr;
+  }
+}
+.kx-rep__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-rep__autofill {
+  align-self: stretch;
+}
+
+/* 아코디언 */
+.kx-rep__acc {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-white);
+}
+.kx-rep__acc.is-open {
+  border-color: var(--color-primary-600);
+}
+.kx-rep__acc-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  cursor: pointer;
+  background: var(--color-white);
+  border: none;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+}
+.kx-rep__acc.is-open .kx-rep__acc-head {
+  background: var(--color-primary-600);
+  color: #fff;
+}
+.kx-rep__acc-head h3 {
+  font-size: var(--fs-h3);
+  color: inherit;
+}
+.kx-rep__acc-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-top: var(--border-card);
+}
+.kx-rep__chev {
+  transition: transform 0.15s ease;
+}
+.kx-rep__acc.is-open .kx-rep__chev {
+  transform: rotate(180deg);
+}
+
+/* A4 미리보기 */
+.kx-rep__preview {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-neutral-100);
+  padding: var(--space-5);
+  position: sticky;
+  top: 0;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+.kx-rep__a4 {
+  background: #fff;
+  box-shadow: var(--shadow-level2);
+  padding: 36px 32px;
+  max-width: 520px;
+  margin: 0 auto;
+  color: #141b2c;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.kx-rep__a4-title {
+  text-align: center;
+  margin-bottom: 28px;
+}
+.kx-rep__a4-title h2 {
+  display: inline-block;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.3em;
+  border-bottom: 3px solid #141b2c;
+  padding: 0 16px 6px;
+}
+.kx-rep__table {
+  border-collapse: collapse;
+  width: 100%;
+  border: 1.5px solid #141b2c;
+  margin-bottom: 24px;
+}
+.kx-rep__table th,
+.kx-rep__table td {
+  border: 1px solid #141b2c;
+  padding: 7px 9px;
+  font-size: 12px;
+  text-align: left;
+  vertical-align: top;
+}
+.kx-rep__table th {
+  background: #f2f4f7;
+  font-weight: 700;
+  width: 22%;
+  white-space: nowrap;
+}
+.kx-rep__a4 h4 {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+}
+.kx-rep__a4 section {
+  margin-bottom: 22px;
+}
+.kx-rep__box {
+  border: 1px solid #141b2c;
+  padding: 12px;
+  min-height: 90px;
+  font-size: 12px;
+}
+.kx-rep__a4 ul {
+  margin: 0;
+  padding-left: 18px;
+}
+.kx-rep__a4 ul li {
+  margin-bottom: 5px;
+}
+.kx-rep__sign {
+  text-align: right;
+  margin-top: 36px;
+}
+.kx-rep__sign-date {
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+.kx-rep__sign-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+}
+.kx-rep__sign-name {
+  font-size: 14px;
+  font-weight: 700;
+}
+.kx-rep__stamp {
+  width: 54px;
+  height: 54px;
+  border: 2px solid var(--color-error);
+  border-radius: 50%;
+  color: var(--color-error);
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  transform: rotate(-8deg);
+  line-height: 1.2;
+}
+
+/* 하단 고정 액션 바 */
+.kx-rep__bar {
+  position: sticky;
+  bottom: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  padding: var(--space-3) var(--space-4);
+  margin-top: var(--space-2);
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+}
+.kx-rep__bar-note {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-rep__bar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+/* ── 토스트(자립) ── */
+.kx-doc__toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 60;
+  background: var(--color-neutral-900);
+  color: #fff;
+  padding: 10px 18px;
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-body);
+  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.24);
+}
diff --git a/src/frontend/src/screens/docs/docsApi.ts b/src/frontend/src/screens/docs/docsApi.ts
new file mode 100644
index 0000000..6cee3ba
--- /dev/null
+++ b/src/frontend/src/screens/docs/docsApi.ts
@@ -0,0 +1,56 @@
+/*
+ * M6 서류·마일스톤(SCR-22/23) 실배선 API 계약.
+ * 공용 클라이언트(../../api/client)만 사용 — client.ts·endpoints.ts·types.ts 무수정.
+ * 정본: 백엔드 DocumentController 시그니처
+ *   - GET  /api/events/{eventId}/milestones          → ApiResponse<MilestoneRow[]>
+ *   - GET  /api/events/{eventId}/documents            → ApiResponse<RequiredDocRow[]>
+ *   - GET  /api/events/{eventId}/documents/review     → ApiResponse<DocReview>
+ *   - POST /api/events/{eventId}/documents/{docType}  → ApiResponse<RequiredDocRow>  (action: save|submit)
+ * ★ HWP/PDF 렌더는 파일 큐 후속 — 엔드포인트 없음(프론트 버튼 disabled 유지).
+ */
+import { api } from '../../api/client';
+
+export type MilestoneState = 'done' | 'active' | 'todo';
+export interface MilestoneRow {
+  label: string;
+  sub: string;
+  state: MilestoneState;
+  dueDate: string | null;
+}
+
+export type DocStatus = 'pending' | 'draft' | 'submitted' | 'approved' | 'rejected';
+export interface RequiredDocRow {
+  docType: string;
+  name: string;
+  status: DocStatus;
+  dueDate: string | null;
+  dday: number | null;
+  sortOrder: number;
+}
+
+export interface ReviewIssueRow {
+  tone: 'warn' | 'info';
+  title: string;
+  description: string;
+}
+export interface DocReview {
+  issues: ReviewIssueRow[];
+  progressPct: number;
+}
+
+/** save→임시저장(draft), submit→제출(submitted). */
+export type DocAction = 'save' | 'submit';
+
+export const docsApi = {
+  milestones: (eventId: string) =>
+    api.get<MilestoneRow[]>(`/api/events/${encodeURIComponent(eventId)}/milestones`),
+  documents: (eventId: string) =>
+    api.get<RequiredDocRow[]>(`/api/events/${encodeURIComponent(eventId)}/documents`),
+  review: (eventId: string) =>
+    api.get<DocReview>(`/api/events/${encodeURIComponent(eventId)}/documents/review`),
+  transition: (eventId: string, docType: string, action: DocAction) =>
+    api.post<RequiredDocRow>(
+      `/api/events/${encodeURIComponent(eventId)}/documents/${encodeURIComponent(docType)}`,
+      { action },
+    ),
+};
diff --git a/src/frontend/src/screens/exhibitor/ExhibitorHomePage.tsx b/src/frontend/src/screens/exhibitor/ExhibitorHomePage.tsx
new file mode 100644
index 0000000..78eeb7b
--- /dev/null
+++ b/src/frontend/src/screens/exhibitor/ExhibitorHomePage.tsx
@@ -0,0 +1,138 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button } from '../../components/ui/Button';
+import { AiLabel, DdayChip, StatusBadge } from '../../components/ui/Badge';
+import './exhibitor-home.css';
+
+/*
+ * SCR-05 참가업체 홈. Stitch exhibitor_home 이식.
+ * - 헤더 카드(업체·부스·홀 + 미니 도면) · 진행 스테퍼(신청→승인→시공→검수)
+ * - 좌: 해야 할 일(마감 임박·컨펌 대기·비용 요약) / 우: 내 부스 예상 사진(AI, 워터마크 상시) + CTA
+ * ★ 계약에 참가업체 홈 집계 엔드포인트 부재 → 태스크·비용·스테퍼는 샘플 시연. CTA는 실 라우트.
+ */
+const MOCK = `${import.meta.env.BASE_URL}mock/exhibitor_home`;
+const BOOTH_PREVIEW = `${MOCK}/img1.jpg`; // 내 부스 예상 사진(전시홀 내부)
+const FLOORPLAN_THUMB = `${MOCK}/img3.jpg`; // 미니 도면 스키매틱
+
+const STEPS = [
+  { key: 'apply', label: '신청', state: 'done' },
+  { key: 'approve', label: '승인', state: 'current', note: '설계 승인 대기중' },
+  { key: 'build', label: '시공', state: 'todo' },
+  { key: 'inspect', label: '검수', state: 'todo' },
+] as const;
+
+const COST_ROWS = [
+  { label: '전기 5kW', amount: '₩275,000', status: 'submitted' as const, statusLabel: '신청됨' },
+  { label: '인터넷 1회선', amount: '₩150,000', status: 'draft' as const, statusLabel: '작성중' },
+];
+
+export function ExhibitorHomePage() {
+  const { eventId = '', boothId = 'A-102' } = useParams();
+  const navigate = useNavigate();
+
+  return (
+    <div className="kx-exh">
+      {/* 헤더 카드 */}
+      <header className="kx-exh__header">
+        <div>
+          <h1 className="kx-exh__company">(주)한빛로보틱스</h1>
+          <div className="kx-exh__ctx">
+            <span>부스 {boothId}</span>
+            <span aria-hidden="true">·</span>
+            <span>독립부스 6×3m</span>
+            <span aria-hidden="true">·</span>
+            <span>홀7</span>
+          </div>
+        </div>
+        <div className="kx-exh__miniplan">
+          <img src={FLOORPLAN_THUMB} alt="내 부스 위치 미니 도면" loading="lazy" />
+          <span className="kx-exh__miniplan-pin" aria-hidden="true" />
+        </div>
+      </header>
+
+      {/* 진행 스테퍼 */}
+      <section className="kx-exh__stepper" aria-label="진행 단계">
+        <ol className="kx-stepper">
+          {STEPS.map((s) => (
+            <li key={s.key} className={`kx-stepper__item is-${s.state}`}>
+              <span className="kx-stepper__dot" aria-hidden="true">
+                {s.state === 'done' ? '✓' : ''}
+              </span>
+              <span className="kx-stepper__label">{s.label}</span>
+              {'note' in s && s.note && <span className="kx-stepper__note">{s.note}</span>}
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      <div className="kx-exh__split">
+        {/* 좌: 해야 할 일 */}
+        <section className="kx-exh__tasks" aria-label="해야 할 일">
+          <h2 className="kx-exh__h">해야 할 일</h2>
+
+          <article className="kx-task kx-task--urgent">
+            <DdayChip dday={6} />
+            <h3>유틸리티 신청 마감</h3>
+            <p className="kx-task__warn">인터넷 회선은 현장 추가 신청이 불가합니다</p>
+          </article>
+
+          <article className="kx-task">
+            <DdayChip dday={15} />
+            <h3>장치업체 초대하기</h3>
+          </article>
+
+          <article className="kx-task kx-task--primary">
+            <h3>설계 컨펌 대기 1건</h3>
+            <button
+              className="kx-task__link"
+              onClick={() => navigate(`/events/${eventId}/booths/${boothId}/design`)}
+            >
+              확인하기 →
+            </button>
+          </article>
+
+          <article className="kx-cost">
+            <h4>비용 요약</h4>
+            {COST_ROWS.map((c) => (
+              <div key={c.label} className="kx-cost__row">
+                <span>{c.label}</span>
+                <div className="kx-cost__right">
+                  <strong className="tnum">{c.amount}</strong>
+                  <StatusBadge status={c.status} />
+                </div>
+              </div>
+            ))}
+          </article>
+        </section>
+
+        {/* 우: 내 부스 예상 사진 */}
+        <section className="kx-exh__preview" aria-label="내 부스 예상 사진">
+          <h2 className="kx-exh__h">
+            내 부스 예상 사진 <AiLabel>AI</AiLabel>
+          </h2>
+          <figure className="kx-exh__preview-frame">
+            <img src={BOOTH_PREVIEW} alt="내 부스 AI 예상 사진" loading="lazy" />
+            <div className="kx-exh__wm" aria-hidden="true">
+              AI 생성 예상 이미지
+            </div>
+            <figcaption>AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있음</figcaption>
+          </figure>
+          <div className="kx-exh__cta">
+            <Button
+              block
+              onClick={() => navigate(`/events/${eventId}/booths/${boothId}/design`)}
+            >
+              부스 설계 스튜디오
+            </Button>
+            <Button
+              variant="ghost"
+              block
+              onClick={() => navigate(`/events/${eventId}/booths/${boothId}/utility`)}
+            >
+              유틸리티 신청
+            </Button>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/exhibitor/exhibitor-home.css b/src/frontend/src/screens/exhibitor/exhibitor-home.css
new file mode 100644
index 0000000..3a06f1c
--- /dev/null
+++ b/src/frontend/src/screens/exhibitor/exhibitor-home.css
@@ -0,0 +1,307 @@
+.kx-exh {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  padding: var(--space-5);
+  max-width: var(--container-max);
+}
+
+/* 헤더 카드 */
+.kx-exh__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+}
+.kx-exh__company {
+  font-size: var(--fs-display);
+  line-height: var(--lh-display);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin-bottom: var(--space-2);
+}
+.kx-exh__ctx {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-neutral-500);
+  font-size: var(--fs-h3);
+}
+.kx-exh__miniplan {
+  position: relative;
+  width: 128px;
+  height: 96px;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: var(--border-card);
+  flex-shrink: 0;
+}
+.kx-exh__miniplan img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.85;
+}
+.kx-exh__miniplan-pin {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 22px;
+  height: 16px;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 102, 179, 0.8);
+  border: 2px solid var(--color-primary-600);
+  border-radius: 2px;
+  box-shadow: var(--shadow-level2);
+}
+
+/* 스테퍼 */
+.kx-exh__stepper {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6) var(--space-5) var(--space-8);
+}
+.kx-stepper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  max-width: 720px;
+  margin: 0 auto;
+  position: relative;
+  list-style: none;
+}
+.kx-stepper::before {
+  content: '';
+  position: absolute;
+  top: 16px;
+  left: 5%;
+  right: 5%;
+  height: 2px;
+  background: var(--color-neutral-200);
+}
+.kx-stepper__item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  background: var(--color-white);
+  padding: 0 var(--space-3);
+  z-index: 1;
+}
+.kx-stepper__dot {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  border: 2px solid var(--color-neutral-200);
+  color: var(--color-neutral-500);
+  background: var(--color-white);
+}
+.kx-stepper__item.is-done .kx-stepper__dot {
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+  color: var(--color-white);
+}
+.kx-stepper__item.is-current .kx-stepper__dot {
+  border-color: var(--color-primary-600);
+  color: var(--color-primary-600);
+  box-shadow: 0 0 0 4px var(--color-primary-100);
+}
+.kx-stepper__item.is-current .kx-stepper__dot::after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-primary-600);
+}
+.kx-stepper__label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+.kx-stepper__item.is-current .kx-stepper__label {
+  color: var(--color-primary-700);
+}
+.kx-stepper__note {
+  position: absolute;
+  top: 62px;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--color-primary-700);
+  background: var(--color-primary-050);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+}
+
+/* split */
+.kx-exh__split {
+  display: grid;
+  grid-template-columns: 5fr 7fr;
+  gap: var(--space-4);
+  align-items: start;
+}
+.kx-exh__h {
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+  margin-bottom: var(--space-3);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.kx-exh__tasks {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.kx-task {
+  position: relative;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  padding-left: var(--space-5);
+  overflow: hidden;
+}
+.kx-task::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: var(--color-neutral-200);
+}
+.kx-task--urgent {
+  border-color: var(--color-violation-warn);
+}
+.kx-task--urgent::before {
+  background: var(--color-violation-warn);
+}
+.kx-task--primary::before {
+  background: var(--color-primary-600);
+}
+.kx-task h3 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin-top: var(--space-2);
+}
+.kx-task__warn {
+  font-size: var(--fs-caption);
+  color: var(--color-error);
+  margin-top: var(--space-1);
+}
+.kx-task__link {
+  margin-top: var(--space-2);
+  border: none;
+  background: none;
+  color: var(--color-primary-600);
+  font-size: var(--fs-body);
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+}
+.kx-task__link:hover {
+  text-decoration: underline;
+}
+
+.kx-cost {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+.kx-cost h4 {
+  font-size: var(--fs-caption);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-neutral-500);
+  margin-bottom: var(--space-2);
+}
+.kx-cost__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--color-neutral-100);
+  font-size: var(--fs-body);
+}
+.kx-cost__row:last-child {
+  border-bottom: none;
+}
+.kx-cost__right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* preview */
+.kx-exh__preview {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-exh__preview-frame {
+  position: relative;
+  margin: 0;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: var(--border-card);
+  border-left: var(--accent-ai);
+  min-height: 300px;
+  flex: 1;
+}
+.kx-exh__preview-frame img {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  object-fit: cover;
+  display: block;
+}
+.kx-exh__preview-frame figcaption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--space-3);
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.85);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+}
+.kx-exh__wm {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(-24deg);
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  pointer-events: none;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+.kx-exh__cta {
+  display: flex;
+  gap: var(--space-3);
+}
+
+@media (max-width: 1100px) {
+  .kx-exh__split {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/frontend/src/screens/floorplan/AutoLayoutDialog.tsx b/src/frontend/src/screens/floorplan/AutoLayoutDialog.tsx
new file mode 100644
index 0000000..7a87f66
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/AutoLayoutDialog.tsx
@@ -0,0 +1,242 @@
+import { useEffect, useState } from 'react';
+import { layoutApi, renderApi } from '../../api/endpoints';
+import { ApiRequestError } from '../../api/client';
+import { subscribeRenderJob } from '../../api/websocket';
+import { Button } from '../../components/ui/Button';
+import { AiLabel } from '../../components/ui/Badge';
+import { AiImage } from '../../components/ui/AiImage';
+import { ErrorState } from '../../components/ui/States';
+import type { AutoLayoutOption, RenderJobDto } from '../../api/types';
+import './auto-layout.css';
+
+/*
+ * AI 자동배치 (SCR-03 → SCR-04 브릿지).
+ * 조건 입력 → auto-generate로 1·2·3안 생성 → S7 조감(RenderJob) WebSocket 수신 →
+ * 라디오 선택 → "이 안으로 편집 시작"(병합/적용). 실제 병합은 상위에서 처리(onApply).
+ */
+interface AutoLayoutDialogProps {
+  eventId: string;
+  hallId: string;
+  onClose: () => void;
+  onApply: (option: AutoLayoutOption) => void;
+}
+
+const DEFAULT_REQ = {
+  targetBoothCount: 510,
+  premiumRatio: 0.15,
+  stageCount: 1,
+  loungeCount: 1,
+  mainEntranceCount: 2,
+  optionCount: 3,
+};
+
+export function AutoLayoutDialog({ eventId, hallId, onClose, onApply }: AutoLayoutDialogProps) {
+  const [req, setReq] = useState(DEFAULT_REQ);
+  const [phase, setPhase] = useState<'form' | 'generating' | 'result'>('form');
+  const [options, setOptions] = useState<AutoLayoutOption[]>([]);
+  const [renderJobs, setRenderJobs] = useState<Record<string, RenderJobDto>>({});
+  const [selected, setSelected] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // S7 조감 RenderJob 구독 (옵션별 s7RenderJobId).
+  useEffect(() => {
+    if (phase !== 'result') return;
+    const unsubs = options
+      .filter((o) => o.s7RenderJobId)
+      .map((o) =>
+        subscribeRenderJob(o.s7RenderJobId, (job) =>
+          setRenderJobs((prev) => ({ ...prev, [o.optionId]: job })),
+        ),
+      );
+    // 폴백: 구독 즉시 현재 상태 1회 조회
+    options.forEach(async (o) => {
+      if (!o.s7RenderJobId) return;
+      try {
+        const job = await renderApi.status(eventId, o.s7RenderJobId);
+        setRenderJobs((prev) => ({ ...prev, [o.optionId]: job }));
+      } catch {
+        /* 미구현/미완 무시 */
+      }
+    });
+    return () => unsubs.forEach((u) => u());
+  }, [phase, options, eventId]);
+
+  async function generate() {
+    setError(null);
+    setPhase('generating');
+    try {
+      const res = await layoutApi.autoGenerate(eventId, hallId, req);
+      setOptions(res);
+      setSelected(res[0]?.optionId ?? null);
+      setPhase('result');
+    } catch (err) {
+      if (err instanceof ApiRequestError) {
+        setError(
+          err.code === 'NOT_IMPLEMENTED'
+            ? 'AI 자동배치 엔진이 준비 중입니다(백엔드 매퍼 대기).'
+            : err.message,
+        );
+      } else {
+        setError('자동배치 생성 중 오류가 발생했습니다.');
+      }
+      setPhase('form');
+    }
+  }
+
+  const selectedOption = options.find((o) => o.optionId === selected) ?? null;
+
+  return (
+    <div className="kx-modal" role="dialog" aria-modal="true" aria-labelledby="auto-title">
+      <div className="kx-modal__backdrop" onClick={onClose} />
+      <div className="kx-auto">
+        <header className="kx-auto__header">
+          <div>
+            <h3 id="auto-title" className="kx-auto__title">
+              <AiLabel>AI 자동배치</AiLabel> 배치안 생성
+            </h3>
+            <p className="kx-auto__sub">
+              제약조건을 입력하면 복수 배치안을 생성합니다. 마음에 드는 안을 선택해 편집을
+              시작하세요.
+            </p>
+          </div>
+          <button className="kx-auto__close" onClick={onClose} aria-label="닫기">
+            ✕
+          </button>
+        </header>
+
+        {phase === 'form' && (
+          <div className="kx-auto__body">
+            <div className="kx-auto__form">
+              <NumField
+                label="목표 부스 수"
+                value={req.targetBoothCount}
+                onChange={(v) => setReq({ ...req, targetBoothCount: v })}
+              />
+              <NumField
+                label="프리미엄 비율 (%)"
+                value={Math.round(req.premiumRatio * 100)}
+                onChange={(v) => setReq({ ...req, premiumRatio: v / 100 })}
+              />
+              <NumField
+                label="무대 수"
+                value={req.stageCount}
+                onChange={(v) => setReq({ ...req, stageCount: v })}
+              />
+              <NumField
+                label="주출입구 수"
+                value={req.mainEntranceCount}
+                onChange={(v) => setReq({ ...req, mainEntranceCount: v })}
+              />
+              <NumField
+                label="생성 안 수"
+                value={req.optionCount}
+                onChange={(v) => setReq({ ...req, optionCount: Math.min(3, Math.max(1, v)) })}
+              />
+            </div>
+            {error && <ErrorState message={error} onRetry={generate} />}
+            <div className="kx-modal__actions">
+              <Button variant="ghost" onClick={onClose}>
+                취소
+              </Button>
+              <Button variant="ai" leadingIcon="✦" onClick={generate}>
+                배치안 생성
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {phase === 'generating' && (
+          <div className="kx-auto__generating" aria-live="polite">
+            <span className="kx-aiimg__spinner" aria-hidden="true" />
+            <p>제약조건 풀이 중… 복수 안 생성</p>
+          </div>
+        )}
+
+        {phase === 'result' && (
+          <div className="kx-auto__body">
+            <div className="kx-auto__grid">
+              {options.map((o) => {
+                const job = renderJobs[o.optionId];
+                const isSel = o.optionId === selected;
+                return (
+                  <label
+                    key={o.optionId}
+                    className={`kx-auto__card ${isSel ? 'is-selected' : ''}`}
+                  >
+                    <input
+                      type="radio"
+                      name="auto-option"
+                      checked={isSel}
+                      onChange={() => setSelected(o.optionId)}
+                    />
+                    <AiImage
+                      imageUrl={job?.imageUrl ?? null}
+                      status={job?.status ?? 'QUEUED'}
+                      watermarkText={
+                        job?.watermarkText ?? 'AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있습니다'
+                      }
+                      notice={
+                        job?.notice ??
+                        'AI 생성 이미지는 계약·심사 서류에 사용할 수 없습니다 — 시공 기준은 도면입니다'
+                      }
+                      shotLabel="S7 홀 전경"
+                      alt={`${o.label} 조감`}
+                    />
+                    <div className="kx-auto__card-body">
+                      <span className="kx-auto__card-title">{o.label}</span>
+                      <ul className="kx-auto__metrics tnum">
+                        <li>부스 {o.summary.boothCount} / {o.summary.targetBoothCount}</li>
+                        <li>판매면적 {o.summary.salesAreaM2.toLocaleString()}㎡</li>
+                        <li>최소 통로폭 {o.summary.minAisleWidthM}m</li>
+                        <li
+                          className={
+                            o.summary.violationBlock > 0 ? 'kx-auto__viol-bad' : 'kx-auto__viol-ok'
+                          }
+                        >
+                          위반 {o.summary.violationBlock + o.summary.violationWarn}건
+                        </li>
+                      </ul>
+                    </div>
+                  </label>
+                );
+              })}
+            </div>
+            <div className="kx-modal__actions">
+              <Button variant="ghost" onClick={() => setPhase('form')}>
+                조건 수정
+              </Button>
+              <Button
+                disabled={!selectedOption}
+                onClick={() => selectedOption && onApply(selectedOption)}
+              >
+                이 안으로 편집 시작
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function NumField({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <div className="kx-field">
+      <label>{label}</label>
+      <input
+        type="number"
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="tnum"
+      />
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/floorplan/BoothLayoutEditorPage.tsx b/src/frontend/src/screens/floorplan/BoothLayoutEditorPage.tsx
new file mode 100644
index 0000000..e407db0
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/BoothLayoutEditorPage.tsx
@@ -0,0 +1,297 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { layoutApi } from '../../api/endpoints';
+import { ApiRequestError } from '../../api/client';
+import { Button } from '../../components/ui/Button';
+import { Skeleton } from '../../components/ui/States';
+import { FloorplanCanvas, type CanvasLayer } from './FloorplanCanvas';
+import { AutoLayoutDialog } from './AutoLayoutDialog';
+import { ValidationPanel } from './ValidationPanel';
+import { sampleLayout } from './sampleLayout';
+import type { AutoLayoutOption, ComplianceReport, LayoutDto } from '../../api/types';
+import './editor.css';
+
+type RightTab = 'props' | 'validation';
+
+export function BoothLayoutEditorPage() {
+  const { eventId = '', hallId = '' } = useParams();
+
+  const [layers, setLayers] = useState<CanvasLayer>({
+    trench: true,
+    structure: true,
+    violations: true,
+  });
+  const [selectedBoothId, setSelectedBoothId] = useState<string | null>(null);
+  const [zoom, setZoom] = useState(1);
+  const [rightTab, setRightTab] = useState<RightTab>('validation');
+  const [autoOpen, setAutoOpen] = useState(false);
+  const [report, setReport] = useState<ComplianceReport | null>(null);
+  const [validating, setValidating] = useState(false);
+
+  // 배치 조회 (M2 GET layout) — 501이면 degraded 샘플로 캔버스 시연.
+  const layoutQuery = useQuery<{ layout: LayoutDto; degraded: boolean }>({
+    queryKey: ['layout', eventId, hallId],
+    queryFn: async () => {
+      try {
+        const layout = await layoutApi.get(eventId, hallId);
+        return { layout, degraded: false };
+      } catch (err) {
+        if (err instanceof ApiRequestError && err.code === 'NOT_IMPLEMENTED') {
+          return { layout: sampleLayout(eventId, hallId), degraded: true };
+        }
+        throw err;
+      }
+    },
+  });
+
+  const layout = layoutQuery.data?.layout;
+  const degraded = layoutQuery.data?.degraded ?? false;
+  const selectedBooth = useMemo(
+    () => layout?.booths.find((b) => b.boothId === selectedBoothId) ?? null,
+    [layout, selectedBoothId],
+  );
+
+  const runValidate = useCallback(async () => {
+    setValidating(true);
+    try {
+      const r = await layoutApi.validate(eventId, hallId, layout?.version);
+      setReport(r);
+      setRightTab('validation');
+    } catch (err) {
+      if (err instanceof ApiRequestError && err.code === 'NOT_IMPLEMENTED') {
+        // degraded: 요약 카운트만이라도 노출
+        setReport(null);
+      }
+    } finally {
+      setValidating(false);
+    }
+  }, [eventId, hallId, layout?.version]);
+
+  function applyAutoOption(_option: AutoLayoutOption) {
+    // 병합: 실제 부스 좌표는 백엔드 저장/재조회로 반영. 지금은 재조회 트리거.
+    setAutoOpen(false);
+    void layoutQuery.refetch();
+  }
+
+  const summary = layout?.summary;
+
+  return (
+    <div className="kx-editor">
+      {/* 상단 툴바 */}
+      <header className="kx-editor__toolbar">
+        <div className="kx-editor__toolbar-left">
+          <h2 className="kx-editor__hall">{layout?.name ?? '배치안'}</h2>
+          <span className="kx-editor__version">
+            v{layout?.version ?? '—'}
+            <span className="kx-editor__saved">저장됨</span>
+          </span>
+          {degraded && (
+            <span className="kx-editor__degraded" title="백엔드 매퍼 준비 중 — 샘플 데이터 표시">
+              데이터 준비 중 (샘플)
+            </span>
+          )}
+        </div>
+        <div className="kx-editor__toolbar-right">
+          <Button variant="secondary" leadingIcon="🖼" onClick={() => setAutoOpen(true)}>
+            홀 전경 생성
+          </Button>
+          <Button variant="secondary" leadingIcon="✓" onClick={runValidate} disabled={validating}>
+            {validating ? '검증 중…' : '규정 검증 실행'}
+          </Button>
+          <Button variant="ai" leadingIcon="✦" onClick={() => setAutoOpen(true)}>
+            AI 자동배치
+          </Button>
+        </div>
+      </header>
+
+      <div className="kx-editor__workspace">
+        {/* 좌측 도구 패널 */}
+        <aside className="kx-editor__left" aria-label="도구">
+          <section className="kx-tool-group">
+            <h3>부스 팔레트</h3>
+            <div className="kx-palette">
+              <PaletteItem label="기본 3×3m" w={24} h={24} />
+              <PaletteItem label="프리미엄 6×3m" w={40} h={24} />
+              <PaletteItem label="아일랜드 (자유형)" full />
+            </div>
+          </section>
+          <section className="kx-tool-group">
+            <h3>부대 시설</h3>
+            <div className="kx-facility">
+              <button>무대</button>
+              <button>라운지</button>
+              <button>주출입구</button>
+            </div>
+          </section>
+          <section className="kx-tool-group">
+            <h3>레이어</h3>
+            <LayerToggle
+              label="트렌치 그리드"
+              on={layers.trench}
+              onToggle={() => setLayers((l) => ({ ...l, trench: !l.trench }))}
+            />
+            <LayerToggle
+              label="기둥·비상구"
+              on={layers.structure}
+              onToggle={() => setLayers((l) => ({ ...l, structure: !l.structure }))}
+            />
+            <LayerToggle
+              label="위반 오버레이"
+              on={layers.violations}
+              onToggle={() => setLayers((l) => ({ ...l, violations: !l.violations }))}
+            />
+          </section>
+        </aside>
+
+        {/* 중앙 캔버스 */}
+        <section className="kx-editor__canvas-wrap">
+          <div className="kx-editor__canvas-stage">
+            {layoutQuery.isLoading ? (
+              <div className="kx-editor__canvas-loading">
+                <Skeleton height={480} radius={8} />
+              </div>
+            ) : layoutQuery.isError ? (
+              <div className="kx-editor__canvas-error" role="alert">
+                <p>도면을 불러오지 못했습니다.</p>
+                <Button variant="secondary" onClick={() => layoutQuery.refetch()}>
+                  다시 시도
+                </Button>
+              </div>
+            ) : layout && layout.booths.length === 0 ? (
+              <div className="kx-editor__canvas-empty">
+                <p>조건을 입력하고 AI 자동배치로 시작하세요.</p>
+                <Button variant="ai" leadingIcon="✦" onClick={() => setAutoOpen(true)}>
+                  AI 자동배치
+                </Button>
+              </div>
+            ) : (
+              layout && (
+                <FloorplanCanvas
+                  hallDims={[126, 90]}
+                  booths={layout.booths}
+                  layers={layers}
+                  selectedBoothId={selectedBoothId}
+                  onSelectBooth={setSelectedBoothId}
+                  zoom={zoom}
+                />
+              )
+            )}
+          </div>
+
+          {/* 하단 상태 바 */}
+          <div className="kx-editor__statusbar">
+            <div className="kx-editor__stats tnum">
+              {summary && (
+                <>
+                  <span>부스 {summary.boothCount} / {summary.targetBoothCount}</span>
+                  <span className="kx-dot" />
+                  <span>판매면적 {summary.salesAreaM2.toLocaleString()}㎡</span>
+                </>
+              )}
+            </div>
+            <div className="kx-editor__zoom">
+              <button aria-label="축소" onClick={() => setZoom((z) => Math.max(0.5, z - 0.1))}>
+                −
+              </button>
+              <span className="tnum">{Math.round(zoom * 100)}%</span>
+              <button aria-label="확대" onClick={() => setZoom((z) => Math.min(2, z + 0.1))}>
+                +
+              </button>
+            </div>
+          </div>
+        </section>
+
+        {/* 우측 속성/검증 패널 */}
+        <aside className="kx-editor__right" aria-label="속성 및 검증">
+          <div className="kx-editor__tabs" role="tablist">
+            <button
+              role="tab"
+              aria-selected={rightTab === 'props'}
+              className={rightTab === 'props' ? 'is-active' : ''}
+              onClick={() => setRightTab('props')}
+            >
+              속성
+            </button>
+            <button
+              role="tab"
+              aria-selected={rightTab === 'validation'}
+              className={rightTab === 'validation' ? 'is-active' : ''}
+              onClick={() => setRightTab('validation')}
+            >
+              검증{summary ? ` (${summary.violationBlock + summary.violationWarn})` : ''}
+            </button>
+          </div>
+
+          {rightTab === 'props' ? (
+            <div className="kx-props">
+              {selectedBooth ? (
+                <dl className="kx-props__list">
+                  <PropRow k="부스번호" v={selectedBooth.boothNo} />
+                  <PropRow k="타입" v={selectedBooth.type} />
+                  <PropRow k="크기" v={`${selectedBooth.sizeM[0]}×${selectedBooth.sizeM[1]}m`} />
+                  <PropRow k="높이" v={`${selectedBooth.heightM}m`} />
+                  <PropRow k="바닥하중" v={`${selectedBooth.floorLoadTPerM2} t/㎡`} />
+                  <PropRow k="배정 업체" v={selectedBooth.assignedCompanyName ?? '미배정'} />
+                </dl>
+              ) : (
+                <p className="kx-props__empty">부스를 선택하면 속성이 표시됩니다.</p>
+              )}
+            </div>
+          ) : (
+            <ValidationPanel
+              report={report}
+              summary={summary}
+              degraded={degraded}
+            />
+          )}
+        </aside>
+      </div>
+
+      {autoOpen && (
+        <AutoLayoutDialog
+          eventId={eventId}
+          hallId={hallId}
+          onClose={() => setAutoOpen(false)}
+          onApply={applyAutoOption}
+        />
+      )}
+    </div>
+  );
+}
+
+function PaletteItem({ label, w, h, full }: { label: string; w?: number; h?: number; full?: boolean }) {
+  return (
+    <div className={`kx-palette__item ${full ? 'is-full' : ''}`}>
+      <span className="kx-palette__swatch" style={full ? undefined : { width: w, height: h }} />
+      <span className="kx-palette__label">{label}</span>
+    </div>
+  );
+}
+
+function LayerToggle({ label, on, onToggle }: { label: string; on: boolean; onToggle: () => void }) {
+  return (
+    <label className="kx-layer">
+      <span>{label}</span>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={on}
+        aria-label={label}
+        className={`kx-switch ${on ? 'is-on' : ''}`}
+        onClick={onToggle}
+      >
+        <span className="kx-switch__knob" />
+      </button>
+    </label>
+  );
+}
+
+function PropRow({ k, v }: { k: string; v: string }) {
+  return (
+    <div className="kx-props__row">
+      <dt>{k}</dt>
+      <dd className="tnum">{v}</dd>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/floorplan/FloorplanCanvas.tsx b/src/frontend/src/screens/floorplan/FloorplanCanvas.tsx
new file mode 100644
index 0000000..e88c065
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/FloorplanCanvas.tsx
@@ -0,0 +1,135 @@
+import { useMemo } from 'react';
+import type { BoothDto } from '../../api/types';
+import './canvas.css';
+
+/*
+ * 플로어플랜 SVG 캔버스 (SCR-03 히어로).
+ * - 다크 서피스(#1C2536) 위 부스 폴리곤 + 트렌치 그리드 + 위반 오버레이.
+ * - 좌표계: 홀 로컬 미터 → SVG 유저 유닛(1m = 1unit), viewBox로 스케일.
+ * - 대규모(수백 부스)는 후속 WebGL/Canvas 검토. 지금은 SVG 우선.
+ */
+
+export interface CanvasLayer {
+  trench: boolean;
+  structure: boolean;
+  violations: boolean;
+}
+
+interface FloorplanCanvasProps {
+  hallDims: [number, number]; // [width_m, height_m]
+  booths: BoothDto[];
+  layers: CanvasLayer;
+  selectedBoothId: string | null;
+  onSelectBooth: (boothId: string | null) => void;
+  zoom: number;
+}
+
+const TRENCH_SPACING_M = 9; // 가정 트렌치 그리드 간격(실측 대체 — R4)
+const PAD = 6; // viewBox 여백(m)
+
+function centroid(poly: number[][]): [number, number] {
+  const n = poly.length;
+  let x = 0;
+  let y = 0;
+  for (const [px, py] of poly) {
+    x += px;
+    y += py;
+  }
+  return [x / n, y / n];
+}
+
+export function FloorplanCanvas({
+  hallDims,
+  booths,
+  layers,
+  selectedBoothId,
+  onSelectBooth,
+  zoom,
+}: FloorplanCanvasProps) {
+  const [hw, hh] = hallDims;
+
+  const trenchLines = useMemo(() => {
+    const lines: { x1: number; y1: number; x2: number; y2: number }[] = [];
+    for (let x = TRENCH_SPACING_M; x < hw; x += TRENCH_SPACING_M) {
+      lines.push({ x1: x, y1: 0, x2: x, y2: hh });
+    }
+    for (let y = TRENCH_SPACING_M; y < hh; y += TRENCH_SPACING_M) {
+      lines.push({ x1: 0, y1: y, x2: hw, y2: y });
+    }
+    return lines;
+  }, [hw, hh]);
+
+  return (
+    <div className="kx-canvas" style={{ transform: `scale(${zoom})` }}>
+      <svg
+        className="kx-canvas__svg"
+        viewBox={`${-PAD} ${-PAD} ${hw + PAD * 2} ${hh + PAD * 2}`}
+        role="img"
+        aria-label={`홀 도면 ${hw}×${hh}m, 부스 ${booths.length}개`}
+        onClick={() => onSelectBooth(null)}
+      >
+        {/* 홀 외곽 */}
+        <rect
+          x={0}
+          y={0}
+          width={hw}
+          height={hh}
+          className="kx-canvas__hall"
+          rx={0.5}
+        />
+
+        {/* 트렌치 그리드 */}
+        {layers.trench && (
+          <g className="kx-canvas__trench">
+            {trenchLines.map((l, i) => (
+              <line key={i} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} />
+            ))}
+          </g>
+        )}
+
+        {/* 부스 폴리곤 */}
+        <g className="kx-canvas__booths">
+          {booths.map((b) => {
+            const pts = b.polygon.map(([x, y]) => `${x},${y}`).join(' ');
+            const [cx, cy] = centroid(b.polygon);
+            const selected = b.boothId === selectedBoothId;
+            return (
+              <g
+                key={b.boothId}
+                className={`kx-canvas__booth ${b.premium ? 'is-premium' : ''} ${
+                  selected ? 'is-selected' : ''
+                }`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelectBooth(b.boothId);
+                }}
+                tabIndex={0}
+                role="button"
+                aria-label={`부스 ${b.boothNo}${b.assignedCompanyName ? `, ${b.assignedCompanyName}` : ''}`}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onSelectBooth(b.boothId);
+                  }
+                }}
+              >
+                <polygon points={pts} />
+                <text x={cx} y={cy} className="kx-canvas__booth-label">
+                  {b.boothNo}
+                </text>
+              </g>
+            );
+          })}
+        </g>
+
+        {/* 축척 눈금 (상단) */}
+        <g className="kx-canvas__ruler" aria-hidden="true">
+          <line x1={0} y1={-2} x2={hw} y2={-2} />
+          <text x={0} y={-3}>0m</text>
+          <text x={hw / 2} y={-3} textAnchor="middle">{Math.round(hw / 2)}m</text>
+          <text x={hw} y={-3} textAnchor="end">{hw}m</text>
+        </g>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/floorplan/LayoutComparisonPage.tsx b/src/frontend/src/screens/floorplan/LayoutComparisonPage.tsx
new file mode 100644
index 0000000..6002ac1
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/LayoutComparisonPage.tsx
@@ -0,0 +1,107 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button } from '../../components/ui/Button';
+import { AiLabel } from '../../components/ui/Badge';
+import './layout-comparison.css';
+
+/*
+ * SCR-04 AI 배치안 비교. Stitch layout_comparison 이식.
+ * - 3개 자동배치 옵션 카드(S7 조감 AI 이미지 + 요약 지표 + 위반 요약), 1개 선택.
+ * ★ 계약 §3 auto-generate(AutoLayoutOption[])는 스켈레톤 → 샘플 3안 시연. 워터마크 상시.
+ */
+const MOCK = `${import.meta.env.BASE_URL}mock/layout_comparison`;
+const AERIAL = `${MOCK}/img1.jpg`;
+
+interface Option {
+  id: string;
+  label: string;
+  booths: number;
+  salesAreaM2: number;
+  minAisleM: number;
+  violationBlock: number;
+  violationWarn: number;
+  recommended?: boolean;
+}
+
+const OPTIONS: Option[] = [
+  { id: 'A', label: '배치안 A', booths: 512, salesAreaM2: 4450, minAisleM: 3.0, violationBlock: 0, violationWarn: 0 },
+  { id: 'B', label: '배치안 B', booths: 530, salesAreaM2: 4420, minAisleM: 3.5, violationBlock: 0, violationWarn: 0, recommended: true },
+  { id: 'C', label: '배치안 C', booths: 525, salesAreaM2: 4550, minAisleM: 2.8, violationBlock: 0, violationWarn: 2 },
+];
+
+export function LayoutComparisonPage() {
+  const { eventId = '', hallId = 'H7' } = useParams();
+  const navigate = useNavigate();
+
+  return (
+    <div className="kx-cmp">
+      <header className="kx-cmp__head">
+        <div>
+          <h1>AI 배치안 비교</h1>
+          <p className="kx-cmp__sub">조건: 목표 530부스 · 프리미엄 15% · 무대 1개소</p>
+        </div>
+        <Button variant="ghost">조건 수정</Button>
+      </header>
+
+      <div className="kx-cmp__grid" role="radiogroup" aria-label="배치안 선택">
+        {OPTIONS.map((o) => (
+          <article
+            key={o.id}
+            className={`kx-cmp__card ${o.recommended ? 'is-selected' : ''}`}
+            role="radio"
+            aria-checked={o.recommended ?? false}
+            tabIndex={0}
+          >
+            <figure className="kx-cmp__thumb">
+              <img src={AERIAL} alt={`${o.label} 조감 예상 이미지`} loading="lazy" />
+              <span className="kx-cmp__ai">
+                <AiLabel>AI 생성</AiLabel>
+              </span>
+              {o.recommended && <span className="kx-cmp__check" aria-hidden="true">✓</span>}
+              <div className="kx-cmp__wm" aria-hidden="true">AI 생성 예상 이미지</div>
+            </figure>
+
+            <div className="kx-cmp__body">
+              <div className="kx-cmp__title-row">
+                <h2>{o.label}</h2>
+                {o.recommended && <span className="kx-cmp__reco">추천</span>}
+              </div>
+              <dl className="kx-cmp__metrics tnum">
+                <div>
+                  <dt>총 부스</dt>
+                  <dd>{o.booths}개</dd>
+                </div>
+                <div>
+                  <dt>판매면적</dt>
+                  <dd>{o.salesAreaM2.toLocaleString()}㎡</dd>
+                </div>
+                <div>
+                  <dt>최소 통로폭</dt>
+                  <dd>{o.minAisleM.toFixed(1)}m</dd>
+                </div>
+                <div>
+                  <dt>위반사항</dt>
+                  <dd className={o.violationBlock + o.violationWarn > 0 ? 'kx-cmp__warn' : 'kx-cmp__ok'}>
+                    {o.violationBlock + o.violationWarn === 0
+                      ? '✓ 0건'
+                      : `△ ${o.violationBlock + o.violationWarn}건`}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </article>
+        ))}
+      </div>
+
+      <div className="kx-cmp__footer">
+        <p className="kx-cmp__disclaimer">
+          AI 조감 이미지는 배치 비교 참고용입니다 — 실 시공 기준은 확정 도면입니다.
+        </p>
+        <Button
+          onClick={() => navigate(`/events/${eventId}/halls/${hallId}/layout`)}
+        >
+          이 안으로 편집 시작 →
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/floorplan/ValidationPanel.tsx b/src/frontend/src/screens/floorplan/ValidationPanel.tsx
new file mode 100644
index 0000000..b260324
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/ValidationPanel.tsx
@@ -0,0 +1,78 @@
+import type { ComplianceReport, LayoutSummary } from '../../api/types';
+import { EmptyState } from '../../components/ui/States';
+
+/*
+ * 검증 패널 (SCR-03 우측 [검증] 탭).
+ * report(POST validate 결과)가 있으면 위반 카드 목록, 없으면 layout.summary 카운트로 요약.
+ */
+export function ValidationPanel({
+  report,
+  summary,
+  degraded,
+}: {
+  report: ComplianceReport | null;
+  summary: LayoutSummary | undefined;
+  degraded: boolean;
+}) {
+  const blockCount = report?.blockCount ?? summary?.violationBlock ?? 0;
+  const warnCount = report?.warnCount ?? summary?.violationWarn ?? 0;
+  const submittable = report?.submittable ?? blockCount === 0;
+
+  return (
+    <div className="kx-valid">
+      <div className="kx-valid__summary">
+        <span className="kx-valid__chip kx-valid__chip--block">차단 {blockCount}</span>
+        <span className="kx-valid__chip kx-valid__chip--warn">경고 {warnCount}</span>
+      </div>
+
+      {submittable && blockCount === 0 && (report || summary) && (
+        <div className="kx-valid__ok" role="status">
+          위반 0건 — 제출 가능
+        </div>
+      )}
+
+      {report ? (
+        report.violations.length === 0 ? (
+          <EmptyState title="위반 항목이 없습니다" />
+        ) : (
+          <>
+            <ul className="kx-valid__list">
+              {report.violations.map((v) => (
+                <li
+                  key={v.pin}
+                  className={`kx-valid__card kx-valid__card--${v.severity}`}
+                >
+                  <span className={`kx-valid__pin kx-valid__pin--${v.severity}`}>{v.pin}</span>
+                  <div className="kx-valid__card-body">
+                    <div className="kx-valid__card-head">
+                      <span className="kx-valid__label">{v.label}</span>
+                      <button className="kx-valid__locate" type="button">
+                        위치 보기
+                      </button>
+                    </div>
+                    <p className="kx-valid__measured">{v.measured}</p>
+                    {v.requiresDocument && (
+                      <span className="kx-valid__doc">구조계산서 D-7 제출 필요</span>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+            <p className="kx-valid__disclaimer">
+              {report.disclaimer} · 룰셋 {report.rulesetVersion}
+            </p>
+          </>
+        )
+      ) : (
+        <EmptyState
+          title={degraded ? '규정 검증 준비 중' : '규정 검증을 실행하세요'}
+          description={
+            degraded
+              ? '검증 엔진 연결 후 위반 상세가 표시됩니다.'
+              : '"규정 검증 실행"을 눌러 위반 항목을 확인하세요.'
+          }
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/floorplan/auto-layout.css b/src/frontend/src/screens/floorplan/auto-layout.css
new file mode 100644
index 0000000..c461530
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/auto-layout.css
@@ -0,0 +1,119 @@
+.kx-auto {
+  position: relative;
+  width: 100%;
+  max-width: 920px;
+  max-height: 90vh;
+  overflow: auto;
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+}
+.kx-auto__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6);
+  border-bottom: var(--border-card);
+  position: sticky;
+  top: 0;
+  background: var(--color-white);
+  z-index: 1;
+}
+.kx-auto__title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-h2);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-auto__sub {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: var(--space-2);
+}
+.kx-auto__close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  color: var(--color-neutral-500);
+  padding: 4px;
+}
+.kx-auto__body {
+  padding: var(--space-6);
+}
+.kx-auto__form {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: var(--space-4);
+  margin-bottom: var(--space-5);
+}
+.kx-auto__generating {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-8);
+  color: var(--color-neutral-500);
+}
+.kx-auto__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+}
+@media (max-width: 800px) {
+  .kx-auto__grid {
+    grid-template-columns: 1fr;
+  }
+}
+.kx-auto__card {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  position: relative;
+}
+.kx-auto__card.is-selected {
+  border-color: var(--color-primary-600);
+  box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.2);
+}
+.kx-auto__card input[type='radio'] {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  z-index: 2;
+  accent-color: var(--color-primary-600);
+}
+.kx-auto__card-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-auto__card-title {
+  font-size: var(--fs-h3);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-auto__metrics {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-auto__viol-ok {
+  color: var(--color-success);
+  font-weight: 600;
+}
+.kx-auto__viol-bad {
+  color: var(--color-error);
+  font-weight: 600;
+}
diff --git a/src/frontend/src/screens/floorplan/canvas.css b/src/frontend/src/screens/floorplan/canvas.css
new file mode 100644
index 0000000..7f5c455
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/canvas.css
@@ -0,0 +1,68 @@
+.kx-canvas {
+  transform-origin: center center;
+  transition: transform 0.12s ease;
+  max-width: 100%;
+  max-height: 100%;
+}
+.kx-canvas__svg {
+  width: min(900px, 100%);
+  height: auto;
+  max-height: 100%;
+  display: block;
+}
+
+.kx-canvas__hall {
+  fill: var(--color-canvas-bg);
+  stroke: #4b5b78;
+  stroke-width: 0.6;
+}
+
+.kx-canvas__trench line {
+  stroke: var(--color-canvas-line);
+  stroke-width: 0.15;
+  stroke-dasharray: 1 1;
+}
+
+.kx-canvas__booth polygon {
+  fill: rgba(0, 102, 179, 0.72);
+  stroke: #7cb2e0;
+  stroke-width: 0.15;
+  transition: fill 0.12s ease;
+  cursor: pointer;
+}
+.kx-canvas__booth.is-premium polygon {
+  fill: rgba(0, 102, 179, 0.5);
+  stroke-width: 0.3;
+}
+.kx-canvas__booth:hover polygon {
+  fill: rgba(0, 102, 179, 0.9);
+}
+.kx-canvas__booth.is-selected polygon {
+  fill: rgba(0, 102, 179, 0.95);
+  stroke: var(--color-white);
+  stroke-width: 0.4;
+}
+.kx-canvas__booth:focus {
+  outline: none;
+}
+.kx-canvas__booth:focus polygon {
+  stroke: var(--color-ai-accent);
+  stroke-width: 0.4;
+}
+.kx-canvas__booth-label {
+  fill: rgba(255, 255, 255, 0.92);
+  font-size: 1px;
+  font-family: var(--font-mono);
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+}
+
+.kx-canvas__ruler line {
+  stroke: #5b6b88;
+  stroke-width: 0.1;
+}
+.kx-canvas__ruler text {
+  fill: #8a9bb8;
+  font-size: 1.4px;
+}
diff --git a/src/frontend/src/screens/floorplan/editor.css b/src/frontend/src/screens/floorplan/editor.css
new file mode 100644
index 0000000..0282215
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/editor.css
@@ -0,0 +1,423 @@
+.kx-editor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+/* 툴바 */
+.kx-editor__toolbar {
+  height: 56px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--gutter);
+  background: var(--color-white);
+  border-bottom: var(--border-card);
+}
+.kx-editor__toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-editor__hall {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-editor__version {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-editor__saved::before {
+  content: '● ';
+  color: var(--color-success);
+  font-size: 8px;
+}
+.kx-editor__degraded {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-warning);
+  background: #fff4e5;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-editor__toolbar-right {
+  display: flex;
+  gap: var(--space-2);
+}
+
+/* 3열 워크스페이스 */
+.kx-editor__workspace {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+.kx-editor__left {
+  width: var(--panel-left-w);
+  flex-shrink: 0;
+  background: var(--color-white);
+  border-right: var(--border-card);
+  overflow-y: auto;
+}
+.kx-editor__right {
+  width: var(--panel-right-w);
+  flex-shrink: 0;
+  background: var(--color-white);
+  border-left: var(--border-card);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* 좌측 도구 */
+.kx-tool-group {
+  padding: var(--space-4);
+  border-bottom: var(--border-card);
+}
+.kx-tool-group h3 {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-neutral-500);
+  margin-bottom: var(--space-3);
+}
+.kx-palette {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2);
+}
+.kx-palette__item {
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: grab;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.kx-palette__item:hover {
+  border-color: var(--color-primary-600);
+  background: var(--color-primary-050);
+}
+.kx-palette__item.is-full {
+  grid-column: span 2;
+}
+.kx-palette__swatch {
+  display: block;
+  min-width: 20px;
+  min-height: 20px;
+  border: 1px solid var(--color-primary-600);
+  background: rgba(0, 102, 179, 0.15);
+}
+.kx-palette__item.is-full .kx-palette__swatch {
+  width: 100%;
+  height: 28px;
+}
+.kx-palette__label {
+  font-size: 11px;
+  text-align: center;
+  color: var(--color-neutral-700);
+}
+.kx-facility {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-facility button {
+  text-align: left;
+  padding: var(--space-2) var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-facility button:hover {
+  background: var(--color-neutral-050);
+}
+
+/* 레이어 토글 */
+.kx-layer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) 0;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-switch {
+  width: 34px;
+  height: 18px;
+  border-radius: var(--radius-pill);
+  border: none;
+  background: var(--color-neutral-200);
+  position: relative;
+  transition: background 0.15s ease;
+}
+.kx-switch.is-on {
+  background: var(--color-primary-600);
+}
+.kx-switch__knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--color-white);
+  transition: left 0.15s ease;
+}
+.kx-switch.is-on .kx-switch__knob {
+  left: 18px;
+}
+
+/* 중앙 캔버스 */
+.kx-editor__canvas-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-canvas-bg);
+}
+.kx-editor__canvas-stage {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+  overflow: hidden;
+}
+.kx-editor__canvas-loading {
+  width: min(900px, 90%);
+}
+.kx-editor__canvas-error,
+.kx-editor__canvas-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  color: rgba(255, 255, 255, 0.85);
+}
+.kx-editor__statusbar {
+  height: 40px;
+  flex-shrink: 0;
+  background: var(--color-white);
+  border-top: var(--border-card);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--gutter);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-editor__stats {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--color-neutral-200);
+}
+.kx-editor__zoom {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.kx-editor__zoom button {
+  width: 24px;
+  height: 24px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+}
+.kx-editor__zoom span {
+  width: 44px;
+  text-align: center;
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+
+/* 우측 탭 */
+.kx-editor__tabs {
+  display: flex;
+  border-bottom: var(--border-card);
+  flex-shrink: 0;
+}
+.kx-editor__tabs button {
+  flex: 1;
+  padding: var(--space-3);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-editor__tabs button.is-active {
+  color: var(--color-primary-600);
+  border-bottom-color: var(--color-primary-600);
+}
+
+/* 속성 */
+.kx-props {
+  padding: var(--space-4);
+  overflow-y: auto;
+}
+.kx-props__empty {
+  color: var(--color-neutral-500);
+  font-size: var(--fs-body);
+}
+.kx-props__list {
+  margin: 0;
+}
+.kx-props__row {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-3) 0;
+  border-bottom: var(--border-card);
+}
+.kx-props__row dt {
+  color: var(--color-neutral-500);
+  font-size: var(--fs-caption);
+}
+.kx-props__row dd {
+  margin: 0;
+  color: var(--color-neutral-900);
+  font-size: var(--fs-body);
+  font-weight: 500;
+}
+
+/* 검증 */
+.kx-valid {
+  padding: var(--space-4);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  background: var(--color-neutral-050);
+  flex: 1;
+}
+.kx-valid__summary {
+  display: flex;
+  gap: var(--space-2);
+}
+.kx-valid__chip {
+  padding: 4px 12px;
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  font-weight: 700;
+}
+.kx-valid__chip--block {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+.kx-valid__chip--warn {
+  background: var(--color-violation-warn-bg);
+  color: var(--color-violation-warn-text);
+}
+.kx-valid__ok {
+  background: #e6f4ee;
+  color: var(--color-success);
+  font-weight: 600;
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+}
+.kx-valid__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-valid__card {
+  display: flex;
+  gap: var(--space-3);
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+}
+.kx-valid__card--block {
+  border-left: 3px solid var(--color-error);
+}
+.kx-valid__card--warn {
+  border-left: 3px solid var(--color-violation-warn);
+}
+.kx-valid__pin {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  color: var(--color-white);
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.kx-valid__pin--block {
+  background: var(--color-error);
+}
+.kx-valid__pin--warn {
+  background: var(--color-violation-warn);
+}
+.kx-valid__card-body {
+  flex: 1;
+  min-width: 0;
+}
+.kx-valid__card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-2);
+}
+.kx-valid__label {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-valid__locate {
+  background: none;
+  border: none;
+  color: var(--color-primary-600);
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.kx-valid__measured {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  margin-top: 2px;
+}
+.kx-valid__doc {
+  display: inline-block;
+  margin-top: var(--space-2);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-ai-accent);
+  background: var(--color-ai-surface);
+  border: 1px solid var(--color-ai-accent);
+  border-radius: var(--radius-pill);
+  padding: 2px 8px;
+}
+.kx-valid__disclaimer {
+  font-size: 11px;
+  line-height: 15px;
+  color: var(--color-neutral-500);
+}
diff --git a/src/frontend/src/screens/floorplan/layout-comparison.css b/src/frontend/src/screens/floorplan/layout-comparison.css
new file mode 100644
index 0000000..5fe7239
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/layout-comparison.css
@@ -0,0 +1,158 @@
+.kx-cmp {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  padding: var(--space-5);
+  max-width: var(--container-max);
+}
+.kx-cmp__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+.kx-cmp__head h1 {
+  font-size: var(--fs-h1);
+  color: var(--color-neutral-900);
+}
+.kx-cmp__sub {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: var(--space-1);
+}
+
+.kx-cmp__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+}
+.kx-cmp__card {
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.kx-cmp__card:hover {
+  box-shadow: var(--shadow-level2);
+}
+.kx-cmp__card.is-selected {
+  border-color: var(--color-primary-600);
+  box-shadow: 0 0 0 2px var(--color-primary-100);
+}
+.kx-cmp__card:focus-visible {
+  outline: 2px solid var(--color-primary-600);
+  outline-offset: 2px;
+}
+
+.kx-cmp__thumb {
+  position: relative;
+  margin: 0;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+}
+.kx-cmp__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.kx-cmp__ai {
+  position: absolute;
+  top: var(--space-2);
+  left: var(--space-2);
+}
+.kx-cmp__check {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+}
+.kx-cmp__wm {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(-24deg);
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  pointer-events: none;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.kx-cmp__body {
+  padding: var(--space-4);
+}
+.kx-cmp__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+.kx-cmp__title-row h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-cmp__reco {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-primary-700);
+  background: var(--color-primary-100);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-cmp__metrics {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-cmp__metrics div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--fs-body);
+}
+.kx-cmp__metrics dt {
+  color: var(--color-neutral-500);
+}
+.kx-cmp__metrics dd {
+  color: var(--color-neutral-900);
+  font-weight: 600;
+}
+.kx-cmp__ok {
+  color: var(--color-success);
+}
+.kx-cmp__warn {
+  color: var(--color-warning);
+}
+
+.kx-cmp__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-top: var(--space-2);
+}
+.kx-cmp__disclaimer {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+@media (max-width: 1000px) {
+  .kx-cmp__grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/frontend/src/screens/floorplan/sampleLayout.ts b/src/frontend/src/screens/floorplan/sampleLayout.ts
new file mode 100644
index 0000000..c8790d3
--- /dev/null
+++ b/src/frontend/src/screens/floorplan/sampleLayout.ts
@@ -0,0 +1,66 @@
+import type { BoothDto, LayoutDto } from '../../api/types';
+
+/*
+ * Degraded 샘플 배치 — 백엔드 매퍼 501(NOT_IMPLEMENTED) 시에만 캔버스 시연용.
+ * ★ 실데이터 아님. 계약 shape과 동일 구조로 만들어 실 API 연결 시 그대로 대체된다.
+ * 홀 126×90m 로컬 좌표. 부스 3×3m/6×3m 격자 배치.
+ */
+export function sampleLayout(eventId: string, hallId: string): LayoutDto {
+  const booths: BoothDto[] = [];
+  const cols = 12;
+  const rows = 6;
+  const bw = 6;
+  const bh = 3;
+  const gapX = 4;
+  const gapY = 6;
+  const originX = 10;
+  const originY = 12;
+
+  let idx = 0;
+  for (let r = 0; r < rows; r += 1) {
+    for (let c = 0; c < cols; c += 1) {
+      const x = originX + c * (bw + gapX);
+      const y = originY + r * (bh + gapY);
+      const rowLetter = String.fromCharCode(65 + r); // A, B, C…
+      const no = `${rowLetter}-${101 + c}`;
+      const premium = r === 2 && c >= 4 && c <= 6;
+      booths.push({
+        boothId: `sample-${idx}`,
+        boothNo: no,
+        type: premium ? 'premium' : 'basic',
+        polygon: [
+          [x, y],
+          [x + bw, y],
+          [x + bw, y + bh],
+          [x, y + bh],
+          [x, y],
+        ],
+        sizeM: [bw, bh],
+        heightM: 4.2,
+        floorLoadTPerM2: 3.0,
+        assignedCompanyName: idx % 3 === 0 ? '(주)한빛로보틱스' : null,
+        premium,
+      });
+      idx += 1;
+    }
+  }
+
+  return {
+    layoutId: 'sample-layout',
+    eventId,
+    hallId,
+    version: 3,
+    name: '배치안 B (샘플)',
+    status: 'draft',
+    booths,
+    summary: {
+      boothCount: booths.length,
+      targetBoothCount: 510,
+      salesAreaM2: booths.length * bw * bh,
+      minAisleWidthM: 3.2,
+      violationBlock: 2,
+      violationWarn: 3,
+    },
+    updatedAt: new Date().toISOString(),
+  };
+}
diff --git a/src/frontend/src/screens/gallery/VisualizationGalleryPage.tsx b/src/frontend/src/screens/gallery/VisualizationGalleryPage.tsx
new file mode 100644
index 0000000..3196943
--- /dev/null
+++ b/src/frontend/src/screens/gallery/VisualizationGalleryPage.tsx
@@ -0,0 +1,200 @@
+import { useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { ApiRequestError } from '../../api/client';
+import { renderApi } from '../../api/endpoints';
+import { AiImage } from '../../components/ui/AiImage';
+import { CompareSlider } from '../../components/ui/CompareSlider';
+import { AiLabel } from '../../components/ui/Badge';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import type { RenderJobDto } from '../../api/types';
+import { sampleGallery } from './sampleGallery';
+import { AFTER_PLACEHOLDER, BEFORE_EMPTY_HALL } from '../design/placeholders';
+import './gallery.css';
+
+/*
+ * SCR-12 시각화 갤러리 (M5). Stitch visualization_gallery 이식.
+ * - 샷 필터 칩(S1~S7) + 마소너리 그리드(워터마크 상시·생성중/실패 상태) + 라이트박스.
+ * - render-jobs 목록 501 → degraded 샘플 시연. 상단 고지 바 상시.
+ */
+
+const SHOT_FILTERS = [
+  { key: '', label: '전체' },
+  { key: 'S1', label: 'S1 정면' },
+  { key: 'S2', label: 'S2 야간' },
+  { key: 'S3', label: 'S3 통로' },
+  { key: 'S4', label: 'S4 내부' },
+  { key: 'S5', label: 'S5 비교' },
+  { key: 'S6', label: 'S6 배선' },
+  { key: 'S7', label: 'S7 홀 전경' },
+] as const;
+
+const GALLERY_NOTICE =
+  'AI 생성 이미지는 계약·심사 서류에 사용할 수 없습니다 — 시공 기준은 도면입니다';
+
+export function VisualizationGalleryPage() {
+  const { eventId = '', boothId = '' } = useParams();
+  const [shot, setShot] = useState<string>('');
+  const [lightbox, setLightbox] = useState<RenderJobDto | null>(null);
+
+  const query = useQuery<{ jobs: RenderJobDto[]; degraded: boolean }>({
+    queryKey: ['render-jobs', eventId, boothId],
+    queryFn: async () => {
+      try {
+        const jobs = await renderApi.list(eventId, boothId);
+        return { jobs, degraded: false };
+      } catch (err) {
+        if (err instanceof ApiRequestError && err.code === 'NOT_IMPLEMENTED') {
+          return { jobs: sampleGallery(boothId), degraded: true };
+        }
+        throw err;
+      }
+    },
+  });
+
+  const jobs = query.data?.jobs ?? [];
+  const degraded = query.data?.degraded ?? false;
+  const filtered = useMemo(
+    () => (shot ? jobs.filter((j) => j.shotPreset === shot) : jobs),
+    [jobs, shot],
+  );
+
+  return (
+    <div className="kx-gallery">
+      {/* 상단 고정 고지 바 */}
+      <div className="kx-gallery__notice" role="note">
+        {GALLERY_NOTICE}
+      </div>
+
+      <header className="kx-gallery__head">
+        <div className="kx-gallery__scope">
+          <h2>시각화 갤러리</h2>
+          <span className="kx-gallery__scope-sub">부스 {boothId || 'A-102'}</span>
+          {degraded && <span className="kx-gallery__degraded">데이터 준비 중 (샘플)</span>}
+        </div>
+        <div className="kx-gallery__filters" role="tablist" aria-label="샷 필터">
+          {SHOT_FILTERS.map((f) => (
+            <button
+              key={f.key || 'all'}
+              role="tab"
+              aria-selected={shot === f.key}
+              className={`kx-gallery__chip ${shot === f.key ? 'is-active' : ''}`}
+              onClick={() => setShot(f.key)}
+            >
+              {f.label}
+            </button>
+          ))}
+        </div>
+      </header>
+
+      {query.isLoading ? (
+        <div className="kx-gallery__grid">
+          {Array.from({ length: 6 }, (_, i) => (
+            <Skeleton key={i} height={200} radius={8} />
+          ))}
+        </div>
+      ) : query.isError ? (
+        <ErrorState onRetry={() => query.refetch()} />
+      ) : filtered.length === 0 ? (
+        <EmptyState
+          title="아직 생성된 이미지가 없습니다"
+          description="설계 스튜디오에서 예상 사진을 생성하세요."
+        />
+      ) : (
+        <div className="kx-gallery__grid">
+          {filtered.map((job) => (
+            <button
+              key={job.jobId}
+              className="kx-gallery__card"
+              onClick={() => setLightbox(job)}
+              aria-label={`${job.shotPreset} 상세 보기`}
+            >
+              <AiImage
+                imageUrl={job.imageUrl}
+                status={job.status}
+                watermarkText={job.watermarkText}
+                notice={job.notice}
+                shotLabel={job.shotPreset}
+                versionTag="설계 v2"
+                alt={`${job.shotPreset} 예상 이미지`}
+              />
+              <div className="kx-gallery__meta tnum">
+                <span>{new Date(job.createdAt).toLocaleDateString('ko-KR')}</span>
+                <span className={`kx-gallery__status is-${job.status.toLowerCase()}`}>
+                  {STATUS_LABEL[job.status]}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* 라이트박스 */}
+      {lightbox && (
+        <div className="kx-modal" role="dialog" aria-modal="true" aria-label="이미지 상세">
+          <div className="kx-modal__backdrop" onClick={() => setLightbox(null)} />
+          <div className="kx-lightbox">
+            <button
+              className="kx-lightbox__close"
+              onClick={() => setLightbox(null)}
+              aria-label="닫기"
+            >
+              ✕
+            </button>
+            <div className="kx-lightbox__stage">
+              {lightbox.shotPreset === 'S5' ? (
+                <CompareSlider
+                  beforeSrc={BEFORE_EMPTY_HALL}
+                  afterSrc={lightbox.imageUrl ?? AFTER_PLACEHOLDER}
+                  afterOverlay={
+                    <>
+                      <div className="kx-studio__wm" aria-hidden="true">
+                        {lightbox.watermarkText}
+                      </div>
+                      <span className="kx-studio__after-ai">
+                        <AiLabel>AI 생성</AiLabel>
+                      </span>
+                    </>
+                  }
+                />
+              ) : (
+                <AiImage
+                  imageUrl={lightbox.imageUrl}
+                  status={lightbox.status}
+                  watermarkText={lightbox.watermarkText}
+                  notice={lightbox.notice}
+                  shotLabel={lightbox.shotPreset}
+                  alt={`${lightbox.shotPreset} 원본`}
+                />
+              )}
+            </div>
+            <div className="kx-lightbox__meta">
+              <dl className="kx-lightbox__dl mono">
+                <div>
+                  <dt>생성일</dt>
+                  <dd>{new Date(lightbox.createdAt).toLocaleString('ko-KR')}</dd>
+                </div>
+                <div>
+                  <dt>모델</dt>
+                  <dd>{lightbox.modelVersion ?? '—'}</dd>
+                </div>
+                <div>
+                  <dt>스키마 해시</dt>
+                  <dd>{lightbox.schemaHash ?? '—'}</dd>
+                </div>
+              </dl>
+              <p className="kx-lightbox__notice">{lightbox.notice}</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const STATUS_LABEL: Record<RenderJobDto['status'], string> = {
+  QUEUED: '대기',
+  RUNNING: '생성 중',
+  DONE: '완료',
+  FAILED: '실패',
+};
diff --git a/src/frontend/src/screens/gallery/gallery.css b/src/frontend/src/screens/gallery/gallery.css
new file mode 100644
index 0000000..df18871
--- /dev/null
+++ b/src/frontend/src/screens/gallery/gallery.css
@@ -0,0 +1,167 @@
+.kx-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5) var(--space-6);
+}
+
+/* 상단 고정 고지 바 */
+.kx-gallery__notice {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-sm);
+  background: var(--color-ai-surface);
+  border: 1px solid var(--color-ai-accent);
+  color: var(--color-ai-accent);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+}
+
+.kx-gallery__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-gallery__scope {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+.kx-gallery__scope h2 {
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+}
+.kx-gallery__scope-sub {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kx-gallery__degraded {
+  font-size: var(--fs-caption);
+  color: var(--color-warning);
+  background: #fff4e5;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+}
+.kx-gallery__filters {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.kx-gallery__chip {
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  padding: 5px 12px;
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+}
+.kx-gallery__chip.is-active {
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+  color: var(--color-white);
+}
+
+/* 마소너리(간이 — CSS columns) */
+.kx-gallery__grid {
+  columns: 3;
+  column-gap: var(--space-4);
+}
+.kx-gallery__card {
+  display: block;
+  width: 100%;
+  break-inside: avoid;
+  margin-bottom: var(--space-4);
+  border: none;
+  background: transparent;
+  padding: 0;
+  text-align: left;
+}
+.kx-gallery__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-1) var(--space-1) 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-gallery__status {
+  font-weight: 600;
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-gallery__status.is-done {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kx-gallery__status.is-running,
+.kx-gallery__status.is-queued {
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent);
+}
+.kx-gallery__status.is-failed {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+
+/* 라이트박스 */
+.kx-lightbox {
+  position: relative;
+  z-index: 1;
+  width: min(880px, 94vw);
+  max-height: 90vh;
+  overflow: auto;
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  box-shadow: var(--shadow-level2);
+}
+.kx-lightbox__close {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  border: none;
+  background: var(--color-neutral-100);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  color: var(--color-neutral-700);
+}
+.kx-lightbox__stage {
+  margin-bottom: var(--space-4);
+}
+.kx-lightbox__dl {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--space-3);
+  font-size: var(--fs-caption);
+}
+.kx-lightbox__dl dt {
+  color: var(--color-neutral-500);
+  margin-bottom: 2px;
+}
+.kx-lightbox__dl dd {
+  margin: 0;
+  color: var(--color-neutral-900);
+  word-break: break-all;
+}
+.kx-lightbox__notice {
+  margin-top: var(--space-3);
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+
+@media (max-width: 1100px) {
+  .kx-gallery__grid {
+    columns: 2;
+  }
+}
+@media (max-width: 640px) {
+  .kx-gallery__grid {
+    columns: 2;
+  }
+}
diff --git a/src/frontend/src/screens/gallery/sampleGallery.ts b/src/frontend/src/screens/gallery/sampleGallery.ts
new file mode 100644
index 0000000..b89b900
--- /dev/null
+++ b/src/frontend/src/screens/gallery/sampleGallery.ts
@@ -0,0 +1,37 @@
+import type { RenderJobDto } from '../../api/types';
+
+/*
+ * Degraded 샘플 갤러리 — render-jobs 목록 501(NOT_IMPLEMENTED) 시 시연용.
+ * ★ Stitch visualization_gallery 번들 이미지(public/mock)를 DONE 샷에 배선.
+ *   워터마크·고지 상시 유지. 실 render-jobs API 연결 시 대체.
+ */
+const WATERMARK = 'AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있습니다';
+const NOTICE = 'AI 생성 이미지는 계약·심사 서류에 사용할 수 없습니다 — 시공 기준은 도면입니다';
+const G = `${import.meta.env.BASE_URL}mock/visualization_gallery`;
+
+const SHOTS: { preset: string; status: RenderJobDto['status']; img?: string }[] = [
+  { preset: 'S1', status: 'DONE', img: `${G}/img1.jpg` },
+  { preset: 'S2', status: 'DONE', img: `${G}/img2.jpg` },
+  { preset: 'S3', status: 'RUNNING' },
+  { preset: 'S4', status: 'DONE', img: `${G}/img3.jpg` },
+  { preset: 'S5', status: 'DONE', img: `${G}/img4.jpg` },
+  { preset: 'S6', status: 'DONE', img: `${G}/img5.jpg` },
+  { preset: 'S7', status: 'FAILED' },
+];
+
+export function sampleGallery(boothId: string): RenderJobDto[] {
+  return SHOTS.map((s, i) => ({
+    jobId: `sample-job-${i}`,
+    boothId: boothId || 'b-102',
+    shotPreset: s.preset,
+    status: s.status,
+    imageUrl: s.img ?? null,
+    schemaHash: s.status === 'DONE' ? `sha256:sample${i}` : null,
+    modelVersion: s.status === 'DONE' ? 'gemini-3.1-flash-image-preview' : null,
+    watermarkRequired: true,
+    watermarkText: WATERMARK,
+    notice: NOTICE,
+    errorMessage: s.status === 'FAILED' ? '생성 실패 — 다시 시도해 주세요.' : null,
+    createdAt: new Date(Date.now() - i * 3600_000).toISOString(),
+  }));
+}
diff --git a/src/frontend/src/screens/hallassign/HallAssignmentPage.tsx b/src/frontend/src/screens/hallassign/HallAssignmentPage.tsx
new file mode 100644
index 0000000..2de4510
--- /dev/null
+++ b/src/frontend/src/screens/hallassign/HallAssignmentPage.tsx
@@ -0,0 +1,571 @@
+/*
+ * SCR /halls — M1 홀 배정 보드 + 자동 견적.
+ * 진입: 사이드바 "홀 배정"(App.tsx 배선은 통합자). 홀매니저=배정/해제, 로그인=견적·조회.
+ * 구성: ①상단 기간 필터 ②홀×기간 배정 보드(충돌 표시·해제) ③배정 모달(행사·홀·기간)
+ *       ④자동 견적 패널(홀·기간·부스 규모 입력 → 요율 룰셋 라인 표시).
+ * ★ 실 API 배선: GET /api/halls · /assignments · POST /assignments(409 충돌) · DELETE · POST /quote.
+ *   충돌 상세는 공용 client가 409 본문을 소거하므로 GET /conflicts(사전검사)로 재조회해 표시한다.
+ */
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { Offcanvas } from '../../components/ui/Offcanvas';
+import { IconWarning } from '../../components/ui/icons';
+import { ApiRequestError } from '../../api/client';
+import {
+  hallAssignApi,
+  type AssignmentBody,
+  type Conflict,
+  type Hall,
+  type HallAssignment,
+  type QuoteResult,
+} from './hallAssignApi';
+import './hallassign.css';
+
+/** 두 폐구간 [aS,aE]·[bS,bE] 겹침 여부(YYYY-MM-DD 문자열 비교 가능). */
+function overlaps(aS: string | null, aE: string | null, bS: string | null, bE: string | null): boolean {
+  if (!aS || !aE || !bS || !bE) return false;
+  return aS <= bE && bS <= aE;
+}
+
+/** 같은 홀에서 서로 겹치는 배정 id 집합(보드 충돌 하이라이트). */
+function conflictingIds(list: HallAssignment[]): Set<string> {
+  const out = new Set<string>();
+  for (let i = 0; i < list.length; i += 1) {
+    for (let j = i + 1; j < list.length; j += 1) {
+      const a = list[i];
+      const b = list[j];
+      if (a.hallId === b.hallId && overlaps(a.occupyStart, a.occupyEnd, b.occupyStart, b.occupyEnd)) {
+        out.add(a.id);
+        out.add(b.id);
+      }
+    }
+  }
+  return out;
+}
+
+function fmtKrw(n: number): string {
+  return `${n.toLocaleString('ko-KR')}원`;
+}
+
+const EMPTY_FORM: AssignmentBody = { eventId: '', hallId: '', primary: true, occupyStart: '', occupyEnd: '', note: '' };
+
+export function HallAssignmentPage() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [from, setFrom] = useState('');
+  const [to, setTo] = useState('');
+  const [modalOpen, setModalOpen] = useState(false);
+  const [form, setForm] = useState<AssignmentBody>(EMPTY_FORM);
+  const [assignError, setAssignError] = useState<string | null>(null);
+  const [conflictHits, setConflictHits] = useState<Conflict[]>([]);
+  const [toast, setToast] = useState<string | null>(null);
+  // 배정 상세 offcanvas — 칩 본문 클릭 시 우측 슬라이드
+  const [detail, setDetail] = useState<HallAssignment | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  const hallsQ = useQuery({ queryKey: ['halls'], queryFn: () => hallAssignApi.halls(), retry: false });
+  const assignQ = useQuery({
+    queryKey: ['hall-assignments', from, to],
+    queryFn: () => hallAssignApi.assignments(from || undefined, to || undefined),
+    retry: false,
+  });
+  const eventsQ = useQuery({ queryKey: ['hall-events'], queryFn: () => hallAssignApi.events(), retry: false, enabled: modalOpen });
+
+  const halls = hallsQ.data ?? [];
+  const assignments = assignQ.data ?? [];
+  const conflictSet = useMemo(() => conflictingIds(assignments), [assignments]);
+  const byHall = useMemo(() => {
+    const map = new Map<string, HallAssignment[]>();
+    for (const a of assignments) {
+      const arr = map.get(a.hallId) ?? [];
+      arr.push(a);
+      map.set(a.hallId, arr);
+    }
+    return map;
+  }, [assignments]);
+
+  // 관리자(홀매니저) 전용 API 접근이 막히면(403) 조회 자체가 실패 — 보드는 안내로 대체.
+  const boardForbidden = assignQ.error instanceof ApiRequestError && assignQ.error.code === 'FORBIDDEN';
+
+  const assignMut = useMutation({
+    mutationFn: (body: AssignmentBody) => hallAssignApi.assign(body),
+    onSuccess: () => {
+      setModalOpen(false);
+      setForm(EMPTY_FORM);
+      setAssignError(null);
+      setConflictHits([]);
+      setToast(t('hallassign.assignedToast'));
+      queryClient.invalidateQueries({ queryKey: ['hall-assignments'] });
+    },
+    onError: async (err) => {
+      if (err instanceof ApiRequestError && err.code === 'CONFLICT') {
+        setAssignError(t('hallassign.conflictErr'));
+        // 공용 client가 409 본문을 소거하므로 충돌 상세를 사전검사로 재조회.
+        try {
+          const hits = await hallAssignApi.conflicts(
+            form.hallId,
+            form.occupyStart || '',
+            form.occupyEnd || '',
+            form.eventId,
+          );
+          setConflictHits(hits);
+        } catch {
+          setConflictHits([]);
+        }
+      } else {
+        setAssignError(err instanceof ApiRequestError ? err.message : t('hallassign.assignFail'));
+      }
+    },
+  });
+
+  const releaseMut = useMutation({
+    mutationFn: (id: string) => hallAssignApi.release(id),
+    onSuccess: () => {
+      setToast(t('hallassign.releasedToast'));
+      setDetailOpen(false);
+      queryClient.invalidateQueries({ queryKey: ['hall-assignments'] });
+    },
+    onError: () => setToast(t('hallassign.releaseFail')),
+  });
+
+  function openModal() {
+    setForm(EMPTY_FORM);
+    setAssignError(null);
+    setConflictHits([]);
+    setModalOpen(true);
+  }
+
+  /** 상세 → 수정: 배정 값을 배정 모달에 프리필(생성 API 재사용). */
+  function openModalWith(a: HallAssignment) {
+    setForm({
+      eventId: a.eventId,
+      hallId: a.hallId,
+      primary: a.primary,
+      occupyStart: a.occupyStart ?? '',
+      occupyEnd: a.occupyEnd ?? '',
+      note: a.note ?? '',
+    });
+    setAssignError(null);
+    setConflictHits([]);
+    setDetailOpen(false);
+    setModalOpen(true);
+  }
+
+  function openDetail(a: HallAssignment) {
+    setDetail(a);
+    setDetailOpen(true);
+  }
+
+  function onPickEvent(eventId: string) {
+    const ev = eventsQ.data?.find((e) => e.id === eventId);
+    setForm((f) => ({
+      ...f,
+      eventId,
+      occupyStart: ev?.startDate ?? f.occupyStart,
+      occupyEnd: ev?.endDate ?? f.occupyEnd,
+    }));
+  }
+
+  function submitAssign() {
+    if (!form.eventId || !form.hallId) {
+      setAssignError(t('hallassign.pickEventHall'));
+      return;
+    }
+    setAssignError(null);
+    setConflictHits([]);
+    assignMut.mutate(form);
+  }
+
+  return (
+    <div className="kx-page kx-hall">
+      {toast && <div className="kx-hall__toast" role="status" onClick={() => setToast(null)}>{toast}</div>}
+
+      <header className="kx-hall__top">
+        <div>
+          <h1>{t('hallassign.title')}</h1>
+          <p className="kx-card__hint">{t('hallassign.subtitle')}</p>
+        </div>
+        <div className="kx-hall__filter">
+          <label>
+            {t('hallassign.start')}
+            <input className="kx-select" type="date" value={from} onChange={(e) => setFrom(e.target.value)} />
+          </label>
+          <label>
+            {t('hallassign.end')}
+            <input className="kx-select" type="date" value={to} onChange={(e) => setTo(e.target.value)} />
+          </label>
+          <Button variant="primary" onClick={openModal}>{t('hallassign.newAssign')}</Button>
+        </div>
+      </header>
+
+      {/* ── 배정 보드 ── */}
+      <section className="kx-card">
+        <div className="kx-card__head">
+          <h2>{t('hallassign.board')}</h2>
+          <span className="kx-card__hint">{t('hallassign.boardHint')}</span>
+        </div>
+        {assignQ.isLoading || hallsQ.isLoading ? (
+          <div className="kx-hall__rows"><Skeleton height={40} /><Skeleton height={40} /><Skeleton height={40} /></div>
+        ) : boardForbidden ? (
+          <EmptyState title={t('hallassign.forbiddenTitle')} description={t('hallassign.forbiddenDesc')} />
+        ) : assignQ.error ? (
+          <ErrorState onRetry={() => assignQ.refetch()} />
+        ) : halls.length === 0 ? (
+          <EmptyState title={t('hallassign.noHalls')} />
+        ) : (
+          <div className="kx-hall__board">
+            {halls.map((h: Hall) => {
+              const rows = byHall.get(h.id) ?? [];
+              return (
+                <div className="kx-hall__row" key={h.id}>
+                  <div className="kx-hall__rowhead">
+                    <span className="kx-hall__hallname">{h.label}</span>
+                    <span className="kx-hall__area">{h.areaM2?.toLocaleString('ko-KR')}㎡</span>
+                  </div>
+                  <div className="kx-hall__chips">
+                    {rows.length === 0 ? (
+                      <span className="kx-hall__idle">{t('hallassign.noAssign')}</span>
+                    ) : (
+                      rows.map((a) => {
+                        const conflict = conflictSet.has(a.id);
+                        return (
+                          <span
+                            key={a.id}
+                            className={`kx-hall__chip${conflict ? ' is-conflict' : ''}${a.primary ? ' is-primary' : ''}`}
+                            title={`${a.occupyStart ?? '?'} ~ ${a.occupyEnd ?? '?'}`}
+                          >
+                            <span
+                              className="kx-hall__chipbody"
+                              role="button"
+                              tabIndex={0}
+                              aria-label={t('hallassign.openDetail', { event: a.eventName })}
+                              onClick={() => openDetail(a)}
+                              onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                  e.preventDefault();
+                                  openDetail(a);
+                                }
+                              }}
+                            >
+                              {conflict && <IconWarning size={13} />}
+                              <span className="kx-hall__chiptext">
+                                {a.eventName}
+                                <em>{a.occupyStart} ~ {a.occupyEnd}</em>
+                              </span>
+                            </span>
+                            <button
+                              type="button"
+                              className="kx-hall__chipx"
+                              aria-label={t('hallassign.release')}
+                              onClick={() => {
+                                if (window.confirm(t('hallassign.releaseConfirm', { event: a.eventName, hall: a.hallLabel }))) {
+                                  releaseMut.mutate(a.id);
+                                }
+                              }}
+                            >×</button>
+                          </span>
+                        );
+                      })
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </section>
+
+      {/* ── 자동 견적 패널 ── */}
+      <QuotePanel halls={halls} />
+
+      {/* ── 배정 모달 ── */}
+      {modalOpen && (
+        <div className="kx-hall__backdrop" onClick={() => setModalOpen(false)}>
+          <div className="kx-hall__modal" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
+            <div className="kx-card__head">
+              <h2>{t('hallassign.modalTitle')}</h2>
+              <button type="button" className="kx-hall__chipx" aria-label={t('hallassign.close')} onClick={() => setModalOpen(false)}>×</button>
+            </div>
+            <div className="kx-hall__form">
+              <label>
+                {t('hallassign.event')}
+                <select className="kx-select" value={form.eventId} onChange={(e) => onPickEvent(e.target.value)}>
+                  <option value="">{t('hallassign.pickEvent')}</option>
+                  {(eventsQ.data ?? []).map((e) => (
+                    <option key={e.id} value={e.id}>{e.name}</option>
+                  ))}
+                </select>
+              </label>
+              <label>
+                {t('hallassign.hall')}
+                <select className="kx-select" value={form.hallId} onChange={(e) => setForm((f) => ({ ...f, hallId: e.target.value }))}>
+                  <option value="">{t('hallassign.pickHall')}</option>
+                  {halls.map((h) => (
+                    <option key={h.id} value={h.id}>{h.label}</option>
+                  ))}
+                </select>
+              </label>
+              <div className="kx-hall__form2">
+                <label>
+                  {t('hallassign.occupyStart')}
+                  <input className="kx-select" type="date" value={form.occupyStart ?? ''} onChange={(e) => setForm((f) => ({ ...f, occupyStart: e.target.value }))} />
+                </label>
+                <label>
+                  {t('hallassign.occupyEnd')}
+                  <input className="kx-select" type="date" value={form.occupyEnd ?? ''} onChange={(e) => setForm((f) => ({ ...f, occupyEnd: e.target.value }))} />
+                </label>
+              </div>
+              <label className="kx-hall__check">
+                <input type="checkbox" checked={form.primary} onChange={(e) => setForm((f) => ({ ...f, primary: e.target.checked }))} />
+                {t('hallassign.primary')}
+              </label>
+              <label>
+                {t('hallassign.note')}
+                <input className="kx-select" type="text" value={form.note ?? ''} onChange={(e) => setForm((f) => ({ ...f, note: e.target.value }))} placeholder={t('hallassign.optional')} />
+              </label>
+
+              {assignError && (
+                <div className="kx-hall__err" role="alert">
+                  <IconWarning size={15} /> {assignError}
+                  {conflictHits.length > 0 && (
+                    <ul className="kx-hall__conflicts">
+                      {conflictHits.map((c) => (
+                        <li key={c.assignmentId}>{c.eventName} · {c.hallLabel} ({c.occupyStart} ~ {c.occupyEnd})</li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              )}
+            </div>
+            <div className="kx-hall__modalfoot">
+              <Button variant="ghost" onClick={() => setModalOpen(false)}>{t('hallassign.cancel')}</Button>
+              <Button variant="primary" onClick={submitAssign} disabled={assignMut.isPending}>
+                {assignMut.isPending ? t('hallassign.assigning') : t('hallassign.assign')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── 배정 상세 offcanvas(우측 슬라이드) ── */}
+      <Offcanvas
+        open={detailOpen}
+        onClose={() => setDetailOpen(false)}
+        title={detail ? detail.eventName : t('hallassign.detailTitle')}
+        footer={
+          detail ? (
+            <>
+              <Button variant="ghost" onClick={() => detail && openModalWith(detail)}>
+                {t('hallassign.edit')}
+              </Button>
+              <Button
+                variant="danger"
+                disabled={releaseMut.isPending}
+                onClick={() => {
+                  if (detail && window.confirm(t('hallassign.releaseConfirm', { event: detail.eventName, hall: detail.hallLabel }))) {
+                    releaseMut.mutate(detail.id);
+                  }
+                }}
+              >
+                {t('hallassign.release')}
+              </Button>
+            </>
+          ) : undefined
+        }
+      >
+        {detail && <AssignmentDetail assignment={detail} allAssignments={assignments} />}
+      </Offcanvas>
+    </div>
+  );
+}
+
+/** 배정 상세 본문 — 기간·홀·상태·충돌 행사·자동 견적 요약. */
+function AssignmentDetail({ assignment, allAssignments }: { assignment: HallAssignment; allAssignments: HallAssignment[] }) {
+  const { t } = useTranslation();
+  const a = assignment;
+
+  // 같은 홀에서 이 배정과 겹치는 다른 배정(충돌).
+  const conflicts = useMemo(
+    () =>
+      allAssignments.filter(
+        (o) => o.id !== a.id && o.hallId === a.hallId && overlaps(a.occupyStart, a.occupyEnd, o.occupyStart, o.occupyEnd),
+      ),
+    [allAssignments, a],
+  );
+
+  // 자동 견적 요약(홀+기간) — 룰셋 재사용. 기간이 있을 때만.
+  const quoteQ = useQuery({
+    queryKey: ['hall-assign-detail-quote', a.hallId, a.occupyStart, a.occupyEnd],
+    queryFn: () => hallAssignApi.quote({ hallIds: [a.hallId], startDate: a.occupyStart!, endDate: a.occupyEnd! }),
+    enabled: detailQuoteReady(a),
+    retry: false,
+    staleTime: 60_000,
+  });
+
+  return (
+    <div className="kx-hall__detail">
+      <dl className="kx-hall__detailgrid">
+        <div>
+          <dt>{t('hallassign.dHall')}</dt>
+          <dd>{a.hallLabel}</dd>
+        </div>
+        <div>
+          <dt>{t('hallassign.dPeriod')}</dt>
+          <dd>{a.occupyStart ?? '?'} ~ {a.occupyEnd ?? '?'}</dd>
+        </div>
+        <div>
+          <dt>{t('hallassign.dStatus')}</dt>
+          <dd>
+            <span className={`kx-hall__statusbadge${a.primary ? ' is-primary' : ''}`}>{a.status || '-'}</span>
+            {a.primary && <span className="kx-hall__primarytag">{t('hallassign.primaryTag')}</span>}
+          </dd>
+        </div>
+        {a.note && (
+          <div>
+            <dt>{t('hallassign.dNote')}</dt>
+            <dd>{a.note}</dd>
+          </div>
+        )}
+      </dl>
+
+      {/* 충돌 여부 */}
+      <section className="kx-hall__detailsec">
+        <h3>{t('hallassign.dConflict')}</h3>
+        {conflicts.length === 0 ? (
+          <p className="kx-hall__ok">{t('hallassign.dNoConflict')}</p>
+        ) : (
+          <ul className="kx-hall__conflicts kx-hall__detailconflicts">
+            {conflicts.map((c) => (
+              <li key={c.id}>
+                <IconWarning size={14} /> {c.eventName} · {c.hallLabel} ({c.occupyStart} ~ {c.occupyEnd})
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {/* 자동 견적 요약 */}
+      <section className="kx-hall__detailsec">
+        <h3>{t('hallassign.dQuote')}</h3>
+        {!detailQuoteReady(a) ? (
+          <p className="kx-card__hint">{t('hallassign.dQuoteNoPeriod')}</p>
+        ) : quoteQ.isLoading ? (
+          <Skeleton height={72} />
+        ) : quoteQ.error || !quoteQ.data ? (
+          <p className="kx-card__hint">{t('hallassign.dQuoteFail')}</p>
+        ) : (
+          <div className="kx-hall__detailquote">
+            <div className="kx-hall__detailquoterow">
+              <span>{t('hallassign.rentalTotal', { days: quoteQ.data.days })}</span>
+              <strong className="kx-hall__num">{fmtKrw(quoteQ.data.total)}</strong>
+            </div>
+            <div className="kx-hall__detailquoterow">
+              <span>{t('hallassign.deposit')}</span>
+              <span className="kx-hall__num">{fmtKrw(quoteQ.data.depositMin)} ~ {fmtKrw(quoteQ.data.depositMax)}</span>
+            </div>
+            {quoteQ.data.disclaimer && (
+              <p className="kx-card__hint">{quoteQ.data.disclaimer} {t('hallassign.ruleset', { v: quoteQ.data.rulesetVersion })}</p>
+            )}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+/** 상세 견적 조회 가능 여부(홀·기간 확보). */
+function detailQuoteReady(a: HallAssignment): boolean {
+  return Boolean(a.hallId && a.occupyStart && a.occupyEnd);
+}
+
+/** 자동 견적 패널 — 홀 다중 선택 + 기간 + 부스 규모 → 요율 룰셋 라인. */
+function QuotePanel({ halls }: { halls: Hall[] }) {
+  const { t } = useTranslation();
+  const [picked, setPicked] = useState<string[]>([]);
+  const [start, setStart] = useState('');
+  const [end, setEnd] = useState('');
+  const [boothCount, setBoothCount] = useState('');
+  const [result, setResult] = useState<QuoteResult | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  const quoteMut = useMutation({
+    mutationFn: () =>
+      hallAssignApi.quote({
+        hallIds: picked,
+        startDate: start,
+        endDate: end,
+        boothCount: boothCount ? Number(boothCount) : undefined,
+      }),
+    onSuccess: (r) => { setResult(r); setErr(null); },
+    onError: (e) => { setErr(e instanceof ApiRequestError ? e.message : t('hallassign.quoteFail')); setResult(null); },
+  });
+
+  function toggleHall(id: string) {
+    setPicked((p) => (p.includes(id) ? p.filter((x) => x !== id) : [...p, id]));
+  }
+
+  function run() {
+    if (picked.length === 0 || !start || !end) {
+      setErr(t('hallassign.quoteReq'));
+      return;
+    }
+    setErr(null);
+    quoteMut.mutate();
+  }
+
+  return (
+    <section className="kx-card">
+      <div className="kx-card__head">
+        <h2>{t('hallassign.autoQuote')}</h2>
+        <span className="kx-card__hint">{t('hallassign.quoteHint')}</span>
+      </div>
+      <div className="kx-hall__quoteform">
+        <div className="kx-hall__hallpick">
+          {halls.map((h) => (
+            <label key={h.id} className={`kx-hall__pill${picked.includes(h.id) ? ' is-on' : ''}`}>
+              <input type="checkbox" checked={picked.includes(h.id)} onChange={() => toggleHall(h.id)} />
+              {h.label}
+            </label>
+          ))}
+        </div>
+        <div className="kx-hall__quoteinputs">
+          <label>{t('hallassign.startDate')}<input className="kx-select" type="date" value={start} onChange={(e) => setStart(e.target.value)} /></label>
+          <label>{t('hallassign.endDate')}<input className="kx-select" type="date" value={end} onChange={(e) => setEnd(e.target.value)} /></label>
+          <label>{t('hallassign.boothSize')}<input className="kx-select" type="number" min={0} value={boothCount} onChange={(e) => setBoothCount(e.target.value)} placeholder={t('hallassign.countPh')} /></label>
+          <Button variant="ai" onClick={run} disabled={quoteMut.isPending}>{quoteMut.isPending ? t('hallassign.calculating') : t('hallassign.calcQuote')}</Button>
+        </div>
+      </div>
+
+      {err && <div className="kx-hall__err" role="alert"><IconWarning size={15} /> {err}</div>}
+
+      {result && (
+        <div className="kx-hall__quoteresult">
+          <table className="kx-table">
+            <thead>
+              <tr><th>{t('hallassign.qItem')}</th><th>{t('hallassign.qBasis')}</th><th className="kx-hall__num">{t('hallassign.qAmount')}</th></tr>
+            </thead>
+            <tbody>
+              {result.lines.map((l, i) => (
+                <tr key={`${l.code}-${i}`} className={l.amount < 0 ? 'kx-hall__discount' : ''}>
+                  <td>{l.label}</td>
+                  <td className="kx-hall__basis">{l.basis}</td>
+                  <td className="kx-hall__num">{fmtKrw(l.amount)}</td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot>
+              <tr><td colSpan={2}>{t('hallassign.rentalSubtotal')}</td><td className="kx-hall__num">{fmtKrw(result.rentalSubtotal)}</td></tr>
+              <tr className="kx-hall__total"><td colSpan={2}>{t('hallassign.rentalTotal', { days: result.days })}</td><td className="kx-hall__num">{fmtKrw(result.total)}</td></tr>
+              <tr><td colSpan={2}>{t('hallassign.deposit')}</td><td className="kx-hall__num">{fmtKrw(result.depositMin)} ~ {fmtKrw(result.depositMax)}</td></tr>
+            </tfoot>
+          </table>
+          {result.capacityNote && <p className="kx-hall__note"><IconWarning size={14} /> {result.capacityNote}</p>}
+          {result.disclaimer && <p className="kx-card__hint">{result.disclaimer} {t('hallassign.ruleset', { v: result.rulesetVersion })}</p>}
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/frontend/src/screens/hallassign/hallAssignApi.ts b/src/frontend/src/screens/hallassign/hallAssignApi.ts
new file mode 100644
index 0000000..0a8c21d
--- /dev/null
+++ b/src/frontend/src/screens/hallassign/hallAssignApi.ts
@@ -0,0 +1,115 @@
+/*
+ * M1 홀 배정·자동 견적(SCR /halls) 실배선 API 계약.
+ * 공용 클라이언트(../../api/client)만 사용 — client.ts·endpoints.ts·types.ts 무수정.
+ * 정본: 백엔드 HallAssignController 시그니처
+ *   - GET  /api/halls                                  → ApiResponse<Hall[]>
+ *   - GET  /api/halls/assignments?from=&to=&eventId=   → ApiResponse<HallAssignment[]> (홀매니저)
+ *   - GET  /api/halls/conflicts?hallId=&from=&to=&excludeEventId= → ApiResponse<Conflict[]> (홀매니저)
+ *   - POST /api/halls/assignments                      → ApiResponse<HallAssignment> (겹침 409 CONFLICT)
+ *   - DELETE /api/halls/assignments/{id}               → ApiResponse<void> (홀매니저)
+ *   - POST /api/halls/quote                            → ApiResponse<QuoteResult> (로그인)
+ */
+import { api } from '../../api/client';
+
+export interface Hall {
+  id: string;
+  exhibitionCenter: number;
+  label: string;
+  areaM2: number;
+  floorType: string | null;
+  boothCapacity: number | null;
+}
+
+export interface HallAssignment {
+  id: string;
+  eventId: string;
+  eventName: string;
+  hallId: string;
+  hallLabel: string;
+  primary: boolean;
+  occupyStart: string | null;
+  occupyEnd: string | null;
+  status: string;
+  note: string | null;
+}
+
+export interface Conflict {
+  assignmentId: string;
+  eventId: string;
+  eventName: string;
+  hallId: string;
+  hallLabel: string;
+  occupyStart: string;
+  occupyEnd: string;
+}
+
+export interface AssignmentBody {
+  eventId: string;
+  hallId: string;
+  primary: boolean;
+  occupyStart?: string;
+  occupyEnd?: string;
+  note?: string;
+}
+
+export interface QuoteLine {
+  code: string;
+  label: string;
+  basis: string;
+  amount: number;
+}
+
+export interface QuoteResult {
+  rulesetVersion: string;
+  currency: string;
+  days: number;
+  lines: QuoteLine[];
+  rentalSubtotal: number;
+  total: number;
+  depositMin: number;
+  depositMax: number;
+  capacityNote: string | null;
+  disclaimer: string | null;
+}
+
+export interface QuoteBody {
+  hallIds: string[];
+  startDate: string;
+  endDate: string;
+  boothCount?: number;
+}
+
+/** 배정 모달 행사 선택용(카탈로그 /api/events 재사용, id·name·기간만 취함). */
+export interface EventOption {
+  id: string;
+  name: string;
+  startDate: string | null;
+  endDate: string | null;
+}
+
+export const hallAssignApi = {
+  halls: () => api.get<Hall[]>('/api/halls'),
+
+  assignments: (from?: string, to?: string, eventId?: string) => {
+    const qs = new URLSearchParams();
+    if (from) qs.set('from', from);
+    if (to) qs.set('to', to);
+    if (eventId) qs.set('eventId', eventId);
+    const q = qs.toString();
+    return api.get<HallAssignment[]>(`/api/halls/assignments${q ? `?${q}` : ''}`);
+  },
+
+  conflicts: (hallId: string, from: string, to: string, excludeEventId?: string) => {
+    const qs = new URLSearchParams({ hallId, from, to });
+    if (excludeEventId) qs.set('excludeEventId', excludeEventId);
+    return api.get<Conflict[]>(`/api/halls/conflicts?${qs.toString()}`);
+  },
+
+  assign: (body: AssignmentBody) => api.post<HallAssignment>('/api/halls/assignments', body),
+
+  release: (id: string) => api.del<void>(`/api/halls/assignments/${encodeURIComponent(id)}`),
+
+  quote: (body: QuoteBody) => api.post<QuoteResult>('/api/halls/quote', body),
+
+  events: () => api.get<EventOption[]>('/api/events?size=500'),
+};
diff --git a/src/frontend/src/screens/hallassign/hallassign.css b/src/frontend/src/screens/hallassign/hallassign.css
new file mode 100644
index 0000000..449a05a
--- /dev/null
+++ b/src/frontend/src/screens/hallassign/hallassign.css
@@ -0,0 +1,375 @@
+/*
+ * SCR /halls — M1 홀 배정·자동 견적 전용 스타일.
+ * design.md §1 토큰만 참조. shared.css 프리미티브(kx-page·kx-card·kx-select·kx-table) 위에 얹는다.
+ * 클래스는 kx-hall__* 네임스페이스.
+ */
+@import '../shared.css';
+
+.kx-hall__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-hall__top h1 {
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+}
+.kx-hall__filter {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-hall__filter label,
+.kx-hall__form label,
+.kx-hall__quoteinputs label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+/* 배정 보드 */
+.kx-hall__board {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-hall__rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-hall__row {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: var(--space-3);
+  align-items: center;
+  padding: var(--space-2) 0;
+  border-bottom: var(--border-card);
+}
+.kx-hall__rowhead {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-hall__hallname {
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  font-size: var(--fs-body);
+}
+.kx-hall__area {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-hall__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.kx-hall__idle {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-400);
+}
+.kx-hall__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px 4px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+}
+.kx-hall__chip.is-primary {
+  border-color: var(--color-brand-500, #1f29fc);
+}
+.kx-hall__chip.is-conflict {
+  background: #fef3f2;
+  border-color: var(--color-error);
+  color: var(--color-error);
+}
+.kx-hall__chipbody {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.kx-hall__chipbody:hover .kx-hall__chiptext {
+  text-decoration: underline;
+}
+.kx-hall__chipbody:focus-visible {
+  outline: 2px solid var(--color-brand-500, #1f29fc);
+  outline-offset: 2px;
+}
+.kx-hall__chiptext {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.25;
+}
+.kx-hall__chiptext em {
+  font-style: normal;
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-hall__chip.is-conflict .kx-hall__chiptext em {
+  color: var(--color-error);
+}
+.kx-hall__chipx {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--color-neutral-400);
+  padding: 0 2px;
+}
+.kx-hall__chipx:hover {
+  color: var(--color-error);
+}
+
+/* 자동 견적 */
+.kx-hall__quoteform {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-hall__hallpick {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.kx-hall__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: var(--radius-pill);
+  border: var(--border-card);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-600);
+  cursor: pointer;
+}
+.kx-hall__pill.is-on {
+  border-color: var(--color-ai-accent);
+  background: #eef8ff;
+  color: var(--color-neutral-900);
+}
+.kx-hall__pill input {
+  margin: 0;
+}
+.kx-hall__quoteinputs {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-hall__quoteresult {
+  margin-top: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-hall__num {
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.kx-hall__basis {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-hall__discount td {
+  color: var(--color-success);
+}
+.kx-hall__total td {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  border-top: 2px solid var(--color-neutral-200);
+}
+.kx-hall__note {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  color: var(--color-warning);
+}
+
+/* 모달 */
+.kx-hall__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 40;
+  padding: var(--space-4);
+}
+.kx-hall__modal {
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  width: 100%;
+  max-width: 440px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18));
+}
+.kx-hall__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-hall__form2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+.kx-hall__check {
+  flex-direction: row !important;
+  align-items: center;
+  gap: 8px !important;
+  color: var(--color-neutral-700) !important;
+  font-size: var(--fs-body) !important;
+}
+.kx-hall__modalfoot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-4);
+}
+.kx-hall__err {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: #fef3f2;
+  color: var(--color-error);
+  font-size: var(--fs-caption);
+}
+.kx-hall__conflicts {
+  margin: 4px 0 0;
+  padding-left: 18px;
+}
+
+/* 배정 상세 offcanvas 본문 */
+.kx-hall__detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-hall__detailgrid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin: 0;
+}
+.kx-hall__detailgrid > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-hall__detailgrid dt {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-hall__detailgrid dd {
+  margin: 0;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.kx-hall__statusbadge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+}
+.kx-hall__statusbadge.is-primary {
+  border-color: var(--color-brand-500, #1f29fc);
+  color: var(--color-brand-500, #1f29fc);
+}
+.kx-hall__primarytag {
+  font-size: var(--fs-caption);
+  color: var(--color-brand-500, #1f29fc);
+}
+.kx-hall__detailsec {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-top: var(--space-3);
+  border-top: var(--border-card);
+}
+.kx-hall__detailsec h3 {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+.kx-hall__ok {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  color: var(--color-success);
+}
+.kx-hall__detailconflicts {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.kx-hall__detailconflicts li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  color: var(--color-error);
+}
+.kx-hall__detailquote {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.kx-hall__detailquoterow {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-3);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-hall__detailquoterow strong {
+  color: var(--color-neutral-900);
+}
+
+/* 토스트 */
+.kx-hall__toast {
+  position: fixed;
+  bottom: var(--space-5);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-neutral-900);
+  color: var(--color-white);
+  padding: 10px 18px;
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  z-index: 50;
+  cursor: pointer;
+}
diff --git a/src/frontend/src/screens/home/HomeCharts.tsx b/src/frontend/src/screens/home/HomeCharts.tsx
new file mode 100644
index 0000000..845158b
--- /dev/null
+++ b/src/frontend/src/screens/home/HomeCharts.tsx
@@ -0,0 +1,197 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { exhibitionApi } from '../../api/endpoints';
+import type { ExhibitionDto } from '../../api/types';
+import { ErrorState, Skeleton } from '../../components/ui/States';
+import { homeApi } from './homeApi';
+
+/**
+ * SCR-HOME 요약 차트(소유자 지시 ④) — WISE 대시보드 스타일 Recharts 위젯.
+ * 신규 백엔드 계약 없이 기존 exhibitionApi.list() + home/hall-centers 데이터에서 파생(경계면 무결).
+ * 3종: ① 전시 상태 도넛 ② 월별 전시 추이 미니 라인 ③ 전시장별 행사 수 바.
+ */
+
+const TODAY = new Date();
+function ymd(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+const TODAY_YMD = ymd(TODAY);
+
+type Status = 'ongoing' | 'upcoming' | 'ended';
+function statusOf(start: string, end: string): Status {
+  if (end < TODAY_YMD) return 'ended';
+  if (start > TODAY_YMD) return 'upcoming';
+  return 'ongoing';
+}
+function matchesCenter(hallLabel: string | null | undefined, code: string): boolean {
+  if (!hallLabel) return false;
+  return new RegExp(`제\\s*${code}\\s*전시장`).test(hallLabel);
+}
+
+const C = {
+  ongoing: 'var(--color-success)',
+  upcoming: 'var(--color-primary-600)',
+  ended: 'var(--color-neutral-500)',
+  grid: 'var(--color-neutral-200)',
+  axis: 'var(--color-neutral-500)',
+  bar: 'var(--color-primary-600)',
+  line: 'var(--color-ai-accent)',
+};
+
+export function HomeCharts() {
+  const { t } = useTranslation();
+  const eventsQuery = useQuery({
+    queryKey: ['home-charts-events'],
+    queryFn: () => exhibitionApi.list(),
+  });
+  const centersQuery = useQuery({
+    queryKey: ['home-hall-centers'],
+    queryFn: () => homeApi.hallCenters(),
+  });
+
+  const rows: ExhibitionDto[] = eventsQuery.data ?? [];
+
+  // ① 상태 분포
+  const statusData = useMemo(() => {
+    const c = { ongoing: 0, upcoming: 0, ended: 0 };
+    rows.forEach((e) => {
+      c[statusOf(e.startDate, e.endDate)] += 1;
+    });
+    return [
+      { key: 'ongoing', name: t('home.calendar.legendOngoing'), value: c.ongoing, color: C.ongoing },
+      { key: 'upcoming', name: t('home.calendar.legendUpcoming'), value: c.upcoming, color: C.upcoming },
+      { key: 'ended', name: t('home.calendar.legendEnded'), value: c.ended, color: C.ended },
+    ].filter((d) => d.value > 0);
+  }, [rows, t]);
+
+  // ② 월별 추이 — 현재 달 기준 -1 ~ +4 (6개월)
+  const trendData = useMemo(() => {
+    const base = new Date(TODAY.getFullYear(), TODAY.getMonth() - 1, 1);
+    const buckets: { ym: string; label: string; count: number }[] = [];
+    for (let i = 0; i < 6; i++) {
+      const d = new Date(base.getFullYear(), base.getMonth() + i, 1);
+      const ym = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+      buckets.push({ ym, label: `${d.getMonth() + 1}${t('home.charts.monthSuffix')}`, count: 0 });
+    }
+    rows.forEach((e) => {
+      const ym = (e.startDate ?? '').slice(0, 7);
+      const b = buckets.find((x) => x.ym === ym);
+      if (b) b.count += 1;
+    });
+    return buckets;
+  }, [rows, t]);
+
+  // ③ 전시장별 행사 수
+  const centerData = useMemo(() => {
+    const centers = centersQuery.data ?? [];
+    return centers.map((c) => ({
+      name: c.label,
+      count: rows.filter((e) => matchesCenter(e.hallLabel, c.code)).length,
+    }));
+  }, [rows, centersQuery.data]);
+
+  const loading = eventsQuery.isLoading;
+  const error = eventsQuery.isError;
+
+  return (
+    <section className="kx-card kx-home__charts" aria-label={t('home.charts.title')}>
+      <div className="kx-home__widget-head">
+        <h2>{t('home.charts.title')}</h2>
+      </div>
+
+      {loading ? (
+        <div className="kx-home__charts-grid">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} height={150} radius={8} />
+          ))}
+        </div>
+      ) : error ? (
+        <ErrorState message={t('home.loadError')} onRetry={() => eventsQuery.refetch()} />
+      ) : (
+        <div className="kx-home__charts-grid">
+          {/* ① 상태 도넛 */}
+          <figure className="kx-home__chart">
+            <figcaption className="kx-home__chart-cap">{t('home.charts.statusTitle')}</figcaption>
+            {statusData.length === 0 ? (
+              <p className="kx-home__chart-empty">{t('home.charts.empty')}</p>
+            ) : (
+              <ResponsiveContainer width="100%" height={150}>
+                <PieChart>
+                  <Pie
+                    data={statusData}
+                    dataKey="value"
+                    nameKey="name"
+                    innerRadius={38}
+                    outerRadius={58}
+                    paddingAngle={2}
+                    strokeWidth={0}
+                  >
+                    {statusData.map((d) => (
+                      <Cell key={d.key} fill={d.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip />
+                </PieChart>
+              </ResponsiveContainer>
+            )}
+            <div className="kx-home__chart-legend">
+              {statusData.map((d) => (
+                <span key={d.key} className="kx-home__chart-legend-item">
+                  <i style={{ background: d.color }} />
+                  {d.name} <b className="tnum">{d.value}</b>
+                </span>
+              ))}
+            </div>
+          </figure>
+
+          {/* ② 월별 추이 미니 라인 */}
+          <figure className="kx-home__chart">
+            <figcaption className="kx-home__chart-cap">{t('home.charts.trendTitle')}</figcaption>
+            <ResponsiveContainer width="100%" height={150}>
+              <LineChart data={trendData} margin={{ top: 8, right: 8, bottom: 0, left: -20 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke={C.grid} vertical={false} />
+                <XAxis dataKey="label" tick={{ fontSize: 11, fill: C.axis }} axisLine={false} tickLine={false} />
+                <YAxis allowDecimals={false} tick={{ fontSize: 11, fill: C.axis }} axisLine={false} tickLine={false} width={28} />
+                <Tooltip />
+                <Line type="monotone" dataKey="count" stroke={C.line} strokeWidth={2} dot={{ r: 3 }} activeDot={{ r: 5 }} />
+              </LineChart>
+            </ResponsiveContainer>
+          </figure>
+
+          {/* ③ 전시장별 바 */}
+          <figure className="kx-home__chart">
+            <figcaption className="kx-home__chart-cap">{t('home.charts.centerTitle')}</figcaption>
+            {centerData.length === 0 ? (
+              <p className="kx-home__chart-empty">{t('home.charts.empty')}</p>
+            ) : (
+              <ResponsiveContainer width="100%" height={150}>
+                <BarChart data={centerData} margin={{ top: 8, right: 8, bottom: 0, left: -20 }}>
+                  <CartesianGrid strokeDasharray="3 3" stroke={C.grid} vertical={false} />
+                  <XAxis dataKey="name" tick={{ fontSize: 11, fill: C.axis }} axisLine={false} tickLine={false} />
+                  <YAxis allowDecimals={false} tick={{ fontSize: 11, fill: C.axis }} axisLine={false} tickLine={false} width={28} />
+                  <Tooltip />
+                  <Bar dataKey="count" fill={C.bar} radius={[3, 3, 0, 0]} maxBarSize={40} />
+                </BarChart>
+              </ResponsiveContainer>
+            )}
+          </figure>
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/frontend/src/screens/home/HomePage.tsx b/src/frontend/src/screens/home/HomePage.tsx
new file mode 100644
index 0000000..2944a89
--- /dev/null
+++ b/src/frontend/src/screens/home/HomePage.tsx
@@ -0,0 +1,1177 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAuthStore } from '../../store/authStore';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { exhibitionApi, loginSlideApi, noticeApi, notificationApi } from '../../api/endpoints';
+import type { ExhibitionDto } from '../../api/types';
+import { AiLabel, DdayChip } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import {
+  IconAiBot,
+  IconBell,
+  IconCheckCircle,
+  IconChevronLeft,
+  IconChevronRight,
+  IconDocument,
+  IconExhibitors,
+  IconFloorplan,
+  IconSearch,
+  IconSettlement,
+  IconSpark,
+} from '../../components/ui/icons';
+import {
+  homeApi,
+  type HomeTodoItem,
+  type KpiTile,
+  type ShowcaseItem,
+  type ShowcaseTab,
+} from './homeApi';
+import {
+  buildMonthGrid,
+  eventsOnDay,
+  type CalEvent,
+  type CalStatus,
+} from './homeCalendar';
+import { HomeCharts } from './HomeCharts';
+import './home.css';
+
+/** 오늘(로컬) — 캘린더 강조·상태 파생 기준. 서버 D-day 는 각 API 가 별도 계산. */
+const TODAY = new Date();
+const TODAY_YMD = ymd(TODAY);
+
+function ymd(d: Date): string {
+  const mm = String(d.getMonth() + 1).padStart(2, '0');
+  const dd = String(d.getDate()).padStart(2, '0');
+  return `${d.getFullYear()}-${mm}-${dd}`;
+}
+
+/** 날짜 기준 전시 상태(진행/예정/종료). DB status 원문 대신 오늘 기준 재계산(일정 페이지와 동일 규약). */
+function statusFromDates(start: string, end: string): CalStatus {
+  if (end < TODAY_YMD) return 'ended';
+  if (start > TODAY_YMD) return 'upcoming';
+  return 'ongoing';
+}
+
+/** 홀 라벨이 선택 전시장(센터) 소속인지 — "제{code}전시장" 부분일치. code='all' 이면 전체 통과. */
+function matchesCenter(hallLabel: string | null | undefined, code: string): boolean {
+  if (code === 'all') return true;
+  if (!hallLabel) return false;
+  return new RegExp(`제\\s*${code}\\s*전시장`).test(hallLabel);
+}
+
+export function HomePage() {
+  const { t } = useTranslation();
+  const user = useAuthStore((s) => s.user);
+  const name = user?.displayName ?? '';
+  const dateLabel = useMemo(
+    () =>
+      TODAY.toLocaleDateString('ko-KR', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+      }),
+    [],
+  );
+
+  return (
+    <div className="kx-home" aria-label={t('home.pageAria')}>
+      {/* ① 인사 + 역할별 KPI (단일 행) */}
+      <section className="kx-home__hero">
+        <KpiStrip name={name} dateLabel={dateLabel} />
+      </section>
+
+      {/* ①-b 요약 차트 (KPI 아래, Recharts) */}
+      <HomeCharts />
+
+      {/* ①-c KINTEX AI 어시스턴트 허브 (KPI 아래·배너 위 — AI 기능 홍보 스트립) */}
+      <AiHubStrip />
+
+      {/* ② 배너 캐러셀 */}
+      <BannerCarousel />
+
+      {/* ③ 쇼케이스 포스터 레일 */}
+      <ShowcaseRail />
+
+      {/* ④ 본문 2열 그리드 */}
+      <div className="kx-home__body">
+        <div className="kx-home__col-main">
+          <HomeCalendar />
+        </div>
+        <div className="kx-home__col-side">
+          <TodoWidget />
+          <NoticeWidget />
+          <QuickActions />
+          <ActivityWidget />
+        </div>
+      </div>
+
+      {/* ⑤ 내 행사 워크스페이스 */}
+      <WorkspaceGrid />
+    </div>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ① 인사 + KPI 스트립
+ * ──────────────────────────────────────────────────────────── */
+function roleLabel(role: string, t: (k: string) => string): string {
+  switch (role) {
+    case 'ORGANIZER':
+      return t('home.role.organizer');
+    case 'EXHIBITOR':
+      return t('home.role.exhibitor');
+    case 'CONTRACTOR':
+      return t('home.role.contractor');
+    case 'HALL_MANAGER':
+      return t('home.role.hallManager');
+    case 'ADMIN':
+    case 'MANAGER':
+      return t('home.role.admin');
+    default:
+      return role;
+  }
+}
+
+function kpiValueText(tile: KpiTile): string {
+  if (tile.value == null) return '—';
+  const v = typeof tile.value === 'number' ? tile.value.toLocaleString('ko-KR') : tile.value;
+  return tile.unit ? `${v}${tile.unit}` : v;
+}
+
+function KpiStrip({ name, dateLabel }: { name: string; dateLabel: string }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const query = useQuery({ queryKey: ['home-summary'], queryFn: () => homeApi.summary() });
+
+  const role = query.data?.role ?? '';
+  const tiles = query.data?.tiles ?? [];
+
+  return (
+    <div className="kx-home__hero-row">
+      <div className="kx-home__greeting">
+        <h1 className="kx-home__hello">
+          {name ? t('home.greeting', { name }) : t('home.greetingGuest')}
+        </h1>
+        <p className="kx-home__submeta">
+          <span className="tnum">{dateLabel}</span>
+          {role && <span className="kx-badge kx-badge--role">{roleLabel(role, t)}</span>}
+        </p>
+      </div>
+
+      <div className="kx-home__kpis" aria-label={t('home.kpi.aria')}>
+        {query.isLoading ? (
+          Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="kx-kpitile" aria-hidden="true">
+              <Skeleton height={12} width="60%" />
+              <Skeleton height={24} width="40%" />
+            </div>
+          ))
+        ) : query.isError ? (
+          <div className="kx-kpitile kx-kpitile--error">
+            <ErrorState message={t('home.loadError')} onRetry={() => query.refetch()} />
+          </div>
+        ) : (
+          tiles.map((tile) => (
+            <button
+              key={tile.key}
+              type="button"
+              className={`kx-kpitile is-${tile.severity}`}
+              onClick={() => tile.route && navigate(tile.route)}
+            >
+              <span className="kx-kpitile__label">{tile.label}</span>
+              <span className="kx-kpitile__value tnum">{kpiValueText(tile)}</span>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ①-c KINTEX AI 어시스턴트 허브 (AI 기능 홍보 스트립)
+ *   - 5개 AI 도구 카드(실 라우트) + 자연어 질문 퀵 입력(?q= 전달)
+ *   - 행사 스코프가 필요한 카드(배치·갤러리)는 첫 워크스페이스 eventId 계산,
+ *     없으면 /schedule 로 안내(QuickActions editor 패턴 정합).
+ * ──────────────────────────────────────────────────────────── */
+const AI_DEFAULT_HALL = 'H7'; // LayoutComparisonPage 기본 홀과 정합
+const AI_DEFAULT_BOOTH = 'A-102'; // ExhibitorHome/Gallery 기본 부스와 정합(갤러리는 샘플 폴백)
+
+interface AiTool {
+  key: 'layout' | 'gallery' | 'nlquery' | 'rules' | 'leads';
+  Icon: typeof IconSpark;
+  go: () => void;
+}
+
+function AiHubStrip() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const eventId = useResolvedEventId();
+  const [question, setQuestion] = useState('');
+
+  const tools: AiTool[] = [
+    {
+      key: 'layout',
+      Icon: IconSpark,
+      go: () =>
+        navigate(eventId ? `/events/${eventId}/halls/${AI_DEFAULT_HALL}/comparison` : '/schedule'),
+    },
+    {
+      key: 'gallery',
+      Icon: IconSpark,
+      go: () =>
+        navigate(eventId ? `/events/${eventId}/booths/${AI_DEFAULT_BOOTH}/gallery` : '/schedule'),
+    },
+    { key: 'nlquery', Icon: IconAiBot, go: () => navigate('/analytics?tab=nlquery') },
+    { key: 'rules', Icon: IconAiBot, go: () => navigate('/analytics?tab=rules') },
+    { key: 'leads', Icon: IconSpark, go: () => navigate('/leads') },
+  ];
+
+  function askSubmit(e: FormEvent) {
+    e.preventDefault();
+    const q = question.trim();
+    navigate(q ? `/analytics?q=${encodeURIComponent(q)}` : '/analytics');
+  }
+
+  return (
+    <section className="kx-home__aihub" aria-label={t('home.ai.aria')}>
+      <div className="kx-home__aihub-head">
+        <span className="kx-home__aihub-badgeicon" aria-hidden="true">
+          <IconAiBot size={22} />
+        </span>
+        <div className="kx-home__aihub-heading">
+          <h2 className="kx-home__aihub-title">
+            {t('home.ai.title')}
+            <AiLabel>{t('home.ai.badge')}</AiLabel>
+          </h2>
+          <p className="kx-home__aihub-sub">{t('home.ai.subtitle')}</p>
+        </div>
+        <form className="kx-home__aihub-ask" onSubmit={askSubmit} role="search">
+          <input
+            className="kx-home__aihub-input"
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            placeholder={t('home.ai.askPh')}
+            aria-label={t('home.ai.askAria')}
+          />
+          <Button variant="ai" type="submit">
+            {t('home.ai.askBtn')}
+          </Button>
+        </form>
+      </div>
+
+      <div className="kx-home__aihub-grid">
+        {tools.map((tool) => (
+          <button
+            key={tool.key}
+            type="button"
+            className="kx-home__aihub-card"
+            onClick={tool.go}
+          >
+            <span className="kx-home__aihub-card-icon" aria-hidden="true">
+              <tool.Icon size={18} />
+            </span>
+            <span className="kx-home__aihub-card-main">
+              <span className="kx-home__aihub-card-title">
+                {t(`home.ai.tool.${tool.key}.title`)}
+                <span className="kx-home__aihub-card-tag" aria-hidden="true">
+                  AI
+                </span>
+              </span>
+              <span className="kx-home__aihub-card-desc">
+                {t(`home.ai.tool.${tool.key}.desc`)}
+              </span>
+            </span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ② 배너 캐러셀 (login-slides 재사용, 220~260px)
+ * ──────────────────────────────────────────────────────────── */
+interface BannerSlide {
+  id: number;
+  imageUrl: string;
+  title: string;
+  caption: string | null;
+}
+const BANNER_INTERVAL = 5000;
+
+function BannerCarousel() {
+  const { t } = useTranslation();
+  const [slides, setSlides] = useState<BannerSlide[] | null>(null);
+  const [index, setIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const ctrl = new AbortController();
+    loginSlideApi
+      .publicList()
+      .then((list) => {
+        if (ctrl.signal.aborted) return;
+        setSlides(
+          (list ?? []).map((s) => ({
+            id: s.id,
+            imageUrl: s.imageUrl,
+            title: s.title,
+            caption: s.caption,
+          })),
+        );
+      })
+      .catch(() => setSlides([]));
+    return () => ctrl.abort();
+  }, []);
+
+  const reduceMotion =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+  const count = slides?.length ?? 0;
+  useEffect(() => {
+    if (count < 2 || paused || reduceMotion) return;
+    timerRef.current = window.setInterval(
+      () => setIndex((i) => (i + 1) % count),
+      BANNER_INTERVAL,
+    );
+    return () => {
+      if (timerRef.current != null) window.clearInterval(timerRef.current);
+    };
+  }, [count, paused, reduceMotion]);
+
+  if (slides == null) {
+    return (
+      <section className="kx-home__banner" aria-busy="true">
+        <Skeleton height={240} radius={8} />
+      </section>
+    );
+  }
+
+  if (slides.length === 0) {
+    // 배너 미등록 — 밀도 원칙 ④: 브랜드 그라디언트 폴백 + CTA
+    return (
+      <section className="kx-home__banner">
+        <div className="kx-home__banner-fallback">
+          <div className="kx-home__banner-text">
+            <h2>{t('home.banner.emptyTitle')}</h2>
+            <p>{t('home.banner.emptyDesc')}</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  const cur = slides[index] ?? slides[0];
+  const go = (n: number) => setIndex((n + slides.length) % slides.length);
+
+  return (
+    <section
+      className="kx-home__banner"
+      aria-roledescription="carousel"
+      aria-label={t('home.banner.aria')}
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+      onFocus={() => setPaused(true)}
+      onBlur={() => setPaused(false)}
+    >
+      {slides.map((s, i) => (
+        <div
+          key={s.id}
+          className={`kx-home__banner-slide ${i === index ? 'is-active' : ''}`}
+          style={{ backgroundImage: `url(${s.imageUrl})` }}
+          aria-hidden={i !== index}
+        />
+      ))}
+      <div className="kx-home__banner-scrim" />
+      <div className="kx-home__banner-body">
+        <h2 className="kx-home__banner-title" key={`t-${cur.id}`}>
+          {cur.title}
+        </h2>
+        {cur.caption && (
+          <p className="kx-home__banner-sub" key={`c-${cur.id}`}>
+            {cur.caption}
+          </p>
+        )}
+      </div>
+
+      {slides.length > 1 && (
+        <>
+          <button
+            type="button"
+            className="kx-home__banner-nav is-prev"
+            aria-label={t('home.banner.prev')}
+            onClick={() => go(index - 1)}
+          >
+            <IconChevronLeft size={20} />
+          </button>
+          <button
+            type="button"
+            className="kx-home__banner-nav is-next"
+            aria-label={t('home.banner.next')}
+            onClick={() => go(index + 1)}
+          >
+            <IconChevronRight size={20} />
+          </button>
+          <div className="kx-home__banner-dots" role="tablist" aria-label={t('home.banner.aria')}>
+            {slides.map((s, i) => (
+              <button
+                key={s.id}
+                type="button"
+                role="tab"
+                aria-selected={i === index}
+                aria-label={`${i + 1}`}
+                className={`kx-home__banner-dot ${i === index ? 'is-active' : ''}`}
+                onClick={() => go(i)}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ③ 쇼케이스 포스터 레일
+ * ──────────────────────────────────────────────────────────── */
+// 탭 순서: 이번 달 → 다음 달 → 진행 중(맨 끝, 소유자 지시 2026-07-12). 기본=이번 달.
+const SHOWCASE_TABS: ShowcaseTab[] = ['thisMonth', 'nextMonth', 'ongoing'];
+
+function ShowcaseRail() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [tab, setTab] = useState<ShowcaseTab>('thisMonth');
+  const railRef = useRef<HTMLDivElement | null>(null);
+  const [atStart, setAtStart] = useState(true);
+  const [atEnd, setAtEnd] = useState(false);
+
+  const query = useQuery({
+    queryKey: ['home-showcase', tab],
+    queryFn: () => homeApi.showcase(tab),
+  });
+  const items = query.data ?? [];
+
+  const updateArrows = useCallback(() => {
+    const el = railRef.current;
+    if (!el) return;
+    setAtStart(el.scrollLeft <= 4);
+    setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 4);
+  }, []);
+
+  useEffect(() => {
+    updateArrows();
+  }, [items, updateArrows]);
+
+  const scroll = (dir: number) => {
+    const el = railRef.current;
+    if (!el) return;
+    el.scrollBy({ left: dir * Math.max(320, el.clientWidth * 0.8), behavior: 'smooth' });
+  };
+
+  return (
+    <section className="kx-home__showcase" aria-label={t('home.showcase.title')}>
+      <div className="kx-home__section-head">
+        <h2 className="kx-home__section-title">{t('home.showcase.title')}</h2>
+        <div className="kx-seg" role="tablist" aria-label={t('home.showcase.title')}>
+          {SHOWCASE_TABS.map((k) => (
+            <button
+              key={k}
+              type="button"
+              role="tab"
+              aria-selected={tab === k}
+              className={`kx-seg__btn ${tab === k ? 'is-active' : ''}`}
+              onClick={() => setTab(k)}
+            >
+              {t(`home.showcase.tab.${k}`)}
+            </button>
+          ))}
+        </div>
+        <button
+          type="button"
+          className="kx-home__section-link"
+          onClick={() => navigate('/schedule')}
+        >
+          {t('home.showcase.all')}
+        </button>
+      </div>
+
+      {query.isLoading ? (
+        <div className="kx-home__rail" aria-busy="true">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="kx-poster" aria-hidden="true">
+              <Skeleton height={200} radius={8} />
+              <Skeleton height={14} width="80%" />
+              <Skeleton height={12} width="55%" />
+            </div>
+          ))}
+        </div>
+      ) : query.isError ? (
+        <div className="kx-card">
+          <ErrorState message={t('home.loadError')} onRetry={() => query.refetch()} />
+        </div>
+      ) : items.length === 0 ? (
+        <div className="kx-card">
+          <EmptyState
+            title={t('home.showcase.emptyTitle')}
+            action={<Button variant="secondary" onClick={() => navigate('/schedule')}>{t('home.showcase.emptyCta')}</Button>}
+          />
+        </div>
+      ) : (
+        <div className="kx-home__rail-wrap">
+          {!atStart && (
+            <button
+              type="button"
+              className="kx-home__rail-arrow is-prev"
+              aria-label={t('home.showcase.prev')}
+              onClick={() => scroll(-1)}
+            >
+              <IconChevronLeft size={20} />
+            </button>
+          )}
+          <div className="kx-home__rail" role="list" ref={railRef} onScroll={updateArrows}>
+            {items.map((ev) => (
+              <PosterCard key={ev.id} ev={ev} />
+            ))}
+          </div>
+          {!atEnd && (
+            <button
+              type="button"
+              className="kx-home__rail-arrow is-next"
+              aria-label={t('home.showcase.next')}
+              onClick={() => scroll(1)}
+            >
+              <IconChevronRight size={20} />
+            </button>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+/** "2026-08-13"·"2026-08-16" → "08.13–08.16" (동월) / "2026.08.13–2026.09.02" */
+function periodShort(start: string, end: string): string {
+  const s = start.replace(/-/g, '.').slice(5);
+  const sameYear = start.slice(0, 4) === end.slice(0, 4);
+  const sameMonth = sameYear && start.slice(5, 7) === end.slice(5, 7);
+  const e = sameMonth ? end.slice(8, 10) : end.replace(/-/g, '.').slice(5);
+  return `${s}–${e}`;
+}
+
+function PosterCard({ ev }: { ev: ShowcaseItem }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const statusLabel =
+    ev.status === 'ongoing' ? t('home.showcase.statusOngoing') : t('home.showcase.statusUpcoming');
+  return (
+    <button
+      type="button"
+      role="listitem"
+      className="kx-poster"
+      onClick={() => navigate(`/public/events/${encodeURIComponent(ev.id)}`)}
+    >
+      {ev.posterUrl ? (
+        <span
+          className="kx-poster__img"
+          style={{ backgroundImage: `url(${ev.posterUrl})` }}
+          aria-hidden="true"
+        />
+      ) : (
+        <span className="kx-poster__img kx-poster__img--fallback" aria-hidden="true">
+          <span className="kx-poster__fallback-text">{ev.name}</span>
+        </span>
+      )}
+      {/* Stitch 정합: 홀 라벨(상단·상태색) → 행사명 → 기간 → 하단 배지행, 좌측 상태 액센트 */}
+      <span className={`kx-poster__body is-${ev.status}`}>
+        {ev.hallLabel && <span className="kx-poster__hall">{ev.hallLabel}</span>}
+        <span className="kx-poster__name">{ev.name}</span>
+        <span className="kx-poster__meta tnum">{periodShort(ev.startDate, ev.endDate)}</span>
+        <span className="kx-poster__badges">
+          <span className={`kx-home__chip is-${ev.status}`}>{statusLabel}</span>
+          {ev.status !== 'ongoing' && <DdayChip dday={ev.dday} />}
+        </span>
+      </span>
+    </button>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ④-좌 월 캘린더 (전시장 세그먼트 필터 + spanning bar) + 진행 리스트
+ * ──────────────────────────────────────────────────────────── */
+function catStatusClass(s: CalStatus): string {
+  return s;
+}
+
+function HomeCalendar() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [cursor, setCursor] = useState(new Date(TODAY.getFullYear(), TODAY.getMonth(), 1));
+  const [center, setCenter] = useState('all');
+  const [popupDay, setPopupDay] = useState<string | null>(null);
+
+  const eventsQuery = useQuery({
+    queryKey: ['home-cal-events'],
+    queryFn: async (): Promise<CalEvent[]> => {
+      const rows = await exhibitionApi.list();
+      return rows.map((e: ExhibitionDto) => ({
+        id: e.id,
+        name: e.name,
+        start: e.startDate,
+        end: e.endDate,
+        hallLabel: e.hallLabel ?? null,
+        status: statusFromDates(e.startDate, e.endDate),
+      }));
+    },
+  });
+  const centersQuery = useQuery({
+    queryKey: ['home-hall-centers'],
+    queryFn: () => homeApi.hallCenters(),
+  });
+
+  const allEvents = eventsQuery.data ?? [];
+  const filtered = useMemo(
+    () => allEvents.filter((e) => matchesCenter(e.hallLabel, center)),
+    [allEvents, center],
+  );
+
+  const year = cursor.getFullYear();
+  const month = cursor.getMonth();
+  const weeks = useMemo(
+    () => buildMonthGrid(year, month, filtered, TODAY),
+    [year, month, filtered],
+  );
+
+  const monthTitle = t('home.calendar.yearMonth', { y: year, m: month + 1 });
+  const popupEvents = popupDay ? eventsOnDay(filtered, popupDay) : [];
+
+  // 진행 중/예정 리스트 — 오늘 이후 종료, 시작일 오름차순, 최대 8건
+  const listed = useMemo(
+    () =>
+      [...filtered]
+        .filter((e) => e.status !== 'ended')
+        .sort((a, b) => (a.start < b.start ? -1 : 1))
+        .slice(0, 8),
+    [filtered],
+  );
+
+  const centerOptions = [
+    { code: 'all', label: t('home.calendar.all') },
+    ...(centersQuery.data ?? []),
+  ];
+
+  return (
+    <section className="kx-card kx-home__cal" aria-label={t('home.calendar.title')}>
+      <div className="kx-home__cal-head">
+        <div className="kx-home__cal-toolbar">
+          <button
+            type="button"
+            className="kx-home__cal-nav"
+            aria-label={t('home.calendar.prev')}
+            onClick={() => setCursor(new Date(year, month - 1, 1))}
+          >
+            <IconChevronLeft size={16} />
+          </button>
+          <strong className="kx-home__cal-title tnum">{monthTitle}</strong>
+          <button
+            type="button"
+            className="kx-home__cal-nav"
+            aria-label={t('home.calendar.next')}
+            onClick={() => setCursor(new Date(year, month + 1, 1))}
+          >
+            <IconChevronRight size={16} />
+          </button>
+          <button
+            type="button"
+            className="kx-home__cal-today"
+            onClick={() => setCursor(new Date(TODAY.getFullYear(), TODAY.getMonth(), 1))}
+          >
+            {t('home.calendar.today')}
+          </button>
+        </div>
+
+        {/* 전시장 세그먼트(동적 옵션) */}
+        <div className="kx-seg kx-home__cal-seg" role="tablist" aria-label={t('home.calendar.centerFilter')}>
+          {centerOptions.map((c) => (
+            <button
+              key={c.code}
+              type="button"
+              role="tab"
+              aria-selected={center === c.code}
+              className={`kx-seg__btn ${center === c.code ? 'is-active' : ''}`}
+              onClick={() => setCenter(c.code)}
+            >
+              {c.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 범례 */}
+      <div className="kx-home__cal-legend" aria-hidden="true">
+        <span className="kx-home__legend-item"><i className="kx-home__legend-dot is-ongoing" />{t('home.calendar.legendOngoing')}</span>
+        <span className="kx-home__legend-item"><i className="kx-home__legend-dot is-upcoming" />{t('home.calendar.legendUpcoming')}</span>
+        <span className="kx-home__legend-item"><i className="kx-home__legend-dot is-ended" />{t('home.calendar.legendEnded')}</span>
+      </div>
+
+      {eventsQuery.isLoading ? (
+        <Skeleton height={360} radius={8} />
+      ) : eventsQuery.isError ? (
+        <ErrorState message={t('home.calendar.loadError')} onRetry={() => eventsQuery.refetch()} />
+      ) : (
+        <>
+          <div className="kx-home__cal-grid">
+            <div className="kx-home__cal-dow">
+              {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+                <span
+                  key={i}
+                  className={`kx-home__cal-wd${i === 0 ? ' is-sun' : i === 6 ? ' is-sat' : ''}`}
+                >
+                  {t(`common.weekday.${i}`)}
+                </span>
+              ))}
+            </div>
+            {weeks.map((wk, wi) => (
+              <div className="kx-home__cal-week" key={wi}>
+                {/* 배경 일자 셀 */}
+                <div className="kx-home__cal-cells">
+                  {wk.cells.map((cell) => (
+                    <button
+                      type="button"
+                      key={cell.key}
+                      className={[
+                        'kx-home__cal-cell',
+                        cell.inMonth ? '' : 'is-out',
+                        cell.isToday ? 'is-today' : '',
+                        cell.dow === 0 ? 'is-sun' : cell.dow === 6 ? 'is-sat' : '',
+                      ]
+                        .filter(Boolean)
+                        .join(' ')}
+                      onClick={() => setPopupDay(cell.key)}
+                    >
+                      <span className="kx-home__cal-daynum tnum">{cell.day}</span>
+                      {wk.hiddenByCol[cell.dow] > 0 && (
+                        <span className="kx-home__cal-more tnum">
+                          {t('home.calendar.more', { n: wk.hiddenByCol[cell.dow] })}
+                        </span>
+                      )}
+                    </button>
+                  ))}
+                </div>
+                {/* spanning bar 레인 */}
+                <div
+                  className="kx-home__cal-lanes"
+                  style={{ height: `${wk.laneCount * 22}px` }}
+                  aria-hidden="true"
+                >
+                  {wk.bars.map((bar, bi) => (
+                    <span
+                      key={`${bar.event.id}-${bi}`}
+                      className={[
+                        'kx-home__cal-bar',
+                        `is-${catStatusClass(bar.event.status)}`,
+                        bar.continuesLeft ? 'is-cont-l' : '',
+                        bar.continuesRight ? 'is-cont-r' : '',
+                      ]
+                        .filter(Boolean)
+                        .join(' ')}
+                      style={{
+                        left: `calc(${(bar.colStart / 7) * 100}% + 2px)`,
+                        width: `calc(${(bar.span / 7) * 100}% - 4px)`,
+                        top: `${bar.lane * 22}px`,
+                      }}
+                      title={`${bar.event.name}${bar.event.hallLabel ? ` · ${bar.event.hallLabel}` : ''}`}
+                    >
+                      {bar.event.name}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* 진행 중·예정 전시 리스트 */}
+          <div className="kx-home__cal-list">
+            <h3 className="kx-home__cal-list-title">{t('home.calendar.listTitle')}</h3>
+            {listed.length === 0 ? (
+              <EmptyState
+                title={t('home.calendar.listEmpty')}
+                action={<Button variant="secondary" onClick={() => navigate('/schedule')}>{t('home.calendar.listEmptyCta')}</Button>}
+              />
+            ) : (
+              <ul className="kx-home__cal-list-items">
+                {listed.map((e) => (
+                  <li key={e.id}>
+                    <button
+                      type="button"
+                      className="kx-home__cal-list-row"
+                      onClick={() => navigate(`/public/events/${encodeURIComponent(e.id)}`)}
+                    >
+                      <span className={`kx-home__legend-dot is-${e.status}`} aria-hidden="true" />
+                      <span className="kx-home__cal-list-name">{e.name}</span>
+                      {e.hallLabel && <span className="kx-home__cal-list-hall">{e.hallLabel}</span>}
+                      <span className="kx-home__cal-list-period tnum">
+                        {periodShort(e.start, e.end)}
+                      </span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* 일자 팝업(+N / 셀 클릭) */}
+      {popupDay && (
+        <div
+          className="kx-home__cal-popup-backdrop"
+          role="presentation"
+          onClick={() => setPopupDay(null)}
+        >
+          <div
+            className="kx-home__cal-popup"
+            role="dialog"
+            aria-label={t('home.calendar.moreTitle', { date: popupDay })}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="kx-home__cal-popup-head">
+              <strong className="tnum">{popupDay}</strong>
+              <button type="button" className="kx-home__cal-popup-close" onClick={() => setPopupDay(null)} aria-label={t('common.actions.close')}>
+                ✕
+              </button>
+            </div>
+            {popupEvents.length === 0 ? (
+              <p className="kx-home__cal-popup-empty">{t('home.calendar.popupEmpty')}</p>
+            ) : (
+              <ul className="kx-home__cal-popup-list">
+                {popupEvents.map((e) => (
+                  <li key={e.id}>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setPopupDay(null);
+                        navigate(`/public/events/${encodeURIComponent(e.id)}`);
+                      }}
+                    >
+                      <span className={`kx-home__legend-dot is-${e.status}`} aria-hidden="true" />
+                      <span>{e.name}</span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ④-우① 내 할 일
+ * ──────────────────────────────────────────────────────────── */
+function todoSeverityDot(sev: HomeTodoItem['severity']): string {
+  return sev === 'overdue' ? 'is-ended' : sev === 'warning' ? 'is-upcoming' : 'is-ongoing';
+}
+function todoDueText(item: HomeTodoItem, t: (k: string, o?: Record<string, unknown>) => string): string {
+  if (item.dday == null) return t('home.todo.noDue');
+  if (item.dday < 0) return `D+${Math.abs(item.dday)}`;
+  return `D-${item.dday}`;
+}
+
+function TodoWidget() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const query = useQuery({ queryKey: ['home-todos'], queryFn: () => homeApi.todos() });
+  const data = query.data;
+
+  return (
+    <section className="kx-card kx-home__widget" aria-label={t('home.todo.title')}>
+      <div className="kx-home__widget-head">
+        <h2>{t('home.todo.title')}</h2>
+        {data && data.total > 0 && <span className="kx-home__count-badge tnum">{data.total}</span>}
+      </div>
+
+      {query.isLoading ? (
+        <div className="kx-home__widget-body">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} height={40} />
+          ))}
+        </div>
+      ) : query.isError ? (
+        <ErrorState message={t('home.loadError')} onRetry={() => query.refetch()} />
+      ) : !data || data.items.length === 0 ? (
+        <div className="kx-home__todo-done">
+          <span className="kx-home__todo-done-icon"><IconCheckCircle size={28} /></span>
+          <p className="kx-home__todo-done-title">{t('home.todo.emptyTitle')}</p>
+          <p className="kx-home__todo-done-desc">{t('home.todo.emptyDesc')}</p>
+          <Button variant="secondary" onClick={() => navigate('/notifications')}>
+            {t('home.todo.emptyCta')}
+          </Button>
+        </div>
+      ) : (
+        <>
+          <ul className="kx-home__todo-list">
+            {data.items.map((item, i) => (
+              <li key={`${item.type}-${i}`}>
+                <button
+                  type="button"
+                  className="kx-home__todo-row"
+                  onClick={() => item.route && navigate(item.route)}
+                >
+                  <span className={`kx-home__legend-dot ${todoSeverityDot(item.severity)}`} aria-hidden="true" />
+                  <span className="kx-home__todo-main">
+                    <span className="kx-home__todo-title">{item.title}</span>
+                    <span className="kx-home__todo-target">{item.target}</span>
+                  </span>
+                  <span className={`kx-home__todo-due tnum is-${item.severity}`}>
+                    {todoDueText(item, t)}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+          {data.total > data.items.length && (
+            <button type="button" className="kx-home__widget-more" onClick={() => navigate('/notifications')}>
+              {t('home.viewAll')}
+            </button>
+          )}
+        </>
+      )}
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ④-우② 공지사항
+ * ──────────────────────────────────────────────────────────── */
+function isNew(createdAt: string): boolean {
+  const d = new Date(createdAt).getTime();
+  return Number.isFinite(d) && Date.now() - d < 3 * 86400000; // 3일 이내
+}
+
+function NoticeWidget() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const query = useQuery({
+    queryKey: ['home-notices'],
+    queryFn: () => noticeApi.list({ page: 0, size: 5 }),
+  });
+  const items = query.data?.items ?? [];
+
+  return (
+    <section className="kx-card kx-home__widget" aria-label={t('home.notice.title')}>
+      <div className="kx-home__widget-head">
+        <h2>{t('home.notice.title')}</h2>
+      </div>
+      {query.isLoading ? (
+        <div className="kx-home__widget-body">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} height={20} />
+          ))}
+        </div>
+      ) : query.isError ? (
+        <ErrorState message={t('home.loadError')} onRetry={() => query.refetch()} />
+      ) : items.length === 0 ? (
+        <EmptyState
+          title={t('home.notice.emptyTitle')}
+          action={<Button variant="secondary" onClick={() => navigate('/work/notice')}>{t('home.notice.emptyCta')}</Button>}
+        />
+      ) : (
+        <>
+          <ul className="kx-home__notice-list">
+            {items.map((n) => (
+              <li key={n.id}>
+                <button type="button" className="kx-home__notice-row" onClick={() => navigate('/work/notice')}>
+                  {n.pinned && <span className="kx-home__pin" aria-label={t('home.notice.pinned')}>●</span>}
+                  <span className="kx-home__notice-title">{n.title}</span>
+                  {isNew(n.createdAt) && <span className="kx-home__new">{t('home.notice.new')}</span>}
+                  <span className="kx-home__notice-date tnum">{(n.publishedAt ?? n.createdAt).slice(0, 10)}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+          <button type="button" className="kx-home__widget-more" onClick={() => navigate('/work/notice')}>
+            {t('home.notice.more')}
+          </button>
+        </>
+      )}
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ④-우③ 빠른 작업 (정적 라우트)
+ * ──────────────────────────────────────────────────────────── */
+function QuickActions() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const eventId = useResolvedEventId();
+
+  const actions: { key: string; Icon: typeof IconFloorplan; go: () => void }[] = [
+    { key: 'editor', Icon: IconFloorplan, go: () => navigate(eventId ? `/events/${eventId}/halls/H7/layout` : '/schedule') },
+    { key: 'invite', Icon: IconExhibitors, go: () => navigate(eventId ? `/events/${eventId}/dashboard` : '/schedule') },
+    { key: 'docs', Icon: IconDocument, go: () => navigate('/docs') },
+    { key: 'settlement', Icon: IconSettlement, go: () => navigate('/settlement') },
+    { key: 'notice', Icon: IconBell, go: () => navigate('/work/notice') },
+    { key: 'search', Icon: IconSearch, go: () => navigate('/work/search') },
+  ];
+
+  return (
+    <section className="kx-card kx-home__widget" aria-label={t('home.quick.title')}>
+      <div className="kx-home__widget-head">
+        <h2>{t('home.quick.title')}</h2>
+      </div>
+      <div className="kx-home__quick-grid">
+        {actions.map((a) => (
+          <button key={a.key} type="button" className="kx-home__quick-btn" onClick={a.go}>
+            <span className="kx-home__quick-icon"><a.Icon size={22} /></span>
+            <span className="kx-home__quick-label">{t(`home.quick.${a.key}`)}</span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ④-우④ 최근 활동 (알림 피드 재사용)
+ * ──────────────────────────────────────────────────────────── */
+function relativeTime(iso: string, t: (k: string, o?: Record<string, unknown>) => string): string {
+  const ts = new Date(iso).getTime();
+  if (!Number.isFinite(ts)) return '';
+  const diff = Math.max(0, Date.now() - ts);
+  const min = Math.floor(diff / 60000);
+  if (min < 1) return t('home.time.justNow');
+  if (min < 60) return t('home.time.minutes', { n: min });
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return t('home.time.hours', { n: hr });
+  const day = Math.floor(hr / 24);
+  return t('home.time.days', { n: day });
+}
+
+function ActivityWidget() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const query = useQuery({
+    queryKey: ['home-activity'],
+    queryFn: () => notificationApi.list({ page: 0, size: 5 }),
+  });
+  const items = query.data?.items ?? [];
+
+  return (
+    <section className="kx-card kx-home__widget" aria-label={t('home.activity.title')}>
+      <div className="kx-home__widget-head">
+        <h2>{t('home.activity.title')}</h2>
+      </div>
+      {query.isLoading ? (
+        <div className="kx-home__widget-body">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} height={28} />
+          ))}
+        </div>
+      ) : query.isError ? (
+        <ErrorState message={t('home.loadError')} onRetry={() => query.refetch()} />
+      ) : items.length === 0 ? (
+        <EmptyState
+          title={t('home.activity.emptyTitle')}
+          action={<Button variant="secondary" onClick={() => navigate('/notifications')}>{t('home.activity.emptyCta')}</Button>}
+        />
+      ) : (
+        <>
+          <ul className="kx-home__activity-list">
+            {items.map((n) => (
+              <li key={n.id}>
+                <button
+                  type="button"
+                  className="kx-home__activity-row"
+                  onClick={() => navigate(n.link || '/notifications')}
+                >
+                  <span className={`kx-home__legend-dot ${n.readAt ? 'is-ended' : 'is-ongoing'}`} aria-hidden="true" />
+                  <span className="kx-home__activity-text">{n.title}</span>
+                  <span className="kx-home__activity-time tnum">{relativeTime(n.createdAt, t)}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+          <button type="button" className="kx-home__widget-more" onClick={() => navigate('/notifications')}>
+            {t('home.viewAll')}
+          </button>
+        </>
+      )}
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ⑤ 내 행사 워크스페이스 (authStore.workspaces)
+ * ──────────────────────────────────────────────────────────── */
+function WorkspaceGrid() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const workspaces = useAuthStore((s) => s.workspaces);
+  const selectEvent = useAuthStore((s) => s.selectEvent);
+  const [inviteCode, setInviteCode] = useState('');
+
+  function enter(eventId: string) {
+    selectEvent(eventId);
+    navigate(`/events/${eventId}/dashboard`);
+  }
+
+  return (
+    <section className="kx-home__workspace" aria-label={t('home.workspace.title')}>
+      <div className="kx-home__section-head">
+        <h2 className="kx-home__section-title">{t('home.workspace.title')}</h2>
+      </div>
+      {workspaces.length === 0 ? (
+        <div className="kx-card kx-home__ws-empty">
+          <div>
+            <p className="kx-home__ws-empty-title">{t('home.workspace.emptyTitle')}</p>
+            <p className="kx-home__ws-empty-desc">{t('home.workspace.emptyDesc')}</p>
+          </div>
+          <form
+            className="kx-home__ws-invite"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (inviteCode.trim()) navigate('/login');
+            }}
+          >
+            <input
+              className="kx-home__ws-code"
+              value={inviteCode}
+              onChange={(e) => setInviteCode(e.target.value)}
+              placeholder={t('home.workspace.codePh')}
+              aria-label={t('home.workspace.codePh')}
+            />
+            <Button type="submit" variant="secondary">
+              {t('home.workspace.invite')}
+            </Button>
+          </form>
+        </div>
+      ) : (
+        <div className="kx-home__ws-grid">
+          {workspaces.map((ws) => (
+            <button key={ws.eventId} type="button" className="kx-home__ws-card" onClick={() => enter(ws.eventId)}>
+              <div className="kx-home__ws-card-top">
+                <span className="kx-badge kx-badge--role">{roleLabel(ws.myRole, t)}</span>
+                <DdayChip dday={ws.dday} />
+              </div>
+              <h3 className="kx-home__ws-card-title">{ws.eventName}</h3>
+              <p className="kx-home__ws-card-meta tnum">
+                {ws.startDate} – {ws.endDate}
+              </p>
+              <p className="kx-home__ws-card-hall">{ws.hallLabel}</p>
+            </button>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/frontend/src/screens/home/home.css b/src/frontend/src/screens/home/home.css
new file mode 100644
index 0000000..67029da
--- /dev/null
+++ b/src/frontend/src/screens/home/home.css
@@ -0,0 +1,1267 @@
+@import '../shared.css';
+
+/* ────────────────────────────────────────────────────────────
+ * SCR-HOME 메인 홈 — 12컬럼 컴팩트, 대형 공백 금지(밀도 원칙).
+ * 라이트/다크 토큰 CSS 변수만 사용(하드코딩 hex 금지). 이모지 금지·선 SVG.
+ * ──────────────────────────────────────────────────────────── */
+.kx-home {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5); /* 섹션 간 24px 표준(32px 상한) */
+  background: var(--color-neutral-050);
+}
+
+/* 공통 섹션 헤더 */
+.kx-home__section-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  margin-bottom: var(--space-3);
+}
+.kx-home__section-title {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+.kx-home__section-link {
+  margin-left: auto;
+  border: none;
+  background: none;
+  color: var(--color-primary-600);
+  font-size: var(--fs-body);
+  cursor: pointer;
+  padding: 4px 6px;
+}
+.kx-home__section-link:hover {
+  text-decoration: underline;
+}
+
+/* ── ① 인사 + KPI ── */
+.kx-home__hero-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  flex-wrap: wrap;
+}
+.kx-home__greeting {
+  min-width: 220px;
+}
+.kx-home__hello {
+  font-size: var(--fs-h1);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0 0 4px;
+}
+.kx-home__submeta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--color-neutral-500);
+  font-size: var(--fs-body);
+  margin: 0;
+}
+.kx-home__kpis {
+  margin-left: auto;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(140px, 1fr));
+  gap: var(--space-3);
+  flex: 1;
+  min-width: 0;
+}
+.kx-kpitile {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: var(--space-3) var(--space-4);
+  background: var(--color-white);
+  border: var(--border-card);
+  border-left: 4px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  text-align: left;
+  cursor: pointer;
+  min-height: 66px;
+}
+.kx-kpitile:hover {
+  box-shadow: var(--shadow-level2);
+}
+.kx-kpitile.is-normal {
+  border-left-color: var(--color-primary-600);
+}
+.kx-kpitile.is-warning {
+  border-left-color: var(--color-warning);
+}
+.kx-kpitile.is-overdue {
+  border-left-color: var(--color-error);
+}
+.kx-kpitile--error {
+  grid-column: 1 / -1;
+  cursor: default;
+}
+.kx-kpitile__label {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-kpitile__value {
+  font-size: var(--fs-h2);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+/* Stitch 정합: 임박/경과 타일 값 강조색 */
+.kx-kpitile.is-warning .kx-kpitile__value {
+  color: var(--color-warning);
+}
+.kx-kpitile.is-overdue .kx-kpitile__value {
+  color: var(--color-error);
+}
+
+/* ── ② 배너 캐러셀 (220~260px) ── */
+.kx-home__banner {
+  position: relative;
+  height: 240px;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: var(--border-card);
+  background: var(--color-neutral-100);
+}
+.kx-home__banner-slide {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+}
+.kx-home__banner-slide.is-active {
+  opacity: 1;
+}
+.kx-home__banner-scrim {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, rgba(16, 24, 40, 0.72) 0%, rgba(16, 24, 40, 0.24) 60%, transparent 100%);
+}
+.kx-home__banner-fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-8);
+  background: linear-gradient(120deg, var(--color-primary-600), var(--color-ai-accent));
+}
+.kx-home__banner-text h2 {
+  color: #fff;
+  font-size: var(--fs-h1);
+  margin: 0 0 8px;
+}
+.kx-home__banner-text p {
+  color: rgba(255, 255, 255, 0.88);
+  font-size: var(--fs-body);
+  margin: 0;
+}
+.kx-home__banner-body {
+  position: absolute;
+  left: var(--space-8);
+  bottom: var(--space-6);
+  right: 30%;
+  color: #fff;
+}
+.kx-home__banner-title {
+  font-size: var(--fs-h1);
+  font-weight: 700;
+  margin: 0 0 6px;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+.kx-home__banner-sub {
+  font-size: var(--fs-body);
+  margin: 0;
+  color: rgba(255, 255, 255, 0.9);
+}
+.kx-home__banner-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.85);
+  color: var(--color-neutral-900);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.kx-home__banner-nav:hover {
+  background: #fff;
+}
+.kx-home__banner-nav.is-prev {
+  left: 12px;
+}
+.kx-home__banner-nav.is-next {
+  right: 12px;
+}
+.kx-home__banner-dots {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+/* Stitch 정합: 대시(bar)형 인디케이터 */
+.kx-home__banner-dot {
+  width: 22px;
+  height: 3px;
+  border-radius: var(--radius-pill);
+  border: none;
+  background: rgba(255, 255, 255, 0.45);
+  cursor: pointer;
+  padding: 0;
+}
+.kx-home__banner-dot.is-active {
+  background: #fff;
+}
+
+/* ── ③ 쇼케이스 포스터 레일 ── */
+.kx-home__rail-wrap {
+  position: relative;
+}
+.kx-home__rail {
+  display: flex;
+  gap: var(--space-3);
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  padding-bottom: 4px;
+  scrollbar-width: thin;
+}
+.kx-home__rail-arrow {
+  position: absolute;
+  top: 120px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: var(--border-card);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--shadow-level2);
+  z-index: 2;
+}
+.kx-home__rail-arrow.is-prev {
+  left: -8px;
+}
+.kx-home__rail-arrow.is-next {
+  right: -8px;
+}
+.kx-poster {
+  flex: 0 0 220px;
+  width: 220px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow: hidden;
+  text-align: left;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+}
+.kx-poster:hover {
+  box-shadow: var(--shadow-level2);
+}
+.kx-poster__img {
+  display: block;
+  width: 100%;
+  height: 264px; /* Stitch 정합: 포스터 세로 비율(약 2:3) 고정 높이 */
+  background-size: cover;
+  background-position: center;
+  background-color: var(--color-neutral-100);
+}
+.kx-poster__img--fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  background: linear-gradient(140deg, var(--color-primary-600), var(--color-ai-accent));
+}
+.kx-poster__fallback-text {
+  color: #fff;
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  text-align: center;
+  line-height: 1.35;
+}
+.kx-poster__body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 12px 12px;
+  border-left: 4px solid var(--color-neutral-200); /* Stitch 정합: 상태색 좌측 액센트 */
+}
+.kx-poster__body.is-ongoing {
+  border-left-color: var(--color-success);
+}
+.kx-poster__body.is-upcoming {
+  border-left-color: var(--color-primary-600);
+}
+.kx-poster__body.is-ended {
+  border-left-color: var(--color-neutral-500);
+}
+.kx-poster__hall {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--color-primary-600);
+  margin-bottom: 1px;
+}
+.kx-poster__body.is-ongoing .kx-poster__hall {
+  color: var(--color-success);
+}
+.kx-poster__body.is-ended .kx-poster__hall {
+  color: var(--color-neutral-500);
+}
+.kx-poster__name {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.kx-poster__meta {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-poster__badges {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+/* 상태 칩(진행/예정) */
+.kx-home__chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+}
+.kx-home__chip.is-ongoing {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+.kx-home__chip.is-upcoming {
+  background: var(--color-primary-050);
+  color: var(--color-primary-600);
+}
+.kx-home__chip.is-ended {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-500);
+}
+
+/* ── ④ 본문 2열 그리드 ── 좌우 컬럼 하단 정렬(stretch): 최근 활동↔진행 중 전시 높이 일치 ── */
+.kx-home__body {
+  display: grid;
+  grid-template-columns: 8fr 4fr;
+  gap: var(--space-5);
+  align-items: stretch;
+}
+.kx-home__col-main,
+.kx-home__col-side {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+/* 각 컬럼 마지막 카드가 남은 높이를 채워 양 컬럼 하단선을 맞춘다(공백 없는 반응형). */
+.kx-home__col-main > :last-child,
+.kx-home__col-side > :last-child {
+  flex: 1 1 auto;
+}
+
+/* 캘린더 */
+.kx-home__cal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-3);
+}
+.kx-home__cal-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.kx-home__cal-title {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  min-width: 120px;
+  text-align: center;
+}
+.kx-home__cal-nav,
+.kx-home__cal-today {
+  border: var(--border-card);
+  background: var(--color-white);
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+  cursor: pointer;
+  color: var(--color-neutral-700);
+  display: inline-flex;
+  align-items: center;
+}
+.kx-home__cal-today {
+  font-size: var(--fs-caption);
+}
+.kx-home__cal-seg {
+  flex-wrap: wrap;
+}
+.kx-home__cal-legend {
+  display: flex;
+  gap: var(--space-4);
+  margin-bottom: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-home__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.kx-home__legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: inline-block;
+}
+.kx-home__legend-dot.is-ongoing {
+  background: var(--color-success);
+}
+.kx-home__legend-dot.is-upcoming {
+  background: var(--color-primary-600);
+}
+.kx-home__legend-dot.is-ended {
+  background: var(--color-neutral-500);
+}
+
+.kx-home__cal-grid {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.kx-home__cal-dow {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background: var(--color-neutral-050);
+  border-bottom: var(--border-card);
+}
+.kx-home__cal-wd {
+  padding: 6px 0;
+  text-align: center;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-home__cal-wd.is-sun {
+  color: var(--color-error);
+}
+.kx-home__cal-wd.is-sat {
+  color: var(--color-primary-600);
+}
+.kx-home__cal-week {
+  position: relative;
+  border-bottom: var(--border-card);
+}
+.kx-home__cal-week:last-child {
+  border-bottom: none;
+}
+.kx-home__cal-cells {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.kx-home__cal-cell {
+  min-height: 84px;
+  border-right: var(--border-card);
+  padding: 4px 6px;
+  text-align: left;
+  background: var(--color-white);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.kx-home__cal-cell:last-child {
+  border-right: none;
+}
+.kx-home__cal-cell:hover {
+  background: var(--color-neutral-050);
+}
+.kx-home__cal-cell.is-out {
+  background: var(--color-neutral-050);
+}
+.kx-home__cal-cell.is-out .kx-home__cal-daynum {
+  color: var(--color-neutral-200);
+}
+.kx-home__cal-daynum {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+}
+.kx-home__cal-cell.is-sun .kx-home__cal-daynum {
+  color: var(--color-error);
+}
+.kx-home__cal-cell.is-sat .kx-home__cal-daynum {
+  color: var(--color-primary-600);
+}
+.kx-home__cal-cell.is-today .kx-home__cal-daynum {
+  background: var(--color-primary-600);
+  color: #fff;
+  border-radius: var(--radius-pill);
+  padding: 1px 7px;
+  font-weight: 700;
+}
+.kx-home__cal-more {
+  margin-top: auto;
+  font-size: 10px;
+  color: var(--color-neutral-500);
+}
+/* spanning bar 레인 — 셀 위에 절대배치(요일 헤더 아래 24px 오프셋) */
+.kx-home__cal-lanes {
+  position: absolute;
+  top: 22px;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+.kx-home__cal-bar {
+  position: absolute;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 3px;
+  font-size: 11px;
+  padding: 0 6px;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kx-home__cal-bar.is-ongoing {
+  background: var(--color-success);
+}
+.kx-home__cal-bar.is-upcoming {
+  background: var(--color-primary-600);
+}
+.kx-home__cal-bar.is-ended {
+  background: var(--color-neutral-500);
+}
+.kx-home__cal-bar.is-cont-l {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.kx-home__cal-bar.is-cont-r {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.kx-home__cal-list {
+  margin-top: var(--space-4);
+}
+.kx-home__cal-list-title {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0 0 var(--space-2);
+}
+.kx-home__cal-list-items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2); /* Stitch 정합: 카드형 행(간격 있는 박스) */
+}
+.kx-home__cal-list-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 10px 12px;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-neutral-050);
+  cursor: pointer;
+  text-align: left;
+}
+.kx-home__cal-list-row:hover {
+  background: var(--color-white);
+  border-color: var(--color-primary-600);
+}
+.kx-home__cal-list-name {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  font-weight: 500;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kx-home__cal-list-hall {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-home__cal-list-period {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+/* 일자 팝업 */
+.kx-home__cal-popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(16, 24, 40, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 40;
+}
+.kx-home__cal-popup {
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  border: var(--border-card);
+  width: 320px;
+  max-width: 90vw;
+  max-height: 70vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-level2);
+}
+.kx-home__cal-popup-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-card);
+}
+.kx-home__cal-popup-close {
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-neutral-500);
+  font-size: var(--fs-body);
+}
+.kx-home__cal-popup-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-2);
+}
+.kx-home__cal-popup-list button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 8px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--radius-sm);
+  color: var(--color-neutral-900);
+  font-size: var(--fs-body);
+}
+.kx-home__cal-popup-list button:hover {
+  background: var(--color-neutral-050);
+}
+.kx-home__cal-popup-empty {
+  padding: var(--space-5);
+  text-align: center;
+  color: var(--color-neutral-500);
+  font-size: var(--fs-body);
+}
+
+/* ── ④-우 위젯 공통 ── */
+.kx-home__widget {
+  display: flex;
+  flex-direction: column;
+}
+.kx-home__widget-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+.kx-home__widget-head h2 {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+.kx-home__count-badge {
+  background: var(--color-primary-600);
+  color: #fff;
+  border-radius: var(--radius-pill);
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.kx-home__widget-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.kx-home__widget-more {
+  margin-top: var(--space-2);
+  align-self: flex-start;
+  border: none;
+  background: none;
+  color: var(--color-primary-600);
+  font-size: var(--fs-body);
+  cursor: pointer;
+  padding: 4px 0;
+}
+.kx-home__widget-more:hover {
+  text-decoration: underline;
+}
+
+/* 내 할 일 */
+.kx-home__todo-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.kx-home__todo-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 8px 4px;
+  border: none;
+  background: none;
+  border-bottom: var(--border-card);
+  cursor: pointer;
+  text-align: left;
+}
+.kx-home__todo-row:hover {
+  background: var(--color-neutral-050);
+}
+.kx-home__todo-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.kx-home__todo-title {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  font-weight: 500;
+}
+.kx-home__todo-target {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kx-home__todo-due {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.kx-home__todo-due.is-normal {
+  color: var(--color-neutral-500);
+}
+.kx-home__todo-due.is-warning {
+  color: var(--color-warning);
+}
+.kx-home__todo-due.is-overdue {
+  color: var(--color-error);
+}
+.kx-home__todo-done {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: var(--space-5) var(--space-4);
+  text-align: center;
+}
+.kx-home__todo-done-icon {
+  color: var(--color-success);
+}
+.kx-home__todo-done-title {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+.kx-home__todo-done-desc {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin: 0 0 6px;
+}
+
+/* 공지 */
+.kx-home__notice-list,
+.kx-home__activity-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.kx-home__notice-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 8px 4px;
+  border: none;
+  background: none;
+  border-bottom: var(--border-card);
+  cursor: pointer;
+  text-align: left;
+}
+.kx-home__notice-row:hover {
+  background: var(--color-neutral-050);
+}
+.kx-home__pin {
+  color: var(--color-primary-600);
+  font-size: 8px;
+}
+.kx-home__notice-title {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kx-home__new {
+  background: var(--color-error);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: var(--radius-sm);
+  padding: 1px 5px;
+}
+.kx-home__notice-date {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  flex-shrink: 0;
+}
+
+/* 빠른 작업 */
+.kx-home__quick-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-2);
+}
+.kx-home__quick-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: var(--space-3) 6px;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  cursor: pointer;
+  color: var(--color-neutral-700);
+}
+.kx-home__quick-btn:hover {
+  border-color: var(--color-primary-600);
+  color: var(--color-primary-600);
+}
+.kx-home__quick-icon {
+  color: inherit;
+}
+.kx-home__quick-label {
+  font-size: var(--fs-caption);
+  text-align: center;
+  color: var(--color-neutral-700);
+}
+
+/* 최근 활동 */
+.kx-home__activity-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 7px 4px;
+  border: none;
+  background: none;
+  border-bottom: var(--border-card);
+  cursor: pointer;
+  text-align: left;
+}
+.kx-home__activity-row:hover {
+  background: var(--color-neutral-050);
+}
+.kx-home__activity-text {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kx-home__activity-time {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  flex-shrink: 0;
+}
+
+/* ── ⑤ 워크스페이스 ── */
+.kx-home__ws-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--space-4);
+}
+.kx-home__ws-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  cursor: pointer;
+  text-align: left;
+}
+.kx-home__ws-card:hover {
+  box-shadow: var(--shadow-level2);
+  border-color: var(--color-primary-600);
+}
+.kx-home__ws-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.kx-home__ws-card-title {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 4px 0 0;
+}
+.kx-home__ws-card-meta,
+.kx-home__ws-card-hall {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin: 0;
+}
+.kx-home__ws-empty {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-5);
+  flex-wrap: wrap;
+}
+.kx-home__ws-empty-title {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0 0 4px;
+}
+.kx-home__ws-empty-desc {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin: 0;
+}
+.kx-home__ws-invite {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+.kx-home__ws-code {
+  height: 40px;
+  padding: 0 var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  color: var(--color-neutral-900);
+  font-size: var(--fs-body);
+  min-width: 180px;
+}
+.kx-home__ws-code:focus {
+  outline: 2px solid var(--color-primary-600);
+  outline-offset: 1px;
+}
+
+/* prefers-reduced-motion — 배너 전환 즉시 */
+@media (prefers-reduced-motion: reduce) {
+  .kx-home__banner-slide {
+    transition: none;
+  }
+  .kx-home__rail {
+    scroll-behavior: auto;
+  }
+}
+
+/* ── 반응형 (1100 / 720 브레이크) ── */
+@media (max-width: 1100px) {
+  .kx-home__body {
+    grid-template-columns: 1fr;
+  }
+  .kx-home__kpis {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 720px) {
+  .kx-home__hero-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .kx-home__kpis {
+    margin-left: 0;
+  }
+  .kx-home__quick-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* ── ①-b 요약 차트 (Recharts, KPI 아래) ── */
+.kx-home__charts {
+  padding: var(--space-4);
+}
+.kx-home__charts-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+}
+.kx-home__chart {
+  margin: 0;
+  min-width: 0;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  background: var(--color-white);
+  display: flex;
+  flex-direction: column;
+}
+.kx-home__chart-cap {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-neutral-700);
+  margin-bottom: var(--space-2);
+}
+.kx-home__chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 150px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-home__chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-3);
+  margin-top: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-home__chart-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.kx-home__chart-legend-item i {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  display: inline-block;
+}
+.kx-home__chart-legend-item b {
+  color: var(--color-neutral-900);
+  font-weight: 700;
+}
+
+@media (max-width: 1100px) {
+  .kx-home__charts-grid {
+    grid-template-columns: 1fr;
+  }
+}
+@media (min-width: 1101px) and (max-width: 1280px) {
+  .kx-home__charts-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* ────────────────────────────────────────────────────────────
+ * ①-c KINTEX AI 어시스턴트 허브 (AI 홍보 스트립) — 밀도 원칙: 높이 과대 금지(~160px)
+ *   보라 계열 AI 서피스 배경 + 5개 도구 카드(실 라우트) + 자연어 퀵 입력.
+ * ──────────────────────────────────────────────────────────── */
+.kx-home__aihub {
+  border: 1px solid var(--color-ai-accent);
+  border-left: var(--accent-ai);
+  border-radius: var(--radius-lg);
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--color-ai-accent) 12%, var(--color-ai-surface)) 0%,
+      var(--color-ai-surface) 62%
+    );
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.kx-home__aihub-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-home__aihub-badgeicon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  background: var(--color-ai-accent);
+  color: var(--color-white);
+  flex: 0 0 auto;
+}
+.kx-home__aihub-heading {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.kx-home__aihub-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0;
+  font-size: var(--fs-h3);
+  font-weight: 800;
+  color: var(--color-ai-accent-strong);
+  letter-spacing: -0.01em;
+}
+.kx-home__aihub-sub {
+  margin: 2px 0 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+}
+.kx-home__aihub-ask {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 0 0 auto;
+}
+.kx-home__aihub-input {
+  width: 260px;
+  max-width: 42vw;
+  height: 36px;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--color-ai-accent);
+  border-radius: var(--radius-pill);
+  background: var(--color-white);
+  color: var(--color-neutral-900);
+  font-size: var(--fs-caption);
+}
+.kx-home__aihub-input::placeholder {
+  color: var(--color-neutral-500);
+}
+.kx-home__aihub-input:focus-visible {
+  outline: 2px solid var(--color-ai-accent-strong);
+  outline-offset: 1px;
+}
+
+.kx-home__aihub-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--space-2);
+}
+.kx-home__aihub-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  text-align: left;
+  padding: var(--space-3);
+  border: 1px solid var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  cursor: pointer;
+  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+}
+.kx-home__aihub-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--color-ai-accent);
+  box-shadow: var(--shadow-level2);
+}
+.kx-home__aihub-card:focus-visible {
+  outline: 2px solid var(--color-ai-accent-strong);
+  outline-offset: 2px;
+}
+.kx-home__aihub-card-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-sm);
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent-strong);
+  flex: 0 0 auto;
+}
+.kx-home__aihub-card-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-home__aihub-card-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  line-height: 1.25;
+}
+.kx-home__aihub-card-tag {
+  flex: 0 0 auto;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  padding: 1px 5px;
+  border-radius: var(--radius-pill);
+  background: var(--color-ai-accent);
+  color: var(--color-white);
+}
+.kx-home__aihub-card-desc {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  line-height: 1.3;
+}
+
+@media (max-width: 1100px) {
+  .kx-home__aihub-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .kx-home__aihub-ask {
+    flex: 1 1 100%;
+  }
+  .kx-home__aihub-input {
+    flex: 1 1 auto;
+    max-width: none;
+    width: auto;
+  }
+}
+@media (min-width: 1101px) and (max-width: 1280px) {
+  .kx-home__aihub-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
diff --git a/src/frontend/src/screens/home/homeApi.ts b/src/frontend/src/screens/home/homeApi.ts
new file mode 100644
index 0000000..8045d79
--- /dev/null
+++ b/src/frontend/src/screens/home/homeApi.ts
@@ -0,0 +1,72 @@
+/*
+ * SCR-HOME 메인 홈 로컬 API 클라이언트 — 백엔드 com.zioinfo.kintex.home 4개 집계 엔드포인트.
+ * 공용 client(../../api/client)의 `api` 만 import — client.ts·endpoints.ts·types.ts 무수정.
+ * 정본: _workspace/impl_home_api.md (응답 shape 그대로 소비).
+ *
+ * 각 엔드포인트는 프론트에서 독립 호출한다(영역별 스켈레톤/에러 — 한 영역 실패가 홈 전체를 막지 않음).
+ * 인증 필수(전 엔드포인트 anyRequest().authenticated()). PII·자격정보 미포함(서버 보장).
+ */
+import { api } from '../../api/client';
+
+// ── 1) GET /api/home/todos — 내 할 일(역할 기반) ──
+export type TodoType = 'approval' | 'document' | 'auction' | 'settlement' | 'system';
+export type TodoSeverity = 'normal' | 'warning' | 'overdue';
+
+export interface HomeTodoItem {
+  type: TodoType;
+  title: string;
+  target: string;
+  dueDate: string | null; // "YYYY-MM-DD" | null
+  dday: number | null; // 잔여 일수(음수=경과, null=기한없음)
+  severity: TodoSeverity;
+  route: string; // 프론트 딥링크
+}
+export interface HomeTodos {
+  total: number; // 병합된 실제 미결 건수
+  items: HomeTodoItem[]; // 상위 6건
+}
+
+// ── 2) GET /api/home/showcase?tab=ongoing|thisMonth|nextMonth ──
+export type ShowcaseTab = 'ongoing' | 'thisMonth' | 'nextMonth';
+export type ShowcaseStatus = 'ongoing' | 'upcoming' | 'ended';
+
+export interface ShowcaseItem {
+  id: string;
+  name: string;
+  startDate: string; // "YYYY-MM-DD"
+  endDate: string;
+  hallLabel: string | null;
+  posterUrl: string | null; // null 이면 프론트 그라디언트+행사명 폴백
+  status: ShowcaseStatus;
+  dday: number; // 개장까지 잔여(진행 중 = 0 이하)
+}
+
+// ── 3) GET /api/home/hall-centers — 전시장(센터) 동적 목록 ──
+export interface HallCenter {
+  code: string; // exhibition_center 정수 문자열
+  label: string; // "제{code}전시장"
+}
+
+// ── 4) GET /api/home/summary — 역할별 KPI 4타일 ──
+export type KpiSeverity = 'normal' | 'warning' | 'overdue';
+export interface KpiTile {
+  key: string;
+  label: string;
+  value: number | string | null; // 집계 수치 또는 "D-n" 문자열, 미연동은 null → "—"
+  unit: string | null;
+  dday: number | null;
+  severity: KpiSeverity;
+  route: string;
+}
+export interface HomeSummary {
+  role: string; // ORGANIZER | EXHIBITOR | CONTRACTOR | ADMIN
+  tiles: KpiTile[];
+}
+
+export const homeApi = {
+  todos: () => api.get<HomeTodos>('/api/home/todos'),
+  showcase: (tab: ShowcaseTab = 'ongoing') =>
+    api.get<ShowcaseItem[]>(`/api/home/showcase?tab=${encodeURIComponent(tab)}`),
+  hallCenters: () => api.get<HallCenter[]>('/api/home/hall-centers'),
+  summary: () => api.get<HomeSummary>('/api/home/summary'),
+};
diff --git a/src/frontend/src/screens/home/homeCalendar.ts b/src/frontend/src/screens/home/homeCalendar.ts
new file mode 100644
index 0000000..8b954e1
--- /dev/null
+++ b/src/frontend/src/screens/home/homeCalendar.ts
@@ -0,0 +1,159 @@
+/*
+ * SCR-HOME 월 캘린더 레이아웃 — WISE(UIWS) CalendarView 패턴 참조(외부 라이브러리 미사용).
+ * 기간(2일+) 전시를 주 단위로 분할해 가로 spanning bar 로 배치(레인 그리디 할당),
+ * MAX_LANES 초과분은 일자별 "+N" 카운트로 축약한다. 단일일 전시도 span=1 bar 로 통일.
+ */
+
+export type CalStatus = 'ongoing' | 'upcoming' | 'ended';
+
+export interface CalEvent {
+  id: string;
+  name: string;
+  start: string; // "YYYY-MM-DD"
+  end: string; // "YYYY-MM-DD"
+  hallLabel: string | null;
+  status: CalStatus;
+}
+
+export interface WeekBar {
+  event: CalEvent;
+  lane: number;
+  colStart: number; // 0..6
+  span: number; // 1..7
+  continuesLeft: boolean; // 이전 주에서 이어짐
+  continuesRight: boolean; // 다음 주로 이어짐
+}
+
+export interface DayCell {
+  date: Date;
+  day: number; // 1..31
+  inMonth: boolean;
+  isToday: boolean;
+  dow: number; // 0(일)..6(토)
+  key: string; // "YYYY-MM-DD"
+}
+
+export interface WeekRow {
+  cells: DayCell[]; // 7
+  bars: WeekBar[]; // lane < MAX_LANES 만
+  hiddenByCol: number[]; // 7 — 각 열에서 숨겨진(레인 초과) 이벤트 수
+  laneCount: number; // 표시 레인 수(0..MAX_LANES) — 행 높이 산정용
+}
+
+export const MAX_LANES = 3;
+
+/** "YYYY-MM-DD" → 로컬 Date(자정). 타임존 밀림 방지(UTC 파싱 회피). */
+function parseYmd(s: string): Date {
+  const [y, m, d] = s.split('-').map(Number);
+  return new Date(y, (m || 1) - 1, d || 1);
+}
+function ymd(d: Date): string {
+  const mm = String(d.getMonth() + 1).padStart(2, '0');
+  const dd = String(d.getDate()).padStart(2, '0');
+  return `${d.getFullYear()}-${mm}-${dd}`;
+}
+function addDays(d: Date, n: number): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+}
+/** 자정 기준 일수 차(b - a). */
+function dayDiff(a: Date, b: Date): number {
+  const ms = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime() -
+    new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime();
+  return Math.round(ms / 86400000);
+}
+
+/**
+ * 지정 월의 6주 × 7열 그리드 + 주별 spanning bar 를 계산한다.
+ * @param today 오늘(강조) — 미지정 시 강조 없음.
+ */
+export function buildMonthGrid(
+  year: number,
+  month: number, // 0-based
+  events: CalEvent[],
+  today?: Date,
+): WeekRow[] {
+  const firstOfMonth = new Date(year, month, 1);
+  const gridStart = addDays(firstOfMonth, -firstOfMonth.getDay()); // 그 주 일요일로
+  const todayKey = today ? ymd(today) : null;
+
+  const weeks: WeekRow[] = [];
+  for (let w = 0; w < 6; w++) {
+    const weekStart = addDays(gridStart, w * 7);
+    const weekEnd = addDays(weekStart, 6);
+
+    const cells: DayCell[] = [];
+    for (let c = 0; c < 7; c++) {
+      const date = addDays(weekStart, c);
+      cells.push({
+        date,
+        day: date.getDate(),
+        inMonth: date.getMonth() === month,
+        isToday: todayKey != null && ymd(date) === todayKey,
+        dow: c,
+        key: ymd(date),
+      });
+    }
+
+    // 이 주와 겹치는 이벤트 → 주 내부 세그먼트로 클립
+    type Seg = { event: CalEvent; colStart: number; colEnd: number; s: Date; e: Date };
+    const segs: Seg[] = [];
+    for (const ev of events) {
+      const s = parseYmd(ev.start);
+      const e = parseYmd(ev.end);
+      if (e < weekStart || s > weekEnd) continue;
+      const colStart = Math.max(0, dayDiff(weekStart, s));
+      const colEnd = Math.min(6, dayDiff(weekStart, e));
+      if (colEnd < colStart) continue;
+      segs.push({ event: ev, colStart, colEnd, s, e });
+    }
+    // 시작 열 오름차순, 긴 세그먼트 우선(레인 안정)
+    segs.sort((a, b) => a.colStart - b.colStart || b.colEnd - b.colStart - (a.colEnd - a.colStart));
+
+    const laneEnds: number[] = []; // 레인별 마지막 점유 열
+    const bars: WeekBar[] = [];
+    const hiddenByCol = [0, 0, 0, 0, 0, 0, 0];
+
+    for (const seg of segs) {
+      // 첫 빈 레인 탐색
+      let lane = laneEnds.findIndex((end) => end < seg.colStart);
+      if (lane === -1) {
+        lane = laneEnds.length;
+        laneEnds.push(seg.colEnd);
+      } else {
+        laneEnds[lane] = seg.colEnd;
+      }
+      if (lane < MAX_LANES) {
+        bars.push({
+          event: seg.event,
+          lane,
+          colStart: seg.colStart,
+          span: seg.colEnd - seg.colStart + 1,
+          continuesLeft: seg.s < weekStart,
+          continuesRight: seg.e > weekEnd,
+        });
+      } else {
+        for (let c = seg.colStart; c <= seg.colEnd; c++) hiddenByCol[c] += 1;
+      }
+    }
+
+    weeks.push({
+      cells,
+      bars,
+      hiddenByCol,
+      laneCount: Math.min(laneEnds.length, MAX_LANES),
+    });
+  }
+  return weeks;
+}
+
+/** 특정 일자에 걸치는 전 이벤트(팝업용) — 정렬: 시작일→이름. */
+export function eventsOnDay(events: CalEvent[], dayKey: string): CalEvent[] {
+  const d = parseYmd(dayKey);
+  return events
+    .filter((ev) => {
+      const s = parseYmd(ev.start);
+      const e = parseYmd(ev.end);
+      return s <= d && d <= e;
+    })
+    .sort((a, b) => (a.start < b.start ? -1 : a.start > b.start ? 1 : a.name < b.name ? -1 : 1));
+}
diff --git a/src/frontend/src/screens/login/ForgotPasswordDialog.tsx b/src/frontend/src/screens/login/ForgotPasswordDialog.tsx
new file mode 100644
index 0000000..c4fd791
--- /dev/null
+++ b/src/frontend/src/screens/login/ForgotPasswordDialog.tsx
@@ -0,0 +1,193 @@
+import { useState } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+import { authApi } from '../../api/endpoints';
+import { ApiRequestError } from '../../api/client';
+import { Button } from '../../components/ui/Button';
+import { evaluatePassword } from './passwordStrength';
+import './login.css';
+
+type Step = 'request' | 'reset' | 'done';
+
+/**
+ * 비밀번호 찾기/초기화 (SCR-01) — 2단계.
+ *  ① 요청: 이메일 → POST /api/auth/password/forgot (사용자 열거 방지: 항상 성공 안내)
+ *  ② 재설정: 이메일+인증코드+새 비밀번호 → POST /api/auth/password/reset
+ * 스켈레톤(501/404)이면 "준비 중입니다" degraded 안내.
+ */
+export function ForgotPasswordDialog({
+  onClose,
+  onDone,
+  defaultEmail = '',
+}: {
+  onClose: () => void;
+  onDone: (email: string) => void;
+  defaultEmail?: string;
+}) {
+  const { t } = useTranslation();
+  const [step, setStep] = useState<Step>('request');
+  const [email, setEmail] = useState(defaultEmail);
+  const [code, setCode] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const hint = evaluatePassword(newPassword);
+
+  function degradedMessage(err: ApiRequestError): string | null {
+    if (err.code === 'NOT_IMPLEMENTED' || err.httpStatus === 404) {
+      return t('forgot.errNotImpl');
+    }
+    return null;
+  }
+
+  async function requestCode(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await authApi.forgotPassword({ email: email.trim() });
+      setStep('reset');
+    } catch (err) {
+      if (err instanceof ApiRequestError) {
+        setError(degradedMessage(err) ?? err.message);
+      } else {
+        setError(t('forgot.errRequest'));
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function resetPassword(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await authApi.resetPassword({
+        email: email.trim(),
+        code: code.trim(),
+        newPassword,
+      });
+      setStep('done');
+    } catch (err) {
+      if (err instanceof ApiRequestError) {
+        if (err.code === 'OTP_INVALID' || err.code === 'VALIDATION') {
+          setError(t('forgot.errInvalid'));
+        } else {
+          setError(degradedMessage(err) ?? err.message);
+        }
+      } else {
+        setError(t('forgot.errReset'));
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="kx-modal" role="dialog" aria-modal="true" aria-labelledby="forgot-title">
+      <div className="kx-modal__backdrop" onClick={onClose} />
+      <div className="kx-modal__panel">
+        {step === 'done' ? (
+          <div className="kx-modal__blocked" role="status">
+            <span className="kx-modal__blocked-icon kx-modal__ok-icon" aria-hidden="true">
+              ✓
+            </span>
+            <h3 id="forgot-title">{t('forgot.doneTitle')}</h3>
+            <p>{t('forgot.doneDesc')}</p>
+            <div className="kx-modal__actions">
+              <Button onClick={() => onDone(email.trim())}>{t('forgot.goLogin')}</Button>
+            </div>
+          </div>
+        ) : step === 'request' ? (
+          <form onSubmit={requestCode}>
+            <h3 id="forgot-title" className="kx-modal__title">
+              {t('forgot.requestTitle')}
+            </h3>
+            <p className="kx-modal__desc">{t('forgot.requestDesc')}</p>
+            <div className="kx-field">
+              <label htmlFor="fp-email">{t('forgot.email')}</label>
+              <input
+                id="fp-email"
+                type="email"
+                autoComplete="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder={t('forgot.emailPh')}
+                required
+              />
+            </div>
+            {error && (
+              <p className="kx-login__error" role="alert">
+                {error}
+              </p>
+            )}
+            <div className="kx-modal__actions">
+              <Button variant="ghost" type="button" onClick={onClose}>
+                {t('forgot.cancel')}
+              </Button>
+              <Button type="submit" disabled={submitting}>
+                {submitting ? t('forgot.sending') : t('forgot.requestBtn')}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <form onSubmit={resetPassword}>
+            <h3 id="forgot-title" className="kx-modal__title">
+              {t('forgot.resetTitle')}
+            </h3>
+            <p className="kx-modal__desc">
+              <Trans i18nKey="forgot.resetDesc" values={{ email }} components={[<strong key="e" />]} />
+            </p>
+            <div className="kx-field">
+              <label htmlFor="fp-code">{t('forgot.code')}</label>
+              <input
+                id="fp-code"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                value={code}
+                onChange={(e) => setCode(e.target.value)}
+                placeholder={t('forgot.codePh')}
+                required
+              />
+            </div>
+            <div className="kx-field">
+              <label htmlFor="fp-newpw">{t('forgot.newpw')}</label>
+              <input
+                id="fp-newpw"
+                type="password"
+                autoComplete="new-password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder={t('forgot.newpwPh')}
+                aria-describedby="fp-pw-hint"
+                required
+              />
+              <div className="kx-pw" id="fp-pw-hint" aria-live="polite">
+                <div className={`kx-pw__bar kx-pw__bar--${hint.level}`}>
+                  {[0, 1, 2].map((i) => (
+                    <span key={i} className={i < hint.score ? 'is-on' : ''} />
+                  ))}
+                </div>
+                {hint.label && <span className="kx-pw__label">{hint.label}</span>}
+              </div>
+            </div>
+            {error && (
+              <p className="kx-login__error" role="alert">
+                {error}
+              </p>
+            )}
+            <div className="kx-modal__actions">
+              <Button variant="ghost" type="button" onClick={() => setStep('request')}>
+                {t('forgot.prev')}
+              </Button>
+              <Button type="submit" disabled={submitting}>
+                {submitting ? t('forgot.changing') : t('forgot.changeBtn')}
+              </Button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/login/InviteDialog.tsx b/src/frontend/src/screens/login/InviteDialog.tsx
new file mode 100644
index 0000000..fb75c40
--- /dev/null
+++ b/src/frontend/src/screens/login/InviteDialog.tsx
@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { authApi } from '../../api/endpoints';
+import { ApiRequestError } from '../../api/client';
+import { useAuthStore } from '../../store/authStore';
+import { Button } from '../../components/ui/Button';
+import './login.css';
+
+/**
+ * 초대 코드 참여 (SCR-01) — 장치업체(CONTRACTOR)는 사업자번호로 킨텍스 등록업체 검증.
+ * 미등록 시 계약 NOT_REGISTERED_COMPANY(403) → 차단 모달 노출.
+ */
+export function InviteDialog({
+  onClose,
+  onSuccess,
+}: {
+  onClose: () => void;
+  onSuccess?: () => void;
+}) {
+  const applyLogin = useAuthStore((s) => s.applyLogin);
+  const [inviteCode, setInviteCode] = useState('');
+  const [regNo, setRegNo] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [blocked, setBlocked] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setBlocked(false);
+    setSubmitting(true);
+    try {
+      const res = await authApi.acceptInvite({
+        inviteCode: inviteCode.trim(),
+        companyRegistrationNo: regNo.trim(),
+      });
+      applyLogin(res);
+      onSuccess?.();
+      onClose();
+    } catch (err) {
+      if (err instanceof ApiRequestError) {
+        if (err.code === 'NOT_REGISTERED_COMPANY') {
+          setBlocked(true);
+        } else if (err.code === 'NOT_IMPLEMENTED') {
+          setError('초대 수락 서비스가 준비 중입니다.');
+        } else {
+          setError(err.message);
+        }
+      } else {
+        setError('초대 수락 중 오류가 발생했습니다.');
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="kx-modal" role="dialog" aria-modal="true" aria-labelledby="invite-title">
+      <div className="kx-modal__backdrop" onClick={onClose} />
+      <div className="kx-modal__panel">
+        {blocked ? (
+          <div className="kx-modal__blocked" role="alert">
+            <span className="kx-modal__blocked-icon" aria-hidden="true">⛔</span>
+            <h3 id="invite-title">참여할 수 없습니다</h3>
+            <p>
+              킨텍스 등록업체만 참여할 수 있습니다. 등록업체 확인 후 다시 시도하거나 주최자
+              사무국에 문의해 주세요.
+            </p>
+            <div className="kx-modal__actions">
+              <Button variant="secondary" onClick={() => setBlocked(false)}>
+                다시 입력
+              </Button>
+              <Button onClick={onClose}>닫기</Button>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={submit}>
+            <h3 id="invite-title" className="kx-modal__title">
+              초대 코드로 참여하기
+            </h3>
+            <p className="kx-modal__desc">
+              초대 링크에 포함된 코드를 입력하세요. 장치·시공업체는 사업자등록번호로 킨텍스
+              등록업체 검증이 필요합니다.
+            </p>
+
+            <div className="kx-field">
+              <label htmlFor="invite-code">초대 코드</label>
+              <input
+                id="invite-code"
+                value={inviteCode}
+                onChange={(e) => setInviteCode(e.target.value)}
+                placeholder="INV-XXXX"
+                required
+              />
+            </div>
+            <div className="kx-field">
+              <label htmlFor="reg-no">사업자등록번호 (장치·시공업체)</label>
+              <input
+                id="reg-no"
+                value={regNo}
+                onChange={(e) => setRegNo(e.target.value)}
+                placeholder="123-45-67890"
+                inputMode="numeric"
+              />
+            </div>
+
+            {error && (
+              <p className="kx-login__error" role="alert">
+                {error}
+              </p>
+            )}
+
+            <div className="kx-modal__actions">
+              <Button variant="ghost" type="button" onClick={onClose}>
+                취소
+              </Button>
+              <Button type="submit" disabled={submitting}>
+                {submitting ? '확인 중…' : '참여하기'}
+              </Button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/login/LoginPage.tsx b/src/frontend/src/screens/login/LoginPage.tsx
new file mode 100644
index 0000000..a618ec6
--- /dev/null
+++ b/src/frontend/src/screens/login/LoginPage.tsx
@@ -0,0 +1,254 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { authApi } from '../../api/endpoints';
+import { ApiRequestError } from '../../api/client';
+import { useAuthStore } from '../../store/authStore';
+import { Button } from '../../components/ui/Button';
+import { LanguageSwitcher } from '../../components/ui/LanguageSwitcher';
+import { InviteDialog } from './InviteDialog';
+import { SignupDialog } from './SignupDialog';
+import { ForgotPasswordDialog } from './ForgotPasswordDialog';
+import { LoginSlides } from './LoginSlides';
+import { OtpChallengePanel } from './OtpChallengePanel';
+import type { LoginResponse } from '../../api/types';
+import './login.css';
+
+// v2.1.2 — 로그인 성공 시 메인 홈(SCR-HOME)으로 랜딩한다. 기존 '워크스페이스 선택' phase 는
+// 제거하고 워크스페이스 선택은 SCR-HOME '내 행사' 섹션(WorkspaceGrid)으로 흡수했다.
+type Phase = 'login' | 'otp';
+type OtpMode = 'verify' | 'enroll';
+
+// 아이디 기억 — 이메일만 저장(비번 저장 금지).
+const REMEMBER_KEY = 'kintex_remember_email';
+
+export function LoginPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const applyLogin = useAuthStore((s) => s.applyLogin);
+
+  const [phase, setPhase] = useState<Phase>('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [remember, setRemember] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [signupOpen, setSignupOpen] = useState(false);
+  const [forgotOpen, setForgotOpen] = useState(false);
+  // 2FA 챌린지 — 1단계 성공 후 OTP 단계로 전환.
+  const [otpChallenge, setOtpChallenge] = useState<{ token: string; mode: OtpMode } | null>(null);
+
+  // 아이디 기억 프리필 — 저장된 이메일이 있으면 채우고 체크 유지.
+  useEffect(() => {
+    const saved = localStorage.getItem(REMEMBER_KEY);
+    if (saved) {
+      setEmail(saved);
+      setRemember(true);
+    }
+  }, []);
+
+  // 최종 로그인 확정(공통) — 토큰 적용 후 메인 홈(SCR-HOME)으로 랜딩(v2.1.2).
+  // 회원가입 직후 흐름도 로그인 성공 경로를 공유하므로 동일하게 /home 으로 랜딩한다.
+  function completeLogin(res: LoginResponse) {
+    if (remember) localStorage.setItem(REMEMBER_KEY, email.trim());
+    else localStorage.removeItem(REMEMBER_KEY);
+    applyLogin(res);
+    setOtpChallenge(null);
+    navigate('/home');
+  }
+
+  async function handleLogin(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      // 2FA/잠금 적용 1단계 — status 로 분기.
+      const res = await authApi.secureLogin({ email, password });
+      if (res.status === 'OK' && res.login) {
+        completeLogin(res.login);
+      } else if (res.challengeToken) {
+        // OTP_REQUIRED(등록자 6자리) | OTP_ENROLL(미등록 등록 강제).
+        setOtpChallenge({
+          token: res.challengeToken,
+          mode: res.status === 'OTP_ENROLL' ? 'enroll' : 'verify',
+        });
+        setPhase('otp');
+      } else {
+        setError(t('login.errResponse'));
+      }
+    } catch (err) {
+      if (err instanceof ApiRequestError) {
+        // 잠금·미구현·자격오류 등 코드별 안내(계정 존재 여부 미노출).
+        if (err.code === 'ACCOUNT_LOCKED') {
+          setError(t('login.errLocked'));
+        } else if (err.code === 'NOT_IMPLEMENTED') {
+          setError(t('login.errNotImpl'));
+        } else {
+          setError(err.message);
+        }
+      } else {
+        setError(t('login.errGeneric'));
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (phase === 'otp' && otpChallenge) {
+    return (
+      <div className="kx-login">
+        <LoginSlides />
+        <section className="kx-login__panel">
+          <OtpChallengePanel
+            challengeToken={otpChallenge.token}
+            mode={otpChallenge.mode}
+            onSuccess={completeLogin}
+            onCancel={() => {
+              setOtpChallenge(null);
+              setPassword('');
+              setError(null);
+              setPhase('login');
+            }}
+          />
+          <p className="kx-login__copy">{t('login.copyright')}</p>
+        </section>
+      </div>
+    );
+  }
+
+  return (
+    <div className="kx-login">
+      {/* 좌측 55% 브랜드 패널 — 관리자 등록 슬라이드 캐러셀(페이드·5초·도트) */}
+      <LoginSlides />
+
+      {/* 우측 45% 로그인 카드 */}
+      <section className="kx-login__panel">
+        <div className="kx-login__topbar" style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <LanguageSwitcher variant="light" />
+        </div>
+        <div className="kx-login__card">
+          <div className="kx-login__logo">
+            <img
+              className="kx-login__logo-img"
+              src="/brand/kintex-wordmark.jpg"
+              alt="KINTEX"
+            />
+            <span className="kx-login__logo-suffix">{t('common.appSuffix')}</span>
+          </div>
+          <p className="kx-login__prod">{t('login.prodTagline')}</p>
+          <h2 className="kx-login__title">{t('login.title')}</h2>
+          <p className="kx-login__title-sub">{t('login.sub')}</p>
+
+          <form className="kx-login__form" onSubmit={handleLogin}>
+            <div className="kx-field">
+              <label htmlFor="email">{t('login.email')}</label>
+              <input
+                id="email"
+                type="email"
+                autoComplete="username"
+                placeholder={t('login.emailPh')}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div className="kx-field">
+              <label htmlFor="password">{t('login.password')}</label>
+              <input
+                id="password"
+                type="password"
+                autoComplete="current-password"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="kx-login__row">
+              <label className="kx-check" htmlFor="remember">
+                <input
+                  id="remember"
+                  type="checkbox"
+                  checked={remember}
+                  onChange={(e) => setRemember(e.target.checked)}
+                />
+                <span>{t('login.remember')}</span>
+              </label>
+              <button
+                type="button"
+                className="kx-login__text-link"
+                onClick={() => setForgotOpen(true)}
+              >
+                {t('login.forgot')}
+              </button>
+            </div>
+
+            {error && (
+              <p className="kx-login__error" role="alert">
+                {error}
+              </p>
+            )}
+
+            <Button type="submit" block disabled={submitting}>
+              {submitting ? t('login.submitting') : t('login.submit')}
+            </Button>
+          </form>
+
+          <p className="kx-login__signup-row">
+            {t('login.signupPrompt')}{' '}
+            <button
+              type="button"
+              className="kx-login__text-link"
+              onClick={() => setSignupOpen(true)}
+            >
+              {t('login.signup')}
+            </button>
+          </p>
+
+          <div className="kx-login__divider">
+            <span>{t('login.or')}</span>
+          </div>
+
+          <Button variant="secondary" block leadingIcon="🪪" type="button">
+            {t('login.internalLogin')}
+          </Button>
+
+          <button
+            className="kx-login__invite-link"
+            type="button"
+            onClick={() => setInviteOpen(true)}
+          >
+            {t('login.inviteLink')}
+          </button>
+        </div>
+        <p className="kx-login__copy">{t('login.copyright')}</p>
+      </section>
+
+      {inviteOpen && <InviteDialog onClose={() => setInviteOpen(false)} />}
+      {signupOpen && (
+        <SignupDialog
+          defaultEmail={email}
+          onClose={() => setSignupOpen(false)}
+          onDone={(e) => {
+            setSignupOpen(false);
+            setEmail(e);
+            setPassword('');
+          }}
+        />
+      )}
+      {forgotOpen && (
+        <ForgotPasswordDialog
+          defaultEmail={email}
+          onClose={() => setForgotOpen(false)}
+          onDone={(e) => {
+            setForgotOpen(false);
+            setEmail(e);
+            setPassword('');
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/login/LoginSlides.tsx b/src/frontend/src/screens/login/LoginSlides.tsx
new file mode 100644
index 0000000..f6871e9
--- /dev/null
+++ b/src/frontend/src/screens/login/LoginSlides.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useRef, useState } from 'react';
+import { loginSlideApi } from '../../api/endpoints';
+
+/** 슬라이드 1장(공개 DTO 부분집합) — 폴백도 같은 shape 사용. */
+interface Slide {
+  id: number;
+  imageUrl: string;
+  title: string;
+  caption: string | null;
+}
+
+/** API 실패/빈 응답 시 번들 기본 5종(시드와 동일 자산·문구). */
+const FALLBACK_SLIDES: Slide[] = [
+  {
+    id: -1,
+    imageUrl: '/login-slides/slide-1.png',
+    title: '아시아를 대표하는 전시컨벤션센터, KINTEX',
+    caption: '10만㎡ 전시 공간에서 펼쳐지는 무한한 비즈니스 기회를 만나보세요.',
+  },
+  {
+    id: -2,
+    imageUrl: '/login-slides/slide-2.png',
+    title: '신청서를 내는 순간, 시공 후 사진을 먼저 봅니다',
+    caption: 'AI가 부스 배치부터 시공 결과 시각화까지 전 과정을 자동으로 설계합니다.',
+  },
+  {
+    id: -3,
+    imageUrl: '/login-slides/slide-3.png',
+    title: '국내 최대 무주(無柱) 전시홀이 당신의 무대가 됩니다',
+    caption: '기둥 없는 대공간에서 어떤 규모의 전시도 자유롭게 연출하세요.',
+  },
+  {
+    id: -4,
+    imageUrl: '/login-slides/slide-4.png',
+    title: '회의부터 국제 컨벤션까지, 완벽한 비즈니스 공간',
+    caption: '최첨단 회의 시설과 전문 운영 인력이 성공적인 행사를 지원합니다.',
+  },
+  {
+    id: -5,
+    imageUrl: '/login-slides/slide-5.png',
+    title: '전시 운영의 모든 순간을 하나의 플랫폼에서',
+    caption: '부스 배선·전기·조명 설계와 현장 검수까지 데이터로 관리하세요.',
+  },
+];
+
+const INTERVAL_MS = 5000;
+
+/**
+ * SCR-01 로그인 좌측 브랜드 패널 — 이미지 캐러셀(페이드 전환·5초·인디케이터 도트).
+ * 슬라이드는 관리자 등록분(공개 API, 최신 5건)을 쓰고 실패 시 번들 기본 5종으로 폴백한다.
+ */
+export function LoginSlides() {
+  const [slides, setSlides] = useState<Slide[]>(FALLBACK_SLIDES);
+  const [index, setIndex] = useState(0);
+  const timerRef = useRef<number | null>(null);
+
+  // 공개 슬라이드 로드 — 실패/빈 목록이면 폴백 유지(로그인 화면은 항상 그려져야 함).
+  useEffect(() => {
+    const ctrl = new AbortController();
+    loginSlideApi
+      .publicList()
+      .then((list) => {
+        if (!ctrl.signal.aborted && list && list.length > 0) {
+          setSlides(list.map((s) => ({ id: s.id, imageUrl: s.imageUrl, title: s.title, caption: s.caption })));
+          setIndex(0);
+        }
+      })
+      .catch(() => {
+        /* 폴백 유지 */
+      });
+    return () => ctrl.abort();
+  }, []);
+
+  // 자동 로테이션 — 슬라이드 2장 이상일 때만.
+  useEffect(() => {
+    if (slides.length < 2) return;
+    timerRef.current = window.setInterval(
+      () => setIndex((i) => (i + 1) % slides.length),
+      INTERVAL_MS,
+    );
+    return () => {
+      if (timerRef.current != null) window.clearInterval(timerRef.current);
+    };
+  }, [slides.length]);
+
+  function goTo(i: number) {
+    setIndex(i);
+    // 수동 이동 시 타이머 리셋(바로 다시 넘어가는 어색함 방지)
+    if (timerRef.current != null) {
+      window.clearInterval(timerRef.current);
+      timerRef.current = window.setInterval(
+        () => setIndex((v) => (v + 1) % slides.length),
+        INTERVAL_MS,
+      );
+    }
+  }
+
+  const current = slides[index] ?? slides[0];
+
+  return (
+    <section className="kx-login__brand" aria-label="KINTEX 소개 슬라이드">
+      {slides.map((s, i) => (
+        <div
+          key={s.id}
+          className={`kx-login__slide ${i === index ? 'is-active' : ''}`}
+          style={{ backgroundImage: `url(${s.imageUrl})` }}
+          aria-hidden="true"
+        />
+      ))}
+      <div className="kx-login__brand-overlay" />
+      <div className="kx-login__brand-content">
+        <span className="kx-login__ai-cap">✦ KINTEX AI 전시관리</span>
+        <h1 className="kx-login__headline" key={`t-${current.id}`}>
+          {current.title}
+        </h1>
+        {current.caption && (
+          <p className="kx-login__sub" key={`c-${current.id}`}>
+            {current.caption}
+          </p>
+        )}
+        {slides.length > 1 && (
+          <div className="kx-login__dots" role="tablist" aria-label="슬라이드 선택">
+            {slides.map((s, i) => (
+              <button
+                key={s.id}
+                type="button"
+                role="tab"
+                aria-selected={i === index}
+                aria-label={`슬라이드 ${i + 1}`}
+                className={`kx-login__dot ${i === index ? 'is-active' : ''}`}
+                onClick={() => goTo(i)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/src/frontend/src/screens/login/OtpChallengePanel.tsx b/src/frontend/src/screens/login/OtpChallengePanel.tsx
new file mode 100644
index 0000000..a5b0b94
--- /dev/null
+++ b/src/frontend/src/screens/login/OtpChallengePanel.tsx
@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+import { authApi } from '../../api/endpoints';
+import { ApiRequestError } from '../../api/client';
+import { Button } from '../../components/ui/Button';
+import type { LoginResponse, OtpSetupResponse } from '../../api/types';
+
+/**
+ * 로그인 2단계 OTP 패널 — LoginPage 1단계 성공 후 표시.
+ *  - mode="verify" : 이미 OTP 등록된 사용자 → 6자리 코드만 입력.
+ *  - mode="enroll" : 필수 역할 미등록 → setup(QR·시크릿) 발급 후 6자리 확인·활성화.
+ * challengeToken 은 짧은 수명(5분)·1회성 프리오스 토큰(정식 JWT 아님).
+ */
+interface Props {
+  challengeToken: string;
+  mode: 'verify' | 'enroll';
+  onSuccess: (res: LoginResponse) => void;
+  onCancel: () => void;
+}
+
+export function OtpChallengePanel({ challengeToken, mode, onSuccess, onCancel }: Props) {
+  const [setup, setSetup] = useState<OtpSetupResponse | null>(null);
+  const [code, setCode] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [loadingSetup, setLoadingSetup] = useState(mode === 'enroll');
+
+  // 등록 강제 모드 — 진입 시 시크릿·QR 발급.
+  useEffect(() => {
+    if (mode !== 'enroll') return;
+    let alive = true;
+    (async () => {
+      try {
+        const res = await authApi.otpEnrollSetup(challengeToken);
+        if (alive) setSetup(res);
+      } catch (err) {
+        if (alive) setError(messageOf(err));
+      } finally {
+        if (alive) setLoadingSetup(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [mode, challengeToken]);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (code.length !== 6) return;
+    setError(null);
+    setBusy(true);
+    try {
+      const res =
+        mode === 'enroll'
+          ? await authApi.otpEnrollVerify(challengeToken, code)
+          : await authApi.otpVerify(challengeToken, code);
+      onSuccess(res);
+    } catch (err) {
+      setError(messageOf(err));
+      setCode('');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="kx-login__card">
+      <h2 className="kx-login__title">2차 인증</h2>
+      <p className="kx-login__title-sub">
+        {mode === 'enroll'
+          ? '보안 정책에 따라 OTP(Authenticator) 등록이 필요합니다.'
+          : 'Authenticator 앱에 표시된 6자리 코드를 입력하세요.'}
+      </p>
+
+      {mode === 'enroll' && (
+        <div className="kx-otp__enroll">
+          {loadingSetup && <p className="kx-login__title-sub">QR 발급 중…</p>}
+          {setup && (
+            <>
+              <ol className="kx-otp__steps">
+                <li>Google/Microsoft Authenticator 앱에서 아래 QR을 스캔하세요.</li>
+                <li>스캔이 안 되면 수동 키를 직접 입력하세요.</li>
+                <li>앱에 표시된 6자리 코드로 등록을 완료하세요.</li>
+              </ol>
+              <div className="kx-otp__qr">
+                <img src={setup.qrImageDataUri} alt="OTP QR" width={180} height={180} />
+              </div>
+              <div className="kx-otp__secret">
+                <span className="kx-otp__secret-label">수동 입력 키</span>
+                <code>{setup.secret}</code>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      <form className="kx-login__form" onSubmit={submit}>
+        <div className="kx-field">
+          <label htmlFor="otp-code">인증 코드 (6자리)</label>
+          <input
+            id="otp-code"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            maxLength={6}
+            placeholder="000000"
+            className="kx-otp__code-input"
+            value={code}
+            onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+            autoFocus
+          />
+        </div>
+
+        {error && (
+          <p className="kx-login__error" role="alert">
+            {error}
+          </p>
+        )}
+
+        <Button type="submit" block disabled={busy || code.length !== 6}>
+          {busy ? '확인 중…' : mode === 'enroll' ? '등록 완료 · 로그인' : '인증 · 로그인'}
+        </Button>
+        <button type="button" className="kx-login__text-link kx-otp__cancel" onClick={onCancel}>
+          ← 다시 로그인
+        </button>
+      </form>
+    </div>
+  );
+}
+
+function messageOf(err: unknown): string {
+  if (err instanceof ApiRequestError) {
+    if (err.code === 'OTP_INVALID') return '코드가 올바르지 않습니다. 다시 시도해 주세요.';
+    if (err.code === 'OTP_REQUIRED') return '인증 세션이 만료되었습니다. 다시 로그인해 주세요.';
+    return err.message;
+  }
+  return '인증 중 오류가 발생했습니다.';
+}
diff --git a/src/frontend/src/screens/login/OtpSetupPage.tsx b/src/frontend/src/screens/login/OtpSetupPage.tsx
new file mode 100644
index 0000000..b9f9667
--- /dev/null
+++ b/src/frontend/src/screens/login/OtpSetupPage.tsx
@@ -0,0 +1,168 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { authApi } from '../../api/endpoints';
+import { ApiRequestError } from '../../api/client';
+import { Button } from '../../components/ui/Button';
+import type { OtpSetupResponse } from '../../api/types';
+import './login.css';
+
+/**
+ * 2차 인증(Authenticator/TOTP) 관리 — 로그인 상태에서 접근(/otp-setup).
+ * 상태 조회 → 미등록이면 setup(QR)·6자리 confirm → 활성화. 등록 상태면 해제 가능.
+ */
+type Phase = 'loading' | 'idle' | 'setup' | 'enabled';
+
+export function OtpSetupPage() {
+  const navigate = useNavigate();
+  const [phase, setPhase] = useState<Phase>('loading');
+  const [data, setData] = useState<OtpSetupResponse | null>(null);
+  const [code, setCode] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const st = await authApi.otpStatus();
+        if (alive) setPhase(st.otpEnabled ? 'enabled' : 'idle');
+      } catch (err) {
+        if (alive) {
+          setError(messageOf(err));
+          setPhase('idle');
+        }
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  async function startSetup() {
+    setError(null);
+    setBusy(true);
+    try {
+      const res = await authApi.otpSetup();
+      setData(res);
+      setPhase('setup');
+    } catch (err) {
+      setError(messageOf(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function confirm() {
+    setError(null);
+    setBusy(true);
+    try {
+      await authApi.otpConfirm(code.trim());
+      setData(null);
+      setCode('');
+      setPhase('enabled');
+    } catch (err) {
+      setError(messageOf(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function disable() {
+    setError(null);
+    setBusy(true);
+    try {
+      await authApi.otpResetSelf();
+      setPhase('idle');
+    } catch (err) {
+      setError(messageOf(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="kx-otp-page">
+      <div className="kx-login__card">
+        <h2 className="kx-login__title">2차 인증 — Authenticator(OTP)</h2>
+        <p className="kx-login__title-sub">
+          Google·Microsoft Authenticator 등 OTP 앱으로 6자리 코드를 사용하는 2차 인증을 관리합니다.
+        </p>
+
+        {error && (
+          <p className="kx-login__error" role="alert">
+            {error}
+          </p>
+        )}
+
+        {phase === 'loading' && <p className="kx-login__title-sub">상태 확인 중…</p>}
+
+        {phase === 'idle' && (
+          <div className="kx-otp__enroll">
+            <p className="kx-login__title-sub">등록을 시작하면 QR 코드가 발급됩니다.</p>
+            <Button block disabled={busy} onClick={startSetup}>
+              {busy ? '발급 중…' : 'Authenticator 등록 시작'}
+            </Button>
+          </div>
+        )}
+
+        {phase === 'setup' && data && (
+          <div className="kx-otp__enroll">
+            <ol className="kx-otp__steps">
+              <li>Authenticator 앱에서 아래 QR을 스캔하세요.</li>
+              <li>스캔이 안 되면 수동 키를 직접 입력하세요.</li>
+              <li>앱에 표시된 6자리 코드를 입력해 확인하세요.</li>
+            </ol>
+            <div className="kx-otp__qr">
+              <img src={data.qrImageDataUri} alt="OTP QR" width={180} height={180} />
+            </div>
+            <div className="kx-otp__secret">
+              <span className="kx-otp__secret-label">수동 입력 키</span>
+              <code>{data.secret}</code>
+            </div>
+            <div className="kx-field">
+              <label htmlFor="otp-confirm">앱에 표시된 6자리 코드</label>
+              <input
+                id="otp-confirm"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                maxLength={6}
+                placeholder="000000"
+                className="kx-otp__code-input"
+                value={code}
+                onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+              />
+            </div>
+            <Button block disabled={busy || code.length !== 6} onClick={confirm}>
+              {busy ? '확인 중…' : '코드 확인 · 활성화'}
+            </Button>
+          </div>
+        )}
+
+        {phase === 'enabled' && (
+          <div className="kx-otp__enroll">
+            <p className="kx-otp__ok">2차 인증(Authenticator)이 활성화되어 있습니다.</p>
+            <Button variant="secondary" block disabled={busy} onClick={disable}>
+              {busy ? '처리 중…' : 'Authenticator 해제(이메일 인증으로 복귀)'}
+            </Button>
+          </div>
+        )}
+
+        <button
+          type="button"
+          className="kx-login__text-link kx-otp__cancel"
+          onClick={() => navigate(-1)}
+        >
+          ← 돌아가기
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function messageOf(err: unknown): string {
+  if (err instanceof ApiRequestError) {
+    if (err.code === 'OTP_INVALID') return '코드가 올바르지 않습니다. 다시 시도해 주세요.';
+    return err.message;
+  }
+  return 'OTP 처리 중 오류가 발생했습니다.';
+}
diff --git a/src/frontend/src/screens/login/SignupDialog.tsx b/src/frontend/src/screens/login/SignupDialog.tsx
new file mode 100644
index 0000000..85b7241
--- /dev/null
+++ b/src/frontend/src/screens/login/SignupDialog.tsx
@@ -0,0 +1,196 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { authApi } from '../../api/endpoints';
+import { ApiRequestError } from '../../api/client';
+import { Button } from '../../components/ui/Button';
+import { evaluatePassword } from './passwordStrength';
+import './login.css';
+
+/**
+ * 회원가입 (SCR-01) — 이메일·이름·비밀번호(+확인)·회사명(선택)·초대코드(선택).
+ * POST /api/auth/register → 성공 시 상태 안내(활성/승인대기) 후 로그인 유도.
+ * 스켈레톤(501/404)이면 "준비 중입니다" degraded 안내.
+ */
+export function SignupDialog({
+  onClose,
+  onDone,
+  defaultEmail = '',
+}: {
+  onClose: () => void;
+  /** 회원가입 성공 후 로그인 화면으로 되돌아가며 이메일 프리필 */
+  onDone: (email: string) => void;
+  defaultEmail?: string;
+}) {
+  const { t } = useTranslation();
+  const [email, setEmail] = useState(defaultEmail);
+  const [displayName, setDisplayName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [companyName, setCompanyName] = useState('');
+  const [inviteCode, setInviteCode] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const hint = evaluatePassword(password);
+  const mismatch = confirm.length > 0 && password !== confirm;
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    if (password !== confirm) {
+      setError(t('signup.mismatch'));
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const res = await authApi.register({
+        email: email.trim(),
+        displayName: displayName.trim(),
+        password,
+        companyName: companyName.trim() || undefined,
+        inviteCode: inviteCode.trim() || undefined,
+      });
+      const pending = res?.status && res.status !== 'ACTIVE';
+      setNotice(
+        res?.message ?? (pending ? t('signup.noticePending') : t('signup.noticeActive')),
+      );
+    } catch (err) {
+      if (err instanceof ApiRequestError) {
+        if (err.code === 'NOT_IMPLEMENTED' || err.httpStatus === 404) {
+          setError(t('signup.errNotImpl'));
+        } else if (err.code === 'CONFLICT') {
+          setError(t('signup.errConflict'));
+        } else {
+          setError(err.message);
+        }
+      } else {
+        setError(t('signup.errGeneric'));
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="kx-modal" role="dialog" aria-modal="true" aria-labelledby="signup-title">
+      <div className="kx-modal__backdrop" onClick={onClose} />
+      <div className="kx-modal__panel">
+        {notice ? (
+          <div className="kx-modal__blocked" role="status">
+            <span className="kx-modal__blocked-icon kx-modal__ok-icon" aria-hidden="true">
+              ✓
+            </span>
+            <h3 id="signup-title">{t('signup.doneTitle')}</h3>
+            <p>{notice}</p>
+            <div className="kx-modal__actions">
+              <Button onClick={() => onDone(email.trim())}>{t('signup.goLogin')}</Button>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={submit}>
+            <h3 id="signup-title" className="kx-modal__title">
+              {t('signup.title')}
+            </h3>
+            <p className="kx-modal__desc">{t('signup.desc')}</p>
+
+            <div className="kx-field">
+              <label htmlFor="su-email">{t('signup.email')}</label>
+              <input
+                id="su-email"
+                type="email"
+                autoComplete="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder={t('signup.emailPh')}
+                required
+              />
+            </div>
+            <div className="kx-field">
+              <label htmlFor="su-name">{t('signup.name')}</label>
+              <input
+                id="su-name"
+                autoComplete="name"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                placeholder={t('signup.namePh')}
+                required
+              />
+            </div>
+            <div className="kx-field">
+              <label htmlFor="su-pw">{t('signup.password')}</label>
+              <input
+                id="su-pw"
+                type="password"
+                autoComplete="new-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder={t('signup.passwordPh')}
+                aria-describedby="su-pw-hint"
+                required
+              />
+              <div className="kx-pw" id="su-pw-hint" aria-live="polite">
+                <div className={`kx-pw__bar kx-pw__bar--${hint.level}`}>
+                  {[0, 1, 2].map((i) => (
+                    <span key={i} className={i < hint.score ? 'is-on' : ''} />
+                  ))}
+                </div>
+                {hint.label && <span className="kx-pw__label">{hint.label}</span>}
+              </div>
+            </div>
+            <div className="kx-field">
+              <label htmlFor="su-pw2">{t('signup.password2')}</label>
+              <input
+                id="su-pw2"
+                type="password"
+                autoComplete="new-password"
+                value={confirm}
+                onChange={(e) => setConfirm(e.target.value)}
+                placeholder={t('signup.password2Ph')}
+                aria-invalid={mismatch}
+                required
+              />
+              {mismatch && (
+                <span className="kx-pw__label kx-pw__label--error">{t('signup.mismatch')}</span>
+              )}
+            </div>
+            <div className="kx-field">
+              <label htmlFor="su-company">{t('signup.company')}</label>
+              <input
+                id="su-company"
+                autoComplete="organization"
+                value={companyName}
+                onChange={(e) => setCompanyName(e.target.value)}
+                placeholder={t('signup.companyPh')}
+              />
+            </div>
+            <div className="kx-field">
+              <label htmlFor="su-invite">{t('signup.invite')}</label>
+              <input
+                id="su-invite"
+                value={inviteCode}
+                onChange={(e) => setInviteCode(e.target.value)}
+                placeholder={t('signup.invitePh')}
+              />
+            </div>
+
+            {error && (
+              <p className="kx-login__error" role="alert">
+                {error}
+              </p>
+            )}
+
+            <div className="kx-modal__actions">
+              <Button variant="ghost" type="button" onClick={onClose}>
+                {t('signup.cancel')}
+              </Button>
+              <Button type="submit" disabled={submitting || mismatch}>
+                {submitting ? t('signup.submitting') : t('signup.submit')}
+              </Button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/login/login.css b/src/frontend/src/screens/login/login.css
new file mode 100644
index 0000000..584c85c
--- /dev/null
+++ b/src/frontend/src/screens/login/login.css
@@ -0,0 +1,567 @@
+/* ── SCR-01 로그인 ── */
+.kx-login {
+  display: flex;
+  min-height: 100vh;
+}
+
+.kx-login__brand {
+  position: relative;
+  width: 55%;
+  display: none;
+  background: #0a2a47;
+  overflow: hidden;
+}
+@media (min-width: 1024px) {
+  .kx-login__brand {
+    display: block;
+  }
+}
+
+/* 캐러셀 슬라이드 — 페이드 전환(겹쳐 두고 opacity 토글) */
+.kx-login__slide {
+  position: absolute;
+  inset: 0;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  opacity: 0;
+  transition: opacity 0.9s ease-in-out;
+}
+.kx-login__slide.is-active {
+  opacity: 1;
+}
+
+/* 인디케이터 도트 */
+.kx-login__dots {
+  display: flex;
+  gap: 8px;
+  margin-top: var(--space-2);
+}
+.kx-login__dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  transition: background-color 0.2s ease, width 0.2s ease;
+}
+.kx-login__dot.is-active {
+  width: 22px;
+  background: var(--color-white);
+}
+.kx-login__dot:focus-visible {
+  outline: 2px solid var(--color-white);
+  outline-offset: 2px;
+}
+
+/* 문구 페이드 인 — 슬라이드 전환 시 key 교체로 재생 */
+.kx-login__headline,
+.kx-login__sub {
+  animation: kx-login-copy-in 0.7s ease both;
+}
+@keyframes kx-login-copy-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.kx-login__brand-overlay {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(to top, rgba(2, 20, 40, 0.88) 0%, rgba(2, 20, 40, 0) 58%),
+    linear-gradient(to right, rgba(0, 76, 134, 0.8) 0%, rgba(0, 76, 134, 0.48) 100%);
+}
+.kx-login__brand-content {
+  position: absolute;
+  bottom: var(--space-8);
+  left: var(--space-8);
+  right: var(--space-8);
+  max-width: 640px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+.kx-login__ai-cap {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: var(--radius-pill);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.1);
+  color: #d3c7ff;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  backdrop-filter: blur(4px);
+}
+.kx-login__headline {
+  color: var(--color-white);
+  font-size: var(--fs-display);
+  line-height: var(--lh-display);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+@media (min-width: 1280px) {
+  .kx-login__headline {
+    font-size: 36px;
+    line-height: 44px;
+  }
+}
+.kx-login__sub {
+  color: rgba(255, 255, 255, 0.82);
+  font-size: var(--fs-h3);
+  line-height: var(--lh-h3);
+}
+
+.kx-login__panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-5);
+  background: var(--color-white);
+  position: relative;
+}
+.kx-login__card {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+.kx-login__logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  justify-content: center;
+}
+.kx-login__logo-mark {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 18px;
+}
+.kx-login__logo-text {
+  font-size: var(--fs-h2);
+  font-weight: 700;
+  color: var(--color-primary-700);
+}
+.kx-login__logo-img {
+  height: 30px;
+  width: auto;
+  display: block;
+}
+.kx-login__logo-suffix {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  padding-left: 2px;
+  border-left: 1px solid var(--color-neutral-200);
+  padding-left: 10px;
+  margin-left: 4px;
+}
+.kx-login__prod {
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  color: var(--color-neutral-500);
+  text-align: center;
+  margin: -8px 0 0;
+}
+.kx-login__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  text-align: center;
+}
+.kx-login__title-sub {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  text-align: center;
+  margin-top: -12px;
+}
+.kx-login__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-login__error {
+  color: var(--color-error);
+  font-size: var(--fs-caption);
+  margin: -4px 0 0;
+}
+.kx-login__divider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  color: var(--color-neutral-500);
+  font-size: var(--fs-caption);
+}
+.kx-login__divider::before,
+.kx-login__divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-neutral-200);
+}
+.kx-login__invite-link {
+  background: none;
+  border: none;
+  color: var(--color-primary-600);
+  font-size: var(--fs-body);
+  font-weight: 500;
+  text-align: center;
+}
+.kx-login__invite-link:hover {
+  color: var(--color-primary-700);
+}
+
+/* 아이디 기억 / 비밀번호 찾기 행 */
+.kx-login__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: -4px;
+}
+.kx-check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+  user-select: none;
+}
+.kx-check input {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-primary-600);
+  cursor: pointer;
+}
+.kx-login__text-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--color-primary-600);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  cursor: pointer;
+}
+.kx-login__text-link:hover {
+  color: var(--color-primary-700);
+  text-decoration: underline;
+}
+.kx-login__text-link:focus-visible {
+  outline: 2px solid var(--color-primary-600);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+.kx-login__signup-row {
+  text-align: center;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-login__signup-row .kx-login__text-link {
+  font-size: var(--fs-caption);
+}
+
+/* 비밀번호 강도 힌트 */
+.kx-pw {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: 2px;
+}
+.kx-pw__bar {
+  display: inline-flex;
+  gap: 4px;
+}
+.kx-pw__bar span {
+  width: 26px;
+  height: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-200);
+  transition: background-color 0.15s ease;
+}
+.kx-pw__bar--weak span.is-on {
+  background: var(--color-error);
+}
+.kx-pw__bar--fair span.is-on {
+  background: var(--color-warning, #d97706);
+}
+.kx-pw__bar--strong span.is-on {
+  background: var(--color-success, #16a34a);
+}
+.kx-pw__label {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-pw__label--error {
+  color: var(--color-error);
+}
+
+/* 성공 아이콘(회원가입/재설정 완료) */
+.kx-modal__ok-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-pill);
+  background: var(--color-success, #16a34a);
+  color: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  line-height: 1;
+}
+.kx-modal__blocked .kx-modal__ok-icon + h3 {
+  color: var(--color-neutral-900);
+}
+.kx-login__copy {
+  position: absolute;
+  bottom: var(--space-5);
+  color: var(--color-neutral-500);
+  font-size: 11px;
+}
+
+/* ── 공통 필드 ── */
+.kx-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-field label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+.kx-field input {
+  height: 44px;
+  padding: 0 var(--space-4);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  background: var(--color-white);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.kx-field input:focus {
+  outline: none;
+  border-color: var(--color-primary-600);
+  box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.15);
+}
+
+/* ── 워크스페이스 선택 ── */
+.kx-ws {
+  min-height: 100vh;
+  background: var(--color-neutral-050);
+  display: flex;
+  justify-content: center;
+  padding: var(--space-8) var(--space-5);
+}
+.kx-ws__inner {
+  width: 100%;
+  max-width: 960px;
+}
+.kx-ws__header {
+  margin-bottom: var(--space-6);
+}
+.kx-ws__header h1 {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-ws__header p {
+  color: var(--color-neutral-500);
+  margin-top: var(--space-2);
+}
+.kx-ws__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-5);
+}
+.kx-ws__card {
+  text-align: left;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+.kx-ws__card:hover {
+  border-color: var(--color-primary-600);
+  box-shadow: var(--shadow-level2);
+}
+.kx-ws__card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-2);
+}
+.kx-ws__card-title {
+  font-size: var(--fs-h3);
+  line-height: var(--lh-h3);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-ws__card-meta {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-ws__card-hall {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+}
+.kx-ws__invite-row {
+  margin-top: var(--space-6);
+  display: flex;
+  justify-content: center;
+}
+
+/* ── 모달 ── */
+.kx-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+}
+.kx-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(16, 24, 40, 0.45);
+  backdrop-filter: blur(2px);
+}
+.kx-modal__panel {
+  position: relative;
+  width: 100%;
+  max-width: 440px;
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  padding: var(--space-6);
+}
+.kx-modal__title {
+  font-size: var(--fs-h2);
+  line-height: var(--lh-h2);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  margin-bottom: var(--space-2);
+}
+.kx-modal__desc {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin-bottom: var(--space-5);
+}
+.kx-modal__panel .kx-field {
+  margin-bottom: var(--space-4);
+}
+.kx-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  margin-top: var(--space-5);
+}
+.kx-modal__blocked {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-modal__blocked-icon {
+  font-size: 40px;
+}
+.kx-modal__blocked h3 {
+  font-size: var(--fs-h2);
+  font-weight: 700;
+  color: var(--color-error);
+}
+.kx-modal__blocked p {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+
+/* ── 2차 인증(OTP) 패널 ─────────────────────────────────────────── */
+.kx-otp-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  background: var(--color-neutral-050);
+}
+.kx-otp__enroll {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+.kx-otp__steps {
+  margin: 0;
+  padding-left: 18px;
+  font-size: var(--fs-caption);
+  line-height: 1.8;
+  color: var(--color-neutral-700);
+}
+.kx-otp__qr {
+  text-align: center;
+}
+.kx-otp__qr img {
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+  background: var(--color-white);
+  padding: 8px;
+}
+.kx-otp__secret {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.kx-otp__secret-label {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-otp__secret code {
+  display: block;
+  word-break: break-all;
+  background: var(--color-neutral-050);
+  border: 1px solid var(--color-neutral-200);
+  color: var(--color-neutral-900);
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-size: var(--fs-caption);
+}
+.kx-otp__code-input {
+  letter-spacing: 6px;
+  text-align: center;
+  font-size: 20px;
+}
+.kx-otp__ok {
+  font-size: var(--fs-body);
+  color: var(--color-primary-700);
+}
+.kx-otp__cancel {
+  align-self: center;
+  margin-top: var(--space-2);
+}
diff --git a/src/frontend/src/screens/login/passwordStrength.ts b/src/frontend/src/screens/login/passwordStrength.ts
new file mode 100644
index 0000000..fbd28c0
--- /dev/null
+++ b/src/frontend/src/screens/login/passwordStrength.ts
@@ -0,0 +1,33 @@
+/*
+ * 비밀번호 강도 힌트 — 로컬 평가(길이 + 문자군). 백엔드 정책과 별개의 UX 보조.
+ * design.md 토큰: level별 색상은 login.css의 .kx-pw-* 클래스가 소유.
+ */
+export type PasswordStrength = 'empty' | 'weak' | 'fair' | 'strong';
+
+export interface PasswordHint {
+  level: PasswordStrength;
+  /** 0..3 채워진 막대 수 */
+  score: number;
+  label: string;
+}
+
+export function evaluatePassword(pw: string): PasswordHint {
+  if (!pw) return { level: 'empty', score: 0, label: '' };
+
+  let classes = 0;
+  if (/[a-z]/.test(pw)) classes += 1;
+  if (/[A-Z]/.test(pw)) classes += 1;
+  if (/[0-9]/.test(pw)) classes += 1;
+  if (/[^A-Za-z0-9]/.test(pw)) classes += 1;
+
+  const longEnough = pw.length >= 8;
+  const veryLong = pw.length >= 12;
+
+  if (!longEnough || classes <= 1) {
+    return { level: 'weak', score: 1, label: '약함 · 8자 이상 + 영문·숫자·기호 조합 권장' };
+  }
+  if (classes >= 3 && veryLong) {
+    return { level: 'strong', score: 3, label: '강함 · 안전한 비밀번호입니다' };
+  }
+  return { level: 'fair', score: 2, label: '보통 · 12자 이상이면 더 안전합니다' };
+}
diff --git a/src/frontend/src/screens/marketing/EdmCampaignPage.tsx b/src/frontend/src/screens/marketing/EdmCampaignPage.tsx
new file mode 100644
index 0000000..40d9ac9
--- /dev/null
+++ b/src/frontend/src/screens/marketing/EdmCampaignPage.tsx
@@ -0,0 +1,407 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { AiLabel } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconImage, IconPlus, IconSpark } from '../../components/ui/icons';
+import { ApiRequestError } from '../../api/client';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { CAMPAIGN_STATUS_LABEL, CAMPAIGNS, SEGMENTS, type CampaignStatus } from './sampleMarketing';
+import { marketingApi, type CampaignDto } from './marketingApi';
+import './marketing.css';
+
+/*
+ * SCR-33 EDM·캠페인 관리 (M12). Stitch scr_33_edm_campaign 이식.
+ * 정상 경로: GET /api/events/{eventId}/campaigns (목록) · POST /campaigns (생성 — 발송 미구현, status 전이만).
+ * KPI 는 캠페인 목록에서 파생. 폴백: 오프라인 강등 시 sampleMarketing.CAMPAIGNS.
+ * ★ 정보통신망법 수신동의·수신거부 준수 표기 상시 노출. 세그먼트 규모는 집계 힌트(관람객 PII 미포함).
+ */
+export function EdmCampaignPage() {
+  const { t } = useTranslation();
+  const eventId = useResolvedEventId();
+  const queryClient = useQueryClient();
+  const [filter, setFilter] = useState<'all' | 'active' | 'done'>('all');
+  const [segments, setSegments] = useState<Record<string, boolean>>(
+    Object.fromEntries(SEGMENTS.map((s) => [s.id, s.defaultOn])),
+  );
+  const [schedule, setSchedule] = useState<'now' | 'later'>('now');
+  const [name, setName] = useState('');
+  const [scheduledAt, setScheduledAt] = useState('');
+
+  const q = useQuery({
+    queryKey: ['campaigns', eventId],
+    queryFn: () => marketingApi.campaigns(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const degraded = isDegradable(q.error);
+  const campaigns: CampaignDto[] = q.data ?? (degraded ? SAMPLE_CAMPAIGNS : []);
+  const hardError = q.isError && !degraded;
+
+  const createMut = useMutation({
+    mutationFn: (body: Parameters<typeof marketingApi.createCampaign>[1]) =>
+      marketingApi.createCampaign(eventId as string, body),
+    onSuccess: () => {
+      setName('');
+      setScheduledAt('');
+      queryClient.invalidateQueries({ queryKey: ['campaigns', eventId] });
+    },
+  });
+
+  const [sendMsg, setSendMsg] = useState<string | null>(null);
+  const sendMut = useMutation({
+    mutationFn: (id: string) => marketingApi.sendCampaign(eventId as string, id),
+    onSuccess: (res) => {
+      const n = res.sentCount.toLocaleString();
+      setSendMsg(
+        res.mailEnabled
+          ? t('marketing.sentDone', { n })
+          : t('marketing.sentDisabled', { n }),
+      );
+      queryClient.invalidateQueries({ queryKey: ['campaigns', eventId] });
+    },
+    onError: () => setSendMsg(t('marketing.sendFail')),
+  });
+
+  function confirmSend(c: CampaignDto) {
+    if (sendMut.isPending) return;
+    const ok = window.confirm(t('marketing.confirm', { name: c.name }));
+    if (ok) {
+      setSendMsg(null);
+      sendMut.mutate(c.id);
+    }
+  }
+
+  const audience = useMemo(
+    () => SEGMENTS.filter((s) => segments[s.id]).reduce((sum, s) => sum + s.count, 0),
+    [segments],
+  );
+
+  const rows = campaigns.filter((c) =>
+    filter === 'all'
+      ? true
+      : filter === 'done'
+        ? c.status === 'done'
+        : c.status === 'scheduled' || c.status === 'sending',
+  );
+
+  const kpis = [
+    { label: '전체 캠페인', value: String(campaigns.length), unit: '개', tone: 'primary' as const },
+    { label: '진행중', value: String(campaigns.filter((c) => c.status === 'scheduled' || c.status === 'sending').length), unit: '개', tone: 'ai' as const },
+    { label: '완료', value: String(campaigns.filter((c) => c.status === 'done').length), unit: '개', tone: 'success' as const },
+    { label: '초안', value: String(campaigns.filter((c) => c.status === 'draft').length), unit: '개', tone: 'warning' as const },
+  ];
+
+  const canCreate = !!eventId && name.trim().length > 0 && !createMut.isPending;
+  function submitCampaign() {
+    if (!canCreate) return;
+    createMut.mutate({
+      name: name.trim(),
+      audience,
+      scheduleType: schedule,
+      scheduledAt: schedule === 'later' ? scheduledAt : undefined,
+    });
+  }
+
+  return (
+    <div className="kx-mkt">
+      <header className="kx-mkt__head">
+        <div>
+          <h1 className="kx-mkt__title">EDM · 캠페인 관리</h1>
+          <p className="kx-mkt__subtitle">세그먼트 발송 · 성과 추적 · AI 카피 최적화</p>
+        </div>
+        <div className="kx-mkt__head-actions">
+          {degraded && (
+            <span className="kx-vis__degraded" title="캠페인 API 미연결 — 시연 데이터">오프라인 — 샘플</span>
+          )}
+          <Button leadingIcon={<IconPlus size={16} />} onClick={submitCampaign} disabled={!canCreate}>
+            새 캠페인
+          </Button>
+        </div>
+      </header>
+
+      {!eventId && (
+        <EmptyState title="행사를 선택해 주세요" description="캠페인을 조회할 행사가 지정되지 않았습니다." />
+      )}
+
+      {eventId && q.isLoading && !degraded && (
+        <div style={{ display: 'grid', gap: 16 }}>
+          <Skeleton height={92} radius={12} />
+          <Skeleton height={420} radius={12} />
+        </div>
+      )}
+
+      {hardError && <ErrorState message="캠페인을 불러오지 못했습니다." onRetry={() => q.refetch()} />}
+
+      {eventId && (!q.isLoading || degraded) && !hardError && (
+        <>
+          <section className="kx-mkt__kpis" aria-label="캠페인 핵심 지표">
+            {kpis.map((k) => (
+              <div key={k.label} className={`kx-kpi kx-kpi--accent-${k.tone}`}>
+                <span className="kx-kpi__label">{k.label}</span>
+                <strong className="kx-kpi__value tnum">
+                  {k.value}
+                  {k.unit && <span className="kx-kpi__unit">{k.unit}</span>}
+                </strong>
+              </div>
+            ))}
+          </section>
+
+          {createMut.isError && (
+            <div className="kx-vis__degraded" role="alert" style={{ marginBottom: 12 }}>
+              캠페인 생성에 실패했습니다. 권한 또는 입력값을 확인해 주세요.
+            </div>
+          )}
+
+          {sendMsg && (
+            <div className="kx-mkt__send-msg" role="status" style={{ marginBottom: 12 }}>
+              {sendMsg}
+            </div>
+          )}
+
+          <div className="kx-mkt__split">
+            {/* 캠페인 리스트 */}
+            <section className="kx-mkt__list-col" aria-label="캠페인 목록">
+              <div className="kx-mkt__list-head">
+                <h2>캠페인 목록</h2>
+                <div className="kx-mkt__tabs" role="tablist" aria-label="상태 필터">
+                  {(['all', 'active', 'done'] as const).map((t) => (
+                    <button
+                      key={t}
+                      role="tab"
+                      aria-selected={filter === t}
+                      className={`kx-chip ${filter === t ? 'is-active' : ''}`}
+                      onClick={() => setFilter(t)}
+                    >
+                      {t === 'all' ? '전체' : t === 'active' ? '진행중' : '완료'}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <ul className="kx-mkt__campaigns">
+                {rows.map((c) => (
+                  <CampaignRow
+                    key={c.id}
+                    campaign={c}
+                    onSend={() => confirmSend(c)}
+                    sending={sendMut.isPending && sendMut.variables === c.id}
+                  />
+                ))}
+                {rows.length === 0 && (
+                  <li>
+                    <EmptyState title="캠페인이 없습니다" description="우측 빌더에서 새 캠페인을 생성하세요." />
+                  </li>
+                )}
+              </ul>
+            </section>
+
+            {/* 캠페인 빌더 */}
+            <aside className="kx-mkt__builder" aria-label="캠페인 빌더">
+              <div className="kx-card">
+                <div className="kx-card__head">
+                  <h2>캠페인 빌더</h2>
+                  <AiLabel>AI 최적화</AiLabel>
+                </div>
+
+                <p className="kx-mkt__field-label">캠페인 이름</p>
+                <input
+                  type="text"
+                  className="kx-mkt__datetime"
+                  aria-label="캠페인 이름"
+                  placeholder="예: 2026 스마트팩토리 사전등록 안내"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                />
+
+                <p className="kx-mkt__field-label">대상 세그먼트</p>
+                <div className="kx-mkt__segments">
+                  {SEGMENTS.map((s) => (
+                    <label key={s.id} className="kx-mkt__segment">
+                      <input
+                        type="checkbox"
+                        checked={!!segments[s.id]}
+                        onChange={(e) => setSegments((prev) => ({ ...prev, [s.id]: e.target.checked }))}
+                      />
+                      <span>{s.label}</span>
+                      <span className="kx-mkt__segment-count tnum">{s.count.toLocaleString()}명</span>
+                    </label>
+                  ))}
+                </div>
+                <p className="kx-mkt__field-label">대상 규모: <strong className="tnum">{audience.toLocaleString()}명</strong> (수신동의자 한정)</p>
+
+                <div className="kx-mkt__ai-box">
+                  <div className="kx-mkt__ai-box-head">
+                    <span>AI 최적화</span>
+                    <IconSpark size={16} />
+                  </div>
+                  <p>세그먼트 성향을 분석해 오픈율이 가장 높을 카피와 발송 시간을 제안합니다.</p>
+                  <Button variant="ai" block leadingIcon={<IconSpark size={16} />}>
+                    AI 카피 초안 생성
+                  </Button>
+                </div>
+
+                <p className="kx-mkt__field-label">메인 이미지 에셋</p>
+                <button type="button" className="kx-mkt__image-slot">
+                  <IconImage size={28} />
+                  <span>나노바나나 예상 이미지 삽입</span>
+                </button>
+
+                <p className="kx-mkt__field-label">발송 설정</p>
+                <div className="kx-mkt__schedule">
+                  <div className="kx-seg" role="tablist" aria-label="발송 시점">
+                    <button
+                      role="tab"
+                      aria-selected={schedule === 'now'}
+                      className={`kx-seg__btn ${schedule === 'now' ? 'is-active' : ''}`}
+                      onClick={() => setSchedule('now')}
+                    >
+                      즉시 발송
+                    </button>
+                    <button
+                      role="tab"
+                      aria-selected={schedule === 'later'}
+                      className={`kx-seg__btn ${schedule === 'later' ? 'is-active' : ''}`}
+                      onClick={() => setSchedule('later')}
+                    >
+                      예약 발송
+                    </button>
+                  </div>
+                  {schedule === 'later' && (
+                    <input
+                      type="datetime-local"
+                      className="kx-mkt__datetime"
+                      aria-label="예약 발송 일시"
+                      value={scheduledAt}
+                      onChange={(e) => setScheduledAt(e.target.value)}
+                    />
+                  )}
+                </div>
+
+                <div className="kx-mkt__preview">
+                  <div className="kx-mkt__preview-head">미리보기</div>
+                  <div className="kx-mkt__preview-body">
+                    <div className="kx-mkt__preview-banner">메인 배너 이미지 영역</div>
+                    <p className="kx-mkt__preview-title">{name.trim() || '2026 KINTEX 스마트팩토리 엑스포에 초대합니다'}</p>
+                    <p className="kx-mkt__preview-text">
+                      안녕하세요, 고객님. KINTEX가 제안하는 미래 제조 혁신의 현장으로 귀하를 정중히 모십니다.
+                    </p>
+                    <footer className="kx-mkt__preview-foot">
+                      <p>본 메일은 수신동의를 하신 고객님께 발송되었습니다.</p>
+                      <span className="kx-mkt__preview-links">
+                        <a href="#unsubscribe" onClick={(e) => e.preventDefault()}>수신거부</a>
+                        <span>정보통신망법 수신동의 준수</span>
+                      </span>
+                    </footer>
+                  </div>
+                </div>
+
+                <Button block onClick={submitCampaign} disabled={!canCreate}>
+                  {createMut.isPending ? '생성 중…' : schedule === 'later' ? '예약 캠페인 등록' : '캠페인 초안 저장'}
+                </Button>
+                <p className="kx-vis__ai-note" style={{ marginTop: 8 }}>
+                  실제 발송(게이트웨이 연동)은 후속 단계에서 제공됩니다 — 현재는 캠페인 등록·상태 관리만 수행합니다.
+                </p>
+              </div>
+            </aside>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function CampaignRow({
+  campaign: c,
+  onSend,
+  sending,
+}: {
+  campaign: CampaignDto;
+  onSend?: () => void;
+  sending?: boolean;
+}) {
+  const { t } = useTranslation();
+  const status = normalizeStatus(c.status);
+  // 발송 가능 상태 = 초안·예약(발송중·완료는 불가). 봉인/중복 발송 방지는 서버가 최종 강제.
+  const canSend = status === 'draft' || status === 'scheduled';
+  return (
+    <li className="kx-mkt__campaign">
+      <div className="kx-mkt__campaign-main">
+        <span className={`kx-mkt__campaign-icon is-${status}`} aria-hidden="true">
+          <StatusGlyph status={status} />
+        </span>
+        <div className="kx-mkt__campaign-info">
+          <div className="kx-mkt__campaign-top">
+            <span className={`kx-mkt__cpill is-${status}`}>{CAMPAIGN_STATUS_LABEL[status]}</span>
+            <h3>{c.name}</h3>
+          </div>
+          <div className="kx-mkt__campaign-meta">
+            <span>대상: {c.audience.toLocaleString()}명</span>
+            <span className="kx-mkt__dot-sep" aria-hidden="true" />
+            <span>{c.meta ?? '-'}</span>
+          </div>
+        </div>
+      </div>
+      <div className="kx-mkt__campaign-metrics">
+        <div>
+          <span className="kx-mkt__metric-k">오픈율</span>
+          <strong>{c.openRate ?? '-'}</strong>
+        </div>
+        <div>
+          <span className="kx-mkt__metric-k">클릭율</span>
+          <strong>{c.clickRate ?? '-'}</strong>
+        </div>
+        {canSend && onSend && (
+          <Button variant="primary" onClick={onSend} disabled={sending}>
+            {sending ? t('marketing.sending') : t('marketing.sendBtn')}
+          </Button>
+        )}
+      </div>
+    </li>
+  );
+}
+
+const KNOWN_STATUS: CampaignStatus[] = ['draft', 'scheduled', 'sending', 'done'];
+function normalizeStatus(s: string): CampaignStatus {
+  return (KNOWN_STATUS as string[]).includes(s) ? (s as CampaignStatus) : 'draft';
+}
+
+function StatusGlyph({ status }: { status: CampaignStatus }) {
+  const common = { fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
+  return (
+    <svg width={20} height={20} viewBox="0 0 24 24" aria-hidden="true">
+      {status === 'scheduled' ? (
+        <>
+          <circle cx="12" cy="12" r="9" {...common} />
+          <path d="M12 7v5l3 2" {...common} />
+        </>
+      ) : status === 'done' ? (
+        <path d="M4 12l5 5L20 6" {...common} />
+      ) : (
+        <>
+          <path d="M4 6h16v12H4z" {...common} />
+          <path d="M4 7l8 6 8-6" {...common} />
+        </>
+      )}
+    </svg>
+  );
+}
+
+/** 폴백 캠페인(오프라인 강등 시) — sampleMarketing.CAMPAIGNS 파생. */
+const SAMPLE_CAMPAIGNS: CampaignDto[] = CAMPAIGNS.map((c) => ({
+  id: c.id,
+  name: c.name,
+  status: c.status,
+  audience: c.audience,
+  meta: c.meta,
+  openRate: c.openRate,
+  clickRate: c.clickRate,
+}));
+
+function isDegradable(error: unknown): boolean {
+  return (
+    error instanceof ApiRequestError &&
+    (error.code === 'NETWORK' || error.code === 'NOT_FOUND' || error.code === 'NOT_IMPLEMENTED')
+  );
+}
diff --git a/src/frontend/src/screens/marketing/SponsorshipPage.tsx b/src/frontend/src/screens/marketing/SponsorshipPage.tsx
new file mode 100644
index 0000000..d81771e
--- /dev/null
+++ b/src/frontend/src/screens/marketing/SponsorshipPage.tsx
@@ -0,0 +1,255 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '../../components/ui/Button';
+import { DdayChip } from '../../components/ui/Badge';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconArrowRight, IconCheck, IconPlus } from '../../components/ui/icons';
+import { ApiRequestError } from '../../api/client';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import {
+  FULFILLMENT,
+  SPONSOR_KPIS,
+  SPONSOR_STATUS_LABEL,
+  SPONSOR_TIERS,
+  SPONSORS,
+  type SponsorContractStatus,
+} from './sampleMarketing';
+import { marketingApi, type SponsorDto, type SponsorshipViewDto, type TierDto } from './marketingApi';
+import './marketing.css';
+
+/*
+ * SCR-34 스폰서십 패키지·판매 관리 (M12 / F070). Stitch scr_34_sponsorship 이식.
+ * 정상 경로: GET /api/events/{eventId}/sponsorship (KPI·티어·스폰서·이행물).
+ * 폴백: 오프라인 강등 시 sampleMarketing 시연 데이터.
+ */
+export function SponsorshipPage() {
+  const eventId = useResolvedEventId();
+  const [selectedSponsor, setSelectedSponsor] = useState<string>('');
+
+  const q = useQuery({
+    queryKey: ['sponsorship', eventId],
+    queryFn: () => marketingApi.sponsorship(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const degraded = isDegradable(q.error);
+  const view: SponsorshipViewDto | null = q.data ?? (degraded ? SAMPLE_VIEW : null);
+  const hardError = q.isError && !degraded;
+
+  const sponsors = view?.sponsors ?? [];
+  const active = sponsors.find((s) => s.id === selectedSponsor) ?? sponsors[0] ?? null;
+
+  return (
+    <div className="kx-mkt">
+      <header className="kx-mkt__head">
+        <div>
+          <h1 className="kx-mkt__title">스폰서십 · 판매 관리</h1>
+          <p className="kx-mkt__subtitle">패키지 티어 · 스폰서 계약 · 이행물 추적</p>
+        </div>
+        <div className="kx-mkt__head-actions">
+          {degraded && (
+            <span className="kx-vis__degraded" title="스폰서십 API 미연결 — 시연 데이터">오프라인 — 샘플</span>
+          )}
+          <Button leadingIcon={<IconPlus size={16} />}>신규 세일즈 리드</Button>
+        </div>
+      </header>
+
+      {!eventId && (
+        <EmptyState title="행사를 선택해 주세요" description="스폰서십 현황을 조회할 행사가 지정되지 않았습니다." />
+      )}
+
+      {eventId && q.isLoading && !degraded && (
+        <div style={{ display: 'grid', gap: 16 }}>
+          <Skeleton height={92} radius={12} />
+          <Skeleton height={420} radius={12} />
+        </div>
+      )}
+
+      {hardError && <ErrorState message="스폰서십 현황을 불러오지 못했습니다." onRetry={() => q.refetch()} />}
+
+      {view && (
+        <>
+          <section className="kx-mkt__kpis" aria-label="스폰서십 핵심 지표">
+            {view.kpis.map((k) => (
+              <div key={k.label} className={`kx-kpi kx-kpi--accent-${k.tone ?? 'primary'}`}>
+                <span className="kx-kpi__label">{k.label}</span>
+                <strong className="kx-kpi__value tnum">
+                  {k.value}
+                  {k.unit && <span className="kx-kpi__unit">{k.unit}</span>}
+                </strong>
+              </div>
+            ))}
+          </section>
+
+          <div className="kx-mkt__split">
+            {/* 티어 카드 */}
+            <section className="kx-mkt__tiers-col" aria-label="스폰서십 패키지">
+              <div className="kx-mkt__list-head">
+                <h2>스폰서십 패키지</h2>
+                <button type="button" className="kx-mkt__link">패키지 설정 관리</button>
+              </div>
+              <div className="kx-mkt__tiers">
+                {view.tiers.map((t) => (
+                  <TierCard key={t.id} tier={t} />
+                ))}
+                {view.tiers.length === 0 && (
+                  <EmptyState title="등록된 패키지가 없습니다" description="스폰서십 티어를 등록하세요." />
+                )}
+              </div>
+
+              <div className="kx-mkt__deadline">
+                <div className="kx-mkt__deadline-info">
+                  <span className="kx-mkt__deadline-icon" aria-hidden="true">
+                    <IconArrowRight size={20} />
+                  </span>
+                  <div>
+                    <h3>스폰서십 체결 일정</h3>
+                    <p>주요 기업 팔로업이 필요합니다. 마감이 임박한 패키지를 우선 확인하세요.</p>
+                  </div>
+                </div>
+                <Button variant="secondary">전체 일정 보기</Button>
+              </div>
+            </section>
+
+            {/* 스폰서·이행물 관리 */}
+            <aside className="kx-mkt__sponsor-col" aria-label="스폰서 관리">
+              <div className="kx-card">
+                <div className="kx-card__head">
+                  <h2>스폰서 관리</h2>
+                </div>
+                <ul className="kx-mkt__sponsors">
+                  {sponsors.map((s) => (
+                    <li key={s.id}>
+                      <button
+                        type="button"
+                        className={`kx-mkt__sponsor ${s.id === active?.id ? 'is-selected' : ''}`}
+                        aria-pressed={s.id === active?.id}
+                        onClick={() => setSelectedSponsor(s.id)}
+                      >
+                        <span className="kx-mkt__sponsor-avatar" aria-hidden="true">{s.initial}</span>
+                        <span className="kx-mkt__sponsor-info">
+                          <strong>{s.name}</strong>
+                          <span>{s.tier ?? '-'}</span>
+                        </span>
+                        <SponsorPill status={s.status} />
+                      </button>
+                    </li>
+                  ))}
+                  {sponsors.length === 0 && (
+                    <li>
+                      <EmptyState title="스폰서가 없습니다" description="계약된 스폰서가 여기에 표시됩니다." />
+                    </li>
+                  )}
+                </ul>
+              </div>
+
+              {active && (
+                <div className="kx-card">
+                  <div className="kx-card__head">
+                    <h2>{active.name} 이행 현황</h2>
+                  </div>
+                  <ul className="kx-mkt__fulfillment">
+                    {active.fulfillment.map((f) => (
+                      <li key={f.id} className={f.done ? 'is-done' : ''}>
+                        <span className={`kx-mkt__check ${f.done ? 'is-done' : ''}`} aria-hidden="true">
+                          {f.done && <IconCheck size={14} />}
+                        </span>
+                        {f.label}
+                      </li>
+                    ))}
+                    {active.fulfillment.length === 0 && (
+                      <li className="kx-vis__activity-empty">이행 항목 없음</li>
+                    )}
+                  </ul>
+                  <button type="button" className="kx-mkt__roi-link">
+                    <span>노출 · 리드 · ROI 대시보드</span>
+                    <IconArrowRight size={18} />
+                  </button>
+                </div>
+              )}
+            </aside>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function TierCard({ tier: t }: { tier: TierDto }) {
+  const sold = t.status === 'soldout';
+  return (
+    <div className={`kx-mkt__tier ${sold ? 'is-soldout' : ''}`} style={{ ['--tier-accent' as string]: t.accent ?? '#667085' }}>
+      <div className="kx-mkt__tier-body">
+        <div className="kx-mkt__tier-top">
+          <span className="kx-mkt__tier-badge">{t.name}</span>
+          {t.dday != null && <DdayChip dday={t.dday} />}
+        </div>
+        <h3 className="kx-mkt__tier-name">{t.nameKo}</h3>
+        <p className="kx-mkt__tier-price tnum">{t.price}</p>
+        <ul className="kx-mkt__tier-benefits">
+          {t.benefits.map((b, i) => (
+            <li key={i}>
+              <span className="kx-mkt__tier-check" aria-hidden="true">
+                <IconCheck size={16} />
+              </span>
+              {b}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="kx-mkt__tier-foot">
+        {sold ? (
+          <>
+            <span className="kx-mkt__tier-remain is-sold">판매 완료</span>
+            <Button variant="secondary" disabled>종료</Button>
+          </>
+        ) : (
+          <>
+            <span className="kx-mkt__tier-remain">
+              잔여 <strong className="tnum">{t.remaining}</strong>
+            </span>
+            <Button>선택</Button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const KNOWN_SPONSOR_STATUS: SponsorContractStatus[] = ['signed', 'pending'];
+function SponsorPill({ status }: { status: string }) {
+  const s = (KNOWN_SPONSOR_STATUS as string[]).includes(status) ? (status as SponsorContractStatus) : 'pending';
+  return <span className={`kx-mkt__spill is-${s}`}>{SPONSOR_STATUS_LABEL[s]}</span>;
+}
+
+/** 폴백 뷰(오프라인 강등 시) — sampleMarketing 파생. */
+const SAMPLE_VIEW: SponsorshipViewDto = {
+  kpis: SPONSOR_KPIS.map((k) => ({ label: k.label, value: k.value, unit: k.unit ?? null, tone: k.tone ?? null })),
+  tiers: SPONSOR_TIERS.map((t) => ({
+    id: t.id,
+    name: t.name,
+    nameKo: t.nameKo,
+    price: t.price,
+    accent: t.accent,
+    benefits: t.benefits,
+    remaining: t.remaining,
+    status: t.status,
+    dday: t.dday ?? null,
+  })),
+  sponsors: SPONSORS.map<SponsorDto>((s) => ({
+    id: s.id,
+    name: s.name,
+    initial: s.initial,
+    tier: s.tier,
+    status: s.status,
+    fulfillment: FULFILLMENT.map((f) => ({ id: f.id, label: f.label, done: f.done })),
+  })),
+};
+
+function isDegradable(error: unknown): boolean {
+  return (
+    error instanceof ApiRequestError &&
+    (error.code === 'NETWORK' || error.code === 'NOT_FOUND' || error.code === 'NOT_IMPLEMENTED')
+  );
+}
diff --git a/src/frontend/src/screens/marketing/marketing.css b/src/frontend/src/screens/marketing/marketing.css
new file mode 100644
index 0000000..70090f7
--- /dev/null
+++ b/src/frontend/src/screens/marketing/marketing.css
@@ -0,0 +1,718 @@
+@import '../shared.css';
+
+/* SCR-33 EDM·캠페인 · SCR-34 스폰서십 (M12) 공통 스타일. */
+
+.kx-mkt {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.kx-mkt__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-mkt__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+}
+.kx-mkt__subtitle {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-mkt__head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+/* 샘플 데이터 배지 */
+.kx-sample {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-warning);
+  background: #fff4e5;
+  border: 1px solid #fcd9a8;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+}
+
+/* 오프라인 강등(폴백) 표시 — 집계 API 미연결 시 시연 데이터 안내 */
+.kx-vis__degraded {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-warning);
+  background: #fff4e5;
+  border: 1px solid #fcd9a8;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+}
+.kx-vis__activity-empty {
+  color: var(--color-text-muted, #667085);
+  font-size: 13px;
+  padding: 6px 0;
+  list-style: none;
+}
+
+/* 칩 */
+.kx-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  background: var(--color-neutral-100);
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.kx-chip.is-active {
+  color: var(--color-primary-700);
+  background: var(--color-primary-100);
+}
+
+/* KPI */
+.kx-mkt__kpis {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-4);
+}
+.kx-kpi__unit {
+  font-size: var(--fs-h3);
+  font-weight: 600;
+  margin-left: 3px;
+  color: var(--color-neutral-500);
+}
+.kx-kpi__sub {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-kpi--accent-primary {
+  border-left: 4px solid var(--color-primary-600);
+}
+.kx-kpi--accent-ai {
+  border-left: var(--accent-ai);
+}
+.kx-kpi--accent-success {
+  border-left: 4px solid var(--color-success);
+}
+.kx-kpi--accent-warning {
+  border-left: 4px solid var(--color-violation-warn);
+}
+
+/* 2열 분할 */
+.kx-mkt__split {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--space-4);
+  align-items: start;
+}
+.kx-mkt__list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+.kx-mkt__list-head h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-mkt__tabs {
+  display: flex;
+  gap: var(--space-2);
+}
+.kx-mkt__link {
+  border: none;
+  background: none;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-primary-600);
+  cursor: pointer;
+}
+
+/* ── 캠페인 리스트 ── */
+.kx-mkt__campaigns {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-mkt__campaign {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+}
+.kx-mkt__campaign:hover {
+  box-shadow: var(--shadow-level2);
+}
+.kx-mkt__campaign-main {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.kx-mkt__campaign-icon {
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+}
+.kx-mkt__campaign-icon.is-scheduled {
+  background: #dcf3e9;
+  color: var(--color-success);
+}
+.kx-mkt__campaign-icon.is-sending {
+  background: #fdecea;
+  color: var(--color-error);
+}
+.kx-mkt__campaign-icon.is-done {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-500);
+}
+.kx-mkt__campaign-info {
+  min-width: 0;
+}
+.kx-mkt__campaign-top {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: 3px;
+}
+.kx-mkt__campaign-top h3 {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kx-mkt__campaign-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-mkt__dot-sep {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--color-neutral-200);
+}
+.kx-mkt__campaign-metrics {
+  display: flex;
+  gap: var(--space-5);
+  flex-shrink: 0;
+}
+.kx-mkt__campaign-metrics > div {
+  text-align: center;
+}
+.kx-mkt__metric-k {
+  display: block;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-bottom: 2px;
+}
+.kx-mkt__campaign-metrics strong {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+
+/* 캠페인 상태 pill */
+.kx-mkt__cpill {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+.kx-mkt__cpill.is-draft {
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-100);
+}
+.kx-mkt__cpill.is-scheduled {
+  color: var(--color-primary-700);
+  background: var(--color-primary-100);
+}
+.kx-mkt__cpill.is-sending {
+  color: var(--color-error);
+  background: #fdecea;
+}
+.kx-mkt__cpill.is-done {
+  color: var(--color-success);
+  background: #dcf3e9;
+}
+
+/* ── 캠페인 빌더 ── */
+.kx-mkt__builder .kx-card {
+  position: sticky;
+  top: 0;
+}
+.kx-mkt__field-label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  margin: var(--space-4) 0 var(--space-2);
+}
+.kx-mkt__segments {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-mkt__segment {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-mkt__segment:hover {
+  background: var(--color-neutral-050);
+}
+.kx-mkt__segment input {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-ai-accent);
+}
+.kx-mkt__segment-count {
+  margin-left: auto;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+.kx-mkt__ai-box {
+  margin-top: var(--space-4);
+  padding: var(--space-4);
+  background: var(--color-ai-surface);
+  border: 1px solid #d9cfff;
+  border-radius: var(--radius-lg);
+}
+.kx-mkt__ai-box-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-ai-accent);
+  margin-bottom: var(--space-2);
+}
+.kx-mkt__ai-box p {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  line-height: var(--lh-caption);
+  margin-bottom: var(--space-3);
+}
+
+.kx-mkt__image-slot {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 2px dashed var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  background: var(--color-neutral-050);
+  color: var(--color-neutral-500);
+  font-size: var(--fs-caption);
+  cursor: pointer;
+}
+.kx-mkt__image-slot:hover {
+  border-color: var(--color-primary-600);
+  color: var(--color-primary-600);
+}
+
+.kx-mkt__schedule {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-mkt__schedule .kx-seg {
+  display: flex;
+}
+.kx-mkt__schedule .kx-seg__btn {
+  flex: 1;
+}
+.kx-mkt__datetime {
+  width: 100%;
+  height: 36px;
+  padding: 0 var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+  font-family: inherit;
+}
+
+.kx-mkt__preview {
+  margin: var(--space-4) 0;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.kx-mkt__preview-head {
+  padding: var(--space-2);
+  text-align: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-050);
+  border-bottom: 1px solid var(--color-neutral-200);
+}
+.kx-mkt__preview-body {
+  padding: var(--space-4);
+  background: var(--color-white);
+}
+.kx-mkt__preview-banner {
+  height: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-050);
+  color: var(--color-neutral-500);
+  font-size: var(--fs-caption);
+  font-style: italic;
+  margin-bottom: var(--space-3);
+}
+.kx-mkt__preview-title {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin-bottom: var(--space-2);
+}
+.kx-mkt__preview-text {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  line-height: var(--lh-caption);
+}
+.kx-mkt__preview-foot {
+  margin-top: var(--space-4);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-neutral-100);
+  font-size: 10px;
+  color: var(--color-neutral-500);
+}
+.kx-mkt__preview-links {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: 4px;
+}
+.kx-mkt__preview-links a {
+  text-decoration: underline;
+}
+
+/* ── 스폰서십 티어 ── */
+.kx-mkt__tiers {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+}
+.kx-mkt__tier {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-card);
+  border-left: 4px solid var(--tier-accent, var(--color-primary-600));
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow: hidden;
+}
+.kx-mkt__tier.is-soldout {
+  opacity: 0.72;
+}
+.kx-mkt__tier-body {
+  padding: var(--space-4);
+  flex: 1;
+}
+.kx-mkt__tier-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+.kx-mkt__tier-badge {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--tier-accent, var(--color-primary-700));
+  background: color-mix(in srgb, var(--tier-accent, #0066b3) 12%, white);
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+}
+.kx-mkt__tier-name {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin-bottom: 2px;
+}
+.kx-mkt__tier-price {
+  font-size: var(--fs-h2);
+  font-weight: 800;
+  color: var(--color-primary-700);
+  margin-bottom: var(--space-4);
+}
+.kx-mkt__tier-benefits {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-mkt__tier-benefits li {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+}
+.kx-mkt__tier-check {
+  color: var(--color-primary-600);
+  flex-shrink: 0;
+}
+.kx-mkt__tier-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--color-neutral-100);
+  background: var(--color-neutral-050);
+}
+.kx-mkt__tier-remain {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+.kx-mkt__tier-remain strong {
+  color: var(--color-primary-700);
+}
+.kx-mkt__tier-remain.is-sold {
+  color: var(--color-error);
+}
+
+.kx-mkt__deadline {
+  margin-top: var(--space-4);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-primary-050);
+}
+.kx-mkt__deadline-info {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-mkt__deadline-icon {
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-white);
+  color: var(--color-primary-600);
+}
+.kx-mkt__deadline h3 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-mkt__deadline p {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  margin-top: 2px;
+}
+
+/* ── 스폰서 관리 ── */
+.kx-mkt__sponsor-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-mkt__sponsors {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-mkt__sponsor {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: none;
+  background: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  text-align: left;
+}
+.kx-mkt__sponsor:hover {
+  background: var(--color-neutral-050);
+}
+.kx-mkt__sponsor.is-selected {
+  background: var(--color-primary-050);
+  box-shadow: inset 4px 0 0 var(--color-primary-600);
+}
+.kx-mkt__sponsor-avatar {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.kx-mkt__sponsor-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.kx-mkt__sponsor-info strong {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-mkt__sponsor-info span {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-mkt__spill {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+.kx-mkt__spill.is-signed {
+  color: var(--color-success);
+  background: #dcf3e9;
+}
+.kx-mkt__spill.is-pending {
+  color: var(--color-neutral-700);
+  background: var(--color-neutral-100);
+}
+
+/* 이행물 체크리스트 */
+.kx-mkt__fulfillment {
+  list-style: none;
+  margin: 0 0 var(--space-4);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-mkt__fulfillment li {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-mkt__fulfillment li.is-done {
+  color: var(--color-neutral-900);
+}
+.kx-mkt__check {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  border: 1.5px solid var(--color-neutral-200);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-white);
+}
+.kx-mkt__check.is-done {
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+}
+.kx-mkt__roi-link {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border: none;
+  border-radius: var(--radius-lg);
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+  font-size: var(--fs-body);
+  font-weight: 700;
+  cursor: pointer;
+}
+.kx-mkt__roi-link:hover {
+  background: var(--color-primary-100);
+}
+
+/* 반응형 */
+@media (max-width: 1100px) {
+  .kx-mkt__split {
+    grid-template-columns: 1fr;
+  }
+  .kx-mkt__builder .kx-card {
+    position: static;
+  }
+}
+@media (max-width: 720px) {
+  .kx-mkt__kpis {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .kx-mkt__tiers {
+    grid-template-columns: 1fr;
+  }
+  .kx-mkt__campaign {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/* 캠페인 발송 결과 안내(수신동의자 한정 발송 후) */
+.kx-mkt__send-msg {
+  padding: 12px 16px;
+  border-radius: 10px;
+  background: var(--kx-success-bg, #ecfdf5);
+  color: var(--kx-success-fg, #065f46);
+  border: 1px solid var(--kx-success-border, #a7f3d0);
+  font-size: 14px;
+}
diff --git a/src/frontend/src/screens/marketing/marketingApi.ts b/src/frontend/src/screens/marketing/marketingApi.ts
new file mode 100644
index 0000000..f46e17e
--- /dev/null
+++ b/src/frontend/src/screens/marketing/marketingApi.ts
@@ -0,0 +1,91 @@
+/*
+ * M12 EDM·캠페인 · 스폰서십 실 API 계약 (SCR-33·SCR-34).
+ * 공용 클라이언트(../../api/client)만 사용 — client.ts·endpoints.ts 무수정.
+ *
+ * 백엔드 컨트롤러 정본:
+ *   GET  /api/events/{eventId}/campaigns?status → ApiResponse<CampaignDto[]>
+ *   POST /api/events/{eventId}/campaigns (생성 — status 전이만)
+ *   POST /api/events/{eventId}/campaigns/{id}/send (수신동의자 한정 실 발송)
+ *   GET  /api/events/{eventId}/sponsorship → ApiResponse<SponsorshipView>
+ */
+import { api } from '../../api/client';
+
+// ── SCR-33 캠페인 ──
+export interface CampaignDto {
+  id: string;
+  name: string;
+  status: string; // draft|scheduled|sending|done
+  audience: number;
+  meta: string | null;
+  openRate: string | null;
+  clickRate: string | null;
+}
+export interface CampaignCreateBody {
+  name: string;
+  audience?: number;
+  meta?: string;
+  scheduleType?: 'now' | 'later';
+  scheduledAt?: string;
+}
+
+// ── SCR-34 스폰서십 ──
+export interface MktKpiDto {
+  label: string;
+  value: string;
+  unit: string | null;
+  tone: string | null;
+}
+export interface TierDto {
+  id: string;
+  name: string;
+  nameKo: string;
+  price: string;
+  accent: string | null;
+  benefits: string[];
+  remaining: number;
+  status: string; // available|soldout
+  dday: number | null;
+}
+export interface FulfillmentDto {
+  id: string;
+  label: string;
+  done: boolean;
+}
+export interface SponsorDto {
+  id: string;
+  name: string;
+  initial: string;
+  tier: string | null;
+  status: string; // signed|pending
+  fulfillment: FulfillmentDto[];
+}
+export interface SponsorshipViewDto {
+  kpis: MktKpiDto[];
+  tiers: TierDto[];
+  sponsors: SponsorDto[];
+}
+
+// ── 캠페인 발송 결과 ──
+export interface CampaignSendResultDto {
+  id: string;
+  status: string; // done
+  sentCount: number;
+  mailEnabled: boolean;
+  meta: string;
+}
+
+export const marketingApi = {
+  campaigns: (eventId: string, status?: string) => {
+    const qs = status ? `?status=${encodeURIComponent(status)}` : '';
+    return api.get<CampaignDto[]>(`/api/events/${encodeURIComponent(eventId)}/campaigns${qs}`);
+  },
+  createCampaign: (eventId: string, body: CampaignCreateBody) =>
+    api.post<CampaignDto>(`/api/events/${encodeURIComponent(eventId)}/campaigns`, body),
+  sendCampaign: (eventId: string, id: string) =>
+    api.post<CampaignSendResultDto>(
+      `/api/events/${encodeURIComponent(eventId)}/campaigns/${encodeURIComponent(id)}/send`,
+      {},
+    ),
+  sponsorship: (eventId: string) =>
+    api.get<SponsorshipViewDto>(`/api/events/${encodeURIComponent(eventId)}/sponsorship`),
+};
diff --git a/src/frontend/src/screens/marketing/sampleMarketing.ts b/src/frontend/src/screens/marketing/sampleMarketing.ts
new file mode 100644
index 0000000..35300cd
--- /dev/null
+++ b/src/frontend/src/screens/marketing/sampleMarketing.ts
@@ -0,0 +1,185 @@
+/*
+ * SCR-33 EDM·캠페인 · SCR-34 스폰서십 샘플 데이터 (M12).
+ * ★ M12 백엔드 미구현 → 화면은 실 API 미호출, 본 시연 데이터 표시("샘플 데이터" 배지).
+ * ★ 세그먼트 규모는 M10 관람객 데이터 파생 가정치이며 실제 개인정보는 포함하지 않는다(N2).
+ */
+
+// ── 공통 KPI ──
+export interface MktKpi {
+  label: string;
+  value: string;
+  unit?: string;
+  hint?: string;
+  tone?: 'primary' | 'ai' | 'success' | 'warning';
+}
+
+// ── SCR-33 EDM·캠페인 ──
+
+export const CAMPAIGN_KPIS: MktKpi[] = [
+  { label: '전체 발송', value: '24,000', unit: '건', hint: '지난달 대비 +12%', tone: 'primary' },
+  { label: '오픈율', value: '38', unit: '%', hint: '산업군 평균 상회', tone: 'ai' },
+  { label: '클릭율', value: '9', unit: '%', hint: '유지 중', tone: 'success' },
+  { label: '등록 전환', value: '1,240', unit: '명', hint: '목표 달성 82%', tone: 'warning' },
+];
+
+export type CampaignStatus = 'draft' | 'scheduled' | 'sending' | 'done';
+
+export interface Campaign {
+  id: string;
+  name: string;
+  status: CampaignStatus;
+  audience: number;
+  meta: string;
+  openRate: string;
+  clickRate: string;
+}
+
+export const CAMPAIGNS: Campaign[] = [
+  {
+    id: 'c1',
+    name: '2026 스마트팩토리 사전등록 안내',
+    status: 'draft',
+    audience: 5200,
+    meta: '최종 수정: 2시간 전',
+    openRate: '-',
+    clickRate: '-',
+  },
+  {
+    id: 'c2',
+    name: 'VIP 바이어 네트워킹 데이 초대권',
+    status: 'scheduled',
+    audience: 850,
+    meta: '발송 예정: 2026.11.20 10:00',
+    openRate: '24% (예상)',
+    clickRate: '5% (예상)',
+  },
+  {
+    id: 'c3',
+    name: '글로벌 테크 트렌드 리포트 (Vol. 12)',
+    status: 'sending',
+    audience: 12000,
+    meta: '진행률: 68% (8,160건 완료)',
+    openRate: '42.5%',
+    clickRate: '11.2%',
+  },
+  {
+    id: 'c4',
+    name: 'KINTEX 추석 연휴 휴관 및 일정 안내',
+    status: 'done',
+    audience: 45000,
+    meta: '완료일: 2026.09.12',
+    openRate: '31.8%',
+    clickRate: '2.4%',
+  },
+];
+
+export const CAMPAIGN_STATUS_LABEL: Record<CampaignStatus, string> = {
+  draft: '초안',
+  scheduled: '예약',
+  sending: '발송중',
+  done: '완료',
+};
+
+export interface Segment {
+  id: string;
+  label: string;
+  count: number;
+  defaultOn: boolean;
+}
+
+export const SEGMENTS: Segment[] = [
+  { id: 'prereg', label: '사전등록자', count: 3240, defaultOn: true },
+  { id: 'past', label: '과거 관람객', count: 12500, defaultOn: false },
+  { id: 'buyer', label: '바이어 리스트', count: 1820, defaultOn: false },
+];
+
+// ── SCR-34 스폰서십 ──
+
+export const SPONSOR_KPIS: MktKpi[] = [
+  { label: '스폰서', value: '18', unit: '사', tone: 'primary' },
+  { label: '판매액', value: '₩420.0M', tone: 'primary' },
+  { label: '잔여 패키지', value: '6', unit: '개', tone: 'ai' },
+  { label: '이행물 진행', value: '72', unit: '%', tone: 'success' },
+];
+
+export type TierStatus = 'available' | 'soldout';
+
+export interface SponsorTier {
+  id: string;
+  name: string;
+  nameKo: string;
+  price: string;
+  accent: string;
+  benefits: string[];
+  remaining: number;
+  status: TierStatus;
+  dday?: number;
+}
+
+export const SPONSOR_TIERS: SponsorTier[] = [
+  {
+    id: 'diamond',
+    name: 'DIAMOND',
+    nameKo: '다이아몬드',
+    price: '₩50,000,000',
+    accent: '#B8860B',
+    benefits: ['메인 로고 노출 (온·오프라인)', '전시 부스 100㎡ (최우선 배정)', '연사 세션 2회 부여'],
+    remaining: 1,
+    status: 'available',
+    dday: 12,
+  },
+  {
+    id: 'gold',
+    name: 'GOLD',
+    nameKo: '골드',
+    price: '₩30,000,000',
+    accent: '#667085',
+    benefits: ['서브 로고 노출', '전시 부스 50㎡', '연사 세션 1회'],
+    remaining: 0,
+    status: 'soldout',
+  },
+  {
+    id: 'silver',
+    name: 'SILVER',
+    nameKo: '실버',
+    price: '₩15,000,000',
+    accent: '#8B4513',
+    benefits: ['일반 로고 노출', '전시 부스 20㎡'],
+    remaining: 3,
+    status: 'available',
+  },
+];
+
+export type SponsorContractStatus = 'signed' | 'pending';
+
+export interface Sponsor {
+  id: string;
+  name: string;
+  initial: string;
+  tier: string;
+  status: SponsorContractStatus;
+}
+
+export const SPONSORS: Sponsor[] = [
+  { id: 's1', name: '(주)테크솔루션', initial: 'T', tier: '다이아몬드 패키지', status: 'signed' },
+  { id: 's2', name: '글로벌바이오', initial: 'G', tier: '골드 패키지', status: 'pending' },
+  { id: 's3', name: '넥스트인더스트리', initial: 'N', tier: '실버 패키지', status: 'signed' },
+];
+
+export const SPONSOR_STATUS_LABEL: Record<SponsorContractStatus, string> = {
+  signed: '계약완료',
+  pending: '결제대기',
+};
+
+export interface FulfillmentItem {
+  id: string;
+  label: string;
+  done: boolean;
+}
+
+export const FULFILLMENT: FulfillmentItem[] = [
+  { id: 'f1', label: '공식 홈페이지 로고 노출', done: true },
+  { id: 'f2', label: '전시 홀 부스 배정 (A-101)', done: true },
+  { id: 'f3', label: '연사 세션 주제 선정', done: false },
+  { id: 'f4', label: '브로슈어 광고 인쇄', done: false },
+];
diff --git a/src/frontend/src/screens/mobile/ContractorOnsiteChecklistPage.tsx b/src/frontend/src/screens/mobile/ContractorOnsiteChecklistPage.tsx
new file mode 100644
index 0000000..9e63da5
--- /dev/null
+++ b/src/frontend/src/screens/mobile/ContractorOnsiteChecklistPage.tsx
@@ -0,0 +1,186 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './mobile.css';
+
+/*
+ * SCR-M1 장치업체 현장 체크리스트(모바일 390px). Stitch contractor_onsite_checklist 이식.
+ * - 오프라인 배지 · 반입전/시공중/구조확인 아코디언 · 사진 첨부 · 높이 실측 입력
+ * - 필수 항목 완료 시 "검수 요청 보내기" 활성. 오프라인 시 연결 후 동기화 고지.
+ * ★ 계약에 현장 체크리스트 엔드포인트 부재 → 로컬 상태 시연.
+ */
+type Section = 'before' | 'building' | 'structure';
+
+export function ContractorOnsiteChecklistPage() {
+  const navigate = useNavigate();
+  const [view, setView] = useState<'plan' | 'photo'>('plan');
+  const [open, setOpen] = useState<Record<Section, boolean>>({
+    before: true,
+    building: true,
+    structure: true,
+  });
+  const [checks, setChecks] = useState<Record<string, boolean>>({
+    floor: false,
+    elec: false,
+  });
+  const [height, setHeight] = useState('');
+
+  const requiredDone =
+    checks.floor && checks.elec && height !== '' && Number(height) <= 5 && Number(height) > 0;
+
+  const toggle = (s: Section) => setOpen((o) => ({ ...o, [s]: !o[s] }));
+
+  return (
+    <div className="kx-m kx-m--checklist">
+      {/* 헤더 */}
+      <header className="kx-m__head">
+        <div className="kx-m__head-row">
+          <div className="kx-m__head-left">
+            <button className="kx-m__back" aria-label="뒤로" onClick={() => navigate(-1)}>
+              ←
+            </button>
+            <div>
+              <h1>부스 A-102</h1>
+              <div className="kx-m__sub">
+                <span>홀7</span>
+                <span className="kx-m__dot" aria-hidden="true" />
+                <span className="kx-m__accent">장치 1일차</span>
+              </div>
+            </div>
+          </div>
+          <span className="kx-m__offline">● 오프라인</span>
+        </div>
+        <div className="kx-m__seg" role="tablist">
+          <button
+            role="tab"
+            aria-selected={view === 'plan'}
+            className={view === 'plan' ? 'is-active' : ''}
+            onClick={() => setView('plan')}
+          >
+            도면
+          </button>
+          <button
+            role="tab"
+            aria-selected={view === 'photo'}
+            className={view === 'photo' ? 'is-active' : ''}
+            onClick={() => setView('photo')}
+          >
+            예상 사진
+          </button>
+        </div>
+      </header>
+
+      <main className="kx-m__body">
+        <div className="kx-m__info">필수 항목 3개 남음</div>
+
+        {/* 반입 전 (완료) */}
+        <section className="kx-m__acc">
+          <button className="kx-m__acc-head" onClick={() => toggle('before')} aria-expanded={open.before}>
+            <span>반입 전</span>
+            <span className="kx-m__acc-count">2/2</span>
+          </button>
+          {open.before && (
+            <div className="kx-m__acc-body">
+              <label className="kx-m__check is-done">
+                <input type="checkbox" checked disabled />
+                <span>방염 확인서 제출 확인</span>
+              </label>
+              <label className="kx-m__check is-done">
+                <input type="checkbox" checked disabled />
+                <span>안전모 및 보호장구 착용</span>
+              </label>
+            </div>
+          )}
+        </section>
+
+        {/* 경고 카드 */}
+        <div className="kx-m__warn">
+          <h3>⚠ 장내 금지 작업 주의</h3>
+          <ul>
+            <li>금지: 전기톱, 용접, 페인트 작업</li>
+            <li>소음 한도: 70~75dB 준수</li>
+          </ul>
+        </div>
+
+        {/* 시공 중 */}
+        <section className="kx-m__acc">
+          <button className="kx-m__acc-head" onClick={() => toggle('building')} aria-expanded={open.building}>
+            <span>시공 중</span>
+            <span className="kx-m__acc-count">{Number(checks.floor) + Number(checks.elec)}/2</span>
+          </button>
+          {open.building && (
+            <div className="kx-m__acc-body">
+              <div className="kx-m__check-row">
+                <label className="kx-m__check">
+                  <input
+                    type="checkbox"
+                    checked={checks.floor}
+                    onChange={(e) => setChecks((c) => ({ ...c, floor: e.target.checked }))}
+                  />
+                  <span className="kx-m__check-text">
+                    바닥 마감 상태 양호
+                    <small>테이핑 및 단차 확인</small>
+                  </span>
+                </label>
+                <button className="kx-m__camera" aria-label="사진 첨부">📷</button>
+              </div>
+              <div className="kx-m__check-row">
+                <label className="kx-m__check">
+                  <input
+                    type="checkbox"
+                    checked={checks.elec}
+                    onChange={(e) => setChecks((c) => ({ ...c, elec: e.target.checked }))}
+                  />
+                  <span className="kx-m__check-text">
+                    전기 배선 안전 확인
+                    <small>노출된 전선 정리</small>
+                  </span>
+                </label>
+                <button className="kx-m__camera" aria-label="사진 첨부">📷</button>
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* 구조 확인 */}
+        <section className="kx-m__acc">
+          <button className="kx-m__acc-head" onClick={() => toggle('structure')} aria-expanded={open.structure}>
+            <span>구조 확인</span>
+            <span className="kx-m__acc-count">{height && Number(height) <= 5 && Number(height) > 0 ? '1' : '0'}/1</span>
+          </button>
+          {open.structure && (
+            <div className="kx-m__acc-body">
+              <div className="kx-m__field">
+                <label htmlFor="m-height">
+                  장치물 최고 높이 실측
+                  <span className="kx-m__rule">규정: 5m 이하</span>
+                </label>
+                <div className="kx-m__input-wrap">
+                  <input
+                    id="m-height"
+                    type="number"
+                    inputMode="decimal"
+                    placeholder="4.2"
+                    value={height}
+                    onChange={(e) => setHeight(e.target.value)}
+                  />
+                  <span className="kx-m__unit">m</span>
+                </div>
+                {height !== '' && Number(height) > 5 && (
+                  <p className="kx-m__field-err">5m 초과 — 규정 위반</p>
+                )}
+              </div>
+            </div>
+          )}
+        </section>
+      </main>
+
+      {/* 하단 */}
+      <footer className="kx-m__foot">
+        <p className="kx-m__foot-note">↻ 오프라인 — 연결 시 동기화</p>
+        <button className="kx-m__cta" disabled={!requiredDone}>
+          검수 요청 보내기
+        </button>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/mobile/ManagerFieldInspectionPage.tsx b/src/frontend/src/screens/mobile/ManagerFieldInspectionPage.tsx
new file mode 100644
index 0000000..4b86209
--- /dev/null
+++ b/src/frontend/src/screens/mobile/ManagerFieldInspectionPage.tsx
@@ -0,0 +1,148 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './mobile.css';
+
+/*
+ * SCR-M2 홀매니저 현장 검수(모바일 390px). Stitch manager_field_inspection 이식.
+ * - 도면 vs 현장 사진 비교(AI 사전심사 플래그) · 검수 항목 적합/부적합 토글 · 위반 사진·메모
+ * - 부적합 존재 시 시정 요청, 전부 적합 시 검수 승인.
+ * ★ 계약에 현장 검수 엔드포인트 부재 → 로컬 상태 시연.
+ */
+const MOCK = `${import.meta.env.BASE_URL}mock/manager_field_inspection`;
+const DRAWING = `${MOCK}/img2.jpg`;
+const FIELD = `${MOCK}/img3.jpg`;
+const VIOLATION = `${MOCK}/img4.jpg`;
+
+interface Item {
+  id: string;
+  label: string;
+  note?: string;
+  hasPhoto?: boolean;
+}
+const ITEMS: Item[] = [
+  { id: 'height', label: '장치물 높이 (제한 4m)' },
+  { id: 'flame', label: '방염 라벨 부착' },
+  { id: 'aisle', label: '통로 침범 여부', note: '통로 0.3m 침범 확인', hasPhoto: true },
+  { id: 'noise', label: '소음 규정 준수' },
+];
+
+export function ManagerFieldInspectionPage() {
+  const navigate = useNavigate();
+  // 기본값: 통로만 부적합(Stitch)
+  const [verdicts, setVerdicts] = useState<Record<string, 'pass' | 'fail'>>({
+    height: 'pass',
+    flame: 'pass',
+    aisle: 'fail',
+    noise: 'pass',
+  });
+  const [memo, setMemo] = useState('통로 0.3m 침범');
+  const [slide, setSlide] = useState(0);
+
+  const anyFail = Object.values(verdicts).some((v) => v === 'fail');
+
+  return (
+    <div className="kx-m kx-m--inspect">
+      <header className="kx-m__head">
+        <div className="kx-m__head-row">
+          <div className="kx-m__head-left">
+            <button className="kx-m__back" aria-label="뒤로" onClick={() => navigate(-1)}>
+              ←
+            </button>
+            <div>
+              <h1>현장 검수 · 부스 A-102</h1>
+              <div className="kx-m__sub">
+                <span>홀7 · KINTEX</span>
+              </div>
+            </div>
+          </div>
+          <img className="kx-m__thumb" src={DRAWING} alt="도면 썸네일" loading="lazy" />
+        </div>
+      </header>
+
+      <main className="kx-m__body">
+        {/* 비교 카드 */}
+        <section className="kx-m__compare">
+          <div className="kx-m__compare-head">
+            <h2>도면 vs 현장 비교</h2>
+            <span className="kx-m__flag">✦ AI 사전심사 플래그 3건</span>
+          </div>
+          <div className="kx-m__compare-imgs">
+            <figure>
+              <span className="kx-m__img-label">승인 도면</span>
+              <img src={DRAWING} alt="승인 도면" loading="lazy" />
+            </figure>
+            <div className="kx-m__compare-div" aria-hidden="true">⇄</div>
+            <figure>
+              <span className="kx-m__img-label">현장 사진</span>
+              <img src={FIELD} alt="현장 사진" loading="lazy" />
+            </figure>
+          </div>
+          <div className="kx-m__dots" role="tablist" aria-label="비교 슬라이드">
+            {[0, 1, 2].map((i) => (
+              <button
+                key={i}
+                className={slide === i ? 'is-active' : ''}
+                aria-label={`슬라이드 ${i + 1}`}
+                onClick={() => setSlide(i)}
+              />
+            ))}
+          </div>
+        </section>
+
+        {/* 검수 항목 */}
+        <section className="kx-m__ilist">
+          <h3>검수 항목 (4)</h3>
+          {ITEMS.map((it) => {
+            const v = verdicts[it.id];
+            return (
+              <div key={it.id} className={`kx-m__icard ${v === 'fail' ? 'is-fail' : ''}`}>
+                <div className="kx-m__icard-top">
+                  <div className="kx-m__icard-label">
+                    <span>{it.label}</span>
+                    {v === 'fail' && it.note && <small>⚠ {it.note}</small>}
+                  </div>
+                  <div className="kx-m__verdict" role="radiogroup" aria-label={`${it.label} 판정`}>
+                    <button
+                      role="radio"
+                      aria-checked={v === 'pass'}
+                      className={v === 'pass' ? 'is-pass' : ''}
+                      onClick={() => setVerdicts((s) => ({ ...s, [it.id]: 'pass' }))}
+                    >
+                      적합
+                    </button>
+                    <button
+                      role="radio"
+                      aria-checked={v === 'fail'}
+                      className={v === 'fail' ? 'is-fail' : ''}
+                      onClick={() => setVerdicts((s) => ({ ...s, [it.id]: 'fail' }))}
+                    >
+                      부적합
+                    </button>
+                  </div>
+                </div>
+                {v === 'fail' && it.hasPhoto && (
+                  <div className="kx-m__icard-evidence">
+                    <img src={VIOLATION} alt="위반 사진" loading="lazy" />
+                    <textarea
+                      value={memo}
+                      onChange={(e) => setMemo(e.target.value)}
+                      rows={2}
+                      placeholder="메모 입력…"
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </section>
+      </main>
+
+      <footer className="kx-m__foot kx-m__foot--dual">
+        <button className="kx-m__cta kx-m__cta--danger">시정 요청</button>
+        <button className="kx-m__cta kx-m__cta--ok" disabled={anyFail}>
+          검수 승인
+        </button>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/mobile/mobile.css b/src/frontend/src/screens/mobile/mobile.css
new file mode 100644
index 0000000..8d41da3
--- /dev/null
+++ b/src/frontend/src/screens/mobile/mobile.css
@@ -0,0 +1,513 @@
+/* 모바일 390px 셸 (design.md §2 — 조회·승인·현장 전용) */
+.kx-m {
+  width: 390px;
+  max-width: 100vw;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-neutral-050);
+  position: relative;
+  box-shadow: 0 0 0 1px var(--color-neutral-200);
+}
+
+/* 헤더 */
+.kx-m__head {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: var(--color-white);
+  border-bottom: var(--border-card);
+  padding: var(--space-3) var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-m__head-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+.kx-m__head-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.kx-m__back {
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  font-size: 18px;
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kx-m__back:hover {
+  background: var(--color-neutral-100);
+}
+.kx-m__head h1 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-m__sub {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-m__dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--color-neutral-200);
+}
+.kx-m__accent {
+  color: var(--color-primary-600);
+  font-weight: 700;
+}
+.kx-m__offline {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  padding: 3px 8px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+}
+.kx-m__thumb {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  border: 1px solid var(--color-neutral-200);
+}
+
+.kx-m__seg {
+  display: flex;
+  background: var(--color-neutral-100);
+  border-radius: var(--radius-sm);
+  padding: 3px;
+  gap: 3px;
+}
+.kx-m__seg button {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 7px;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kx-m__seg button.is-active {
+  background: var(--color-white);
+  color: var(--color-primary-700);
+  box-shadow: var(--shadow-level2);
+}
+
+/* 본문 */
+.kx-m__body {
+  flex: 1;
+  padding: var(--space-4);
+  padding-bottom: 120px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  overflow-y: auto;
+}
+.kx-m__info {
+  background: var(--color-primary-050);
+  border: 1px solid var(--color-primary-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-primary-700);
+}
+
+/* 아코디언 */
+.kx-m__acc {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.kx-m__acc-head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4);
+  border: none;
+  background: var(--color-white);
+  border-bottom: 1px solid var(--color-neutral-100);
+  cursor: pointer;
+}
+.kx-m__acc-head span:first-child {
+  font-size: var(--fs-h3);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-m__acc-count {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+}
+.kx-m__acc-body {
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.kx-m__check {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--color-neutral-050);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  flex: 1;
+  cursor: pointer;
+}
+.kx-m__check input {
+  margin-top: 2px;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  accent-color: var(--color-primary-600);
+}
+.kx-m__check.is-done span {
+  text-decoration: line-through;
+  color: var(--color-neutral-500);
+}
+.kx-m__check-text {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-m__check-text small {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-m__check-row {
+  display: flex;
+  align-items: stretch;
+  gap: var(--space-3);
+}
+.kx-m__camera {
+  width: 48px;
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-neutral-100);
+  border-radius: var(--radius-lg);
+  font-size: 20px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.kx-m__warn {
+  background: #fef3f2;
+  border: 1px solid var(--color-error);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+.kx-m__warn h3 {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-error);
+  margin-bottom: var(--space-2);
+}
+.kx-m__warn ul {
+  list-style: disc;
+  padding-left: var(--space-5);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.kx-m__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  background: var(--color-neutral-050);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+}
+.kx-m__field label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-m__rule {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+}
+.kx-m__input-wrap {
+  position: relative;
+}
+.kx-m__input-wrap input {
+  width: 100%;
+  height: 56px;
+  padding: 0 44px 0 16px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-h2);
+  font-weight: 600;
+  background: var(--color-white);
+}
+.kx-m__unit {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-500);
+}
+.kx-m__field-err {
+  font-size: var(--fs-caption);
+  color: var(--color-error);
+  font-weight: 600;
+}
+
+/* 하단 */
+.kx-m__foot {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 390px;
+  max-width: 100vw;
+  background: var(--color-white);
+  border-top: var(--border-card);
+  padding: var(--space-4);
+  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 12px));
+  z-index: 20;
+}
+.kx-m__foot-note {
+  text-align: center;
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  margin-bottom: var(--space-2);
+}
+.kx-m__cta {
+  width: 100%;
+  height: 52px;
+  border: none;
+  border-radius: var(--radius-lg);
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  cursor: pointer;
+}
+.kx-m__cta:disabled {
+  background: var(--color-primary-100);
+  color: var(--color-white);
+  cursor: not-allowed;
+}
+.kx-m__foot--dual {
+  display: flex;
+  gap: var(--space-3);
+}
+.kx-m__cta--danger {
+  background: var(--color-error);
+}
+.kx-m__cta--ok {
+  background: var(--color-success);
+}
+.kx-m__cta--ok:disabled {
+  background: #a6e0c8;
+}
+
+/* ── SCR-M2 비교/검수 ── */
+.kx-m__compare {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.kx-m__compare-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-neutral-100);
+  background: var(--color-neutral-050);
+}
+.kx-m__compare-head h2 {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-m__flag {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-ai-accent);
+  background: var(--color-ai-surface);
+  border: 1px solid var(--color-ai-accent);
+  padding: 3px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-m__compare-imgs {
+  display: flex;
+  align-items: stretch;
+  gap: var(--space-2);
+  padding: var(--space-3);
+}
+.kx-m__compare-imgs figure {
+  flex: 1;
+  position: relative;
+  margin: 0;
+}
+.kx-m__compare-imgs img {
+  width: 100%;
+  aspect-ratio: 4 / 5;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-neutral-200);
+}
+.kx-m__img-label {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: var(--color-neutral-700);
+  background: rgba(255, 255, 255, 0.85);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  z-index: 1;
+  white-space: nowrap;
+}
+.kx-m__compare-div {
+  align-self: center;
+  color: var(--color-neutral-500);
+  font-size: 14px;
+}
+.kx-m__dots {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-1);
+  padding-bottom: var(--space-3);
+}
+.kx-m__dots button {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: none;
+  background: var(--color-neutral-200);
+  cursor: pointer;
+}
+.kx-m__dots button.is-active {
+  background: var(--color-primary-600);
+}
+
+.kx-m__ilist {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-m__ilist h3 {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  padding: 0 var(--space-1);
+}
+.kx-m__icard {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-left: 4px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-m__icard.is-fail {
+  border-color: var(--color-error);
+  border-left-color: var(--color-error);
+  background: #fffbfa;
+}
+.kx-m__icard-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.kx-m__icard-label {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-m__icard-label small {
+  font-size: 11px;
+  color: var(--color-error);
+  font-weight: 700;
+  margin-top: 2px;
+}
+.kx-m__verdict {
+  display: flex;
+  background: var(--color-neutral-050);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  padding: 2px;
+  flex-shrink: 0;
+}
+.kx-m__verdict button {
+  border: none;
+  background: transparent;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kx-m__verdict button.is-pass {
+  background: var(--color-white);
+  color: var(--color-success);
+  box-shadow: var(--shadow-level2);
+}
+.kx-m__verdict button.is-fail {
+  background: var(--color-error);
+  color: var(--color-white);
+}
+.kx-m__icard-evidence {
+  display: flex;
+  gap: var(--space-2);
+}
+.kx-m__icard-evidence img {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  border: 1px solid var(--color-error);
+  flex-shrink: 0;
+}
+.kx-m__icard-evidence textarea {
+  flex: 1;
+  border: 1px solid var(--color-error);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2);
+  font-size: var(--fs-caption);
+  resize: none;
+  font-family: inherit;
+}
diff --git a/src/frontend/src/screens/movein/DockReservationPage.tsx b/src/frontend/src/screens/movein/DockReservationPage.tsx
new file mode 100644
index 0000000..459afcd
--- /dev/null
+++ b/src/frontend/src/screens/movein/DockReservationPage.tsx
@@ -0,0 +1,488 @@
+/*
+ * SCR-25 반입/반출 도크 슬롯 예약 [M8]. Stitch scr_25_dock_reservation 이식.
+ * 진입: 통합 일정 / 사이드바 "반입·반출" (design.md §3 SCR-25).
+ * 구성: ①상단 필터(반입/반출 토글·일자) ②좌 하역장 도크 × 시간대 슬롯 그리드
+ *       (예약 셀·중량물 우선·빈 셀 선택) ③우 예약 폼(차량·중량·품목·지게차·통행증 QR) + AI 대기열 예측.
+ * ★ 실 API 배선(useQuery/useMutation) — GET /docks · POST /dock-reservations(409 충돌) · GET /dock-forecast.
+ *   예측 카드는 실 집계이며, 데이터 부재 시 표준 패턴 폴백(폴백 배지 유지).
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { AiLabel } from '../../components/ui/Badge';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconSpark } from '../../components/ui/icons';
+import { ApiRequestError } from '../../api/client';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { logisticsApi, type Dock, type GridReservation } from './logisticsApi';
+import { EquipmentTab, InboundTab, RentalTab } from './LogisticsExtTabs';
+import './movein.css';
+
+type LogisticsTab = 'dock' | 'equipment' | 'rental' | 'inbound';
+
+/**
+ * SCR-25 물류 허브(/logistics) — M8. 탭 4종: 도크 예약(기존) · 장비 신청(F041) · 렌탈 주문(F042) · 선입고(F043).
+ * 도크 예약 탭은 기존 스케줄 그리드를 그대로 유지, 확장 탭은 LogisticsExtTabs 로 위임.
+ */
+export function DockReservationPage() {
+  const { t } = useTranslation();
+  const eventId = useResolvedEventId();
+  const [tab, setTab] = useState<LogisticsTab>('dock');
+  const tabs: LogisticsTab[] = ['dock', 'equipment', 'rental', 'inbound'];
+
+  return (
+    <div className="kx-page">
+      <header className="kx-dock__head">
+        <div>
+          <h1 className="kx-dock__title">{t('logistics.title')}</h1>
+          <p className="kx-dock__subtitle">{t('logistics.subtitle')}</p>
+        </div>
+      </header>
+
+      <div className="kx-seg kx-logi__tabs" role="tablist" aria-label={t('logistics.tabsAria')}>
+        {tabs.map((key) => (
+          <button
+            key={key}
+            role="tab"
+            aria-selected={tab === key}
+            className={`kx-seg__btn ${tab === key ? 'is-active' : ''}`}
+            onClick={() => setTab(key)}
+          >
+            {t(`logistics.tabs.${key}`)}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'dock' && <DockScheduleTab />}
+      {tab === 'equipment' && <EquipmentTab eventId={eventId} />}
+      {tab === 'rental' && <RentalTab eventId={eventId} />}
+      {tab === 'inbound' && <InboundTab eventId={eventId} />}
+    </div>
+  );
+}
+
+const WEIGHTS = ['1t', '2.5t', '5t', '11t 이상'];
+
+interface DockForm {
+  vehicleNo: string;
+  weight: string;
+  item: string;
+  forklift: boolean;
+}
+const EMPTY_FORM: DockForm = { vehicleNo: '', weight: '5t', item: '전시 부스 자재', forklift: false };
+
+/** 시간대 라벨 배열(gridStartHour 부터 hours 개). */
+function hourLabels(gridStartHour: number, hours: number): string[] {
+  return Array.from({ length: hours }, (_, i) => `${String(gridStartHour + i).padStart(2, '0')}:00`);
+}
+
+function DockScheduleTab() {
+  const eventId = useResolvedEventId();
+  const queryClient = useQueryClient();
+  const [direction, setDirection] = useState<'in' | 'out'>('in');
+  const [date, setDate] = useState<string>(''); // '' → 서버 기본 일자
+  const [form, setForm] = useState<DockForm>(EMPTY_FORM);
+  const [selected, setSelected] = useState<{ dock: number; hour: number } | null>(null);
+  const [toast, setToast] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 2600);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  const boardQ = useQuery({
+    queryKey: ['dock-board', eventId, direction, date],
+    queryFn: () => logisticsApi.board(eventId as string, direction, date || undefined),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const board = boardQ.data;
+  const boardDate = board?.date ?? '';
+  const gridStartHour = board?.gridStartHour ?? 8;
+  const hours = board?.hours ?? 12;
+  const hourList = useMemo(() => hourLabels(gridStartHour, hours), [gridStartHour, hours]);
+  const docks: Dock[] = board?.docks ?? [];
+
+  const forecastQ = useQuery({
+    queryKey: ['dock-forecast', eventId, boardDate],
+    queryFn: () => logisticsApi.forecast(eventId as string, boardDate),
+    enabled: !!eventId && !!boardDate,
+    retry: false,
+  });
+
+  const reserve = useMutation({
+    mutationFn: () => {
+      if (!selected) throw new ApiRequestError('VALIDATION', '먼저 슬롯을 선택하세요.', 400);
+      const span = Math.min(2, hours - selected.hour);
+      return logisticsApi.reserve(eventId as string, {
+        direction,
+        date: boardDate,
+        dockIndex: selected.dock,
+        startHour: gridStartHour + selected.hour,
+        span: Math.max(1, span),
+        vehicleNo: form.vehicleNo || undefined,
+        weight: form.weight,
+        item: form.item || undefined,
+        forklift: form.forklift,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['dock-board', eventId, direction, date] });
+      queryClient.invalidateQueries({ queryKey: ['dock-forecast', eventId, boardDate] });
+      setSelected(null);
+      setToast('슬롯 예약 완료 — 통행증(QR)을 발급하세요.');
+    },
+    onError: (e) => {
+      if (e instanceof ApiRequestError && e.code === 'CONFLICT') {
+        setToast('이미 예약된 슬롯과 겹칩니다. 다른 시간대를 선택하세요.');
+        return;
+      }
+      const msg = e instanceof ApiRequestError ? e.message : '예약에 실패했습니다.';
+      setToast(msg);
+    },
+  });
+
+  // 그리드 예약을 도크 인덱스 기준으로 변환(DockRowCells 계약).
+  const reservations = board?.reservations ?? [];
+
+  function pickCell(dock: number, hour: number) {
+    setSelected({ dock, hour });
+    setToast(`${docks[dock]?.label ?? `도크 ${dock + 1}`} · ${hourList[hour]} 슬롯 선택`);
+  }
+
+  const set = <K extends keyof DockForm>(k: K, v: DockForm[K]) => setForm((f) => ({ ...f, [k]: v }));
+
+  const status: 'loading' | 'error' | 'success' = boardQ.isPending
+    ? 'loading'
+    : boardQ.isError
+      ? 'error'
+      : 'success';
+
+  return (
+    <>
+      {/* 필터 바 */}
+      <div className="kx-dock__filters">
+        <label className="kx-dock__field">
+          <span className="kx-dock__label">일자</span>
+          <input
+            type="date"
+            className="kx-select"
+            aria-label="예약 일자"
+            value={date || boardDate}
+            onChange={(e) => {
+              setDate(e.target.value);
+              setSelected(null);
+            }}
+          />
+        </label>
+        <div className="kx-dock__filters-spacer" />
+        <div className="kx-seg" role="tablist" aria-label="반입/반출 전환">
+          <button
+            role="tab"
+            aria-selected={direction === 'in'}
+            className={`kx-seg__btn ${direction === 'in' ? 'is-active' : ''}`}
+            onClick={() => {
+              setDirection('in');
+              setSelected(null);
+            }}
+          >
+            반입
+          </button>
+          <button
+            role="tab"
+            aria-selected={direction === 'out'}
+            className={`kx-seg__btn ${direction === 'out' ? 'is-active' : ''}`}
+            onClick={() => {
+              setDirection('out');
+              setSelected(null);
+            }}
+          >
+            반출
+          </button>
+        </div>
+      </div>
+
+      {status === 'loading' && (
+        <div className="kx-dock__split" aria-busy="true">
+          <section className="kx-card">
+            <Skeleton height={360} />
+          </section>
+          <section className="kx-card">
+            <Skeleton height={240} />
+          </section>
+        </div>
+      )}
+
+      {status === 'error' && (
+        <ErrorState message="도크 예약 현황을 불러오지 못했습니다." onRetry={() => boardQ.refetch()} />
+      )}
+
+      {status === 'success' && (
+        <div className="kx-dock__split">
+          {/* 좌: 스케줄 그리드 */}
+          <section
+            className="kx-card kx-dock__grid"
+            aria-label={`${direction === 'in' ? '반입' : '반출'} 도크 슬롯 그리드`}
+          >
+            {docks.length === 0 ? (
+              <EmptyState title="예약 가능한 슬롯이 없습니다" description="행사 배정 홀에 도크가 없습니다." />
+            ) : (
+              <>
+                <div className="kx-dock__grid-scroll">
+                  <div className="kx-dock__ghead">
+                    <div className="kx-dock__ghead-dock">DOCK</div>
+                    <div className="kx-dock__times">
+                      {hourList.map((h) => (
+                        <div key={h} className="kx-dock__time tnum">
+                          {h}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  {docks.map((dock, di) => (
+                    <div key={dock.id} className="kx-dock__row">
+                      <div className="kx-dock__row-label">{dock.label}</div>
+                      <DockRowCells
+                        dockIndex={di}
+                        hours={hours}
+                        dockLabel={dock.label}
+                        hourList={hourList}
+                        reservations={reservations}
+                        selected={selected}
+                        onPick={pickCell}
+                      />
+                    </div>
+                  ))}
+                </div>
+                <div className="kx-dock__legend">
+                  <span>
+                    <span className="kx-dock__swatch kx-dock__swatch--booked" /> 예약됨
+                  </span>
+                  <span>
+                    <span className="kx-dock__swatch kx-dock__swatch--priority" /> 중량물 우선(5t↑)
+                  </span>
+                  <span>
+                    <span className="kx-dock__swatch kx-dock__swatch--open" /> 예약 가능
+                  </span>
+                </div>
+              </>
+            )}
+          </section>
+
+          {/* 우: 예약 폼 + AI */}
+          <aside className="kx-dock__aside">
+            <section className="kx-card">
+              <span className="kx-dock__panel-title">슬롯 예약</span>
+              <div className="kx-dock__form">
+                {selected && (
+                  <p className="kx-dock__slot-note">
+                    선택: {docks[selected.dock]?.label} · {hourList[selected.hour]} ·{' '}
+                    {direction === 'in' ? '반입' : '반출'}
+                  </p>
+                )}
+                <label className="kx-dock__field">
+                  <span className="kx-dock__label">차량 번호</span>
+                  <input
+                    className="kx-dock__input"
+                    placeholder="예: 12가 3456"
+                    value={form.vehicleNo}
+                    onChange={(e) => set('vehicleNo', e.target.value)}
+                  />
+                </label>
+                <label className="kx-dock__field">
+                  <span className="kx-dock__label">차량 중량</span>
+                  <select
+                    className="kx-dock__select"
+                    value={form.weight}
+                    onChange={(e) => set('weight', e.target.value)}
+                  >
+                    {WEIGHTS.map((w) => (
+                      <option key={w} value={w}>
+                        {w}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label className="kx-dock__field">
+                  <span className="kx-dock__label">{direction === 'in' ? '반입' : '반출'} 품목</span>
+                  <input
+                    className="kx-dock__input"
+                    value={form.item}
+                    onChange={(e) => set('item', e.target.value)}
+                  />
+                </label>
+                <label className="kx-dock__check">
+                  <input
+                    type="checkbox"
+                    checked={form.forklift}
+                    onChange={(e) => set('forklift', e.target.checked)}
+                  />
+                  지게차 신청 (유료)
+                </label>
+
+                <button
+                  type="button"
+                  className="kx-dock__qr"
+                  disabled={reserve.isPending}
+                  onClick={() => {
+                    if (!selected) {
+                      setToast('먼저 슬롯을 선택하세요.');
+                      return;
+                    }
+                    reserve.mutate();
+                  }}
+                >
+                  <span className="kx-dock__qr-main">
+                    <span className="kx-dock__qr-title">
+                      {reserve.isPending ? '예약 중…' : '예약 · 통행증 발급 (QR)'}
+                    </span>
+                    <span className="kx-dock__qr-sub">Reserve & Generate Logistics Pass</span>
+                  </span>
+                  <span className="kx-dock__qr-glyph" aria-hidden="true">
+                    <QrGlyph />
+                  </span>
+                </button>
+              </div>
+            </section>
+
+            <section className="kx-dock__ai" aria-label="대기열 예측">
+              <div className="kx-dock__ai-head">
+                <span className="kx-dock__ai-title">
+                  <IconSpark size={18} /> {direction === 'out' ? '철거일' : '반입일'} 대기열 예측
+                </span>
+                <AiLabel>{forecastQ.data?.fallback ? 'AI 예측 · 폴백' : 'AI 예측'}</AiLabel>
+              </div>
+              {forecastQ.isPending ? (
+                <Skeleton height={120} />
+              ) : (
+                <>
+                  <div
+                    className="kx-dock__chart"
+                    role="img"
+                    aria-label={`시간대별 차량 밀집도 예측 — ${forecastQ.data?.peakLabel ?? ''}경 피크`}
+                  >
+                    {(forecastQ.data?.hourly ?? []).map((h, i) => (
+                      <span
+                        key={i}
+                        className="kx-dock__bar"
+                        style={{ height: `${h}%`, opacity: 0.35 + (h / 100) * 0.65 }}
+                      />
+                    ))}
+                  </div>
+                  <div className="kx-dock__chart-axis tnum">
+                    <span>{hourList[0]}</span>
+                    <span>{hourList[Math.floor(hours / 3)]}</span>
+                    <span>{hourList[Math.floor((hours * 2) / 3)]}</span>
+                    <span>{hourList[hours - 1]}</span>
+                  </div>
+                  <div className="kx-dock__ai-callout">
+                    {forecastQ.data?.fallback
+                      ? '예약 데이터가 아직 없어 표준 패턴을 표시합니다. '
+                      : ''}
+                    <strong>{forecastQ.data?.peakLabel ?? '오후'}</strong>경 차량 밀집도가 가장 높을
+                    것으로 예상됩니다. 예약 분산을 권장합니다.
+                  </div>
+                </>
+              )}
+            </section>
+          </aside>
+        </div>
+      )}
+
+      {toast && (
+        <div className="kx-dock__toast" role="status">
+          {toast}
+        </div>
+      )}
+    </>
+  );
+}
+
+/** 단일 도크 행의 시간대 셀 — 예약 블록은 span, 빈 칸은 선택 가능한 셀. */
+function DockRowCells({
+  dockIndex,
+  hours,
+  dockLabel,
+  hourList,
+  reservations,
+  selected,
+  onPick,
+}: {
+  dockIndex: number;
+  hours: number;
+  dockLabel: string;
+  hourList: string[];
+  reservations: GridReservation[];
+  selected: { dock: number; hour: number } | null;
+  onPick: (dock: number, hour: number) => void;
+}) {
+  const cells = useMemo(() => {
+    const rowRes = reservations
+      .filter((r) => r.dockIndex === dockIndex)
+      .sort((a, b) => a.start - b.start);
+    const out: JSX.Element[] = [];
+    let col = 0;
+    while (col < hours) {
+      const res = rowRes.find((r) => r.start === col);
+      if (res) {
+        out.push(
+          <div
+            key={`r${col}`}
+            className={`kx-dock__block kx-dock__block--${res.tone}`}
+            style={{ gridColumn: `span ${res.span}` }}
+            title={res.label}
+          >
+            {res.tone === 'priority' && <IconSpark size={12} />}
+            <span className="kx-dock__block-text">{res.label}</span>
+          </div>,
+        );
+        col += res.span;
+      } else {
+        const isSel = selected?.dock === dockIndex && selected?.hour === col;
+        const hour = col;
+        out.push(
+          <div
+            key={`c${col}`}
+            className={`kx-dock__cell ${isSel ? 'is-selected' : ''}`}
+            role="button"
+            tabIndex={0}
+            aria-label={`${dockLabel} ${hourList[hour]} 예약 가능`}
+            onClick={() => onPick(dockIndex, hour)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onPick(dockIndex, hour);
+              }
+            }}
+          />,
+        );
+        col += 1;
+      }
+    }
+    return out;
+  }, [dockIndex, hours, dockLabel, hourList, reservations, selected, onPick]);
+
+  return <div className="kx-dock__cells">{cells}</div>;
+}
+
+/** 통행증 미리보기용 QR 형태 SVG(인라인·이모지 금지). */
+function QrGlyph() {
+  return (
+    <svg width={40} height={40} viewBox="0 0 40 40" fill="none" aria-hidden="true">
+      <rect x="2" y="2" width="12" height="12" rx="1" stroke="#101828" strokeWidth="2.5" />
+      <rect x="26" y="2" width="12" height="12" rx="1" stroke="#101828" strokeWidth="2.5" />
+      <rect x="2" y="26" width="12" height="12" rx="1" stroke="#101828" strokeWidth="2.5" />
+      <rect x="6" y="6" width="4" height="4" fill="#101828" />
+      <rect x="30" y="6" width="4" height="4" fill="#101828" />
+      <rect x="6" y="30" width="4" height="4" fill="#101828" />
+      <rect x="20" y="20" width="4" height="4" fill="#101828" />
+      <rect x="28" y="20" width="4" height="4" fill="#101828" />
+      <rect x="34" y="26" width="4" height="4" fill="#101828" />
+      <rect x="20" y="30" width="4" height="4" fill="#101828" />
+      <rect x="28" y="34" width="4" height="4" fill="#101828" />
+      <rect x="20" y="6" width="4" height="10" fill="#101828" />
+    </svg>
+  );
+}
diff --git a/src/frontend/src/screens/movein/LogisticsExtTabs.tsx b/src/frontend/src/screens/movein/LogisticsExtTabs.tsx
new file mode 100644
index 0000000..8c71209
--- /dev/null
+++ b/src/frontend/src/screens/movein/LogisticsExtTabs.tsx
@@ -0,0 +1,484 @@
+/*
+ * M8 물류 확장 탭 — F041 장비 신청 · F042 렌탈 주문 · F043 선입고 트래킹.
+ * DockReservationPage(/logistics) 탭 확장으로 진입. 기존 도크 예약 컨벤션(카드·필터·토스트) 재사용.
+ * 실 API: logisticsExtApi(GET /logistics/ext · POST 신청/주문/등록 · POST 상태전이). 금액은 서버 권위 표시만.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { ApiRequestError } from '../../api/client';
+import {
+  logisticsExtApi,
+  type EquipmentItem,
+  type EquipmentRequestView,
+  type InboundView,
+  type RentalItem,
+  type RentalOrderView,
+} from './logisticsExtApi';
+
+function useBoard(eventId: string | null) {
+  return useQuery({
+    queryKey: ['logi-ext', eventId],
+    queryFn: () => logisticsExtApi.board(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+}
+
+function krw(n: number): string {
+  return `${(n ?? 0).toLocaleString('ko-KR')}원`;
+}
+
+function useToast(): [string | null, (m: string | null) => void] {
+  const [toast, setToast] = useState<string | null>(null);
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 2600);
+    return () => clearTimeout(t);
+  }, [toast]);
+  return [toast, setToast];
+}
+
+/** 상태 배지 — 상태코드별 톤 매핑. */
+function StatusPill({ ns, status }: { ns: 'equipment' | 'rental' | 'inbound'; status: string }) {
+  const { t } = useTranslation();
+  const tone =
+    status === 'approved' || status === 'confirmed' || status === 'done' || status === 'delivered' || status === 'delivered_booth'
+      ? 'ok'
+      : status === 'rejected' || status === 'cancelled'
+        ? 'no'
+        : 'wait';
+  return <span className={`kx-logi__pill kx-logi__pill--${tone}`}>{t(`logistics.${ns}.st.${status}`)}</span>;
+}
+
+/* ════════════════════════ 장비 신청 (F041) ════════════════════════ */
+export function EquipmentTab({ eventId }: { eventId: string | null }) {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const boardQ = useBoard(eventId);
+  const [toast, setToast] = useToast();
+  const [equipmentId, setEquipmentId] = useState('');
+  const [boothNo, setBoothNo] = useState('');
+  const [quantity, setQuantity] = useState(1);
+  const [useDate, setUseDate] = useState('');
+  const [days, setDays] = useState(1);
+
+  const board = boardQ.data;
+  const catalog: EquipmentItem[] = board?.equipmentCatalog ?? [];
+  const rows: EquipmentRequestView[] = board?.equipmentRequests ?? [];
+  const canManage = board?.canManage ?? false;
+  const selected = catalog.find((c) => c.id === equipmentId) ?? catalog[0];
+  const estimate = selected ? selected.unitPrice * Math.max(1, quantity) * Math.max(1, days) : 0;
+
+  const invalidate = () => qc.invalidateQueries({ queryKey: ['logi-ext', eventId] });
+
+  const submit = useMutation({
+    mutationFn: () =>
+      logisticsExtApi.requestEquipment(eventId as string, {
+        equipmentId: selected?.id ?? '',
+        boothNo: boothNo || undefined,
+        quantity: Math.max(1, quantity),
+        useDate: useDate || undefined,
+        days: Math.max(1, days),
+      }),
+    onSuccess: () => {
+      invalidate();
+      setToast(t('logistics.submitOk'));
+    },
+    onError: (e) => setToast(e instanceof ApiRequestError ? e.message : t('logistics.submitErr')),
+  });
+
+  const decide = useMutation({
+    mutationFn: (v: { id: string; status: string; reason?: string }) =>
+      logisticsExtApi.decideEquipment(eventId as string, v.id, { status: v.status, reason: v.reason }),
+    onSuccess: () => {
+      invalidate();
+      setToast(t('logistics.statusUpdated'));
+    },
+    onError: (e) => setToast(e instanceof ApiRequestError ? e.message : t('logistics.submitErr')),
+  });
+
+  if (boardQ.isPending) return <Skeleton height={280} />;
+  if (boardQ.isError) return <ErrorState message={t('logistics.loadErr')} onRetry={() => boardQ.refetch()} />;
+
+  return (
+    <div className="kx-logi__split">
+      <section className="kx-card">
+        <span className="kx-dock__panel-title">{t('logistics.equipment.formTitle')}</span>
+        <div className="kx-dock__form">
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.equipment.item')}</span>
+            <select className="kx-dock__select" value={selected?.id ?? ''} onChange={(e) => setEquipmentId(e.target.value)}>
+              {catalog.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.name} · {krw(c.unitPrice)}/{c.unit}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.boothNo')}</span>
+            <input className="kx-dock__input" value={boothNo} onChange={(e) => setBoothNo(e.target.value)} placeholder="A-101" />
+          </label>
+          <div className="kx-logi__row2">
+            <label className="kx-dock__field">
+              <span className="kx-dock__label">{t('logistics.qty')}</span>
+              <input type="number" min={1} className="kx-dock__input" value={quantity} onChange={(e) => setQuantity(Number(e.target.value) || 1)} />
+            </label>
+            <label className="kx-dock__field">
+              <span className="kx-dock__label">{t('logistics.equipment.days')}</span>
+              <input type="number" min={1} className="kx-dock__input" value={days} onChange={(e) => setDays(Number(e.target.value) || 1)} />
+            </label>
+          </div>
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.equipment.useDate')}</span>
+            <input type="date" className="kx-dock__input" value={useDate} onChange={(e) => setUseDate(e.target.value)} />
+          </label>
+          <p className="kx-logi__estimate">
+            {t('logistics.estimate')} <strong>{krw(estimate)}</strong>
+          </p>
+          <button type="button" className="kx-dock__qr" disabled={submit.isPending || !selected} onClick={() => submit.mutate()}>
+            <span className="kx-dock__qr-main">
+              <span className="kx-dock__qr-title">{submit.isPending ? t('logistics.submitting') : t('logistics.equipment.submit')}</span>
+              <span className="kx-dock__qr-sub">{t('logistics.serverAmountNote')}</span>
+            </span>
+          </button>
+        </div>
+      </section>
+
+      <section className="kx-card kx-logi__list">
+        <span className="kx-dock__panel-title">{t('logistics.equipment.listTitle')}</span>
+        {rows.length === 0 ? (
+          <EmptyState title={t('logistics.equipment.empty')} description={t('logistics.equipment.emptyDesc')} />
+        ) : (
+          <ul className="kx-logi__items">
+            {rows.map((r) => (
+              <li key={r.id} className="kx-logi__item">
+                <div className="kx-logi__item-main">
+                  <span className="kx-logi__item-name">{r.equipmentName}</span>
+                  <StatusPill ns="equipment" status={r.status} />
+                </div>
+                <div className="kx-logi__item-meta">
+                  {r.boothNo ? `${r.boothNo} · ` : ''}
+                  {t('logistics.qty')} {r.quantity} · {r.days}{t('logistics.equipment.daysUnit')} · <strong>{krw(r.amount)}</strong>
+                  {r.useDate ? ` · ${r.useDate}` : ''}
+                </div>
+                {r.rejectReason ? <div className="kx-logi__reason">{r.rejectReason}</div> : null}
+                {canManage && r.status === 'requested' && (
+                  <div className="kx-logi__actions">
+                    <button className="kx-logi__act kx-logi__act--ok" disabled={decide.isPending} onClick={() => decide.mutate({ id: r.id, status: 'approved' })}>
+                      {t('logistics.equipment.approve')}
+                    </button>
+                    <button className="kx-logi__act kx-logi__act--no" disabled={decide.isPending} onClick={() => decide.mutate({ id: r.id, status: 'rejected', reason: t('logistics.equipment.rejectReason') })}>
+                      {t('logistics.equipment.reject')}
+                    </button>
+                  </div>
+                )}
+                {canManage && r.status === 'approved' && (
+                  <div className="kx-logi__actions">
+                    <button className="kx-logi__act" disabled={decide.isPending} onClick={() => decide.mutate({ id: r.id, status: 'done' })}>
+                      {t('logistics.equipment.done')}
+                    </button>
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+      {toast && <div className="kx-dock__toast" role="status">{toast}</div>}
+    </div>
+  );
+}
+
+/* ════════════════════════ 렌탈 주문 (F042) ════════════════════════ */
+export function RentalTab({ eventId }: { eventId: string | null }) {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const boardQ = useBoard(eventId);
+  const [toast, setToast] = useToast();
+  const [itemId, setItemId] = useState('');
+  const [boothNo, setBoothNo] = useState('');
+  const [quantity, setQuantity] = useState(1);
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  const board = boardQ.data;
+  const catalog: RentalItem[] = board?.rentalCatalog ?? [];
+  const rows: RentalOrderView[] = board?.rentalOrders ?? [];
+  const canManage = board?.canManage ?? false;
+  const selected = catalog.find((c) => c.id === itemId) ?? catalog[0];
+
+  const days = useMemo(() => {
+    if (startDate && endDate) {
+      const s = new Date(startDate).getTime();
+      const e = new Date(endDate).getTime();
+      if (!Number.isNaN(s) && !Number.isNaN(e) && e >= s) {
+        return Math.floor((e - s) / 86400000) + 1;
+      }
+    }
+    return 1;
+  }, [startDate, endDate]);
+  const estimate = selected ? selected.dailyPrice * Math.max(1, quantity) * days : 0;
+
+  const invalidate = () => qc.invalidateQueries({ queryKey: ['logi-ext', eventId] });
+
+  const submit = useMutation({
+    mutationFn: () =>
+      logisticsExtApi.orderRental(eventId as string, {
+        itemId: selected?.id ?? '',
+        boothNo: boothNo || undefined,
+        quantity: Math.max(1, quantity),
+        startDate: startDate || undefined,
+        endDate: endDate || undefined,
+        days,
+      }),
+    onSuccess: () => {
+      invalidate();
+      setToast(t('logistics.submitOk'));
+    },
+    onError: (e) => setToast(e instanceof ApiRequestError ? e.message : t('logistics.submitErr')),
+  });
+
+  const decide = useMutation({
+    mutationFn: (v: { id: string; status: string }) => logisticsExtApi.decideRental(eventId as string, v.id, { status: v.status }),
+    onSuccess: () => {
+      invalidate();
+      setToast(t('logistics.statusUpdated'));
+    },
+    onError: (e) => setToast(e instanceof ApiRequestError ? e.message : t('logistics.submitErr')),
+  });
+
+  if (boardQ.isPending) return <Skeleton height={280} />;
+  if (boardQ.isError) return <ErrorState message={t('logistics.loadErr')} onRetry={() => boardQ.refetch()} />;
+
+  return (
+    <div className="kx-logi__split">
+      <section className="kx-card">
+        <span className="kx-dock__panel-title">{t('logistics.rental.formTitle')}</span>
+        <div className="kx-dock__form">
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.rental.item')}</span>
+            <select className="kx-dock__select" value={selected?.id ?? ''} onChange={(e) => setItemId(e.target.value)}>
+              {catalog.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.name} · {krw(c.dailyPrice)}/{c.unit}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.boothNo')}</span>
+            <input className="kx-dock__input" value={boothNo} onChange={(e) => setBoothNo(e.target.value)} placeholder="A-101" />
+          </label>
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.qty')}</span>
+            <input type="number" min={1} className="kx-dock__input" value={quantity} onChange={(e) => setQuantity(Number(e.target.value) || 1)} />
+          </label>
+          <div className="kx-logi__row2">
+            <label className="kx-dock__field">
+              <span className="kx-dock__label">{t('logistics.rental.start')}</span>
+              <input type="date" className="kx-dock__input" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+            </label>
+            <label className="kx-dock__field">
+              <span className="kx-dock__label">{t('logistics.rental.end')}</span>
+              <input type="date" className="kx-dock__input" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
+            </label>
+          </div>
+          <p className="kx-logi__estimate">
+            {t('logistics.rental.period', { days })} · {t('logistics.estimate')} <strong>{krw(estimate)}</strong>
+          </p>
+          <button type="button" className="kx-dock__qr" disabled={submit.isPending || !selected} onClick={() => submit.mutate()}>
+            <span className="kx-dock__qr-main">
+              <span className="kx-dock__qr-title">{submit.isPending ? t('logistics.submitting') : t('logistics.rental.submit')}</span>
+              <span className="kx-dock__qr-sub">{t('logistics.serverAmountNote')}</span>
+            </span>
+          </button>
+        </div>
+      </section>
+
+      <section className="kx-card kx-logi__list">
+        <span className="kx-dock__panel-title">{t('logistics.rental.listTitle')}</span>
+        {rows.length === 0 ? (
+          <EmptyState title={t('logistics.rental.empty')} description={t('logistics.rental.emptyDesc')} />
+        ) : (
+          <ul className="kx-logi__items">
+            {rows.map((r) => (
+              <li key={r.id} className="kx-logi__item">
+                <div className="kx-logi__item-main">
+                  <span className="kx-logi__item-name">{r.itemName}</span>
+                  <StatusPill ns="rental" status={r.status} />
+                </div>
+                <div className="kx-logi__item-meta">
+                  {r.boothNo ? `${r.boothNo} · ` : ''}
+                  {t('logistics.qty')} {r.quantity} · {t('logistics.rental.period', { days: r.days })} · <strong>{krw(r.amount)}</strong>
+                  {r.startDate ? ` · ${r.startDate}~${r.endDate ?? ''}` : ''}
+                </div>
+                {canManage && r.status === 'ordered' && (
+                  <div className="kx-logi__actions">
+                    <button className="kx-logi__act kx-logi__act--ok" disabled={decide.isPending} onClick={() => decide.mutate({ id: r.id, status: 'confirmed' })}>
+                      {t('logistics.rental.confirm')}
+                    </button>
+                    <button className="kx-logi__act kx-logi__act--no" disabled={decide.isPending} onClick={() => decide.mutate({ id: r.id, status: 'cancelled' })}>
+                      {t('logistics.rental.cancel')}
+                    </button>
+                  </div>
+                )}
+                {canManage && r.status === 'confirmed' && (
+                  <div className="kx-logi__actions">
+                    <button className="kx-logi__act" disabled={decide.isPending} onClick={() => decide.mutate({ id: r.id, status: 'delivered' })}>
+                      {t('logistics.rental.deliver')}
+                    </button>
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+      {toast && <div className="kx-dock__toast" role="status">{toast}</div>}
+    </div>
+  );
+}
+
+/* ════════════════════════ 선입고 트래킹 (F043) ════════════════════════ */
+const INBOUND_FLOW = ['registered', 'inbound_scheduled', 'arrived_warehouse', 'delivered_booth'] as const;
+const NEXT_INBOUND: Record<string, string | null> = {
+  registered: 'inbound_scheduled',
+  inbound_scheduled: 'arrived_warehouse',
+  arrived_warehouse: 'delivered_booth',
+  delivered_booth: null,
+};
+
+export function InboundTab({ eventId }: { eventId: string | null }) {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const boardQ = useBoard(eventId);
+  const [toast, setToast] = useToast();
+  const [trackingNo, setTrackingNo] = useState('');
+  const [carrier, setCarrier] = useState('');
+  const [boothNo, setBoothNo] = useState('');
+  const [itemDesc, setItemDesc] = useState('');
+  const [quantity, setQuantity] = useState(1);
+  const [etaDate, setEtaDate] = useState('');
+
+  const board = boardQ.data;
+  const rows: InboundView[] = board?.inbound ?? [];
+  const canManage = board?.canManage ?? false;
+
+  const invalidate = () => qc.invalidateQueries({ queryKey: ['logi-ext', eventId] });
+
+  const submit = useMutation({
+    mutationFn: () =>
+      logisticsExtApi.registerInbound(eventId as string, {
+        trackingNo: trackingNo.trim(),
+        carrier: carrier || undefined,
+        boothNo: boothNo || undefined,
+        itemDesc: itemDesc || undefined,
+        quantity: Math.max(1, quantity),
+        etaDate: etaDate || undefined,
+      }),
+    onSuccess: () => {
+      invalidate();
+      setTrackingNo('');
+      setToast(t('logistics.submitOk'));
+    },
+    onError: (e) => setToast(e instanceof ApiRequestError ? e.message : t('logistics.submitErr')),
+  });
+
+  const advance = useMutation({
+    mutationFn: (v: { id: string; status: string }) => logisticsExtApi.advanceInbound(eventId as string, v.id, { status: v.status }),
+    onSuccess: () => {
+      invalidate();
+      setToast(t('logistics.statusUpdated'));
+    },
+    onError: (e) => setToast(e instanceof ApiRequestError ? e.message : t('logistics.submitErr')),
+  });
+
+  if (boardQ.isPending) return <Skeleton height={280} />;
+  if (boardQ.isError) return <ErrorState message={t('logistics.loadErr')} onRetry={() => boardQ.refetch()} />;
+
+  return (
+    <div className="kx-logi__split">
+      <section className="kx-card">
+        <span className="kx-dock__panel-title">{t('logistics.inbound.formTitle')}</span>
+        <div className="kx-dock__form">
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.inbound.trackingNo')}</span>
+            <input className="kx-dock__input" value={trackingNo} onChange={(e) => setTrackingNo(e.target.value)} placeholder="1234-5678-9012" />
+          </label>
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.inbound.carrier')}</span>
+            <input className="kx-dock__input" value={carrier} onChange={(e) => setCarrier(e.target.value)} />
+          </label>
+          <div className="kx-logi__row2">
+            <label className="kx-dock__field">
+              <span className="kx-dock__label">{t('logistics.boothNo')}</span>
+              <input className="kx-dock__input" value={boothNo} onChange={(e) => setBoothNo(e.target.value)} placeholder="A-101" />
+            </label>
+            <label className="kx-dock__field">
+              <span className="kx-dock__label">{t('logistics.qty')}</span>
+              <input type="number" min={1} className="kx-dock__input" value={quantity} onChange={(e) => setQuantity(Number(e.target.value) || 1)} />
+            </label>
+          </div>
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.inbound.itemDesc')}</span>
+            <input className="kx-dock__input" value={itemDesc} onChange={(e) => setItemDesc(e.target.value)} />
+          </label>
+          <label className="kx-dock__field">
+            <span className="kx-dock__label">{t('logistics.inbound.eta')}</span>
+            <input type="date" className="kx-dock__input" value={etaDate} onChange={(e) => setEtaDate(e.target.value)} />
+          </label>
+          <button type="button" className="kx-dock__qr" disabled={submit.isPending || !trackingNo.trim()} onClick={() => submit.mutate()}>
+            <span className="kx-dock__qr-main">
+              <span className="kx-dock__qr-title">{submit.isPending ? t('logistics.submitting') : t('logistics.inbound.submit')}</span>
+              <span className="kx-dock__qr-sub">{t('logistics.inbound.submitSub')}</span>
+            </span>
+          </button>
+        </div>
+      </section>
+
+      <section className="kx-card kx-logi__list">
+        <span className="kx-dock__panel-title">{t('logistics.inbound.listTitle')}</span>
+        {rows.length === 0 ? (
+          <EmptyState title={t('logistics.inbound.empty')} description={t('logistics.inbound.emptyDesc')} />
+        ) : (
+          <ul className="kx-logi__items">
+            {rows.map((r) => {
+              const step = INBOUND_FLOW.indexOf(r.status as (typeof INBOUND_FLOW)[number]);
+              const next = NEXT_INBOUND[r.status];
+              return (
+                <li key={r.id} className="kx-logi__item">
+                  <div className="kx-logi__item-main">
+                    <span className="kx-logi__item-name">{r.trackingNo}</span>
+                    <StatusPill ns="inbound" status={r.status} />
+                  </div>
+                  <div className="kx-logi__item-meta">
+                    {r.carrier ? `${r.carrier} · ` : ''}
+                    {r.boothNo ? `${r.boothNo} · ` : ''}
+                    {r.itemDesc ?? ''} {t('logistics.qty')} {r.quantity}
+                    {r.etaDate ? ` · ${t('logistics.inbound.eta')} ${r.etaDate}` : ''}
+                  </div>
+                  <div className="kx-logi__track" aria-hidden="true">
+                    {INBOUND_FLOW.map((s, i) => (
+                      <span key={s} className={`kx-logi__track-dot ${i <= step ? 'is-done' : ''}`} />
+                    ))}
+                  </div>
+                  {canManage && next && (
+                    <div className="kx-logi__actions">
+                      <button className="kx-logi__act kx-logi__act--ok" disabled={advance.isPending} onClick={() => advance.mutate({ id: r.id, status: next })}>
+                        {t(`logistics.inbound.advance.${next}`)}
+                      </button>
+                    </div>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </section>
+      {toast && <div className="kx-dock__toast" role="status">{toast}</div>}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/movein/logisticsApi.ts b/src/frontend/src/screens/movein/logisticsApi.ts
new file mode 100644
index 0000000..07b493b
--- /dev/null
+++ b/src/frontend/src/screens/movein/logisticsApi.ts
@@ -0,0 +1,65 @@
+/*
+ * M8 반입/반출 도크 예약(SCR-25) 실배선 API 계약.
+ * 공용 클라이언트(../../api/client)만 사용 — client.ts·endpoints.ts·types.ts 무수정.
+ * 정본: 백엔드 LogisticsController 시그니처
+ *   - GET  /api/events/{eventId}/docks?direction=in|out&date=YYYY-MM-DD → ApiResponse<DockBoard>
+ *   - POST /api/events/{eventId}/dock-reservations                      → ApiResponse<GridReservation> (중복 409)
+ *   - GET  /api/events/{eventId}/dock-forecast?date=YYYY-MM-DD          → ApiResponse<Forecast>(fallback 폴백)
+ */
+import { api } from '../../api/client';
+
+export interface Dock {
+  id: string;
+  dockNo: number;
+  label: string;
+  heavyPriority: boolean;
+}
+export interface GridReservation {
+  id: string;
+  dockIndex: number;
+  start: number;
+  span: number;
+  label: string;
+  tone: 'booked' | 'priority';
+}
+export interface DockBoard {
+  direction: 'in' | 'out';
+  date: string;
+  gridStartHour: number;
+  hours: number;
+  docks: Dock[];
+  reservations: GridReservation[];
+}
+
+export interface ReservationBody {
+  direction: 'in' | 'out';
+  date: string;
+  dockIndex: number;
+  startHour: number;
+  span?: number;
+  vehicleNo?: string;
+  weight?: string;
+  item?: string;
+  forklift?: boolean;
+  companyName?: string;
+}
+
+export interface Forecast {
+  hourly: number[];
+  fallback: boolean;
+  peakLabel: string;
+}
+
+export const logisticsApi = {
+  board: (eventId: string, direction: 'in' | 'out', date?: string) => {
+    const qs = new URLSearchParams({ direction });
+    if (date) qs.set('date', date);
+    return api.get<DockBoard>(`/api/events/${encodeURIComponent(eventId)}/docks?${qs.toString()}`);
+  },
+  reserve: (eventId: string, body: ReservationBody) =>
+    api.post<GridReservation>(`/api/events/${encodeURIComponent(eventId)}/dock-reservations`, body),
+  forecast: (eventId: string, date: string) =>
+    api.get<Forecast>(
+      `/api/events/${encodeURIComponent(eventId)}/dock-forecast?date=${encodeURIComponent(date)}`,
+    ),
+};
diff --git a/src/frontend/src/screens/movein/logisticsExtApi.ts b/src/frontend/src/screens/movein/logisticsExtApi.ts
new file mode 100644
index 0000000..622fa11
--- /dev/null
+++ b/src/frontend/src/screens/movein/logisticsExtApi.ts
@@ -0,0 +1,148 @@
+/*
+ * M8 물류 확장(F041 장비 신청 · F042 렌탈 주문 · F043 선입고 트래킹) 실배선 API 계약.
+ * 공용 클라이언트(../../api/client)만 사용 — client.ts·endpoints.ts·types.ts 무수정.
+ * 정본: 백엔드 LogisticsExtController 시그니처 (/api/events/{eventId}/logistics/*)
+ *   - GET  /ext                              → ApiResponse<LogisticsExtBoard>
+ *   - POST /equipment-requests               → 장비 신청(멤버, 금액 서버 계산)
+ *   - POST /equipment-requests/{id}/status   → 승인/반려/처리완료(매니저)
+ *   - POST /rental-orders                    → 렌탈 주문(멤버, 기간·금액 서버 산출)
+ *   - POST /rental-orders/{id}/status        → 확정/취소/납품(매니저)
+ *   - POST /inbound                          → 운송장 등록(멤버)
+ *   - POST /inbound/{id}/status              → 입고예정/창고도착/부스전달 전이(매니저)
+ */
+import { api } from '../../api/client';
+
+export interface EquipmentItem {
+  id: string;
+  code: string;
+  name: string;
+  category: string;
+  unit: string;
+  unitPrice: number;
+  spec: string | null;
+}
+export interface EquipmentRequestView {
+  id: string;
+  equipmentId: string;
+  equipmentName: string;
+  category: string | null;
+  unitPrice: number;
+  boothNo: string | null;
+  quantity: number;
+  useDate: string | null;
+  days: number;
+  amount: number;
+  status: 'requested' | 'approved' | 'rejected' | 'done';
+  note: string | null;
+  rejectReason: string | null;
+  createdAt: string;
+}
+export interface RentalItem {
+  id: string;
+  code: string;
+  name: string;
+  category: string;
+  unit: string;
+  dailyPrice: number;
+  spec: string | null;
+}
+export interface RentalOrderView {
+  id: string;
+  itemId: string;
+  itemName: string;
+  category: string | null;
+  dailyPrice: number;
+  boothNo: string | null;
+  quantity: number;
+  startDate: string | null;
+  endDate: string | null;
+  days: number;
+  amount: number;
+  status: 'ordered' | 'confirmed' | 'cancelled' | 'delivered';
+  note: string | null;
+  createdAt: string;
+}
+export interface InboundView {
+  id: string;
+  trackingNo: string;
+  carrier: string | null;
+  boothNo: string | null;
+  itemDesc: string | null;
+  quantity: number;
+  status: 'registered' | 'inbound_scheduled' | 'arrived_warehouse' | 'delivered_booth';
+  etaDate: string | null;
+  warehouseAt: string | null;
+  deliveredAt: string | null;
+  note: string | null;
+  createdAt: string;
+}
+export interface LogisticsExtBoard {
+  canManage: boolean;
+  equipmentCatalog: EquipmentItem[];
+  equipmentRequests: EquipmentRequestView[];
+  rentalCatalog: RentalItem[];
+  rentalOrders: RentalOrderView[];
+  inbound: InboundView[];
+}
+
+export interface EquipmentRequestBody {
+  equipmentId: string;
+  boothNo?: string;
+  quantity: number;
+  useDate?: string;
+  days: number;
+  note?: string;
+}
+export interface RentalOrderBody {
+  itemId: string;
+  boothNo?: string;
+  quantity: number;
+  startDate?: string;
+  endDate?: string;
+  days: number;
+  note?: string;
+}
+export interface InboundBody {
+  trackingNo: string;
+  carrier?: string;
+  boothNo?: string;
+  itemDesc?: string;
+  quantity: number;
+  etaDate?: string;
+  note?: string;
+}
+export interface StatusDecisionBody {
+  status: string;
+  reason?: string;
+}
+export interface InboundStatusBody {
+  status: string;
+  note?: string;
+}
+
+const base = (eventId: string) => `/api/events/${encodeURIComponent(eventId)}/logistics`;
+
+export const logisticsExtApi = {
+  board: (eventId: string) => api.get<LogisticsExtBoard>(`${base(eventId)}/ext`),
+
+  requestEquipment: (eventId: string, body: EquipmentRequestBody) =>
+    api.post<EquipmentRequestView>(`${base(eventId)}/equipment-requests`, body),
+  decideEquipment: (eventId: string, id: string, body: StatusDecisionBody) =>
+    api.post<EquipmentRequestView>(
+      `${base(eventId)}/equipment-requests/${encodeURIComponent(id)}/status`,
+      body,
+    ),
+
+  orderRental: (eventId: string, body: RentalOrderBody) =>
+    api.post<RentalOrderView>(`${base(eventId)}/rental-orders`, body),
+  decideRental: (eventId: string, id: string, body: StatusDecisionBody) =>
+    api.post<RentalOrderView>(
+      `${base(eventId)}/rental-orders/${encodeURIComponent(id)}/status`,
+      body,
+    ),
+
+  registerInbound: (eventId: string, body: InboundBody) =>
+    api.post<InboundView>(`${base(eventId)}/inbound`, body),
+  advanceInbound: (eventId: string, id: string, body: InboundStatusBody) =>
+    api.post<InboundView>(`${base(eventId)}/inbound/${encodeURIComponent(id)}/status`, body),
+};
diff --git a/src/frontend/src/screens/movein/movein.css b/src/frontend/src/screens/movein/movein.css
new file mode 100644
index 0000000..528bde6
--- /dev/null
+++ b/src/frontend/src/screens/movein/movein.css
@@ -0,0 +1,499 @@
+/*
+ * SCR-25 반입/반출 도크 슬롯 예약 [M8] 전용 스타일.
+ * design.md §1 토큰만 참조. shared.css 프리미티브(kx-page·kx-card·kx-seg·kx-select·kx-bi__degraded) 위에 얹는다.
+ * 클래스는 kx-dock__* 로 네임스페이스.
+ */
+@import '../shared.css';
+
+.kx-dock__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-dock__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+}
+.kx-dock__subtitle {
+  margin-top: 2px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kx-dock__head-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+/* ── 필터 바 ── */
+.kx-dock__filters {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-dock__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.kx-dock__label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-dock__filters-spacer {
+  flex: 1;
+}
+
+/* ── 2열 split ── */
+.kx-dock__split {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1200px) {
+  .kx-dock__split {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── 스케줄 그리드 ── */
+.kx-dock__grid {
+  padding: 0;
+  overflow: hidden;
+}
+.kx-dock__grid-scroll {
+  overflow-x: auto;
+}
+.kx-dock__ghead,
+.kx-dock__row {
+  display: flex;
+  min-width: 720px;
+}
+.kx-dock__ghead {
+  background: var(--color-neutral-050);
+  border-bottom: var(--border-card);
+}
+.kx-dock__ghead-dock {
+  width: 72px;
+  flex-shrink: 0;
+  padding: 10px;
+  text-align: center;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-neutral-500);
+  border-right: 1px solid var(--color-neutral-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kx-dock__times {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+.kx-dock__time {
+  padding: 10px 2px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  border-right: 1px solid var(--color-neutral-100);
+}
+.kx-dock__time:last-child {
+  border-right: none;
+}
+.kx-dock__row {
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+.kx-dock__row:last-child {
+  border-bottom: none;
+}
+.kx-dock__row-label {
+  width: 72px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-primary-700);
+  border-right: 1px solid var(--color-neutral-100);
+  background: var(--color-neutral-050);
+}
+.kx-dock__cells {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  height: 60px;
+}
+.kx-dock__cell {
+  border-right: 1px solid var(--color-neutral-100);
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+.kx-dock__cell:hover {
+  background: var(--color-primary-050);
+}
+.kx-dock__cell.is-selected {
+  background: var(--color-primary-100);
+  outline: 2px solid var(--color-primary-600);
+  outline-offset: -2px;
+}
+.kx-dock__block {
+  margin: 4px 2px;
+  border-radius: var(--radius-sm);
+  padding: 6px 8px;
+  font-size: 11px;
+  line-height: 1.25;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+}
+.kx-dock__block--booked {
+  background: var(--color-primary-600);
+  color: #fff;
+}
+.kx-dock__block--priority {
+  background: var(--color-violation-warn-bg);
+  color: var(--color-violation-warn-text);
+  font-weight: 700;
+  border: 1px solid var(--color-violation-warn);
+}
+.kx-dock__block-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kx-dock__legend {
+  display: flex;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  padding: var(--space-3) var(--space-4);
+  border-top: var(--border-card);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-dock__legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.kx-dock__swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  display: inline-block;
+}
+.kx-dock__swatch--booked {
+  background: var(--color-primary-600);
+}
+.kx-dock__swatch--priority {
+  background: var(--color-violation-warn);
+}
+.kx-dock__swatch--open {
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+}
+
+/* ── 우측 예약 폼 ── */
+.kx-dock__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-dock__panel-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-h3);
+  color: var(--color-primary-700);
+  padding-bottom: 6px;
+  border-bottom: 2px solid var(--color-primary-600);
+  margin-bottom: var(--space-4);
+}
+.kx-dock__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-dock__input,
+.kx-dock__select {
+  height: 40px;
+  padding: 0 var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  width: 100%;
+  font-family: inherit;
+}
+.kx-dock__input:focus,
+.kx-dock__select:focus {
+  outline: 2px solid var(--color-primary-100);
+  border-color: var(--color-primary-600);
+}
+.kx-dock__check {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kx-dock__slot-note {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+
+/* 통행증 QR */
+.kx-dock__qr {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  background: var(--color-primary-700);
+  color: #fff;
+  cursor: pointer;
+  border: none;
+  text-align: left;
+  width: 100%;
+}
+.kx-dock__qr:hover {
+  background: var(--color-primary-600);
+}
+.kx-dock__qr-main {
+  flex: 1;
+}
+.kx-dock__qr-title {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  display: block;
+}
+.kx-dock__qr-sub {
+  font-size: 11px;
+  opacity: 0.85;
+  text-transform: uppercase;
+}
+.kx-dock__qr-glyph {
+  background: #fff;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  flex-shrink: 0;
+}
+
+/* AI 대기열 예측 카드 */
+.kx-dock__ai {
+  border: 1px solid var(--color-neutral-200);
+  border-left: var(--accent-ai);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-dock__ai-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.kx-dock__ai-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-h3);
+  color: var(--color-ai-accent);
+}
+.kx-dock__chart {
+  height: 96px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 4px;
+  padding: var(--space-2) var(--space-2) 0;
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+.kx-dock__bar {
+  flex: 1;
+  background: var(--color-ai-accent);
+  border-radius: 3px 3px 0 0;
+  min-height: 4px;
+}
+.kx-dock__chart-axis {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  color: var(--color-neutral-500);
+  padding: 0 2px;
+}
+.kx-dock__ai-callout {
+  display: flex;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--color-ai-accent);
+  background: var(--color-ai-surface);
+  font-size: var(--fs-caption);
+  line-height: var(--lh-body);
+  color: var(--color-neutral-700);
+}
+.kx-dock__ai-callout strong {
+  color: var(--color-ai-accent);
+}
+
+/* 토스트 */
+.kx-dock__toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 60;
+  background: var(--color-neutral-900);
+  color: #fff;
+  padding: 10px 18px;
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-body);
+  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.24);
+}
+
+/* ── M8 물류 확장 탭(장비 신청·렌탈 주문·선입고) ───────────────────────── */
+.kx-logi__tabs {
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+.kx-logi__split {
+  display: grid;
+  grid-template-columns: minmax(280px, 360px) 1fr;
+  gap: 16px;
+  align-items: start;
+}
+@media (max-width: 860px) {
+  .kx-logi__split {
+    grid-template-columns: 1fr;
+  }
+}
+.kx-logi__row2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.kx-logi__estimate {
+  margin: 4px 0 2px;
+  font-size: var(--fs-body);
+  color: var(--color-text-secondary, #475467);
+}
+.kx-logi__estimate strong {
+  color: var(--color-text, #101828);
+}
+.kx-logi__list {
+  min-height: 220px;
+}
+.kx-logi__items {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.kx-logi__item {
+  border: 1px solid var(--color-border, #e4e7ec);
+  border-radius: var(--radius-md, 10px);
+  padding: 12px 14px;
+  background: var(--color-surface, #fff);
+}
+.kx-logi__item-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.kx-logi__item-name {
+  font-weight: 600;
+  color: var(--color-text, #101828);
+}
+.kx-logi__item-meta {
+  margin-top: 4px;
+  font-size: var(--fs-caption, 13px);
+  color: var(--color-text-secondary, #475467);
+}
+.kx-logi__reason {
+  margin-top: 4px;
+  font-size: var(--fs-caption, 13px);
+  color: #b42318;
+}
+.kx-logi__actions {
+  margin-top: 10px;
+  display: flex;
+  gap: 8px;
+}
+.kx-logi__act {
+  border: 1px solid var(--color-border, #e4e7ec);
+  background: var(--color-surface, #fff);
+  border-radius: var(--radius-sm, 8px);
+  padding: 6px 12px;
+  font-size: var(--fs-caption, 13px);
+  cursor: pointer;
+}
+.kx-logi__act:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.kx-logi__act--ok {
+  border-color: #12b76a;
+  color: #027a48;
+}
+.kx-logi__act--no {
+  border-color: #f04438;
+  color: #b42318;
+}
+.kx-logi__pill {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.kx-logi__pill--ok {
+  background: #ecfdf3;
+  color: #027a48;
+}
+.kx-logi__pill--no {
+  background: #fef3f2;
+  color: #b42318;
+}
+.kx-logi__pill--wait {
+  background: #fffaeb;
+  color: #b54708;
+}
+.kx-logi__track {
+  margin-top: 8px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.kx-logi__track-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--color-border, #e4e7ec);
+}
+.kx-logi__track-dot.is-done {
+  background: var(--color-primary, #1f29fc);
+}
diff --git a/src/frontend/src/screens/ops/HallOperationsPage.tsx b/src/frontend/src/screens/ops/HallOperationsPage.tsx
new file mode 100644
index 0000000..8e6e61d
--- /dev/null
+++ b/src/frontend/src/screens/ops/HallOperationsPage.tsx
@@ -0,0 +1,278 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Trans, useTranslation } from 'react-i18next';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { opsApiLocal, type OpsDataExt } from './opsApi';
+import { ApiRequestError } from '../../api/client';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import {
+  HALL_CELLS,
+  HVAC as SAMPLE_HVAC,
+  LIGHTING_ZONES,
+  PARKING_ZONES,
+} from './sampleOps';
+import './ops.css';
+
+/*
+ * SCR-14 홀 현장운영 대시보드 (M14). Stitch hall_operations 이식.
+ * 실데이터 경로: GET /api/events/{eventId}/ops (백엔드 OpsDto 확장).
+ *   ├ 혼잡(halls.estPeople/heat) = M10 체크인 실집계 → 홀 판매면적 비중 분배(추정).
+ *   ├ 전력(halls.powerKw/powerTotalKw) = M4 유틸리티 신청 부하(requestedKw) 홀별 합.
+ *   └ checkinSeries = 시간대별 체크인 추이(혼잡 프로파일).
+ * ★ HVAC/조명/주차 = 센서·IoT 미연동(PLANNING M14) → null/빈배열 정직 반환 → "센서(M14) 연동 시 표시".
+ * 폴백: NETWORK/NOT_FOUND/NOT_IMPLEMENTED 시에만 sampleOps 로 강등 + "오프라인 — 샘플" 표기.
+ */
+export function HallOperationsPage() {
+  const { t } = useTranslation();
+  const [mode, setMode] = useState<'live' | 'history'>('live');
+  const eventId = useResolvedEventId();
+
+  const q = useQuery({
+    queryKey: ['ops', eventId],
+    queryFn: () => opsApiLocal.get(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const degraded = isDegradable(q.error);
+  const data: OpsDataExt | null = q.data ?? (degraded ? FALLBACK : null);
+  const hardError = q.isError && !degraded;
+
+  const hvac = data?.hvac;
+  const hasHvac = !!hvac && (hvac.tempC != null || hvac.humidityPercent != null || hvac.co2Ppm != null);
+  const onSite = data?.onSiteCount ?? 0;
+  const hasPeople = onSite > 0;
+  const powerTotal = data?.powerTotalKw ?? null;
+  const powerHalls = (data?.halls ?? []).filter((h) => h.powerKw != null && h.powerKw > 0);
+  const maxPowerKw = powerHalls.reduce((m, h) => Math.max(m, h.powerKw ?? 0), 0);
+  const series = data?.checkinSeries ?? [];
+  const maxSeries = series.reduce((m, p) => Math.max(m, p.count), 0);
+
+  return (
+    <div className="kx-ops">
+      <header className="kx-ops__head">
+        <div>
+          <h1 className="kx-ops__title">{t('ops.title')}</h1>
+          <p className="kx-ops__subtitle">{t('ops.subtitle')}</p>
+        </div>
+        <div className="kx-seg" role="tablist" aria-label={t('ops.modeAria')}>
+          <button role="tab" aria-selected={mode === 'live'} className={`kx-seg__btn ${mode === 'live' ? 'is-active' : ''}`} onClick={() => setMode('live')}>
+            {t('ops.live')}
+          </button>
+          <button role="tab" aria-selected={mode === 'history'} className={`kx-seg__btn ${mode === 'history' ? 'is-active' : ''}`} onClick={() => setMode('history')}>
+            {t('ops.history')}
+          </button>
+        </div>
+      </header>
+
+      {!eventId && (
+        <EmptyState title={t('ops.noEventTitle')} description={t('ops.noEventDesc')} />
+      )}
+
+      {degraded && (
+        <div className="kx-ops__degraded-bar">
+          <span className="kx-ops__degraded-badge">{t('ops.offlineSample')}</span>
+          {t('ops.degradedMsg')}
+        </div>
+      )}
+
+      {q.isLoading && <OpsSkeleton />}
+
+      {hardError && (
+        <ErrorState message={t('ops.loadError')} onRetry={() => q.refetch()} />
+      )}
+
+      {data && (
+        <div className="kx-ops__grid">
+          {/* 히어로: 홀 혼잡(체크인 파생) */}
+          <section className="kx-card kx-ops__heat" aria-label={t('ops.hallStatus')}>
+            <div className="kx-card__head">
+              <h2>{t('ops.hallStatus')}</h2>
+            </div>
+            <span className="kx-ops__sensor-badge">
+              {hasPeople ? t('ops.checkinDerived') : t('ops.sensorNoneHalls')}
+            </span>
+
+            {data.halls.length === 0 ? (
+              <EmptyState title={t('ops.noHallsTitle')} description={t('ops.noHallsDesc')} />
+            ) : (
+              <>
+                <div className="kx-ops__halls">
+                  {data.halls.map((c) => (
+                    <div key={c.hallId} className={`kx-ops__hall is-${heatClass(c.heat)}`}>
+                      <span className="kx-ops__hall-label">{c.label}</span>
+                      {c.heat === 'busy' && <span className="kx-ops__hall-tag">{t('ops.busy')}</span>}
+                      <span className="kx-ops__hall-people tnum">
+                        {c.estPeople > 0 ? t('ops.people', { n: c.estPeople.toLocaleString() }) : '—'}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+                <div className="kx-ops__heat-foot">
+                  <ul className="kx-ops__legend">
+                    <li><span className="kx-dot is-smooth" /> {t('ops.smooth')}</li>
+                    <li><span className="kx-dot is-moderate" /> {t('ops.moderate')}</li>
+                    <li><span className="kx-dot is-busy" /> {t('ops.busy')}</li>
+                  </ul>
+                  <span className="kx-ops__total">
+                    {hasPeople ? (
+                      <Trans i18nKey="ops.onSiteCheckin" values={{ n: onSite.toLocaleString() }} components={[<strong className="tnum" key="s" />]} />
+                    ) : (
+                      <>{t('ops.noCheckinAgg')}</>
+                    )}
+                  </span>
+                </div>
+              </>
+            )}
+          </section>
+
+          {/* 우측: 전력 부하(M4 실집계) + 시간대 추이 */}
+          <aside className="kx-ops__aside">
+            <section className="kx-card" aria-label={t('ops.powerLoad')}>
+              <div className="kx-card__head">
+                <h2>{t('ops.powerLoad')}</h2>
+                {powerTotal != null && (
+                  <span className="kx-ops__total"><Trans i18nKey="ops.totalKw" values={{ v: formatKw(powerTotal) }} components={[<strong className="tnum" key="s" />]} /></span>
+                )}
+              </div>
+              <span className="kx-ops__sensor-badge">{t('ops.utilLoadAgg')}</span>
+              {powerHalls.length === 0 ? (
+                <EmptyState title={t('ops.noLoadTitle')} description={t('ops.noLoadDesc')} />
+              ) : (
+                <ul className="kx-barlist">
+                  {powerHalls.map((h) => {
+                    const kw = h.powerKw ?? 0;
+                    const pct = maxPowerKw > 0 ? Math.round((kw / maxPowerKw) * 100) : 0;
+                    return (
+                      <li key={h.hallId} className="kx-barlist__item">
+                        <div className="kx-barlist__top">
+                          <span>{h.label}</span>
+                          <span className="tnum">{t('ops.kw', { v: formatKw(kw) })}</span>
+                        </div>
+                        <div className="kx-barlist__track">
+                          <span className="kx-barlist__fill" style={{ width: `${pct}%` }} />
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </section>
+
+            <section className="kx-card" aria-label={t('ops.hourlyCheckin')}>
+              <div className="kx-card__head">
+                <h2>{t('ops.hourlyCheckin')}</h2>
+              </div>
+              <span className="kx-ops__sensor-badge">{t('ops.hourlyAgg')}</span>
+              {series.length === 0 ? (
+                <EmptyState title={t('ops.noSeriesTitle')} description={t('ops.noSeriesDesc')} />
+              ) : (
+                <ul className="kx-barlist kx-ops__series">
+                  {series.map((p) => {
+                    const pct = maxSeries > 0 ? Math.round((p.count / maxSeries) * 100) : 0;
+                    return (
+                      <li key={p.hour} className="kx-barlist__item">
+                        <div className="kx-barlist__top">
+                          <span className="tnum">{p.hour}</span>
+                          <span className="tnum">{p.count.toLocaleString()}</span>
+                        </div>
+                        <div className="kx-barlist__track">
+                          <span className="kx-barlist__fill" style={{ width: `${pct}%` }} />
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </section>
+          </aside>
+
+          {/* 하단: 시설 센서(미연동) — 정직한 빈 상태 */}
+          <section className="kx-card kx-ops__parking" aria-label={t('ops.facilitySensor')}>
+            <div className="kx-card__head">
+              <h2>{t('ops.facilitySensorTitle')}</h2>
+            </div>
+            {!hasHvac && data.lighting.length === 0 && data.parking.length === 0 ? (
+              <EmptyState
+                title={t('ops.sensorNoneTitle')}
+                description={t('ops.sensorNoneDesc')}
+              />
+            ) : (
+              <div className="kx-ops__sensor-grid">
+                {hasHvac && (
+                  <div className="kx-ops__hvac-meta">
+                    <div>
+                      <span className="kx-ops__meta-k">{t('ops.temp')}</span>
+                      <strong className="tnum">{hvac!.tempC != null ? `${hvac!.tempC}°C` : '—'}</strong>
+                    </div>
+                    <div>
+                      <span className="kx-ops__meta-k">{t('ops.humidity')}</span>
+                      <strong className="tnum">{hvac!.humidityPercent != null ? `${hvac!.humidityPercent}%` : '—'}</strong>
+                    </div>
+                    <div>
+                      <span className="kx-ops__meta-k">CO₂</span>
+                      <strong className="tnum">{hvac!.co2Ppm != null ? `${hvac!.co2Ppm}ppm` : '—'}</strong>
+                    </div>
+                  </div>
+                )}
+                {data.lighting.map((z) => (
+                  <div key={z.zone} className="kx-ops__meta-k">{z.zone}: {z.onPercent}%</div>
+                ))}
+                {data.parking.map((z) => (
+                  <div key={z.zone} className="kx-ops__meta-k">
+                    {t('ops.parkingSlots', { zone: z.zone, occ: z.occupancy.toLocaleString(), cap: z.capacity.toLocaleString() })}
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function OpsSkeleton() {
+  return (
+    <div aria-hidden="true" style={{ display: 'grid', gap: 16 }}>
+      <Skeleton height={220} radius={12} />
+      <Skeleton height={160} radius={12} />
+    </div>
+  );
+}
+
+function heatClass(heat: string): string {
+  if (heat === 'busy' || heat === 'moderate' || heat === 'smooth') return heat;
+  return 'smooth';
+}
+
+function formatKw(kw: number): string {
+  return kw % 1 === 0 ? kw.toLocaleString() : kw.toFixed(1);
+}
+
+function isDegradable(error: unknown): boolean {
+  return (
+    error instanceof ApiRequestError &&
+    (error.code === 'NETWORK' || error.code === 'NOT_FOUND' || error.code === 'NOT_IMPLEMENTED')
+  );
+}
+
+/**
+ * 샘플 폴백(백엔드 확장 shape 매핑) — 정상 경로는 실 API. NETWORK/NOT_FOUND/NOT_IMPLEMENTED 시에만 사용.
+ * 근거: 기존 sampleOps.ts(시연 데이터)를 OpsDataExt 로 강등 변환. 하드웨어 위젯은 미연동 상태를 보존.
+ */
+const FALLBACK: OpsDataExt = {
+  halls: HALL_CELLS.map((c) => ({
+    hallId: c.id,
+    label: c.label,
+    estPeople: c.estPeople,
+    heat: c.level,
+    powerKw: null,
+  })),
+  hvac: { tempC: SAMPLE_HVAC.avgTempC, humidityPercent: null, co2Ppm: null },
+  lighting: LIGHTING_ZONES.map((z) => ({ zone: z.label, onPercent: z.pct })),
+  parking: PARKING_ZONES.map((z) => ({ zone: z.label, occupancy: z.occupied, capacity: z.total })),
+  onSiteCount: HALL_CELLS.reduce((s, c) => s + c.estPeople, 0),
+  powerTotalKw: null,
+  checkinSeries: [],
+};
diff --git a/src/frontend/src/screens/ops/ops.css b/src/frontend/src/screens/ops/ops.css
new file mode 100644
index 0000000..a46bf9a
--- /dev/null
+++ b/src/frontend/src/screens/ops/ops.css
@@ -0,0 +1,345 @@
+@import '../shared.css';
+
+.kx-ops {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.kx-ops__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-ops__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+}
+.kx-ops__subtitle {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+
+/* 12컬럼 벤토 */
+.kx-ops__grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+.kx-ops__heat {
+  grid-column: span 8;
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.kx-ops__aside {
+  grid-column: span 4;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-ops__parking {
+  grid-column: span 12;
+}
+
+.kx-ops__sensor-badge {
+  position: absolute;
+  top: var(--space-4);
+  left: var(--space-4);
+  z-index: 2;
+  font-size: 11px;
+  color: var(--color-warning);
+  background: #fff4e5;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+}
+
+.kx-ops__degraded-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  background: #fff8ef;
+  border: 1px solid #ffe4bf;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-lg);
+}
+.kx-ops__degraded-badge {
+  font-size: 11px;
+  color: var(--color-warning);
+  background: #fff4e5;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+
+/* 히트맵 홀 셀 */
+.kx-ops__halls {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--space-3);
+  padding: var(--space-6) 0 var(--space-4);
+}
+.kx-ops__hall {
+  position: relative;
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-height: 200px;
+  border: 1px solid transparent;
+  color: var(--color-neutral-900);
+}
+.kx-ops__hall.is-smooth {
+  background: rgba(18, 183, 106, 0.14);
+  border-color: rgba(18, 183, 106, 0.3);
+}
+.kx-ops__hall.is-moderate {
+  background: rgba(247, 144, 9, 0.16);
+  border-color: rgba(247, 144, 9, 0.32);
+}
+.kx-ops__hall.is-busy {
+  background: rgba(217, 45, 32, 0.18);
+  border-color: rgba(217, 45, 32, 0.4);
+  box-shadow: inset 0 0 0 1px rgba(217, 45, 32, 0.25);
+}
+.kx-ops__hall-label {
+  font-weight: 700;
+  font-size: var(--fs-h3);
+}
+.kx-ops__hall-tag {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-white);
+  background: var(--color-error);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-ops__hall-people {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+
+.kx-ops__heat-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  border-top: var(--border-card);
+  padding-top: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-ops__legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: var(--space-4);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-ops__legend li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.kx-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.kx-dot.is-smooth { background: #12b76a; }
+.kx-dot.is-moderate { background: var(--color-violation-warn); }
+.kx-dot.is-busy { background: var(--color-error); }
+.kx-ops__total {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-ops__total strong {
+  color: var(--color-neutral-900);
+}
+
+/* HVAC */
+.kx-ops__hvac {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+.kx-ops__gauge {
+  position: relative;
+  width: 140px;
+  flex-shrink: 0;
+}
+.kx-ops__gauge-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+.kx-ops__gauge-label strong {
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+}
+.kx-ops__gauge-label span {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-ops__hvac-meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-ops__hvac-meta > div {
+  display: flex;
+  flex-direction: column;
+}
+.kx-ops__meta-k {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-ops__hvac-meta strong {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-ops__sensor-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-ops__series {
+  max-height: 320px;
+  overflow-y: auto;
+}
+.kx-ops__pill {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+}
+.kx-ops__pill.is-ok {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+
+/* 스위치 */
+.kx-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kx-switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.kx-switch__track {
+  width: 34px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-200);
+  position: relative;
+  transition: background 0.15s ease;
+}
+.kx-switch__track::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--color-white);
+  transition: transform 0.15s ease;
+}
+.kx-switch input:checked + .kx-switch__track {
+  background: var(--color-primary-600);
+}
+.kx-switch input:checked + .kx-switch__track::after {
+  transform: translateX(14px);
+}
+.kx-switch input:focus-visible + .kx-switch__track {
+  outline: 2px solid var(--color-primary-600);
+  outline-offset: 2px;
+}
+
+/* 조명존 fill tone */
+.kx-barlist__fill.is-success { background: #12b76a; }
+.kx-barlist__fill.is-warning { background: var(--color-violation-warn); }
+.kx-barlist__fill.is-error { background: var(--color-error); }
+
+/* 주차 */
+.kx-ops__note {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-ops__zones {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-4);
+}
+.kx-ops__zone {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-neutral-050);
+}
+.kx-ops__zone-top {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.kx-ops__zone-label {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-ops__zone-pct {
+  font-size: var(--fs-h2);
+  font-weight: 700;
+}
+.kx-ops__zone-pct.is-success { color: var(--color-success); }
+.kx-ops__zone-pct.is-warning { color: var(--color-warning); }
+.kx-ops__zone-pct.is-error { color: var(--color-error); }
+.kx-ops__zone-count {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+@media (max-width: 1200px) {
+  .kx-ops__heat { grid-column: span 12; }
+  .kx-ops__aside { grid-column: span 12; flex-direction: row; }
+  .kx-ops__aside > .kx-card { flex: 1; }
+}
+@media (max-width: 900px) {
+  .kx-ops__halls { grid-template-columns: repeat(2, 1fr); }
+  .kx-ops__zones { grid-template-columns: repeat(2, 1fr); }
+  .kx-ops__aside { flex-direction: column; }
+}
diff --git a/src/frontend/src/screens/ops/opsApi.ts b/src/frontend/src/screens/ops/opsApi.ts
new file mode 100644
index 0000000..b9498e2
--- /dev/null
+++ b/src/frontend/src/screens/ops/opsApi.ts
@@ -0,0 +1,39 @@
+/*
+ * SCR-14 현장운영 — 로컬 API 클라이언트(실데이터 확장 계약).
+ * 공용 api/types.ts 의 OpsData(halls/hvac/lighting/parking)는 고정이라 확장 필드
+ * (powerKw·onSiteCount·powerTotalKw·checkinSeries)를 여기서 확장 타입으로 받는다.
+ * 동일 엔드포인트 GET /api/events/{eventId}/ops — 백엔드 OpsDto(확장)와 정합.
+ */
+import { api } from '../../api/client';
+
+export interface OpsHallExt {
+  hallId: string;
+  label: string;
+  estPeople: number;
+  heat: 'smooth' | 'moderate' | 'busy' | string;
+  /** M4 유틸리티 신청 부하 합(kW). 신청 없으면 null. */
+  powerKw: number | null;
+}
+
+export interface OpsCheckinPoint {
+  hour: string; // 'HH:00'
+  count: number;
+}
+
+export interface OpsDataExt {
+  halls: OpsHallExt[];
+  hvac: { tempC: number | null; humidityPercent: number | null; co2Ppm: number | null };
+  lighting: { zone: string; onPercent: number }[];
+  parking: { zone: string; occupancy: number; capacity: number }[];
+  /** 체크인 완료 현장 인원(M10 파생). */
+  onSiteCount: number;
+  /** 신청 전력 총합(kW). 신청 없으면 null. */
+  powerTotalKw: number | null;
+  /** 시간대별 체크인 추이. */
+  checkinSeries: OpsCheckinPoint[];
+}
+
+export const opsApiLocal = {
+  get: (eventId: string) =>
+    api.get<OpsDataExt>(`/api/events/${encodeURIComponent(eventId)}/ops`),
+};
diff --git a/src/frontend/src/screens/ops/sampleOps.ts b/src/frontend/src/screens/ops/sampleOps.ts
new file mode 100644
index 0000000..a2f1cbb
--- /dev/null
+++ b/src/frontend/src/screens/ops/sampleOps.ts
@@ -0,0 +1,65 @@
+/*
+ * 홀 현장운영 대시보드 표시 데이터 (SCR-14 · M14).
+ * ★ 경계면: CCTV·혼잡 센서·HVAC/전력계·iparking·조명 IoT는 미연동
+ *   (PLANNING §5A M14 "센서·IoT 연동은 킨텍스 시설 인프라 의존").
+ *   혼잡은 M10 체크인 파생, 전력은 M4 신청 부하 집계로 향후 실 데이터 가능하나 현 시점 전부 샘플.
+ *   ※ 하드웨어 연동 코드 금지(§2.6). 본 화면은 표시 전용.
+ */
+export type HeatLevel = 'smooth' | 'moderate' | 'busy';
+
+export interface HallCell {
+  id: string;
+  label: string;
+  level: HeatLevel;
+  estPeople: number;
+}
+export interface ParkingZone {
+  id: string;
+  label: string;
+  occupied: number;
+  total: number;
+}
+export interface LightingZone {
+  label: string;
+  pct: number;
+}
+
+export const HALL_GROUPS = [
+  { id: 'ex1', label: '홀 1-5 (제1전시장)' },
+  { id: 'ex2', label: '홀 6-10 (제2전시장)' },
+];
+
+export const HALL_CELLS: HallCell[] = [
+  { id: 'h1', label: 'Hall 1', level: 'smooth', estPeople: 1820 },
+  { id: 'h2', label: 'Hall 2', level: 'moderate', estPeople: 3240 },
+  { id: 'h3', label: 'Hall 3', level: 'busy', estPeople: 4680 },
+  { id: 'h4', label: 'Hall 4', level: 'moderate', estPeople: 2760 },
+  { id: 'h5', label: 'Hall 5', level: 'smooth', estPeople: 1750 },
+];
+
+export const TOTAL_EST_PEOPLE = HALL_CELLS.reduce((s, c) => s + c.estPeople, 0);
+
+export const HVAC = {
+  avgTempC: 22.5,
+  powerLoadMw: 4.2,
+  powerCapacityMw: 6.0,
+  status: '최적',
+};
+
+export const LIGHTING_ZONES: LightingZone[] = [
+  { label: '전시홀', pct: 85 },
+  { label: '공용부', pct: 100 },
+];
+
+export const PARKING_ZONES: ParkingZone[] = [
+  { id: 'a', label: '존A (지하)', occupied: 1176, total: 1200 },
+  { id: 'b', label: '존B (옥외남측)', occupied: 675, total: 900 },
+  { id: 'c', label: '존C (옥외북측)', occupied: 336, total: 800 },
+  { id: 'd', label: '하역장', occupied: 24, total: 120 },
+];
+
+export const HEAT_LABEL: Record<HeatLevel, string> = {
+  smooth: '원활',
+  moderate: '보통',
+  busy: '혼잡',
+};
diff --git a/src/frontend/src/screens/public/AgencyTrackPage.tsx b/src/frontend/src/screens/public/AgencyTrackPage.tsx
new file mode 100644
index 0000000..e273f2f
--- /dev/null
+++ b/src/frontend/src/screens/public/AgencyTrackPage.tsx
@@ -0,0 +1,166 @@
+/*
+ * SCR-T3 agency 서브홈 (§3C) — `/agency`, 미인증 공개 · track="agency".
+ * 에이전시 히어로 + 등록업체 안내(등록 게이트 고지) + 공사 옥션(역경매) + 작업신고·안전 규정 + 로그인 CTA.
+ * 킨텍스 차별점(역경매 옥션) 강조. 공개 옥션 API 미배포 → 안내+로그인 CTA(빈 화면 금지).
+ * 데이터: 등록·절차·안전=정적 안내 · 옥션 공개 서브셋(있으면) · 로그인=SCR-01 딥링크(→ SCR-27/28).
+ */
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { PublicShell } from './PublicShell';
+import {
+  IconFactory,
+  IconShield,
+  IconInfo,
+  IconCheck,
+  IconArrowRight,
+} from './publicIcons';
+
+const REG_STEPS = ['apply', 'review', 'register', 'eligible'];
+const SAFETY_CARDS: { key: string; icon: typeof IconShield }[] = [
+  { key: 'report', icon: IconInfo },
+  { key: 'prohibited', icon: IconShield },
+  { key: 'docs', icon: IconCheck },
+];
+
+export function AgencyTrackPage() {
+  const { t } = useTranslation();
+
+  return (
+    <PublicShell active="exhibit" track="agency" cta={t('track.agency.ctaLogin')}>
+      {/* 에이전시 히어로 — 옥션 차별점 강조 */}
+      <section className="kxp-hero" aria-label={t('track.agency.heroAria')}>
+        <div
+          className="kxp-hero__bg"
+          style={{ background: 'linear-gradient(135deg, #1a1330 0%, #3a2a6b 55%, #0066b3 130%)' }}
+          aria-hidden
+        />
+        <div className="kxp-hero__scrim" aria-hidden />
+        <div className="kxp-hero__inner">
+          <div className="kxp-hero__content">
+            <span className="kxp-hero__eyebrow">
+              <IconFactory width={16} height={16} /> {t('track.agency.eyebrow')}
+            </span>
+            <h1 className="kxp-hero__title">{t('track.agency.title')}</h1>
+            <p className="kxp-hero__lead">{t('track.agency.subtitle')}</p>
+            <div className="kxp-hero__actions">
+              <a className="kxp-btn kxp-btn--primary kxp-btn--lg" href="#registry">
+                {t('track.agency.ctaRegister')}
+              </a>
+              <Link className="kxp-btn kxp-btn--ghost kxp-btn--lg" to="/login">
+                {t('track.agency.ctaLogin')}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 등록업체 안내 + 등록 게이트 고지 */}
+      <section className="kxp-section" id="registry" aria-label={t('track.agency.registryAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.agency.registryTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.agency.registrySub')}</p>
+            </div>
+          </div>
+
+          <div className="kxp-notice-card kxp-notice-card--warn" role="note">
+            <span className="kxp-notice-card__ic" aria-hidden>
+              <IconInfo width={22} height={22} />
+            </span>
+            <div>
+              <div className="kxp-notice-card__title">{t('track.agency.gateTitle')}</div>
+              <p className="kxp-notice-card__body">{t('track.agency.gateBody')}</p>
+            </div>
+          </div>
+
+          <ol className="kxp-flow" style={{ marginTop: 20 }}>
+            {REG_STEPS.map((k, i) => (
+              <li key={k} className="kxp-flow__step">
+                <span className="kxp-flow__no">{i + 1}</span>
+                <span className="kxp-flow__title">{t(`track.agency.reg.${k}.title`)}</span>
+                <span className="kxp-flow__desc">{t(`track.agency.reg.${k}.desc`)}</span>
+              </li>
+            ))}
+          </ol>
+          <div style={{ marginTop: 16 }}>
+            <a className="kxp-btn kxp-btn--primary" href="#login-cta">
+              {t('track.agency.ctaRegister')}
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* 진행 중 공사 옥션 (역경매) — 차별점 강조 */}
+      <section className="kxp-section kxp-section--alt" aria-label={t('track.agency.auctionAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.agency.auctionTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.agency.auctionSub')}</p>
+            </div>
+          </div>
+          {/* 공개 옥션 목록 API 미배포 — 안내 + 로그인 유도(빈 화면 금지) */}
+          <div className="kxp-notice-card" role="note">
+            <span className="kxp-notice-card__ic" aria-hidden style={{ color: 'var(--color-primary-600, #0066b3)' }}>
+              <IconFactory width={22} height={22} />
+            </span>
+            <div>
+              <div className="kxp-notice-card__title" style={{ color: 'var(--color-primary-700, #004c86)' }}>
+                {t('track.agency.auctionEmptyTitle')}
+              </div>
+              <p className="kxp-notice-card__body">{t('track.agency.auctionEmptyBody')}</p>
+            </div>
+          </div>
+          <div style={{ marginTop: 16 }}>
+            <Link className="kxp-btn kxp-btn--primary" to="/login">
+              {t('track.agency.ctaAuctionLogin')} <IconArrowRight width={16} height={16} />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* 작업신고·안전 규정 */}
+      <section className="kxp-section" aria-label={t('track.agency.safetyAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.agency.safetyTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.agency.safetySub')}</p>
+            </div>
+          </div>
+          <div className="kxp-guidegrid">
+            {SAFETY_CARDS.map(({ key, icon: Icon }) => (
+              <article key={key} className="kxp-guide">
+                <span className="kxp-guide__ic" aria-hidden>
+                  <Icon width={22} height={22} />
+                </span>
+                <div>
+                  <div className="kxp-guide__title">{t(`track.agency.safety.${key}.title`)}</div>
+                  <p className="kxp-guide__desc">{t(`track.agency.safety.${key}.desc`)}</p>
+                </div>
+              </article>
+            ))}
+          </div>
+          <div style={{ marginTop: 16 }}>
+            <Link className="kxp-btn kxp-btn--outline" to="/login">
+              {t('track.agency.ctaWorkReport')}
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* 등록업체 로그인 CTA 밴드 */}
+      <section className="kxp-section kxp-section--alt" id="login-cta" aria-label={t('track.agency.ctaBandAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-ctaband">
+            <span className="kxp-ctaband__text">{t('track.agency.ctaBandText')}</span>
+            <Link className="kxp-btn kxp-btn--primary kxp-btn--lg" to="/login">
+              {t('track.agency.ctaLogin')}
+            </Link>
+          </div>
+        </div>
+      </section>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/AiAssistant.tsx b/src/frontend/src/screens/public/AiAssistant.tsx
new file mode 100644
index 0000000..41ebd3d
--- /dev/null
+++ b/src/frontend/src/screens/public/AiAssistant.tsx
@@ -0,0 +1,303 @@
+/*
+ * 공용 AI 관람 도우미 (SCR-T1 히어로 중심 요소) — 재사용 컴포넌트.
+ * PLANNING §8A 계약 정합: 자연어 입력(role=search) + 예시 질문칩 + 대화형 답변 패널
+ * (답변·구조화 카드(전시/교통/가이드)·근거 인용·후속칩·AI 고지문·degraded 안내).
+ * 데이터: publicApi.askVisitorAssistant → POST /api/public/ai/visitor-assistant(크롤 적재 DB 근거).
+ * 상태: 대기(placeholder 로테이션)·생각중·성공·degraded(provider=search|none)·에러·빈결과(grounded=false).
+ * 이모지 금지·선 SVG·kx 토큰만·AiLabel(보라) 구분·aria-live=polite.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AiLabel } from '../../components/ui/Badge';
+import { publicApi, type AssistantResult } from './publicApi';
+import { formatRange, dday, errorMessage } from './publicFormat';
+import { ddayClass } from './trackShared';
+import {
+  IconSend,
+  IconCalendar,
+  IconPin,
+  IconTrain,
+  IconInfo,
+  IconLink,
+  IconArrowRight,
+} from './publicIcons';
+
+/** 예시/후속 질문칩 i18n 키. */
+const EXAMPLE_KEYS = ['chip1', 'chip2', 'chip3', 'chip4', 'chip5'] as const;
+const FOLLOWUP_KEYS = ['followup1', 'followup2', 'followup3'] as const;
+
+type Phase = 'idle' | 'thinking' | 'done' | 'error';
+
+export function AiAssistant() {
+  const { t } = useTranslation();
+  const [question, setQuestion] = useState('');
+  const [phase, setPhase] = useState<Phase>('idle');
+  const [result, setResult] = useState<AssistantResult | null>(null);
+  const [error, setError] = useState('');
+  const [phIdx, setPhIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const reqSeq = useRef(0);
+
+  // 대기 중 placeholder 로테이션(입력 비어 있을 때만).
+  useEffect(() => {
+    if (phase !== 'idle' || question) return;
+    const id = window.setInterval(() => setPhIdx((i) => (i + 1) % EXAMPLE_KEYS.length), 3800);
+    return () => window.clearInterval(id);
+  }, [phase, question]);
+
+  const ask = useCallback(
+    (q: string) => {
+      const query = q.trim();
+      if (!query) return;
+      const seq = ++reqSeq.current;
+      setQuestion(query);
+      setPhase('thinking');
+      setError('');
+      publicApi
+        .askVisitorAssistant(query)
+        .then((res) => {
+          if (seq !== reqSeq.current) return;
+          setResult(res);
+          setPhase('done');
+        })
+        .catch((e) => {
+          if (seq !== reqSeq.current) return;
+          setError(errorMessage(e));
+          setPhase('error');
+        });
+    },
+    [],
+  );
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    ask(question);
+  };
+
+  const placeholder = t(`ai.assistant.${EXAMPLE_KEYS[phIdx]}`);
+
+  return (
+    <div className="kxp-ai">
+      <form className="kxp-ai__bar" role="search" onSubmit={onSubmit}>
+        <span className="kxp-ai__badge" aria-hidden>
+          <AiLabel>{t('ai.assistant.label')}</AiLabel>
+        </span>
+        <input
+          ref={inputRef}
+          className="kxp-ai__input"
+          type="search"
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          placeholder={placeholder}
+          aria-label={t('ai.assistant.inputAria')}
+          enterKeyHint="search"
+        />
+        <button
+          type="submit"
+          className="kxp-ai__send"
+          aria-label={t('ai.assistant.sendAria')}
+          disabled={phase === 'thinking' || !question.trim()}
+        >
+          <IconSend width={20} height={20} />
+        </button>
+      </form>
+
+      {/* 예시 질문칩 */}
+      <div className="kxp-ai__chips" aria-label={t('ai.assistant.chipsLabel')}>
+        {EXAMPLE_KEYS.map((k) => (
+          <button
+            key={k}
+            type="button"
+            className="kxp-ai__chip"
+            onClick={() => ask(t(`ai.assistant.${k}`))}
+          >
+            {t(`ai.assistant.${k}`)}
+          </button>
+        ))}
+      </div>
+
+      {/* 대화형 답변 패널 */}
+      <div className="kxp-ai__panel" aria-live="polite" aria-atomic="false">
+        {phase === 'thinking' && (
+          <div className="kxp-ai__thinking" role="status">
+            <span className="kxp-ai__dots" aria-hidden>
+              <i />
+              <i />
+              <i />
+            </span>
+            {t('ai.assistant.thinking')}
+          </div>
+        )}
+
+        {phase === 'error' && (
+          <div className="kxp-ai__answer kxp-ai__answer--error" role="alert">
+            <p className="kxp-ai__text">{error || t('ai.assistant.error')}</p>
+            <button type="button" className="kxp-btn kxp-btn--outline" onClick={() => ask(question)}>
+              {t('ai.assistant.retry')}
+            </button>
+          </div>
+        )}
+
+        {phase === 'done' && result && <AnswerCard result={result} onFollowup={ask} />}
+      </div>
+    </div>
+  );
+}
+
+function AnswerCard({
+  result,
+  onFollowup,
+}: {
+  result: AssistantResult;
+  onFollowup: (q: string) => void;
+}) {
+  const { t } = useTranslation();
+  const { answer, events, transport, guide, citations, grounded, degraded } = result;
+  const hasCards = events.length > 0 || transport.length > 0 || guide.length > 0;
+
+  return (
+    <div className="kxp-ai__answer">
+      <div className="kxp-ai__answerhead">
+        <AiLabel>{t('ai.assistant.providerAi')}</AiLabel>
+        {degraded && <span className="kxp-ai__degraded">{t('ai.assistant.degraded')}</span>}
+      </div>
+
+      {answer ? (
+        <p className="kxp-ai__text">{answer}</p>
+      ) : (
+        <p className="kxp-ai__text">{t('ai.assistant.notFound')}</p>
+      )}
+
+      {!grounded && !answer && <p className="kxp-ai__text kxp-ai__muted">{t('ai.assistant.notFound')}</p>}
+
+      {hasCards && (
+        <div className="kxp-ai__cards">
+          {events.length > 0 && (
+            <section className="kxp-ai__group" aria-label={t('ai.assistant.cardEventsTitle')}>
+              <h4 className="kxp-ai__grouptitle">{t('ai.assistant.cardEventsTitle')}</h4>
+              <div className="kxp-ai__grouprows">
+                {events.slice(0, 4).map((ev) => {
+                  const d = dday(ev.startDate);
+                  const ended = ev.lifecycle === 'ENDED';
+                  return (
+                    <article key={ev.id} className="kxp-ai__evcard">
+                      <div className="kxp-ai__evposter" aria-hidden>
+                        {ev.posterUrl ? (
+                          <img src={ev.posterUrl} alt="" loading="lazy" />
+                        ) : (
+                          <span className="kxp-ai__evfallback">{ev.name.slice(0, 2)}</span>
+                        )}
+                      </div>
+                      <div className="kxp-ai__evbody">
+                        <div className="kxp-ai__evname">{ev.name}</div>
+                        <div className="kxp-ai__evmeta">
+                          <span>
+                            <IconCalendar width={15} height={15} /> {formatRange(ev.startDate, ev.endDate)}
+                          </span>
+                          {ev.hallLabel && (
+                            <span>
+                              <IconPin width={15} height={15} /> {ev.hallLabel}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                      {!ended && d >= 0 && (
+                        <span className={`kxp-dday ${ddayClass(d)}`}>
+                          {d === 0 ? t('home.ddayZero') : t('home.dday', { n: d })}
+                        </span>
+                      )}
+                    </article>
+                  );
+                })}
+              </div>
+            </section>
+          )}
+
+          {transport.length > 0 && (
+            <section className="kxp-ai__group" aria-label={t('ai.assistant.cardTransportTitle')}>
+              <h4 className="kxp-ai__grouptitle">{t('ai.assistant.cardTransportTitle')}</h4>
+              <div className="kxp-ai__grouprows">
+                {transport.slice(0, 3).map((tr) => (
+                  <div key={tr.id} className="kxp-ai__inforow">
+                    <span className="kxp-ai__ic" aria-hidden>
+                      <IconTrain width={18} height={18} />
+                    </span>
+                    <div>
+                      <div className="kxp-ai__infotitle">{tr.lineName || tr.mode}</div>
+                      <div className="kxp-ai__infodesc">
+                        {[tr.route, tr.travelTime].filter(Boolean).join(' · ')}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+
+          {guide.length > 0 && (
+            <section className="kxp-ai__group" aria-label={t('ai.assistant.cardGuideTitle')}>
+              <h4 className="kxp-ai__grouptitle">{t('ai.assistant.cardGuideTitle')}</h4>
+              <div className="kxp-ai__grouprows">
+                {guide.slice(0, 3).map((g) => (
+                  <div key={g.id} className="kxp-ai__inforow">
+                    <span className="kxp-ai__ic" aria-hidden>
+                      <IconInfo width={18} height={18} />
+                    </span>
+                    <div>
+                      <div className="kxp-ai__infotitle">{g.title}</div>
+                      {g.summary && <div className="kxp-ai__infodesc">{g.summary}</div>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
+      )}
+
+      {/* 후속 질문칩 */}
+      <div className="kxp-ai__followups" aria-label={t('ai.assistant.followupLabel')}>
+        {FOLLOWUP_KEYS.map((k) => (
+          <button
+            key={k}
+            type="button"
+            className="kxp-ai__chip kxp-ai__chip--sm"
+            onClick={() => onFollowup(t(`ai.assistant.${k}`))}
+          >
+            {t(`ai.assistant.${k}`)}
+          </button>
+        ))}
+        <a className="kxp-ai__chip kxp-ai__chip--sm" href="#showcase">
+          {t('ai.assistant.register')} <IconArrowRight width={14} height={14} />
+        </a>
+      </div>
+
+      {/* 근거 출처 인용 */}
+      {citations.length > 0 && (
+        <div className="kxp-ai__cites">
+          <span className="kxp-ai__citelabel">{t('ai.assistant.citations')}</span>
+          {citations.slice(0, 6).map((c, i) =>
+            c.sourceUrl ? (
+              <a
+                key={`${c.id}-${i}`}
+                className="kxp-ai__cite"
+                href={c.sourceUrl}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                <IconLink width={13} height={13} /> {c.title}
+              </a>
+            ) : (
+              <span key={`${c.id}-${i}`} className="kxp-ai__cite">
+                <IconLink width={13} height={13} /> {c.title}
+              </span>
+            ),
+          )}
+        </div>
+      )}
+
+      {/* AI 고지문 — 제거 불가·상시 노출 */}
+      <p className="kxp-ai__disclaimer">{t('ai.assistant.disclaimer')}</p>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/public/AiPlanningBriefing.tsx b/src/frontend/src/screens/public/AiPlanningBriefing.tsx
new file mode 100644
index 0000000..446dd60
--- /dev/null
+++ b/src/frontend/src/screens/public/AiPlanningBriefing.tsx
@@ -0,0 +1,253 @@
+/*
+ * AI 전시·행사 기획 브리핑 (SCR-T1 레이아웃 4) — 연/월 관점 토글.
+ * 연간 = 12개월 타임라인(월별 건수 바) + "AI 요약" 헤드라인, 월간 = 선택 월 전시 리스트 + AI 월간 요약.
+ * 데이터: publicApi.listMonthlySummary(연간 근거) + listCalendar(월간 근거) — 크롤 적재 DB 서빙.
+ * AI 요약 문구는 assistant 미가용 시 데이터 기반 정적 폴백(degraded). 이모지 금지·선 SVG·kx 토큰.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AiLabel } from '../../components/ui/Badge';
+import { publicApi, type MonthlySummary, type PublicCalendarEvent } from './publicApi';
+import { formatRange, dday, errorMessage } from './publicFormat';
+import { ddayClass } from './trackShared';
+import { IconChevronRight, IconCalendar, IconPin } from './publicIcons';
+
+type View = 'year' | 'month';
+const NOW = new Date();
+
+export function AiPlanningBriefing() {
+  const { t } = useTranslation();
+  const [view, setView] = useState<View>('year');
+  const [year] = useState(NOW.getFullYear());
+  const [month, setMonth] = useState(NOW.getMonth() + 1);
+
+  const [summary, setSummary] = useState<MonthlySummary[]>([]);
+  const [sumLoading, setSumLoading] = useState(true);
+  const [sumErr, setSumErr] = useState('');
+
+  const [monthEvents, setMonthEvents] = useState<PublicCalendarEvent[]>([]);
+  const [mLoading, setMLoading] = useState(false);
+  const [mErr, setMErr] = useState('');
+
+  // 연간 월별 요약 로드(1회).
+  useEffect(() => {
+    let alive = true;
+    setSumLoading(true);
+    publicApi
+      .listMonthlySummary(year)
+      .then((list) => alive && (setSummary(list), setSumErr('')))
+      .catch((e) => alive && setSumErr(errorMessage(e)))
+      .finally(() => alive && setSumLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [year]);
+
+  // 월간 전시 로드(월 변경 시).
+  useEffect(() => {
+    if (view !== 'month') return;
+    let alive = true;
+    setMLoading(true);
+    publicApi
+      .listCalendar({ year, month, limit: 40 })
+      .then((list) => alive && (setMonthEvents(list), setMErr('')))
+      .catch((e) => alive && setMErr(errorMessage(e)))
+      .finally(() => alive && setMLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [view, year, month]);
+
+  const byMonth = useMemo(() => {
+    const m = new Map<number, number>();
+    summary.forEach((s) => {
+      if (s.eventMonth != null) m.set(s.eventMonth, (m.get(s.eventMonth) ?? 0) + (s.eventCount ?? 0));
+    });
+    return m;
+  }, [summary]);
+
+  const maxCount = useMemo(() => Math.max(1, ...Array.from(byMonth.values())), [byMonth]);
+  const totalCount = useMemo(
+    () => Array.from(byMonth.values()).reduce((a, b) => a + b, 0),
+    [byMonth],
+  );
+  const peakMonth = useMemo(() => {
+    let best = 0;
+    let bestC = -1;
+    byMonth.forEach((c, mo) => {
+      if (c > bestC) {
+        bestC = c;
+        best = mo;
+      }
+    });
+    return best;
+  }, [byMonth]);
+  const monthCount = byMonth.get(month) ?? monthEvents.length;
+
+  return (
+    <section className="kxp-section kxp-section--alt" id="briefing" aria-label={t('track.visitor.briefing.title')}>
+      <div className="kxp-wrap">
+        <div className="kxp-section__head kxp-briefing__head">
+          <div>
+            <h2 className="kxp-section__title">{t('track.visitor.briefing.title')}</h2>
+            <p className="kxp-section__sub">{t('track.visitor.briefing.sub')}</p>
+          </div>
+          <div className="kxp-briefing__toggle" role="tablist" aria-label={t('track.visitor.briefing.title')}>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={view === 'year'}
+              className={`kxp-seg${view === 'year' ? ' is-active' : ''}`}
+              onClick={() => setView('year')}
+            >
+              {t('track.visitor.briefing.viewYear', { year })}
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={view === 'month'}
+              className={`kxp-seg${view === 'month' ? ' is-active' : ''}`}
+              onClick={() => setView('month')}
+            >
+              {t('track.visitor.briefing.viewMonth')}
+            </button>
+          </div>
+        </div>
+
+        {view === 'year' ? (
+          <div className="kxp-briefing__year">
+            {/* AI 요약 헤드라인 */}
+            <div className="kxp-briefing__ai">
+              <AiLabel>{t('track.visitor.briefing.aiSummary')}</AiLabel>
+              <p className="kxp-briefing__aitext">
+                {sumLoading
+                  ? t('track.visitor.briefing.loading')
+                  : sumErr || totalCount === 0
+                    ? t('track.visitor.briefing.empty')
+                    : t('track.visitor.briefing.yearSummary', {
+                        year,
+                        count: totalCount,
+                        peak: t('track.visitor.briefing.monthLabel', { month: peakMonth || month }),
+                      })}
+              </p>
+            </div>
+
+            {/* 12개월 타임라인 */}
+            {sumLoading ? (
+              <div className="kxp-briefing__timeline kxp-briefing__timeline--skel" aria-hidden>
+                {Array.from({ length: 12 }).map((_, i) => (
+                  <div key={i} className="kxp-briefing__lane">
+                    <span className="kxp-briefing__bar" style={{ height: '30%' }} />
+                    <span className="kxp-briefing__mo">{i + 1}</span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="kxp-briefing__timeline" role="img" aria-label={t('track.visitor.briefing.title')}>
+                {Array.from({ length: 12 }).map((_, i) => {
+                  const mo = i + 1;
+                  const c = byMonth.get(mo) ?? 0;
+                  const h = Math.max(6, Math.round((c / maxCount) * 100));
+                  const isPeak = c > 0 && c === maxCount;
+                  return (
+                    <button
+                      key={mo}
+                      type="button"
+                      className={`kxp-briefing__lane${isPeak ? ' is-peak' : ''}`}
+                      onClick={() => {
+                        setMonth(mo);
+                        setView('month');
+                      }}
+                      title={t('track.visitor.briefing.eventsCount', { count: c })}
+                    >
+                      <span className="kxp-briefing__count">{c}</span>
+                      <span className="kxp-briefing__bar" style={{ height: `${h}%` }} />
+                      <span className="kxp-briefing__mo">{mo}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="kxp-briefing__month">
+            <div className="kxp-briefing__nav">
+              <button
+                type="button"
+                className="kxp-briefing__navbtn"
+                aria-label={t('track.visitor.briefing.prevMonth')}
+                onClick={() => setMonth((m) => (m <= 1 ? 12 : m - 1))}
+              >
+                <IconChevronRight width={18} height={18} style={{ transform: 'rotate(180deg)' }} />
+              </button>
+              <span className="kxp-briefing__navlabel">
+                {year}. {String(month).padStart(2, '0')}
+              </span>
+              <button
+                type="button"
+                className="kxp-briefing__navbtn"
+                aria-label={t('track.visitor.briefing.nextMonth')}
+                onClick={() => setMonth((m) => (m >= 12 ? 1 : m + 1))}
+              >
+                <IconChevronRight width={18} height={18} />
+              </button>
+            </div>
+
+            <div className="kxp-briefing__ai">
+              <AiLabel>{t('track.visitor.briefing.aiSummary')}</AiLabel>
+              <p className="kxp-briefing__aitext">
+                {mLoading
+                  ? t('track.visitor.briefing.loading')
+                  : monthCount === 0
+                    ? t('track.visitor.briefing.empty')
+                    : t('track.visitor.briefing.monthSummary', { count: monthCount })}
+              </p>
+            </div>
+
+            {mLoading ? (
+              <p className="kxp-empty" role="status">
+                {t('home.loading')}
+              </p>
+            ) : mErr ? (
+              <p className="kxp-empty" role="alert" style={{ color: 'var(--color-error)' }}>
+                {mErr}
+              </p>
+            ) : monthEvents.length === 0 ? (
+              <p className="kxp-empty">{t('track.visitor.briefing.empty')}</p>
+            ) : (
+              <div className="kxp-briefing__list">
+                {monthEvents.map((ev) => {
+                  const d = dday(ev.startDate);
+                  const ended = ev.lifecycle === 'ENDED';
+                  return (
+                    <article key={ev.id} className="kxp-briefing__row">
+                      <div className="kxp-briefing__rowmain">
+                        <div className="kxp-briefing__rowname">{ev.name}</div>
+                        <div className="kxp-briefing__rowmeta">
+                          <span>
+                            <IconCalendar width={15} height={15} /> {formatRange(ev.startDate, ev.endDate)}
+                          </span>
+                          {ev.hallLabel && (
+                            <span>
+                              <IconPin width={15} height={15} /> {ev.hallLabel}
+                            </span>
+                          )}
+                          {ev.category && <span className="kxp-tag">{ev.category}</span>}
+                        </div>
+                      </div>
+                      {!ended && d >= 0 && (
+                        <span className={`kxp-dday ${ddayClass(d)}`}>
+                          {d === 0 ? t('home.ddayZero') : t('home.dday', { n: d })}
+                        </span>
+                      )}
+                    </article>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/src/frontend/src/screens/public/BusinessTrackPage.tsx b/src/frontend/src/screens/public/BusinessTrackPage.tsx
new file mode 100644
index 0000000..3e152ba
--- /dev/null
+++ b/src/frontend/src/screens/public/BusinessTrackPage.tsx
@@ -0,0 +1,184 @@
+/*
+ * SCR-T2 business 서브홈 (§3C) — `/business`, 미인증 공개 · track="business".
+ * 비즈니스 히어로 + 2-분기 가치(주최자·참가) + 임대 절차 스텝 + 요금·서류 + 로그인/문의 CTA.
+ * 데이터: 안내·절차·요금=정적(M1·M2·M4·M5·M6 소개) · 문의=SCR-P6 딥링크 · 로그인=SCR-01 딥링크.
+ */
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { PublicShell } from './PublicShell';
+import {
+  IconVenue,
+  IconBuyer,
+  IconCheck,
+  IconSparkles,
+  IconArrowRight,
+} from './publicIcons';
+
+/** 주최자·참가 가치 항목. ai=true 면 보라색 AI 칩 표기. */
+const VALUE_CARDS: { key: string; icon: typeof IconVenue; items: { k: string; ai?: boolean }[]; to: string }[] = [
+  {
+    key: 'organizer',
+    icon: IconVenue,
+    to: '/login',
+    items: [{ k: 'rental' }, { k: 'quote', ai: true }, { k: 'floorplan' }, { k: 'rate' }],
+  },
+  {
+    key: 'exhibitor',
+    icon: IconBuyer,
+    to: '/login',
+    items: [{ k: 'apply' }, { k: 'utility' }, { k: 'compliance', ai: true }, { k: 'render', ai: true }],
+  },
+];
+
+const PROCESS_STEPS = ['inquiry', 'quote', 'contract', 'assign', 'booth', 'inspect'];
+const RATE_TYPES = ['shell', 'space', 'premium'];
+const DOC_ITEMS = ['assign', 'flame', 'structure'];
+
+export function BusinessTrackPage() {
+  const { t } = useTranslation();
+
+  return (
+    <PublicShell active="exhibit" track="business" cta={t('track.business.ctaApply')}>
+      {/* 비즈니스 히어로 */}
+      <section className="kxp-hero" aria-label={t('track.business.heroAria')}>
+        <div
+          className="kxp-hero__bg"
+          style={{ background: 'linear-gradient(135deg, #12233b 0%, #23346b 60%, #0066b3 130%)' }}
+          aria-hidden
+        />
+        <div className="kxp-hero__scrim" aria-hidden />
+        <div className="kxp-hero__inner">
+          <div className="kxp-hero__content">
+            <span className="kxp-hero__eyebrow">
+              <IconVenue width={16} height={16} /> {t('track.business.eyebrow')}
+            </span>
+            <h1 className="kxp-hero__title">{t('track.business.title')}</h1>
+            <p className="kxp-hero__lead">{t('track.business.subtitle')}</p>
+            <div className="kxp-hero__actions">
+              <Link className="kxp-btn kxp-btn--primary kxp-btn--lg" to="/public/exhibit-inquiry">
+                {t('track.business.ctaApply')}
+              </Link>
+              <Link className="kxp-btn kxp-btn--ghost kxp-btn--lg" to="/login">
+                {t('track.business.ctaLogin')}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 2-분기 가치 제안 */}
+      <section className="kxp-section" aria-label={t('track.business.valueAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.business.valueTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.business.valueSub')}</p>
+            </div>
+          </div>
+
+          <div className="kxp-valuegrid">
+            {VALUE_CARDS.map(({ key, icon: Icon, items, to }) => (
+              <article key={key} className="kxp-value">
+                <div className="kxp-value__head">
+                  <span className="kxp-value__ic" aria-hidden>
+                    <Icon width={24} height={24} />
+                  </span>
+                  <h3 className="kxp-value__title">{t(`track.business.value.${key}.title`)}</h3>
+                </div>
+                <p className="kxp-trackcard__desc">{t(`track.business.value.${key}.desc`)}</p>
+                <ul className="kxp-value__list">
+                  {items.map(({ k, ai }) => (
+                    <li key={k} className="kxp-value__li">
+                      <IconCheck width={18} height={18} />
+                      <span>{t(`track.business.value.${key}.item.${k}`)}</span>
+                      {ai && (
+                        <span className="kxp-aichip">
+                          <IconSparkles width={11} height={11} /> AI
+                        </span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+                <Link className="kxp-btn kxp-btn--primary" to={to}>
+                  {t(`track.business.value.${key}.cta`)}
+                </Link>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 임대 절차 흐름 스텝 */}
+      <section className="kxp-section kxp-section--alt" aria-label={t('track.business.processAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.business.processTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.business.processSub')}</p>
+            </div>
+          </div>
+          <ol className="kxp-flow">
+            {PROCESS_STEPS.map((k, i) => (
+              <li key={k} className="kxp-flow__step">
+                <span className="kxp-flow__no">{i + 1}</span>
+                <span className="kxp-flow__title">{t(`track.business.process.${k}.title`)}</span>
+                <span className="kxp-flow__desc">{t(`track.business.process.${k}.desc`)}</span>
+              </li>
+            ))}
+          </ol>
+        </div>
+      </section>
+
+      {/* 요금·서류 안내 */}
+      <section className="kxp-section" aria-label={t('track.business.rateAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.business.rateTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.business.rateSub')}</p>
+            </div>
+          </div>
+          <div className="kxp-trackcards">
+            {RATE_TYPES.map((k) => (
+              <article key={k} className="kxp-trackcard">
+                <span className="kxp-trackcard__label">{t(`track.business.rate.${k}.label`)}</span>
+                <h3 className="kxp-trackcard__title">{t(`track.business.rate.${k}.price`)}</h3>
+                <p className="kxp-trackcard__desc">{t(`track.business.rate.${k}.desc`)}</p>
+              </article>
+            ))}
+          </div>
+          <div className="kxp-list" style={{ marginTop: 20 }}>
+            {DOC_ITEMS.map((k) => (
+              <div key={k} className="kxp-listrow">
+                <div className="kxp-listrow__main">
+                  <div className="kxp-listrow__title">{t(`track.business.doc.${k}.title`)}</div>
+                  <div className="kxp-listrow__meta">{t(`track.business.doc.${k}.desc`)}</div>
+                </div>
+                <span className="kxp-listrow__right">
+                  <IconArrowRight width={18} height={18} />
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 로그인/문의 CTA 밴드 */}
+      <section className="kxp-section kxp-section--alt" aria-label={t('track.business.ctaBandAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-ctaband">
+            <span className="kxp-ctaband__text">{t('track.business.ctaBandText')}</span>
+            <div className="kxp-hero__actions" style={{ margin: 0 }}>
+              <Link className="kxp-btn kxp-btn--primary kxp-btn--lg" to="/login">
+                {t('track.business.ctaLogin')}
+              </Link>
+              <Link className="kxp-btn kxp-btn--outline kxp-btn--lg" to="/public/exhibit-inquiry">
+                {t('track.business.ctaInquiry')}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/PublicEventDetailPage.tsx b/src/frontend/src/screens/public/PublicEventDetailPage.tsx
new file mode 100644
index 0000000..75c5f36
--- /dev/null
+++ b/src/frontend/src/screens/public/PublicEventDetailPage.tsx
@@ -0,0 +1,310 @@
+/*
+ * SCR-P2 행사 상세 (소개·일정·연사·교통·FAQ) — M12, 비로그인 공개.
+ * design.md §3B. 히어로 + 서브탭(앵커) + 리치 콘텐츠 + 아젠다 타임라인 + 연사 + 사전등록 고정 CTA.
+ * 데이터: GET /api/public/events/{eventId} (공개 카탈로그). 아젠다·연사·FAQ는 안내용 예시(전용 API 후속).
+ */
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useParams } from 'react-router-dom';
+import { PublicShell } from './PublicShell';
+import { publicApi, type PublicEvent } from './publicApi';
+import { formatRange, errorMessage } from './publicFormat';
+import {
+  IconCalendar,
+  IconPin,
+  IconFactory,
+  IconCloud,
+  IconRobot,
+  IconLeaf,
+  IconChat,
+  IconShare,
+  IconLink,
+  IconChevronRight,
+} from './publicIcons';
+
+const TABS = [
+  { key: 'intro', i18n: 'detail.tabs.intro' },
+  { key: 'program', i18n: 'detail.tabs.program' },
+  { key: 'speakers', i18n: 'detail.tabs.speakers' },
+  { key: 'exhibitors', i18n: 'detail.tabs.exhibitors' },
+  { key: 'transport', i18n: 'detail.tabs.transport' },
+  { key: 'faq', i18n: 'detail.tabs.faq' },
+];
+
+const THEMES = [
+  { ic: <IconRobot width={40} height={40} />, titleKey: 'detail.theme1Title', descKey: 'detail.theme1Desc' },
+  { ic: <IconCloud width={40} height={40} />, titleKey: 'detail.theme2Title', descKey: 'detail.theme2Desc' },
+  { ic: <IconLeaf width={40} height={40} />, titleKey: 'detail.theme3Title', descKey: 'detail.theme3Desc' },
+];
+
+const AGENDA = [
+  { time: '10:00 – 11:30', roomKey: 'detail.agenda1Room', tag: 'KEYNOTE', titleKey: 'detail.agenda1Title', descKey: 'detail.agenda1Desc' },
+  { time: '13:00 – 14:30', roomKey: 'detail.agenda2Room', tag: 'TECH SESSION', titleKey: 'detail.agenda2Title', descKey: 'detail.agenda2Desc' },
+  { time: '15:00 – 17:00', roomKey: 'detail.agenda3Room', tag: 'NETWORKING', titleKey: 'detail.agenda3Title', descKey: 'detail.agenda3Desc' },
+];
+
+const SPEAKERS = [
+  { name: '김철수', roleKey: 'detail.speaker1Role' },
+  { name: '이영희', roleKey: 'detail.speaker2Role' },
+  { name: '박지성', roleKey: 'detail.speaker3Role' },
+  { name: 'Sarah Jenkins', roleKey: 'detail.speaker4Role' },
+];
+
+export function PublicEventDetailPage() {
+  const { t } = useTranslation();
+  const { eventId } = useParams<{ eventId: string }>();
+  const [activeTab, setActiveTab] = useState('intro');
+  const [day, setDay] = useState(1);
+  const [event, setEvent] = useState<PublicEvent | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!eventId) return;
+    let alive = true;
+    setLoading(true);
+    publicApi
+      .getEvent(eventId)
+      .then((e) => {
+        if (alive) {
+          setEvent(e);
+          setError('');
+        }
+      })
+      .catch((e) => alive && setError(errorMessage(e)))
+      .finally(() => alive && setLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [eventId]);
+
+  const title = event?.name ?? (loading ? t('detail.loadingTitle') : t('detail.fallbackTitle'));
+  const dateRange = event ? formatRange(event.startDate, event.endDate) : t('detail.dateTbd');
+  const place = event?.hallLabel ?? t('detail.placeTbd');
+  const registerTo = eventId ? `/public/events/${encodeURIComponent(eventId)}/register` : '#program';
+
+  return (
+    <PublicShell active="events" cta={t('detail.ctaRegister')}>
+      {/* 행사 히어로 */}
+      <section
+        className="kxp-hero"
+        aria-label={title}
+        style={{ backgroundColor: 'var(--color-canvas-bg)' }}
+      >
+        <div
+          className="kxp-hero__bg"
+          style={{ background: 'linear-gradient(135deg, #101828 0%, #1f3a5f 60%, #0066b3 120%)' }}
+          aria-hidden
+        />
+        <div className="kxp-hero__scrim" aria-hidden />
+        <div className="kxp-hero__inner">
+          <div className="kxp-hero__content">
+            <span className="kxp-hero__eyebrow">{t('detail.eyebrow')}</span>
+            <h1 className="kxp-hero__title">{title}</h1>
+            <p className="kxp-hero__lead">{error ? error : t('detail.lead')}</p>
+            <div className="kxp-eventhero__facts kxp-hero__meta">
+              <span className="kxp-hero__metacard">
+                <IconCalendar width={18} height={18} />
+                <span>
+                  <small>{t('detail.factDate')}</small>
+                  <strong>{dateRange}</strong>
+                </span>
+              </span>
+              <span className="kxp-hero__metacard">
+                <IconPin width={18} height={18} />
+                <span>
+                  <small>{t('detail.factPlace')}</small>
+                  <strong>{place}</strong>
+                </span>
+              </span>
+            </div>
+            <div className="kxp-hero__actions">
+              <Link className="kxp-btn kxp-btn--primary kxp-btn--lg" to={registerTo}>
+                {t('detail.ctaRegister')}
+              </Link>
+              {eventId && (
+                <Link
+                  className="kxp-btn kxp-btn--ghost kxp-btn--lg"
+                  to={`/public/events/${encodeURIComponent(eventId)}/floorplan`}
+                >
+                  {t('detail.ctaFloorplan')}
+                </Link>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 서브탭(앵커) */}
+      <nav className="kxp-subtabs" aria-label={t('detail.navAria')}>
+        <div className="kxp-subtabs__inner">
+          {TABS.map((tab) => (
+            <a
+              key={tab.key}
+              href={`#${tab.key}`}
+              className={`kxp-subtab${activeTab === tab.key ? ' is-active' : ''}`}
+              onClick={() => setActiveTab(tab.key)}
+            >
+              {t(tab.i18n)}
+            </a>
+          ))}
+        </div>
+      </nav>
+
+      {/* 공유 사이드 */}
+      <div className="kxp-share" aria-label={t('detail.shareAria')}>
+        <button type="button" className="kxp-share__btn" title={t('detail.share')}>
+          <IconShare />
+        </button>
+        <button type="button" className="kxp-share__btn" title={t('detail.copyLink')}>
+          <IconLink />
+        </button>
+      </div>
+
+      {/* 소개 */}
+      <section className="kxp-section" id="intro" aria-label={t('detail.overviewAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-detail">
+            <div>
+              <h2 className="kxp-section__title">{t('detail.overviewTitle')}</h2>
+              <p className="kxp-detail__lead">{t('detail.overviewLead')}</p>
+              <div className="kxp-detail__stats">
+                <div className="kxp-statcard">
+                  <IconFactory width={28} height={28} />
+                  <strong>{event?.boothCount != null && event.boothCount > 0 ? `${event.boothCount}+` : '500+'}</strong>
+                  <span>{t('detail.statBooth')}</span>
+                </div>
+                <div className="kxp-statcard">
+                  <IconRobot width={28} height={28} />
+                  <strong>{t('detail.statVisitorsValue')}</strong>
+                  <span>{t('detail.statVisitors')}</span>
+                </div>
+              </div>
+            </div>
+            <div
+              className="kxp-detail__img"
+              style={{ background: 'linear-gradient(135deg, #0066b3 0%, #6d4aff 120%)' }}
+              role="img"
+              aria-label={t('detail.overviewAria')}
+            />
+          </div>
+
+          <h3 className="kxp-section__title" style={{ fontSize: 22, textAlign: 'center', marginTop: 48 }}>
+            {t('detail.themesTitle')}
+          </h3>
+          <div className="kxp-themes">
+            {THEMES.map((theme) => (
+              <div className="kxp-theme" key={theme.titleKey}>
+                {theme.ic}
+                <h4>{t(theme.titleKey)}</h4>
+                <p>{t(theme.descKey)}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 프로그램 */}
+      <section className="kxp-section kxp-section--alt" id="program" aria-label={t('detail.programAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <h2 className="kxp-section__title">{t('detail.programTitle')}</h2>
+            <div className="kxp-daytabs" role="tablist" aria-label={t('detail.programAria')}>
+              <button
+                type="button"
+                role="tab"
+                aria-selected={day === 1}
+                className={`kxp-daytab${day === 1 ? ' is-active' : ''}`}
+                onClick={() => setDay(1)}
+              >
+                {t('detail.day1')}
+              </button>
+              <button
+                type="button"
+                role="tab"
+                aria-selected={day === 2}
+                className={`kxp-daytab${day === 2 ? ' is-active' : ''}`}
+                onClick={() => setDay(2)}
+              >
+                {t('detail.day2')}
+              </button>
+            </div>
+          </div>
+
+          <div className="kxp-agenda">
+            {AGENDA.map((a) => (
+              <div className="kxp-agenda__item" key={a.titleKey}>
+                <div className="kxp-agenda__time">
+                  {a.time}
+                  <small>{t(a.roomKey)}</small>
+                </div>
+                <div>
+                  <span className="kxp-tag" style={{ marginBottom: 8, display: 'inline-block' }}>
+                    {a.tag}
+                  </span>
+                  <h4 className="kxp-agenda__title">{t(a.titleKey)}</h4>
+                  <p className="kxp-agenda__desc">{t(a.descKey)}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 연사 */}
+      <section className="kxp-section" id="speakers" aria-label={t('detail.speakersTitle')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head" style={{ justifyContent: 'center' }}>
+            <h2 className="kxp-section__title">{t('detail.speakersTitle')}</h2>
+          </div>
+          <div className="kxp-speakers">
+            {SPEAKERS.map((s, i) => (
+              <div className="kxp-speaker" key={s.name}>
+                <div
+                  className="kxp-speaker__photo"
+                  style={{
+                    background: `linear-gradient(135deg, ${
+                      ['#0066b3', '#6d4aff', '#0e8a5f', '#004c86'][i % 4]
+                    } 0%, #101828 160%)`,
+                  }}
+                  role="img"
+                  aria-label={t('detail.profileAria', { name: s.name })}
+                />
+                <h5>{s.name}</h5>
+                <p>{t(s.roleKey)}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ (요약) */}
+      <section className="kxp-section kxp-section--tint" id="faq" aria-label={t('detail.faqAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <h2 className="kxp-section__title">{t('detail.faqTitle')}</h2>
+          </div>
+          <div className="kxp-eventgrid" style={{ gridTemplateColumns: '1fr' }}>
+            {[
+              [t('detail.faq1Q'), t('detail.faq1A')],
+              [t('detail.faq2Q'), t('detail.faq2A')],
+              [t('detail.faq3Q'), t('detail.faq3A')],
+            ].map(([q, a]) => (
+              <div className="kxp-boothtype__body" key={q} style={{ background: 'var(--color-white)', border: 'var(--border-card)', borderRadius: 8 }}>
+                <h4 style={{ display: 'flex', gap: 8, alignItems: 'center', margin: 0, color: 'var(--color-neutral-900)', fontSize: 'var(--fs-h3)' }}>
+                  <IconChat width={18} height={18} /> {q}
+                </h4>
+                <p style={{ margin: 0, color: 'var(--color-neutral-500)', fontSize: 'var(--fs-body)' }}>{a}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 사전등록 고정 CTA */}
+      <Link className="kxp-btn kxp-btn--primary kxp-btn--lg kxp-fab" to={registerTo}>
+        {t('detail.fabCta')} <IconChevronRight width={18} height={18} />
+      </Link>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/PublicFloorplanPage.tsx b/src/frontend/src/screens/public/PublicFloorplanPage.tsx
new file mode 100644
index 0000000..8da91bb
--- /dev/null
+++ b/src/frontend/src/screens/public/PublicFloorplanPage.tsx
@@ -0,0 +1,318 @@
+/*
+ * SCR-P3 공개 인터랙티브 플로어플랜 (M12·M2) — 비로그인 공개.
+ * design.md §3B. 좌: 검색/필터 + 부스 목록(비시각 대안 N1) / 우: 인터랙티브 맵 + 팝오버 + 범례.
+ * 데이터: GET /api/public/events/{eventId}/floorplan (부스번호·업체명·상태·중심점).
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { PublicShell } from './PublicShell';
+import { publicApi, type PublicFloorplan, type PublicFloorplanBooth } from './publicApi';
+import { errorMessage } from './publicFormat';
+import {
+  IconSearch,
+  IconChevronRight,
+  IconClose,
+  IconArrowRight,
+  IconZoomIn,
+  IconZoomOut,
+  IconReset,
+  IconTarget,
+} from './publicIcons';
+
+/** boothType 원문(assembled|independent|corner|island 등) → i18n 키. */
+const TYPE_I18N: Record<string, string> = {
+  assembled: 'floorplan.type.assembled',
+  independent: 'floorplan.type.independent',
+  corner: 'floorplan.type.corner',
+  island: 'floorplan.type.island',
+};
+
+export function PublicFloorplanPage() {
+  const { t } = useTranslation();
+  const { eventId } = useParams<{ eventId: string }>();
+  // boothType → 표시 라벨(번역). 알 수 없는 값은 원문 유지.
+  const typeLabel = (bt: string | null | undefined) =>
+    bt ? (TYPE_I18N[bt] ? t(TYPE_I18N[bt]) : bt) : t('floorplan.type.default');
+  const [query, setQuery] = useState('');
+  const [cat, setCat] = useState<string | null>(null);
+  const [selected, setSelected] = useState<PublicFloorplanBooth | null>(null);
+  const [scale, setScale] = useState(1);
+  const [hallId, setHallId] = useState<string>('all');
+
+  const [data, setData] = useState<PublicFloorplan | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!eventId) return;
+    let alive = true;
+    setLoading(true);
+    publicApi
+      .getFloorplan(eventId)
+      .then((d) => {
+        if (alive) {
+          setData(d);
+          setError('');
+        }
+      })
+      .catch((e) => alive && setError(errorMessage(e)))
+      .finally(() => alive && setLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [eventId]);
+
+  const booths = useMemo(() => data?.booths ?? [], [data]);
+  const halls = data?.halls ?? [];
+
+  // 존/유형 필터 후보 = 데이터에 존재하는 boothType 집합
+  const categories = useMemo(
+    () => Array.from(new Set(booths.map((b) => typeLabel(b.boothType)))).slice(0, 8),
+    [booths],
+  );
+
+  const scoped = useMemo(
+    () => (hallId === 'all' ? booths : booths.filter((b) => b.hallLabel === hallId)),
+    [booths, hallId],
+  );
+
+  const filtered = useMemo(() => {
+    return scoped.filter((b) => {
+      const q = query.trim();
+      const name = b.companyName ?? '';
+      const code = b.boothNo ?? '';
+      const matchQ = !q || name.includes(q) || code.includes(q);
+      const matchC = !cat || typeLabel(b.boothType) === cat;
+      return matchQ && matchC;
+    });
+  }, [scoped, query, cat]);
+
+  const boothKey = (b: PublicFloorplanBooth) => `${b.hallLabel ?? ''}#${b.boothNo ?? ''}`;
+
+  const boothClass = (b: PublicFloorplanBooth) => {
+    let c = 'kxp-booth';
+    if (b.status === 'reserved') c += ' kxp-booth--reserved';
+    if (selected && boothKey(selected) === boothKey(b)) c += ' is-selected';
+    return c;
+  };
+
+  return (
+    <PublicShell active="visit" cta={t('ticket.viewPurchase')}>
+      <div className="kxp-fp">
+        {/* 좌측 검색/필터/목록 */}
+        <aside className="kxp-fp__side" aria-label={t('floorplan.sideAria')}>
+          <div className="kxp-fp__filters">
+            <h2>{t('floorplan.filtersTitle')}</h2>
+            <div className="kxp-fp__searchbox">
+              <IconSearch width={18} height={18} />
+              <input
+                type="search"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t('floorplan.searchPh')}
+                aria-label={t('floorplan.searchAria')}
+              />
+            </div>
+            {categories.length > 0 && (
+              <div>
+                <p className="kxp-fp__label">{t('floorplan.typeFilter')}</p>
+                <div className="kxp-fp__chips">
+                  {categories.map((c) => (
+                    <button
+                      key={c}
+                      type="button"
+                      className={`kxp-fp__chip${cat === c ? ' is-active' : ''}`}
+                      aria-pressed={cat === c}
+                      onClick={() => setCat(cat === c ? null : c)}
+                    >
+                      {c}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+            {halls.length > 0 && (
+              <div>
+                <p className="kxp-fp__label">{t('floorplan.hallSelect')}</p>
+                <select
+                  className="kxp-select"
+                  aria-label={t('floorplan.hallSelect')}
+                  value={hallId}
+                  onChange={(e) => setHallId(e.target.value)}
+                >
+                  <option value="all">{t('floorplan.allHalls')}</option>
+                  {halls.map((h) => (
+                    <option key={h.hallId} value={h.label}>
+                      {h.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+          </div>
+
+          <div className="kxp-fp__list" aria-label={t('floorplan.listAria')}>
+            {loading && <p className="kxp-empty" role="status">{t('floorplan.loading')}</p>}
+            {!loading && error && (
+              <p className="kxp-empty" role="alert" style={{ color: 'var(--color-error)' }}>
+                {error}
+              </p>
+            )}
+            {!loading && !error && (
+              <>
+                <p className="kxp-fp__listhint">{t('floorplan.searchResults', { count: filtered.length })}</p>
+                {filtered.length === 0 && <p className="kxp-empty">{t('floorplan.noMatch')}</p>}
+                {filtered.map((b) => (
+                  <button
+                    key={boothKey(b)}
+                    type="button"
+                    className={`kxp-fp__row${
+                      b.status === 'reserved' ? ' kxp-fp__row--reserved' : ''
+                    }${selected && boothKey(selected) === boothKey(b) ? ' is-active' : ''}`}
+                    onClick={() => setSelected(b)}
+                  >
+                    <span>
+                      <span className="kxp-fp__row-code">{b.boothNo ?? '—'}</span>
+                      <span className="kxp-fp__row-name">
+                        {b.companyName ?? (b.status === 'reserved' ? t('floorplan.reservedBooth') : t('floorplan.availableBooth'))}
+                      </span>
+                      <span className="kxp-fp__row-cat">
+                        {typeLabel(b.boothType)}
+                        {b.hallLabel ? ` · ${b.hallLabel}` : ''}
+                      </span>
+                    </span>
+                    <IconChevronRight width={18} height={18} />
+                  </button>
+                ))}
+              </>
+            )}
+          </div>
+        </aside>
+
+        {/* 우측 인터랙티브 맵 */}
+        <section className="kxp-fp__stage" aria-label={t('floorplan.stageAria')}>
+          <div className="kxp-fp__canvaswrap">
+            <div
+              className="kxp-fp__canvas"
+              style={{ transform: `scale(${scale})` }}
+              role="group"
+              aria-label={t('floorplan.boothLayoutAria')}
+            >
+              {scoped.map((b, i) => (
+                <button
+                  key={`${boothKey(b)}-${i}`}
+                  type="button"
+                  className={boothClass(b)}
+                  onClick={() => setSelected(b)}
+                  aria-label={t('floorplan.boothAria', { no: b.boothNo ?? '', name: b.companyName ?? '' })}
+                >
+                  {b.boothNo ?? '—'}
+                  {b.status === 'reserved' && <span className="kxp-booth__badge">R</span>}
+                </button>
+              ))}
+              {!loading && scoped.length === 0 && (
+                <p className="kxp-empty" style={{ gridColumn: '1 / -1' }}>
+                  {error ? t('floorplan.loadFail') : t('floorplan.noBooth')}
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* 팝오버 */}
+          {selected && (
+            <div
+              className="kxp-fp__pop"
+              style={{ left: 24, top: 24 }}
+              role="dialog"
+              aria-label={t('floorplan.popInfoAria', { name: selected.companyName ?? selected.boothNo ?? t('floorplan.type.default') })}
+            >
+              <div className="kxp-fp__pop-head">
+                <div className="kxp-fp__pop-top">
+                  <span className="kxp-chip">{selected.boothNo ?? '—'}</span>
+                  <button
+                    type="button"
+                    className="kxp-fp__pop-close"
+                    aria-label={t('common.actions.close')}
+                    onClick={() => setSelected(null)}
+                  >
+                    <IconClose width={18} height={18} />
+                  </button>
+                </div>
+                <h5 className="kxp-fp__pop-name">
+                  {selected.companyName ?? (selected.status === 'reserved' ? t('floorplan.reservedBooth') : t('floorplan.availableBooth'))}
+                </h5>
+                <p className="kxp-fp__pop-cat">
+                  {typeLabel(selected.boothType)}
+                  {selected.hallLabel ? ` · ${selected.hallLabel}` : ''}
+                </p>
+              </div>
+              <div className="kxp-fp__pop-foot">
+                <a className="kxp-fp__pop-link" href="#top">
+                  {t('floorplan.popDetail')} <IconArrowRight width={14} height={14} />
+                </a>
+                <a className="kxp-btn kxp-btn--outline" href="#top" style={{ padding: '6px 12px', fontSize: 12 }}>
+                  {t('floorplan.directions')}
+                </a>
+              </div>
+            </div>
+          )}
+
+          {/* 줌 컨트롤 */}
+          <div className="kxp-fp__zoom">
+            <div className="kxp-fp__zoomgroup">
+              <button
+                type="button"
+                className="kxp-fp__zoombtn"
+                aria-label={t('floorplan.zoomIn')}
+                onClick={() => setScale((s) => Math.min(2, s + 0.1))}
+              >
+                <IconZoomIn />
+              </button>
+              <button
+                type="button"
+                className="kxp-fp__zoombtn"
+                aria-label={t('floorplan.zoomOut')}
+                onClick={() => setScale((s) => Math.max(0.6, s - 0.1))}
+              >
+                <IconZoomOut />
+              </button>
+              <button
+                type="button"
+                className="kxp-fp__zoombtn"
+                aria-label={t('floorplan.reset')}
+                onClick={() => {
+                  setScale(1);
+                  setSelected(null);
+                }}
+              >
+                <IconReset />
+              </button>
+            </div>
+            <a
+              className="kxp-btn kxp-btn--primary"
+              href="#top"
+              aria-label={t('floorplan.myLocation')}
+              style={{ padding: 12 }}
+            >
+              <IconTarget />
+            </a>
+          </div>
+
+          {/* 범례 */}
+          <div className="kxp-fp__legend" aria-label={t('floorplan.legendAria')}>
+            <span>
+              <span className="kxp-fp__dot kxp-fp__dot--avail" /> {t('floorplan.legendAvailable')}
+            </span>
+            <span>
+              <span className="kxp-fp__dot kxp-fp__dot--reserved" /> {t('floorplan.legendReserved')}
+            </span>
+            <span>
+              <span className="kxp-fp__dot kxp-fp__dot--public" /> {t('floorplan.legendPublic')}
+            </span>
+          </div>
+        </section>
+      </div>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/PublicGatewayPage.tsx b/src/frontend/src/screens/public/PublicGatewayPage.tsx
new file mode 100644
index 0000000..ed3b486
--- /dev/null
+++ b/src/frontend/src/screens/public/PublicGatewayPage.tsx
@@ -0,0 +1,111 @@
+/*
+ * SCR-T0 트랙 관문 랜딩 (§3C) — 루트 `/`, 미인증 공개.
+ * 제품 히어로 + 3-트랙 대형 분기 카드 + 진행/예정 전시 레일.
+ * 데이터: GET /api/public/events(레일) · 3-트랙 카드=정적 메타. i18n: track.gateway.* / track.shell.*
+ */
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { PublicShell } from './PublicShell';
+import { usePublicEvents, EventGrid } from './trackShared';
+import {
+  IconSparkles,
+  IconChevronRight,
+  IconQr,
+  IconVenue,
+  IconFactory,
+  IconArrowRight,
+} from './publicIcons';
+import type { ComponentType, SVGProps } from 'react';
+
+type Ico = ComponentType<SVGProps<SVGSVGElement>>;
+
+/** 3-트랙 분기 카드 메타 — 관람(1순위·강조) · 비즈니스 · 협력사. */
+const TRACK_CARDS: { key: string; icon: Ico; to: string; primary?: boolean }[] = [
+  { key: 'visitor', icon: IconQr, to: '/visitor', primary: true },
+  { key: 'business', icon: IconVenue, to: '/business' },
+  { key: 'agency', icon: IconFactory, to: '/agency' },
+];
+
+export function PublicGatewayPage() {
+  const { t } = useTranslation();
+  const events = usePublicEvents(8);
+
+  return (
+    <PublicShell active="events" cta={t('track.gateway.ctaPreReg')}>
+      {/* 제품 히어로 */}
+      <section className="kxp-hero" aria-label={t('track.gateway.heroAria')}>
+        <div
+          className="kxp-hero__bg"
+          style={{ background: 'linear-gradient(135deg, #12233b 0%, #1f3a5f 55%, #0066b3 130%)' }}
+          aria-hidden
+        />
+        <div className="kxp-hero__scrim" aria-hidden />
+        <span className="kxp-aiwm">{t('track.gateway.aiWatermark')}</span>
+        <div className="kxp-hero__inner">
+          <div className="kxp-hero__content">
+            <span className="kxp-hero__eyebrow">
+              <IconSparkles width={16} height={16} /> {t('track.gateway.eyebrow')}
+            </span>
+            <h1 className="kxp-hero__title">{t('track.gateway.title')}</h1>
+            <p className="kxp-hero__lead">{t('track.gateway.subtitle')}</p>
+            <div className="kxp-hero__actions">
+              <a className="kxp-btn kxp-btn--primary kxp-btn--lg" href="#events">
+                {t('track.gateway.ctaPreReg')}
+              </a>
+              <Link className="kxp-btn kxp-btn--ghost kxp-btn--lg" to="/public/exhibit-inquiry">
+                {t('track.gateway.ctaInquiry')}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 3-트랙 대형 분기 카드 */}
+      <section className="kxp-section" id="tracks" aria-label={t('track.gateway.tracksAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.gateway.tracksTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.gateway.tracksSub')}</p>
+            </div>
+          </div>
+
+          <div className="kxp-trackcards">
+            {TRACK_CARDS.map(({ key, icon: Icon, to, primary }) => (
+              <article
+                key={key}
+                className={`kxp-trackcard${primary ? ' kxp-trackcard--primary' : ''}`}
+              >
+                <span className="kxp-trackcard__ic" aria-hidden>
+                  <Icon width={26} height={26} />
+                </span>
+                <span className="kxp-trackcard__label">{t(`track.gateway.card.${key}.label`)}</span>
+                <h3 className="kxp-trackcard__title">{t(`track.gateway.card.${key}.title`)}</h3>
+                <p className="kxp-trackcard__desc">{t(`track.gateway.card.${key}.desc`)}</p>
+                <Link className="kxp-btn kxp-btn--primary kxp-trackcard__cta" to={to}>
+                  {t(`track.gateway.card.${key}.cta`)} <IconChevronRight width={16} height={16} />
+                </Link>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 행사 하이라이트 레일 */}
+      <section className="kxp-section kxp-section--alt" id="events" aria-label={t('track.gateway.eventsAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.gateway.eventsTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.gateway.eventsSub')}</p>
+            </div>
+            <Link className="kxp-section__more" to="/visitor">
+              {t('track.gateway.eventsMore')} <IconArrowRight width={16} height={16} />
+            </Link>
+          </div>
+          <EventGrid state={events} />
+        </div>
+      </section>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/PublicHomePage.tsx b/src/frontend/src/screens/public/PublicHomePage.tsx
new file mode 100644
index 0000000..d7aefed
--- /dev/null
+++ b/src/frontend/src/screens/public/PublicHomePage.tsx
@@ -0,0 +1,367 @@
+/*
+ * SCR-P1 공개 홍보 사이트 홈 (M12) — 비로그인 공개.
+ * design.md §3B. 히어로 + 진행/예정 행사 카드 + 교통(GTX-A) 섹션.
+ * 데이터: GET /api/public/events (공개 카탈로그, 비인증).
+ */
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { PublicShell } from './PublicShell';
+import { publicApi, type PublicEvent } from './publicApi';
+import { deriveStatus, dday, formatRange, errorMessage } from './publicFormat';
+import {
+  IconSparkles,
+  IconCalendar,
+  IconPin,
+  IconArrowRight,
+  IconChevronRight,
+  IconTrain,
+  IconBus,
+  IconParking,
+  IconShuttle,
+  IconMap,
+  IconVenue,
+  IconBuyer,
+  IconFactory,
+  IconQr,
+  IconRobot,
+  IconTarget,
+} from './publicIcons';
+import type { ComponentType, SVGProps } from 'react';
+
+function ddayClass(d: number) {
+  if (d <= 3) return 'kxp-dday kxp-dday--soon';
+  if (d <= 7) return 'kxp-dday kxp-dday--warn';
+  return 'kxp-dday';
+}
+
+type Ico = ComponentType<SVGProps<SVGSVGElement>>;
+
+/** P1 제품 아이덴티티 — 역할별 가치 카드 4종(주최자·참가업체·공사업체·관람객). */
+const ROLE_CARDS: {
+  key: string;
+  icon: Ico;
+  /** 진입 CTA 목적지(로그인 또는 사전등록). */
+  to: string;
+}[] = [
+  { key: 'organizer', icon: IconVenue, to: '/login' },
+  { key: 'exhibitor', icon: IconBuyer, to: '/login' },
+  { key: 'contractor', icon: IconFactory, to: '/login' },
+  { key: 'visitor', icon: IconQr, to: '#events' },
+];
+
+/** P1 핵심 기능 스텝(과장 없이 실기능만): AI 배치 → 나노바나나 시안 → 역경매 옥션 → 실시간 정산. */
+const FEATURE_STEPS: { key: string; icon: Ico }[] = [
+  { key: 'layout', icon: IconRobot },
+  { key: 'render', icon: IconSparkles },
+  { key: 'auction', icon: IconFactory },
+  { key: 'settle', icon: IconTarget },
+];
+
+/** 진행중·예정 우선 정렬 후 상위 N건만 홈에 노출. */
+function pickFeatured(events: PublicEvent[], max = 6): PublicEvent[] {
+  const rank = (e: PublicEvent) => {
+    const s = deriveStatus(e.startDate, e.endDate);
+    return s === 'ongoing' ? 0 : s === 'upcoming' ? 1 : 2;
+  };
+  return [...events].sort((a, b) => rank(a) - rank(b)).slice(0, max);
+}
+
+export function PublicHomePage() {
+  const { t } = useTranslation();
+  const [events, setEvents] = useState<PublicEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    publicApi
+      .listEvents()
+      .then((list) => {
+        if (alive) {
+          setEvents(pickFeatured(list));
+          setError('');
+        }
+      })
+      .catch((e) => alive && setError(errorMessage(e)))
+      .finally(() => alive && setLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  return (
+    <PublicShell active="events">
+      {/* 히어로 */}
+      <section
+        className="kxp-hero"
+        aria-label={t('home.heroAria')}
+        style={{
+          backgroundColor: 'var(--color-canvas-bg)',
+        }}
+      >
+        <div
+          className="kxp-hero__bg"
+          style={{
+            background:
+              'linear-gradient(135deg, #12233b 0%, #1f3a5f 55%, #0066b3 130%)',
+          }}
+          aria-hidden
+        />
+        <div className="kxp-hero__scrim" aria-hidden />
+        <div className="kxp-hero__inner">
+          <div className="kxp-hero__content">
+            <span className="kxp-hero__eyebrow">
+              <IconSparkles width={16} height={16} /> {t('home.prodEyebrow')}
+            </span>
+            <h1 className="kxp-hero__title">{t('home.prodTitle')}</h1>
+            <p className="kxp-hero__lead">{t('home.prodTagline')}</p>
+            <div className="kxp-hero__actions">
+              <Link className="kxp-btn kxp-btn--primary kxp-btn--lg" to="/login">
+                {t('home.ctaLogin')}
+              </Link>
+              <a className="kxp-btn kxp-btn--ghost kxp-btn--lg" href="#events">
+                {t('home.ctaPreReg')}
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 제품 소개 — 역할별 가치 카드 4장 (제품 아이덴티티) */}
+      <section className="kxp-section" id="product" aria-label={t('home.roleAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('home.roleTitle')}</h2>
+              <p className="kxp-section__sub">{t('home.roleSub')}</p>
+            </div>
+          </div>
+
+          <div className="kxp-roles">
+            {ROLE_CARDS.map(({ key, icon: Icon, to }) => {
+              const cta = (
+                <span className="kxp-role__cta">
+                  {t(`home.roleCard.${key}.cta`)} <IconChevronRight width={16} height={16} />
+                </span>
+              );
+              return (
+                <article key={key} className="kxp-role">
+                  <span className="kxp-role__ic" aria-hidden>
+                    <Icon width={26} height={26} />
+                  </span>
+                  <span className="kxp-role__badge">{t(`home.roleCard.${key}.badge`)}</span>
+                  <h3 className="kxp-role__title">{t(`home.roleCard.${key}.title`)}</h3>
+                  <p className="kxp-role__desc">{t(`home.roleCard.${key}.desc`)}</p>
+                  {to.startsWith('#') ? (
+                    <a className="kxp-role__link" href={to}>
+                      {cta}
+                    </a>
+                  ) : (
+                    <Link className="kxp-role__link" to={to}>
+                      {cta}
+                    </Link>
+                  )}
+                </article>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* 핵심 기능 스트립 — AI 배치 → 시공 시안 → 역경매 옥션 → 실시간 정산 */}
+      <section className="kxp-section kxp-section--alt" aria-label={t('home.stepsAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('home.stepsTitle')}</h2>
+              <p className="kxp-section__sub">{t('home.stepsSub')}</p>
+            </div>
+          </div>
+
+          <ol className="kxp-steps">
+            {FEATURE_STEPS.map(({ key, icon: Icon }, i) => (
+              <li key={key} className="kxp-step">
+                <div className="kxp-step__card">
+                  <span className="kxp-step__ic" aria-hidden>
+                    <Icon width={24} height={24} />
+                  </span>
+                  <span className="kxp-step__no">{i + 1}</span>
+                  <h4 className="kxp-step__title">{t(`home.featStep.${key}.title`)}</h4>
+                  <p className="kxp-step__desc">{t(`home.featStep.${key}.desc`)}</p>
+                </div>
+                {i < FEATURE_STEPS.length - 1 && (
+                  <span className="kxp-step__arrow" aria-hidden>
+                    <IconArrowRight width={20} height={20} />
+                  </span>
+                )}
+              </li>
+            ))}
+          </ol>
+        </div>
+      </section>
+
+      {/* 진행/예정 행사 */}
+      <section className="kxp-section" id="events" aria-label={t('home.eventsAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('home.eventsTitle')}</h2>
+              <p className="kxp-section__sub">{t('home.eventsSub')}</p>
+            </div>
+            <a className="kxp-section__more" href="#events">
+              {t('home.eventsMore')} <IconArrowRight width={16} height={16} />
+            </a>
+          </div>
+
+          {loading && (
+            <p className="kxp-empty" role="status">
+              {t('home.loading')}
+            </p>
+          )}
+          {!loading && error && (
+            <p className="kxp-empty" role="alert" style={{ color: 'var(--color-error)' }}>
+              {error}
+            </p>
+          )}
+          {!loading && !error && events.length === 0 && (
+            <p className="kxp-empty">{t('home.empty')}</p>
+          )}
+
+          {!loading && !error && events.length > 0 && (
+            <div className="kxp-eventgrid">
+              {events.map((ev, i) => {
+                const status = deriveStatus(ev.startDate, ev.endDate);
+                const d = dday(ev.startDate);
+                const accentAi = i % 3 === 1;
+                return (
+                  <article
+                    key={ev.id}
+                    className="kxp-ecard"
+                    style={accentAi ? { borderLeftColor: 'var(--color-ai-accent)' } : undefined}
+                  >
+                    <div className="kxp-ecard__media">
+                      <div
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          background: accentAi
+                            ? 'linear-gradient(135deg, #6d4aff 0%, #1f29fc 100%)'
+                            : 'linear-gradient(135deg, #0066b3 0%, #004c86 100%)',
+                        }}
+                        aria-hidden
+                      />
+                      {accentAi && (
+                        <span className="kxp-ecard__topright kxp-chip kxp-chip--ai">
+                          <IconSparkles width={13} height={13} /> {t('home.aiOptimized')}
+                        </span>
+                      )}
+                      {status === 'ongoing' ? (
+                        <span className="kxp-ecard__botleft kxp-dday kxp-dday--soon">{t('home.ongoing')}</span>
+                      ) : status === 'ended' ? (
+                        <span className="kxp-ecard__botleft kxp-dday">{t('home.ended')}</span>
+                      ) : (
+                        <span className={`kxp-ecard__botleft ${ddayClass(d)}`}>
+                          {d === 0 ? t('home.ddayZero') : t('home.dday', { n: d })}
+                        </span>
+                      )}
+                    </div>
+                    <div className="kxp-ecard__body">
+                      <div className="kxp-ecard__tags">
+                        <span className="kxp-tag">{t('home.tagExhibition')}</span>
+                        {ev.boothCount != null && ev.boothCount > 0 && (
+                          <span className="kxp-tag">{t('home.booth', { count: ev.boothCount })}</span>
+                        )}
+                      </div>
+                      <h3 className="kxp-ecard__title">{ev.name}</h3>
+                      <div className="kxp-ecard__meta">
+                        <span>
+                          <IconCalendar width={18} height={18} /> {formatRange(ev.startDate, ev.endDate)}
+                        </span>
+                        <span>
+                          <IconPin width={18} height={18} /> {ev.hallLabel ?? t('home.hallTbd')}
+                        </span>
+                      </div>
+                      <Link
+                        className="kxp-btn kxp-btn--primary kxp-btn--block"
+                        to={`/public/events/${encodeURIComponent(ev.id)}/register`}
+                      >
+                        {t('home.register')}
+                      </Link>
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* 교통 */}
+      <section className="kxp-section kxp-section--alt" id="transport" aria-label={t('home.transportAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-transport">
+            <div>
+              <h2 className="kxp-section__title">{t('home.transportTitle')}</h2>
+              <p className="kxp-section__sub">{t('home.transportSub')}</p>
+
+              <div className="kxp-transport__gtx">
+                <span className="kxp-transport__gtx-ic">
+                  <IconTrain width={30} height={30} />
+                </span>
+                <div>
+                  <h4>{t('home.gtxTitle')}</h4>
+                  <p>{t('home.gtxDesc')}</p>
+                </div>
+              </div>
+
+              <div className="kxp-transport__opts">
+                <div className="kxp-transport__opt">
+                  <IconBus />
+                  <h5>{t('home.transit')}</h5>
+                  <span>{t('home.transitDesc')}</span>
+                </div>
+                <div className="kxp-transport__opt">
+                  <IconParking />
+                  <h5>{t('home.parking')}</h5>
+                  <span>{t('home.parkingDesc')}</span>
+                </div>
+                <div className="kxp-transport__opt">
+                  <IconShuttle />
+                  <h5>{t('home.shuttle')}</h5>
+                  <span>{t('home.shuttleDesc')}</span>
+                </div>
+              </div>
+            </div>
+
+            <div
+              className="kxp-transport__map"
+              style={{
+                background:
+                  'linear-gradient(135deg, #d9eaf7 0%, #eff6fc 60%, #ffffff 100%)',
+              }}
+              role="img"
+              aria-label={t('home.mapAria')}
+            >
+              <div className="kxp-transport__mapcard">
+                <div>
+                  <small>{t('home.mapAddress')}</small>
+                  <strong>{t('home.mapPlace')}</strong>
+                </div>
+                <a
+                  className="kxp-btn kxp-btn--primary"
+                  href="#transport"
+                  aria-label={t('home.mapViewAria')}
+                  style={{ padding: 12, borderRadius: '9999px' }}
+                >
+                  <IconMap />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/PublicInquiryPage.tsx b/src/frontend/src/screens/public/PublicInquiryPage.tsx
new file mode 100644
index 0000000..ed9a736
--- /dev/null
+++ b/src/frontend/src/screens/public/PublicInquiryPage.tsx
@@ -0,0 +1,278 @@
+/*
+ * SCR-P6 참가/부스 신청 문의 (M12) — 비로그인 공개.
+ * design.md §3B. 참가 안내(부스 유형·요금) + 문의 폼 + 담당 연락처 + 로그인 유도.
+ * 제출: POST /api/public/inquiries (접수번호 반환). 개인정보 동의(필수) 미체크 시 차단.
+ */
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PublicShell } from './PublicShell';
+import { publicApi } from './publicApi';
+import { errorMessage } from './publicFormat';
+import { IconPhone, IconMail, IconPin, IconSend, IconArrowRight, IconCheckCircle } from './publicIcons';
+
+const BOOTH_TYPES = [
+  { tierKey: 'inquiry.booth1Tier', titleKey: 'inquiry.booth1Title', descKey: 'inquiry.booth1Desc', priceKey: 'inquiry.booth1Price' },
+  { tierKey: 'inquiry.booth2Tier', titleKey: 'inquiry.booth2Title', descKey: 'inquiry.booth2Desc', priceKey: 'inquiry.booth2Price' },
+  { tierKey: 'inquiry.booth3Tier', titleKey: 'inquiry.booth3Title', descKey: 'inquiry.booth3Desc', priceKey: 'inquiry.booth3Price' },
+];
+
+export function PublicInquiryPage() {
+  const { t } = useTranslation();
+  const [company, setCompany] = useState('');
+  const [name, setName] = useState('');
+  const [contact, setContact] = useState('');
+  const [scale, setScale] = useState('');
+  const [hall, setHall] = useState('');
+  const [message, setMessage] = useState('');
+  const [agree, setAgree] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [receiptNo, setReceiptNo] = useState('');
+  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const submit = async () => {
+    setError('');
+    if (!agree) {
+      setError(t('inquiry.errAgree'));
+      return;
+    }
+    if (!name.trim()) {
+      setError(t('inquiry.errName'));
+      return;
+    }
+    if (!contact.trim()) {
+      setError(t('inquiry.errContact'));
+      return;
+    }
+    if (!message.trim()) {
+      setError(t('inquiry.errMessage'));
+      return;
+    }
+    const isEmail = contact.includes('@');
+    setSubmitting(true);
+    try {
+      const r = await publicApi.submitInquiry({
+        company: company.trim() || undefined,
+        contactName: name.trim(),
+        email: isEmail ? contact.trim() : undefined,
+        phone: isEmail ? undefined : contact.trim(),
+        scale: scale || undefined,
+        hallPref: hall || undefined,
+        message: message.trim(),
+        agreePrivacy: agree,
+      });
+      setReceiptNo(r.receiptNo);
+      setSent(true);
+    } catch (e) {
+      setError(errorMessage(e));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PublicShell active="exhibit" cta={t('inquiry.cta')} search={false}>
+      {/* 히어로 */}
+      <section
+        className="kxp-hero"
+        aria-label={t('inquiry.heroAria')}
+        style={{ backgroundColor: 'var(--color-canvas-bg)', minHeight: 360 }}
+      >
+        <div
+          className="kxp-hero__bg"
+          style={{ background: 'linear-gradient(120deg, #004c86 0%, #0066b3 60%, #12395f 130%)' }}
+          aria-hidden
+        />
+        <div className="kxp-hero__scrim" aria-hidden />
+        <div className="kxp-hero__inner">
+          <div className="kxp-hero__content">
+            <h1 className="kxp-hero__title" style={{ fontSize: 'clamp(28px, 5vw, 40px)' }}>
+              {t('inquiry.heroTitle')}
+            </h1>
+            <p className="kxp-hero__lead">{t('inquiry.heroLead')}</p>
+          </div>
+        </div>
+      </section>
+
+      {/* 참가 안내 */}
+      <section className="kxp-section" aria-label={t('inquiry.guideAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head" style={{ justifyContent: 'center', flexDirection: 'column', textAlign: 'center' }}>
+            <h2 className="kxp-section__title">{t('inquiry.guideTitle')}</h2>
+          </div>
+          <div className="kxp-boothtypes">
+            {BOOTH_TYPES.map((b) => (
+              <article className="kxp-boothtype" key={b.titleKey}>
+                <div
+                  className="kxp-boothtype__media"
+                  style={{ background: 'linear-gradient(135deg, #d9eaf7 0%, #eff6fc 100%)' }}
+                  role="img"
+                  aria-label={t('inquiry.boothExampleAria', { title: t(b.titleKey) })}
+                />
+                <div className="kxp-boothtype__body">
+                  <span className="kxp-tag">{t(b.tierKey)}</span>
+                  <h3>{t(b.titleKey)}</h3>
+                  <p>{t(b.descKey)}</p>
+                  <div className="kxp-boothtype__price">{t(b.priceKey)}</div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 문의 폼 */}
+      <section className="kxp-section kxp-section--alt" aria-label={t('inquiry.formAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-inquiry">
+            {/* 좌: 안내·연락처 */}
+            <div>
+              <h2 className="kxp-section__title" style={{ fontSize: 24 }}>
+                {t('inquiry.formTitle')}
+              </h2>
+              <p className="kxp-section__sub" style={{ marginBottom: 20 }}>
+                {t('inquiry.formSub')}
+              </p>
+              <div className="kxp-contacts">
+                <div className="kxp-contact">
+                  <span className="kxp-contact__ic">
+                    <IconPhone width={18} height={18} />
+                  </span>
+                  <div>
+                    <small>{t('inquiry.contactPhone')}</small>
+                    <strong>{t('inquiry.contactPhoneVal')}</strong>
+                  </div>
+                </div>
+                <div className="kxp-contact">
+                  <span className="kxp-contact__ic">
+                    <IconMail width={18} height={18} />
+                  </span>
+                  <div>
+                    <small>{t('inquiry.contactEmail')}</small>
+                    <strong>{t('inquiry.contactEmailVal')}</strong>
+                  </div>
+                </div>
+                <div className="kxp-contact">
+                  <span className="kxp-contact__ic">
+                    <IconPin width={18} height={18} />
+                  </span>
+                  <div>
+                    <small>{t('inquiry.contactLoc')}</small>
+                    <strong>{t('inquiry.contactLocVal')}</strong>
+                  </div>
+                </div>
+              </div>
+              <div className="kxp-login-hint" style={{ marginTop: 16 }}>
+                <p>{t('inquiry.loginHintQ')}</p>
+                <a href="#top">
+                  {t('inquiry.loginHintA')} <IconArrowRight width={16} height={16} />
+                </a>
+              </div>
+            </div>
+
+            {/* 우: 폼 */}
+            <div className="kxp-formcard">
+              {sent && (
+                <div className="kxp-alert kxp-alert--success" role="status">
+                  <IconCheckCircle width={18} height={18} /> {t('inquiry.success', { no: receiptNo })}
+                </div>
+              )}
+              <div className="kxp-formgrid kxp-formgrid--2">
+                <div className="kxp-field">
+                  <label htmlFor="iq-company">{t('inquiry.company')}</label>
+                  <input
+                    id="iq-company"
+                    className="kxp-input"
+                    placeholder={t('inquiry.companyPh')}
+                    value={company}
+                    onChange={(e) => setCompany(e.target.value)}
+                  />
+                </div>
+                <div className="kxp-field">
+                  <label htmlFor="iq-name">{t('inquiry.name')}</label>
+                  <input
+                    id="iq-name"
+                    className="kxp-input"
+                    placeholder={t('inquiry.namePh')}
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="kxp-field">
+                <label htmlFor="iq-contact">{t('inquiry.contact')}</label>
+                <input
+                  id="iq-contact"
+                  className="kxp-input"
+                  placeholder={t('inquiry.contactPh')}
+                  value={contact}
+                  onChange={(e) => setContact(e.target.value)}
+                />
+              </div>
+              <div className="kxp-formgrid kxp-formgrid--2">
+                <div className="kxp-field">
+                  <label htmlFor="iq-scale">{t('inquiry.scale')}</label>
+                  <select
+                    id="iq-scale"
+                    className="kxp-select"
+                    value={scale}
+                    onChange={(e) => setScale(e.target.value)}
+                  >
+                    <option value="">{t('inquiry.scaleSelect')}</option>
+                    <option>{t('inquiry.scale1')}</option>
+                    <option>{t('inquiry.scale2')}</option>
+                    <option>{t('inquiry.scale3')}</option>
+                    <option>{t('inquiry.scale4')}</option>
+                  </select>
+                </div>
+                <div className="kxp-field">
+                  <label htmlFor="iq-hall">{t('inquiry.hall')}</label>
+                  <select
+                    id="iq-hall"
+                    className="kxp-select"
+                    value={hall}
+                    onChange={(e) => setHall(e.target.value)}
+                  >
+                    <option value="">{t('inquiry.hallSelect')}</option>
+                    {Array.from({ length: 10 }, (_, i) => (
+                      <option key={i}>Hall {i + 1}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <div className="kxp-field">
+                <label htmlFor="iq-msg">{t('inquiry.message')}</label>
+                <textarea
+                  id="iq-msg"
+                  className="kxp-textarea"
+                  placeholder={t('inquiry.messagePh')}
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                />
+              </div>
+              <label className="kxp-check">
+                <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
+                <span>
+                  {t('inquiry.agree')} <span className="kxp-check__req">{t('inquiry.required')}</span>
+                </span>
+              </label>
+              {error && (
+                <p role="alert" style={{ color: 'var(--color-error)', fontSize: 'var(--fs-body)', margin: 0 }}>
+                  {error}
+                </p>
+              )}
+              <button
+                type="button"
+                className="kxp-btn kxp-btn--primary kxp-btn--block kxp-btn--lg"
+                onClick={submit}
+                disabled={submitting}
+              >
+                {submitting ? t('inquiry.submitting') : t('inquiry.submit')} <IconSend width={18} height={18} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/PublicMicrositePage.tsx b/src/frontend/src/screens/public/PublicMicrositePage.tsx
new file mode 100644
index 0000000..2319eba
--- /dev/null
+++ b/src/frontend/src/screens/public/PublicMicrositePage.tsx
@@ -0,0 +1,174 @@
+/*
+ * SCR-P5 참가업체 마이크로사이트 공개 뷰 (M17) — 비로그인 공개.
+ * design.md §3B. 브랜드 히어로 + 부스 위치 카드(플로어플랜 딥링크) + 제품 + AI 예상샷 갤러리(워터마크) + 미팅 예약 CTA.
+ * 데이터: GET /api/public/microsites/{exhibitorId} (cms 팀 계약). shape 확정 전 관용적 옵셔널 처리 — 미배포/부분 응답 시 안내 콘텐츠로 폴백.
+ */
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { PublicShell } from './PublicShell';
+import { publicApi, type PublicMicrosite } from './publicApi';
+import { IconPin, IconMap, IconArrowRight } from './publicIcons';
+
+const PRODUCT_ACCENTS = ['#0066b3', '#6d4aff', '#0e8a5f'];
+
+export function PublicMicrositePage() {
+  const { t } = useTranslation();
+  const { exhibitorId } = useParams<{ exhibitorId: string }>();
+  const [site, setSite] = useState<PublicMicrosite | null>(null);
+
+  useEffect(() => {
+    if (!exhibitorId) return;
+    let alive = true;
+    publicApi
+      .getMicrosite(exhibitorId)
+      .then((s) => alive && setSite(s))
+      .catch(() => {
+        // cms 마이크로사이트 API 미배포/미공개 — 안내 콘텐츠로 폴백(차단 없음).
+        if (alive) setSite(null);
+      });
+    return () => {
+      alive = false;
+    };
+  }, [exhibitorId]);
+
+  const brand = site?.brandName ?? t('microsite.defaultBrand');
+  const tagline = site?.tagline ?? t('microsite.defaultTagline');
+  const boothLoc =
+    site?.boothNo || site?.hallLabel
+      ? `${t('microsite.boothPrefix')} ${site?.boothNo ?? t('microsite.boothUndetermined')}${site?.hallLabel ? ` · ${site.hallLabel}` : ''}`
+      : t('microsite.defaultBoothLoc');
+  const defaultProducts = [
+    { tag: t('microsite.product1Tag'), title: t('microsite.product1Title'), desc: t('microsite.product1Desc'), accent: PRODUCT_ACCENTS[0] },
+    { tag: t('microsite.product2Tag'), title: t('microsite.product2Title'), desc: t('microsite.product2Desc'), accent: PRODUCT_ACCENTS[1] },
+    { tag: t('microsite.product3Tag'), title: t('microsite.product3Title'), desc: t('microsite.product3Desc'), accent: PRODUCT_ACCENTS[2] },
+  ];
+  const products =
+    site?.products && site.products.length > 0
+      ? site.products.map((p, i) => ({
+          tag: p.tag ?? t('microsite.product'),
+          title: p.title ?? t('microsite.product'),
+          desc: p.description ?? '',
+          accent: PRODUCT_ACCENTS[i % 3],
+        }))
+      : defaultProducts;
+
+  return (
+    <PublicShell active="exhibit" brand={brand} cta={t('shell.footer.supportContact')} search={false}>
+      {/* 브랜드 히어로 */}
+      <section
+        className="kxp-hero"
+        aria-label={t('microsite.introAria', { brand })}
+        style={{ backgroundColor: 'var(--color-canvas-bg)' }}
+      >
+        <div
+          className="kxp-hero__bg"
+          style={{ background: 'linear-gradient(120deg, #0b1b2e 0%, #12395f 55%, #0066b3 130%)' }}
+          aria-hidden
+        />
+        <div className="kxp-hero__scrim" aria-hidden />
+        <div className="kxp-hero__inner">
+          <div className="kxp-hero__content">
+            <span className="kxp-hero__eyebrow">{t('microsite.eyebrow')}</span>
+            <h1 className="kxp-hero__title">{brand}</h1>
+            <p className="kxp-hero__lead">{tagline}</p>
+            <div className="kxp-hero__actions">
+              <a className="kxp-btn kxp-btn--primary kxp-btn--lg" href="#meeting">
+                {t('microsite.ctaMeeting')}
+              </a>
+              <a className="kxp-btn kxp-btn--ghost kxp-btn--lg" href="#products">
+                {t('microsite.ctaBrochure')}
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 부스 위치 카드 (플로어플랜 딥링크) */}
+      <div className="kxp-ms-booth">
+        <div className="kxp-ms-booth__card">
+          <div className="kxp-ms-booth__left">
+            <span className="kxp-ms-booth__ic">
+              <IconPin />
+            </span>
+            <div>
+              <div style={{ fontSize: 'var(--fs-caption)', color: 'var(--color-neutral-500)' }}>
+                {t('microsite.boothLocLabel')}
+              </div>
+              <div className="kxp-ms-booth__loc">{boothLoc}</div>
+            </div>
+          </div>
+          <a className="kxp-btn kxp-btn--outline" href="#top">
+            <IconMap width={18} height={18} /> {t('microsite.viewMap')}
+          </a>
+        </div>
+      </div>
+
+      {/* 제품 라인업 */}
+      <section className="kxp-section" id="products" aria-label={t('microsite.productsAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('microsite.productsTitle')}</h2>
+              <p className="kxp-section__sub">{t('microsite.productsSub')}</p>
+            </div>
+          </div>
+          <div className="kxp-products">
+            {products.map((p) => (
+              <article className="kxp-product" key={p.title} style={{ borderLeftColor: p.accent }}>
+                <div
+                  className="kxp-product__media"
+                  style={{ background: `linear-gradient(135deg, ${p.accent} 0%, #101828 170%)` }}
+                  role="img"
+                  aria-label={t('microsite.productImgAria', { title: p.title })}
+                />
+                <div className="kxp-product__body">
+                  <span className="kxp-tag">{p.tag}</span>
+                  <h4>{p.title}</h4>
+                  <p>{p.desc}</p>
+                  <a className="kxp-btn kxp-btn--outline kxp-btn--block" href="#top">
+                    {t('common.actions.viewMore')}
+                  </a>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* AI 부스 예상샷 갤러리 (워터마크 고지) */}
+      <section className="kxp-section kxp-section--alt" aria-label={t('microsite.previewAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head" style={{ justifyContent: 'center', textAlign: 'center', flexDirection: 'column' }}>
+            <h2 className="kxp-section__title">{t('microsite.previewTitle')}</h2>
+            <p className="kxp-section__sub">{t('microsite.previewSub')}</p>
+          </div>
+          <div className="kxp-gallery">
+            {[
+              { g: 'linear-gradient(135deg, #1f3a5f 0%, #0066b3 100%)', label: t('microsite.galleryMain') },
+              { g: 'linear-gradient(135deg, #2a2350 0%, #6d4aff 120%)', label: t('microsite.galleryVip') },
+            ].map((it) => (
+              <div
+                key={it.label}
+                className="kxp-gallery__item"
+                style={{ background: it.g }}
+                role="img"
+                aria-label={t('microsite.galleryAria', { label: it.label })}
+              >
+                <span className="kxp-aiwm">{t('microsite.watermark')}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 미팅 예약 CTA */}
+      <section className="kxp-cta-banner" id="meeting" aria-label={t('microsite.meetingAria')}>
+        <h2>{t('microsite.ctaBanner')}</h2>
+        <a className="kxp-btn kxp-btn--outline kxp-btn--lg" href="#top">
+          {t('microsite.ctaBannerBtn')} <IconArrowRight width={18} height={18} />
+        </a>
+      </section>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/PublicRegistrationPage.tsx b/src/frontend/src/screens/public/PublicRegistrationPage.tsx
new file mode 100644
index 0000000..fb93d02
--- /dev/null
+++ b/src/frontend/src/screens/public/PublicRegistrationPage.tsx
@@ -0,0 +1,354 @@
+/*
+ * SCR-P4 관람객 사전등록 폼 (M10) — 비로그인 공개.
+ * design.md §3B. 4단계 로컬 플로우(유형→정보→관심분야→완료).
+ * 제출은 POST /api/public/events/{eventId}/register (visitor 팀 계약) 실배선 — 미배포 시 에러 토스트 3상태 처리.
+ * 개인정보 동의(필수) 미체크 시 진행 차단. 완료 시 모바일 배지 QR(발급 배지코드).
+ */
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useParams } from 'react-router-dom';
+import { PublicShell } from './PublicShell';
+import { publicApi, type RegistrationReceipt } from './publicApi';
+import { errorMessage } from './publicFormat';
+import {
+  IconPerson,
+  IconBuyer,
+  IconVip,
+  IconCheckCircle,
+  IconQr,
+  IconArrowRight,
+  IconChevronRight,
+  IconBell,
+} from './publicIcons';
+
+const STEP_KEYS = ['register.steps.type', 'register.steps.info', 'register.steps.interest', 'register.steps.done'];
+
+const TYPES = [
+  { key: 'general', ic: <IconPerson width={26} height={26} />, titleKey: 'register.type.general', descKey: 'register.type.generalDesc' },
+  { key: 'buyer', ic: <IconBuyer width={26} height={26} />, titleKey: 'register.type.buyer', descKey: 'register.type.buyerDesc' },
+  { key: 'vip', ic: <IconVip width={26} height={26} />, titleKey: 'register.type.vip', descKey: 'register.type.vipDesc' },
+];
+
+const INTERESTS = [
+  'register.interest.ai',
+  'register.interest.factory',
+  'register.interest.robotics',
+  'register.interest.bigdata',
+  'register.interest.cloud',
+];
+
+const TYPE_LABEL_KEY: Record<string, string> = {
+  general: 'register.type.general',
+  buyer: 'register.type.buyer',
+  vip: 'register.type.vip',
+};
+
+export function PublicRegistrationPage() {
+  const { t } = useTranslation();
+  const { eventId } = useParams<{ eventId: string }>();
+  const [step, setStep] = useState(0); // 0..3
+  const [type, setType] = useState('general');
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [org, setOrg] = useState('');
+  const [interests, setInterests] = useState<string[]>([]);
+  const [agreePrivacy, setAgreePrivacy] = useState(false);
+  const [agreeMkt, setAgreeMkt] = useState(false);
+  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [receipt, setReceipt] = useState<RegistrationReceipt | null>(null);
+
+  const toggleInterest = (v: string) =>
+    setInterests((prev) => (prev.includes(v) ? prev.filter((i) => i !== v) : [...prev, v]));
+
+  const submit = async () => {
+    setError('');
+    if (!agreePrivacy) {
+      setError(t('register.errPrivacy'));
+      return;
+    }
+    if (!name.trim()) {
+      setError(t('register.errName'));
+      return;
+    }
+    if (!eventId) {
+      setError(t('register.errEvent'));
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const r = await publicApi.register(eventId, {
+        name: name.trim(),
+        phone: phone.trim(),
+        email: email.trim(),
+        visitorType: type,
+        agreePrivacy,
+        agreeMarketing: agreeMkt,
+      });
+      setReceipt(r);
+      setStep(3);
+    } catch (e) {
+      // 백엔드(visitor 트랙) 미배포 시에도 UX 차단하지 않음 — 오류 메시지 노출.
+      setError(errorMessage(e));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const next = () => {
+    setError('');
+    if (step === 2) {
+      void submit();
+      return;
+    }
+    if (step === 1 && !name.trim()) {
+      setError(t('register.errName'));
+      return;
+    }
+    setStep((s) => Math.min(3, s + 1));
+  };
+  const prev = () => {
+    setError('');
+    setStep((s) => Math.max(0, s - 1));
+  };
+
+  const fillPct = (step / (STEP_KEYS.length - 1)) * 100;
+
+  return (
+    <PublicShell active="visit" cta={t('shell.cta.register')} search={false}>
+      <div className="kxp-reg">
+        {/* 진행 인디케이터 */}
+        <div className="kxp-steps" role="list" aria-label={t('register.stepsAria')}>
+          <div className="kxp-steps__track" aria-hidden />
+          <div className="kxp-steps__fill" style={{ width: `calc(${fillPct}% - 48px * ${fillPct / 100})` }} aria-hidden />
+          {STEP_KEYS.map((labelKey, i) => (
+            <div
+              key={labelKey}
+              className={`kxp-step${i === step ? ' is-active' : ''}${i < step ? ' is-done' : ''}`}
+              role="listitem"
+              aria-current={i === step ? 'step' : undefined}
+            >
+              <span className="kxp-step__dot">{i < step ? <IconCheckCircle width={20} height={20} /> : i + 1}</span>
+              <span className="kxp-step__label">{t(labelKey)}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className="kxp-regcard">
+          {/* Step 1: 유형 */}
+          {step === 0 && (
+            <div>
+              <h2 className="kxp-regcard__title">{t('register.step0Title')}</h2>
+              <p className="kxp-regcard__sub">{t('register.step0Sub')}</p>
+              <div className="kxp-typegrid" role="radiogroup" aria-label={t('register.typeGroupAria')}>
+                {TYPES.map((item) => (
+                  <button
+                    key={item.key}
+                    type="button"
+                    role="radio"
+                    aria-checked={type === item.key}
+                    className={`kxp-typecard${type === item.key ? ' is-active' : ''}`}
+                    onClick={() => setType(item.key)}
+                  >
+                    <span className="kxp-typecard__ic">{item.ic}</span>
+                    <h3>{t(item.titleKey)}</h3>
+                    <p>{t(item.descKey)}</p>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Step 2: 정보 */}
+          {step === 1 && (
+            <div>
+              <h2 className="kxp-regcard__title" style={{ fontSize: 'var(--fs-h2)' }}>
+                {t('register.step1Title')}
+              </h2>
+              <p className="kxp-regcard__sub">{t('register.step1Sub')}</p>
+              <div className="kxp-formgrid kxp-formgrid--2">
+                <div className="kxp-field">
+                  <label htmlFor="reg-name">{t('register.name')}</label>
+                  <input
+                    id="reg-name"
+                    className="kxp-input"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder={t('register.namePh')}
+                  />
+                </div>
+                <div className="kxp-field">
+                  <label htmlFor="reg-tel">{t('register.phone')}</label>
+                  <input
+                    id="reg-tel"
+                    className="kxp-input"
+                    type="tel"
+                    placeholder="010-0000-0000"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                  />
+                </div>
+                <div className="kxp-field kxp-formgrid__full">
+                  <label htmlFor="reg-email">{t('register.email')}</label>
+                  <input
+                    id="reg-email"
+                    className="kxp-input"
+                    type="email"
+                    placeholder={t('register.emailPh')}
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                  />
+                </div>
+                <div className="kxp-field kxp-formgrid__full">
+                  <label htmlFor="reg-org">{t('register.org')}</label>
+                  <input
+                    id="reg-org"
+                    className="kxp-input"
+                    placeholder={t('register.orgPh')}
+                    value={org}
+                    onChange={(e) => setOrg(e.target.value)}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Step 3: 관심분야 + 동의 */}
+          {step === 2 && (
+            <div>
+              <h2 className="kxp-regcard__title" style={{ fontSize: 'var(--fs-h2)' }}>
+                {t('register.step2Title')}
+              </h2>
+              <p className="kxp-regcard__sub">{t('register.step2Sub')}</p>
+              <div className="kxp-interests" role="group" aria-label={t('register.interestsAria')}>
+                {INTERESTS.map((vKey) => {
+                  const label = t(vKey);
+                  return (
+                    <button
+                      key={vKey}
+                      type="button"
+                      aria-pressed={interests.includes(label)}
+                      className={`kxp-interest${interests.includes(label) ? ' is-active' : ''}`}
+                      onClick={() => toggleInterest(label)}
+                    >
+                      {label}
+                    </button>
+                  );
+                })}
+              </div>
+              <div className="kxp-consent">
+                <div className="kxp-consent__row">
+                  <label className="kxp-check">
+                    <input
+                      type="checkbox"
+                      checked={agreePrivacy}
+                      onChange={(e) => setAgreePrivacy(e.target.checked)}
+                    />
+                    <span>
+                      {t('register.consentPrivacy')} <span className="kxp-check__req">{t('register.required')}</span>
+                    </span>
+                  </label>
+                  <a className="kxp-consent__more" href="#top">
+                    {t('register.consentMore')}
+                  </a>
+                </div>
+                <div className="kxp-consent__row">
+                  <label className="kxp-check">
+                    <input type="checkbox" checked={agreeMkt} onChange={(e) => setAgreeMkt(e.target.checked)} />
+                    <span>{t('register.consentMarketing')}</span>
+                  </label>
+                  <a className="kxp-consent__more" href="#top">
+                    {t('register.consentMore')}
+                  </a>
+                </div>
+              </div>
+              {error && (
+                <p role="alert" style={{ color: 'var(--color-error)', fontSize: 'var(--fs-body)', marginTop: 12 }}>
+                  {error}
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Step 4: 완료 */}
+          {step === 3 && (
+            <div className="kxp-done">
+              <div className="kxp-done__ic">
+                <IconCheckCircle width={40} height={40} />
+              </div>
+              <h2 className="kxp-regcard__title">{t('register.doneTitle')}</h2>
+              <p className="kxp-regcard__sub">
+                {t('register.doneSub', { name: name || t('register.visitorDefault') })}
+              </p>
+
+              <div className="kxp-badge" aria-label={t('register.badgeAria')}>
+                <div className="kxp-badge__top">
+                  <span className="kxp-badge__pass">PASS</span>
+                  <span className="kxp-badge__role">{t(TYPE_LABEL_KEY[type])}</span>
+                </div>
+                <div className="kxp-badge__name">{name || t('register.badgeName')}</div>
+                <div className="kxp-badge__qr">
+                  <div className="kxp-badge__qrbox">
+                    <IconQr />
+                  </div>
+                  <div className="kxp-badge__id">{t('register.badgeCodeLabel')}</div>
+                  <div className="kxp-badge__idval">{receipt?.badgeCode ?? receipt?.registrationId ?? '—'}</div>
+                </div>
+              </div>
+
+              <div className="kxp-donenote">
+                <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
+                  <IconBell width={18} height={18} /> {t('register.doneNote')}
+                </span>
+                {receipt?.registrationId && <span>{t('register.regNo', { id: receipt.registrationId })}</span>}
+              </div>
+            </div>
+          )}
+
+          {/* 내비게이션 */}
+          {step < 3 ? (
+            <div className="kxp-regnav">
+              {step > 0 && (
+                <button type="button" className="kxp-btn kxp-btn--outline" onClick={prev}>
+                  {t('common.actions.prev')}
+                </button>
+              )}
+              <button
+                type="button"
+                className="kxp-btn kxp-btn--primary"
+                onClick={next}
+                disabled={submitting}
+              >
+                {step === 2
+                  ? submitting
+                    ? t('register.submitting')
+                    : t('register.submit')
+                  : t('common.actions.next')}{' '}
+                <IconChevronRight width={18} height={18} />
+              </button>
+            </div>
+          ) : (
+            <div className="kxp-regnav">
+              <Link className="kxp-btn kxp-btn--outline" to="/public">
+                {t('common.actions.home')}
+              </Link>
+              {eventId ? (
+                <Link
+                  className="kxp-btn kxp-btn--primary"
+                  to={`/public/events/${encodeURIComponent(eventId)}/floorplan`}
+                >
+                  {t('register.floorplan')} <IconArrowRight width={18} height={18} />
+                </Link>
+              ) : (
+                <Link className="kxp-btn kxp-btn--primary" to="/public">
+                  {t('register.eventBrowse')} <IconArrowRight width={18} height={18} />
+                </Link>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/PublicShell.tsx b/src/frontend/src/screens/public/PublicShell.tsx
new file mode 100644
index 0000000..f46f212
--- /dev/null
+++ b/src/frontend/src/screens/public/PublicShell.tsx
@@ -0,0 +1,241 @@
+/*
+ * 공개 홍보 사이트 공통 셸 — 헤더 GNB + 푸터. (AppShell 미사용, 비로그인 공개 영역)
+ * design.md §3B: 전통 페이지 내비 + SEO·다국어 토글(react-i18next LanguageSwitcher).
+ */
+import { useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
+import { IconMenu, IconClose, IconSearch } from './publicIcons';
+import { LanguageSwitcher } from '../../components/ui/LanguageSwitcher';
+import { useAuthStore } from '../../store/authStore';
+import './public.css';
+
+const GNB = [
+  { key: 'events', i18n: 'shell.nav.events' },
+  { key: 'exhibit', i18n: 'shell.nav.exhibit' },
+  { key: 'visit', i18n: 'shell.nav.visit' },
+  { key: 'transport', i18n: 'shell.nav.transport' },
+] as const;
+
+/** 3-트랙 진입 레이어 키 (§3C). 관문(SCR-T0)은 미선택 → undefined. */
+export type PublicTrack = 'visitor' | 'business' | 'agency';
+
+const TRACK_TABS: { key: PublicTrack; to: string; i18n: string }[] = [
+  { key: 'visitor', to: '/visitor', i18n: 'track.shell.tab.visitor' },
+  { key: 'business', to: '/business', i18n: 'track.shell.tab.business' },
+  { key: 'agency', to: '/agency', i18n: 'track.shell.tab.agency' },
+];
+
+/**
+ * 상단 3-트랙 스위처 (§3C-0). role=tablist·로빙 탭인덱스·좌우/Home/End 키 이동.
+ * 관문(SCR-T0)은 track 미지정(미선택), 서브홈(T1~T3)은 해당 탭 활성(aria-current).
+ */
+function TrackSwitcher({ track }: { track?: PublicTrack }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const refs = useRef<(HTMLAnchorElement | null)[]>([]);
+  // 로빙 탭인덱스 기준 인덱스(활성 탭·없으면 첫 탭).
+  const activeIdx = TRACK_TABS.findIndex((it) => it.key === track);
+  const baseIdx = activeIdx >= 0 ? activeIdx : 0;
+
+  function onKeyDown(e: KeyboardEvent<HTMLAnchorElement>, i: number) {
+    let next = i;
+    if (e.key === 'ArrowRight') next = (i + 1) % TRACK_TABS.length;
+    else if (e.key === 'ArrowLeft') next = (i - 1 + TRACK_TABS.length) % TRACK_TABS.length;
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End') next = TRACK_TABS.length - 1;
+    else return;
+    e.preventDefault();
+    refs.current[next]?.focus();
+  }
+
+  return (
+    <div className="kxp-topbar">
+      <div className="kxp-topbar__inner">
+        <Link className="kxp-wordmark" to="/" aria-label={t('track.shell.wordmark')}>
+          {t('track.shell.wordmark')}
+        </Link>
+
+        <div className="kxp-tracktabs" role="tablist" aria-label={t('track.shell.tablistAria')}>
+          {TRACK_TABS.map((it, i) => {
+            const isActive = it.key === track;
+            return (
+              <Link
+                key={it.key}
+                ref={(el) => {
+                  refs.current[i] = el;
+                }}
+                to={it.to}
+                role="tab"
+                className={`kxp-tracktab${isActive ? ' is-active' : ''}`}
+                aria-selected={isActive}
+                aria-current={isActive ? 'page' : undefined}
+                tabIndex={i === baseIdx ? 0 : -1}
+                onKeyDown={(e) => onKeyDown(e, i)}
+              >
+                {t(it.i18n)}
+              </Link>
+            );
+          })}
+        </div>
+
+        <div className="kxp-topbar__utils">
+          <LanguageSwitcher variant="light" className="kxp-lang__btn" />
+          {isAuthenticated ? (
+            <button
+              type="button"
+              className="kxp-topbar__link"
+              onClick={() => navigate('/home')}
+            >
+              {t('track.shell.myHome')}
+            </button>
+          ) : (
+            <Link className="kxp-topbar__link" to="/login">
+              {t('track.shell.login')}
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface PublicShellProps {
+  children: ReactNode;
+  /** 현재 활성 GNB 키 (하이라이트) */
+  active?: string;
+  /** 현재 트랙 (§3C — 상단 스위처 활성 탭). 관문은 미지정. */
+  track?: PublicTrack;
+  /** 헤더 우측 주요 CTA 라벨 (없으면 사전등록 기본) */
+  cta?: string;
+  /** 헤더에 검색 노출 여부 */
+  search?: boolean;
+  /** 헤더 브랜드명 (마이크로사이트는 업체명) */
+  brand?: string;
+}
+
+export function PublicShell({
+  children,
+  active,
+  track,
+  cta,
+  search = true,
+  brand = 'KINTEX',
+}: PublicShellProps) {
+  const { t } = useTranslation();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const ctaLabel = cta ?? t('shell.cta.register');
+
+  return (
+    <div className="kxp">
+      <TrackSwitcher track={track} />
+      <header className="kxp-header">
+        <div className="kxp-header__inner">
+          <div className="kxp-header__left">
+            <a className="kxp-brand" href="#top" aria-label={t('shell.homeAria', { brand })}>
+              {brand}
+            </a>
+            <nav className="kxp-gnb" aria-label={t('shell.primaryMenu')}>
+              {GNB.map((it) => (
+                <a
+                  key={it.key}
+                  href="#top"
+                  className={`kxp-gnb__link${active === it.key ? ' is-active' : ''}`}
+                  aria-current={active === it.key ? 'page' : undefined}
+                >
+                  {t(it.i18n)}
+                </a>
+              ))}
+            </nav>
+          </div>
+
+          <div className="kxp-header__right">
+            {search && (
+              <div className="kxp-search" role="search">
+                <IconSearch className="kxp-search__icon" />
+                <input
+                  className="kxp-search__input"
+                  type="search"
+                  placeholder={t('shell.searchPlaceholder')}
+                  aria-label={t('shell.searchPlaceholder')}
+                />
+              </div>
+            )}
+
+            <LanguageSwitcher variant="light" className="kxp-lang__btn" />
+
+            <Link className="kxp-btn kxp-btn--outline kxp-header__login" to="/login">
+              {t('shell.login')}
+            </Link>
+
+            <a className="kxp-btn kxp-btn--primary kxp-header__cta" href="#top">
+              {ctaLabel}
+            </a>
+
+            <button
+              type="button"
+              className="kxp-header__burger"
+              aria-label={menuOpen ? t('shell.menuClose') : t('shell.menuOpen')}
+              aria-expanded={menuOpen}
+              onClick={() => setMenuOpen((v) => !v)}
+            >
+              {menuOpen ? <IconClose /> : <IconMenu />}
+            </button>
+          </div>
+        </div>
+
+        {menuOpen && (
+          <nav className="kxp-mobilenav" aria-label={t('shell.mobileMenu')}>
+            {GNB.map((it) => (
+              <a key={it.key} href="#top" className="kxp-mobilenav__link">
+                {t(it.i18n)}
+              </a>
+            ))}
+            <Link className="kxp-btn kxp-btn--outline kxp-mobilenav__cta" to="/login">
+              {t('shell.login')}
+            </Link>
+            <a className="kxp-btn kxp-btn--primary kxp-mobilenav__cta" href="#top">
+              {ctaLabel}
+            </a>
+          </nav>
+        )}
+      </header>
+
+      <main id="top" className="kxp-main">
+        {children}
+      </main>
+
+      <footer className="kxp-footer">
+        <div className="kxp-footer__inner">
+          <div className="kxp-footer__brand">
+            <div className="kxp-footer__logo">KINTEX</div>
+            <p className="kxp-footer__desc">{t('shell.footer.brandDesc')}</p>
+          </div>
+          <div className="kxp-footer__cols">
+            <div className="kxp-footer__col">
+              <h4>{t('shell.footer.quickTitle')}</h4>
+              <a href="#top">{t('shell.footer.quickSchedule')}</a>
+              <a href="#top">{t('shell.footer.quickExhibit')}</a>
+              <a href="#top">{t('shell.footer.quickDirections')}</a>
+              <a href="#top">{t('shell.footer.quickSitemap')}</a>
+            </div>
+            <div className="kxp-footer__col">
+              <h4>{t('shell.footer.supportTitle')}</h4>
+              <a href="#top">{t('shell.footer.supportPrivacy')}</a>
+              <a href="#top">{t('shell.footer.supportTerms')}</a>
+              <a href="#top">{t('shell.footer.supportContact')}</a>
+            </div>
+            <div className="kxp-footer__col">
+              <h4>{t('shell.footer.contactTitle')}</h4>
+              <span>{t('shell.footer.contactAddress')}</span>
+              <span>{t('shell.footer.contactTel')}</span>
+              <span>{t('shell.footer.contactEmail')}</span>
+            </div>
+          </div>
+        </div>
+        <div className="kxp-footer__bottom">{t('shell.footer.bottom')}</div>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/public/PublicTicketPage.tsx b/src/frontend/src/screens/public/PublicTicketPage.tsx
new file mode 100644
index 0000000..a94caf0
--- /dev/null
+++ b/src/frontend/src/screens/public/PublicTicketPage.tsx
@@ -0,0 +1,561 @@
+/*
+ * SCR-P7 입장권 예매 (M10·M9) — 비로그인 공개.
+ * design.md §3B. 예매 플로우(권종→예매자→결제→완료) + 예매 확인·취소(manage) 뷰.
+ * 결제 PG 미연동 — 데모 플로우(카드 입력 UI 없음, PG 위임 고지 상시). PII 마스킹.
+ * 데이터: 티켓·재고·결제 API 부재 → 샘플 데이터.
+ */
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PublicShell } from './PublicShell';
+import {
+  IconTicket,
+  IconCalendar,
+  IconPin,
+  IconPlus,
+  IconMinus,
+  IconShield,
+  IconInfo,
+  IconCheckCircle,
+  IconQr,
+  IconArrowRight,
+  IconSparkles,
+  IconPerson,
+} from './publicIcons';
+
+interface TicketType {
+  key: string;
+  nameKey: string;
+  descKey: string;
+  price: number;
+  priceKey: string;
+  badge?: { labelKey: string; kind: 'ai' | 'off' };
+  soldout?: boolean;
+  accent: string;
+}
+
+const TICKETS: TicketType[] = [
+  { key: 'general', nameKey: 'ticket.type.general', descKey: 'ticket.type.generalDesc', price: 0, priceKey: 'ticket.type.generalPrice', accent: '#0066b3' },
+  { key: 'buyer', nameKey: 'ticket.type.buyer', descKey: 'ticket.type.buyerDesc', price: 0, priceKey: 'ticket.type.buyerPrice', badge: { labelKey: 'ticket.aiOptimized', kind: 'ai' }, accent: '#6d4aff' },
+  { key: 'group', nameKey: 'ticket.type.group', descKey: 'ticket.type.groupDesc', price: 9000, priceKey: 'ticket.type.groupPrice', badge: { labelKey: 'ticket.off10', kind: 'off' }, accent: '#0e8a5f' },
+  { key: 'vip', nameKey: 'ticket.type.vip', descKey: 'ticket.type.vipDesc', price: 50000, priceKey: 'ticket.type.vipPrice', soldout: true, accent: '#101828' },
+];
+
+const STEP_KEYS = ['ticket.steps.s1', 'ticket.steps.s2', 'ticket.steps.s3', 'ticket.steps.s4'];
+const won = (n: number) => `₩${n.toLocaleString('ko-KR')}`;
+
+function EventBanner() {
+  const { t } = useTranslation();
+  return (
+    <div className="kxp-ticket__banner">
+      <div
+        className="kxp-ticket__poster"
+        style={{ background: 'linear-gradient(135deg, #0066b3 0%, #6d4aff 130%)' }}
+        role="img"
+        aria-label={t('ticket.posterAria')}
+      />
+      <div>
+        <h1>{t('ticket.bannerTitle')}</h1>
+        <div className="kxp-ticket__facts">
+          <span>
+            <IconCalendar width={16} height={16} /> {t('ticket.bannerDate')}
+          </span>
+          <span>
+            <IconPin width={16} height={16} /> {t('ticket.bannerPlace')}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PurchaseView() {
+  const { t } = useTranslation();
+  const [step, setStep] = useState(0);
+  const [qty, setQty] = useState<Record<string, number>>({});
+  const [pay, setPay] = useState('card');
+
+  const setCount = (key: string, delta: number) =>
+    setQty((prev) => {
+      const v = Math.max(0, (prev[key] ?? 0) + delta);
+      return { ...prev, [key]: v };
+    });
+
+  const { subtotal, discount, total, count } = useMemo(() => {
+    let sub = 0;
+    let disc = 0;
+    let cnt = 0;
+    for (const t of TICKETS) {
+      const q = qty[t.key] ?? 0;
+      cnt += q;
+      if (t.key === 'group') {
+        const base = 10000 * q; // 정가 기준 예시
+        sub += base;
+        disc += base - t.price * q;
+      } else {
+        sub += t.price * q;
+      }
+    }
+    return { subtotal: sub, discount: disc, total: sub - disc, count: cnt };
+  }, [qty]);
+
+  const isFree = total === 0;
+
+  const next = () => {
+    // 무료 권종만이면 결제 단계 자동 스킵
+    if (step === 1 && isFree) {
+      setStep(3);
+      return;
+    }
+    setStep((s) => Math.min(3, s + 1));
+  };
+  const prev = () => {
+    if (step === 3 && isFree) {
+      setStep(1);
+      return;
+    }
+    setStep((s) => Math.max(0, s - 1));
+  };
+
+  return (
+    <>
+      <EventBanner />
+
+      {/* 스텝 인디케이터 */}
+      <div className="kxp-ticket__steps" role="list" aria-label={t('ticket.stepsAria')}>
+        {STEP_KEYS.map((l, i) => (
+          <span
+            key={l}
+            className={`kxp-ticket__step${i === step ? ' is-active' : ''}`}
+            role="listitem"
+            aria-current={i === step ? 'step' : undefined}
+          >
+            {`0${i + 1} `}
+            {t(l)}
+          </span>
+        ))}
+      </div>
+
+      {/* 로그인 배너 */}
+      <div className="kxp-loginbanner">
+        <IconInfo width={18} height={18} /> {t('ticket.loginBanner')}
+        <a href="#top">{t('ticket.loginLink')}</a>
+      </div>
+
+      <div className="kxp-ticket__grid">
+        <div className="kxp-ticket__main">
+          {/* Step 1: 권종 */}
+          {step === 0 && (
+            <section>
+              <h2 className="kxp-ticket__h2">
+                <IconTicket width={20} height={20} /> {t('ticket.h2Type')}
+                <span className="kxp-sample" style={{ marginLeft: 'auto' }}>
+                  {t('ticket.sample')}
+                </span>
+              </h2>
+              <div className="kxp-tickrows">
+                {TICKETS.map((tk) => (
+                  <div
+                    key={tk.key}
+                    className={`kxp-tickrow${tk.soldout ? ' kxp-tickrow--soldout' : ''}`}
+                    style={{ borderLeftColor: tk.soldout ? undefined : tk.accent }}
+                  >
+                    <div className="kxp-tickrow__info">
+                      <h3>
+                        {t(tk.nameKey)}
+                        {tk.badge && (
+                          <span className={tk.badge.kind === 'ai' ? 'kxp-chip kxp-chip--ai' : 'kxp-chip'}>
+                            {tk.badge.kind === 'ai' && <IconSparkles width={12} height={12} />}
+                            {t(tk.badge.labelKey)}
+                          </span>
+                        )}
+                        {tk.soldout && <span className="kxp-status kxp-status--soldout">{t('ticket.soldout')}</span>}
+                      </h3>
+                      <p>{t(tk.descKey)}</p>
+                      <div className="kxp-tickrow__price">{t(tk.priceKey)}</div>
+                    </div>
+                    <div className="kxp-stepper" aria-label={t('ticket.qtyAria', { name: t(tk.nameKey) })}>
+                      <button
+                        type="button"
+                        aria-label={t('ticket.decrease')}
+                        disabled={tk.soldout}
+                        onClick={() => setCount(tk.key, -1)}
+                      >
+                        <IconMinus width={16} height={16} />
+                      </button>
+                      <span>{qty[tk.key] ?? 0}</span>
+                      <button
+                        type="button"
+                        aria-label={t('ticket.increase')}
+                        disabled={tk.soldout}
+                        onClick={() => setCount(tk.key, 1)}
+                      >
+                        <IconPlus width={16} height={16} />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+
+          {/* Step 2: 예매자 */}
+          {step === 1 && (
+            <section>
+              <h2 className="kxp-ticket__h2">
+                <IconPerson width={20} height={20} /> {t('ticket.h2Booker')}
+              </h2>
+              <div className="kxp-formcard">
+                <div className="kxp-formgrid kxp-formgrid--2">
+                  <div className="kxp-field">
+                    <label htmlFor="tk-name">{t('ticket.bookerName')}</label>
+                    <input id="tk-name" className="kxp-input" placeholder={t('ticket.bookerNamePh')} />
+                  </div>
+                  <div className="kxp-field">
+                    <label htmlFor="tk-tel">{t('ticket.bookerTel')}</label>
+                    <input id="tk-tel" className="kxp-input" type="tel" placeholder="010-0000-0000" />
+                  </div>
+                  <div className="kxp-field kxp-formgrid__full">
+                    <label htmlFor="tk-email">{t('ticket.bookerEmail')}</label>
+                    <input id="tk-email" className="kxp-input" type="email" placeholder="example@domain.com" />
+                  </div>
+                </div>
+                <div className="kxp-consent">
+                  <label className="kxp-check">
+                    <input type="checkbox" />
+                    <span>
+                      {t('ticket.consentPrivacy')} <span className="kxp-check__req">{t('ticket.required')}</span>
+                    </span>
+                  </label>
+                  <label className="kxp-check">
+                    <input type="checkbox" />
+                    <span>{t('ticket.consentMarketing')}</span>
+                  </label>
+                </div>
+              </div>
+            </section>
+          )}
+
+          {/* Step 3: 결제 */}
+          {step === 2 && (
+            <section>
+              <h2 className="kxp-ticket__h2">
+                <IconShield width={20} height={20} /> {t('ticket.h2Pay')}
+              </h2>
+              <div className="kxp-paychips" role="group" aria-label={t('ticket.payGroupAria')}>
+                {[
+                  ['card', t('ticket.payCard')],
+                  ['easy', t('ticket.payEasy')],
+                  ['bank', t('ticket.payBank')],
+                ].map(([k, label]) => (
+                  <button
+                    key={k}
+                    type="button"
+                    className={`kxp-paychip${pay === k ? ' is-active' : ''}`}
+                    aria-pressed={pay === k}
+                    onClick={() => setPay(k)}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+              <div className="kxp-pgnote">
+                <IconShield width={18} height={18} />
+                <span>{t('ticket.pgNote')}</span>
+              </div>
+            </section>
+          )}
+
+          {/* Step 4: 완료 */}
+          {step === 3 && (
+            <section className="kxp-tikdone">
+              <div className="kxp-done__ic" style={{ margin: '0 auto 16px' }}>
+                <IconCheckCircle width={40} height={40} />
+              </div>
+              <h2 className="kxp-regcard__title">{t('ticket.doneTitle')}</h2>
+              <div className="kxp-tikdone__no">{t('ticket.doneNo')}</div>
+              <p className="kxp-regcard__sub">
+                {t('ticket.doneSub', { count, total: won(total) })}
+              </p>
+              <div className="kxp-tikdone__qr">
+                <IconQr width={110} height={110} />
+              </div>
+              <span className="kxp-sample">{t('ticket.sampleReady')}</span>
+              <div className="kxp-tikdone__actions">
+                <a className="kxp-btn kxp-btn--outline" href="#top">
+                  {t('ticket.walletBtn')}
+                </a>
+                <a className="kxp-btn kxp-btn--primary" href="#top">
+                  {t('ticket.manageBtn')} <IconArrowRight width={18} height={18} />
+                </a>
+              </div>
+            </section>
+          )}
+        </div>
+
+        {/* 우측 요약 */}
+        {step < 3 && (
+          <aside className="kxp-ticket__summary" aria-label={t('ticket.summaryAria')}>
+            <h3>{t('ticket.summaryTitle')}</h3>
+            <div className="kxp-sumrow">
+              <span>{t('ticket.summaryCount')}</span>
+              <span>{t('ticket.count', { n: count })}</span>
+            </div>
+            <div className="kxp-sumrow">
+              <span>{t('ticket.subtotal')}</span>
+              <span>{won(subtotal)}</span>
+            </div>
+            <div className="kxp-sumrow kxp-sumrow--discount">
+              <span>{t('ticket.discount')}</span>
+              <span>-{won(discount)}</span>
+            </div>
+            <div className="kxp-sumtotal">
+              <small>{t('ticket.finalTotal')}</small>
+              <strong>{won(total)}</strong>
+            </div>
+            <button
+              type="button"
+              className="kxp-btn kxp-btn--primary kxp-btn--block kxp-btn--lg"
+              disabled={count === 0}
+              onClick={next}
+            >
+              {step === 0
+                ? t('ticket.nextStep')
+                : step === 1
+                  ? isFree
+                    ? t('ticket.freeDone')
+                    : t('ticket.pay')
+                  : t('ticket.payProceed')}
+            </button>
+            {step > 0 && (
+              <button
+                type="button"
+                className="kxp-btn kxp-btn--outline kxp-btn--block"
+                style={{ marginTop: 10 }}
+                onClick={prev}
+              >
+                {t('common.actions.prev')}
+              </button>
+            )}
+            <p style={{ marginTop: 14, fontSize: 11, textAlign: 'center', color: 'var(--color-neutral-500)' }}>
+              {t('ticket.customerCenter')}
+            </p>
+          </aside>
+        )}
+      </div>
+    </>
+  );
+}
+
+function ManageView() {
+  const { t } = useTranslation();
+  const [looked, setLooked] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  return (
+    <>
+      <header style={{ textAlign: 'center', marginBottom: 24 }}>
+        <h1 className="kxp-regcard__title">{t('ticket.manageTitle')}</h1>
+        <p className="kxp-regcard__sub" style={{ marginBottom: 0 }}>
+          {t('ticket.manageSub')}
+        </p>
+      </header>
+
+      {/* 조회 폼 */}
+      <div className="kxp-manage__lookup">
+        <div className="kxp-manage__lookrow">
+          <div className="kxp-field">
+            <label htmlFor="mg-no">{t('ticket.lookNo')}</label>
+            <input id="mg-no" className="kxp-input" placeholder={t('ticket.lookNoPh')} />
+          </div>
+          <div className="kxp-field">
+            <label htmlFor="mg-email">{t('ticket.lookEmail')}</label>
+            <input id="mg-email" className="kxp-input" type="email" placeholder={t('ticket.lookEmailPh')} />
+          </div>
+          <button type="button" className="kxp-btn kxp-btn--primary" onClick={() => setLooked(true)}>
+            {t('ticket.lookBtn')}
+          </button>
+        </div>
+        <div style={{ textAlign: 'center', marginTop: 14 }}>
+          <a href="#top" style={{ fontSize: 'var(--fs-caption)', color: 'var(--color-neutral-500)', textDecoration: 'underline' }}>
+            {t('ticket.loginToView')}
+          </a>
+        </div>
+      </div>
+
+      {!looked ? (
+        <p className="kxp-empty">{t('ticket.notLooked')}</p>
+      ) : (
+        <div className="kxp-manage__grid">
+          {/* 예매 상세 */}
+          <div>
+            <article className="kxp-bookcard">
+              <div className="kxp-bookcard__head">
+                <div>
+                  <span className="kxp-status kxp-status--done">{t('ticket.booked')}</span>
+                  <h2>{t('ticket.bannerTitle')}</h2>
+                  <span className="kxp-bookcard__no">
+                    {t('ticket.bookNoLabel')} <b>KTX-2026-018245</b>
+                  </span>
+                </div>
+                <div className="kxp-bookcard__paid">
+                  <small>{t('ticket.paidAt')}</small>
+                  <br />
+                  <b>2025-10-24 14:32</b>
+                </div>
+              </div>
+
+              <table className="kxp-ticktable">
+                <thead>
+                  <tr>
+                    <th>{t('ticket.colType')}</th>
+                    <th>{t('ticket.colQty')}</th>
+                    <th>{t('ticket.colAmount')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <div className="kxp-ticktable__cell">
+                        <span className="kxp-ticktable__qr">
+                          <IconQr width={22} height={22} />
+                        </span>
+                        일반권 (Early Bird)
+                      </div>
+                    </td>
+                    <td>2매</td>
+                    <td>₩ 30,000</td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div className="kxp-ticktable__cell">
+                        <span className="kxp-ticktable__qr">
+                          <IconQr width={22} height={22} />
+                        </span>
+                        학생/군인 할인
+                      </div>
+                    </td>
+                    <td>1매</td>
+                    <td>₩ 10,000</td>
+                  </tr>
+                </tbody>
+              </table>
+
+              <div className="kxp-booker">
+                <div className="kxp-booker__id">
+                  <IconPerson width={20} height={20} />
+                  <div>
+                    <small>{t('ticket.bookerInfo')}</small>
+                    <br />
+                    <b>jo***@ex***.com · 010-****-1234</b>
+                  </div>
+                </div>
+                <div style={{ textAlign: 'right' }}>
+                  <small style={{ fontSize: 'var(--fs-caption)', color: 'var(--color-neutral-500)' }}>{t('ticket.totalPaid')}</small>
+                  <div style={{ fontSize: 'var(--fs-h2)', fontWeight: 800, color: 'var(--color-primary-700)' }}>
+                    ₩ 40,000
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
+
+          {/* 환불 정책 */}
+          <aside>
+            <div className="kxp-refund">
+              <h3>
+                <IconInfo width={18} height={18} /> {t('ticket.refundTitle')}
+              </h3>
+              <div className="kxp-refund__table">
+                <div className="kxp-refund__row kxp-refund__row--full">
+                  <span>{t('ticket.refundD7')}</span>
+                  <b>{t('ticket.refundD7Val')}</b>
+                </div>
+                <div className="kxp-refund__row kxp-refund__row--half">
+                  <span>{t('ticket.refundD3')}</span>
+                  <b>{t('ticket.refundD3Val')}</b>
+                </div>
+                <div className="kxp-refund__row kxp-refund__row--none">
+                  <span>{t('ticket.refundDay')}</span>
+                  <b>{t('ticket.refundDayVal')}</b>
+                </div>
+              </div>
+              <div className="kxp-refund__est">
+                <span>{t('ticket.refundEst')}</span>
+                <strong>₩ 40,000</strong>
+              </div>
+              <button
+                type="button"
+                className="kxp-btn kxp-btn--danger kxp-btn--block"
+                onClick={() => setConfirmOpen(true)}
+              >
+                {t('ticket.cancelBooking')}
+              </button>
+              <p className="kxp-refund__note">{t('ticket.refundNote')}</p>
+            </div>
+
+            <div className="kxp-ai-helper">
+              <IconSparkles width={18} height={18} />
+              <div>
+                <strong>{t('ticket.aiHelper')}</strong>
+                <p>{t('ticket.aiHelperDesc')}</p>
+              </div>
+            </div>
+          </aside>
+        </div>
+      )}
+
+      {confirmOpen && (
+        <div className="kxp-modal" role="dialog" aria-modal="true" aria-label={t('ticket.cancelModalAria')}>
+          <div className="kxp-modal__scrim" onClick={() => setConfirmOpen(false)} aria-hidden />
+          <div className="kxp-modal__box">
+            <h3>{t('ticket.cancelModalTitle')}</h3>
+            <p>{t('ticket.cancelModalDesc')}</p>
+            <div className="kxp-modal__actions">
+              <button type="button" className="kxp-btn kxp-btn--outline" onClick={() => setConfirmOpen(false)}>
+                {t('common.actions.close')}
+              </button>
+              <button type="button" className="kxp-btn kxp-btn--danger" onClick={() => setConfirmOpen(false)}>
+                {t('ticket.cancelConfirm')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export function PublicTicketPage() {
+  const { t } = useTranslation();
+  const [view, setView] = useState<'purchase' | 'manage'>('purchase');
+
+  return (
+    <PublicShell active="visit" cta={t('ticket.viewPurchase')} search={false}>
+      <div className={view === 'purchase' ? 'kxp-ticket' : 'kxp-manage'}>
+        {/* 뷰 전환 */}
+        <div className="kxp-daytabs" style={{ justifyContent: 'center', marginBottom: 24 }} role="tablist" aria-label={t('ticket.viewSwitchAria')}>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={view === 'purchase'}
+            className={`kxp-daytab${view === 'purchase' ? ' is-active' : ''}`}
+            onClick={() => setView('purchase')}
+          >
+            {t('ticket.viewPurchase')}
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={view === 'manage'}
+            className={`kxp-daytab${view === 'manage' ? ' is-active' : ''}`}
+            onClick={() => setView('manage')}
+          >
+            {t('ticket.viewManage')}
+          </button>
+        </div>
+
+        {view === 'purchase' ? <PurchaseView /> : <ManageView />}
+      </div>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/VisitorTrackPage.tsx b/src/frontend/src/screens/public/VisitorTrackPage.tsx
new file mode 100644
index 0000000..9e7dbd8
--- /dev/null
+++ b/src/frontend/src/screens/public/VisitorTrackPage.tsx
@@ -0,0 +1,408 @@
+/*
+ * SCR-T1 visitor 메인 (§3C v2.3.2) — `/visitor`, 미인증 공개 · track="visitor".
+ * "세련된 AI 관람 도우미 홈페이지"로 격상: 히어로 AI 도우미(중심) → AI 기능 쇼케이스 →
+ * AI 연/월 기획 브리핑 → 전시 쇼케이스 → 관심사 추천 → 방문가이드 허브 → 여정 3스텝 →
+ * 공지 → 전시장 소개 → 푸터(PublicShell).
+ * 데이터(라이브): AI 도우미(POST /ai/visitor-assistant)·기획(calendar+monthly-summary)·
+ *   방문가이드/교통(visitor-guide+transport)·쇼케이스(/events)·공지(/cms/NOTICE).
+ * ※ Stitch 생성 2회 실패 → design.md 스펙+기존 컨벤션 재조합 직접 구현(신규 토큰 0).
+ *   Stitch 확보 시 히어로/타일/브리핑 마크업 교체 지점 = 각 섹션 주석 "STITCH-REPLACE".
+ */
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { PublicShell } from './PublicShell';
+import { usePublicEvents, EventGrid } from './trackShared';
+import { AiAssistant } from './AiAssistant';
+import { AiPlanningBriefing } from './AiPlanningBriefing';
+import { publicApi, type PublicNotice, type VisitorGuide, type TransportInfo } from './publicApi';
+import { errorMessage } from './publicFormat';
+import { AiLabel } from '../../components/ui/Badge';
+import {
+  IconTrain,
+  IconParking,
+  IconMap,
+  IconInfo,
+  IconShield,
+  IconChat,
+  IconChevronRight,
+  IconArrowRight,
+  IconSparkles,
+  IconTarget,
+  IconCalendar,
+  IconRobot,
+  IconCloud,
+  IconQr,
+  IconCheckCircle,
+  IconTicket,
+  IconVenue,
+} from './publicIcons';
+import type { ComponentType, SVGProps } from 'react';
+
+type Ico = ComponentType<SVGProps<SVGSVGElement>>;
+
+/** AI 기능 쇼케이스 타일(4~6) — 정적 능력 메타. `soon`=준비 중 배지. */
+const AI_TILES: { key: string; icon: Ico; to: string; soon?: boolean }[] = [
+  { key: 'assistant', icon: IconSparkles, to: '#hero' },
+  { key: 'recommend', icon: IconTarget, to: '#recommend' },
+  { key: 'wayfinding', icon: IconMap, to: '/login' },
+  { key: 'schedule', icon: IconCalendar, to: '#briefing' },
+  { key: 'crowd', icon: IconCloud, to: '#briefing', soon: true },
+  { key: 'render', icon: IconRobot, to: '/business', soon: true },
+];
+
+/** 방문 가이드 허브(2×3) 정적 폴백 — 라이브 visitor-guide 부재 시. */
+const GUIDE_CARDS: { key: string; icon: Ico; to: string }[] = [
+  { key: 'transport', icon: IconTrain, to: '#transport' },
+  { key: 'parking', icon: IconParking, to: '#transport' },
+  { key: 'wayfinding', icon: IconMap, to: '/login' },
+  { key: 'amenities', icon: IconInfo, to: '#guide' },
+  { key: 'accessibility', icon: IconShield, to: '#guide' },
+  { key: 'inquiry', icon: IconChat, to: '/public/exhibit-inquiry' },
+];
+
+/** 관심사 추천 칩(정적 카테고리 라벨). */
+const INTEREST_KEYS = ['robot', 'smartfactory', 'healthcare', 'eco', 'mobility', 'content'] as const;
+
+/** 관람객 여정 3-스텝. */
+const JOURNEY: { key: string; icon: Ico; to: string }[] = [
+  { key: 'register', icon: IconTicket, to: '#showcase' },
+  { key: 'badge', icon: IconQr, to: '/tickets/lookup' },
+  { key: 'checkin', icon: IconCheckCircle, to: '/login' },
+];
+
+function LinkOrAnchor({ to, className, children }: { to: string; className: string; children: React.ReactNode }) {
+  if (to.startsWith('#')) {
+    return (
+      <a className={className} href={to}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <Link className={className} to={to}>
+      {children}
+    </Link>
+  );
+}
+
+/** 방문가이드 카테고리 → 아이콘 휴리스틱(라이브 카테고리 텍스트 매칭). */
+function guideIcon(cat: string | null, title: string | null): Ico {
+  const s = `${cat ?? ''} ${title ?? ''}`.toLowerCase();
+  if (/교통|transport|gtx|지하철|버스|subway|bus/.test(s)) return IconTrain;
+  if (/주차|park/.test(s)) return IconParking;
+  if (/길찾기|wayfind|지도|map|동선/.test(s)) return IconMap;
+  if (/접근|access|휠체어|수어/.test(s)) return IconShield;
+  if (/문의|faq|inquir|연락/.test(s)) return IconChat;
+  return IconInfo;
+}
+
+export function VisitorTrackPage() {
+  const { t } = useTranslation();
+  const events = usePublicEvents(12);
+
+  const [notices, setNotices] = useState<PublicNotice[]>([]);
+  const [noticeErr, setNoticeErr] = useState('');
+  const [noticeLoading, setNoticeLoading] = useState(true);
+
+  const [guides, setGuides] = useState<VisitorGuide[]>([]);
+  const [transport, setTransport] = useState<TransportInfo[]>([]);
+
+  const [interest, setInterest] = useState<string>('');
+
+  useEffect(() => {
+    let alive = true;
+    setNoticeLoading(true);
+    publicApi
+      .listNotices(5)
+      .then((list) => alive && (setNotices(list), setNoticeErr('')))
+      .catch((e) => alive && setNoticeErr(errorMessage(e)))
+      .finally(() => alive && setNoticeLoading(false));
+
+    // 방문가이드·교통(라이브) — 실패해도 정적 폴백으로 화면 유지(빈 화면 금지).
+    publicApi
+      .listVisitorGuide()
+      .then((list) => alive && setGuides(list))
+      .catch(() => alive && setGuides([]));
+    publicApi
+      .listTransport()
+      .then((list) => alive && setTransport(list))
+      .catch(() => alive && setTransport([]));
+
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const useLiveGuides = guides.length > 0;
+
+  return (
+    <PublicShell active="visit" track="visitor" cta={t('track.visitor.ctaPreReg')}>
+      {/* ── 1. 풀블리드 히어로 + AI 관람 도우미(중심) ── STITCH-REPLACE:hero ── */}
+      <section className="kxp-vhero" id="hero" aria-label={t('track.visitor.heroAria')}>
+        <div className="kxp-vhero__bg" aria-hidden />
+        <div className="kxp-vhero__scrim" aria-hidden />
+        <span className="kxp-vhero__wm" aria-hidden>
+          {t('track.visitor.aiWatermark')}
+        </span>
+        <div className="kxp-vhero__inner">
+          <h1 className="kxp-vhero__title">{t('track.visitor.hero.title')}</h1>
+          <p className="kxp-vhero__lead">{t('track.visitor.hero.subtitle')}</p>
+
+          <AiAssistant />
+
+          <div className="kxp-vhero__cta">
+            <a className="kxp-btn kxp-btn--primary kxp-btn--lg" href="#showcase">
+              {t('track.visitor.ctaPreReg')}
+            </a>
+            <Link className="kxp-btn kxp-btn--ghost kxp-btn--lg" to="/tickets/lookup">
+              {t('track.visitor.ctaTicket')}
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ── 2. AI 기능 쇼케이스 타일 ── STITCH-REPLACE:tiles ── */}
+      <section className="kxp-section" id="ai-tiles" aria-label={t('track.visitor.aiTiles.title')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.visitor.aiTiles.title')}</h2>
+              <p className="kxp-section__sub">{t('track.visitor.aiTiles.sub')}</p>
+            </div>
+          </div>
+          <div className="kxp-aitiles">
+            {AI_TILES.map(({ key, icon: Icon, to, soon }) => (
+              <LinkOrAnchor key={key} to={to} className="kxp-aitile">
+                <span className="kxp-aitile__top">
+                  <AiLabel>{t('ai.assistant.label')}</AiLabel>
+                  {soon && <span className="kxp-aitile__soon">{t('track.visitor.aiTiles.soon')}</span>}
+                </span>
+                <span className="kxp-aitile__ic" aria-hidden>
+                  <Icon width={24} height={24} />
+                </span>
+                <span className="kxp-aitile__title">{t(`track.visitor.aiTiles.${key}.title`)}</span>
+                <span className="kxp-aitile__desc">{t(`track.visitor.aiTiles.${key}.desc`)}</span>
+                <span className="kxp-aitile__go" aria-hidden>
+                  <IconArrowRight width={16} height={16} />
+                </span>
+              </LinkOrAnchor>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── 3. AI 전시·행사 기획 브리핑(연/월) ── */}
+      <AiPlanningBriefing />
+
+      {/* ── 4. 진행 중·예정 전시 쇼케이스 ── */}
+      <section className="kxp-section" id="showcase" aria-label={t('track.visitor.eventsAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.visitor.showcaseTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.visitor.showcaseSub')}</p>
+            </div>
+          </div>
+          <EventGrid state={events} />
+        </div>
+      </section>
+
+      {/* ── 5. 관심사 맞춤 추천 레일(AI) ── */}
+      <section className="kxp-section kxp-section--alt" id="recommend" aria-label={t('track.visitor.recommendTitle')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">
+                {t('track.visitor.recommendTitle')}{' '}
+                <span className="kxp-inlineai">
+                  <AiLabel>{t('track.visitor.recommendTag')}</AiLabel>
+                </span>
+              </h2>
+              <p className="kxp-section__sub">{t('track.visitor.recommendSub')}</p>
+            </div>
+          </div>
+          <div className="kxp-vinterests" role="group" aria-label={t('track.visitor.recommendTitle')}>
+            {INTEREST_KEYS.map((k) => (
+              <button
+                key={k}
+                type="button"
+                className={`kxp-ai__chip${interest === k ? ' is-active' : ''}`}
+                aria-pressed={interest === k}
+                onClick={() => setInterest((cur) => (cur === k ? '' : k))}
+              >
+                {t(`track.visitor.interests.${k}`)}
+              </button>
+            ))}
+          </div>
+          <EventGrid state={events} />
+        </div>
+      </section>
+
+      {/* ── 6. 방문 가이드 허브(2×3, 라이브 우선·정적 폴백) ── */}
+      <section className="kxp-section" id="guide" aria-label={t('track.visitor.guideAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.visitor.guideTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.visitor.guideSub')}</p>
+            </div>
+          </div>
+
+          {/* 교통 요약 스트립(라이브 transport) — 없으면 자동 숨김 */}
+          {transport.length > 0 && (
+            <div className="kxp-transtrip" id="transport" aria-label={t('track.visitor.guide.transport.title')}>
+              {transport.slice(0, 5).map((tr) => (
+                <div key={tr.id} className="kxp-transtrip__item">
+                  <span className="kxp-transtrip__ic" aria-hidden>
+                    <IconTrain width={18} height={18} />
+                  </span>
+                  <div>
+                    <div className="kxp-transtrip__name">{tr.lineName || tr.mode}</div>
+                    <div className="kxp-transtrip__desc">
+                      {[tr.route, tr.travelTime].filter(Boolean).join(' · ')}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <div className="kxp-guidegrid">
+            {useLiveGuides
+              ? guides.slice(0, 6).map((g) => {
+                  const Icon = guideIcon(g.category, g.title);
+                  return (
+                    <article key={g.id} className="kxp-guide">
+                      <span className="kxp-guide__ic" aria-hidden>
+                        <Icon width={22} height={22} />
+                      </span>
+                      <div>
+                        <div className="kxp-guide__title">{g.title}</div>
+                        <p className="kxp-guide__desc">{g.summary || g.body || ''}</p>
+                        {g.sourceUrl && (
+                          <a className="kxp-guide__link" href={g.sourceUrl} target="_blank" rel="noreferrer noopener">
+                            {t('track.visitor.guideMore')} <IconChevronRight width={15} height={15} />
+                          </a>
+                        )}
+                      </div>
+                    </article>
+                  );
+                })
+              : GUIDE_CARDS.map(({ key, icon: Icon, to }) => (
+                  <article key={key} className="kxp-guide">
+                    <span className="kxp-guide__ic" aria-hidden>
+                      <Icon width={22} height={22} />
+                    </span>
+                    <div>
+                      <div className="kxp-guide__title">{t(`track.visitor.guide.${key}.title`)}</div>
+                      <p className="kxp-guide__desc">{t(`track.visitor.guide.${key}.desc`)}</p>
+                      <LinkOrAnchor to={to} className="kxp-guide__link">
+                        {t(`track.visitor.guide.${key}.link`)} <IconChevronRight width={15} height={15} />
+                      </LinkOrAnchor>
+                    </div>
+                  </article>
+                ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── 7. 관람객 여정 3-스텝 ── */}
+      <section className="kxp-section kxp-section--alt" id="journey" aria-label={t('track.visitor.journeyTitle')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.visitor.journeyTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.visitor.journeySub')}</p>
+            </div>
+          </div>
+          <ol className="kxp-journey">
+            {JOURNEY.map(({ key, icon: Icon, to }, i) => (
+              <li key={key} className="kxp-journey__step">
+                <span className="kxp-journey__num" aria-hidden>
+                  {i + 1}
+                </span>
+                <span className="kxp-journey__ic" aria-hidden>
+                  <Icon width={22} height={22} />
+                </span>
+                <div className="kxp-journey__body">
+                  <div className="kxp-journey__title">{t(`track.visitor.journey.${key}.title`)}</div>
+                  <p className="kxp-journey__desc">{t(`track.visitor.journey.${key}.desc`)}</p>
+                  <LinkOrAnchor to={to} className="kxp-guide__link">
+                    {t(`track.visitor.journey.${key}.link`)} <IconChevronRight width={15} height={15} />
+                  </LinkOrAnchor>
+                </div>
+                {i < JOURNEY.length - 1 && (
+                  <span className="kxp-journey__arrow" aria-hidden>
+                    <IconArrowRight width={18} height={18} />
+                  </span>
+                )}
+              </li>
+            ))}
+          </ol>
+        </div>
+      </section>
+
+      {/* ── 8. 공지·뉴스 ── */}
+      <section className="kxp-section" id="notices" aria-label={t('track.visitor.noticeAria')}>
+        <div className="kxp-wrap">
+          <div className="kxp-section__head">
+            <div>
+              <h2 className="kxp-section__title">{t('track.visitor.noticeTitle')}</h2>
+              <p className="kxp-section__sub">{t('track.visitor.noticeSub')}</p>
+            </div>
+          </div>
+
+          {noticeLoading && (
+            <p className="kxp-empty" role="status">
+              {t('home.loading')}
+            </p>
+          )}
+          {!noticeLoading && (noticeErr || notices.length === 0) && (
+            <p className="kxp-empty">{t('track.visitor.noticeEmpty')}</p>
+          )}
+          {!noticeLoading && !noticeErr && notices.length > 0 && (
+            <div className="kxp-list">
+              {notices.map((n) => (
+                <div key={n.id} className="kxp-listrow">
+                  <div className="kxp-listrow__main">
+                    <div className="kxp-listrow__title">{n.title}</div>
+                    <div className="kxp-listrow__meta">{n.publishedAt ?? n.createdAt ?? ''}</div>
+                  </div>
+                  <span className="kxp-listrow__right">
+                    <IconArrowRight width={18} height={18} />
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* ── 9. 전시장 소개 밴드 ── */}
+      <section className="kxp-section kxp-section--alt" id="venue" aria-label={t('track.visitor.venueTitle')}>
+        <div className="kxp-wrap">
+          <div className="kxp-venue">
+            <div className="kxp-venue__intro">
+              <span className="kxp-venue__ic" aria-hidden>
+                <IconVenue width={28} height={28} />
+              </span>
+              <div>
+                <h2 className="kxp-section__title">{t('track.visitor.venueTitle')}</h2>
+                <p className="kxp-section__sub">{t('track.visitor.venueSub')}</p>
+              </div>
+            </div>
+            <dl className="kxp-venue__stats">
+              {(['halls', 'area', 'parking', 'access'] as const).map((k) => (
+                <div key={k} className="kxp-venue__stat">
+                  <dt>{t(`track.visitor.venue.${k}.label`)}</dt>
+                  <dd className="kxp-tabnum">{t(`track.visitor.venue.${k}.value`)}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+        </div>
+      </section>
+    </PublicShell>
+  );
+}
diff --git a/src/frontend/src/screens/public/index.ts b/src/frontend/src/screens/public/index.ts
new file mode 100644
index 0000000..973c7fc
--- /dev/null
+++ b/src/frontend/src/screens/public/index.ts
@@ -0,0 +1,18 @@
+/*
+ * 공개 홍보 사이트(SCR-P1~P7) 배럴 — 통합자(라우팅 배선 담당)가 임포트.
+ * 전부 비로그인 공개 라우트 전제. 인증 가드 없이 마운트한다.
+ */
+export { PublicShell } from './PublicShell';
+export type { PublicTrack } from './PublicShell';
+// §3C 3-트랙 관문·서브홈 (SCR-T0~T3) — 얕은 트랙 진입 레이어
+export { PublicGatewayPage } from './PublicGatewayPage'; // SCR-T0 /
+export { VisitorTrackPage } from './VisitorTrackPage'; // SCR-T1 /visitor
+export { BusinessTrackPage } from './BusinessTrackPage'; // SCR-T2 /business
+export { AgencyTrackPage } from './AgencyTrackPage'; // SCR-T3 /agency
+export { PublicHomePage } from './PublicHomePage'; // SCR-P1 /public
+export { PublicEventDetailPage } from './PublicEventDetailPage'; // SCR-P2 /public/events/:eventId
+export { PublicFloorplanPage } from './PublicFloorplanPage'; // SCR-P3 /public/events/:eventId/floorplan
+export { PublicRegistrationPage } from './PublicRegistrationPage'; // SCR-P4 /public/events/:eventId/register
+export { PublicMicrositePage } from './PublicMicrositePage'; // SCR-P5 /public/exhibitors/:exhibitorId
+export { PublicInquiryPage } from './PublicInquiryPage'; // SCR-P6 /public/exhibit-inquiry
+export { PublicTicketPage } from './PublicTicketPage'; // SCR-P7 /tickets/:eventId/purchase · /tickets/lookup
diff --git a/src/frontend/src/screens/public/public.css b/src/frontend/src/screens/public/public.css
new file mode 100644
index 0000000..befbdf7
--- /dev/null
+++ b/src/frontend/src/screens/public/public.css
@@ -0,0 +1,4003 @@
+/*
+ * 공개 홍보 사이트(SCR-P1~P7) 전용 스타일.
+ * design.md §1 토큰(styles/tokens.css :root)만 참조 — 공개 마케팅 톤으로 확장.
+ * 스코프: .kxp 하위. Tailwind 미사용. 모바일 우선 + min-width 확장.
+ */
+
+.kxp {
+  --kxp-maxw: 1200px;
+  --kxp-hero-scrim: linear-gradient(90deg, rgba(16, 24, 40, 0.72) 0%, rgba(16, 24, 40, 0.15) 100%);
+  font-family: var(--font-sans);
+  color: var(--color-neutral-700);
+  background: var(--color-white);
+  min-height: 100%;
+  line-height: 1.5;
+}
+.kxp *,
+.kxp *::before,
+.kxp *::after {
+  box-sizing: border-box;
+}
+.kxp img {
+  max-width: 100%;
+  display: block;
+}
+.kxp a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* ── 컨테이너 ── */
+.kxp-wrap {
+  width: 100%;
+  max-width: var(--kxp-maxw);
+  margin: 0 auto;
+  padding: 0 16px;
+}
+@media (min-width: 768px) {
+  .kxp-wrap {
+    padding: 0 24px;
+  }
+}
+
+/* ── 샘플 데이터 배지(공개 API 갭) ── */
+.kxp-sample {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-warning);
+  background: #fff4e5;
+  border: 1px solid #fde3c0;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+}
+
+/* ── 버튼 ── */
+.kxp-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: inherit;
+  font-size: var(--fs-body);
+  font-weight: 700;
+  line-height: 1;
+  padding: 12px 20px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s;
+  text-align: center;
+}
+.kxp-btn:active {
+  transform: scale(0.98);
+}
+.kxp-btn--primary {
+  background: var(--color-primary-600);
+  color: var(--color-white);
+}
+.kxp-btn--primary:hover {
+  background: var(--color-primary-700);
+}
+.kxp-btn--ghost {
+  background: rgba(255, 255, 255, 0.14);
+  color: var(--color-white);
+  border-color: rgba(255, 255, 255, 0.35);
+  backdrop-filter: blur(6px);
+}
+.kxp-btn--ghost:hover {
+  background: rgba(255, 255, 255, 0.26);
+}
+.kxp-btn--outline {
+  background: var(--color-white);
+  color: var(--color-primary-700);
+  border-color: var(--color-neutral-200);
+}
+.kxp-btn--outline:hover {
+  border-color: var(--color-primary-600);
+  color: var(--color-primary-600);
+}
+.kxp-btn--danger {
+  background: var(--color-white);
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+.kxp-btn--danger:hover {
+  background: var(--color-error);
+  color: var(--color-white);
+}
+.kxp-btn--lg {
+  padding: 16px 28px;
+  font-size: var(--fs-h3);
+}
+.kxp-btn--block {
+  width: 100%;
+}
+.kxp-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ── 배지·칩 ── */
+.kxp-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kxp-chip--ai {
+  color: var(--color-ai-accent);
+  background: var(--color-ai-surface);
+  border: 1px solid #ddd6fe;
+}
+.kxp-dday {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-600);
+  color: var(--color-white);
+}
+.kxp-dday--warn {
+  background: var(--color-warning);
+}
+.kxp-dday--soon {
+  background: var(--color-error);
+}
+.kxp-tag {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+  text-transform: uppercase;
+}
+.kxp-status {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+}
+.kxp-status--done {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kxp-status--soldout {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+
+/* ── AI 워터마크 고지 ── */
+.kxp-aiwm {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.85);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
+  pointer-events: none;
+}
+
+/* ═══ 헤더 ═══ */
+.kxp-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--color-neutral-200);
+}
+.kxp-header__inner {
+  max-width: var(--kxp-maxw);
+  margin: 0 auto;
+  height: 64px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.kxp-header__left {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  min-width: 0;
+}
+.kxp-brand {
+  font-size: var(--fs-h2);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--color-primary-700);
+  white-space: nowrap;
+}
+.kxp-gnb {
+  display: none;
+  gap: 24px;
+}
+.kxp-gnb__link {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  padding: 6px 0;
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+}
+.kxp-gnb__link:hover {
+  color: var(--color-primary-600);
+}
+.kxp-gnb__link.is-active {
+  color: var(--color-primary-700);
+  border-bottom-color: var(--color-primary-600);
+  font-weight: 700;
+}
+.kxp-header__right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.kxp-search {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: var(--color-neutral-050);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-pill);
+  padding: 6px 14px;
+}
+.kxp-search__icon {
+  color: var(--color-neutral-500);
+  flex-shrink: 0;
+}
+.kxp-search__input {
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: var(--fs-body);
+  width: 130px;
+  color: var(--color-neutral-700);
+}
+.kxp-lang {
+  position: relative;
+}
+.kxp-lang__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  padding: 7px 10px;
+  cursor: pointer;
+}
+.kxp-lang__btn:hover {
+  border-color: var(--color-primary-600);
+}
+.kxp-lang__menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  min-width: 130px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  z-index: 60;
+}
+.kxp-lang__opt {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  cursor: pointer;
+}
+.kxp-lang__opt:hover {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kxp-header__cta {
+  display: none;
+}
+.kxp-header__login {
+  display: none;
+}
+.kxp-header__burger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kxp-mobilenav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px 20px;
+  border-top: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+}
+.kxp-mobilenav__link {
+  font-size: var(--fs-h3);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  padding: 12px 8px;
+  border-radius: var(--radius-sm);
+}
+.kxp-mobilenav__link:hover {
+  background: var(--color-primary-050);
+}
+.kxp-mobilenav__cta {
+  margin-top: 8px;
+}
+
+@media (min-width: 768px) {
+  .kxp-header__inner {
+    height: 72px;
+    padding: 0 24px;
+  }
+  .kxp-gnb {
+    display: flex;
+  }
+  .kxp-search {
+    display: flex;
+  }
+  .kxp-header__burger {
+    display: none;
+  }
+}
+@media (min-width: 1024px) {
+  .kxp-header__cta {
+    display: inline-flex;
+  }
+  .kxp-header__login {
+    display: inline-flex;
+  }
+}
+
+/* ═══ 메인 ═══ */
+.kxp-main {
+  display: block;
+}
+
+/* ═══ 히어로 ═══ */
+.kxp-hero {
+  position: relative;
+  min-height: 440px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  background: var(--color-canvas-bg);
+}
+.kxp-hero__bg {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  z-index: 0;
+}
+.kxp-hero__scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--kxp-hero-scrim);
+  z-index: 1;
+}
+.kxp-hero__inner {
+  position: relative;
+  z-index: 2;
+  max-width: var(--kxp-maxw);
+  margin: 0 auto;
+  padding: 56px 16px;
+  width: 100%;
+}
+.kxp-hero__content {
+  max-width: 640px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.kxp-hero__eyebrow {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-white);
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 6px 14px;
+  border-radius: var(--radius-pill);
+}
+.kxp-hero__title {
+  font-size: clamp(30px, 6vw, 52px);
+  line-height: 1.12;
+  font-weight: 800;
+  color: var(--color-white);
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+.kxp-hero__title em {
+  font-style: normal;
+  color: #9fd0f5;
+}
+.kxp-hero__lead {
+  font-size: var(--fs-h3);
+  color: rgba(255, 255, 255, 0.9);
+  max-width: 520px;
+  margin: 0;
+}
+.kxp-hero__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.kxp-hero__metacard {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-lg);
+  padding: 10px 14px;
+  color: var(--color-white);
+}
+.kxp-hero__metacard small {
+  display: block;
+  font-size: 11px;
+  opacity: 0.75;
+}
+.kxp-hero__metacard strong {
+  font-size: var(--fs-body);
+  font-weight: 700;
+}
+.kxp-hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 4px;
+}
+@media (min-width: 768px) {
+  .kxp-hero {
+    min-height: 560px;
+  }
+  .kxp-hero__inner {
+    padding: 80px 24px;
+  }
+}
+
+/* ═══ 섹션 공통 ═══ */
+.kxp-section {
+  padding: 56px 0;
+}
+.kxp-section--alt {
+  background: var(--color-neutral-050);
+}
+.kxp-section--tint {
+  background: var(--color-primary-050);
+}
+.kxp-section__head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+}
+.kxp-section__title {
+  font-size: clamp(24px, 4vw, 32px);
+  font-weight: 800;
+  color: var(--color-neutral-900);
+  letter-spacing: -0.02em;
+  margin: 0 0 6px;
+}
+.kxp-section__sub {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin: 0;
+}
+.kxp-section__more {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-primary-600);
+}
+.kxp-section__more:hover {
+  text-decoration: underline;
+}
+@media (min-width: 768px) {
+  .kxp-section {
+    padding: 80px 0;
+  }
+}
+
+/* ═══ 제품 역할 가치 카드(P1 제품 아이덴티티) ═══ */
+.kxp-roles {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+@media (min-width: 640px) {
+  .kxp-roles {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .kxp-roles {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.kxp-role {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
+}
+.kxp-role:hover {
+  border-color: var(--color-primary-600);
+  box-shadow: var(--shadow-level2);
+  transform: translateY(-2px);
+}
+.kxp-role__ic {
+  width: 48px;
+  height: 48px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  background: var(--color-primary-050);
+  color: var(--color-primary-600);
+}
+.kxp-role__badge {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-primary-600);
+}
+.kxp-role__title {
+  font-size: var(--fs-h2);
+  font-weight: 800;
+  color: var(--color-neutral-900);
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+.kxp-role__desc {
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  color: var(--color-neutral-500);
+  margin: 0;
+  flex: 1;
+}
+.kxp-role__link {
+  text-decoration: none;
+}
+.kxp-role__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-primary-600);
+}
+.kxp-role__link:hover .kxp-role__cta {
+  text-decoration: underline;
+}
+
+/* ═══ 핵심 기능 스텝 스트립(P1) ═══ */
+.kxp-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+@media (min-width: 1024px) {
+  .kxp-steps {
+    grid-template-columns: repeat(4, 1fr);
+    align-items: stretch;
+  }
+}
+.kxp-step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.kxp-step__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+  padding: 24px 20px;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+}
+.kxp-step__ic {
+  width: 44px;
+  height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  background: var(--color-primary-050);
+  color: var(--color-primary-600);
+}
+.kxp-step__no {
+  position: absolute;
+  top: 16px;
+  right: 18px;
+  font-size: var(--fs-h1);
+  font-weight: 800;
+  line-height: 1;
+  color: var(--color-neutral-100);
+}
+.kxp-step__title {
+  font-size: var(--fs-h3);
+  font-weight: 800;
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+.kxp-step__desc {
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  color: var(--color-neutral-500);
+  margin: 0;
+}
+.kxp-step__arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-neutral-500);
+  padding: 8px 0;
+}
+@media (min-width: 1024px) {
+  .kxp-step__arrow {
+    position: absolute;
+    top: 50%;
+    right: -14px;
+    transform: translateY(-50%);
+    padding: 0;
+    z-index: 1;
+  }
+}
+
+/* ═══ 이벤트 카드 그리드(P1) ═══ */
+.kxp-eventgrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+@media (min-width: 640px) {
+  .kxp-eventgrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .kxp-eventgrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.kxp-ecard {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: box-shadow 0.2s, transform 0.2s;
+}
+.kxp-ecard:hover {
+  box-shadow: var(--shadow-level2);
+  transform: translateY(-2px);
+}
+.kxp-ecard__media {
+  position: relative;
+  aspect-ratio: 16 / 11;
+  background: var(--color-neutral-100);
+  overflow: hidden;
+}
+.kxp-ecard__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.kxp-ecard__topright {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+.kxp-ecard__botleft {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+}
+.kxp-ecard__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+  flex: 1;
+}
+.kxp-ecard__tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.kxp-ecard__title {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+.kxp-ecard__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  flex: 1;
+}
+.kxp-ecard__meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.kxp-ecard__meta svg {
+  color: var(--color-neutral-500);
+  flex-shrink: 0;
+}
+
+/* ═══ 교통 섹션(P1) ═══ */
+.kxp-transport {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 32px;
+  align-items: center;
+}
+@media (min-width: 1024px) {
+  .kxp-transport {
+    grid-template-columns: 1fr 1fr;
+    gap: 56px;
+  }
+}
+.kxp-transport__gtx {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  background: var(--color-white);
+  border: 1px solid var(--color-primary-100);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  margin: 20px 0;
+}
+.kxp-transport__gtx-ic {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-050);
+  color: var(--color-primary-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.kxp-transport__gtx h4 {
+  margin: 0 0 4px;
+  font-size: var(--fs-h3);
+  color: var(--color-primary-700);
+}
+.kxp-transport__gtx p {
+  margin: 0;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kxp-transport__opts {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+.kxp-transport__opt {
+  padding: 16px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  text-align: left;
+}
+.kxp-transport__opt svg {
+  color: var(--color-primary-600);
+  margin-bottom: 8px;
+}
+.kxp-transport__opt h5 {
+  margin: 0 0 2px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kxp-transport__opt span {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-transport__map {
+  position: relative;
+  min-height: 320px;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 1px solid var(--color-neutral-200);
+  background-size: cover;
+  background-position: center;
+  background-color: var(--color-neutral-100);
+}
+.kxp-transport__mapcard {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(6px);
+  border-radius: var(--radius-lg);
+  padding: 16px;
+}
+.kxp-transport__mapcard small {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-transport__mapcard strong {
+  display: block;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+
+/* ═══ 푸터 ═══ */
+.kxp-footer {
+  background: var(--color-neutral-900);
+  color: rgba(255, 255, 255, 0.72);
+}
+.kxp-footer__inner {
+  max-width: var(--kxp-maxw);
+  margin: 0 auto;
+  padding: 48px 16px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 32px;
+}
+.kxp-footer__logo {
+  font-size: var(--fs-h2);
+  font-weight: 800;
+  color: var(--color-white);
+  margin-bottom: 12px;
+}
+.kxp-footer__desc {
+  font-size: var(--fs-body);
+  margin: 0;
+  max-width: 320px;
+}
+.kxp-footer__cols {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+.kxp-footer__col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.kxp-footer__col h4 {
+  font-size: var(--fs-body);
+  color: var(--color-white);
+  margin: 0 0 4px;
+}
+.kxp-footer__col a,
+.kxp-footer__col span {
+  font-size: var(--fs-caption);
+  color: rgba(255, 255, 255, 0.6);
+}
+.kxp-footer__col a:hover {
+  color: var(--color-white);
+}
+.kxp-footer__bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 20px 16px;
+  text-align: center;
+  font-size: var(--fs-caption);
+  color: rgba(255, 255, 255, 0.45);
+}
+@media (min-width: 768px) {
+  .kxp-footer__inner {
+    grid-template-columns: 1.2fr 2fr;
+    padding: 56px 24px;
+  }
+}
+
+/* ═══ P2 행사 상세 ═══ */
+.kxp-subtabs {
+  position: sticky;
+  top: 64px;
+  z-index: 40;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--color-neutral-200);
+}
+.kxp-subtabs__inner {
+  max-width: var(--kxp-maxw);
+  margin: 0 auto;
+  padding: 0 16px;
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+}
+.kxp-subtab {
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 16px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.kxp-subtab:hover {
+  color: var(--color-primary-600);
+}
+.kxp-subtab.is-active {
+  color: var(--color-primary-700);
+  border-bottom-color: var(--color-primary-600);
+}
+@media (min-width: 768px) {
+  .kxp-subtabs {
+    top: 72px;
+  }
+}
+.kxp-detail {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 32px;
+  align-items: center;
+}
+@media (min-width: 1024px) {
+  .kxp-detail {
+    grid-template-columns: 1fr 1fr;
+    gap: 48px;
+  }
+}
+.kxp-detail__lead {
+  font-size: var(--fs-body);
+  line-height: 1.75;
+  color: var(--color-neutral-700);
+  margin: 0 0 24px;
+}
+.kxp-detail__stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+.kxp-statcard {
+  padding: 20px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: var(--radius-lg);
+}
+.kxp-statcard:nth-child(2) {
+  border-left-color: var(--color-ai-accent);
+}
+.kxp-statcard svg {
+  color: var(--color-primary-600);
+  margin-bottom: 8px;
+}
+.kxp-statcard strong {
+  display: block;
+  font-size: var(--fs-display);
+  font-weight: 800;
+  color: var(--color-neutral-900);
+}
+.kxp-statcard span {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-detail__img {
+  aspect-ratio: 4 / 3;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-neutral-100);
+  background-size: cover;
+  background-position: center;
+}
+.kxp-themes {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  margin-top: 32px;
+}
+@media (min-width: 768px) {
+  .kxp-themes {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.kxp-theme {
+  text-align: center;
+  padding: 28px 20px;
+  background: var(--color-neutral-050);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+}
+.kxp-theme svg {
+  color: var(--color-primary-600);
+  margin: 0 auto 12px;
+}
+.kxp-theme h4 {
+  margin: 0 0 6px;
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kxp-theme p {
+  margin: 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+/* 아젠다 타임라인 */
+.kxp-agenda {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.kxp-agenda__item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  border-left: 2px solid var(--color-neutral-200);
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  transition: background 0.15s, border-color 0.15s;
+}
+.kxp-agenda__item:hover {
+  background: var(--color-neutral-050);
+  border-left-color: var(--color-primary-600);
+}
+.kxp-agenda__time {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-primary-600);
+}
+.kxp-agenda__time small {
+  display: block;
+  font-weight: 400;
+  color: var(--color-neutral-500);
+  font-size: var(--fs-caption);
+}
+.kxp-agenda__title {
+  margin: 0;
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kxp-agenda__desc {
+  margin: 0;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+@media (min-width: 768px) {
+  .kxp-agenda__item {
+    display: grid;
+    grid-template-columns: 140px 1fr;
+    align-items: start;
+    gap: 20px;
+  }
+}
+.kxp-daytabs {
+  display: flex;
+  gap: 8px;
+}
+.kxp-daytab {
+  font-family: inherit;
+  font-size: var(--fs-body);
+  font-weight: 700;
+  padding: 8px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kxp-daytab.is-active {
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  border-color: var(--color-primary-600);
+}
+/* 연사 카드 */
+.kxp-speakers {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+@media (min-width: 768px) {
+  .kxp-speakers {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.kxp-speaker__photo {
+  aspect-ratio: 3 / 4;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-neutral-100);
+  background-size: cover;
+  background-position: center;
+  margin-bottom: 12px;
+}
+.kxp-speaker h5 {
+  margin: 0;
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kxp-speaker p {
+  margin: 2px 0 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+/* 공유 사이드 */
+.kxp-share {
+  position: fixed;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: none;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 45;
+}
+@media (min-width: 1280px) {
+  .kxp-share {
+    display: flex;
+  }
+}
+.kxp-share__btn {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--shadow-level2);
+}
+.kxp-share__btn:hover {
+  color: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+}
+.kxp-eventhero__facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+/* ═══ P3 플로어플랜 ═══ */
+.kxp-fp {
+  display: grid;
+  grid-template-columns: 1fr;
+  min-height: 560px;
+}
+@media (min-width: 1024px) {
+  .kxp-fp {
+    grid-template-columns: 320px 1fr;
+    height: calc(100vh - 72px);
+  }
+}
+.kxp-fp__side {
+  border-right: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.kxp-fp__filters {
+  padding: 20px;
+  border-bottom: 1px solid var(--color-neutral-200);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.kxp-fp__filters h2 {
+  margin: 0;
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+}
+.kxp-fp__searchbox {
+  position: relative;
+}
+.kxp-fp__searchbox input {
+  width: 100%;
+  padding: 12px 14px 12px 40px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-body);
+  font-family: inherit;
+  outline: none;
+}
+.kxp-fp__searchbox input:focus {
+  border-color: var(--color-primary-600);
+}
+.kxp-fp__searchbox svg {
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-neutral-500);
+}
+.kxp-fp__label {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-neutral-500);
+  margin-bottom: 8px;
+}
+.kxp-fp__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.kxp-fp__chip {
+  font-family: inherit;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-neutral-050);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kxp-fp__chip.is-active {
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+  color: var(--color-white);
+}
+.kxp-fp__list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+}
+.kxp-fp__listhint {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin: 0 0 4px;
+}
+.kxp-fp__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  padding: 12px 14px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  cursor: pointer;
+  font-family: inherit;
+}
+.kxp-fp__row:hover {
+  box-shadow: var(--shadow-level2);
+}
+.kxp-fp__row.is-active {
+  background: var(--color-primary-050);
+}
+.kxp-fp__row--reserved {
+  border-left-color: var(--color-error);
+}
+.kxp-fp__row--pending {
+  border-left-color: var(--color-neutral-500);
+  opacity: 0.7;
+  cursor: default;
+}
+.kxp-fp__row-code {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-primary-600);
+}
+.kxp-fp__row-name {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 2px 0;
+}
+.kxp-fp__row-cat {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-fp__stage {
+  position: relative;
+  background: var(--color-neutral-050);
+  overflow: hidden;
+  min-height: 460px;
+  background-image: radial-gradient(var(--color-neutral-200) 1px, transparent 1px);
+  background-size: 22px 22px;
+}
+.kxp-fp__canvaswrap {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+.kxp-fp__canvas {
+  position: relative;
+  width: min(760px, 100%);
+  aspect-ratio: 3 / 2;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  box-shadow: var(--shadow-level2);
+  transition: transform 0.25s;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  gap: 10px;
+  padding: 20px;
+}
+.kxp-booth {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  border: 2px solid;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  position: relative;
+  transition: filter 0.15s, transform 0.15s;
+  background: rgba(0, 102, 179, 0.1);
+  border-color: rgba(0, 102, 179, 0.45);
+  color: var(--color-primary-700);
+}
+.kxp-booth:hover {
+  filter: brightness(1.05);
+  transform: scale(1.03);
+}
+.kxp-booth.is-selected {
+  outline: 3px solid var(--color-primary-600);
+  outline-offset: 1px;
+}
+.kxp-booth--reserved {
+  background: rgba(217, 45, 32, 0.08);
+  border-color: rgba(217, 45, 32, 0.4);
+  color: var(--color-error);
+}
+.kxp-booth--public {
+  background: var(--color-neutral-100);
+  border-color: var(--color-neutral-200);
+  color: var(--color-neutral-500);
+  cursor: default;
+}
+.kxp-booth__badge {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  font-size: 9px;
+  background: var(--color-error);
+  color: var(--color-white);
+  padding: 0 4px;
+  border-radius: 3px;
+}
+.kxp-fp__pop {
+  position: absolute;
+  z-index: 30;
+  width: 240px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  overflow: hidden;
+}
+.kxp-fp__pop-head {
+  padding: 14px;
+  border-bottom: 1px solid var(--color-neutral-200);
+}
+.kxp-fp__pop-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.kxp-fp__pop-close {
+  background: transparent;
+  border: none;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+  padding: 2px;
+}
+.kxp-fp__pop-name {
+  margin: 0;
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kxp-fp__pop-cat {
+  margin: 2px 0 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-fp__pop-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--color-neutral-050);
+}
+.kxp-fp__pop-link {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-primary-600);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.kxp-fp__zoom {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 20;
+}
+.kxp-fp__zoomgroup {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-level2);
+}
+.kxp-fp__zoombtn {
+  padding: 10px;
+  background: var(--color-white);
+  border: none;
+  border-bottom: 1px solid var(--color-neutral-200);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+  display: flex;
+}
+.kxp-fp__zoombtn:last-child {
+  border-bottom: none;
+}
+.kxp-fp__zoombtn:hover {
+  background: var(--color-neutral-050);
+}
+.kxp-fp__legend {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 18px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(6px);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-pill);
+  padding: 10px 20px;
+  box-shadow: var(--shadow-level2);
+}
+.kxp-fp__legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  white-space: nowrap;
+}
+.kxp-fp__dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 1px solid;
+}
+.kxp-fp__dot--avail {
+  background: rgba(0, 102, 179, 0.25);
+  border-color: var(--color-primary-600);
+}
+.kxp-fp__dot--reserved {
+  background: rgba(217, 45, 32, 0.2);
+  border-color: var(--color-error);
+}
+.kxp-fp__dot--public {
+  background: var(--color-neutral-100);
+  border-color: var(--color-neutral-200);
+}
+@media (max-width: 1023px) {
+  .kxp-fp__legend {
+    display: none;
+  }
+}
+
+/* ═══ 폼 공통(P4·P6·P7) ═══ */
+.kxp-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.kxp-field > label {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-neutral-700);
+}
+.kxp-input,
+.kxp-select,
+.kxp-textarea {
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+  font-family: inherit;
+  color: var(--color-neutral-900);
+  background: var(--color-white);
+  outline: none;
+}
+.kxp-input:focus,
+.kxp-select:focus,
+.kxp-textarea:focus {
+  border-color: var(--color-primary-600);
+  box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12);
+}
+.kxp-textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+.kxp-formgrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+@media (min-width: 640px) {
+  .kxp-formgrid--2 {
+    grid-template-columns: 1fr 1fr;
+  }
+  .kxp-formgrid__full {
+    grid-column: 1 / -1;
+  }
+}
+.kxp-consent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: var(--color-neutral-050);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+}
+.kxp-consent__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.kxp-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kxp-check input {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-primary-600);
+}
+.kxp-check__req {
+  color: var(--color-error);
+  font-weight: 700;
+}
+.kxp-consent__more {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-primary-600);
+}
+
+/* ═══ P4 사전등록 스텝 ═══ */
+.kxp-reg {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 40px 16px 72px;
+}
+.kxp-steps {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  margin-bottom: 40px;
+  padding: 0 8px;
+}
+.kxp-steps__track {
+  position: absolute;
+  top: 20px;
+  left: 24px;
+  right: 24px;
+  height: 2px;
+  background: var(--color-neutral-200);
+  z-index: 0;
+}
+.kxp-steps__fill {
+  position: absolute;
+  top: 20px;
+  left: 24px;
+  height: 2px;
+  background: var(--color-primary-600);
+  z-index: 0;
+  transition: width 0.4s ease;
+}
+.kxp-step {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.kxp-step__dot {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-pill);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: var(--fs-body);
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  color: var(--color-neutral-500);
+}
+.kxp-step.is-active .kxp-step__dot,
+.kxp-step.is-done .kxp-step__dot {
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+  color: var(--color-white);
+}
+.kxp-step__label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kxp-step.is-active .kxp-step__label,
+.kxp-step.is-done .kxp-step__label {
+  color: var(--color-primary-700);
+  font-weight: 700;
+}
+.kxp-regcard {
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  padding: 32px 24px;
+  box-shadow: var(--shadow-level2);
+}
+.kxp-regcard__title {
+  font-size: var(--fs-h1);
+  font-weight: 800;
+  color: var(--color-neutral-900);
+  margin: 0 0 6px;
+  text-align: center;
+}
+.kxp-regcard__sub {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin: 0 0 28px;
+  text-align: center;
+}
+.kxp-typegrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+@media (min-width: 640px) {
+  .kxp-typegrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.kxp-typecard {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px 16px 24px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  background: var(--color-neutral-050);
+  cursor: pointer;
+  position: relative;
+  text-align: left;
+}
+.kxp-typecard.is-active {
+  border-color: var(--color-primary-600);
+  background: var(--color-primary-050);
+  box-shadow: 0 0 0 1px var(--color-primary-600) inset;
+}
+.kxp-typecard__ic {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-pill);
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  color: var(--color-primary-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kxp-typecard.is-active .kxp-typecard__ic {
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  border-color: var(--color-primary-600);
+}
+.kxp-typecard h3 {
+  margin: 4px 0 0;
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kxp-typecard p {
+  margin: 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-interests {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 24px;
+}
+.kxp-interest {
+  font-family: inherit;
+  font-size: var(--fs-body);
+  padding: 10px 18px;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-neutral-050);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kxp-interest.is-active {
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+  color: var(--color-white);
+}
+.kxp-regnav {
+  display: flex;
+  gap: 12px;
+  margin-top: 28px;
+}
+.kxp-regnav .kxp-btn--outline {
+  flex: 0 0 auto;
+}
+.kxp-regnav .kxp-btn--primary {
+  flex: 1;
+}
+/* 완료 배지 */
+.kxp-done {
+  text-align: center;
+  padding: 12px 0;
+}
+.kxp-done__ic {
+  width: 72px;
+  height: 72px;
+  border-radius: var(--radius-pill);
+  background: #e6f4ee;
+  color: var(--color-success);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+}
+.kxp-badge {
+  max-width: 300px;
+  margin: 24px auto 0;
+  background: var(--color-primary-600);
+  border-radius: 24px;
+  padding: 24px;
+  color: var(--color-white);
+  text-align: left;
+}
+.kxp-badge__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.kxp-badge__pass {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 4px 12px;
+  border-radius: var(--radius-pill);
+}
+.kxp-badge__role {
+  font-size: 11px;
+  opacity: 0.7;
+  letter-spacing: 0.08em;
+}
+.kxp-badge__name {
+  font-size: var(--fs-h2);
+  font-weight: 800;
+  margin: 2px 0 12px;
+}
+.kxp-badge__qr {
+  background: var(--color-white);
+  border-radius: 16px;
+  padding: 16px;
+  color: var(--color-neutral-900);
+  text-align: center;
+}
+.kxp-badge__qrbox {
+  width: 140px;
+  height: 140px;
+  margin: 0 auto 12px;
+  color: var(--color-neutral-900);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kxp-badge__qrbox svg {
+  width: 100px;
+  height: 100px;
+}
+.kxp-badge__id {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-badge__idval {
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-primary-700);
+  font-family: var(--font-mono);
+}
+.kxp-donenote {
+  margin: 24px auto 0;
+  max-width: 420px;
+  text-align: left;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* ═══ P5 마이크로사이트 ═══ */
+.kxp-ms-booth {
+  max-width: var(--kxp-maxw);
+  margin: -40px auto 0;
+  padding: 0 16px;
+  position: relative;
+  z-index: 20;
+}
+.kxp-ms-booth__card {
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+@media (min-width: 640px) {
+  .kxp-ms-booth__card {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+.kxp-ms-booth__left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.kxp-ms-booth__ic {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-050);
+  color: var(--color-primary-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.kxp-ms-booth__ic svg {
+  width: 28px;
+  height: 28px;
+}
+.kxp-ms-booth__loc {
+  font-size: var(--fs-h3);
+  font-weight: 800;
+  color: var(--color-primary-700);
+}
+.kxp-products {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+@media (min-width: 768px) {
+  .kxp-products {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.kxp-product {
+  border: 1px solid var(--color-neutral-200);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-white);
+}
+.kxp-product__media {
+  aspect-ratio: 4 / 3;
+  background: var(--color-neutral-100);
+  background-size: cover;
+  background-position: center;
+}
+.kxp-product__body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.kxp-product h4 {
+  margin: 0;
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kxp-product p {
+  margin: 0;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kxp-gallery {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+@media (min-width: 768px) {
+  .kxp-gallery {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.kxp-gallery__item {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-neutral-100);
+  background-size: cover;
+  background-position: center;
+  border: 1px solid var(--color-neutral-200);
+}
+.kxp-cta-banner {
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  text-align: center;
+  padding: 64px 16px;
+}
+.kxp-cta-banner h2 {
+  font-size: clamp(22px, 4vw, 32px);
+  font-weight: 800;
+  max-width: 720px;
+  margin: 0 auto 24px;
+}
+
+/* ═══ P6 참가 문의 ═══ */
+.kxp-boothtypes {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+@media (min-width: 768px) {
+  .kxp-boothtypes {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.kxp-boothtype {
+  border: 1px solid var(--color-neutral-200);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-white);
+}
+.kxp-boothtype:nth-child(2) {
+  border-left-color: var(--color-ai-accent);
+}
+.kxp-boothtype:nth-child(3) {
+  border-left-color: var(--color-success);
+}
+.kxp-boothtype__media {
+  aspect-ratio: 16 / 9;
+  background: var(--color-neutral-100);
+  background-size: cover;
+  background-position: center;
+}
+.kxp-boothtype__body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.kxp-boothtype h3 {
+  margin: 0;
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kxp-boothtype p {
+  margin: 0;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kxp-boothtype__price {
+  margin-top: 4px;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-neutral-200);
+  font-weight: 800;
+  color: var(--color-primary-700);
+  font-variant-numeric: tabular-nums;
+}
+.kxp-inquiry {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 32px;
+}
+@media (min-width: 1024px) {
+  .kxp-inquiry {
+    grid-template-columns: 5fr 7fr;
+    gap: 48px;
+  }
+}
+.kxp-contacts {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+}
+.kxp-contact {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.kxp-contact__ic {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-050);
+  color: var(--color-primary-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.kxp-contact small {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-contact strong {
+  display: block;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kxp-login-hint {
+  background: var(--color-primary-050);
+  border: 1px solid var(--color-primary-100);
+  border-radius: var(--radius-lg);
+  padding: 18px;
+}
+.kxp-login-hint p {
+  margin: 0 0 6px;
+  font-size: var(--fs-body);
+  color: var(--color-primary-700);
+}
+.kxp-login-hint a {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 700;
+  color: var(--color-primary-600);
+}
+.kxp-formcard {
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  padding: 28px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.kxp-alert {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-body);
+}
+.kxp-alert--success {
+  background: #e6f4ee;
+  color: var(--color-success);
+  border: 1px solid #b6e2cf;
+}
+.kxp-alert--info {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+  border: 1px solid var(--color-primary-100);
+}
+
+/* ═══ P7 티켓 예매 ═══ */
+.kxp-ticket {
+  max-width: 1024px;
+  margin: 0 auto;
+  padding: 40px 16px 72px;
+}
+.kxp-ticket__banner {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  margin-bottom: 24px;
+}
+.kxp-ticket__poster {
+  width: 60px;
+  height: 78px;
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-100);
+  background-size: cover;
+  background-position: center;
+  flex-shrink: 0;
+}
+.kxp-ticket__banner h1 {
+  font-size: var(--fs-h2);
+  font-weight: 800;
+  color: var(--color-neutral-900);
+  margin: 0 0 6px;
+}
+.kxp-ticket__facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kxp-ticket__facts span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.kxp-ticket__steps {
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  border-bottom: 1px solid var(--color-neutral-200);
+  margin-bottom: 24px;
+  overflow-x: auto;
+}
+.kxp-ticket__step {
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  padding: 10px 16px;
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+}
+.kxp-ticket__step.is-active {
+  color: var(--color-primary-700);
+  border-bottom-color: var(--color-primary-600);
+  font-weight: 700;
+}
+.kxp-ticket__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  align-items: start;
+}
+@media (min-width: 1024px) {
+  .kxp-ticket__grid {
+    grid-template-columns: 7fr 3fr;
+  }
+}
+.kxp-ticket__main {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+.kxp-ticket__h2 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin: 0 0 16px;
+}
+.kxp-ticket__h2 svg {
+  color: var(--color-primary-600);
+}
+.kxp-tickrows {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.kxp-tickrow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-left: 4px solid var(--color-primary-600);
+  border-radius: var(--radius-sm);
+  padding: 18px 20px;
+}
+.kxp-tickrow--soldout {
+  opacity: 0.6;
+  border-left-color: var(--color-neutral-500);
+}
+.kxp-tickrow__info h3 {
+  margin: 0 0 4px;
+  font-size: var(--fs-body);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.kxp-tickrow__info p {
+  margin: 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-tickrow__price {
+  font-weight: 800;
+  color: var(--color-primary-700);
+  margin-top: 8px;
+  font-variant-numeric: tabular-nums;
+}
+.kxp-tickrow__price small {
+  font-weight: 400;
+  color: var(--color-neutral-500);
+}
+.kxp-stepper {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.kxp-stepper button {
+  width: 38px;
+  height: 38px;
+  background: var(--color-neutral-050);
+  border: none;
+  color: var(--color-neutral-700);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kxp-stepper button:hover:not(:disabled) {
+  background: var(--color-neutral-100);
+}
+.kxp-stepper button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.kxp-stepper span {
+  min-width: 44px;
+  text-align: center;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.kxp-pgnote {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  background: var(--color-neutral-050);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  line-height: 1.6;
+}
+.kxp-pgnote svg {
+  color: var(--color-neutral-500);
+  flex-shrink: 0;
+}
+.kxp-paychips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.kxp-paychip {
+  font-family: inherit;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  padding: 8px 18px;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kxp-paychip.is-active {
+  border-color: var(--color-primary-600);
+  color: var(--color-primary-700);
+  background: var(--color-primary-050);
+}
+.kxp-ticket__summary {
+  position: sticky;
+  top: 88px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  padding: 24px;
+}
+.kxp-ticket__summary h3 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin: 0 0 16px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--color-neutral-200);
+}
+.kxp-sumrow {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+  margin-bottom: 12px;
+}
+.kxp-sumrow--discount span:last-child {
+  color: var(--color-error);
+}
+.kxp-sumtotal {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 14px;
+  margin-top: 4px;
+  border-top: 1px solid var(--color-neutral-200);
+  margin-bottom: 20px;
+}
+.kxp-sumtotal small {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-sumtotal strong {
+  font-size: var(--fs-display);
+  font-weight: 800;
+  color: var(--color-primary-700);
+  font-variant-numeric: tabular-nums;
+}
+.kxp-loginbanner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+  background: var(--color-primary-050);
+  border: 1px solid var(--color-primary-100);
+  border-radius: var(--radius-lg);
+  padding: 12px;
+  font-size: var(--fs-body);
+  color: var(--color-primary-700);
+  margin-bottom: 24px;
+}
+.kxp-loginbanner a {
+  font-weight: 700;
+  text-decoration: underline;
+}
+/* 예매 완료(P7 step4) */
+.kxp-tikdone {
+  max-width: 520px;
+  margin: 0 auto;
+  text-align: center;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  padding: 40px 24px;
+}
+.kxp-tikdone__no {
+  font-size: var(--fs-h1);
+  font-weight: 800;
+  color: var(--color-primary-700);
+  font-family: var(--font-mono);
+  margin: 12px 0;
+}
+.kxp-tikdone__qr {
+  width: 160px;
+  height: 160px;
+  margin: 24px auto;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-neutral-900);
+}
+.kxp-tikdone__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 24px;
+}
+@media (min-width: 480px) {
+  .kxp-tikdone__actions {
+    flex-direction: row;
+    justify-content: center;
+  }
+}
+
+/* ═══ P7 manage 예매 확인·취소 ═══ */
+.kxp-manage {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 40px 16px 72px;
+}
+.kxp-manage__lookup {
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  box-shadow: var(--shadow-level2);
+  margin-bottom: 28px;
+}
+.kxp-manage__lookrow {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: stretch;
+}
+@media (min-width: 768px) {
+  .kxp-manage__lookrow {
+    flex-direction: row;
+    align-items: flex-end;
+  }
+  .kxp-manage__lookrow .kxp-field {
+    flex: 1;
+  }
+}
+.kxp-manage__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+@media (min-width: 1024px) {
+  .kxp-manage__grid {
+    grid-template-columns: 2fr 1fr;
+  }
+}
+.kxp-bookcard {
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-left: 4px solid var(--color-success);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+}
+.kxp-bookcard__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.kxp-bookcard__head h2 {
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+  margin: 8px 0 4px;
+}
+.kxp-bookcard__no {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-bookcard__no b {
+  font-family: var(--font-mono);
+  color: var(--color-neutral-700);
+}
+.kxp-bookcard__paid {
+  text-align: right;
+}
+.kxp-bookcard__paid small {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-bookcard__paid b {
+  font-family: var(--font-mono);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kxp-ticktable {
+  width: 100%;
+  border-collapse: collapse;
+  border-top: 1px solid var(--color-neutral-200);
+}
+.kxp-ticktable th {
+  text-align: left;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--color-neutral-500);
+  padding: 12px 8px;
+  background: var(--color-neutral-050);
+  border-bottom: 2px solid var(--color-neutral-200);
+}
+.kxp-ticktable td {
+  padding: 14px 8px;
+  border-top: 1px solid var(--color-neutral-200);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kxp-ticktable td:last-child,
+.kxp-ticktable th:last-child {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.kxp-ticktable__cell {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.kxp-ticktable__qr {
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-neutral-500);
+  flex-shrink: 0;
+}
+.kxp-booker {
+  margin-top: 20px;
+  padding: 16px;
+  background: var(--color-neutral-050);
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.kxp-booker__id {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.kxp-booker__id small {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kxp-booker__id b {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  font-weight: 600;
+}
+.kxp-refund {
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+}
+.kxp-refund h3 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin: 0 0 16px;
+}
+.kxp-refund__table {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+.kxp-refund__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--color-neutral-050);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+}
+.kxp-refund__row b {
+  font-weight: 700;
+}
+.kxp-refund__row--full b {
+  color: var(--color-success);
+}
+.kxp-refund__row--half b {
+  color: var(--color-warning);
+}
+.kxp-refund__row--none b {
+  color: var(--color-error);
+}
+.kxp-refund__est {
+  border-top: 1px solid var(--color-neutral-200);
+  padding-top: 16px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.kxp-refund__est strong {
+  font-size: var(--fs-h2);
+  color: var(--color-primary-700);
+  font-variant-numeric: tabular-nums;
+}
+.kxp-refund__note {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  text-align: center;
+  margin: 12px 0 0;
+}
+.kxp-ai-helper {
+  margin-top: 16px;
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  background: var(--color-ai-surface);
+  border: 1px solid #ddd6fe;
+  border-left: var(--accent-ai);
+  border-radius: var(--radius-lg);
+}
+.kxp-ai-helper svg {
+  color: var(--color-ai-accent);
+  flex-shrink: 0;
+}
+.kxp-ai-helper strong {
+  display: block;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  margin-bottom: 4px;
+}
+.kxp-ai-helper p {
+  margin: 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  line-height: 1.6;
+}
+
+/* 모달 */
+.kxp-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+.kxp-modal__scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(16, 24, 40, 0.5);
+  backdrop-filter: blur(4px);
+}
+.kxp-modal__box {
+  position: relative;
+  z-index: 1;
+  max-width: 420px;
+  width: 100%;
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  padding: 28px 24px;
+}
+.kxp-modal__box h3 {
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+  margin: 0 0 8px;
+}
+.kxp-modal__box p {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin: 0 0 20px;
+  line-height: 1.6;
+}
+.kxp-modal__actions {
+  display: flex;
+  gap: 12px;
+}
+.kxp-modal__actions .kxp-btn {
+  flex: 1;
+}
+
+/* 빈/로딩 상태 */
+.kxp-empty {
+  text-align: center;
+  padding: 56px 24px;
+  color: var(--color-neutral-500);
+  font-size: var(--fs-body);
+}
+
+/* 사전등록 고정 CTA (P2 모바일) */
+.kxp-fab {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 55;
+  box-shadow: var(--shadow-level2);
+}
+
+/* ===================================================================
+ * §3C 3-트랙 관문·서브홈 (SCR-T0~T3) — 상단 스위처 + 트랙 페이지 헬퍼
+ * 신규 토큰 0 (기존 color·radius·kxp-maxw 변수 재사용). WCAG AA.
+ * =================================================================== */
+
+/* -- 상단 3-트랙 스위처 바 (전 SCR-T·SCR-P 공통 크롬) -- */
+.kxp-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 60;
+  background: var(--color-primary-700, #004c86);
+  color: #fff;
+}
+.kxp-topbar__inner {
+  max-width: var(--kxp-maxw);
+  margin: 0 auto;
+  min-height: 44px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.kxp-wordmark {
+  font-size: 14px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  color: #fff;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.kxp-wordmark:hover {
+  color: #fff;
+  opacity: 0.9;
+}
+.kxp-tracktabs {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+.kxp-tracktab {
+  display: inline-flex;
+  align-items: center;
+  padding: 12px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.82);
+  border-bottom: 3px solid transparent;
+  white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s;
+}
+.kxp-tracktab:hover {
+  color: #fff;
+}
+.kxp-tracktab.is-active {
+  color: #fff;
+  font-weight: 800;
+  border-bottom-color: #fff;
+}
+.kxp-tracktab:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+  border-radius: 2px;
+}
+.kxp-topbar__utils {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-shrink: 0;
+  color: #fff;
+}
+.kxp-topbar__utils .kxp-lang__btn {
+  color: #fff;
+}
+.kxp-topbar__link {
+  background: none;
+  border: none;
+  padding: 4px 2px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  color: #fff;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.kxp-topbar__link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .kxp-topbar__inner {
+    flex-wrap: wrap;
+    padding: 6px 12px;
+    gap: 8px;
+  }
+  .kxp-wordmark {
+    order: 1;
+  }
+  .kxp-topbar__utils {
+    order: 2;
+    margin-left: auto;
+  }
+  .kxp-tracktabs {
+    order: 3;
+    flex-basis: 100%;
+  }
+  .kxp-tracktab {
+    flex: 1;
+    justify-content: center;
+    padding: 10px 6px;
+  }
+}
+
+/* -- 트랙 관문 대형 분기 카드 (SCR-T0) -- */
+.kxp-trackcards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+}
+.kxp-trackcard {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 28px 24px;
+  background: #fff;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg, 12px);
+  box-shadow: var(--shadow-level1);
+  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
+}
+.kxp-trackcard:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-level2);
+  border-color: var(--color-primary-300, #7cb8e0);
+}
+.kxp-trackcard--primary {
+  border-color: var(--color-primary-600, #0066b3);
+  border-width: 2px;
+}
+.kxp-trackcard__ic {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: var(--radius-md, 10px);
+  background: var(--color-primary-050, #eaf3fb);
+  color: var(--color-primary-600, #0066b3);
+}
+.kxp-trackcard__label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--color-primary-600, #0066b3);
+}
+.kxp-trackcard__title {
+  font-size: var(--fs-h3, 20px);
+  font-weight: 800;
+  color: var(--color-neutral-900, #101828);
+}
+.kxp-trackcard__desc {
+  font-size: var(--fs-body, 15px);
+  color: var(--color-neutral-600, #475467);
+  flex: 1;
+}
+.kxp-trackcard__cta {
+  margin-top: 8px;
+}
+
+/* -- 방문 가이드 허브 2x3 (SCR-T1) -- */
+.kxp-guidegrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+.kxp-guide {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  padding: 20px;
+  background: #fff;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md, 10px);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.kxp-guide:hover {
+  border-color: var(--color-primary-300, #7cb8e0);
+  box-shadow: var(--shadow-level1);
+}
+.kxp-guide__ic {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm, 8px);
+  background: var(--color-primary-050, #eaf3fb);
+  color: var(--color-primary-600, #0066b3);
+}
+.kxp-guide__title {
+  font-size: var(--fs-body, 15px);
+  font-weight: 700;
+  color: var(--color-neutral-900, #101828);
+  margin-bottom: 2px;
+}
+.kxp-guide__desc {
+  font-size: var(--fs-caption, 13px);
+  color: var(--color-neutral-600, #475467);
+}
+.kxp-guide__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 6px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--color-primary-600, #0066b3);
+}
+
+/* -- 비즈니스 2-분기 가치 카드 (SCR-T2) -- */
+.kxp-valuegrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+.kxp-value {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 28px;
+  background: #fff;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg, 12px);
+  box-shadow: var(--shadow-level1);
+}
+.kxp-value__head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.kxp-value__ic {
+  display: inline-flex;
+  width: 44px;
+  height: 44px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, 10px);
+  background: var(--color-primary-050, #eaf3fb);
+  color: var(--color-primary-600, #0066b3);
+}
+.kxp-value__title {
+  font-size: var(--fs-h3, 20px);
+  font-weight: 800;
+  color: var(--color-neutral-900, #101828);
+}
+.kxp-value__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kxp-value__li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--fs-body, 15px);
+  color: var(--color-neutral-700, #344054);
+}
+.kxp-value__li svg {
+  flex-shrink: 0;
+  color: var(--color-primary-600, #0066b3);
+}
+.kxp-aichip {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 7px;
+  font-size: 11px;
+  font-weight: 800;
+  border-radius: var(--radius-pill, 9999px);
+  background: #efeaff;
+  color: var(--color-ai-accent, #6d4aff);
+}
+
+/* -- 절차 스텝 (SCR-T2/T3) -- */
+.kxp-flow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kxp-flow__step {
+  flex: 1;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px;
+  background: var(--color-neutral-050, #f9fafb);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md, 10px);
+}
+.kxp-flow__no {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 9999px;
+  background: var(--color-primary-600, #0066b3);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 800;
+}
+.kxp-flow__title {
+  font-size: var(--fs-body, 15px);
+  font-weight: 700;
+  color: var(--color-neutral-900, #101828);
+}
+.kxp-flow__desc {
+  font-size: var(--fs-caption, 13px);
+  color: var(--color-neutral-600, #475467);
+}
+
+/* -- 안내/고지 카드 (SCR-T3 등록 게이트/안전) -- */
+.kxp-notice-card {
+  display: flex;
+  gap: 14px;
+  padding: 18px 20px;
+  border-radius: var(--radius-md, 10px);
+  border: 1px solid var(--color-neutral-200);
+  background: #fff;
+}
+.kxp-notice-card--warn {
+  border-color: #f5c98a;
+  background: #fffaf2;
+}
+.kxp-notice-card__ic {
+  flex-shrink: 0;
+  color: var(--color-warning, #b45309);
+}
+.kxp-notice-card__title {
+  font-size: var(--fs-body, 15px);
+  font-weight: 800;
+  color: var(--color-warning, #b45309);
+  margin-bottom: 4px;
+}
+.kxp-notice-card__body {
+  font-size: var(--fs-caption, 13px);
+  color: var(--color-neutral-700, #344054);
+}
+
+/* -- 공지/옥션 리스트 행 (SCR-T1/T3) -- */
+.kxp-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md, 10px);
+  overflow: hidden;
+  background: #fff;
+}
+.kxp-listrow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--color-neutral-100);
+  text-align: left;
+}
+.kxp-listrow:last-child {
+  border-bottom: none;
+}
+.kxp-listrow:hover {
+  background: var(--color-neutral-050, #f9fafb);
+}
+.kxp-listrow__main {
+  flex: 1;
+  min-width: 0;
+}
+.kxp-listrow__title {
+  font-size: var(--fs-body, 15px);
+  font-weight: 700;
+  color: var(--color-neutral-900, #101828);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kxp-listrow__meta {
+  font-size: var(--fs-caption, 13px);
+  color: var(--color-neutral-500, #667085);
+  margin-top: 2px;
+}
+.kxp-listrow__right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+/* 트랙 CTA 밴드 */
+.kxp-ctaband {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 28px;
+  border-radius: var(--radius-lg, 12px);
+  background: var(--color-primary-050, #eaf3fb);
+}
+.kxp-ctaband__text {
+  font-size: var(--fs-h3, 20px);
+  font-weight: 800;
+  color: var(--color-primary-800, #003a66);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SCR-T1 visitor 메인 v2.3.2 — AI 관람 도우미 홈페이지 격상 (신규 토큰 0)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── 1. 풀블리드 히어로 + AI 도우미 ── */
+.kxp-vhero {
+  position: relative;
+  isolation: isolate;
+  padding: 56px 20px 64px;
+  overflow: hidden;
+}
+.kxp-vhero__bg {
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background:
+    radial-gradient(1200px 600px at 80% -10%, rgba(109, 74, 255, 0.35) 0%, transparent 60%),
+    linear-gradient(135deg, #0b2a4a 0%, #0066b3 60%, #2f8fd6 120%);
+}
+.kxp-vhero__scrim {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(180deg, rgba(11, 20, 32, 0.35) 0%, rgba(11, 20, 32, 0.55) 100%);
+}
+.kxp-vhero__wm {
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  color: rgba(255, 255, 255, 0.55);
+  z-index: 0;
+  pointer-events: none;
+}
+.kxp-vhero__inner {
+  max-width: 860px;
+  margin: 0 auto;
+  text-align: center;
+  color: var(--color-white);
+}
+.kxp-vhero__title {
+  font-size: clamp(28px, 5.2vw, 46px);
+  font-weight: 800;
+  line-height: 1.18;
+  letter-spacing: -0.025em;
+  margin: 8px 0 12px;
+  color: var(--color-white);
+}
+.kxp-vhero__lead {
+  font-size: clamp(15px, 2.2vw, 19px);
+  color: rgba(255, 255, 255, 0.9);
+  margin: 0 0 28px;
+}
+.kxp-vhero__cta {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 24px;
+}
+@media (min-width: 768px) {
+  .kxp-vhero {
+    padding: 88px 24px 96px;
+  }
+}
+
+/* ── AI 관람 도우미(공용) ── */
+.kxp-ai {
+  max-width: 760px;
+  margin: 0 auto;
+  text-align: left;
+}
+.kxp-ai__bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 999px;
+  padding: 8px 8px 8px 14px;
+  box-shadow: var(--shadow-level2);
+}
+.kxp-ai__badge {
+  flex: none;
+  display: inline-flex;
+}
+.kxp-ai__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-size: 16px;
+  color: var(--color-neutral-900);
+  padding: 8px 4px;
+}
+.kxp-ai__input::placeholder {
+  color: var(--color-neutral-500);
+}
+.kxp-ai__send {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--color-ai-accent);
+  color: var(--color-white);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.kxp-ai__send:hover:not(:disabled) {
+  background: var(--color-ai-accent-strong);
+}
+.kxp-ai__send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.kxp-ai__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+  justify-content: center;
+}
+.kxp-ai__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 7px 13px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.14);
+  color: var(--color-white);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.kxp-ai__chip:hover {
+  background: rgba(255, 255, 255, 0.26);
+}
+.kxp-ai__chip--sm {
+  padding: 5px 11px;
+  font-size: 12px;
+  border-color: var(--color-neutral-200);
+  background: var(--color-neutral-050);
+  color: var(--color-primary-700);
+}
+.kxp-ai__chip--sm:hover {
+  background: var(--color-primary-050);
+}
+
+/* 답변 패널 — 라이트 카드(대비 확보) */
+.kxp-ai__panel {
+  margin-top: 16px;
+}
+.kxp-ai__thinking {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  font-size: 14px;
+  font-weight: 600;
+  box-shadow: var(--shadow-level2);
+}
+.kxp-ai__dots {
+  display: inline-flex;
+  gap: 4px;
+}
+.kxp-ai__dots i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-ai-accent);
+  animation: kxpDot 1s infinite ease-in-out;
+}
+.kxp-ai__dots i:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.kxp-ai__dots i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes kxpDot {
+  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-3px); }
+}
+.kxp-ai__answer {
+  text-align: left;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  padding: 18px 20px;
+  color: var(--color-neutral-800, #182230);
+}
+.kxp-ai__answer--error {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+}
+.kxp-ai__answerhead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+.kxp-ai__degraded {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-warning);
+  background: var(--color-warning-bg);
+  padding: 3px 9px;
+  border-radius: 999px;
+}
+.kxp-ai__text {
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--color-neutral-900);
+  margin: 0 0 12px;
+  white-space: pre-line;
+}
+.kxp-ai__muted {
+  color: var(--color-neutral-500);
+}
+.kxp-ai__cards {
+  display: grid;
+  gap: 14px;
+  margin: 6px 0 14px;
+}
+.kxp-ai__group {
+  border-top: 1px dashed var(--color-neutral-200);
+  padding-top: 12px;
+}
+.kxp-ai__grouptitle {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--color-neutral-700);
+  margin: 0 0 10px;
+}
+.kxp-ai__grouprows {
+  display: grid;
+  gap: 8px;
+}
+.kxp-ai__evcard {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+}
+.kxp-ai__evposter {
+  flex: none;
+  width: 44px;
+  height: 60px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: linear-gradient(135deg, #0066b3 0%, #004c86 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kxp-ai__evposter img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.kxp-ai__evfallback {
+  color: var(--color-white);
+  font-weight: 800;
+  font-size: 15px;
+}
+.kxp-ai__evbody {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.kxp-ai__evname {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--color-neutral-900);
+  margin-bottom: 4px;
+}
+.kxp-ai__evmeta,
+.kxp-ai__infodesc {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  font-size: 12.5px;
+  color: var(--color-neutral-500);
+  font-variant-numeric: tabular-nums;
+}
+.kxp-ai__evmeta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.kxp-ai__inforow {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+.kxp-ai__ic {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kxp-ai__infotitle {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--color-neutral-900);
+}
+.kxp-ai__followups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 6px 0 12px;
+}
+.kxp-ai__cites {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px solid var(--color-neutral-100);
+}
+.kxp-ai__citelabel {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-neutral-500);
+}
+.kxp-ai__cite {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--color-primary-700);
+  background: var(--color-primary-050);
+  padding: 3px 9px;
+  border-radius: 999px;
+}
+a.kxp-ai__cite:hover {
+  text-decoration: underline;
+}
+.kxp-ai__disclaimer {
+  margin: 12px 0 0;
+  font-size: 11.5px;
+  color: var(--color-neutral-500);
+}
+
+/* ── 2. AI 기능 쇼케이스 타일 ── */
+.kxp-aitiles {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+}
+@media (min-width: 640px) {
+  .kxp-aitiles {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .kxp-aitiles {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.kxp-aitile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  background: var(--color-ai-surface);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.kxp-aitile:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-level2);
+}
+.kxp-aitile__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.kxp-aitile__soon {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  padding: 2px 8px;
+  border-radius: 999px;
+}
+.kxp-aitile__ic {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: var(--color-white);
+  color: var(--color-ai-accent);
+  margin-top: 4px;
+}
+.kxp-aitile__title {
+  font-weight: 800;
+  font-size: 16px;
+  color: var(--color-neutral-900);
+}
+.kxp-aitile__desc {
+  font-size: 13.5px;
+  color: var(--color-neutral-500);
+  line-height: 1.5;
+}
+.kxp-aitile__go {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  color: var(--color-ai-accent);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.kxp-aitile:hover .kxp-aitile__go {
+  opacity: 1;
+}
+
+/* ── 3. AI 기획 브리핑 ── */
+.kxp-briefing__head {
+  align-items: center;
+}
+.kxp-briefing__toggle {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  background: var(--color-neutral-100);
+  border-radius: 999px;
+}
+.kxp-seg {
+  border: 0;
+  background: transparent;
+  padding: 8px 18px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kxp-seg.is-active {
+  background: var(--color-white);
+  color: var(--color-primary-700);
+  box-shadow: var(--shadow-level2);
+}
+.kxp-briefing__ai {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 14px 16px;
+  background: var(--color-ai-surface);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  margin-bottom: 18px;
+}
+.kxp-briefing__aitext {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  line-height: 1.55;
+}
+.kxp-briefing__timeline {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 6px;
+  align-items: end;
+  height: 180px;
+  padding: 12px;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+}
+.kxp-briefing__lane {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.kxp-briefing__count {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-neutral-500);
+  font-variant-numeric: tabular-nums;
+}
+.kxp-briefing__bar {
+  width: 60%;
+  min-height: 6px;
+  border-radius: 6px 6px 0 0;
+  background: var(--color-primary-600);
+  transition: background 0.15s ease;
+}
+.kxp-briefing__lane:hover .kxp-briefing__bar {
+  background: var(--color-primary-700);
+}
+.kxp-briefing__lane.is-peak .kxp-briefing__bar {
+  background: var(--color-ai-accent);
+}
+.kxp-briefing__mo {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  font-variant-numeric: tabular-nums;
+}
+.kxp-briefing__timeline--skel .kxp-briefing__bar {
+  background: var(--color-neutral-100);
+}
+.kxp-briefing__nav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.kxp-briefing__navbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: var(--border-card);
+  border-radius: 8px;
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kxp-briefing__navbtn:hover {
+  border-color: var(--color-primary-600);
+  color: var(--color-primary-600);
+}
+.kxp-briefing__navlabel {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--color-neutral-900);
+  font-variant-numeric: tabular-nums;
+}
+.kxp-briefing__list {
+  display: grid;
+  gap: 8px;
+}
+.kxp-briefing__row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+}
+.kxp-briefing__rowmain {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.kxp-briefing__rowname {
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--color-neutral-900);
+  margin-bottom: 5px;
+}
+.kxp-briefing__rowmeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 14px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--color-neutral-500);
+  font-variant-numeric: tabular-nums;
+}
+.kxp-briefing__rowmeta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* ── 5. 관심사 추천 칩 ── */
+.kxp-vinterests {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+.kxp-vinterests .kxp-ai__chip {
+  border-color: var(--color-neutral-200);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+}
+.kxp-vinterests .kxp-ai__chip.is-active {
+  border-color: var(--color-ai-accent);
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent);
+}
+.kxp-inlineai {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+/* ── 6. 교통 스트립 ── */
+.kxp-transtrip {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+@media (min-width: 640px) {
+  .kxp-transtrip {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .kxp-transtrip {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.kxp-transtrip__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--color-primary-050);
+  border-radius: var(--radius-lg);
+}
+.kxp-transtrip__ic {
+  flex: none;
+  display: inline-flex;
+  color: var(--color-primary-700);
+}
+.kxp-transtrip__name {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--color-neutral-900);
+}
+.kxp-transtrip__desc {
+  font-size: 12.5px;
+  color: var(--color-neutral-500);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 7. 여정 3-스텝 ── */
+.kxp-journey {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+}
+@media (min-width: 768px) {
+  .kxp-journey {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.kxp-journey__step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 22px;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+}
+.kxp-journey__num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  font-weight: 800;
+  font-size: 14px;
+}
+.kxp-journey__ic {
+  display: inline-flex;
+  color: var(--color-primary-700);
+}
+.kxp-journey__title {
+  font-weight: 800;
+  font-size: 16px;
+  color: var(--color-neutral-900);
+}
+.kxp-journey__desc {
+  font-size: 13.5px;
+  color: var(--color-neutral-500);
+  line-height: 1.5;
+  margin: 0;
+}
+.kxp-journey__arrow {
+  display: none;
+}
+@media (min-width: 768px) {
+  .kxp-journey__arrow {
+    display: inline-flex;
+    position: absolute;
+    right: -17px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    color: var(--color-neutral-300, #d0d5dd);
+  }
+}
+
+/* ── 9. 전시장 소개 밴드 ── */
+.kxp-venue {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  align-items: center;
+}
+@media (min-width: 900px) {
+  .kxp-venue {
+    grid-template-columns: 1fr 1.4fr;
+  }
+}
+.kxp-venue__intro {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+.kxp-venue__ic {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kxp-venue__stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin: 0;
+}
+@media (min-width: 640px) {
+  .kxp-venue__stats {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.kxp-venue__stat {
+  padding: 16px;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  text-align: center;
+}
+.kxp-venue__stat dt {
+  font-size: 12.5px;
+  color: var(--color-neutral-500);
+  margin-bottom: 6px;
+}
+.kxp-venue__stat dd {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--color-primary-700);
+}
+.kxp-tabnum {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/src/frontend/src/screens/public/publicApi.ts b/src/frontend/src/screens/public/publicApi.ts
new file mode 100644
index 0000000..5f34edb
--- /dev/null
+++ b/src/frontend/src/screens/public/publicApi.ts
@@ -0,0 +1,239 @@
+/*
+ * 공개 홍보 사이트(M12) 로컬 API 클라이언트 — 전 경로 비인증 공개.
+ * 공용 client 의 anonymous 옵션만 사용(client.ts 미수정). 응답은 ApiResponse.data 로 언랩됨.
+ * 근거: kintex-backend-dev com.zioinfo.kintex.publicsite + _workspace/port_public.md G1~G6.
+ */
+import { api } from '../../api/client';
+
+// ── 공개 카탈로그 shape (백엔드 PublicEventDto) ──────────────────────────────
+export interface PublicEvent {
+  id: string;
+  name: string;
+  startDate: string | null;
+  endDate: string | null;
+  status: string | null;
+  hallLabel: string | null;
+  boothCount: number | null;
+}
+
+export interface PublicFloorplanHall {
+  hallId: string;
+  label: string;
+  center: number | null;
+  primary: boolean;
+}
+
+export interface PublicFloorplanBooth {
+  boothNo: string | null;
+  companyName: string | null;
+  boothType: string | null;
+  status: 'available' | 'reserved' | string;
+  cx: number | null;
+  cy: number | null;
+  hallLabel: string | null;
+}
+
+export interface PublicFloorplan {
+  eventId: string;
+  eventName: string;
+  halls: PublicFloorplanHall[];
+  booths: PublicFloorplanBooth[];
+}
+
+// ── 공개 공지 (M17 CMS · GET /api/public/cms/NOTICE — 게시분만) ──────────────
+export interface PublicNotice {
+  id: string;
+  title: string;
+  body?: string | null;
+  publishedAt?: string | null;
+  createdAt?: string | null;
+}
+
+// ── 관람 안내 · AI 도우미 (백엔드 PublicGuideDtos / VisitorAssistantDtos, V43 라이브) ──
+/** 연/월 캘린더 행사 카드 (v_event_calendar). lifecycle ∈ UPCOMING|ONGOING|ENDED|UNKNOWN. */
+export interface PublicCalendarEvent {
+  id: string;
+  name: string;
+  category: string | null;
+  hallLabel: string | null;
+  posterUrl: string | null;
+  startDate: string | null;
+  endDate: string | null;
+  eventYear: number | null;
+  eventMonth: number | null;
+  lifecycle: string | null;
+}
+
+/** 월별 전시 건수 요약 (v_event_monthly_summary) — 연간 기획 요약 근거. */
+export interface MonthlySummary {
+  eventYear: number | null;
+  eventMonth: number | null;
+  eventCount: number | null;
+}
+
+/** 관람객 방문가이드 항목 (visitor_guide). */
+export interface VisitorGuide {
+  id: string;
+  category: string | null;
+  title: string | null;
+  body: string | null;
+  summary: string | null;
+  displayOrder: number | null;
+  sourceUrl: string | null;
+}
+
+/** 교통수단 구조화 항목 (transport_info). */
+export interface TransportInfo {
+  id: string;
+  mode: string | null;
+  lineName: string | null;
+  route: string | null;
+  fromPoint: string | null;
+  travelTime: string | null;
+  note: string | null;
+  displayOrder: number | null;
+  sourceUrl: string | null;
+}
+
+/** AI 관람 도우미 인용 출처 — type ∈ EVENT|TRANSPORT|GUIDE. */
+export interface AssistantCitation {
+  type: string;
+  id: string;
+  title: string;
+  sourceUrl: string | null;
+}
+
+/**
+ * AI 관람 도우미 응답 (POST /api/public/ai/visitor-assistant).
+ * grounded=false → DB 근거를 못 찾음(정직한 "찾지 못함"). provider ∈ claude|ollama|search|none.
+ */
+export interface AssistantResult {
+  question: string;
+  answer: string;
+  events: PublicCalendarEvent[];
+  transport: TransportInfo[];
+  guide: VisitorGuide[];
+  citations: AssistantCitation[];
+  grounded: boolean;
+  provider: string;
+  degraded: boolean;
+}
+
+// ── 문의 접수 (백엔드 InquiryRequest / InquiryReceiptDto) ────────────────────
+export interface InquiryPayload {
+  inquiryType?: string;
+  company?: string;
+  contactName?: string;
+  email?: string;
+  phone?: string;
+  scale?: string;
+  hallPref?: string;
+  message?: string;
+  agreePrivacy: boolean;
+  agreeMarketing?: boolean;
+}
+
+export interface InquiryReceipt {
+  receiptNo: string;
+  status: string;
+}
+
+// ── 관람객 사전등록 (visitor 팀 구현 중 — 계약만 전제) ──────────────────────
+export interface RegistrationPayload {
+  name: string;
+  phone: string;
+  email: string;
+  visitorType: string;
+  agreePrivacy: boolean;
+  agreeMarketing?: boolean;
+}
+
+export interface RegistrationReceipt {
+  registrationId: string;
+  badgeCode: string;
+}
+
+// ── 참가업체 마이크로사이트 (cms 팀 계약 — 관용적 옵셔널) ────────────────────
+export interface PublicMicrosite {
+  exhibitorId?: string;
+  brandName?: string;
+  tagline?: string;
+  boothNo?: string;
+  hallLabel?: string;
+  products?: Array<{ tag?: string; title?: string; description?: string }>;
+  renderShots?: Array<{ label?: string; imageUrl?: string }>;
+  [key: string]: unknown;
+}
+
+const opt = { anonymous: true } as const;
+
+function qs(params: Record<string, string | undefined>): string {
+  const sp = new URLSearchParams();
+  Object.entries(params).forEach(([k, v]) => {
+    if (v != null && v !== '') sp.set(k, v);
+  });
+  const s = sp.toString();
+  return s ? `?${s}` : '';
+}
+
+export const publicApi = {
+  listEvents: (year?: string, q?: string) =>
+    api.get<PublicEvent[]>(`/api/public/events${qs({ year, q })}`, opt),
+
+  getEvent: (eventId: string) =>
+    api.get<PublicEvent>(`/api/public/events/${encodeURIComponent(eventId)}`, opt),
+
+  getFloorplan: (eventId: string) =>
+    api.get<PublicFloorplan>(`/api/public/events/${encodeURIComponent(eventId)}/floorplan`, opt),
+
+  submitInquiry: (payload: InquiryPayload) =>
+    api.post<InquiryReceipt>('/api/public/inquiries', payload, opt),
+
+  /** visitor 팀 계약 — 백엔드 미배포 시 에러(3상태 토스트로 처리). */
+  register: (eventId: string, payload: RegistrationPayload) =>
+    api.post<RegistrationReceipt>(
+      `/api/public/events/${encodeURIComponent(eventId)}/register`,
+      payload,
+      opt,
+    ),
+
+  /** cms 팀 계약 — shape 확정 전 관용 처리. */
+  getMicrosite: (exhibitorId: string) =>
+    api.get<PublicMicrosite>(`/api/public/microsites/${encodeURIComponent(exhibitorId)}`, opt),
+
+  /** M17 공개 공지(게시분) — 최근순. 백엔드 미배포 시 에러(빈/안내로 처리). */
+  listNotices: (limit = 5) =>
+    api.get<PublicNotice[]>(`/api/public/cms/NOTICE${qs({ limit: String(limit) })}`, opt),
+
+  // ── 관람 안내 · AI 도우미 (V43 라이브) ──────────────────────────────────────
+  /** AI 관람 도우미 — 자연어 질문을 크롤 적재 DB 근거로 답변(비인증). */
+  askVisitorAssistant: (question: string) =>
+    api.post<AssistantResult>('/api/public/ai/visitor-assistant', { question }, opt),
+
+  /** 연/월/상태 캘린더(v_event_calendar). lifecycle ∈ UPCOMING|ONGOING|ENDED. */
+  listCalendar: (params: { year?: number; month?: number; lifecycle?: string; limit?: number } = {}) =>
+    api.get<PublicCalendarEvent[]>(
+      `/api/public/events/calendar${qs({
+        year: params.year != null ? String(params.year) : undefined,
+        month: params.month != null ? String(params.month) : undefined,
+        lifecycle: params.lifecycle,
+        limit: params.limit != null ? String(params.limit) : undefined,
+      })}`,
+      opt,
+    ),
+
+  /** 월별 전시 건수 집계(v_event_monthly_summary) — 연간 기획 요약. */
+  listMonthlySummary: (year?: number) =>
+    api.get<MonthlySummary[]>(
+      `/api/public/events/monthly-summary${qs({ year: year != null ? String(year) : undefined })}`,
+      opt,
+    ),
+
+  /** 방문가이드(교통/주차/입장/편의/접근성/개요). */
+  listVisitorGuide: (category?: string) =>
+    api.get<VisitorGuide[]>(`/api/public/visitor-guide${qs({ category })}`, opt),
+
+  /** 교통수단 구조화(SUBWAY/GTX/BUS/CAR/AIRPORT/KTX). */
+  listTransport: (mode?: string) =>
+    api.get<TransportInfo[]>(`/api/public/transport${qs({ mode })}`, opt),
+};
diff --git a/src/frontend/src/screens/public/publicFormat.ts b/src/frontend/src/screens/public/publicFormat.ts
new file mode 100644
index 0000000..34a379c
--- /dev/null
+++ b/src/frontend/src/screens/public/publicFormat.ts
@@ -0,0 +1,57 @@
+/*
+ * 공개 사이트 표시 포맷 헬퍼 — 날짜·D-day·상태 파생(프론트 재계산 규칙).
+ * status 는 event.status DB 원문 대신 날짜 기준으로 재판정한다(EventCatalogMapper 규약과 동일).
+ */
+export type PublicStatus = 'ongoing' | 'upcoming' | 'ended';
+
+function parse(d: string | null | undefined): Date | null {
+  if (!d) return null;
+  const dt = new Date(`${d}T00:00:00`);
+  return Number.isNaN(dt.getTime()) ? null : dt;
+}
+
+function today0(): Date {
+  const t = new Date();
+  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
+}
+
+/** 날짜 기준 상태 재계산 — ended=종료<오늘, ongoing=시작≤오늘≤종료, upcoming=시작>오늘. */
+export function deriveStatus(startDate: string | null, endDate: string | null): PublicStatus {
+  const s = parse(startDate);
+  const e = parse(endDate) ?? s;
+  const now = today0();
+  if (e && e < now) return 'ended';
+  if (s && s <= now && (e ?? s) >= now) return 'ongoing';
+  return 'upcoming';
+}
+
+/** 시작일까지 남은 일수(D-day). 과거면 0 이하. */
+export function dday(startDate: string | null): number {
+  const s = parse(startDate);
+  if (!s) return 0;
+  const ms = s.getTime() - today0().getTime();
+  return Math.round(ms / 86_400_000);
+}
+
+/** "2026.08.18 – 08.21"(같은 해면 뒤는 월·일만). */
+export function formatRange(startDate: string | null, endDate: string | null): string {
+  const s = parse(startDate);
+  const e = parse(endDate);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  if (!s) return '일정 미정';
+  const sStr = `${s.getFullYear()}.${pad(s.getMonth() + 1)}.${pad(s.getDate())}`;
+  if (!e) return sStr;
+  const sameYear = e.getFullYear() === s.getFullYear();
+  const eStr = sameYear
+    ? `${pad(e.getMonth() + 1)}.${pad(e.getDate())}`
+    : `${e.getFullYear()}.${pad(e.getMonth() + 1)}.${pad(e.getDate())}`;
+  return `${sStr} – ${eStr}`;
+}
+
+/** 사용자 노출용 오류 메시지(민감정보 없음). */
+export function errorMessage(e: unknown): string {
+  if (e && typeof e === 'object' && 'message' in e && typeof (e as { message: unknown }).message === 'string') {
+    return (e as { message: string }).message;
+  }
+  return '요청을 처리하지 못했습니다. 잠시 후 다시 시도해 주세요.';
+}
diff --git a/src/frontend/src/screens/public/publicIcons.tsx b/src/frontend/src/screens/public/publicIcons.tsx
new file mode 100644
index 0000000..75a3c75
--- /dev/null
+++ b/src/frontend/src/screens/public/publicIcons.tsx
@@ -0,0 +1,314 @@
+/*
+ * 공개 홍보 사이트 전용 인라인 SVG 아이콘 (stroke 스타일, 이모지 금지).
+ * design.md §1 톤. fill:none·stroke:currentColor 원칙.
+ */
+import type { SVGProps } from 'react';
+
+type IconProps = SVGProps<SVGSVGElement>;
+
+function base(props: IconProps) {
+  return {
+    width: 20,
+    height: 20,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round' as const,
+    strokeLinejoin: 'round' as const,
+    'aria-hidden': true,
+    focusable: false,
+    ...props,
+  };
+}
+
+export const IconSearch = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.5-3.5" />
+  </svg>
+);
+
+export const IconGlobe = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18" />
+  </svg>
+);
+
+export const IconCalendar = (p: IconProps) => (
+  <svg {...base(p)}>
+    <rect x="3" y="4" width="18" height="17" rx="2" />
+    <path d="M3 9h18M8 2v4M16 2v4" />
+  </svg>
+);
+
+export const IconPin = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11Z" />
+    <circle cx="12" cy="10" r="2.5" />
+  </svg>
+);
+
+export const IconArrowRight = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M5 12h14M13 6l6 6-6 6" />
+  </svg>
+);
+
+export const IconChevronRight = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="m9 6 6 6-6 6" />
+  </svg>
+);
+
+export const IconChevronDown = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+export const IconClose = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M6 6l12 12M18 6 6 18" />
+  </svg>
+);
+
+export const IconCheck = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="m5 13 4 4L19 7" />
+  </svg>
+);
+
+export const IconCheckCircle = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="m8.5 12 2.5 2.5 4.5-5" />
+  </svg>
+);
+
+export const IconPlus = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+);
+
+export const IconMinus = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M5 12h14" />
+  </svg>
+);
+
+export const IconTrain = (p: IconProps) => (
+  <svg {...base(p)}>
+    <rect x="5" y="3" width="14" height="13" rx="3" />
+    <path d="M5 10h14M9 20l-2 2M15 20l2 2" />
+    <circle cx="9" cy="13" r="0.6" />
+    <circle cx="15" cy="13" r="0.6" />
+  </svg>
+);
+
+export const IconBus = (p: IconProps) => (
+  <svg {...base(p)}>
+    <rect x="4" y="4" width="16" height="13" rx="2" />
+    <path d="M4 11h16M8 21v-2M16 21v-2" />
+    <circle cx="8" cy="14" r="0.6" />
+    <circle cx="16" cy="14" r="0.6" />
+  </svg>
+);
+
+export const IconParking = (p: IconProps) => (
+  <svg {...base(p)}>
+    <rect x="4" y="4" width="16" height="16" rx="3" />
+    <path d="M9 16V8h3.5a2.5 2.5 0 0 1 0 5H9" />
+  </svg>
+);
+
+export const IconShuttle = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M3 13l2-6a2 2 0 0 1 2-1.5h8A2 2 0 0 1 19 7l2 6v4h-2M3 17v-4M3 17h14" />
+    <circle cx="7" cy="17" r="1.5" />
+    <circle cx="17" cy="17" r="1.5" />
+  </svg>
+);
+
+export const IconMap = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z" />
+    <path d="M9 4v14M15 6v14" />
+  </svg>
+);
+
+export const IconMenu = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M4 6h16M4 12h16M4 18h16" />
+  </svg>
+);
+
+export const IconPerson = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="12" cy="8" r="3.5" />
+    <path d="M5 20a7 7 0 0 1 14 0" />
+  </svg>
+);
+
+export const IconBuyer = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M5 7h14l-1.5 10.5a2 2 0 0 1-2 1.5h-7a2 2 0 0 1-2-1.5L5 7Z" />
+    <path d="M9 7a3 3 0 0 1 6 0" />
+  </svg>
+);
+
+export const IconVip = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="m12 3 2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4L4.2 8.7l5.4-.8L12 3Z" />
+  </svg>
+);
+
+export const IconSparkles = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M12 4v6M9 7h6" opacity="0" />
+    <path d="M12 3l1.5 4L18 8.5 13.5 10 12 14l-1.5-4L6 8.5 10.5 7 12 3Z" />
+    <path d="M18 14l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8.8-2Z" />
+  </svg>
+);
+
+export const IconQr = (p: IconProps) => (
+  <svg {...base(p)}>
+    <rect x="4" y="4" width="6" height="6" rx="1" />
+    <rect x="14" y="4" width="6" height="6" rx="1" />
+    <rect x="4" y="14" width="6" height="6" rx="1" />
+    <path d="M14 14h3v3M20 14v6M14 20h3" />
+  </svg>
+);
+
+export const IconInfo = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 11v5M12 8h.01" />
+  </svg>
+);
+
+export const IconSend = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M21 3 3 10.5l7 2.5 2.5 7L21 3Z" />
+    <path d="M10 13.5 21 3" />
+  </svg>
+);
+
+export const IconPhone = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M5 3h3l1.5 5-2 1.5a12 12 0 0 0 5 5l1.5-2 5 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2Z" />
+  </svg>
+);
+
+export const IconMail = (p: IconProps) => (
+  <svg {...base(p)}>
+    <rect x="3" y="5" width="18" height="14" rx="2" />
+    <path d="m3 7 9 6 9-6" />
+  </svg>
+);
+
+export const IconTicket = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M4 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1-2 2H6a2 2 0 0 1-2-2 2 2 0 0 0 0-4Z" />
+    <path d="M14 6v12" strokeDasharray="2 2" />
+  </svg>
+);
+
+export const IconShield = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M12 3 5 6v5c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6l-7-3Z" />
+    <path d="m9 12 2 2 4-4" />
+  </svg>
+);
+
+export const IconShare = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="6" cy="12" r="2.5" />
+    <circle cx="18" cy="6" r="2.5" />
+    <circle cx="18" cy="18" r="2.5" />
+    <path d="m8 11 8-4M8 13l8 4" />
+  </svg>
+);
+
+export const IconChat = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M4 5h16v10H9l-4 4V5Z" />
+  </svg>
+);
+
+export const IconLink = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M9 15 15 9" />
+    <path d="M8 12H6a3 3 0 0 1 0-6h3M16 12h2a3 3 0 0 1 0 6h-3" />
+  </svg>
+);
+
+export const IconZoomIn = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.5-3.5M11 8v6M8 11h6" />
+  </svg>
+);
+
+export const IconZoomOut = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.5-3.5M8 11h6" />
+  </svg>
+);
+
+export const IconReset = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M20 12a8 8 0 1 1-2.3-5.6M20 4v3.5h-3.5" />
+  </svg>
+);
+
+export const IconTarget = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="12" cy="12" r="8" />
+    <circle cx="12" cy="12" r="3" />
+    <path d="M12 2v3M12 19v3M2 12h3M19 12h3" />
+  </svg>
+);
+
+export const IconBell = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z" />
+    <path d="M10 19a2 2 0 0 0 4 0" />
+  </svg>
+);
+
+export const IconFactory = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M3 21V10l6 4V10l6 4V6l6 4v11H3Z" />
+    <path d="M7 21v-4M13 21v-4M18 21v-4" />
+  </svg>
+);
+
+export const IconRobot = (p: IconProps) => (
+  <svg {...base(p)}>
+    <rect x="5" y="8" width="14" height="11" rx="2" />
+    <path d="M12 4v4M8 13h.01M16 13h.01M9 16h6" />
+    <circle cx="12" cy="4" r="1" />
+  </svg>
+);
+
+export const IconCloud = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1.5A3.5 3.5 0 0 1 18 18H7Z" />
+  </svg>
+);
+
+export const IconLeaf = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M4 20c0-9 7-15 16-15 0 9-6 15-15 15M8 16c2-4 5-6 9-7" />
+  </svg>
+);
+
+export const IconVenue = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M3 21h18M5 21V9l7-5 7 5v12M9 21v-6h6v6" />
+  </svg>
+);
diff --git a/src/frontend/src/screens/public/trackShared.tsx b/src/frontend/src/screens/public/trackShared.tsx
new file mode 100644
index 0000000..cdf09af
--- /dev/null
+++ b/src/frontend/src/screens/public/trackShared.tsx
@@ -0,0 +1,137 @@
+/*
+ * §3C 3-트랙(SCR-T0~T3) 공용 헬퍼 — 행사 로드 훅 + 행사 카드 그리드.
+ * 기존 SCR-P1(PublicHomePage) 컨벤션·publicApi·publicFormat·publicIcons 재사용.
+ */
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { publicApi, type PublicEvent } from './publicApi';
+import { deriveStatus, dday, formatRange, errorMessage } from './publicFormat';
+import { IconCalendar, IconPin } from './publicIcons';
+
+export function ddayClass(d: number) {
+  if (d <= 3) return 'kxp-dday kxp-dday--soon';
+  if (d <= 7) return 'kxp-dday kxp-dday--warn';
+  return 'kxp-dday';
+}
+
+/** 진행중·예정 우선 정렬 후 상위 N건. */
+export function pickFeatured(events: PublicEvent[], max = 8): PublicEvent[] {
+  const rank = (e: PublicEvent) => {
+    const s = deriveStatus(e.startDate, e.endDate);
+    return s === 'ongoing' ? 0 : s === 'upcoming' ? 1 : 2;
+  };
+  return [...events].sort((a, b) => rank(a) - rank(b)).slice(0, max);
+}
+
+export interface EventsState {
+  events: PublicEvent[];
+  loading: boolean;
+  error: string;
+}
+
+/** 공개 행사 카탈로그 로드(비인증). */
+export function usePublicEvents(max = 8): EventsState {
+  const [events, setEvents] = useState<PublicEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    publicApi
+      .listEvents()
+      .then((list) => {
+        if (alive) {
+          setEvents(pickFeatured(list, max));
+          setError('');
+        }
+      })
+      .catch((e) => alive && setError(errorMessage(e)))
+      .finally(() => alive && setLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [max]);
+
+  return { events, loading, error };
+}
+
+/** 행사 카드 그리드 — SCR-P1 카드 자산 재사용. 빈/로딩/에러 인라인 처리. */
+export function EventGrid({ state }: { state: EventsState }) {
+  const { t } = useTranslation();
+  const { events, loading, error } = state;
+
+  if (loading) {
+    return (
+      <p className="kxp-empty" role="status">
+        {t('home.loading')}
+      </p>
+    );
+  }
+  if (error) {
+    return (
+      <p className="kxp-empty" role="alert" style={{ color: 'var(--color-error)' }}>
+        {error}
+      </p>
+    );
+  }
+  if (events.length === 0) {
+    return <p className="kxp-empty">{t('home.empty')}</p>;
+  }
+
+  return (
+    <div className="kxp-eventgrid">
+      {events.map((ev) => {
+        const status = deriveStatus(ev.startDate, ev.endDate);
+        const d = dday(ev.startDate);
+        return (
+          <article key={ev.id} className="kxp-ecard">
+            <div className="kxp-ecard__media">
+              <div
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  background: 'linear-gradient(135deg, #0066b3 0%, #004c86 100%)',
+                }}
+                aria-hidden
+              />
+              {status === 'ongoing' ? (
+                <span className="kxp-ecard__botleft kxp-dday kxp-dday--soon">{t('home.ongoing')}</span>
+              ) : status === 'ended' ? (
+                <span className="kxp-ecard__botleft kxp-dday">{t('home.ended')}</span>
+              ) : (
+                <span className={`kxp-ecard__botleft ${ddayClass(d)}`}>
+                  {d === 0 ? t('home.ddayZero') : t('home.dday', { n: d })}
+                </span>
+              )}
+            </div>
+            <div className="kxp-ecard__body">
+              <div className="kxp-ecard__tags">
+                <span className="kxp-tag">{t('home.tagExhibition')}</span>
+                {ev.boothCount != null && ev.boothCount > 0 && (
+                  <span className="kxp-tag">{t('home.booth', { count: ev.boothCount })}</span>
+                )}
+              </div>
+              <h3 className="kxp-ecard__title">{ev.name}</h3>
+              <div className="kxp-ecard__meta">
+                <span>
+                  <IconCalendar width={18} height={18} /> {formatRange(ev.startDate, ev.endDate)}
+                </span>
+                <span>
+                  <IconPin width={18} height={18} /> {ev.hallLabel ?? t('home.hallTbd')}
+                </span>
+              </div>
+              <Link
+                className="kxp-btn kxp-btn--primary kxp-btn--block"
+                to={`/public/events/${encodeURIComponent(ev.id)}/register`}
+              >
+                {t('home.register')}
+              </Link>
+            </div>
+          </article>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/schedule/ExhibitionSchedulePage.tsx b/src/frontend/src/screens/schedule/ExhibitionSchedulePage.tsx
new file mode 100644
index 0000000..9d58092
--- /dev/null
+++ b/src/frontend/src/screens/schedule/ExhibitionSchedulePage.tsx
@@ -0,0 +1,505 @@
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { ApiRequestError } from '../../api/client';
+import { exhibitionApi } from '../../api/endpoints';
+import type { ExhibitionDto } from '../../api/types';
+import { StatusBadge } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import {
+  IconCalendar,
+  IconGrid,
+  IconUsers,
+} from '../../components/ui/icons';
+import {
+  ALL_EVENTS,
+  CATEGORY_LABEL,
+  EVENT_YEARS,
+  STATUS_LABEL,
+  eventDaysFor,
+  hallUtilizationFor,
+  type EventCategory,
+  type EventStatus,
+  type HallUtilRow,
+  type ScheduleEvent,
+} from './sampleSchedule';
+import KxCalendarView, { type KxCalendarItem } from './KxCalendarView';
+import { fetchHolidaySet } from '../admin/holidayApi';
+import { scheduleApi } from './scheduleApi';
+import { hallAssignApi } from '../hallassign/hallAssignApi';
+import './schedule.css';
+
+/** 카테고리별 막대/칩 강조색(schedule.css chip 색과 정렬). */
+const CAT_COLOR: Record<string, string> = {
+  exhibition: '#0066b3',
+  culture: '#b83268',
+  trade: '#9a6b1f',
+  tech: '#1f7a54',
+};
+
+/** ScheduleEvent → KxCalendarItem(기간 막대·상태 색점). */
+function toCalItem(e: ScheduleEvent): KxCalendarItem {
+  return {
+    id: String(e.id),
+    startDate: e.start,
+    endDate: e.end,
+    title: e.title,
+    color: CAT_COLOR[e.category] ?? '#0066b3',
+    statusCd: e.status === 'ongoing' ? 'ONGOING' : e.status === 'upcoming' ? 'UPCOMING' : 'DONE',
+  };
+}
+
+/** 집계 API 실패 시 크롤링 샘플로 강등할지 판정(NETWORK/NOT_FOUND/NOT_IMPLEMENTED). */
+function isDegradable(err: unknown): boolean {
+  return (
+    err instanceof ApiRequestError &&
+    (err.code === 'NETWORK' || err.code === 'NOT_FOUND' || err.code === 'NOT_IMPLEMENTED')
+  );
+}
+
+const MOCK = `${import.meta.env.BASE_URL}mock/organizer_dashboard`;
+const THUMBS = [`${MOCK}/img1.jpg`, `${MOCK}/img2.jpg`, `${MOCK}/img3.jpg`];
+const TODAY = new Date(2026, 6, 11); // 2026-07-11 (currentDate)
+const TODAY_YMD = '2026-07-11';
+
+const KNOWN_CATEGORIES = new Set<EventCategory>(['exhibition', 'culture', 'trade', 'tech']);
+
+/** 날짜 기준 상태 재계산 — DB status 원문 대신 TODAY 기준 진행/예정/종료로 정규화. */
+function statusFromDates(start: string, end: string): EventStatus {
+  if (end < TODAY_YMD) return 'ended';
+  if (start > TODAY_YMD) return 'upcoming';
+  return 'ongoing';
+}
+
+/** "2026-08-11","2026-08-14" → "2026.08.11–08.14" */
+function periodLabel(start: string, end: string): string {
+  const s = start.split('-').join('.');
+  const e = end.split('-').join('.');
+  return e.startsWith(s.slice(0, 5)) ? `${s}–${e.slice(5)}` : `${s}–${e}`;
+}
+
+/** 실 API ExhibitionDto → 화면 ScheduleEvent 매핑. DB 미포함 필드(카테고리·홀·인원)는 기본값. */
+function toScheduleEvent(e: ExhibitionDto, i: number): ScheduleEvent {
+  const category = (KNOWN_CATEGORIES.has(e.category as EventCategory)
+    ? (e.category as EventCategory)
+    : 'exhibition') as EventCategory;
+  return {
+    id: e.id,
+    title: e.name,
+    category,
+    status: statusFromDates(e.startDate, e.endDate),
+    period: periodLabel(e.startDate, e.endDate),
+    start: e.startDate,
+    end: e.endDate,
+    halls: e.hallLabel ?? '홀 미배정',
+    estVisitors: e.estVisitors != null ? `${e.estVisitors.toLocaleString()}명` : '집계 대기',
+    thumbIdx: i % THUMBS.length,
+  };
+}
+
+/** 홀 필터 매칭 — halls 문자열("홀 4, 5A"·"제2전시장 홀7")에서 홀 번호만 추출해 전시장 범위("1-5"/"6-10")와 대조. "제N전시장"의 N·"7A-1"의 -1 오매칭 방지. */
+function matchesHall(halls: string, range: string): boolean {
+  if (range === 'all') return true;
+  const [lo, hi] = range.split('-').map(Number);
+  const cleaned = halls
+    .replace(/제\s*\d+\s*전시장/g, '')
+    .replace(/(\d+[A-C]?)-\d+/g, '$1');
+  const nums = (cleaned.match(/\d+/g) ?? []).map(Number).filter((n) => n >= 1 && n <= 10);
+  return nums.some((n) => n >= lo && n <= hi);
+}
+
+/*
+ * SCR-15 전시 일정 관리 (M1·M6). Stitch exhibition_schedule 이식.
+ * - 좌 2/3 행사 리스트(또는 WISE 스타일 월 캘린더) + 우 1/3 미니 캘린더 · 홀 가동률.
+ * - 폴백 데이터: kintex.com 크롤링 10년치(2016~2026, 1,098건) — sampleSchedule.ALL_EVENTS.
+ * - 캘린더 뷰는 WISE(UIWS) ScheduleCalendar 월 그리드 패턴 참조(외부 라이브러리 미사용,
+ *   이전/다음/오늘 툴바·요일 헤더·당일 강조·일자별 이벤트 칩).
+ * ★ 경계면: 행사 목록은 인증 workspaces(실 원천) 우선, 없으면 크롤링 데이터 폴백.
+ */
+export function ExhibitionSchedulePage() {
+  const { t } = useTranslation();
+  const [view, setView] = useState<'list' | 'calendar'>('list');
+  const [year, setYear] = useState('2026');
+  const [hall, setHall] = useState('all');
+  const [category, setCategory] = useState('all');
+  const [status, setStatus] = useState('all');
+  // 우측 미니 캘린더·홀 가동률 공유 월 커서
+  const [asideCursor, setAsideCursor] = useState(new Date(2026, 6, 1)); // 2026년 7월
+
+  /*
+   * 실 원천: `GET /api/events` 전 홀 10년치 카탈로그(ExhibitionDto[]) — event 테이블(V10 시드).
+   * 백엔드 미구현(NOT_IMPLEMENTED/NOT_FOUND)·네트워크 오류 시에만 크롤링 샘플(ALL_EVENTS)로 폴백한다.
+   * ALL_EVENTS는 백엔드 V10 seed_exhibitions_10yr 와 동일 원천(kintex.com 크롤링)이라 shape·건수 정합.
+   */
+  const query = useQuery<{ events: ScheduleEvent[]; degraded: boolean }>({
+    queryKey: ['exhibitions'],
+    queryFn: async () => {
+      try {
+        const rows = await exhibitionApi.list();
+        return { events: rows.map(toScheduleEvent), degraded: false };
+      } catch (err) {
+        if (
+          err instanceof ApiRequestError &&
+          (err.code === 'NOT_IMPLEMENTED' || err.code === 'NOT_FOUND' || err.code === 'NETWORK')
+        ) {
+          return { events: ALL_EVENTS, degraded: true };
+        }
+        throw err;
+      }
+    },
+  });
+
+  const events = query.data?.events ?? [];
+  const degraded = query.data?.degraded ?? false;
+
+  const filtered = useMemo(
+    () =>
+      events.filter(
+        (e) =>
+          (year === 'all' || e.start.slice(0, 4) === year || e.end.slice(0, 4) === year) &&
+          matchesHall(e.halls, hall) &&
+          (category === 'all' || e.category === category) &&
+          (status === 'all' || e.status === status),
+      ),
+    [events, year, hall, category, status],
+  );
+
+  // 목록은 최신 시작일 우선 정렬
+  const listed = useMemo(() => [...filtered].sort((a, b) => (a.start < b.start ? 1 : -1)), [filtered]);
+
+  // 캘린더(월/주/일) 항목 — 필터된 행사(기간=start~end) 매핑.
+  const calItems = useMemo(() => filtered.map(toCalItem), [filtered]);
+
+  // 공휴일 세트(캘린더 붉은색 + 공휴일명 표시) — 올해±1년 창 조회. 실패해도 캘린더 정상(빈 세트).
+  const holidayQ = useQuery({
+    queryKey: ['exh-holidays'],
+    queryFn: () =>
+      fetchHolidaySet(
+        `${Number(TODAY_YMD.slice(0, 4)) - 1}-01-01`,
+        `${Number(TODAY_YMD.slice(0, 4)) + 1}-12-31`,
+      ),
+    retry: false,
+  });
+  const holidays = holidayQ.data ?? new Map<string, string>();
+  const catLegend = useMemo(
+    () =>
+      Object.keys(CATEGORY_LABEL).map((k) => ({
+        code: k,
+        label: t(`schedule.cat.${k}`),
+        color: CAT_COLOR[k],
+      })),
+    [t],
+  );
+
+  return (
+    <div className="kx-sched">
+      <header className="kx-sched__head">
+        <div>
+          <h1 className="kx-sched__title">{t('schedule.title')}</h1>
+          <p className="kx-sched__subtitle">
+            {t('schedule.subtitle', { n: events.length.toLocaleString() })}
+            {degraded && ` ${t('schedule.crawlFallback')}`}
+          </p>
+        </div>
+      </header>
+
+      <div className="kx-sched__filters">
+        <select className="kx-select" aria-label={t('schedule.yearFilter')} value={year} onChange={(e) => setYear(e.target.value)}>
+          <option value="all">{t('schedule.allYears')}</option>
+          {EVENT_YEARS.map((y) => (
+            <option key={y} value={String(y)}>{t('schedule.yearN', { y })}</option>
+          ))}
+        </select>
+        <select className="kx-select" aria-label={t('schedule.hallFilter')} value={hall} onChange={(e) => setHall(e.target.value)}>
+          <option value="all">{t('schedule.allHalls')}</option>
+          <option value="1-5">{t('schedule.hall1')}</option>
+          <option value="6-10">{t('schedule.hall2')}</option>
+        </select>
+        <select className="kx-select" aria-label={t('schedule.catFilter')} value={category} onChange={(e) => setCategory(e.target.value)}>
+          <option value="all">{t('schedule.allCats')}</option>
+          {Object.keys(CATEGORY_LABEL).map((k) => (
+            <option key={k} value={k}>{t(`schedule.cat.${k}`)}</option>
+          ))}
+        </select>
+        <select className="kx-select" aria-label={t('schedule.statusFilter')} value={status} onChange={(e) => setStatus(e.target.value)}>
+          <option value="all">{t('schedule.allStatus')}</option>
+          {Object.keys(STATUS_LABEL).map((k) => (
+            <option key={k} value={k}>{t(`schedule.status.${k}`)}</option>
+          ))}
+        </select>
+        <div className="kx-sched__filter-spacer" />
+        {degraded && <span className="kx-bi__degraded">{t('schedule.apiWait')}</span>}
+        <div className="kx-seg" role="tablist" aria-label={t('schedule.viewSwitch')}>
+          <button role="tab" aria-selected={view === 'list'} className={`kx-seg__btn ${view === 'list' ? 'is-active' : ''}`} onClick={() => setView('list')}>{t('schedule.viewList')}</button>
+          <button role="tab" aria-selected={view === 'calendar'} className={`kx-seg__btn ${view === 'calendar' ? 'is-active' : ''}`} onClick={() => setView('calendar')}>{t('schedule.viewCalendar')}</button>
+        </div>
+      </div>
+
+      <div className="kx-sched__split">
+        {query.isLoading ? (
+          <section className="kx-sched__list" aria-label={t('schedule.listLoading')} aria-busy="true">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <article key={i} className="kx-evcard" aria-hidden="true">
+                <Skeleton height={112} width={160} radius={8} />
+                <div className="kx-evcard__body" style={{ flex: 1 }}>
+                  <Skeleton height={20} width="60%" />
+                  <Skeleton height={14} width="35%" />
+                  <Skeleton height={14} width="80%" />
+                  <Skeleton height={14} width="50%" />
+                </div>
+              </article>
+            ))}
+          </section>
+        ) : query.isError ? (
+          <section className="kx-sched__list" aria-label={t('schedule.listAria')}>
+            <ErrorState
+              message={t('schedule.loadError')}
+              onRetry={() => query.refetch()}
+            />
+          </section>
+        ) : view === 'list' ? (
+          <section className="kx-sched__list" aria-label={t('schedule.listAria')}>
+            <p className="kx-sched__count tnum">{t('schedule.count', { n: listed.length.toLocaleString() })}</p>
+            {listed.length === 0 ? (
+              <div className="kx-card">
+                <EmptyState
+                  title={t('schedule.emptyTitle')}
+                  description={t('schedule.emptyDesc')}
+                  action={<Button>{t('schedule.newEvent')}</Button>}
+                />
+              </div>
+            ) : (
+              listed.map((e) => (
+                <article key={e.id} className="kx-evcard">
+                  <div className="kx-evcard__poster" style={{ backgroundImage: `url(${THUMBS[e.thumbIdx]})` }} aria-hidden="true" />
+                  <div className="kx-evcard__body">
+                    <div className="kx-evcard__top">
+                      <h2 className="kx-evcard__title">{e.title}</h2>
+                      <span className={`kx-evstatus is-${e.status}`}>{t(`schedule.status.${e.status}`)}</span>
+                    </div>
+                    <p className="kx-evcard__cat">{t('schedule.catExhibit', { cat: t(`schedule.cat.${e.category}`) })}</p>
+                    <ul className="kx-evcard__meta">
+                      <li aria-label={t('schedule.period')}><IconCalendar size={14} /> <span className="tnum">{e.period}</span></li>
+                      <li aria-label={t('schedule.assignedHall')}><IconGrid size={14} /> {e.halls}</li>
+                      <li aria-label={t('schedule.estVisitors')}><IconUsers size={14} /> <span className="tnum">{e.estVisitors}</span></li>
+                      {e.designStatus && <li><StatusBadge status={e.designStatus} /></li>}
+                    </ul>
+                    <div className="kx-evcard__actions">
+                      <Button variant="secondary">{t('schedule.editDetail')}</Button>
+                      <Button variant="ghost">{t('schedule.viewLogistics')}</Button>
+                    </div>
+                  </div>
+                </article>
+              ))
+            )}
+          </section>
+        ) : (
+          <KxCalendarView
+            items={calItems}
+            legend={catLegend}
+            today={TODAY_YMD}
+            initialDate={TODAY_YMD}
+            holidays={holidays}
+          />
+        )}
+
+        <aside className="kx-sched__aside">
+          <MiniCalendar cursor={asideCursor} onCursor={setAsideCursor} />
+          <HallAvailability cursor={asideCursor} />
+          <HallUtilization cursor={asideCursor} />
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+const WD = ['일', '월', '화', '수', '목', '금', '토'];
+
+function MiniCalendar({ cursor, onCursor }: { cursor: Date; onCursor: (d: Date) => void }) {
+  const { t } = useTranslation();
+  const year = cursor.getFullYear();
+  const month = cursor.getMonth();
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+  /*
+   * 실 원천: `GET /api/events/calendar?year=&month=` — event 테이블 기반 월 점유 집계.
+   * 실패(NETWORK/NOT_FOUND/NOT_IMPLEMENTED) 시에만 크롤링 샘플(eventDaysFor)로 폴백.
+   * eventDays 키 포맷은 `${year}-${month+1}-${day}`(무패딩) — 셀 렌더와 정합.
+   */
+  const query = useQuery<{ days: Set<string>; degraded: boolean }>({
+    queryKey: ['schedule-calendar', year, month],
+    queryFn: async () => {
+      try {
+        const rows = await scheduleApi.calendar(year, month + 1);
+        const days = new Set<string>();
+        for (const r of rows) days.add(`${year}-${month + 1}-${Number(r.date.slice(8, 10))}`);
+        return { days, degraded: false };
+      } catch (err) {
+        if (isDegradable(err)) return { days: eventDaysFor(year, month), degraded: true };
+        throw err;
+      }
+    },
+  });
+  const eventDays = query.data?.days ?? new Set<string>();
+  const degraded = query.data?.degraded ?? false;
+
+  const cells: (number | null)[] = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
+
+  const isToday = (d: number) =>
+    TODAY.getFullYear() === year && TODAY.getMonth() === month && TODAY.getDate() === d;
+
+  return (
+    <section className="kx-card kx-cal" aria-label={t('schedule.miniCal')}>
+      <div className="kx-cal__head">
+        <button className="kx-cal__nav" aria-label={t('schedule.prevMonth')} onClick={() => onCursor(new Date(year, month - 1, 1))}>‹</button>
+        <strong>{t('schedule.yearMonth', { y: year, m: month + 1 })}{degraded && <span className="kx-bi__degraded"> {t('schedule.offlineSample')}</span>}</strong>
+        <button className="kx-cal__nav" aria-label={t('schedule.nextMonth')} onClick={() => onCursor(new Date(year, month + 1, 1))}>›</button>
+      </div>
+      <div className="kx-cal__grid" role="grid">
+        {WD.map((w, i) => (
+          <span key={w} className="kx-cal__wd" role="columnheader">{t(`common.weekday.${i}`)}</span>
+        ))}
+        {cells.map((d, i) => {
+          if (d === null) return <span key={`e${i}`} className="kx-cal__cell is-empty" />;
+          const hasEvent = eventDays.has(`${year}-${month + 1}-${d}`);
+          return (
+            <span
+              key={d}
+              className={`kx-cal__cell tnum ${isToday(d) ? 'is-today' : ''} ${hasEvent ? 'has-event' : ''}`}
+              role="gridcell"
+              aria-label={hasEvent ? t('schedule.dayHasEvent', { d }) : t('schedule.day', { d })}
+            >
+              {d}
+            </span>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+/**
+ * F001 가용성 보강 — 홀 가용(빈 기간) 표시. hallassign API(홀 마스터) + 기존 홀 가동률 집계를 재사용해
+ * 지정 월의 홀 그룹별 "가용 일수(총일-점유일)"와 가용 여부 배지를 보여준다. 집계 실패 시 홀 마스터만으로
+ * "가용 미확인"으로 강등한다(외부 라이브러리·신규 백엔드 없음).
+ */
+function HallAvailability({ cursor }: { cursor: Date }) {
+  const { t } = useTranslation();
+  const year = cursor.getFullYear();
+  const month = cursor.getMonth();
+
+  const query = useQuery<{
+    rows: Array<{ label: string; freeDays: number; totalDays: number; available: boolean }>;
+    hallCount: number;
+    degraded: boolean;
+  }>({
+    queryKey: ['schedule-hall-avail', year, month],
+    queryFn: async () => {
+      const halls = await hallAssignApi.halls().catch(() => [] as Awaited<ReturnType<typeof hallAssignApi.halls>>);
+      try {
+        const util = await scheduleApi.hallUtilization(year, month + 1);
+        const rows = util.map((h) => {
+          const totalDays = h.totalDays || 0;
+          const freeDays = Math.max(0, totalDays - (h.busyDays || 0));
+          return { label: h.label, freeDays, totalDays, available: totalDays === 0 || freeDays > 0 };
+        });
+        return { rows, hallCount: halls.length, degraded: false };
+      } catch (err) {
+        if (isDegradable(err)) {
+          const rows = hallUtilizationFor(year, month).map((h) => ({
+            label: h.label,
+            freeDays: 0,
+            totalDays: 0,
+            available: h.pct < 100,
+          }));
+          return { rows, hallCount: halls.length, degraded: true };
+        }
+        throw err;
+      }
+    },
+  });
+
+  const data = query.data;
+
+  return (
+    <section className="kx-card" aria-label={t('schedule.availTitle')}>
+      <div className="kx-card__head">
+        <h2>{t('schedule.availMonth', { y: year, m: month + 1 })}</h2>
+        {data?.degraded && <span className="kx-bi__degraded">{t('schedule.offlineSample')}</span>}
+      </div>
+      {query.isLoading ? (
+        <Skeleton height={80} />
+      ) : (
+        <>
+          {data && data.hallCount > 0 && (
+            <p className="kx-sched__count tnum">{t('schedule.availHalls', { n: data.hallCount })}</p>
+          )}
+          <ul className="kx-availlist">
+            {(data?.rows ?? []).map((r) => (
+              <li key={r.label} className="kx-availlist__item">
+                <span className="kx-availlist__label">{r.label}</span>
+                <span className="kx-availlist__meta tnum">
+                  {r.totalDays > 0 ? t('schedule.availFreeDays', { free: r.freeDays, total: r.totalDays }) : ''}
+                </span>
+                <span className={`kx-availbadge ${r.available ? 'is-open' : 'is-full'}`}>
+                  {r.available ? t('schedule.availOpen') : t('schedule.availFull')}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </section>
+  );
+}
+
+function HallUtilization({ cursor }: { cursor: Date }) {
+  const { t } = useTranslation();
+  const year = cursor.getFullYear();
+  const month = cursor.getMonth();
+
+  /*
+   * 실 원천: `GET /api/events/hall-utilization?year=&month=` — event + hall_assignment/hall_label 집계.
+   * 실패(NETWORK/NOT_FOUND/NOT_IMPLEMENTED) 시에만 크롤링 샘플(hallUtilizationFor)로 폴백.
+   */
+  const query = useQuery<{ rows: HallUtilRow[]; degraded: boolean }>({
+    queryKey: ['schedule-hall-util', year, month],
+    queryFn: async () => {
+      try {
+        const data = await scheduleApi.hallUtilization(year, month + 1);
+        return { rows: data.map((h) => ({ label: h.label, pct: h.pct })), degraded: false };
+      } catch (err) {
+        if (isDegradable(err)) return { rows: hallUtilizationFor(year, month), degraded: true };
+        throw err;
+      }
+    },
+  });
+  const rows = query.data?.rows ?? [];
+  const degraded = query.data?.degraded ?? false;
+
+  return (
+    <section className="kx-card" aria-label={t('schedule.hallUtil')}>
+      <div className="kx-card__head">
+        <h2>{t('schedule.hallUtilMonth', { y: year, m: month + 1 })}</h2>
+        {degraded && <span className="kx-bi__degraded">{t('schedule.offlineSample')}</span>}
+      </div>
+      <ul className="kx-barlist">
+        {rows.map((h) => (
+          <li key={h.label} className="kx-barlist__item">
+            <div className="kx-barlist__top">
+              <span>{h.label}</span>
+              <span className="tnum">{h.pct}%</span>
+            </div>
+            <div className="kx-barlist__track">
+              <span className="kx-barlist__fill" style={{ width: `${h.pct}%` }} />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/src/frontend/src/screens/schedule/KxCalendarView.tsx b/src/frontend/src/screens/schedule/KxCalendarView.tsx
new file mode 100644
index 0000000..9302eb6
--- /dev/null
+++ b/src/frontend/src/screens/schedule/KxCalendarView.tsx
@@ -0,0 +1,685 @@
+// UIWS CalendarView 정본 구조 이식(월/주/일 뷰 전환·기간 막대·+N 더보기).
+// 정본: workspace/uiws/frontend/src/components/CalendarView.tsx + calendarView.css.
+// kintex 이식: 클래스/토큰만 kx-cv-* + kintex 디자인 토큰으로 번역. 외부 캘린더 라이브러리 미사용.
+// 데이터는 controlled `items`(부모가 range별 조회) + onRangeChange 로 기존 데이터 소스 유지.
+// 코드값 훅(useCodeValues)·공용 Modal 의존 없이 자체 경량 구현(kx 토큰).
+import { useEffect, useMemo, useState, type CSSProperties } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconChevronLeft, IconChevronRight, IconClose } from '../../components/ui/icons';
+import './calendarView.css';
+
+export interface KxCalendarItem {
+  /** 안정 키. 부모에서 문자열로 정규화. */
+  id: string;
+  /** 기간 시작일(yyyy-MM-dd) */
+  startDate: string;
+  /** 기간 종료일(yyyy-MM-dd, 포함). 미지정/시작일과 동일 → 단일일. */
+  endDate?: string;
+  title: string;
+  /** 막대/칩 강조색(hex) — 유형별 색(work 일정 타입 등). 미지정 시 기본 primary. */
+  color?: string;
+  /** 소형 텍스트 뱃지(유형 라벨 등) */
+  badge?: string;
+  /** 진행상태 색점 코드(UPCOMING/ONGOING/DONE). */
+  statusCd?: string;
+}
+
+export interface KxCalendarLegendItem {
+  code: string;
+  label: string;
+  color?: string;
+}
+
+export type KxCalendarRange = { fromDate: string; toDate: string };
+type View = 'month' | 'week' | 'day';
+
+interface KxCalendarViewProps {
+  /** 부모가 현재 range 로 조회해 넘기는 항목(controlled). */
+  items: KxCalendarItem[];
+  /** 뷰/기준일이 바뀌어 표시 범위가 달라질 때 통지(부모가 그 범위로 재조회). */
+  onRangeChange?: (range: KxCalendarRange, view: View) => void;
+  /** 빈 날짜(셀) 클릭 */
+  onDateClick?: (date: string) => void;
+  /** 항목 클릭 */
+  onItemClick?: (item: KxCalendarItem) => void;
+  /** 상태 색점 범례 */
+  legend?: KxCalendarLegendItem[];
+  /** 당일(yyyy-MM-dd). 미지정 시 실제 오늘. */
+  today?: string;
+  /** 초기 기준일. 미지정 시 today. */
+  initialDate?: string;
+  initialView?: View;
+  /** 외부 선택일 하이라이트(work 어젠다 연동) */
+  selectedDate?: string | null;
+  loading?: boolean;
+  /**
+   * 공휴일 세트(yyyy-MM-dd → 공휴일명). 지정 시 해당 날짜 셀을 붉은색으로 표시하고
+   * 날짜 숫자 옆에 공휴일명을 작은 라벨로 노출한다(일요일과 동일 톤 --color-error).
+   * 미지정(undefined) 시 기존 동작과 완전 동일(파괴적 변경 없음).
+   */
+  holidays?: Map<string, string>;
+}
+
+/** 한 주(week-row) 안에서 차지할 수 있는 최대 레인 수(초과 시 "+N"). */
+const MAX_LANES = 3;
+/** 월 뷰 한 날짜 셀에 표시할 단일일 항목 최대 건수(초과 시 "+N"). */
+const MAX_CELL_ITEMS = 4;
+
+/* ===================== 날짜 헬퍼(utils/date 인라인 이식) ===================== */
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+function fmt(d: Date): string {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function realTodayYmd(): string {
+  return fmt(new Date());
+}
+function parseYmd(ymd: string): Date {
+  const [y, m, d] = ymd.split('-').map(Number);
+  return new Date(y, (m || 1) - 1, d || 1);
+}
+function ymdPart(s: string): string {
+  return (s || '').slice(0, 10);
+}
+function diffDays(a: string, b: string): number {
+  return Math.round((parseYmd(b).getTime() - parseYmd(a).getTime()) / 86_400_000);
+}
+function shiftDays(ymd: string, n: number): string {
+  const d = parseYmd(ymd);
+  d.setDate(d.getDate() + n);
+  return fmt(d);
+}
+function shiftMonth(ymd: string, n: number): string {
+  const d = parseYmd(ymd);
+  return fmt(new Date(d.getFullYear(), d.getMonth() + n, 1));
+}
+function dayOf(ymd: string): number {
+  return parseYmd(ymd).getDate();
+}
+function startOfWeek(ymd: string): string {
+  const d = parseYmd(ymd);
+  d.setDate(d.getDate() - d.getDay());
+  return fmt(d);
+}
+function weekDates(ymd: string): string[] {
+  const s = startOfWeek(ymd);
+  return Array.from({ length: 7 }, (_, i) => shiftDays(s, i));
+}
+function monthGrid(ymd: string): { date: string; inMonth: boolean }[] {
+  const base = parseYmd(ymd);
+  const first = new Date(base.getFullYear(), base.getMonth(), 1);
+  const start = new Date(first);
+  start.setDate(1 - first.getDay());
+  const month = base.getMonth();
+  return Array.from({ length: 42 }, (_, i) => {
+    const c = new Date(start);
+    c.setDate(start.getDate() + i);
+    return { date: fmt(c), inMonth: c.getMonth() === month };
+  });
+}
+
+/* ===================== 항목 파생 ===================== */
+function itemSpan(it: KxCalendarItem): { start: string; end: string } {
+  const start = ymdPart(it.startDate);
+  let end = ymdPart(it.endDate ?? it.startDate);
+  if (!end || diffDays(start, end) < 0) end = start;
+  return { start, end };
+}
+function isMultiDay(it: KxCalendarItem): boolean {
+  const { start, end } = itemSpan(it);
+  return !!start && diffDays(start, end) >= 1;
+}
+/** 셀 내 정렬(신규 우선) — id 사전식 desc. */
+function newestFirst(a: KxCalendarItem, b: KxCalendarItem): number {
+  return a.id < b.id ? 1 : a.id > b.id ? -1 : 0;
+}
+
+function rangeOf(view: View, baseDate: string): KxCalendarRange {
+  if (view === 'month') {
+    const grid = monthGrid(baseDate);
+    return { fromDate: grid[0].date, toDate: grid[grid.length - 1].date };
+  }
+  if (view === 'week') {
+    const w = weekDates(baseDate);
+    return { fromDate: w[0], toDate: w[6] };
+  }
+  return { fromDate: baseDate, toDate: baseDate };
+}
+
+/* ===================== 기간 막대 레인 배치 ===================== */
+interface BarSegment {
+  item: KxCalendarItem;
+  startCol: number;
+  span: number;
+  lane: number;
+  continuesLeft: boolean;
+  continuesRight: boolean;
+}
+
+function layoutWeekBars(
+  cols: string[],
+  multiItems: KxCalendarItem[],
+  laneHint: Map<string, number>,
+): { segments: BarSegment[]; usedLanes: number } {
+  const weekStart = cols[0];
+  const weekEnd = cols[6];
+
+  type Pending = Omit<BarSegment, 'lane'>;
+  const pending: Pending[] = [];
+  for (const item of multiItems) {
+    const { start, end } = itemSpan(item);
+    if (diffDays(end, weekStart) > 0 || diffDays(start, weekEnd) > 0) continue;
+    const clipStart = diffDays(start, weekStart) > 0 ? weekStart : start;
+    const clipEnd = diffDays(end, weekEnd) < 0 ? end : weekEnd;
+    const startCol = diffDays(weekStart, clipStart);
+    const span = diffDays(clipStart, clipEnd) + 1;
+    pending.push({
+      item,
+      startCol,
+      span,
+      continuesLeft: diffDays(start, weekStart) > 0,
+      continuesRight: diffDays(end, weekEnd) < 0,
+    });
+  }
+  pending.sort((a, b) => a.startCol - b.startCol || b.span - a.span);
+
+  const laneMasks: number[] = [];
+  const maskOf = (startCol: number, span: number) => {
+    let m = 0;
+    for (let c = startCol; c < startCol + span; c++) m |= 1 << c;
+    return m;
+  };
+  const fits = (lane: number, mask: number) => ((laneMasks[lane] ?? 0) & mask) === 0;
+
+  const segments: BarSegment[] = [];
+  let usedLanes = 0;
+  for (const p of pending) {
+    const mask = maskOf(p.startCol, p.span);
+    let lane = -1;
+    const hinted = laneHint.get(p.item.id);
+    if (hinted != null && fits(hinted, mask)) {
+      lane = hinted;
+    } else {
+      for (let l = 0; ; l++) {
+        if (fits(l, mask)) {
+          lane = l;
+          break;
+        }
+      }
+    }
+    laneMasks[lane] = (laneMasks[lane] ?? 0) | mask;
+    laneHint.set(p.item.id, lane);
+    usedLanes = Math.max(usedLanes, lane + 1);
+    segments.push({ ...p, lane });
+  }
+  return { segments, usedLanes };
+}
+
+/* ===================== 본체 ===================== */
+export default function KxCalendarView({
+  items,
+  onRangeChange,
+  onDateClick,
+  onItemClick,
+  legend,
+  today,
+  initialDate,
+  initialView = 'month',
+  selectedDate,
+  loading,
+  holidays,
+}: KxCalendarViewProps) {
+  const { t } = useTranslation();
+  const todayYmd = today ?? realTodayYmd();
+  const [view, setView] = useState<View>(initialView);
+  const [baseDate, setBaseDate] = useState(initialDate ?? todayYmd);
+  const [moreDate, setMoreDate] = useState<string | null>(null);
+
+  // 표시 범위 변경 통지(부모 재조회).
+  useEffect(() => {
+    onRangeChange?.(rangeOf(view, baseDate), view);
+    // onRangeChange 는 의도적으로 의존성에서 제외(부모가 매 렌더 새 함수 전달 시 루프 방지).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [view, baseDate]);
+
+  const singleByDate = useMemo(() => {
+    const m = new Map<string, KxCalendarItem[]>();
+    items.forEach((it) => {
+      if (isMultiDay(it)) return;
+      const key = itemSpan(it).start;
+      if (!key) return;
+      const arr = m.get(key) ?? [];
+      arr.push(it);
+      m.set(key, arr);
+    });
+    return m;
+  }, [items]);
+
+  const multiItems = useMemo(() => items.filter(isMultiDay), [items]);
+
+  const eventsOnDate = (date: string): KxCalendarItem[] => {
+    const spanning = multiItems.filter((it) => {
+      const { start, end } = itemSpan(it);
+      return diffDays(start, date) >= 0 && diffDays(date, end) >= 0;
+    });
+    const singles = [...(singleByDate.get(date) ?? [])].sort(newestFirst);
+    return [...spanning, ...singles];
+  };
+
+  const move = (delta: number) => {
+    if (view === 'month') setBaseDate((b) => shiftMonth(b, delta));
+    else if (view === 'week') setBaseDate((b) => shiftDays(b, delta * 7));
+    else setBaseDate((b) => shiftDays(b, delta));
+  };
+
+  const title = useMemo(() => {
+    if (view === 'month') {
+      const d = parseYmd(baseDate);
+      return t('calendar.yearMonth', { y: d.getFullYear(), m: d.getMonth() + 1 });
+    }
+    if (view === 'week') {
+      const w = weekDates(baseDate);
+      return `${w[0]} ~ ${w[6]}`;
+    }
+    return baseDate;
+  }, [view, baseDate, t]);
+
+  const renderItem = (it: KxCalendarItem) => (
+    <button
+      key={it.id}
+      type="button"
+      className={`kx-cv-event${it.statusCd === 'DONE' ? ' is-done' : ''}`}
+      style={it.color ? { borderLeftColor: it.color } : undefined}
+      title={it.title}
+      onClick={(e) => {
+        e.stopPropagation();
+        onItemClick?.(it);
+      }}
+    >
+      {it.statusCd && <span className={`kx-cv-dot kx-cv-imp-${it.statusCd}`} aria-hidden="true" />}
+      {it.badge && <span className="kx-cv-badge">{it.badge}</span>}
+      <span className="kx-cv-event-title">{it.title}</span>
+    </button>
+  );
+
+  const renderBar = (seg: BarSegment) => {
+    const it = seg.item;
+    const cls = [
+      'kx-cv-bar',
+      seg.continuesLeft ? 'is-cont-left' : '',
+      seg.continuesRight ? 'is-cont-right' : '',
+      it.statusCd === 'DONE' ? 'is-done' : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+    return (
+      <button
+        key={`${it.id}-${seg.startCol}`}
+        type="button"
+        className={cls}
+        style={{
+          gridColumn: `${seg.startCol + 1} / span ${seg.span}`,
+          gridRow: seg.lane + 1,
+          ...(it.color ? { borderLeftColor: it.color } : {}),
+        }}
+        title={it.title}
+        onClick={(e) => {
+          e.stopPropagation();
+          onItemClick?.(it);
+        }}
+      >
+        {!seg.continuesLeft && it.badge && <span className="kx-cv-bar-badge">{it.badge}</span>}
+        <span className="kx-cv-bar-title">{it.title}</span>
+      </button>
+    );
+  };
+
+  return (
+    <div className="kx-cv-root">
+      <div className="kx-cv-toolbar">
+        <button type="button" className="kx-cv-nav" onClick={() => move(-1)}>
+          <IconChevronLeft size={14} /> {t('calendar.prev')}
+        </button>
+        <strong className="kx-cv-title tnum" aria-live="polite">
+          {title}
+        </strong>
+        <button type="button" className="kx-cv-nav" onClick={() => move(1)}>
+          {t('calendar.next')} <IconChevronRight size={14} />
+        </button>
+        <button type="button" className="kx-cv-nav" onClick={() => setBaseDate(todayYmd)}>
+          {t('calendar.today')}
+        </button>
+        <span className="kx-cv-switch" role="group" aria-label={t('calendar.viewSwitch')}>
+          {(['month', 'week', 'day'] as View[]).map((v) => (
+            <button
+              key={v}
+              type="button"
+              className={view === v ? 'is-active' : ''}
+              aria-pressed={view === v}
+              onClick={() => setView(v)}
+            >
+              {t(`calendar.view.${v}`)}
+            </button>
+          ))}
+        </span>
+        {loading && <span className="kx-cv-muted">{t('calendar.loading')}</span>}
+      </div>
+
+      {legend && legend.length > 0 && (
+        <div className="kx-cv-legend" aria-label={t('calendar.legend')}>
+          {legend.map((c) => (
+            <span key={c.code} className="kx-cv-legend-item">
+              <span
+                className={`kx-cv-dot${c.color ? '' : ` kx-cv-imp-${c.code}`}`}
+                style={c.color ? { background: c.color } : undefined}
+                aria-hidden="true"
+              />
+              {c.label}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {view === 'month' && (
+        <MonthView
+          baseDate={baseDate}
+          today={todayYmd}
+          selectedDate={selectedDate ?? null}
+          singleByDate={singleByDate}
+          multiItems={multiItems}
+          onDateClick={onDateClick}
+          onMore={setMoreDate}
+          renderItem={renderItem}
+          renderBar={renderBar}
+          holidays={holidays}
+        />
+      )}
+
+      {view === 'week' && (
+        <WeekView
+          baseDate={baseDate}
+          today={todayYmd}
+          selectedDate={selectedDate ?? null}
+          singleByDate={singleByDate}
+          multiItems={multiItems}
+          onDateClick={onDateClick}
+          onMore={setMoreDate}
+          renderItem={renderItem}
+          renderBar={renderBar}
+          holidays={holidays}
+        />
+      )}
+
+      {view === 'day' && (
+        <div
+          className={`kx-cv-day${holidays?.has(baseDate) ? ' is-holiday' : ''}`}
+          onClick={() => onDateClick?.(baseDate)}
+          role={onDateClick ? 'button' : undefined}
+        >
+          <div className="kx-cv-day-head">
+            {baseDate}
+            {holidays?.get(baseDate) && (
+              <span className="kx-cv-holiday-name">{holidays.get(baseDate)}</span>
+            )}
+          </div>
+          {(() => {
+            const all = eventsOnDate(baseDate);
+            if (all.length === 0) {
+              return <p className="kx-cv-muted">{t('calendar.dayEmpty')}</p>;
+            }
+            return <div className="kx-cv-day-list">{all.map(renderItem)}</div>;
+          })()}
+        </div>
+      )}
+
+      {moreDate && (
+        <div className="kx-cv-modal-backdrop" onClick={() => setMoreDate(null)}>
+          <div
+            className="kx-cv-modal"
+            role="dialog"
+            aria-modal="true"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="kx-cv-modal-head">
+              <strong>{t('calendar.dayAll', { date: moreDate })}</strong>
+              <button
+                type="button"
+                className="kx-cv-modal-close"
+                aria-label={t('calendar.close')}
+                onClick={() => setMoreDate(null)}
+              >
+                <IconClose size={16} />
+              </button>
+            </div>
+            {(() => {
+              const dayItems = eventsOnDate(moreDate);
+              if (dayItems.length === 0) {
+                return <p className="kx-cv-muted">{t('calendar.dayEmpty')}</p>;
+              }
+              return (
+                <ul className="kx-cv-more-list">
+                  {dayItems.map((it) => {
+                    const { start, end } = itemSpan(it);
+                    return (
+                      <li key={it.id}>
+                        <button
+                          type="button"
+                          className="kx-cv-more-item"
+                          onClick={() => {
+                            setMoreDate(null);
+                            onItemClick?.(it);
+                          }}
+                        >
+                          {it.statusCd && (
+                            <span
+                              className={`kx-cv-dot kx-cv-imp-${it.statusCd}`}
+                              aria-hidden="true"
+                            />
+                          )}
+                          {it.badge && <span className="kx-cv-badge">{it.badge}</span>}
+                          <span className="kx-cv-more-item-title">{it.title}</span>
+                          <span className="kx-cv-more-item-range">
+                            {isMultiDay(it) ? `${start} ~ ${end}` : start}
+                          </span>
+                        </button>
+                      </li>
+                    );
+                  })}
+                </ul>
+              );
+            })()}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ===================== 월 뷰 ===================== */
+interface WeekViewShared {
+  today: string;
+  selectedDate: string | null;
+  singleByDate: Map<string, KxCalendarItem[]>;
+  multiItems: KxCalendarItem[];
+  onDateClick?: (date: string) => void;
+  onMore: (date: string) => void;
+  renderItem: (it: KxCalendarItem) => JSX.Element;
+  renderBar: (seg: BarSegment) => JSX.Element;
+  /** 공휴일 세트(ymd → 명칭). 미지정 시 표시 없음. */
+  holidays?: Map<string, string>;
+}
+
+function MonthView({ baseDate, ...rest }: { baseDate: string } & WeekViewShared) {
+  const { t } = useTranslation();
+  const grid = monthGrid(baseDate);
+  const weeks: { date: string; inMonth: boolean }[][] = [];
+  for (let w = 0; w < grid.length; w += 7) weeks.push(grid.slice(w, w + 7));
+  const laneHint = new Map<string, number>();
+
+  return (
+    <div className="kx-cv-grid">
+      <div className="kx-cv-dow-row">
+        {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+          <div key={i} className={`kx-cv-dow${i === 0 ? ' is-sun' : i === 6 ? ' is-sat' : ''}`}>
+            {t(`common.weekday.${i}`)}
+          </div>
+        ))}
+      </div>
+      {weeks.map((week) => (
+        <MonthWeekRow key={week[0].date} week={week} laneHint={laneHint} {...rest} />
+      ))}
+    </div>
+  );
+}
+
+function MonthWeekRow({
+  week,
+  laneHint,
+  today,
+  selectedDate,
+  singleByDate,
+  multiItems,
+  onDateClick,
+  onMore,
+  renderItem,
+  renderBar,
+  holidays,
+}: {
+  week: { date: string; inMonth: boolean }[];
+  laneHint: Map<string, number>;
+} & WeekViewShared) {
+  const cols = week.map((c) => c.date);
+  const { segments, usedLanes } = layoutWeekBars(cols, multiItems, laneHint);
+  const lanes = Math.min(usedLanes, MAX_LANES);
+  const barAreaStyle = { ['--kx-cv-bar-lanes']: String(lanes) } as CSSProperties;
+  const hiddenBars = segments.filter((s) => s.lane >= MAX_LANES);
+
+  return (
+    <div className="kx-cv-week-row" style={barAreaStyle}>
+      <div className="kx-cv-week-cells">
+        {week.map(({ date, inMonth }, dow) => {
+          const singles = singleByDate.get(date) ?? [];
+          const holidayName = holidays?.get(date);
+          const cls = [
+            'kx-cv-cell',
+            inMonth ? '' : 'is-out',
+            date === today ? 'is-today' : '',
+            date === selectedDate ? 'is-selected' : '',
+            dow === 0 ? 'is-sun' : dow === 6 ? 'is-sat' : '',
+            holidayName ? 'is-holiday' : '',
+          ]
+            .filter(Boolean)
+            .join(' ');
+          const hiddenHere = hiddenBars.filter((s) => s.startCol === dow).length;
+          const ordered = [...singles].sort(newestFirst);
+          const shown = ordered.slice(0, MAX_CELL_ITEMS);
+          const moreCount = ordered.length - shown.length + hiddenHere;
+          return (
+            <div key={date} className={cls} onClick={() => onDateClick?.(date)}>
+              <span className="kx-cv-daynum">
+                {dayOf(date)}
+                {holidayName && (
+                  <em className="kx-cv-holiday-name" title={holidayName}>
+                    {holidayName}
+                  </em>
+                )}
+              </span>
+              <div className="kx-cv-cell-singles">
+                {shown.map(renderItem)}
+                {moreCount > 0 && (
+                  <button
+                    type="button"
+                    className="kx-cv-more"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onMore(date);
+                    }}
+                  >
+                    +{moreCount}
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {lanes > 0 && (
+        <div className="kx-cv-bars">{segments.filter((s) => s.lane < MAX_LANES).map(renderBar)}</div>
+      )}
+    </div>
+  );
+}
+
+/* ===================== 주 뷰 ===================== */
+function WeekView({
+  baseDate,
+  today,
+  selectedDate,
+  singleByDate,
+  multiItems,
+  onDateClick,
+  onMore,
+  renderItem,
+  renderBar,
+  holidays,
+}: { baseDate: string } & WeekViewShared) {
+  const { t } = useTranslation();
+  const cols = weekDates(baseDate);
+  const laneHint = new Map<string, number>();
+  const { segments, usedLanes } = layoutWeekBars(cols, multiItems, laneHint);
+  const lanes = Math.min(usedLanes, MAX_LANES);
+  const hiddenBars = segments.filter((s) => s.lane >= MAX_LANES);
+
+  return (
+    <div className="kx-cv-week-view">
+      <div className="kx-cv-week-grid">
+        {cols.map((date, i) => {
+          const holidayName = holidays?.get(date);
+          const dowCls = i === 0 ? ' is-sun' : i === 6 ? ' is-sat' : '';
+          return (
+            <div key={`h-${date}`} className={`kx-cv-dow${dowCls}${holidayName ? ' is-holiday' : ''}`}>
+              {t(`common.weekday.${i}`)} {dayOf(date)}
+              {holidayName && <em className="kx-cv-holiday-name" title={holidayName}>{holidayName}</em>}
+            </div>
+          );
+        })}
+      </div>
+      {lanes > 0 && (
+        <div
+          className="kx-cv-week-bars"
+          style={{ ['--kx-cv-bar-lanes']: String(lanes) } as CSSProperties}
+        >
+          {segments.filter((s) => s.lane < MAX_LANES).map(renderBar)}
+        </div>
+      )}
+      <div className="kx-cv-week-grid kx-cv-week-body">
+        {cols.map((date, dow) => {
+          const singles = singleByDate.get(date) ?? [];
+          const hiddenHere = hiddenBars.filter((s) => s.startCol === dow).length;
+          return (
+            <div
+              key={date}
+              className={`kx-cv-week-cell${date === today ? ' is-today' : ''}${date === selectedDate ? ' is-selected' : ''}`}
+              onClick={() => onDateClick?.(date)}
+            >
+              {singles.map(renderItem)}
+              {hiddenHere > 0 && (
+                <button
+                  type="button"
+                  className="kx-cv-more"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onMore(date);
+                  }}
+                >
+                  +{hiddenHere}
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/schedule/calendarView.css b/src/frontend/src/screens/schedule/calendarView.css
new file mode 100644
index 0000000..8d8b11b
--- /dev/null
+++ b/src/frontend/src/screens/schedule/calendarView.css
@@ -0,0 +1,541 @@
+/* UIWS calendarView.css 정본 이식 — 클래스 kx-cv-*, kintex 디자인 토큰만 사용.
+   월/주/일 뷰 전환·기간 막대(spanning bar)·+N 더보기 팝업. */
+
+.kx-cv-root {
+  width: 100%;
+  min-width: 0;
+}
+
+/* ---- 툴바 ---- */
+.kx-cv-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+  flex-wrap: wrap;
+}
+.kx-cv-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  font-size: var(--fs-caption);
+  cursor: pointer;
+}
+.kx-cv-nav:hover {
+  background: var(--color-neutral-050);
+}
+.kx-cv-title {
+  font-size: var(--fs-h3);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  min-width: 160px;
+  text-align: center;
+}
+.kx-cv-switch {
+  display: inline-flex;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.kx-cv-switch button {
+  border: none;
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  padding: 4px 12px;
+  cursor: pointer;
+  font-size: var(--fs-caption);
+}
+.kx-cv-switch button.is-active {
+  background: var(--color-primary-600);
+  color: #fff;
+}
+.kx-cv-muted {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+/* ---- 범례 ---- */
+.kx-cv-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1) var(--space-3);
+  margin-bottom: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-cv-legend-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ---- 월 그리드 ---- */
+.kx-cv-grid {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-white);
+  min-width: 0;
+}
+
+/* 피드백③(데스크톱 2단 한정): 달력이 컬럼의 남는 세로 공간을 채워 아래 대형 빈 공간 제거.
+   태블릿/모바일(≤1100 단일 컬럼)에서는 콘텐츠 높이 유지(밀도 정리 우선). */
+@media (min-width: 1101px) {
+  .kx-cv-root {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .kx-cv-root .kx-cv-grid {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .kx-cv-root .kx-cv-grid .kx-cv-week-row {
+    flex: 1 1 auto;
+  }
+  .kx-cv-root .kx-cv-grid .kx-cv-week-cells {
+    height: 100%;
+  }
+}
+.kx-cv-dow-row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.kx-cv-dow {
+  padding: var(--space-2);
+  text-align: center;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-050);
+  border-bottom: var(--border-card);
+}
+.kx-cv-dow.is-sun {
+  color: var(--color-error);
+}
+.kx-cv-dow.is-sat {
+  color: var(--color-primary-600);
+}
+
+/* 한 주 행: 날짜 셀 레이어 위에 기간 막대 레이어를 겹친다. */
+.kx-cv-week-row {
+  position: relative;
+  --kx-cv-bar-lanes: 0;
+  --kx-cv-bar-h: 18px;
+  --kx-cv-bar-gap: 2px;
+  --kx-cv-daynum-h: 16px;
+}
+.kx-cv-week-cells {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.kx-cv-cell {
+  position: relative;
+  min-width: 0;
+  /* 피드백②: 이벤트 없는 날 아래 대형 공백 → 셀 높이 축소(콘텐츠 밀도 정리). */
+  min-height: 64px;
+  border-top: var(--border-card);
+  border-right: var(--border-card);
+  padding: var(--space-1) var(--space-2) var(--space-2);
+  font-size: var(--fs-caption);
+  background: var(--color-white);
+  cursor: pointer;
+  /* 날짜 숫자를 셀 최상단에 붙이고(위로), 막대 레인 수만큼만 상단 여백 확보. */
+  padding-top: calc(
+    var(--space-1) + var(--kx-cv-daynum-h) +
+      var(--kx-cv-bar-lanes) * (var(--kx-cv-bar-h) + var(--kx-cv-bar-gap))
+  );
+}
+.kx-cv-cell:nth-child(7n) {
+  border-right: none;
+}
+.kx-cv-cell.is-out {
+  background: var(--color-neutral-050);
+  color: var(--color-neutral-500);
+}
+.kx-cv-cell.is-today {
+  outline: 2px solid var(--color-neutral-500);
+  outline-offset: -2px;
+}
+.kx-cv-cell.is-selected {
+  background: var(--color-primary-050);
+}
+.kx-cv-daynum {
+  position: absolute;
+  top: var(--space-1);
+  left: var(--space-2);
+  height: var(--kx-cv-daynum-h);
+  line-height: var(--kx-cv-daynum-h);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  z-index: 2;
+}
+.kx-cv-cell.is-sun .kx-cv-daynum {
+  color: var(--color-error);
+}
+.kx-cv-cell.is-sat .kx-cv-daynum {
+  color: var(--color-primary-600);
+}
+/* 공휴일 — 일요일과 동일 톤(붉은색). 날짜 숫자 + 옆 라벨(공휴일명) 모두 강조. */
+.kx-cv-cell.is-holiday .kx-cv-daynum {
+  color: var(--color-error);
+}
+/* 날짜 숫자 옆 공휴일명 라벨 — 셀 최상단 한 줄(밀도 유지·초과 시 말줄임). */
+.kx-cv-holiday-name {
+  display: inline-block;
+  margin-left: 4px;
+  font-style: normal;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-error);
+  max-width: 72px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+/* 주 뷰 헤더·일 뷰 헤더 공휴일 강조. */
+.kx-cv-dow.is-holiday,
+.kx-cv-day.is-holiday .kx-cv-day-head {
+  color: var(--color-error);
+}
+.kx-cv-cell-singles {
+  display: block;
+  min-width: 0;
+}
+
+/* 기간 막대 레이어 */
+.kx-cv-bars {
+  position: absolute;
+  top: calc(var(--space-1) + var(--kx-cv-daynum-h));
+  left: 0;
+  right: 0;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: var(--kx-cv-bar-h);
+  row-gap: var(--kx-cv-bar-gap);
+  pointer-events: none;
+  padding: 0 2px;
+}
+
+/* ---- 기간 막대(bar) ---- */
+.kx-cv-bar {
+  pointer-events: auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  height: var(--kx-cv-bar-h);
+  margin: 0 1px;
+  padding: 0 6px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+  border-left: 3px solid var(--color-primary-600);
+  font-size: 11px;
+  line-height: var(--kx-cv-bar-h);
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  text-align: left;
+}
+.kx-cv-bar:hover {
+  background: var(--color-primary-600);
+  color: #fff;
+}
+.kx-cv-bar.is-cont-left {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+  margin-left: 0;
+}
+.kx-cv-bar.is-cont-right {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: 0;
+}
+.kx-cv-bar.is-done {
+  color: var(--color-neutral-500);
+}
+.kx-cv-bar-badge {
+  flex: 0 0 auto;
+  margin-right: 4px;
+  padding: 0 4px;
+  border-radius: var(--radius-sm);
+  background: rgba(0, 0, 0, 0.08);
+  font-weight: 600;
+}
+.kx-cv-bar-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* "+N" 더보기 */
+.kx-cv-more {
+  display: inline-block;
+  margin-top: 2px;
+  padding: 0 4px;
+  border: none;
+  background: transparent;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.kx-cv-more:hover {
+  background: var(--color-primary-050);
+  color: var(--color-primary-600);
+}
+
+/* ---- 주 뷰 ---- */
+.kx-cv-week-view {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-white);
+}
+.kx-cv-week-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background: var(--color-white);
+}
+.kx-cv-week-grid .kx-cv-dow {
+  border-right: var(--border-card);
+}
+.kx-cv-week-grid .kx-cv-dow:nth-child(7n) {
+  border-right: none;
+}
+.kx-cv-week-bars {
+  --kx-cv-bar-lanes: 0;
+  --kx-cv-bar-h: 18px;
+  --kx-cv-bar-gap: 2px;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: var(--kx-cv-bar-h);
+  row-gap: var(--kx-cv-bar-gap);
+  padding: var(--space-1) 2px;
+  border-bottom: var(--border-card);
+  background: var(--color-neutral-050);
+}
+.kx-cv-week-cell {
+  min-width: 0;
+  min-height: 200px;
+  border-top: var(--border-card);
+  border-right: var(--border-card);
+  padding: var(--space-2);
+  cursor: pointer;
+}
+.kx-cv-week-body .kx-cv-week-cell:nth-child(7n) {
+  border-right: none;
+}
+.kx-cv-week-cell.is-today {
+  outline: 2px solid var(--color-neutral-500);
+  outline-offset: -2px;
+}
+.kx-cv-week-cell.is-selected {
+  background: var(--color-primary-050);
+}
+
+/* ---- 일 뷰 ---- */
+.kx-cv-day {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-3);
+  min-height: 200px;
+  cursor: pointer;
+}
+.kx-cv-day-head {
+  margin-bottom: var(--space-2);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-cv-day-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+/* ---- 단일일 항목(칩)·뱃지 ---- */
+.kx-cv-event {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  margin-top: var(--space-1);
+  padding: 2px 6px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1.4;
+  overflow: hidden;
+  white-space: nowrap;
+  border-left: 3px solid var(--color-primary-600);
+  text-align: left;
+  width: 100%;
+}
+.kx-cv-event:hover {
+  background: var(--color-primary-600);
+  color: #fff;
+}
+.kx-cv-event.is-done .kx-cv-event-title {
+  color: var(--color-neutral-500);
+}
+.kx-cv-event-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+/* 진행상태 색점 */
+.kx-cv-dot {
+  flex: 0 0 auto;
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 5px;
+  border-radius: 50%;
+  background: var(--color-neutral-500);
+  vertical-align: middle;
+}
+.kx-cv-dot.kx-cv-imp-UPCOMING {
+  background: var(--color-warning);
+}
+.kx-cv-dot.kx-cv-imp-ONGOING {
+  background: var(--color-primary-600);
+}
+.kx-cv-dot.kx-cv-imp-DONE {
+  background: var(--color-success);
+}
+.kx-cv-badge {
+  display: inline-block;
+  flex: 0 0 auto;
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  font-weight: 600;
+  margin-right: 4px;
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+/* ---- "+N" 더보기 팝업 ---- */
+.kx-cv-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(16, 24, 40, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: var(--space-4);
+}
+.kx-cv-modal {
+  width: 100%;
+  max-width: 420px;
+  max-height: 80vh;
+  overflow-y: auto;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level2);
+  padding: var(--space-4);
+}
+.kx-cv-modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+  color: var(--color-neutral-900);
+}
+.kx-cv-modal-close {
+  border: none;
+  background: transparent;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+  display: inline-flex;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+}
+.kx-cv-modal-close:hover {
+  background: var(--color-neutral-050);
+}
+.kx-cv-more-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.kx-cv-more-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 10px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  color: var(--color-neutral-900);
+  cursor: pointer;
+  text-align: left;
+  font-size: var(--fs-caption);
+}
+.kx-cv-more-item:hover {
+  background: var(--color-neutral-050);
+  border-color: var(--color-neutral-500);
+}
+.kx-cv-more-item-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+.kx-cv-more-item-range {
+  flex: 0 0 auto;
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+
+@media (max-width: 640px) {
+  .kx-cv-cell {
+    min-height: 52px;
+    padding: 2px;
+    padding-top: calc(
+      var(--space-1) + var(--kx-cv-daynum-h) +
+        var(--kx-cv-bar-lanes) * (var(--kx-cv-bar-h) + var(--kx-cv-bar-gap))
+    );
+  }
+  .kx-cv-week-cell {
+    min-height: 120px;
+  }
+  .kx-cv-bar-title {
+    font-size: 10px;
+  }
+  /* 좁은 화면: 툴바 제목 고정폭 해제(가로 오버플로 방지). */
+  .kx-cv-title {
+    min-width: 0;
+    flex: 1 1 auto;
+    text-align: left;
+  }
+  .kx-cv-dow {
+    padding: var(--space-1);
+    font-size: 11px;
+  }
+}
diff --git a/src/frontend/src/screens/schedule/kintexEvents.ts b/src/frontend/src/screens/schedule/kintexEvents.ts
new file mode 100644
index 0000000..1fa0010
--- /dev/null
+++ b/src/frontend/src/screens/schedule/kintexEvents.ts
@@ -0,0 +1,1112 @@
+/*
+ * 킨텍스 실제 전시회 10년치 데이터 (2016~2026, 1098건).
+ * 출처: kintex.com 행사안내(list.do) 크롤링 — scratchpad/crawl_kintex.py + gen_seed.py 로 생성.
+ * 백엔드 시드와 동일 원천: db/migration/V10__seed_exhibitions_10yr.sql
+ * ★ estVisitors 는 홀 수·기간 기반 결정적 추정치(샘플)이며 실 집계가 아니다.
+ * 카테고리는 행사명 키워드 추론(샘플)이다. 이 파일은 생성물 — 직접 수정하지 말 것.
+ */
+export type KxCategory = 'exhibition' | 'culture' | 'trade' | 'tech';
+
+/** [id, title, start(YYYY-MM-DD), end, hallsLabel, category, estVisitors] */
+export type KxEventRow = [string, string, string, string, string, KxCategory, number];
+
+export const KINTEX_EVENT_ROWS: KxEventRow[] = [
+  ["kx2016-001", "제21회 맘앤베이비엑스포 (국제임신출산_유아교육박람회)", "2016-01-28", "2016-01-31", "홀 3, 4", "culture", 45200],
+  ["kx2016-002", "2016 서울 국제 안경산업 박람회", "2016-02-18", "2016-02-20", "홀 3A", "exhibition", 12400],
+  ["kx2016-003", "2016 동아 선물용품(기프트쇼) 및 차・공예박람회", "2016-02-18", "2016-02-20", "홀 4A", "culture", 18200],
+  ["kx2016-004", "제2회 서울 상조・장례산업 박람회", "2016-02-18", "2016-02-20", "홀 5A", "exhibition", 17000],
+  ["kx2016-005", "2016 경향하우징페어/리빙앤라이프스타일", "2016-02-24", "2016-02-28", "홀 3, 4, 5, 1, 2", "culture", 91300],
+  ["kx2016-006", "2016 자동차 경량화 기술 산업전", "2016-03-09", "2016-03-11", "홀 7B", "trade", 19300],
+  ["kx2016-007", "ADVANCED TECH KOREA 2016", "2016-03-09", "2016-03-11", "홀 8", "exhibition", 18100],
+  ["kx2016-008", "2016 SBS골프 대한민국 골프대전", "2016-03-17", "2016-03-20", "홀 1, 2, 3", "exhibition", 61300],
+  ["kx2016-009", "코베-베이비&에듀페어", "2016-03-24", "2016-03-27", "홀 3, 4", "culture", 46500],
+  ["kx2016-010", "2016 OMC 헤어월드 & 인터뷰티페어 코리아", "2016-03-27", "2016-03-29", "홀 7, 8", "culture", 32500],
+  ["kx2016-011", "2016 국방부 전역예정장병 취업박람회", "2016-03-30", "2016-03-31", "홀 10A", "trade", 8300],
+  ["kx2016-012", "2016 코리아 나라장터 엑스포", "2016-03-30", "2016-04-01", "홀 4, 5", "exhibition", 39800],
+  ["kx2016-013", "2016 매경 창업&프랜차이즈쇼", "2016-03-31", "2016-04-03", "홀 1", "exhibition", 18700],
+  ["kx2016-014", "2016 스위트 코리아 (디저트&팬시푸드 페스티벌)", "2016-03-31", "2016-04-03", "홀 미정", "culture", 19600],
+  ["kx2016-015", "2016 스위트코리아", "2016-03-31", "2016-04-03", "홀 2", "exhibition", 29300],
+  ["kx2016-016", "test", "2016-04-01", "2016-04-01", "홀 미정", "exhibition", 4800],
+  ["kx2016-017", "2016 플레이쇼 키즈 & 키덜트", "2016-05-05", "2016-05-08", "홀 9A", "culture", 22100],
+  ["kx2016-018", "2016 서울국제식품산업대전", "2016-05-10", "2016-05-13", "홀 1, 2, 3, 4, 5, 7, 8, 6B, 6C", "trade", 134700],
+  ["kx2016-019", "제41회 MBC건축박람회/2016 서울 디지털프린팅・사인엑스포/2016 동아 조명박람회/2016 동아 공공시설 및 조경박람회", "2016-05-19", "2016-05-22", "홀 9, 10", "tech", 39200],
+  ["kx2016-020", "제11회 동아 홈&리빙 페어, 제8회 동아 판촉 및 선물용품(기프트쇼)박람회/제6회 동아 차・공예박람회/ 2016 동아 가구엑스포", "2016-05-19", "2016-05-22", "홀 7", "culture", 14600],
+  ["kx2016-021", "제7회 동아 스포츠・레저산업 박람회", "2016-05-19", "2016-05-22", "홀 8, 2전시장 로비 9-1", "culture", 24100],
+  ["kx2016-022", "플레이엑스포", "2016-05-19", "2016-05-22", "홀 1, 2", "exhibition", 34700],
+  ["kx2016-023", "2016 국제로타리 세계대회", "2016-05-28", "2016-06-01", "홀 1, 2, 6, 3, 4, 5, 7, 8, 9, 10", "exhibition", 244600],
+  ["kx2016-024", "제22회 맘앤베이비엑스포 (국제임신출산_유아교육박람회)", "2016-06-09", "2016-06-12", "홀 4, 5", "culture", 44800],
+  ["kx2016-025", "2016 하나투어 여행박람회", "2016-06-09", "2016-06-12", "홀 7, 8, 10", "culture", 51600],
+  ["kx2016-026", "시티스케이프 코리아 2016", "2016-06-10", "2016-06-12", "홀 2A", "exhibition", 11900],
+  ["kx2016-027", "2016 대한민국 명품특산물 페스티벌", "2016-06-16", "2016-06-19", "홀 10", "culture", 20200],
+  ["kx2016-028", "제4회 국제 아웃도어 캠핑페스티벌", "2016-06-17", "2016-06-19", "홀 9", "culture", 13700],
+  ["kx2016-029", "로보유니버스 & VR 서밋", "2016-06-22", "2016-06-24", "홀 7", "tech", 14900],
+  ["kx2016-030", "2016 노인 일자리 한마당", "2016-06-30", "2016-06-30", "홀 4A", "exhibition", 6300],
+  ["kx2016-031", "K-Farm 2016 귀농귀촌박람회/친환경에코쇼", "2016-07-07", "2016-07-09", "홀 7A", "trade", 12500],
+  ["kx2016-032", "국제 나노기술 심포지엄 및 나노융합대전", "2016-07-13", "2016-07-15", "홀 7, 8A", "exhibition", 36000],
+  ["kx2016-033", "코리아 룩 페스티벌 2016", "2016-07-14", "2016-07-17", "홀 5", "culture", 23700],
+  ["kx2016-034", "제1회 피트니스 · 보디빌딩 · 스포츠 아카데미 박람회", "2016-07-15", "2016-07-17", "홀 4A", "exhibition", 14300],
+  ["kx2016-035", "제6회 국제어린이교육 및 용품박람회", "2016-08-04", "2016-08-07", "홀 7A", "exhibition", 22500],
+  ["kx2016-036", "2016 미베 베이비엑스포 / 미래 유아교육박람회", "2016-08-12", "2016-08-15", "홀 3, 4", "culture", 47700],
+  ["kx2016-037", "2016 대한민국 국제 관광박람회", "2016-08-18", "2016-08-21", "홀 7", "exhibition", 21200],
+  ["kx2016-038", "2016 한국국제가구 및 인테리어산업대전", "2016-08-18", "2016-08-21", "홀 3, 4", "trade", 42600],
+  ["kx2016-039", "2016 국제접착코팅필름산업전시회", "2016-08-24", "2016-08-26", "홀 7A", "trade", 18200],
+  ["kx2016-040", "제42회 MBC건축박람회/2016 동아 냉・난방 및 건축설비박람회", "2016-08-25", "2016-08-28", "홀 3, 4", "exhibition", 44000],
+  ["kx2016-041", "제12회 동아 홈&리빙 페어/제9회 동아 판촉 및 선물용품(기프트쇼) 박람회/제7회 동아 차・공예박람회", "2016-08-25", "2016-08-28", "홀 5", "culture", 17000],
+  ["kx2016-042", "제8회 동아 스포츠・레저산업 박람회", "2016-08-25", "2016-08-28", "홀 2", "culture", 20600],
+  ["kx2016-043", "2016 경기도 무형문화재 대축제", "2016-08-26", "2016-08-28", "홀 1A, 1B", "culture", 17800],
+  ["kx2016-044", "2016 경기도 미래첨단 교통안전 엑스포", "2016-09-01", "2016-09-02", "홀 4", "trade", 11200],
+  ["kx2016-045", "2016 오토모티브위크", "2016-09-02", "2016-09-04", "홀 1, 2, 3", "exhibition", 52200],
+  ["kx2016-046", "스마트 시티 이노베이션 서밋 아시아 2016", "2016-09-20", "2016-09-22", "홀 3A", "tech", 17500],
+  ["kx2016-047", "2016 글로벌 소재부품 산업대전", "2016-09-20", "2016-09-22", "홀 3B", "trade", 16200],
+  ["kx2016-048", "2016 지역희망박람회", "2016-09-28", "2016-10-01", "홀 5", "exhibition", 18000],
+  ["kx2016-049", "2016 카페&베이커리 페어", "2016-10-06", "2016-10-09", "홀 1", "culture", 21300],
+  ["kx2016-050", "2016 호텔&레스토랑 산업전", "2016-10-06", "2016-10-09", "홀 2", "trade", 24400],
+  ["kx2016-051", "제14회 코베 베이비페어", "2016-10-06", "2016-10-09", "홀 4, 5", "culture", 44700],
+  ["kx2016-052", "2016 코리아 홈앤리빙페어", "2016-10-06", "2016-10-09", "홀 3", "culture", 14100],
+  ["kx2016-053", "2016 기상기후산업박람회", "2016-10-12", "2016-10-14", "홀 10A", "exhibition", 11000],
+  ["kx2016-054", "2016 로보월드", "2016-10-12", "2016-10-16", "홀 4, 5", "exhibition", 59300],
+  ["kx2016-055", "2016 말산업박람회", "2016-10-13", "2016-10-16", "홀 미정", "exhibition", 17100],
+  ["kx2016-056", "2016 말문화 박람회", "2016-10-13", "2016-10-16", "홀 9B", "culture", 15400],
+  ["kx2016-057", "2016 대한민국행복교육박람회", "2016-10-20", "2016-10-22", "홀 7B, 8, 9, 10", "exhibition", 50000],
+  ["kx2016-058", "대한민국우수상품전시회", "2016-10-26", "2016-10-29", "홀 4, 5, 2, 3", "exhibition", 60400],
+  ["kx2016-059", "2016 소프트웨어 교육 페스티벌", "2016-10-28", "2016-10-29", "홀 10", "tech", 9900],
+  ["kx2016-060", "한국 폴리텍 EXPO", "2016-11-02", "2016-11-03", "홀 5", "exhibition", 7100],
+  ["kx2016-061", "SENDEX 2016", "2016-11-03", "2016-11-05", "홀 2, 3", "exhibition", 36900],
+  ["kx2016-062", "2016 대한민국 에너지대전", "2016-11-08", "2016-11-11", "홀 2, 3", "trade", 50200],
+  ["kx2016-063", "디자인코리아", "2016-11-09", "2016-11-13", "홀 4, 5", "exhibition", 40200],
+  ["kx2016-064", "2016 공학교육페스티벌", "2016-11-10", "2016-11-11", "홀 7", "culture", 8400],
+  ["kx2016-065", "2016 대한민국 무형문화재대전 제41회 대한민국전승공예대전, 제46회 대한민국공예품대전", "2016-11-11", "2016-11-13", "홀 1", "culture", 14600],
+  ["kx2016-066", "2016 국민대학교 캡스톤 디자인 경진대회", "2016-11-14", "2016-11-14", "홀 10A", "exhibition", 3900],
+  ["kx2016-067", "2016 SBS골프 한국골프용품전", "2016-11-17", "2016-11-20", "홀 10B", "exhibition", 22100],
+  ["kx2016-068", "마이스타일트렌드페어 2016", "2016-11-18", "2016-11-20", "홀 9", "culture", 14200],
+  ["kx2016-069", "2016 대한민국 과일산업대전", "2016-11-18", "2016-11-20", "홀 10A", "trade", 16500],
+  ["kx2016-070", "제23회 맘앤베이비엑스포 / 국제유아교육박람회", "2016-11-24", "2016-11-27", "홀 3, 4", "culture", 34400],
+  ["kx2016-071", "제8회 대한민국 펫산업 박람회 : 2016 케이펫페어 \"일산\"", "2016-11-25", "2016-11-27", "홀 7B, 8", "culture", 23000],
+  ["kx2016-072", "킨텍스 스푼 아트쇼 2016", "2016-11-25", "2016-12-04", "홀 2", "culture", 30100],
+  ["kx2016-073", "2016 붐업코리아 수출상담회", "2016-11-30", "2016-11-30", "홀 4, 5", "trade", 10400],
+  ["kx2016-074", "2016 대한민국 유망프랜차이즈대전", "2016-12-02", "2016-12-04", "홀 8A", "exhibition", 17500],
+  ["kx2016-075", "인사이드 핀테크 컨퍼런스 & 엑스포", "2016-12-08", "2016-12-09", "홀 6A, 6B", "tech", 8100],
+  ["kx2016-076", "2016 다문화 너나들이 축제", "2016-12-09", "2016-12-10", "홀 3", "culture", 7100],
+  ["kx2016-077", "코리아 크리스마스 페어", "2016-12-09", "2016-12-18", "홀 7, 8A", "culture", 53700],
+  ["kx2017-001", "제24회 맘앤베이비엑스포", "2017-02-09", "2017-02-12", "홀 4, 5", "culture", 33700],
+  ["kx2017-002", "2017 Advanced Tech Korea", "2017-02-15", "2017-02-17", "홀 7B", "exhibition", 17800],
+  ["kx2017-003", "2017 경향하우징페어", "2017-02-22", "2017-02-26", "홀 2, 3, 4, 5A", "culture", 85600],
+  ["kx2017-004", "2017 대한민국 건축기계설비종합전시회", "2017-02-22", "2017-02-26", "홀 5B", "trade", 22600],
+  ["kx2017-005", "2017 리빙앤라이프스타일", "2017-02-22", "2017-02-26", "홀 1", "culture", 18700],
+  ["kx2017-006", "2017 스위트 코리아(디저트&카페 페스티벌)", "2017-02-23", "2017-02-26", "홀 7B", "culture", 15400],
+  ["kx2017-007", "2017 매경 창업 & 프랜차이즈쇼", "2017-02-23", "2017-02-26", "홀 7A", "exhibition", 15900],
+  ["kx2017-008", "Automotive Testing Expo 2017", "2017-03-06", "2017-03-08", "홀 10", "exhibition", 13600],
+  ["kx2017-009", "제 14회 한국국제냉난방공조전", "2017-03-07", "2017-03-10", "홀 7, 8", "trade", 36800],
+  ["kx2017-010", "2017 국제금형 및 관련기기전", "2017-03-07", "2017-03-11", "홀 1, 2, 3", "trade", 75200],
+  ["kx2017-011", "제24회 국제플라스틱 고무산업전시회", "2017-03-07", "2017-03-11", "홀 4, 5", "trade", 40100],
+  ["kx2017-012", "2017 한국국제낚시박람회", "2017-03-10", "2017-03-12", "홀 9", "exhibition", 17500],
+  ["kx2017-013", "세계보안엑스포 2017", "2017-03-15", "2017-03-17", "홀 1, 2", "exhibition", 31400],
+  ["kx2017-014", "2017 SBS골프 대한민국 골프대전", "2017-03-16", "2017-03-19", "홀 3, 4, 5", "exhibition", 53600],
+  ["kx2017-015", "2017 캠핑 & 피크닉페어", "2017-03-16", "2017-03-19", "홀 7, 8", "culture", 41900],
+  ["kx2017-016", "2017 전역예정장병 취업박람회", "2017-03-22", "2017-03-23", "홀 7", "exhibition", 7000],
+  ["kx2017-017", "2017 국방부 전역예정장병 취창업박람회", "2017-03-22", "2017-03-23", "홀 미정", "trade", 9100],
+  ["kx2017-018", "2017 서울모터쇼", "2017-03-31", "2017-04-09", "홀 1, 2, 3, 4, 5, 9, 10, 7, 8", "exhibition", 289900],
+  ["kx2017-019", "CI KOREA 2017 (국제 화장품원료기술전)", "2017-04-18", "2017-04-21", "홀 8B", "exhibition", 14200],
+  ["kx2017-020", "국제 제약화장품산업기술 주간(제12회 제약화장품기술전/ 제7회 국제물류산업전/ 제7회 국제의약품전/ 제2회 국제화장품원료기술전/ 제9회 국제화학장치산업전/ 제11회 국제연구실험기자재 및 첨단분석장비전)", "2017-04-18", "2017-04-21", "홀 미정", "trade", 16400],
+  ["kx2017-021", "COPHEX 2017 (제12회 제약·화장품기술전)", "2017-04-18", "2017-04-21", "홀 10A", "exhibition", 21000],
+  ["kx2017-022", "KOREA PHARM 2017 (제7회 국제의약품전)", "2017-04-18", "2017-04-21", "홀 8A", "exhibition", 17100],
+  ["kx2017-023", "KOREA CHEM 2017 (제9회 국제화학장치산업전)", "2017-04-18", "2017-04-21", "홀 10B", "trade", 21500],
+  ["kx2017-024", "KOREA LAB 2017 (제11회 국제연구·실험 및 첨단분석장비전)", "2017-04-18", "2017-04-21", "홀 7B", "exhibition", 22800],
+  ["kx2017-025", "KOREA MAT 2017 (제7회 국제물류산업전)", "2017-04-18", "2017-04-21", "홀 9", "trade", 24300],
+  ["kx2017-026", "2017 코리아 나라장터 엑스포", "2017-04-19", "2017-04-21", "홀 4, 5", "exhibition", 34400],
+  ["kx2017-027", "제 16회 코베 베이비페어", "2017-04-20", "2017-04-23", "홀 2, 3", "culture", 39200],
+  ["kx2017-028", "2017 국제모션컨트롤 및 머신비전산업전", "2017-04-25", "2017-04-27", "홀 8A", "trade", 15800],
+  ["kx2017-029", "국제전자회로산업전, 국제전자실장산업전", "2017-04-25", "2017-04-27", "홀 7", "tech", 15500],
+  ["kx2017-030", "제14회 동아 홈&리빙페어 / 제11회 동아 기프트쇼", "2017-04-27", "2017-04-30", "홀 5", "culture", 15100],
+  ["kx2017-031", "제9회 동아 스포츠·레저산업 박람회", "2017-04-27", "2017-04-30", "홀 1", "culture", 24400],
+  ["kx2017-032", "제44회 MBC건축박람회/2017 서울 디지털프린팅・사인엑스포/2017 동아 공공시설 및 조경박람회/2017 동아 조명박람회", "2017-04-27", "2017-04-30", "홀 2, 3", "tech", 33700],
+  ["kx2017-033", "2017 동아 가구엑스포 / 제9회 동아 차・공예 박람회", "2017-04-27", "2017-04-30", "홀 4", "culture", 24100],
+  ["kx2017-034", "2017 튼튼쑥쑥 어린이 박람회", "2017-04-28", "2017-04-30", "홀 10A", "exhibition", 10600],
+  ["kx2017-035", "2017 플레이쇼 키즈 & 키덜트", "2017-05-03", "2017-05-05", "홀 9B", "culture", 19200],
+  ["kx2017-036", "2017 상반기 글로벌 취업 상담회", "2017-05-11", "2017-05-12", "홀 2A, 2B", "exhibition", 10800],
+  ["kx2017-037", "2017 서울국제식품산업대전", "2017-05-16", "2017-05-19", "홀 1, 2, 3, 4, 5, 7, 8", "trade", 139800],
+  ["kx2017-038", "2017 국토교통기술대전", "2017-05-24", "2017-05-26", "홀 10A", "exhibition", 15100],
+  ["kx2017-039", "2017 한국국제건설기계전", "2017-05-24", "2017-05-27", "홀 1, 2, 옥외2", "trade", 34300],
+  ["kx2017-040", "2017 플레이엑스포", "2017-05-25", "2017-05-28", "홀 6, 7, 8", "exhibition", 43200],
+  ["kx2017-041", "2017 경기국제보트쇼", "2017-05-25", "2017-05-28", "홀 3, 4, 5", "exhibition", 44000],
+  ["kx2017-042", "2017 트럭 & 버스 메가페어", "2017-05-25", "2017-05-28", "홀 옥외3", "culture", 18800],
+  ["kx2017-043", "신세계그룹&파트너사 채용박람회", "2017-05-31", "2017-05-31", "홀 1A", "exhibition", 4800],
+  ["kx2017-044", "2017 신세계그룹&파트너사 채용박람회", "2017-05-31", "2017-05-31", "홀 미정", "exhibition", 6200],
+  ["kx2017-045", "2017 더 골프 쇼", "2017-06-08", "2017-06-11", "홀 1", "exhibition", 21300],
+  ["kx2017-046", "대한민국세계여성발명대회여성발명품박람회", "2017-06-08", "2017-06-11", "홀 2A, 2B", "exhibition", 16500],
+  ["kx2017-047", "제2회 피트니스 · 보디빌딩 · 스포츠 박람회", "2017-06-09", "2017-06-11", "홀 7A, 6C", "exhibition", 24800],
+  ["kx2017-048", "2017 대한민국 명품특산물 페스티벌", "2017-06-12", "2017-06-18", "홀 10, 10", "culture", 26900],
+  ["kx2017-049", "2017 우수중소기업 마케팅대전", "2017-06-15", "2017-06-17", "홀 5A, 5B", "exhibition", 18100],
+  ["kx2017-050", "메가쇼 2017 시즌1", "2017-06-15", "2017-06-18", "홀 7", "exhibition", 17500],
+  ["kx2017-051", "국제 아웃도어 캠핑페스티발", "2017-06-16", "2017-06-18", "홀 9", "culture", 19300],
+  ["kx2017-052", "2017 KB굿잡 우수기업 취업박람회", "2017-06-22", "2017-06-23", "홀 2", "exhibition", 9600],
+  ["kx2017-053", "제25회 Mom & Baby EXPO 국제임신출산 유아교육박람회", "2017-06-22", "2017-06-25", "홀 7, 8", "culture", 31800],
+  ["kx2017-054", "2017 60+ 시니어 일자리 한마당", "2017-06-27", "2017-06-27", "홀 2A", "exhibition", 6500],
+  ["kx2017-055", "제15회 국제 LED & OLED EXPO 2017", "2017-06-27", "2017-06-29", "홀 3, 4", "exhibition", 31100],
+  ["kx2017-056", "2017 경기도 교통안전 박람회", "2017-06-28", "2017-06-29", "홀 5", "trade", 13000],
+  ["kx2017-057", "2017 로보유니버스 & K 드론", "2017-06-28", "2017-06-30", "홀 7B", "tech", 14000],
+  ["kx2017-058", "2017 VR 서밋", "2017-06-28", "2017-06-30", "홀 7A", "tech", 15400],
+  ["kx2017-059", "2017 인사이드 3D프린팅 컨퍼런스 & 엑스포", "2017-06-28", "2017-06-30", "홀 6", "exhibition", 16900],
+  ["kx2017-060", "2017 글로벌 센서 포럼", "2017-06-28", "2017-06-30", "홀 8A", "exhibition", 18700],
+  ["kx2017-061", "2017년 협동조합 박람회", "2017-06-30", "2017-07-02", "홀 2A, 2B", "exhibition", 25500],
+  ["kx2017-062", "FCI 인터내셔널 도그쇼", "2017-07-01", "2017-07-02", "홀 8B", "exhibition", 8900],
+  ["kx2017-063", "2017 생활 화학 안전주간 (2017 케미라이프엑스포)", "2017-07-02", "2017-07-04", "홀 5, 5", "trade", 18300],
+  ["kx2017-064", "대한치과기공사협회 제53차 국제학술대회(KDTEX 2017)", "2017-07-08", "2017-07-09", "홀 7", "exhibition", 7800],
+  ["kx2017-065", "제15회 국제 나노기술심포지엄 및 나노융합대전", "2017-07-12", "2017-07-14", "홀 7, 8A", "exhibition", 36000],
+  ["kx2017-066", "2017 케이팜(귀농귀촌박람회) / 친환경에코쇼", "2017-07-13", "2017-07-15", "홀 8B", "trade", 13400],
+  ["kx2017-067", "2017 코리아 하우징리빙페어", "2017-07-13", "2017-07-16", "홀 3", "culture", 23100],
+  ["kx2017-068", "제7회 2017 세계청소년교류엑스포", "2017-08-01", "2017-08-03", "홀 5A", "exhibition", 17100],
+  ["kx2017-069", "제21회 대한민국과학창의축전", "2017-08-10", "2017-08-15", "홀 3, 4A, 4B, 5", "exhibition", 63900],
+  ["kx2017-070", "2017 미베 베이비엑스포 / 미래 유아교육박람회", "2017-08-18", "2017-08-21", "홀 3, 4", "culture", 30100],
+  ["kx2017-071", "제15회 동아 홈&리빙페어회", "2017-08-24", "2017-08-27", "홀 5A", "culture", 19300],
+  ["kx2017-072", "제12회 동아 기프트쇼 / 제10회 동아 차·공예박람회", "2017-08-24", "2017-08-27", "홀 5B", "culture", 24100],
+  ["kx2017-073", "2017 서울 국제 안경산업박람회", "2017-08-24", "2017-08-27", "홀 1", "exhibition", 20900],
+  ["kx2017-074", "제2회 대한민국 국제 관광박람회", "2017-08-24", "2017-08-27", "홀 7", "exhibition", 20400],
+  ["kx2017-075", "제9회 국제접착코팅소재산업전시회 (2017 아템페어)", "2017-08-30", "2017-09-01", "홀 7A", "trade", 31800],
+  ["kx2017-076", "국제음향·영상산업전 2017", "2017-08-30", "2017-09-01", "홀 8A", "trade", 18900],
+  ["kx2017-077", "대한민국 교회건축·리모델링박람회 2017", "2017-08-30", "2017-09-01", "홀 8B", "exhibition", 25500],
+  ["kx2017-078", "한국국제가구 및 인테리어산업대전", "2017-08-30", "2017-09-03", "홀 1, 2, 3", "trade", 91900],
+  ["kx2017-079", "2017 대한민국 행정 홍보대전", "2017-08-31", "2017-09-03", "홀 4A, 4B, 5A, 5B", "exhibition", 41200],
+  ["kx2017-080", "2017년 한국관상어산업박람회 및 관상어품평회", "2017-09-01", "2017-09-03", "홀 7B", "exhibition", 12700],
+  ["kx2017-081", "2017 스마트시티 이노베이션 서밋 아시아", "2017-09-06", "2017-09-08", "홀 8", "tech", 13000],
+  ["kx2017-082", "2017 세계태양에너지엑스포", "2017-09-06", "2017-09-08", "홀 1", "trade", 12300],
+  ["kx2017-083", "제10회 국제자원순환산업전", "2017-09-06", "2017-09-08", "홀 7A", "trade", 15600],
+  ["kx2017-084", "2017 한국 중장비 전시회", "2017-09-06", "2017-09-08", "홀 7B", "trade", 15400],
+  ["kx2017-085", "2017 오토모티브위크", "2017-09-08", "2017-09-10", "홀 2, 5B, 3, 4", "exhibition", 57100],
+  ["kx2017-086", "2017 친환경 탈것 한마당 (에코비히클쇼)", "2017-09-08", "2017-09-10", "홀 5A", "trade", 13500],
+  ["kx2017-087", "2017 오토모티브위크 사전등록", "2017-09-08", "2017-09-10", "홀 2, 3, 4, 5B", "exhibition", 61400],
+  ["kx2017-088", "2017 친환경 탈것 한마당 사전등록", "2017-09-08", "2017-09-10", "홀 5A", "trade", 13200],
+  ["kx2017-089", "2017 글로벌소재부품산업대전(IMAC 2017)", "2017-09-13", "2017-09-15", "홀 3", "trade", 13300],
+  ["kx2017-090", "2017 글로벌모바일비전(GMV 2017)", "2017-09-13", "2017-09-15", "홀 4", "exhibition", 13200],
+  ["kx2017-091", "2017 로보월드", "2017-09-13", "2017-09-16", "홀 1A, 2, 1B", "exhibition", 49000],
+  ["kx2017-092", "케이샵 2017", "2017-09-14", "2017-09-16", "홀 8A", "exhibition", 10700],
+  ["kx2017-093", "제41회 프랜차이즈산업박람회", "2017-09-14", "2017-09-16", "홀 7", "exhibition", 13200],
+  ["kx2017-094", "2017 대한민국에너지대전", "2017-09-19", "2017-09-22", "홀 4, 5", "trade", 29500],
+  ["kx2017-095", "한국포장전 2017", "2017-09-19", "2017-09-22", "홀 7, 8A", "exhibition", 45200],
+  ["kx2017-096", "제 17회 코베 베이비페어", "2017-09-21", "2017-09-24", "홀 2, 3", "culture", 28300],
+  ["kx2017-097", "2017 키덜트 & 코믹스, 캐릭터페어", "2017-09-21", "2017-09-24", "홀 미정", "culture", 16800],
+  ["kx2017-098", "제9회 대한민국 뷰티박람회", "2017-10-12", "2017-10-15", "홀 3, 4, 5", "culture", 52300],
+  ["kx2017-099", "2017 슈퍼맘페어(엄마들이 만든 따뜻한 마켓)", "2017-10-13", "2017-10-15", "홀 제1전시장 3, 4홀 출입구 야외광장", "culture", 17000],
+  ["kx2017-100", "제14회 한국 자동차산업 전시회", "2017-10-18", "2017-10-20", "홀 7, 8", "exhibition", 35400],
+  ["kx2017-101", "2017 카페&베이커리페어", "2017-10-18", "2017-10-21", "홀 9B, 10A", "culture", 29000],
+  ["kx2017-102", "2017 호텔쇼", "2017-10-18", "2017-10-21", "홀 10B", "exhibition", 20100],
+  ["kx2017-103", "2017 한국기계전", "2017-10-24", "2017-10-27", "홀 1A, 2, 3, 4, 5", "trade", 104300],
+  ["kx2017-104", "2017 서울국제공구전", "2017-10-24", "2017-10-27", "홀 1", "trade", 24000],
+  ["kx2017-105", "금속산업대전 2017", "2017-10-24", "2017-10-27", "홀 7, 8", "trade", 38000],
+  ["kx2017-106", "제54회 전국도서관대회", "2017-10-25", "2017-10-26", "홀 9B", "culture", 12600],
+  ["kx2017-107", "2017 대한민국우수상품전", "2017-11-01", "2017-11-04", "홀 1, 2, 3", "exhibition", 75600],
+  ["kx2017-108", "2017 진로직업체험박람회", "2017-11-02", "2017-11-04", "홀 9", "exhibition", 18000],
+  ["kx2017-109", "국제주방&욕실박람회", "2017-11-02", "2017-11-05", "홀 7", "exhibition", 26000],
+  ["kx2017-110", "디자인코리아 2017", "2017-11-08", "2017-11-12", "홀 4, 5", "exhibition", 60800],
+  ["kx2017-111", "시니어리빙&복지박람회", "2017-11-09", "2017-11-11", "홀 2, 3", "culture", 28100],
+  ["kx2017-112", "마이스타일 트렌드페어 2017", "2017-11-09", "2017-11-11", "홀 1A, 1B", "culture", 12800],
+  ["kx2017-113", "제26회 국제임신출산_육아용품박람회(맘앤베이비엑스포)", "2017-11-09", "2017-11-12", "홀 7, 8", "culture", 33900],
+  ["kx2017-114", "코리아우드쇼 2017", "2017-11-09", "2017-11-12", "홀 10A", "exhibition", 26000],
+  ["kx2017-115", "2017 한국골프용품전", "2017-11-09", "2017-11-12", "홀 10B", "exhibition", 24600],
+  ["kx2017-116", "제3회 대한민국 안전산업박람회", "2017-11-15", "2017-11-17", "홀 2, 3B, 4", "trade", 38100],
+  ["kx2017-117", "2017 첨단농축산기자재전시회", "2017-11-15", "2017-11-17", "홀 9", "exhibition", 13400],
+  ["kx2017-118", "2017 국제도로교통박람회", "2017-11-15", "2017-11-17", "홀 1", "exhibition", 11400],
+  ["kx2017-119", "2017 기상기후산업 박람회", "2017-11-15", "2017-11-17", "홀 3A", "exhibition", 17300],
+  ["kx2017-120", "메가쇼 2017 시즌 II", "2017-11-16", "2017-11-19", "홀 7, 8A, 8B", "exhibition", 42200],
+  ["kx2017-121", "2017 대한민국 과일산업대전", "2017-11-17", "2017-11-19", "홀 10A", "trade", 12000],
+  ["kx2017-122", "2017 대한민국 미래교육박람회", "2017-11-23", "2017-11-25", "홀 3, 4", "exhibition", 34000],
+  ["kx2017-123", "한이음 엑스포 2017", "2017-11-24", "2017-11-25", "홀 1A", "exhibition", 12800],
+  ["kx2017-124", "SW 중심대학 전시관", "2017-11-24", "2017-11-25", "홀 1B", "exhibition", 11300],
+  ["kx2017-125", "2017 SW교육 페스티벌", "2017-11-24", "2017-11-25", "홀 2", "culture", 11600],
+  ["kx2017-126", "2017 대한민국펫산업박람회(2017 케이펫페어 일산)", "2017-11-24", "2017-11-26", "홀 7, 8", "culture", 23400],
+  ["kx2017-127", "2017 소재부품 뿌리산업 주간", "2017-11-28", "2017-11-30", "홀 4A", "trade", 10700],
+  ["kx2017-128", "2017 인사이드 핀테크 컨퍼런스 & 엑스포", "2017-11-30", "2017-12-01", "홀 6", "tech", 20900],
+  ["kx2017-129", "제10회 대한민국전시산업전", "2017-12-07", "2017-12-08", "홀 7A", "trade", 9700],
+  ["kx2017-130", "2017 경기환경산업전", "2017-12-08", "2017-12-09", "홀 7B", "trade", 11800],
+  ["kx2017-131", "[1부] 2017 코리아 크리스마스 페어", "2017-12-08", "2017-12-10", "홀 3, 4", "culture", 26900],
+  ["kx2017-132", "[1부] 2017 K-베이비키즈페어", "2017-12-08", "2017-12-10", "홀 5", "culture", 18200],
+  ["kx2017-133", "[2부] 2017 코리아 크리스마스 페어", "2017-12-15", "2017-12-17", "홀 3, 4", "culture", 36500],
+  ["kx2017-134", "[2부] 2017 K-베이비키즈페어", "2017-12-15", "2017-12-17", "홀 5", "culture", 13800],
+  ["kx2018-001", "2018 교육대전", "2018-01-11", "2018-01-12", "홀 3", "exhibition", 10100],
+  ["kx2018-002", "2018 한국골프산업박람회", "2018-01-24", "2018-01-26", "홀 7", "exhibition", 12700],
+  ["kx2018-003", "제27회 국제임신출산_육아용품박람회(맘앤베이비엑스포)", "2018-02-01", "2018-02-04", "홀 4, 5", "culture", 42000],
+  ["kx2018-004", "2018 오초 페스티벌 Lv.1", "2018-02-02", "2018-02-04", "홀 3A, 3B", "culture", 11400],
+  ["kx2018-005", "2018 자동차 경량화 기술 산업전", "2018-02-07", "2018-02-09", "홀 7B", "trade", 16200],
+  ["kx2018-006", "데이터실수정1001", "2018-02-17", "2018-02-17", "홀 미정", "exhibition", 3600],
+  ["kx2018-007", "2018 한국건축기계설비전시회", "2018-02-22", "2018-02-24", "홀 6", "trade", 12500],
+  ["kx2018-008", "대한민국건설기술산업대전", "2018-02-22", "2018-02-24", "홀 1전시장 그랜드볼륨", "trade", 15200],
+  ["kx2018-009", "2018 경향하우징페어", "2018-02-22", "2018-02-25", "홀 2, 3, 4, 5A", "culture", 76200],
+  ["kx2018-010", "2018 리빙앤라이프스타일", "2018-02-22", "2018-02-25", "홀 1", "culture", 21400],
+  ["kx2018-011", "제1회 대한민국 지방정부일자리 정책박람회", "2018-03-08", "2018-03-11", "홀 4, 5", "exhibition", 50500],
+  ["kx2018-012", "2018 SBS골프 대한민국 골프대전", "2018-03-08", "2018-03-11", "홀 2, 3", "exhibition", 47100],
+  ["kx2018-013", "2018 한국국제낚시박람회", "2018-03-09", "2018-03-11", "홀 9", "exhibition", 11100],
+  ["kx2018-014", "Automotive Testing Expo 2018", "2018-03-13", "2018-03-15", "홀 10", "exhibition", 18100],
+  ["kx2018-015", "세계보안엑스포 2018", "2018-03-14", "2018-03-16", "홀 4, 5", "exhibition", 26400],
+  ["kx2018-016", "2018 캠핑&피크닉 페어", "2018-03-15", "2018-03-18", "홀 7, 8", "culture", 43400],
+  ["kx2018-017", "제2회 코리아 스마트모빌리티 페어(코빌 2018)", "2018-03-16", "2018-03-18", "홀 3A, 3B", "tech", 17700],
+  ["kx2018-018", "2018 국제 물 산업 전시 및 컨퍼런스", "2018-03-20", "2018-03-23", "홀 10", "exhibition", 25800],
+  ["kx2018-019", "2018 전역예정장병 취업박람회", "2018-03-21", "2018-03-22", "홀 7", "exhibition", 7800],
+  ["kx2018-020", "2018 홈쇼핑·중소기업 상생 주간", "2018-03-22", "2018-03-25", "홀 미정", "culture", 22900],
+  ["kx2018-021", "2018 매경창업&프랜차이즈 쇼", "2018-03-22", "2018-03-25", "홀 3", "exhibition", 15000],
+  ["kx2018-022", "2018 스위트코리아", "2018-03-22", "2018-03-25", "홀 2", "exhibition", 14700],
+  ["kx2018-023", "서울국제공작기계전(SIMTOS 2018)", "2018-04-03", "2018-04-07", "홀 1, 2, 3, 4, 5, 7, 8, 9, 10", "trade", 189700],
+  ["kx2018-024", "제3회 국제화장품원료기술전", "2018-04-17", "2018-04-19", "홀 8B", "exhibition", 15400],
+  ["kx2018-025", "제8회 국제의약품·바이오산업전", "2018-04-17", "2018-04-19", "홀 8A", "trade", 11700],
+  ["kx2018-026", "제12회 국제연구·실험 및 첨단분석장비전", "2018-04-17", "2018-04-20", "홀 7", "exhibition", 20400],
+  ["kx2018-027", "제10회 국제화학장치산업전", "2018-04-17", "2018-04-20", "홀 5", "trade", 20000],
+  ["kx2018-028", "제21회 국제포장기자재전(KOREA PACK 2018)", "2018-04-17", "2018-04-20", "홀 1, 2, 3", "exhibition", 48300],
+  ["kx2018-029", "제13회 국제제약∙바이오∙화장품기술전", "2018-04-17", "2018-04-20", "홀 4", "exhibition", 20500],
+  ["kx2018-030", "잡월드 ROADSHOW「내일희망 채용박람회」", "2018-04-20", "2018-04-20", "홀 6C", "exhibition", 4300],
+  ["kx2018-031", "2018 국제전자회로산업전", "2018-04-24", "2018-04-26", "홀 7A", "tech", 11300],
+  ["kx2018-032", "2018 국제모션컨트롤 및 머신비전산업전", "2018-04-24", "2018-04-26", "홀 7B", "trade", 15600],
+  ["kx2018-033", "2018 코리아 나라장터 엑스포", "2018-04-25", "2018-04-27", "홀 4, 5", "exhibition", 22100],
+  ["kx2018-034", "2018 서울국제식품산업대전", "2018-05-01", "2018-05-04", "홀 7, 8, 1, 2, 3, 4, 5, 6A, 6B, 6C", "trade", 207500],
+  ["kx2018-035", "제18회 동아 홈&리빙페어 / 제14회 기프트쇼", "2018-05-10", "2018-05-13", "홀 5", "culture", 15200],
+  ["kx2018-036", "제10회 동아 가구엑스포 / 제12회 동아 차・공예 박람회", "2018-05-10", "2018-05-13", "홀 4", "culture", 25200],
+  ["kx2018-037", "제11회 동아 스포츠·레저산업 박람회", "2018-05-10", "2018-05-13", "홀 1", "culture", 21700],
+  ["kx2018-038", "2018 PlayX4(플레이엑스포)", "2018-05-10", "2018-05-13", "홀 7, 8A, 6, 8B", "exhibition", 47300],
+  ["kx2018-039", "2018 경기국제보트쇼", "2018-05-24", "2018-05-27", "홀 2, 3, 4, 5", "exhibition", 60200],
+  ["kx2018-040", "제28회 국제임신출산_육아용품박람회(맘앤베이비엑스포)", "2018-05-31", "2018-06-03", "홀 4, 5", "culture", 53600],
+  ["kx2018-041", "2018 더 골프 쇼", "2018-06-07", "2018-06-10", "홀 10A", "exhibition", 20200],
+  ["kx2018-042", "GFood 아울렛 2018", "2018-06-07", "2018-06-10", "홀 1전시장 로비2", "exhibition", 15400],
+  ["kx2018-043", "2018 하나투어 여행박람회", "2018-06-07", "2018-06-10", "홀 1, 2, 3", "culture", 54700],
+  ["kx2018-044", "2018 국제아웃도어캠핑&레포츠페스티벌", "2018-06-08", "2018-06-10", "홀 9", "culture", 13500],
+  ["kx2018-045", "2018 세계태양에너지엑스포", "2018-06-14", "2018-06-16", "홀 5A", "trade", 16600],
+  ["kx2018-046", "2018 세계탄소제로엑스포", "2018-06-14", "2018-06-16", "홀 5B", "exhibition", 16600],
+  ["kx2018-047", "2018 우수 중소기업 마케팅대전", "2018-06-14", "2018-06-16", "홀 8B", "exhibition", 11100],
+  ["kx2018-048", "메가쇼 2018 시즌 1", "2018-06-14", "2018-06-17", "홀 7, 8A", "exhibition", 31100],
+  ["kx2018-049", "2018 Sea Farm Show 해양수산·양식·식품 박람회", "2018-06-15", "2018-06-17", "홀 10A", "trade", 19200],
+  ["kx2018-050", "2018 대한민국 식초문화대전", "2018-06-22", "2018-06-23", "홀 2A, 2B", "culture", 8600],
+  ["kx2018-051", "2018 고양 FCI 국제 도그쇼", "2018-06-23", "2018-06-24", "홀 9A", "exhibition", 10400],
+  ["kx2018-052", "제16회 국제 LED & OLED EXPO 2018", "2018-06-26", "2018-06-28", "홀 3, 4", "exhibition", 25900],
+  ["kx2018-053", "인사이드 3D프린팅 컨퍼런스 & 엑스포 2018", "2018-06-27", "2018-06-29", "홀 5", "exhibition", 13900],
+  ["kx2018-054", "테크노스케이프 아시아 2018", "2018-06-28", "2018-06-30", "홀 미정", "tech", 11500],
+  ["kx2018-055", "2018 글로벌센서포럼(GSF)", "2018-06-28", "2018-06-30", "홀 8", "exhibition", 10700],
+  ["kx2018-056", "2018 VR 서밋", "2018-06-28", "2018-06-30", "홀 7B", "tech", 11700],
+  ["kx2018-057", "2018 로보유니버스 & K 드론", "2018-06-28", "2018-06-30", "홀 7A", "tech", 18700],
+  ["kx2018-058", "2018 대한민국 세게여성발명대회 및 여성발명품박람회(여성발명왕EXPO)", "2018-06-28", "2018-07-01", "홀 2", "exhibition", 23600],
+  ["kx2018-059", "제16회 국제 나노기술심포지엄 및 나노융합대전", "2018-07-11", "2018-07-13", "홀 7, 8A", "exhibition", 36900],
+  ["kx2018-060", "2018 친환경에코쇼/귀농·귀촌 박람회(Eco Show / K-Farm)", "2018-07-19", "2018-07-21", "홀 7", "trade", 15800],
+  ["kx2018-061", "2018 코리아하우징리빙페어", "2018-07-19", "2018-07-22", "홀 4", "culture", 25700],
+  ["kx2018-062", "2018 청소년 발명페스티벌", "2018-07-20", "2018-07-22", "홀 5", "culture", 19200],
+  ["kx2018-063", "KDTEX 2018 국제학술대회", "2018-07-21", "2018-07-22", "홀 8A, 8B", "exhibition", 12000],
+  ["kx2018-064", "2018 대한민국과학창의축전", "2018-08-09", "2018-08-12", "홀 3, 4", "exhibition", 51000],
+  ["kx2018-065", "2018 미베 베이비엑스포 / 미래 유아교육박람회", "2018-08-16", "2018-08-19", "홀 3, 4", "culture", 39400],
+  ["kx2018-066", "2018 한국관상어박람회 및 제4회 해양수산부장관배 한국관상어품평회", "2018-08-17", "2018-08-19", "홀 5", "trade", 11200],
+  ["kx2018-067", "2018 아템페어 전시회(제 10회 국제 접착·코팅 소재 산업전시회)", "2018-08-22", "2018-08-24", "홀 7A", "trade", 11500],
+  ["kx2018-068", "한국표면처리산업전", "2018-08-22", "2018-08-24", "홀 미정", "trade", 15600],
+  ["kx2018-069", "2018 서울 국제 안경산업 박람회", "2018-08-23", "2018-08-26", "홀 미정", "exhibition", 21000],
+  ["kx2018-070", "제12회 스포츠·레저산업 박람회", "2018-08-23", "2018-08-26", "홀 1", "culture", 15400],
+  ["kx2018-071", "제15회 기프트·차공예 박람회", "2018-08-23", "2018-08-26", "홀 2B", "culture", 15900],
+  ["kx2018-072", "제 19회 동아 홈&리빙페어", "2018-08-23", "2018-08-26", "홀 2A", "culture", 24300],
+  ["kx2018-073", "2018 동아 냉·난방 및 건축설비 박람회", "2018-08-23", "2018-08-26", "홀 3B", "exhibition", 25800],
+  ["kx2018-074", "제48회 MBC건축박람회", "2018-08-23", "2018-08-26", "홀 3A, 4", "exhibition", 38800],
+  ["kx2018-075", "2018 정원 및 조경박람회", "2018-08-23", "2018-08-26", "홀 5A, 5B", "exhibition", 23600],
+  ["kx2018-076", "K-Print 2018", "2018-08-25", "2018-09-01", "홀 미정", "exhibition", 32300],
+  ["kx2018-077", "케이샵 2018", "2018-08-29", "2018-08-31", "홀 5", "exhibition", 11900],
+  ["kx2018-078", "제 29회 한국국제가구 및 인테리어산업대전", "2018-08-29", "2018-09-02", "홀 1A, 1B, 2, 3", "trade", 86000],
+  ["kx2018-079", "2018 글로벌 비즈니스 소싱페어", "2018-08-30", "2018-08-31", "홀 4", "culture", 9300],
+  ["kx2018-080", "2018 경기도 교통안전 박람회", "2018-09-05", "2018-09-06", "홀 4", "trade", 11800],
+  ["kx2018-081", "2018 한국 중장비 부품 및 어태치먼트 전시회 (KOHES)", "2018-09-05", "2018-09-07", "홀 7B", "trade", 12000],
+  ["kx2018-082", "제11회 국제자원순환산업전 (Re-Tech)", "2018-09-05", "2018-09-07", "홀 7A", "trade", 19100],
+  ["kx2018-083", "국제음향·영상산업전 2018", "2018-09-05", "2018-09-07", "홀 8B", "trade", 12300],
+  ["kx2018-084", "대한민국 교회건축리모델링박람회 2018", "2018-09-05", "2018-09-07", "홀 8A", "exhibition", 18300],
+  ["kx2018-085", "대한민국 국제 관광박람회", "2018-09-06", "2018-09-09", "홀 2", "exhibition", 19900],
+  ["kx2018-086", "한국국제전자담배박람회 2018", "2018-09-07", "2018-09-09", "홀 3", "tech", 16100],
+  ["kx2018-087", "2018 국제자동화정밀기기전(KOFAS-Seoul 2018)", "2018-09-11", "2018-09-14", "홀 4, 5", "exhibition", 33900],
+  ["kx2018-088", "2018 대한민국 방위산업전(DX KOREA)", "2018-09-12", "2018-09-16", "홀 7, 8", "trade", 36800],
+  ["kx2018-089", "2018 킨텍스 디지털 헬스케어 페어", "2018-09-13", "2018-09-16", "홀 3", "tech", 20000],
+  ["kx2018-090", "FINE FOOD FAIR 2018", "2018-09-14", "2018-09-16", "홀 2", "tech", 18000],
+  ["kx2018-091", "2018 매경 창업&프랜차이즈 쇼", "2018-09-14", "2018-09-16", "홀 1", "exhibition", 17700],
+  ["kx2018-092", "스마트시티 서밋 아시아 2018", "2018-09-18", "2018-09-20", "홀 4, 5", "tech", 33900],
+  ["kx2018-093", "제2회 월드 스마트시티 위크(WSCW)", "2018-09-18", "2018-09-20", "홀 옥외2", "tech", 11900],
+  ["kx2018-094", "대한민국 에너지대전", "2018-10-02", "2018-10-05", "홀 1, 2", "trade", 46700],
+  ["kx2018-095", "20회 킨텍스 코베 베이비페어", "2018-10-04", "2018-10-07", "홀 3, 4", "culture", 43600],
+  ["kx2018-096", "2018 호텔쇼", "2018-10-10", "2018-10-13", "홀 7", "exhibition", 24600],
+  ["kx2018-097", "2018 로보월드", "2018-10-10", "2018-10-13", "홀 1, 2", "exhibition", 49400],
+  ["kx2018-098", "2018 대한민국 뷰티박람회(10회)", "2018-10-11", "2018-10-14", "홀 3, 4, 5", "culture", 53400],
+  ["kx2018-099", "2018 카페&베이커리페어", "2018-10-11", "2018-10-14", "홀 8", "culture", 18500],
+  ["kx2018-100", "2018 한국골프용품전", "2018-10-11", "2018-10-14", "홀 10B", "exhibition", 18300],
+  ["kx2018-101", "2018 교육대전", "2018-10-18", "2018-10-20", "홀 9", "exhibition", 15200],
+  ["kx2018-102", "2018 중·장기복무 제대군인 일자리 박람회", "2018-10-19", "2018-10-19", "홀 6C", "exhibition", 5100],
+  ["kx2018-103", "2018 오토위크", "2018-10-19", "2018-10-21", "홀 1, 2, 3", "exhibition", 32800],
+  ["kx2018-104", "2018 경기환경전 & 에코 비히클쇼", "2018-10-19", "2018-10-21", "홀 4", "trade", 14300],
+  ["kx2018-105", "2018 오토위크(자동차 업계 종사자)", "2018-10-19", "2018-10-21", "홀 1전시장 로비3", "exhibition", 17400],
+  ["kx2018-106", "2018 소재부품뿌리산업주간", "2018-10-23", "2018-10-25", "홀 5", "trade", 19300],
+  ["kx2018-107", "2018 진로직업체험박람회", "2018-10-24", "2018-10-26", "홀 7", "exhibition", 15500],
+  ["kx2018-108", "2018 대한민국우수상품전(G-Fair Korea)", "2018-10-24", "2018-10-27", "홀 1, 2, 3", "exhibition", 67100],
+  ["kx2018-109", "2018 서울국제공구전", "2018-10-30", "2018-11-02", "홀 1", "trade", 32300],
+  ["kx2018-110", "금속산업대전 2018", "2018-10-30", "2018-11-02", "홀 2, 3", "trade", 39600],
+  ["kx2018-111", "2018 국제철강 및 비철금속산업전", "2018-10-31", "2018-11-02", "홀 10", "trade", 32100],
+  ["kx2018-112", "디자인코리아 2018", "2018-10-31", "2018-11-04", "홀 4, 5", "exhibition", 49000],
+  ["kx2018-113", "월드 할랄 데이 2018 서울", "2018-11-01", "2018-11-03", "홀 미정", "exhibition", 15900],
+  ["kx2018-114", "2018 공학교육페스티벌", "2018-11-08", "2018-11-09", "홀 7B, 8A", "culture", 20600],
+  ["kx2018-115", "2018 시니어 리빙&복지 박람회(SENDEX 2018)", "2018-11-08", "2018-11-10", "홀 4B, 5", "culture", 30500],
+  ["kx2018-116", "2018 청소년 비즈쿨 페스티벌", "2018-11-08", "2018-11-10", "홀 7A", "culture", 13900],
+  ["kx2018-117", "2018 메디&슬립 코리아", "2018-11-08", "2018-11-10", "홀 4A", "exhibition", 10900],
+  ["kx2018-118", "제 29회 국제임신출산_육아용품박람회(맘앤베이비엑스포)", "2018-11-08", "2018-11-11", "홀 1, 2", "culture", 30600],
+  ["kx2018-119", "2018 코리아 렌탈쇼", "2018-11-08", "2018-11-11", "홀 10", "exhibition", 17300],
+  ["kx2018-120", "제4회 대한민국 안전산업박람회", "2018-11-14", "2018-11-16", "홀 3A, 4, 2", "trade", 34700],
+  ["kx2018-121", "2018 한국국제승강기엑스포", "2018-11-14", "2018-11-16", "홀 5", "trade", 11200],
+  ["kx2018-122", "2018 국제봉제기계&섬유산업전시회", "2018-11-14", "2018-11-16", "홀 9A, 9B", "trade", 11200],
+  ["kx2018-123", "2018 기상기후산업 박람회", "2018-11-14", "2018-11-16", "홀 3B", "exhibition", 13700],
+  ["kx2018-124", "메가쇼 2018 시즌2", "2018-11-15", "2018-11-18", "홀 7, 8", "exhibition", 32600],
+  ["kx2018-125", "2018 대한민국 과일산업대전", "2018-11-16", "2018-11-18", "홀 10A", "trade", 14000],
+  ["kx2018-126", "남양주 라온프라이빗 입주박람회", "2018-11-17", "2018-11-18", "홀 10B", "exhibition", 7200],
+  ["kx2018-127", "2018 제7회 대한민국 교육기부 박람회", "2018-11-22", "2018-11-25", "홀 1, 2", "exhibition", 34300],
+  ["kx2018-128", "2018 대한민국펫산업박람회(케이펫페어 일산)", "2018-11-23", "2018-11-25", "홀 7, 8", "culture", 35500],
+  ["kx2018-129", "인사이드 핀테크 컨퍼런스 & 엑스포 2018", "2018-11-29", "2018-11-30", "홀 6", "tech", 11200],
+  ["kx2018-130", "한이음 엑스포 2018", "2018-11-30", "2018-12-01", "홀 3A", "exhibition", 26500],
+  ["kx2018-131", "SW중심대학전시관", "2018-11-30", "2018-12-01", "홀 3B", "exhibition", 30500],
+  ["kx2018-132", "제6회 월드식품박람회 2018", "2018-11-30", "2018-12-02", "홀 7A", "culture", 21400],
+  ["kx2018-133", "제4회 월드와인 및 주류 박람회 2018", "2018-11-30", "2018-12-02", "홀 7B", "exhibition", 27600],
+  ["kx2018-134", "[1부] 2018 코리아 크리스마스페어 & 기프트 원더랜드", "2018-12-07", "2018-12-09", "홀 3, 4", "culture", 25000],
+  ["kx2018-135", "[1부] K-베이비페어", "2018-12-07", "2018-12-09", "홀 5", "culture", 17200],
+  ["kx2018-136", "[2부] 2018 코리아 크리스마스페어 & 기프트 원더랜드", "2018-12-14", "2018-12-16", "홀 3, 4", "culture", 21400],
+  ["kx2018-137", "[2부] K-베이비페어", "2018-12-14", "2018-12-16", "홀 5", "culture", 15700],
+  ["kx2019-001", "2019 K-웰니스 설날 착한선물전", "2019-01-25", "2019-01-27", "홀 3A", "exhibition", 15400],
+  ["kx2019-002", "제30회 국제임신출산_육아용품박람회(맘앤베이비엑스포)", "2019-02-14", "2019-02-17", "홀 7, 8", "culture", 47800],
+  ["kx2019-003", "2019 코리아빌드위크(코리아빌드)", "2019-02-20", "2019-02-24", "홀 1B, 2, 3, 4, 5B", "exhibition", 124000],
+  ["kx2019-004", "2019 클린에어엑스포", "2019-02-20", "2019-02-24", "홀 5A", "exhibition", 28800],
+  ["kx2019-005", "2019 코리아빌드위크(인테리어디자인코리아)", "2019-02-20", "2019-02-24", "홀 7, 8A", "culture", 54300],
+  ["kx2019-006", "2019 코리아빌드위크(2019 경향부동산페어/대한민국건설산업대전)", "2019-02-20", "2019-02-24", "홀 1A", "trade", 25300],
+  ["kx2019-007", "2019 캠핑&피크닉페어", "2019-02-28", "2019-03-03", "홀 7, 8", "culture", 41900],
+  ["kx2019-008", "2019 SBS골프 대한민국 골프대전", "2019-02-28", "2019-03-03", "홀 2, 3", "exhibition", 63100],
+  ["kx2019-009", "Automotive Testing Expo 2019", "2019-03-06", "2019-03-08", "홀 7A", "exhibition", 19200],
+  ["kx2019-010", "제15회 한국국제냉난방공조전", "2019-03-12", "2019-03-15", "홀 7, 8", "trade", 41200],
+  ["kx2019-011", "제24회 국제금형 및 관련기기전", "2019-03-12", "2019-03-16", "홀 1B, 2B, 1A, 2A, 3B", "trade", 94000],
+  ["kx2019-012", "제25회 국제플라스틱⋅고무산업전시회 (KOPLAS 2019)", "2019-03-12", "2019-03-16", "홀 4, 5", "trade", 38400],
+  ["kx2019-013", "국제 플라스틱+고무소재 및 복합재료 전시회 (M-KOPLAS 2019)", "2019-03-12", "2019-03-16", "홀 3A", "trade", 18800],
+  ["kx2019-014", "2019 전역예정장병 취업박람회", "2019-03-20", "2019-03-21", "홀 7", "exhibition", 11000],
+  ["kx2019-015", "2019서울모터쇼", "2019-03-28", "2019-04-07", "홀 1, 2, 3, 4, 5, 9, 10", "exhibition", 210300],
+  ["kx2019-016", "2019서울모터쇼(참가업체용)", "2019-03-28", "2019-04-07", "홀 1전시장 로비1", "exhibition", 21600],
+  ["kx2019-017", "2019 프리미엄펫쇼", "2019-04-12", "2019-04-14", "홀 7", "culture", 12500],
+  ["kx2019-018", "제약화장품산업기술주간 2019(제9회 국제 의약품 · 바이오산업전)", "2019-04-16", "2019-04-18", "홀 5A, 5B", "trade", 18700],
+  ["kx2019-019", "제약화장품산업기술주간 2019(제9회 국제물류산업대전, 제 14회 제약바이오화장품기술전, 제11회 국제화학장치산업전)", "2019-04-16", "2019-04-19", "홀 1, 2, 3", "trade", 73200],
+  ["kx2019-020", "제약화장품산업기술주간 2019(제13회 국제연구실험 및 첨단분석장비전, 제4회 국제화장품원료기술전)", "2019-04-16", "2019-04-19", "홀 4", "exhibition", 24900],
+  ["kx2019-021", "2019 매경 창업&프랜차이즈 쇼", "2019-04-18", "2019-04-20", "홀 7A", "exhibition", 19200],
+  ["kx2019-022", "코리아 나라장터 엑스포 2019", "2019-04-24", "2019-04-26", "홀 3, 4, 5", "exhibition", 51400],
+  ["kx2019-023", "2019 국제전자회로 및 실장산업전", "2019-04-24", "2019-04-26", "홀 7", "tech", 10700],
+  ["kx2019-024", "제27회 코베 베이비페어", "2019-04-25", "2019-04-28", "홀 1, 2", "culture", 45000],
+  ["kx2019-025", "제50회 MBC 건축박람회", "2019-05-02", "2019-05-05", "홀 1, 2, 3, 4, 5", "exhibition", 93300],
+  ["kx2019-026", "2019 서울캣쇼", "2019-05-03", "2019-05-05", "홀 7A", "exhibition", 11800],
+  ["kx2019-027", "플레이엑스포 2019", "2019-05-09", "2019-05-12", "홀 6, 7, 8", "exhibition", 48200],
+  ["kx2019-028", "2019 경기국제보트쇼", "2019-05-09", "2019-05-12", "홀 3, 4, 5", "exhibition", 51500],
+  ["kx2019-029", "서울 슈즈 앤 백 박람회", "2019-05-10", "2019-05-12", "홀 1", "exhibition", 17600],
+  ["kx2019-030", "2019 경기국제웹툰페어", "2019-05-10", "2019-05-12", "홀 10A", "culture", 14300],
+  ["kx2019-031", "2019 서울국제식품산업대전", "2019-05-21", "2019-05-24", "홀 1, 2, 3, 4, 5, 6, 7, 8", "trade", 169200],
+  ["kx2019-032", "2019 국토교통기술대전", "2019-05-22", "2019-05-24", "홀 미정", "exhibition", 13600],
+  ["kx2019-033", "2019 국토교통기술대전", "2019-05-29", "2019-05-31", "홀 10A, 10B", "exhibition", 13600],
+  ["kx2019-034", "2019 코리아렌탈쇼", "2019-06-06", "2019-06-09", "홀 5", "exhibition", 21000],
+  ["kx2019-035", "제31회 맘앤베이비엑스포", "2019-06-06", "2019-06-09", "홀 2, 3", "culture", 33300],
+  ["kx2019-036", "2019 더 골프쇼", "2019-06-06", "2019-06-09", "홀 10A", "exhibition", 19800],
+  ["kx2019-037", "2019 하나투어 여행박람회", "2019-06-07", "2019-06-09", "홀 7, 8", "culture", 36200],
+  ["kx2019-038", "2019 국제아웃도어캠핑&레포츠페스티벌", "2019-06-07", "2019-06-09", "홀 9", "culture", 13100],
+  ["kx2019-039", "2019 귀어귀촌 박람회", "2019-06-07", "2019-06-09", "홀 10B", "exhibition", 16100],
+  ["kx2019-040", "2019 대한민국 마케팅 Fair", "2019-06-13", "2019-06-15", "홀 10B", "exhibition", 16900],
+  ["kx2019-041", "2019 고양 FCI 아시아, 아프리카 & 오세아니아 섹션 쇼", "2019-06-15", "2019-06-16", "홀 9", "exhibition", 9400],
+  ["kx2019-042", "2019 세계태양에너지엑스포", "2019-06-19", "2019-06-21", "홀 4A", "trade", 15900],
+  ["kx2019-043", "케이샵 2019", "2019-06-19", "2019-06-21", "홀 1", "exhibition", 15700],
+  ["kx2019-044", "2019 세계에너지저장시스템엑스포", "2019-06-19", "2019-06-21", "홀 5A", "trade", 17900],
+  ["kx2019-045", "2019 세계탄소제로엑스포", "2019-06-19", "2019-06-21", "홀 4B, 5B", "exhibition", 28600],
+  ["kx2019-046", "2019 해양수산·양식·식품 수출박람회(2019 Sea Farm Show)", "2019-06-20", "2019-06-22", "홀 9A", "trade", 15800],
+  ["kx2019-047", "여성발명왕 Expo", "2019-06-20", "2019-06-23", "홀 9B", "exhibition", 14400],
+  ["kx2019-048", "메가쇼 2019 시즌1", "2019-06-20", "2019-06-23", "홀 7, 8", "exhibition", 41800],
+  ["kx2019-049", "2019 국제 LED & OLED EXPO", "2019-06-25", "2019-06-27", "홀 3, 4", "exhibition", 30300],
+  ["kx2019-050", "인사이드 3D프린팅 2019", "2019-06-26", "2019-06-28", "홀 5", "exhibition", 18400],
+  ["kx2019-051", "나노코리아 2019", "2019-07-03", "2019-07-05", "홀 4, 5", "exhibition", 37300],
+  ["kx2019-052", "창립 50주년 기념 고속도로 특별박람회", "2019-07-04", "2019-07-05", "홀 6A, 6B", "exhibition", 8500],
+  ["kx2019-053", "제2회 한국국제전자담배박람회", "2019-07-05", "2019-07-07", "홀 7", "tech", 12700],
+  ["kx2019-054", "케이팜 귀농귀촌박람회 2019", "2019-07-18", "2019-07-20", "홀 7", "exhibition", 15000],
+  ["kx2019-055", "2019 대한민국생활낚시박람회", "2019-07-19", "2019-07-21", "홀 4A, 4B", "exhibition", 11300],
+  ["kx2019-056", "2019 청소년 발명 페스티벌", "2019-07-25", "2019-07-27", "홀 4", "culture", 13600],
+  ["kx2019-057", "2019 미베 베이비엑스포 / 미래유아교육박람회", "2019-08-15", "2019-08-18", "홀 4, 5", "culture", 30200],
+  ["kx2019-058", "제4회 대한민국 국제 관광박람회", "2019-08-15", "2019-08-18", "홀 3", "exhibition", 23600],
+  ["kx2019-059", "2019 한국관상어산업박람회 및 제5회 해양수산부장관배 한국관상어품평회", "2019-08-16", "2019-08-18", "홀 7A", "trade", 12900],
+  ["kx2019-060", "제51회 MBC건축박람회", "2019-08-22", "2019-08-25", "홀 3, 4, 1, 2, 5A", "exhibition", 93400],
+  ["kx2019-061", "제12회 국제자원순환산업전/2019 한국 중장비부품 및 어태치먼트 전시회", "2019-08-28", "2019-08-30", "홀 7", "trade", 13500],
+  ["kx2019-062", "2019 로보유니버스 & K드론", "2019-08-28", "2019-08-30", "홀 미정", "tech", 15400],
+  ["kx2019-063", "2019 KOFURN(한국국제가구 및 인테리어산업대전)/한국국제목공기계전시회", "2019-08-29", "2019-09-01", "홀 3, 5, 4", "trade", 71800],
+  ["kx2019-064", "2019 대한민국 에너지대전", "2019-09-03", "2019-09-06", "홀 1, 2", "trade", 28300],
+  ["kx2019-065", "2019 월드 스마트시티 엑스포", "2019-09-04", "2019-09-06", "홀 3, 4, 5", "tech", 43800],
+  ["kx2019-066", "2019 전역예정장병 취업박람회", "2019-09-05", "2019-09-05", "홀 6", "exhibition", 5500],
+  ["kx2019-067", "2019 한국골프용품전 in Summer", "2019-09-05", "2019-09-08", "홀 7A", "exhibition", 25700],
+  ["kx2019-068", "대한민국 음향음악산업전 2019", "2019-09-18", "2019-09-20", "홀 8A", "trade", 15800],
+  ["kx2019-069", "2019 대한민국 교회건축&리모델링 박람회", "2019-09-18", "2019-09-20", "홀 미정", "exhibition", 18600],
+  ["kx2019-070", "DMZ 페스타", "2019-09-18", "2019-09-21", "홀 5", "exhibition", 17500],
+  ["kx2019-071", "2019 매경 창업 & 프랜차이즈 쇼", "2019-09-19", "2019-09-21", "홀 4A", "exhibition", 14100],
+  ["kx2019-072", "2019 티몬국제어린이초등교육박람회", "2019-09-19", "2019-09-22", "홀 7A", "exhibition", 16900],
+  ["kx2019-073", "제5회 대한민국 안전산업박람회", "2019-09-25", "2019-09-27", "홀 1B, 2, 3, 4B", "trade", 51900],
+  ["kx2019-074", "2019 기상기후산업 박람회", "2019-09-25", "2019-09-27", "홀 1", "exhibition", 17100],
+  ["kx2019-075", "2019 국제도로교통박람회", "2019-09-25", "2019-09-27", "홀 5", "exhibition", 11800],
+  ["kx2019-076", "2019 한국건설안전박람회", "2019-09-25", "2019-09-27", "홀 1A", "trade", 17200],
+  ["kx2019-077", "2019 경기환경산업전", "2019-10-01", "2019-10-02", "홀 5", "trade", 10800],
+  ["kx2019-078", "제28회 코베 베이비페어", "2019-10-03", "2019-10-06", "홀 미정", "culture", 14900],
+  ["kx2019-079", "2019 코베 유아교육전", "2019-10-03", "2019-10-06", "홀 7, 8", "culture", 50900],
+  ["kx2019-080", "2019 오토살롱위크", "2019-10-03", "2019-10-06", "홀 1, 2, 3, 4", "exhibition", 60100],
+  ["kx2019-081", "2019 호텔쇼&레스토랑 산업전", "2019-10-09", "2019-10-12", "홀 8, 7", "trade", 42600],
+  ["kx2019-082", "2019 로보월드", "2019-10-09", "2019-10-12", "홀 1, 2", "exhibition", 34900],
+  ["kx2019-083", "2019 카페&베이커리페어", "2019-10-09", "2019-10-12", "홀 옥외", "culture", 23300],
+  ["kx2019-084", "2019 대한민국 뷰티박람회", "2019-10-10", "2019-10-13", "홀 3, 4, 5", "culture", 67800],
+  ["kx2019-085", "한국포장전 2019", "2019-10-15", "2019-10-18", "홀 7, 8", "exhibition", 51300],
+  ["kx2019-086", "2019 한국산업대전 (한국기계전 & 머신소프트)", "2019-10-22", "2019-10-25", "홀 2, 3, 4, 5", "trade", 70900],
+  ["kx2019-087", "2019 한국산업대전 (2019 서울국제공구전)", "2019-10-22", "2019-10-25", "홀 1A, 1B", "trade", 24200],
+  ["kx2019-088", "2019 교육기부박람회", "2019-10-23", "2019-10-26", "홀 7", "exhibition", 14200],
+  ["kx2019-089", "2019 대한민국 미래교육 한마당", "2019-10-23", "2019-10-26", "홀 8A", "exhibition", 25100],
+  ["kx2019-090", "2019 한국골프용품전", "2019-10-24", "2019-10-27", "홀 10B", "exhibition", 22300],
+  ["kx2019-091", "2019 첨단소재부품뿌리산업기술대전", "2019-10-30", "2019-11-01", "홀 7", "trade", 28200],
+  ["kx2019-092", "대한민국우수상품전시회(G-FAIR KOREA 2019)", "2019-10-31", "2019-11-03", "홀 1, 2, 3", "tech", 74900],
+  ["kx2019-093", "2019 산학협력 EXPO", "2019-11-06", "2019-11-08", "홀 4", "exhibition", 18400],
+  ["kx2019-094", "2019 시니어 라이프 & 복지 박람회", "2019-11-06", "2019-11-08", "홀 3", "exhibition", 14200],
+  ["kx2019-095", "디자인코리아 페스티벌 2019", "2019-11-06", "2019-11-10", "홀 5", "culture", 20300],
+  ["kx2019-096", "제4회 2019 경기도 교통안전 박람회", "2019-11-08", "2019-11-09", "홀 7A", "trade", 9200],
+  ["kx2019-097", "메가쇼 2019 시즌2", "2019-11-14", "2019-11-17", "홀 2, 3, 4", "exhibition", 52500],
+  ["kx2019-098", "2019 대한민국 과일산업대전", "2019-11-15", "2019-11-17", "홀 미정", "trade", 14400],
+  ["kx2019-099", "2019 대한민국 목재산업박람회", "2019-11-15", "2019-11-17", "홀 1", "exhibition", 13400],
+  ["kx2019-100", "2019 청정임산물대전", "2019-11-15", "2019-11-17", "홀 옥외", "exhibition", 16100],
+  ["kx2019-101", "제33회 맘앤베이비엑스포", "2019-11-21", "2019-11-24", "홀 1, 2", "culture", 37800],
+  ["kx2019-102", "제26회 국제유아교육박람회", "2019-11-21", "2019-11-24", "홀 옥외", "culture", 21000],
+  ["kx2019-103", "2019 케이펫페어 일산(대한민국펫산업박람회)", "2019-11-22", "2019-11-24", "홀 7, 8", "culture", 31000],
+  ["kx2019-104", "제7회 월드식품박람회 2019", "2019-11-29", "2019-12-01", "홀 7", "culture", 30800],
+  ["kx2019-105", "제5회 월드와인 및 주류박람회 2019", "2019-11-29", "2019-12-01", "홀 옥외", "exhibition", 29900],
+  ["kx2019-106", "테크핀 아시아 2019", "2019-12-05", "2019-12-06", "홀 6", "tech", 7400],
+  ["kx2019-107", "2019 코리아 크리스마스 페어", "2019-12-05", "2019-12-08", "홀 3, 4, 5, 6A", "culture", 75800],
+  ["kx2019-108", "2019 경기마켓데이", "2019-12-05", "2019-12-08", "홀 옥외", "exhibition", 25700],
+  ["kx2019-109", "2019 대한민국 드론박람회", "2019-12-11", "2019-12-12", "홀 4A", "tech", 8100],
+  ["kx2019-110", "LH하우징 플랫폼 페스타", "2019-12-18", "2019-12-20", "홀 3A, 3A", "exhibition", 11100],
+  ["kx2019-111", "2019 코리아 프리미어 도그쇼", "2019-12-20", "2019-12-22", "홀 8B", "exhibition", 13500],
+  ["kx2020-001", "제3회 2020 K-웰니스 착한선물전", "2020-01-10", "2020-01-12", "홀 3A", "exhibition", 17100],
+  ["kx2020-002", "제53회 MBC건축박람회", "2020-05-08", "2020-05-11", "홀 2A, 2B, 1, 3", "exhibition", 43900],
+  ["kx2020-003", "2020 서울 캣 쇼", "2020-05-29", "2020-05-31", "홀 4", "exhibition", 16400],
+  ["kx2020-004", "2020 더골프쇼 KOREA", "2020-06-04", "2020-06-07", "홀 10A", "exhibition", 23100],
+  ["kx2020-005", "2020 한국국제낚시박람회", "2020-06-05", "2020-06-07", "홀 3", "exhibition", 18600],
+  ["kx2020-006", "2020 국제아웃도어캠핑&레포츠페스티벌", "2020-06-05", "2020-06-07", "홀 9", "culture", 11400],
+  ["kx2020-007", "마이다이어트페어 2020", "2020-06-11", "2020-06-14", "홀 미정", "culture", 19900],
+  ["kx2020-008", "2020 프리미엄 펫쇼", "2020-06-12", "2020-06-14", "홀 9B", "culture", 11500],
+  ["kx2020-009", "2020 전역예정장병 취업박람회", "2020-06-17", "2020-06-18", "홀 1", "exhibition", 12900],
+  ["kx2020-010", "2020 금속산업대전", "2020-06-17", "2020-06-20", "홀 2, 3", "trade", 39600],
+  ["kx2020-011", "메가쇼 2020 시즌1", "2020-06-18", "2020-06-21", "홀 7, 8", "exhibition", 34100],
+  ["kx2020-012", "제34회 맘앤베이비 엑스포", "2020-06-25", "2020-06-28", "홀 3, 4", "culture", 29200],
+  ["kx2020-013", "2020 고양가구박람회", "2020-06-25", "2020-06-28", "홀 2", "exhibition", 22200],
+  ["kx2020-014", "나노코리아 2020", "2020-07-01", "2020-07-03", "홀 4", "exhibition", 19400],
+  ["kx2020-015", "아템페어 2020(제12회 국제접착코팅필름융합소재전)", "2020-07-01", "2020-07-03", "홀 5", "trade", 13400],
+  ["kx2020-016", "수소모빌리티+쇼", "2020-07-01", "2020-07-03", "홀 3", "tech", 19300],
+  ["kx2020-017", "2020 캠핑앤피크닉페어", "2020-07-02", "2020-07-05", "홀 1, 2", "culture", 43400],
+  ["kx2020-018", "2020 대한민국 명품특산물 페스티벌", "2020-07-16", "2020-07-19", "홀 미정", "culture", 15400],
+  ["kx2020-019", "2020 대한민국 생활낚시박람회", "2020-07-17", "2020-07-19", "홀 8", "exhibition", 12100],
+  ["kx2020-020", "제22회 국제포장기자재전/제10회 국제물류산업대전 제15회 국제제약바이오화장품기술전 제12회 국제화학장치산업전 제14회 국제연구실험 및 첨단분석장비전 제10회 국제의약품바이오산업전 제5회 국제화장품원료기술전", "2020-07-27", "2020-07-30", "홀 1, 2, 3, 4, 5", "trade", 110800],
+  ["kx2020-021", "대한민국 방방곡곡 여행박람회 / 제5회 대한민국 국제 관광박람회", "2020-08-13", "2020-08-16", "홀 3", "culture", 19600],
+  ["kx2020-022", "미베 베이비엑스포", "2020-08-13", "2020-08-16", "홀 4, 5", "culture", 48600],
+  ["kx2020-023", "2020 DMZ 포럼", "2020-09-17", "2020-09-18", "홀 옥외", "exhibition", 11400],
+  ["kx2020-024", "제23회 대한민국우수상품전시회", "2020-10-21", "2020-10-23", "홀 6", "exhibition", 12200],
+  ["kx2020-025", "제34회 코베 베이비페어 / 2020 코베 유아교육전", "2020-10-22", "2020-10-25", "홀 7", "culture", 21000],
+  ["kx2020-026", "2020 홈인테리어테크", "2020-10-22", "2020-10-25", "홀 3", "tech", 24800],
+  ["kx2020-027", "2020 한국건설안전박람회", "2020-10-28", "2020-10-30", "홀 5", "trade", 18900],
+  ["kx2020-028", "2020 월드 스마트시티 엑스포", "2020-10-28", "2020-10-30", "홀 미정", "tech", 19100],
+  ["kx2020-029", "2020 K-방역 엑스포", "2020-10-28", "2020-10-30", "홀 4", "exhibition", 15700],
+  ["kx2020-030", "2020 첨단소재부품뿌리산업기술대전", "2020-10-28", "2020-10-30", "홀 미정", "trade", 11100],
+  ["kx2020-031", "2020 로보월드", "2020-10-28", "2020-10-31", "홀 1, 2", "exhibition", 40400],
+  ["kx2020-032", "제54회 MBC건축박람회", "2020-11-05", "2020-11-08", "홀 3, 1, 2", "exhibition", 42100],
+  ["kx2020-033", "국제 LED & OLED EXPO 2020", "2020-11-11", "2020-11-13", "홀 7", "exhibition", 11700],
+  ["kx2020-034", "메가쇼 2020 시즌2", "2020-11-12", "2020-11-15", "홀 2, 3, 4", "exhibition", 54400],
+  ["kx2020-035", "K-PRINT 2020, K-Label 2020, K-SignAD 2020", "2020-11-12", "2020-11-15", "홀 8", "exhibition", 25000],
+  ["kx2020-036", "2020 대한민국방위산업전", "2020-11-18", "2020-11-20", "홀 9, 10", "trade", 21400],
+  ["kx2020-037", "호텔쇼(2020 대한민국 숙박산업대전)", "2020-11-19", "2020-11-22", "홀 1A", "trade", 20500],
+  ["kx2020-038", "2020 한국국제가구 및 인테리어산업대전", "2020-11-19", "2020-11-22", "홀 2, 3", "trade", 48000],
+  ["kx2020-039", "제35회 맘앤베이비엑스포", "2020-11-19", "2020-11-22", "홀 4", "culture", 22800],
+  ["kx2020-040", "2020 카페&베이커리페어 (동시개최: 2020 호텔쇼&레스토랑산업전)", "2020-11-19", "2020-11-22", "홀 1B", "trade", 18000],
+  ["kx2020-041", "2020 케이펫페어 일산 (대한민국펫산업박람회)", "2020-11-20", "2020-11-22", "홀 7, 8", "culture", 27500],
+  ["kx2020-042", "RETECH 2020 제13회 국제환경장비 및 자원순환산업전", "2020-11-26", "2020-11-28", "홀 8A", "trade", 12500],
+  ["kx2020-043", "2020 한국 중장비 전시회 - 부품 및 어태치먼트 판매대전", "2020-11-26", "2020-11-28", "홀 8B", "trade", 15500],
+  ["kx2020-044", "2020 스마트 건설기술·안전대전", "2020-11-27", "2020-11-27", "홀 10A", "tech", 5700],
+  ["kx2020-045", "겟잇쇼(월드식품.와인주류박람회)킨텍스 2020", "2020-11-27", "2020-11-29", "홀 7", "culture", 12900],
+  ["kx2020-046", "2020 경기도청년든든페스티벌", "2020-11-28", "2020-11-28", "홀 1", "culture", 4100],
+  ["kx2021-001", "2021 캠핑앤피크닉페어", "2021-03-04", "2021-03-07", "홀 7, 8", "culture", 40100],
+  ["kx2021-002", "제10회 더골프쇼 KOREA 시즌1", "2021-03-11", "2021-03-14", "홀 7A", "exhibition", 16200],
+  ["kx2021-003", "2021 코리아빌드위크", "2021-03-18", "2021-03-21", "홀 2, 3, 4, 1, 5", "exhibition", 76100],
+  ["kx2021-004", "제25회 한국국제낚시박람회", "2021-03-26", "2021-03-28", "홀 7", "exhibition", 11200],
+  ["kx2021-005", "제36회 맘앤베이비엑스포", "2021-04-01", "2021-04-04", "홀 7", "culture", 15300],
+  ["kx2021-006", "2021 대한민국 기본소득 박람회", "2021-04-28", "2021-04-30", "홀 5A", "exhibition", 16400],
+  ["kx2021-007", "제56회 MBC건축박람회/공공시설 및 조경박람회/서울조명박람회/디지털프린팅·사인엑스포/홈&리빙페어/기프트쇼/차·공예박람회/가구엑스포/스포츠·레저산업박람회", "2021-05-06", "2021-05-09", "홀 1, 2, 3, 4", "tech", 89100],
+  ["kx2021-008", "2021 서울캣쇼 21", "2021-05-07", "2021-05-09", "홀 5B", "exhibition", 11300],
+  ["kx2021-009", "제20회 세계 보안 엑스포 (SECON 2021)", "2021-05-12", "2021-05-14", "홀 3, 4", "exhibition", 26300],
+  ["kx2021-010", "제41회 코베 베이비페어 & 유아교육전", "2021-05-13", "2021-05-16", "홀 9", "culture", 16400],
+  ["kx2021-011", "2021 국제포장기자재전 스페셜 & 2021 제약화장품위크, 제11회 국제물류산업대전, 국제포장기자재전 스페셜, 제16회 국제제약∙바이오∙화장품기술전, 제13회 국제화학장치산업전, 제15회 국제연구·실험 및 첨단분석장비전, 제6회 국제화장품원료·기술전", "2021-05-21", "2021-05-28", "홀 미정", "trade", 27200],
+  ["kx2021-012", "2021 DMZ 포럼", "2021-05-21", "2021-05-22", "홀 6", "exhibition", 9000],
+  ["kx2021-013", "2021 국제포장기자재전 외", "2021-05-25", "2021-05-28", "홀 2B, 2A, 3, 4, 5", "exhibition", 96000],
+  ["kx2021-014", "2021 케이펫페어 일산 (대한민국펫산업박람회)", "2021-05-28", "2021-05-30", "홀 7, 8A", "culture", 23700],
+  ["kx2021-015", "2021 국제 아웃도어 캠핑&레포츠 페스티벌", "2021-06-04", "2021-06-06", "홀 7, 8A", "culture", 38800],
+  ["kx2021-016", "Bravo! 2021 고양시 중장년일자리 박람회", "2021-06-10", "2021-06-10", "홀 6C", "exhibition", 5800],
+  ["kx2021-017", "2021 고양가구박람회", "2021-06-10", "2021-06-13", "홀 1", "exhibition", 22400],
+  ["kx2021-018", "제11회 더골프쇼 KOREA 시즌2", "2021-06-10", "2021-06-13", "홀 7A", "exhibition", 25400],
+  ["kx2021-019", "2021 세계 태양에너지 엑스포", "2021-06-16", "2021-06-18", "홀 2", "trade", 19300],
+  ["kx2021-020", "메가쇼 2021 시즌1 (팔도밥상 FAIR)", "2021-06-17", "2021-06-20", "홀 7, 8", "tech", 39500],
+  ["kx2021-021", "제37회 맘앤베이비엑스포", "2021-06-24", "2021-06-27", "홀 7", "culture", 17800],
+  ["kx2021-022", "2021 대한민국생활낚시박람회", "2021-07-02", "2021-07-04", "홀 7", "exhibition", 17700],
+  ["kx2021-023", "2021 국제안전보건전시회", "2021-07-05", "2021-07-08", "홀 8", "trade", 21500],
+  ["kx2021-024", "나노코리아 2021", "2021-07-07", "2021-07-09", "홀 4A", "exhibition", 15000],
+  ["kx2021-025", "아템페어 2021", "2021-07-07", "2021-07-09", "홀 5", "culture", 17000],
+  ["kx2021-026", "2021년 온라인전시회", "2021-07-12", "2021-07-16", "홀 6A", "exhibition", 25300],
+  ["kx2021-027", "2021 서울국제식품산업대전", "2021-07-27", "2021-07-30", "홀 2, 3A, 3B, 4", "trade", 73300],
+  ["kx2021-028", "한국 소재 및 복합재료 전시회 (K-Mtech 2021)", "2021-08-25", "2021-08-28", "홀 8B", "trade", 23100],
+  ["kx2021-029", "제26회 국제 플라스틱 고무산업전 (KOPLAS 2021)", "2021-08-25", "2021-08-28", "홀 8A", "trade", 14100],
+  ["kx2021-030", "K-PRINT 2021(K-Label, K-signAD)", "2021-08-26", "2021-08-28", "홀 7", "exhibition", 17800],
+  ["kx2021-031", "궁디팡팡 캣페스타", "2021-09-03", "2021-09-05", "홀 7A", "exhibition", 14500],
+  ["kx2021-032", "2021 월드 스마트시티 엑스포", "2021-09-08", "2021-09-10", "홀 4, 5", "tech", 36400],
+  ["kx2021-033", "2021수소모빌리티+쇼", "2021-09-08", "2021-09-11", "홀 9", "tech", 17300],
+  ["kx2021-034", "2021 대한민국 국제 관광박람회 / 대한민국 방방곡곡 여행박람회", "2021-09-09", "2021-09-12", "홀 7", "culture", 19200],
+  ["kx2021-035", "2021 달.고.나. 정책지원박람회", "2021-09-13", "2021-09-15", "홀 6B", "exhibition", 16300],
+  ["kx2021-036", "한국국제승강기엑스포, 한국빌딩·공동주택 및 공장관리산업전", "2021-09-14", "2021-09-16", "홀 5", "trade", 12200],
+  ["kx2021-037", "한국건설안전박람회", "2021-09-14", "2021-09-16", "홀 2A", "trade", 11300],
+  ["kx2021-038", "2021년 3차 전역예정장병 온라인 취업박람회", "2021-09-15", "2021-09-17", "홀 6A", "exhibition", 14700],
+  ["kx2021-039", "2021 코리아 나라장터 엑스포", "2021-09-29", "2021-10-01", "홀 4, 5", "exhibition", 51200],
+  ["kx2021-040", "2021 대한민국 명품 특산물 페스티벌", "2021-09-30", "2021-10-03", "홀 10", "culture", 21200],
+  ["kx2021-041", "2021 오토살롱위크", "2021-09-30", "2021-10-03", "홀 1, 2, 3", "exhibition", 87000],
+  ["kx2021-042", "제44회 코베 베이비페어 & 유아교육전 하반기", "2021-09-30", "2021-10-03", "홀 9", "culture", 28100],
+  ["kx2021-043", "2021 고양시·KTA 태권도장교육산업박람회", "2021-10-02", "2021-10-03", "홀 6B, 6C", "exhibition", 10400],
+  ["kx2021-044", "에스씨엠 페어 2021", "2021-10-06", "2021-10-08", "홀 2", "culture", 10600],
+  ["kx2021-045", "2021 그린뉴딜 엑스포", "2021-10-06", "2021-10-08", "홀 1", "exhibition", 18500],
+  ["kx2021-046", "제14회 청년일자리 박람회", "2021-10-07", "2021-10-07", "홀 6C", "exhibition", 4100],
+  ["kx2021-047", "제13회 대한민국 뷰티박람회(K-뷰티 엑스포 2021)", "2021-10-07", "2021-10-09", "홀 4, 5", "culture", 31100],
+  ["kx2021-048", "2021 경기국제웹툰페어", "2021-10-07", "2021-10-10", "홀 3A", "culture", 24700],
+  ["kx2021-049", "2021 국제아웃도어캠핑&레포츠페스티벌 더 파이널 시즌", "2021-10-08", "2021-10-10", "홀 9", "culture", 15200],
+  ["kx2021-050", "2021 한국관상어산업박람회", "2021-10-08", "2021-10-10", "홀 7A", "exhibition", 18100],
+  ["kx2021-051", "인사이드 3D 프린팅 컨퍼런스 & 엑스포", "2021-10-13", "2021-10-15", "홀 5", "exhibition", 11200],
+  ["kx2021-052", "2021 국제광융합엑스포", "2021-10-13", "2021-10-15", "홀 3A", "exhibition", 10600],
+  ["kx2021-053", "2021 소부장뿌리기술대전", "2021-10-13", "2021-10-15", "홀 4", "exhibition", 18900],
+  ["kx2021-054", "2021 대한민국 에너지대전", "2021-10-13", "2021-10-15", "홀 1, 2", "trade", 29300],
+  ["kx2021-055", "2021 탄소중립 엑스포", "2021-10-13", "2021-10-15", "홀 3B", "exhibition", 11000],
+  ["kx2021-056", "2021 카페&베이커리페어", "2021-10-14", "2021-10-17", "홀 10A", "culture", 22500],
+  ["kx2021-057", "호텔쇼 (2021 대한민국 숙박산업대전)", "2021-10-14", "2021-10-17", "홀 10B", "trade", 23500],
+  ["kx2021-058", "2021 한국산업대전", "2021-10-19", "2021-10-22", "홀 2, 3, 4A", "trade", 75300],
+  ["kx2021-059", "2021 한국포장전", "2021-10-19", "2021-10-22", "홀 7, 8A", "exhibition", 40300],
+  ["kx2021-060", "제12회 더골프쇼 KOREA 시즌3", "2021-10-21", "2021-10-24", "홀 10A", "exhibition", 26000],
+  ["kx2021-061", "금속산업대전 2021", "2021-10-27", "2021-10-29", "홀 3A, 3B", "trade", 12400],
+  ["kx2021-062", "2021 로보월드 (국제로봇산업대전)", "2021-10-27", "2021-10-30", "홀 1, 2", "tech", 45200],
+  ["kx2021-063", "대한민국 우수상품전시회 (G-FAIR KOREA 2021)", "2021-10-28", "2021-10-30", "홀 4, 5", "tech", 29000],
+  ["kx2021-064", "2021 한국국제가구 및 인테리어산업대전 & 한국국제목공기계전시회 (KOFURN 2021)", "2021-10-28", "2021-10-31", "홀 7, 8", "trade", 46700],
+  ["kx2021-065", "제28회 식품기기전시회", "2021-11-05", "2021-11-06", "홀 7A", "culture", 9100],
+  ["kx2021-066", "2021 국제도로교통박람회 (ROTREX 2021)", "2021-11-10", "2021-11-12", "홀 5A, 5B", "exhibition", 15800],
+  ["kx2021-067", "2021 아시아 콘크리트 엑스포", "2021-11-10", "2021-11-12", "홀 4A", "exhibition", 12800],
+  ["kx2021-068", "제11회 한국국제건설기계전", "2021-11-10", "2021-11-13", "홀 2, 3", "trade", 49100],
+  ["kx2021-069", "제38회 맘앤베이비엑스포", "2021-11-11", "2021-11-14", "홀 10", "culture", 19100],
+  ["kx2021-070", "2021 청소년 발명 페스티벌", "2021-11-11", "2021-11-13", "홀 1A", "culture", 13600],
+  ["kx2021-071", "2021 한국문화축제 K-Culture Fan Fair", "2021-11-13", "2021-11-14", "홀 7", "culture", 9700],
+  ["kx2021-072", "2021 글로벌 엔터테인먼트 엑스포", "2021-11-13", "2021-11-14", "홀 8", "exhibition", 7800],
+  ["kx2021-073", "2021 트래블쇼", "2021-11-18", "2021-11-21", "홀 5A", "exhibition", 23000],
+  ["kx2021-074", "2021 케이펫페어 일산(하) (대한민국펫산업박람회)", "2021-11-19", "2021-11-21", "홀 7, 8", "culture", 35200],
+  ["kx2021-075", "제14회 국제환경장비 및 자원순환산업전", "2021-11-24", "2021-11-26", "홀 7", "trade", 14500],
+  ["kx2021-076", "2021 스마트상점 · 리테일 엑스포", "2021-11-25", "2021-11-27", "홀 1", "tech", 18100],
+  ["kx2021-077", "2021 디지털 대전환 엑스포", "2021-11-25", "2021-11-28", "홀 2, 3, 4A", "tech", 56400],
+  ["kx2021-078", "2021서울모빌리티쇼", "2021-11-26", "2021-12-05", "홀 9, 10", "tech", 47300],
+  ["kx2021-079", "제57회 MBC건축박람회/2021 시니어 라이프&복지 박람회/2021 스포츠·레저·건강산업 박람회/제29회 홈&리빙·기프트·차공예 박람회/2021 정원·조경 및 냉난방·건축설비박람회", "2021-12-02", "2021-12-05", "홀 3, 4A, 4B, 5A", "trade", 66700],
+  ["kx2021-080", "2021 ICT멘토링 엑스포", "2021-12-03", "2021-12-03", "홀 2A", "exhibition", 6300],
+  ["kx2021-081", "2021 한국유용곤충산업박람회", "2021-12-16", "2021-12-18", "홀 4", "exhibition", 17800],
+  ["kx2021-082", "2021 미베 베이비엑스포 & 유아교육박람회", "2021-12-16", "2021-12-19", "홀 5", "culture", 18800],
+  ["kx2021-083", "2021 대한민국 과학기술대전", "2021-12-22", "2021-12-24", "홀 2, 3", "exhibition", 34000],
+  ["kx2022-001", "2022 코리아빌드위크", "2022-03-03", "2022-03-06", "홀 2, 3, 4, 5A, 5B", "exhibition", 78400],
+  ["kx2022-002", "제13회 더골프쇼 KOREA 시즌1", "2022-03-10", "2022-03-13", "홀 10A", "exhibition", 17000],
+  ["kx2022-003", "2022 캠핑&피크닉페어", "2022-03-10", "2022-03-13", "홀 7, 8", "culture", 46800],
+  ["kx2022-004", "제39회 맘앤베이비엑스포", "2022-03-10", "2022-03-13", "홀 2A", "culture", 22900],
+  ["kx2022-005", "2022 경기국제보트쇼", "2022-03-11", "2022-03-13", "홀 4, 5", "exhibition", 25200],
+  ["kx2022-006", "2022 한국국제낚시박람회", "2022-03-11", "2022-03-13", "홀 3", "exhibition", 18400],
+  ["kx2022-007", "코리아 나라장터 엑스포", "2022-04-13", "2022-04-15", "홀 3, 4, 5", "exhibition", 46900],
+  ["kx2022-008", "제21회 세계보안엑스포 (SECON & eGISEC 2022)", "2022-04-20", "2022-04-22", "홀 3, 4, 5A", "exhibition", 45800],
+  ["kx2022-009", "케이팜 귀농귀촌 박람회", "2022-04-28", "2022-04-30", "홀 7A", "exhibition", 14000],
+  ["kx2022-010", "제 51회 코베 베이비페어&유아교육전", "2022-05-05", "2022-05-08", "홀 7", "culture", 19700],
+  ["kx2022-011", "2022 서울캣쇼", "2022-05-06", "2022-05-08", "홀 5A", "exhibition", 13000],
+  ["kx2022-012", "제60회 MBC건축박람회 / 2022 동아 공공시설 및 조경박람회 / 2022 서울 조명 박람회 / 2022 서울 디지털프린팅·사인 엑스포 / 제32회 동아 홈&리빙페어 / 제23회 서울 기프트쇼 / 제21회 동아 차·공예 박람회 / 제19회 동아 가구 엑스포 / 제19회 동아 스포츠·레저산업 박람회", "2022-05-12", "2022-05-15", "홀 1, 2, 3, 4", "tech", 69000],
+  ["kx2022-013", "2022 플레이엑스포", "2022-05-12", "2022-05-15", "홀 6, 7, 8A", "exhibition", 49800],
+  ["kx2022-014", "2022 케이펫페어 일산", "2022-05-20", "2022-05-22", "홀 10", "culture", 17000],
+  ["kx2022-015", "서울국제생산제조기술전(SIMTOS 2022)", "2022-05-23", "2022-05-27", "홀 1, 2, 3, 4, 5, 6, 7, 8", "trade", 169600],
+  ["kx2022-016", "2022 국제 아웃도어 캠핑&레포츠 페스티벌", "2022-06-03", "2022-06-05", "홀 10", "culture", 17500],
+  ["kx2022-017", "2022 서울국제식품산업대전", "2022-06-07", "2022-06-10", "홀 1, 2, 3, 4, 5", "trade", 112000],
+  ["kx2022-018", "제12회 국제물류산업대전 / 제23회 국제포장기자재전 / 제17회 제약바이오화장품기술전 / 제14회 국제화학장치산업전 / 제16회 국제연구실험 및 첨단분석장비전 / 제12회 국제의약품바이오산업전 / 제7회 국제화장품원료기술전", "2022-06-14", "2022-06-17", "홀 1, 2, 3, 4, 5, 7, 8A", "trade", 107200],
+  ["kx2022-019", "2022 국제광융합 O2O 엑스포", "2022-06-21", "2022-06-23", "홀 3A", "exhibition", 11300],
+  ["kx2022-020", "메가쇼 2022 시즌1", "2022-06-23", "2022-06-26", "홀 7, 8", "exhibition", 35100],
+  ["kx2022-021", "제40회 맘앤베이비엑스포", "2022-06-23", "2022-06-26", "홀 5", "culture", 24000],
+  ["kx2022-022", "제14회 더골프쇼 KOREA 시즌2", "2022-06-23", "2022-06-26", "홀 2A", "exhibition", 22100],
+  ["kx2022-023", "2022 고양가구박람회", "2022-06-23", "2022-06-26", "홀 1", "exhibition", 14800],
+  ["kx2022-024", "2022 RECARE 재활·복지박람회", "2022-06-24", "2022-06-26", "홀 4", "exhibition", 10700],
+  ["kx2022-025", "2022 세계태양에너지엑스포", "2022-06-29", "2022-07-01", "홀 3, 4A", "trade", 63300],
+  ["kx2022-026", "킨텍스 상상체험 키즈월드(여름)", "2022-07-01", "2022-08-21", "홀 10", "culture", 32000],
+  ["kx2022-027", "2022 대한민국 생활낚시박람회", "2022-07-01", "2022-07-03", "홀 5A", "exhibition", 17600],
+  ["kx2022-028", "2022 국제안전보건전시회", "2022-07-04", "2022-07-07", "홀 7, 8A", "trade", 37100],
+  ["kx2022-029", "제 20회 국제 나노기술 심포지엄 및 융합전시회 / 아템페어 2022", "2022-07-06", "2022-07-08", "홀 4, 5A", "culture", 37900],
+  ["kx2022-030", "170회 서울 코믹월드", "2022-07-23", "2022-07-24", "홀 4", "culture", 12200],
+  ["kx2022-031", "2022 청소년 발명 페스티벌", "2022-08-04", "2022-08-06", "홀 1A", "culture", 12900],
+  ["kx2022-032", "대한민국 국제 관광박람회(대한민국 방방곡곡 여행박람회) / 아시아스마트관광산업대전", "2022-08-11", "2022-08-14", "홀 3", "tech", 16500],
+  ["kx2022-033", "반찬전", "2022-08-12", "2022-08-15", "홀 5A, 5B", "exhibition", 25600],
+  ["kx2022-034", "2022 미베 베이비엑스포 & 유아교육박람회", "2022-08-12", "2022-08-15", "홀 4A", "culture", 17600],
+  ["kx2022-035", "제61회 MBC건축박람회 / 2022 동아 정원 및 조경박람회 / 2022 서울 냉난방 및 건축설비 박람회 / 제33회 동아 홈&리빙페어 / 제24회 서울 기프트쇼 / 제22회 동아 차·공예 박람회 / 제20회 동아 스포츠·레저산업 박람회 / 2022 센덱스", "2022-08-18", "2022-08-21", "홀 1A, 2, 3A, 3B, 4A, 4B", "trade", 99400],
+  ["kx2022-036", "2022 전라북도 귀농귀촌 상담홍보전 (신바람 귀농귀촌 전라북도와 함께)", "2022-08-19", "2022-08-21", "홀 8B", "exhibition", 15900],
+  ["kx2022-037", "K-PRINT 2022 / K-Label 2022 / K-Sign & AD 2022", "2022-08-25", "2022-08-27", "홀 7", "exhibition", 16000],
+  ["kx2022-038", "2022 여성발명왕EXPO", "2022-08-25", "2022-08-27", "홀 4A", "exhibition", 13700],
+  ["kx2022-039", "한국국제가구 및 인테리어산업대전", "2022-08-25", "2022-08-28", "홀 1, 2", "trade", 49000],
+  ["kx2022-040", "2023학년도 대전·세종·충남·충북 지역대학교 수시연합입시박람회", "2022-08-27", "2022-08-27", "홀 6A", "exhibition", 5400],
+  ["kx2022-041", "2022 스마트건설 EXPO", "2022-08-30", "2022-09-01", "홀 6, 8", "tech", 63200],
+  ["kx2022-042", "2022 국제물산업박람회", "2022-08-31", "2022-09-02", "홀 1, 2", "exhibition", 49300],
+  ["kx2022-043", "제6회 월드 스마트시티 엑스포", "2022-08-31", "2022-09-02", "홀 3, 4, 5", "tech", 61100],
+  ["kx2022-044", "제15회 폐기물·자원순환산업전 / 2022 한국 중장비 전시회 - 건설 및 환경장비 특별전", "2022-08-31", "2022-09-02", "홀 7A, 7B", "trade", 30600],
+  ["kx2022-045", "2022 이차전지 소재부품 및 장비전/한국 소재 복합재료 및 장비전", "2022-08-31", "2022-09-03", "홀 10B", "tech", 27500],
+  ["kx2022-046", "H2 MEET 2022", "2022-08-31", "2022-09-03", "홀 9, 10A", "exhibition", 44400],
+  ["kx2022-047", "2022 헬스케어·스파 산업박람회", "2022-09-15", "2022-09-17", "홀 1A", "exhibition", 18400],
+  ["kx2022-048", "2022 오토살롱위크", "2022-09-16", "2022-09-18", "홀 3, 4, 5", "exhibition", 35700],
+  ["kx2022-049", "금속산업대전 2022", "2022-09-21", "2022-09-23", "홀 3A, 3B", "trade", 17000],
+  ["kx2022-050", "대한민국방위산업전 2022", "2022-09-21", "2022-09-25", "홀 7, 8A, 8B", "trade", 62100],
+  ["kx2022-051", "DX KOREA 2022 전력지원체계 전시관", "2022-09-21", "2022-09-25", "홀 9", "exhibition", 27900],
+  ["kx2022-052", "궁디팡팡 캣페스타", "2022-09-23", "2022-09-25", "홀 2", "exhibition", 14500],
+  ["kx2022-053", "2022-3차 국군장병 취업박람회", "2022-09-28", "2022-09-28", "홀 6", "exhibition", 5200],
+  ["kx2022-054", "핸드아티코리아&일러스트코리아", "2022-09-30", "2022-10-03", "홀 7A", "exhibition", 22400],
+  ["kx2022-055", "제 56회 코베 베이비페어&유아교육전", "2022-09-30", "2022-10-03", "홀 9A, 9B", "culture", 25200],
+  ["kx2022-056", "희귀반려동물박람회", "2022-10-01", "2022-10-02", "홀 1A", "culture", 11500],
+  ["kx2022-057", "2022 국제아웃도어캠핑&레포츠페스티벌", "2022-10-01", "2022-10-03", "홀 7B, 8", "culture", 30500],
+  ["kx2022-058", "국제 모빌리티 산업전", "2022-10-05", "2022-10-07", "홀 1", "tech", 13100],
+  ["kx2022-059", "대한민국 뷰티박람회", "2022-10-06", "2022-10-08", "홀 4A, 5", "culture", 28100],
+  ["kx2022-060", "2022 경기국제웹툰페어", "2022-10-06", "2022-10-09", "홀 3A", "culture", 24700],
+  ["kx2022-061", "2022 카페&베이커리페어", "2022-10-06", "2022-10-09", "홀 2", "culture", 20700],
+  ["kx2022-062", "제 2회 유통·물류 및 공급망관리 산업전", "2022-10-12", "2022-10-14", "홀 2A, 2B", "trade", 13700],
+  ["kx2022-063", "22년도 제대(예정)군인 및 보훈가족을 위한 일자리 박람회", "2022-10-13", "2022-10-13", "홀 9B", "exhibition", 3500],
+  ["kx2022-064", "2022 국제 공구 및 스마트 용접 자동화전", "2022-10-18", "2022-10-21", "홀 4A, 4B", "tech", 18800],
+  ["kx2022-065", "2022 한국산업대전", "2022-10-18", "2022-10-21", "홀 2A, 3", "trade", 51200],
+  ["kx2022-066", "제16회 한국국제냉난방공조전", "2022-10-18", "2022-10-21", "홀 1, 2B", "trade", 47700],
+  ["kx2022-067", "2022 한국건설안전박람회", "2022-10-19", "2022-10-21", "홀 5", "trade", 18300],
+  ["kx2022-068", "제4회 앙데팡당KOREA 국제예술제", "2022-10-25", "2022-10-27", "홀 6A", "exhibition", 18100],
+  ["kx2022-069", "2022 로보월드(국제로봇산업대전)", "2022-10-26", "2022-10-29", "홀 1, 2, 3", "tech", 71500],
+  ["kx2022-070", "제25회 대한민국우수상품전시회", "2022-10-27", "2022-10-29", "홀 4, 5", "exhibition", 22000],
+  ["kx2022-071", "2022 스마트국토엑스포", "2022-11-02", "2022-11-04", "홀 5", "tech", 18100],
+  ["kx2022-072", "2022 소부장뿌리기술대전", "2022-11-02", "2022-11-04", "홀 2", "exhibition", 13500],
+  ["kx2022-073", "2022 탄소중립 EXPO", "2022-11-02", "2022-11-04", "홀 8", "exhibition", 10800],
+  ["kx2022-074", "2022 대한민국 에너지대전", "2022-11-02", "2022-11-04", "홀 7, 8A", "trade", 24400],
+  ["kx2022-075", "제15회 더골프쇼 KOREA 시즌3", "2022-11-03", "2022-11-06", "홀 10A", "exhibition", 14500],
+  ["kx2022-076", "제42회 맘앤베이비엑스포", "2022-11-10", "2022-11-13", "홀 2A, 2B", "culture", 18200],
+  ["kx2022-077", "트래블쇼 2022", "2022-11-10", "2022-11-13", "홀 5A", "exhibition", 15700],
+  ["kx2022-078", "메가쇼 2022 시즌 2", "2022-11-10", "2022-11-13", "홀 3, 4, 5B", "exhibition", 53500],
+  ["kx2022-079", "2022 스마트리테일·펫가전쇼", "2022-11-18", "2022-11-20", "홀 4A, 4B", "tech", 15200],
+  ["kx2022-080", "제3회 베이프코리아엑스포", "2022-11-18", "2022-11-20", "홀 8A", "exhibition", 13200],
+  ["kx2022-081", "2022 메가주", "2022-11-18", "2022-11-20", "홀 1, 2, 3", "culture", 34000],
+  ["kx2022-082", "2022 고양 디지털미디어테크쇼", "2022-11-23", "2022-11-25", "홀 3, 4", "tech", 35800],
+  ["kx2022-083", "콘텐츠 코리아 2022", "2022-11-23", "2022-11-25", "홀 5", "exhibition", 11900],
+  ["kx2022-084", "인공지능그랜드챌린지", "2022-11-24", "2022-11-24", "홀 Hall 6", "tech", 4000],
+  ["kx2022-085", "2022 국제아웃도어캠핑&레포츠페스티벌", "2022-11-25", "2022-11-27", "홀 7B, 8", "culture", 30500],
+  ["kx2022-086", "2022 Sea Farm Show 수산양식 박람회", "2022-12-01", "2022-12-03", "홀 8B", "exhibition", 11800],
+  ["kx2022-087", "2022 대한민국 소상공인대회 및 기능경진대회", "2022-12-02", "2022-12-03", "홀 3", "exhibition", 12500],
+  ["kx2022-088", "애니메이션 X 게임 페스티벌 2022", "2022-12-03", "2022-12-04", "홀 7, 8A", "tech", 20400],
+  ["kx2022-089", "2022 한국골프산업박람회", "2022-12-07", "2022-12-09", "홀 7", "exhibition", 14700],
+  ["kx2022-090", "2022 대한민국 과학기술대전", "2022-12-15", "2022-12-17", "홀 1", "exhibition", 17700],
+  ["kx2022-091", "제7회 KTA 태권도장 교육·산업 박람회", "2022-12-17", "2022-12-18", "홀 7B", "exhibition", 10800],
+  ["kx2022-092", "[KOFOOT] 2022 코리아풋볼위크", "2022-12-21", "2022-12-25", "홀 2A, 2B, 3A, 3B", "exhibition", 49100],
+  ["kx2023-001", "제43회 맘앤베이비엑스포", "2023-02-16", "2023-02-19", "홀 7", "culture", 14500],
+  ["kx2023-002", "코리아빌드위크", "2023-02-16", "2023-02-19", "홀 1, 2, 3, 4, 5A, 5B", "exhibition", 88300],
+  ["kx2023-003", "2023 경기국제보트쇼", "2023-03-03", "2023-03-05", "홀 3A, 4, 5", "exhibition", 42200],
+  ["kx2023-004", "2023 한국국제낚시박람회", "2023-03-03", "2023-03-05", "홀 2A, 2B", "exhibition", 18600],
+  ["kx2023-005", "2023 캠핑앤피크닉페어", "2023-03-09", "2023-03-12", "홀 7, 8", "culture", 34000],
+  ["kx2023-006", "제26회 국제금형 및 관련기기전", "2023-03-14", "2023-03-18", "홀 2, 3", "trade", 63100],
+  ["kx2023-007", "제27회 국제플라스틱 ․ 고무산업전시회 (KOPLAS 2023)", "2023-03-14", "2023-03-18", "홀 4, 5", "trade", 58800],
+  ["kx2023-008", "2023 서울펫쇼", "2023-03-17", "2023-03-19", "홀 10A", "culture", 16700],
+  ["kx2023-009", "2023 국제물산업박람회(WATER KOREA)", "2023-03-21", "2023-03-23", "홀 6A, 7, 8A", "exhibition", 41800],
+  ["kx2023-010", "제22회 세계보안엑스포", "2023-03-29", "2023-03-31", "홀 7, 8", "exhibition", 29100],
+  ["kx2023-011", "2023서울모빌리티쇼", "2023-03-31", "2023-04-09", "홀 옥외2, 1, 2, 3, 4, 5", "tech", 160100],
+  ["kx2023-012", "2023 전반기 국군장병 취업박람회", "2023-04-18", "2023-04-19", "홀 10A, 10B", "exhibition", 12400],
+  ["kx2023-013", "제13회 국제의약품·바이오산업전", "2023-04-18", "2023-04-21", "홀 4A", "trade", 23200],
+  ["kx2023-014", "제18회 국제제약∙바이오∙화장품기술전", "2023-04-18", "2023-04-21", "홀 2", "exhibition", 21100],
+  ["kx2023-015", "제13회 국제물류산업대전", "2023-04-18", "2023-04-21", "홀 1A", "trade", 15100],
+  ["kx2023-016", "제17회 국제연구·실험 및 첨단분석장비전", "2023-04-18", "2023-04-21", "홀 5", "exhibition", 16700],
+  ["kx2023-017", "제15회 국제화학장치산업전", "2023-04-18", "2023-04-21", "홀 3", "trade", 17100],
+  ["kx2023-018", "제8회 국제화장품원료·기술전", "2023-04-18", "2023-04-21", "홀 4B", "exhibition", 22900],
+  ["kx2023-019", "제 1회 국제콜드체인산업전", "2023-04-18", "2023-04-21", "홀 1B", "trade", 19300],
+  ["kx2023-020", "2023 코리아 나라장터 엑스포", "2023-04-26", "2023-04-28", "홀 3, 4, 5", "exhibition", 57500],
+  ["kx2023-021", "2023 서울캣쇼", "2023-04-28", "2023-04-30", "홀 7A", "exhibition", 13000],
+  ["kx2023-022", "코베 베이비페어&유아교육전 - 상반기", "2023-05-04", "2023-05-07", "홀 7", "culture", 23700],
+  ["kx2023-023", "2023 케이팜 시즌1", "2023-05-11", "2023-05-13", "홀 9B", "exhibition", 11000],
+  ["kx2023-024", "제63회 MBC건축박람회", "2023-05-11", "2023-05-14", "홀 2, 3, 4, 5", "exhibition", 65300],
+  ["kx2023-025", "플레이엑스포", "2023-05-11", "2023-05-14", "홀 6, 7, 8", "exhibition", 52000],
+  ["kx2023-026", "2023 메가주 일산", "2023-05-19", "2023-05-21", "홀 7, 8A", "culture", 36800],
+  ["kx2023-027", "대한민국 미술박람회 2023", "2023-05-25", "2023-05-28", "홀 8B", "exhibition", 23300],
+  ["kx2023-028", "2023 국제 아웃도어 캠핑&레포츠 페스티벌 - 5월", "2023-05-26", "2023-05-28", "홀 10, 9B", "culture", 25700],
+  ["kx2023-029", "2023 서울국제식품산업대전", "2023-05-30", "2023-06-02", "홀 1, 2, 3, 4, 5", "trade", 116900],
+  ["kx2023-030", "2023 대한민국 고졸인재 채용엑스포", "2023-05-31", "2023-06-01", "홀 6", "exhibition", 30200],
+  ["kx2023-031", "2023 고양가구박람회", "2023-06-08", "2023-06-11", "홀 1, 2", "exhibition", 35100],
+  ["kx2023-032", "제16회 더골프쇼 KOREA 시즌1", "2023-06-08", "2023-06-11", "홀 9B", "exhibition", 23100],
+  ["kx2023-033", "2023 생활낚시박람회", "2023-06-09", "2023-06-11", "홀 10A", "exhibition", 11600],
+  ["kx2023-034", "메가쇼 2023 시즌1", "2023-06-15", "2023-06-18", "홀 7, 8", "exhibition", 36000],
+  ["kx2023-035", "국제광융합 O2O EXPO 2023", "2023-06-21", "2023-06-23", "홀 3A", "exhibition", 12800],
+  ["kx2023-036", "맘앤베이비엑스포", "2023-06-22", "2023-06-25", "홀 10A, 10B", "culture", 19000],
+  ["kx2023-037", "2023 세계 배터리&충전 인프라 엑스포", "2023-06-27", "2023-06-29", "홀 4A", "tech", 17500],
+  ["kx2023-038", "2023 세계 태양에너지 엑스포", "2023-06-27", "2023-06-29", "홀 3A", "trade", 10900],
+  ["kx2023-039", "2023 해양바이오 박람회", "2023-06-28", "2023-06-29", "홀 6B, 6C", "trade", 7300],
+  ["kx2023-040", "2023 국제안전보건전시회", "2023-07-03", "2023-07-06", "홀 7, 8A", "trade", 46600],
+  ["kx2023-041", "제21회 국제나노기술 심포지엄 및 융합전시회 / 아템페어 2023", "2023-07-05", "2023-07-07", "홀 4, 5A", "culture", 28500],
+  ["kx2023-042", "2023 코리아 테마파크&어뮤즈먼트 페어", "2023-07-20", "2023-07-22", "홀 3", "culture", 12900],
+  ["kx2023-043", "2023 여성발명왕 EXPO", "2023-07-20", "2023-07-22", "홀 4A", "exhibition", 13600],
+  ["kx2023-044", "2023 SS시즌 캠핑페스타", "2023-07-21", "2023-07-23", "홀 7A", "culture", 11200],
+  ["kx2023-045", "2023 청소년 발명 페스티벌", "2023-08-03", "2023-08-05", "홀 7A", "culture", 11800],
+  ["kx2023-046", "코믹월드 2023 Summer", "2023-08-05", "2023-08-06", "홀 3A, 4, 5", "culture", 26400],
+  ["kx2023-047", "미베 베이비엑스포", "2023-08-10", "2023-08-13", "홀 7", "culture", 24300],
+  ["kx2023-048", "제8회 대한민국 국제 관광박람회", "2023-08-11", "2023-08-14", "홀 3", "exhibition", 15700],
+  ["kx2023-049", "제64회 MBC건축박람회", "2023-08-17", "2023-08-20", "홀 3, 4, 5", "exhibition", 60300],
+  ["kx2023-050", "K-PRINT 2023 / K-Pack 2023 / K-Label 2023 / K-Sign & AD 2023", "2023-08-23", "2023-08-26", "홀 7, 8A", "exhibition", 50500],
+  ["kx2023-051", "한국국제가구 및 인테리어산업대전", "2023-08-24", "2023-08-27", "홀 2, 3", "trade", 49000],
+  ["kx2023-052", "경기주류대상", "2023-08-25", "2023-08-27", "홀 6A, 6B", "exhibition", 11600],
+  ["kx2023-053", "제16회 폐기물·자원순환산업전 (RETECH 2023)", "2023-08-30", "2023-09-01", "홀 7A, 7B", "trade", 17700],
+  ["kx2023-054", "2023 차세대 분체산업전", "2023-08-30", "2023-09-01", "홀 8A", "trade", 29000],
+  ["kx2023-055", "마이펫페어 2023 일산", "2023-09-01", "2023-09-03", "홀 10A, 10B", "culture", 11400],
+  ["kx2023-056", "제1회 고향사랑의 날 기념식 및 고향사랑기부제 박람회", "2023-09-02", "2023-09-04", "홀 9B", "exhibition", 10700],
+  ["kx2023-057", "2023 월드 스마트시티 엑스포", "2023-09-06", "2023-09-08", "홀 3, 4, 5", "tech", 49000],
+  ["kx2023-058", "제3회 유통·물류 및 공급망관리 산업전 (SCM FAIR)", "2023-09-06", "2023-09-08", "홀 1, 2", "tech", 32100],
+  ["kx2023-059", "2023 오토살롱위크", "2023-09-08", "2023-09-10", "홀 7, 8", "exhibition", 23400],
+  ["kx2023-060", "H2 MEET 2023", "2023-09-13", "2023-09-15", "홀 1, 2, 3", "exhibition", 36800],
+  ["kx2023-061", "2023 한국건설안전박람회", "2023-09-13", "2023-09-15", "홀 10", "trade", 13000],
+  ["kx2023-062", "2023 대한민국 안전산업박람회", "2023-09-13", "2023-09-15", "홀 7, 8", "trade", 29800],
+  ["kx2023-063", "2023 기상기후산업박람회", "2023-09-13", "2023-09-15", "홀 7, 8", "exhibition", 26400],
+  ["kx2023-064", "2023년 후반기 국군장병 취업박람회", "2023-09-13", "2023-09-14", "홀 Hall 6", "exhibition", 12000],
+  ["kx2023-065", "이차전지 소재 · 부품 및 장비전 (K-BATTERY SHOW 2023)", "2023-09-13", "2023-09-15", "홀 3A", "tech", 17000],
+  ["kx2023-066", "궁디팡팡 캣페스타", "2023-09-15", "2023-09-17", "홀 5A, 5B", "exhibition", 14500],
+  ["kx2023-067", "2023 대한민국 소싱위크", "2023-09-21", "2023-09-22", "홀 2", "exhibition", 12600],
+  ["kx2023-068", "2023 추석맞이 선물박람회", "2023-09-21", "2023-09-24", "홀 9B", "exhibition", 20700],
+  ["kx2023-069", "경기국제웹툰페어", "2023-10-06", "2023-10-08", "홀 4A, 4B", "culture", 13000],
+  ["kx2023-070", "희귀반려동물박람회", "2023-10-07", "2023-10-08", "홀 9B", "culture", 11500],
+  ["kx2023-071", "2023 국제아웃도어캠핑&레포츠페스티벌 더 파이널 시즌 PART 1", "2023-10-07", "2023-10-09", "홀 7, 8", "culture", 27900],
+  ["kx2023-072", "2023 로보월드(국제로봇산업대전)", "2023-10-11", "2023-10-14", "홀 1, 2A, 2B, 3", "tech", 64100],
+  ["kx2023-073", "대한민국 뷰티박람회", "2023-10-12", "2023-10-14", "홀 4, 5", "culture", 28100],
+  ["kx2023-074", "코베 베이비페어&유아교육전 - 하반기", "2023-10-12", "2023-10-15", "홀 7", "culture", 15900],
+  ["kx2023-075", "2023 국제공구 및 스마트 용접 자동화전", "2023-10-17", "2023-10-20", "홀 2A, 2B", "tech", 14300],
+  ["kx2023-076", "2023 소부장뿌리기술대전", "2023-10-18", "2023-10-20", "홀 5", "exhibition", 15300],
+  ["kx2023-077", "금속산업대전 2023", "2023-10-18", "2023-10-20", "홀 3", "trade", 14500],
+  ["kx2023-078", "국제 모빌리티 산업전 (KOAA·GTT SHOW)", "2023-10-18", "2023-10-20", "홀 1", "tech", 13400],
+  ["kx2023-079", "2023 하반기 붐업코리아", "2023-10-18", "2023-10-19", "홀 4", "exhibition", 12400],
+  ["kx2023-080", "2023 카페&베이커리페어", "2023-10-19", "2023-10-22", "홀 10", "culture", 19400],
+  ["kx2023-081", "한국포장전 2023", "2023-10-24", "2023-10-27", "홀 7, 8A", "exhibition", 46000],
+  ["kx2023-082", "제26회 대한민국우수상품전시회", "2023-10-26", "2023-10-28", "홀 1, 2", "exhibition", 33900],
+  ["kx2023-083", "2023 디지털미디어테크쇼", "2023-11-02", "2023-11-04", "홀 4", "tech", 13900],
+  ["kx2023-084", "2023 디지털 퓨처쇼", "2023-11-02", "2023-11-04", "홀 5", "tech", 13200],
+  ["kx2023-085", "제17회 더골프쇼 KOREA 시즌2", "2023-11-02", "2023-11-05", "홀 8A", "exhibition", 15000],
+  ["kx2023-086", "콘텐츠코리아 2023", "2023-11-02", "2023-11-04", "홀 3A", "exhibition", 19200],
+  ["kx2023-087", "2023 SW인재페스티벌", "2023-11-02", "2023-11-04", "홀 7A", "culture", 15700],
+  ["kx2023-088", "2023 소프트웨어(SW) 교육 페스티벌", "2023-11-03", "2023-11-04", "홀 10", "tech", 8500],
+  ["kx2023-089", "2023 소상공인대회 및 기능경진대회", "2023-11-03", "2023-11-04", "홀 9", "exhibition", 8800],
+  ["kx2023-090", "2023 스마트국토엑스포", "2023-11-08", "2023-11-10", "홀 10", "tech", 16900],
+  ["kx2023-091", "2023 한국국제승강기엑스포", "2023-11-08", "2023-11-10", "홀 5", "trade", 12300],
+  ["kx2023-092", "메가쇼 2023 시즌2&트래블쇼", "2023-11-09", "2023-11-12", "홀 2, 3, 4", "exhibition", 53100],
+  ["kx2023-093", "2023 콘텐츠 유니버스 코리아", "2023-11-09", "2023-11-11", "홀 7B", "exhibition", 13100],
+  ["kx2023-094", "2023 대한민국 지방자치 경영혁신 엑스포", "2023-11-16", "2023-11-18", "홀 7", "exhibition", 13000],
+  ["kx2023-095", "2023 메가주 일산(하)", "2023-11-17", "2023-11-19", "홀 1A, 2, 3, 4, 5", "culture", 89100],
+  ["kx2023-096", "2023 도로교통박람회", "2023-11-22", "2023-11-24", "홀 3A", "exhibition", 12100],
+  ["kx2023-097", "2023 경기도 건설신기술 박람회", "2023-11-22", "2023-11-24", "홀 2B", "trade", 13400],
+  ["kx2023-098", "2023 경기도 교통안전박람회", "2023-11-22", "2023-11-24", "홀 3B", "trade", 12700],
+  ["kx2023-099", "2023 스마트건설 EXPO", "2023-11-22", "2023-11-24", "홀 1, 2A", "tech", 35500],
+  ["kx2023-100", "제14회 고양가구박람회 & 리빙아트페스타", "2023-11-23", "2023-11-26", "홀 4, 5", "culture", 48800],
+  ["kx2023-101", "제45회 맘앤베이비엑스포", "2023-11-23", "2023-11-26", "홀 7", "culture", 21100],
+  ["kx2023-102", "2023 국제아웃도어캠핑&레포츠페스티벌 더 파이널 시즌 PART 2", "2023-11-24", "2023-11-26", "홀 10", "culture", 18400],
+  ["kx2023-103", "2023 대한민국 과일산업대전", "2023-11-24", "2023-11-26", "홀 9B", "trade", 15400],
+  ["kx2023-104", "2023 순환경제 페스티벌", "2023-11-29", "2023-11-30", "홀 9", "trade", 12200],
+  ["kx2023-105", "2023 늘봄학교·교육기부 박람회", "2023-11-30", "2023-12-03", "홀 7", "exhibition", 21600],
+  ["kx2023-106", "2023 국제봉제기계섬유산업전", "2023-11-30", "2023-12-02", "홀 8", "trade", 25300],
+  ["kx2023-107", "2023 월드풋볼페스티벌", "2023-12-01", "2023-12-03", "홀 1B, 2", "culture", 29700],
+  ["kx2023-108", "애니메이션 X 게임 페스티벌", "2023-12-02", "2023-12-03", "홀 3, 4, 5", "tech", 25600],
+  ["kx2023-109", "코믹월드 2023 WINTER", "2023-12-16", "2023-12-17", "홀 2A, 3, 4, 5", "culture", 51000],
+  ["kx2024-001", "마이펫페어 2024 일산 파트1", "2024-01-12", "2024-01-14", "홀 7", "culture", 14400],
+  ["kx2024-002", "2024 카페디저트페어", "2024-01-25", "2024-01-28", "홀 7A", "culture", 19500],
+  ["kx2024-003", "2024 코리아빌드위크", "2024-02-21", "2024-02-24", "홀 1, 2, 3, 4, 5", "exhibition", 74300],
+  ["kx2024-004", "2024 캠프닉페어(캠핑&피크닉페어)", "2024-02-29", "2024-03-03", "홀 3, 4, 5", "culture", 95600],
+  ["kx2024-005", "제46회 맘앤베이비엑스포", "2024-02-29", "2024-03-03", "홀 7", "culture", 24800],
+  ["kx2024-006", "제18회 더골프쇼 KOREA 시즌1", "2024-03-07", "2024-03-10", "홀 7A", "exhibition", 20300],
+  ["kx2024-007", "2024 경기국제보트쇼", "2024-03-08", "2024-03-10", "홀 3A, 4, 5", "exhibition", 33100],
+  ["kx2024-008", "2024 한국국제낚시박람회 (KOFISH 2024)", "2024-03-08", "2024-03-10", "홀 2A, 2B", "exhibition", 13100],
+  ["kx2024-009", "2024 서울펫쇼", "2024-03-15", "2024-03-17", "홀 7", "culture", 11600],
+  ["kx2024-010", "희귀반려동물박람회", "2024-03-16", "2024-03-17", "홀 8A", "culture", 11500],
+  ["kx2024-011", "제23회 세계 보안 엑스포", "2024-03-20", "2024-03-22", "홀 3, 4, 5A", "exhibition", 38000],
+  ["kx2024-012", "Automotive Testing Expo 2024", "2024-03-20", "2024-03-22", "홀 10B", "exhibition", 13300],
+  ["kx2024-013", "서울국제생산제조기술전(SIMTOS 2024)", "2024-04-01", "2024-04-05", "홀 1, 10, 2, 3, 4, 5, 7, 8A, 8B, 9", "trade", 245500],
+  ["kx2024-014", "2024 서울캣쇼", "2024-04-12", "2024-04-14", "홀 7B", "exhibition", 15700],
+  ["kx2024-015", "코리아 나라장터 엑스포 2024", "2024-04-17", "2024-04-19", "홀 3, 4, 5", "exhibition", 52200],
+  ["kx2024-016", "2024 국제콜드체인산업전", "2024-04-23", "2024-04-26", "홀 9B", "trade", 22300],
+  ["kx2024-017", "제14회 국제물류산업대전", "2024-04-23", "2024-04-26", "홀 10", "trade", 15200],
+  ["kx2024-018", "제9회 국제화장품원료기술전", "2024-04-23", "2024-04-26", "홀 7B", "exhibition", 22700],
+  ["kx2024-019", "제18회 국제연구·실험 및 첨단분석장비전", "2024-04-23", "2024-04-26", "홀 8", "exhibition", 21900],
+  ["kx2024-020", "제14회 국제의약품·바이오산업전", "2024-04-23", "2024-04-26", "홀 7A", "trade", 25900],
+  ["kx2024-021", "2024년 상반기 국군장병 취업박람회", "2024-04-29", "2024-04-30", "홀 10", "exhibition", 10700],
+  ["kx2024-022", "제66회 MBC 건축박람회 외(통합명칭)", "2024-05-09", "2024-05-12", "홀 1A, 1B, 2A, 2B, 3, 4A", "exhibition", 60900],
+  ["kx2024-023", "2024 킨텍스 코베 베이비페어&유아교육전", "2024-05-09", "2024-05-12", "홀 10A, 10B", "culture", 22800],
+  ["kx2024-024", "2024 메가주 일산(상)", "2024-05-17", "2024-05-19", "홀 1A, 2, 3", "culture", 32100],
+  ["kx2024-025", "2024 플레이엑스포", "2024-05-23", "2024-05-26", "홀 3, 4, 5A, 5B", "exhibition", 58300],
+  ["kx2024-026", "2024 국제아웃도어캠핑&레포츠페스티벌(GOCAF 2024)", "2024-05-24", "2024-05-26", "홀 1, 2", "culture", 33500],
+  ["kx2024-027", "메가쇼 2024 시즌 1", "2024-05-30", "2024-06-02", "홀 2, 3", "exhibition", 41000],
+  ["kx2024-028", "트래블쇼 2024 시즌 1", "2024-05-30", "2024-06-02", "홀 2A", "exhibition", 25800],
+  ["kx2024-029", "2024 서울국제식품산업대전", "2024-06-11", "2024-06-14", "홀 1, 2, 3, 4, 5, 7, 8", "trade", 118800],
+  ["kx2024-030", "2024 농업기술박람회", "2024-06-11", "2024-06-14", "홀 10B", "exhibition", 16400],
+  ["kx2024-031", "2024 대한민국 고졸 인재 채용엑스포", "2024-06-12", "2024-06-13", "홀 6", "exhibition", 11700],
+  ["kx2024-032", "2024 케이팜 박람회", "2024-06-13", "2024-06-15", "홀 10A", "exhibition", 14200],
+  ["kx2024-033", "2024 여성발명왕EXPO(대한민국 세계여성발명대회 및 여성발명품박람회)", "2024-06-20", "2024-06-22", "홀 3A", "exhibition", 15500],
+  ["kx2024-034", "제19회 더골프쇼 KOREA 시즌2", "2024-06-20", "2024-06-23", "홀 10A", "exhibition", 25700],
+  ["kx2024-035", "제47회 맘앤베이비엑스포", "2024-06-20", "2024-06-23", "홀 1", "culture", 23000],
+  ["kx2024-036", "2024 생활낚시박람회", "2024-06-21", "2024-06-23", "홀 7A", "exhibition", 14200],
+  ["kx2024-037", "2024 로컬 콘텐츠 페스타", "2024-06-21", "2024-06-23", "홀 2", "exhibition", 12200],
+  ["kx2024-038", "2024 세계 배터리&충전인프라 엑스포", "2024-06-25", "2024-06-27", "홀 5A", "tech", 15100],
+  ["kx2024-039", "퀀텀코리아 2024", "2024-06-25", "2024-06-27", "홀 8B", "exhibition", 11200],
+  ["kx2024-040", "2024 세계 태양에너지 엑스포", "2024-06-25", "2024-06-27", "홀 4A", "trade", 15200],
+  ["kx2024-041", "국제광융합 O2O EXPO 2024", "2024-06-26", "2024-06-28", "홀 3A", "exhibition", 12200],
+  ["kx2024-042", "2024 고양가구박람회", "2024-06-27", "2024-06-30", "홀 1, 2A", "exhibition", 34600],
+  ["kx2024-043", "2024 국제안전보건전시회", "2024-07-01", "2024-07-04", "홀 7, 8", "trade", 33900],
+  ["kx2024-044", "제22회 국제 나노기술심포지엄 및 융합전시회", "2024-07-03", "2024-07-05", "홀 4A, 4B, 5A, 5B", "exhibition", 25100],
+  ["kx2024-045", "2024 중앙 재테크 박람회", "2024-07-10", "2024-07-11", "홀 6", "tech", 9100],
+  ["kx2024-046", "2025학년도 경기도교육청 수시 대학입학정보박람회", "2024-07-19", "2024-07-20", "홀 6", "exhibition", 7700],
+  ["kx2024-047", "2024년 제3회 킨텍스 캠핑페스타", "2024-07-19", "2024-07-21", "홀 7", "culture", 18900],
+  ["kx2024-048", "대한민국 국제 관광박람회", "2024-07-19", "2024-07-22", "홀 8", "exhibition", 19900],
+  ["kx2024-049", "K-PRINT 2024", "2024-08-21", "2024-08-24", "홀 7, 8A", "exhibition", 39500],
+  ["kx2024-050", "제67회 MBC건축박람회/2024 서울 냉·난방 및 건축설비 박람회/제39회 동아 홈&리빙 페어/제28회 동아 기프트 쇼/제26회 동아 차·공예 박람회/제24회 동아 스포츠·레저·골프산업 박람회/2024 센덱스(재활&복지)박람회", "2024-08-22", "2024-08-25", "홀 1A, 2A, 2B, 3", "culture", 51300],
+  ["kx2024-051", "2024 마이펫페어 일산 Part.2", "2024-08-23", "2024-08-25", "홀 10A, 10B", "culture", 17900],
+  ["kx2024-052", "2024 한국관상어산업박람회", "2024-08-23", "2024-08-25", "홀 5A", "exhibition", 12200],
+  ["kx2024-053", "제17회 폐기물자원순환산업전", "2024-08-28", "2024-08-30", "홀 10A", "trade", 11200],
+  ["kx2024-054", "2024 차세대 분체산업전", "2024-08-28", "2024-08-30", "홀 10B", "trade", 11200],
+  ["kx2024-055", "2024 콘텐츠유니버스 코리아", "2024-08-29", "2024-08-30", "홀 6", "exhibition", 9700],
+  ["kx2024-056", "2024 킨텍스 미베 베이비페어&유아교육전", "2024-08-29", "2024-09-01", "홀 2", "culture", 23200],
+  ["kx2024-057", "2024 한국국제가구 및 인테리어산업대전", "2024-08-29", "2024-09-01", "홀 7, 8, 2전시장 로비 7-1", "trade", 58600],
+  ["kx2024-058", "2024 경기주류대상", "2024-08-31", "2024-09-01", "홀 1A", "exhibition", 22500],
+  ["kx2024-059", "2024 월드 스마트시티 엑스포", "2024-09-03", "2024-09-05", "홀 3, 4, 5", "tech", 55700],
+  ["kx2024-060", "제1회 특화망 기술 산업전", "2024-09-04", "2024-09-06", "홀 1A, 1B", "trade", 12100],
+  ["kx2024-061", "제4회 유통·물류 및 공급망관리 산업전", "2024-09-04", "2024-09-06", "홀 2A, 2B", "trade", 15200],
+  ["kx2024-062", "2024 대한민국 소싱위크", "2024-09-05", "2024-09-06", "홀 9B", "exhibition", 7700],
+  ["kx2024-063", "2024 오토살롱위크", "2024-09-06", "2024-09-08", "홀 7, 8", "exhibition", 33300],
+  ["kx2024-064", "2024 궁디팡팡 캣페스타", "2024-09-06", "2024-09-08", "홀 10A, 10B", "exhibition", 13800],
+  ["kx2024-065", "H2 MEET 2024", "2024-09-25", "2024-09-27", "홀 4, 5", "exhibition", 28200],
+  ["kx2024-066", "이차전지 소재 · 부품 및 장비전 (K-BATTERY SHOW 2024) / 한국 소재 · 복합재료 및 장비전 (K-Mtech 2024)", "2024-09-25", "2024-09-27", "홀 3", "tech", 14500],
+  ["kx2024-067", "2024 한국국제냉난방공조전", "2024-09-25", "2024-09-27", "홀 1, 2", "trade", 33000],
+  ["kx2024-068", "제6회 대한민국방위산업전", "2024-09-25", "2024-09-28", "홀 7, 8A", "trade", 43100],
+  ["kx2024-069", "2024 국제아웃도어캠핑&레포츠페스티벌 더 파이널 시즌 PART 1", "2024-10-04", "2024-10-06", "홀 7, 8", "culture", 21600],
+  ["kx2024-070", "경기도 5070 일자리박람회", "2024-10-07", "2024-10-08", "홀 3", "exhibition", 10800],
+  ["kx2024-071", "2024 킨텍스 코베 베이비페어&유아교육전", "2024-10-10", "2024-10-13", "홀 10", "culture", 22800],
+  ["kx2024-072", "트리우스 광명 1차 입주박람회", "2024-10-12", "2024-10-13", "홀 8B", "exhibition", 10100],
+  ["kx2024-073", "2024 국제 공구 및 스마트 용접 자동화전", "2024-10-15", "2024-10-18", "홀 3A, 3B", "tech", 18600],
+  ["kx2024-074", "2024 국제 모빌리티 산업전", "2024-10-16", "2024-10-18", "홀 2A, 2B", "tech", 17100],
+  ["kx2024-075", "2024 한국건설안전박람회", "2024-10-16", "2024-10-18", "홀 4", "trade", 17300],
+  ["kx2024-076", "2024 아시아콘크리트엑스포", "2024-10-16", "2024-10-18", "홀 5A, 5B", "exhibition", 19000],
+  ["kx2024-077", "금속산업대전 2024", "2024-10-16", "2024-10-18", "홀 1", "trade", 12900],
+  ["kx2024-078", "2024 K-뷰티엑스포 코리아", "2024-10-17", "2024-10-19", "홀 7, 8", "culture", 30300],
+  ["kx2024-079", "2024 카페&베이커리페어", "2024-10-17", "2024-10-20", "홀 10", "culture", 15700],
+  ["kx2024-080", "2024 경기국제웹툰페어", "2024-10-17", "2024-10-20", "홀 9A, 9B", "culture", 17600],
+  ["kx2024-081", "2024 경기북부 일자리박람회", "2024-10-22", "2024-10-22", "홀 6", "exhibition", 3500],
+  ["kx2024-082", "2024 하반기 붐업코리아 수출상담회", "2024-10-22", "2024-10-23", "홀 1", "trade", 12600],
+  ["kx2024-083", "콘텐츠코리아 2024", "2024-10-23", "2024-10-25", "홀 7A", "exhibition", 13200],
+  ["kx2024-084", "2024 고양 드론ㆍ도심항공모빌리티 박람회", "2024-10-23", "2024-10-25", "홀 10B", "tech", 11200],
+  ["kx2024-085", "2024 디지털미디어테크쇼", "2024-10-23", "2024-10-25", "홀 8A", "tech", 13900],
+  ["kx2024-086", "2024 디지털퓨처쇼", "2024-10-23", "2024-10-25", "홀 7B", "tech", 15600],
+  ["kx2024-087", "The AI Show 2024", "2024-10-23", "2024-10-25", "홀 10A", "tech", 18700],
+  ["kx2024-088", "2024 로보월드", "2024-10-23", "2024-10-26", "홀 1, 2, 3", "exhibition", 53800],
+  ["kx2024-089", "제12회 한국국제건설기계전", "2024-10-24", "2024-10-27", "홀 4, 5", "trade", 50900],
+  ["kx2024-090", "2024 소부장뿌리기술대전", "2024-10-30", "2024-11-01", "홀 1", "exhibition", 27500],
+  ["kx2024-091", "2024 아시아 기계 & 제조 산업전", "2024-10-30", "2024-11-02", "홀 2A, 3A, 3B", "trade", 59100],
+  ["kx2024-092", "제27회 대한민국우수상품전시회(G-FAIR KOREA 2024)", "2024-10-31", "2024-11-02", "홀 4, 5", "tech", 57800],
+  ["kx2024-093", "올림픽파크포레온 입주박람회 2차", "2024-11-02", "2024-11-03", "홀 6", "exhibition", 7300],
+  ["kx2024-094", "제16회 2024 K-GEO Festa", "2024-11-06", "2024-11-08", "홀 10", "exhibition", 13900],
+  ["kx2024-095", "2024년 「고양시 중장년 일자리박람회」", "2024-11-07", "2024-11-07", "홀 6B", "exhibition", 5500],
+  ["kx2024-096", "메가쇼 2024 시즌 2", "2024-11-07", "2024-11-10", "홀 3, 4, 5A", "exhibition", 55400],
+  ["kx2024-097", "2024 가을 고양가구박람회", "2024-11-14", "2024-11-17", "홀 7", "exhibition", 16200],
+  ["kx2024-098", "2024 메가주 일산(하)", "2024-11-15", "2024-11-17", "홀 1, 2, 3, 4, 5A", "culture", 87900],
+  ["kx2024-099", "2024 보드게임페스타(일산)", "2024-11-16", "2024-11-17", "홀 8A", "tech", 8300],
+  ["kx2024-100", "2024 스마트건설 EXPO", "2024-11-20", "2024-11-22", "홀 1, 2", "tech", 27600],
+  ["kx2024-101", "제48회 맘앤베이비엑스포", "2024-11-21", "2024-11-24", "홀 7", "culture", 19800],
+  ["kx2024-102", "2024 K- 카 케어 페스티벌", "2024-11-23", "2024-11-23", "홀 6A, 6B", "culture", 4500],
+  ["kx2024-103", "2024 국제아웃도어캠핑&레포츠페스티벌 더 파이널 시즌 PART 2", "2024-11-29", "2024-12-01", "홀 7, 8A", "culture", 53800],
+  ["kx2024-104", "힐스테이트 관악 센트씨엘 입주박람회", "2024-11-30", "2024-12-01", "홀 10B", "exhibition", 19300],
+  ["kx2024-105", "2024 우리쌀·우리술 K-라이스페스타", "2024-12-06", "2024-12-08", "홀 7A, 7B", "exhibition", 15200],
+  ["kx2024-106", "힐스테이트 검단 포레스트 입주박람회", "2024-12-06", "2024-12-08", "홀 6B, 6C", "exhibition", 15300],
+  ["kx2024-107", "힐스테이트 검단 웰카운티 아파트 1차 입주박람회", "2024-12-07", "2024-12-08", "홀 8B", "exhibition", 11700],
+  ["kx2024-108", "2024 대한민국 교육혁신 박람회", "2024-12-13", "2024-12-15", "홀 10", "exhibition", 18400],
+  ["kx2025-001", "2025 까사 가구쇼", "2025-01-09", "2025-01-12", "홀 3", "exhibition", 16500],
+  ["kx2025-002", "카페디저트페어", "2025-01-16", "2025-01-19", "홀 7A", "culture", 17700],
+  ["kx2025-003", "마이펫페어 2025 일산 Part1", "2025-01-17", "2025-01-19", "홀 3", "culture", 14200],
+  ["kx2025-004", "2025 코리아빌드위크", "2025-02-19", "2025-02-22", "홀 1, 2, 3, 4, 5", "exhibition", 110600],
+  ["kx2025-005", "제49회 맘앤베이비엑스포", "2025-02-27", "2025-03-02", "홀 1", "culture", 29500],
+  ["kx2025-006", "경기국제보트쇼", "2025-02-28", "2025-03-02", "홀 3A, 4, 5", "exhibition", 60600],
+  ["kx2025-007", "2025 한국국제낚시박람회", "2025-02-28", "2025-03-02", "홀 2", "exhibition", 27500],
+  ["kx2025-008", "코리아 나라장터 엑스포 2025", "2025-03-05", "2025-03-07", "홀 1, 2, 3", "exhibition", 56400],
+  ["kx2025-009", "2025 코리아나라장터엑스포", "2025-03-05", "2025-03-07", "홀 미정", "exhibition", 13900],
+  ["kx2025-010", "2025 펫쇼코리아(상)", "2025-03-07", "2025-03-09", "홀 7", "culture", 11700],
+  ["kx2025-011", "제27회 국제금형 및 관련산업전", "2025-03-11", "2025-03-14", "홀 2, 3", "trade", 47300],
+  ["kx2025-012", "제28회 국제플라스틱 · 고무산업전시회 (KOPLAS 2025) / 한국 소재 · 복합재료 및 장비전 (K-Mtech 2025)", "2025-03-11", "2025-03-14", "홀 4, 5", "trade", 47100],
+  ["kx2025-013", "2025 캠핑&피크닉페어", "2025-03-13", "2025-03-16", "홀 7, 8", "culture", 29600],
+  ["kx2025-014", "제20회 JTBC GOLF × 더골프쇼 코리아 시즌1", "2025-03-13", "2025-03-16", "홀 10A", "exhibition", 20400],
+  ["kx2025-015", "2025 고양 가구엑스포", "2025-03-13", "2025-03-16", "홀 9A, 9B", "exhibition", 19300],
+  ["kx2025-016", "제24회 세계 보안 엑스포 & 제13회 전자정부 정보보호 솔루션 페어", "2025-03-19", "2025-03-21", "홀 3, 4, 5", "tech", 47800],
+  ["kx2025-017", "2025 국제물산업박람회(WATER KOREA)", "2025-03-19", "2025-03-21", "홀 7, 8", "exhibition", 28000],
+  ["kx2025-018", "2025서울모빌리티쇼", "2025-04-03", "2025-04-13", "홀 1, 2, 3, 4, 5", "tech", 192100],
+  ["kx2025-019", "2025 경기도 기후테크 전시회", "2025-04-15", "2025-04-16", "홀 6C", "tech", 7400],
+  ["kx2025-020", "2025 ESG 지속가능 패키징 페어", "2025-04-22", "2025-04-25", "홀 4B", "culture", 14400],
+  ["kx2025-021", "제20회 국제제약·바이오·화장품기술전", "2025-04-22", "2025-04-25", "홀 5", "exhibition", 15100],
+  ["kx2025-022", "코리아랩 (제19회 국제연구•실험 및 첨단분석장비전)", "2025-04-22", "2025-04-25", "홀 8", "exhibition", 25000],
+  ["kx2025-023", "제10회 코스메틱 인사이드 코리아", "2025-04-22", "2025-04-25", "홀 7B", "exhibition", 25400],
+  ["kx2025-024", "코리아팜 & 바이오 (제15회 국제의약품•바이오산업전)", "2025-04-22", "2025-04-25", "홀 7A", "trade", 16900],
+  ["kx2025-025", "제17회 국제화학장치산업전", "2025-04-22", "2025-04-25", "홀 4A", "trade", 19200],
+  ["kx2025-026", "제3회 국제콜드체인산업전", "2025-04-22", "2025-04-25", "홀 3A", "trade", 24600],
+  ["kx2025-027", "제 15회 국제물류산업대전", "2025-04-22", "2025-04-25", "홀 2, 3B", "trade", 36400],
+  ["kx2025-028", "2025 냥냥펀치 캣쇼 일산", "2025-05-02", "2025-05-04", "홀 미정", "exhibition", 13700],
+  ["kx2025-029", "2025년 국군장병 취업박람회", "2025-05-07", "2025-05-08", "홀 10", "exhibition", 12000],
+  ["kx2025-030", "제68회 MBC건축박람회 외(통합명칭)", "2025-05-08", "2025-05-11", "홀 3A, 4, 5", "exhibition", 52100],
+  ["kx2025-031", "2025 코베 베이비페어&유아교육전", "2025-05-08", "2025-05-11", "홀 7", "culture", 20500],
+  ["kx2025-032", "Shanghai Fair going to Korea - Trade Show 2025", "2025-05-13", "2025-05-14", "홀 6B, 6C", "exhibition", 9300],
+  ["kx2025-033", "트래블쇼 & 한국축제박람회", "2025-05-15", "2025-05-18", "홀 5A", "exhibition", 22100],
+  ["kx2025-034", "메가쇼 2025 시즌1", "2025-05-15", "2025-05-18", "홀 4, 5B", "exhibition", 28600],
+  ["kx2025-035", "2025 메가주 일산(상)", "2025-05-16", "2025-05-18", "홀 7, 8", "culture", 36300],
+  ["kx2025-036", "25년 한국시니어클럽 노인일자리 박람회", "2025-05-21", "2025-05-21", "홀 9B", "exhibition", 4500],
+  ["kx2025-037", "2025 플레이엑스포", "2025-05-22", "2025-05-25", "홀 3, 4, 5", "exhibition", 51000],
+  ["kx2025-038", "2025여성발명왕EXPO", "2025-05-22", "2025-05-24", "홀 10A", "exhibition", 11500],
+  ["kx2025-039", "2025 국제아웃도어캠핑&레포츠페스티벌", "2025-05-23", "2025-05-25", "홀 7, 8", "culture", 37100],
+  ["kx2025-040", "2025 대한민국 고졸 인재 채용엑스포", "2025-05-28", "2025-05-29", "홀 10B", "exhibition", 10200],
+  ["kx2025-041", "2025 코리아 스피릿페스타", "2025-05-29", "2025-06-01", "홀 7B", "exhibition", 21000],
+  ["kx2025-042", "제21회 더골프쇼 KOREA 시즌2", "2025-05-29", "2025-06-01", "홀 8A", "exhibition", 24300],
+  ["kx2025-043", "2025 카페&베이커리페어 시즌1", "2025-05-29", "2025-06-01", "홀 7A", "culture", 29600],
+  ["kx2025-044", "2025 생활낚시박람회", "2025-05-30", "2025-06-01", "홀 10A", "exhibition", 30500],
+  ["kx2025-045", "제50회 맘앤베이비엑스포", "2025-06-05", "2025-06-08", "홀 10", "culture", 17700],
+  ["kx2025-046", "SEOUL FOOD 2025", "2025-06-10", "2025-06-13", "홀 1, 2, 3, 4, 5, 7, 8", "exhibition", 156900],
+  ["kx2025-047", "제17회 고양가구박람회", "2025-06-19", "2025-06-22", "홀 7, 8", "exhibition", 40400],
+  ["kx2025-048", "국제광융합엑스포 2025", "2025-06-25", "2025-06-27", "홀 7A", "exhibition", 18400],
+  ["kx2025-049", "2025 코리아 카케어 페스티벌", "2025-06-28", "2025-06-29", "홀 6B, 6C", "culture", 12800],
+  ["kx2025-050", "나노코리아 2025", "2025-07-02", "2025-07-04", "홀 1, 2", "exhibition", 21800],
+  ["kx2025-051", "2025년 제4회 킨텍스 캠핑페스타", "2025-07-04", "2025-07-06", "홀 3", "culture", 11400],
+  ["kx2025-052", "2025 국제안전보건전시회", "2025-07-07", "2025-07-10", "홀 7, 8", "trade", 35000],
+  ["kx2025-053", "2025 펫쇼코리아(하)", "2025-07-18", "2025-07-20", "홀 10", "culture", 17200],
+  ["kx2025-054", "2025 대한민국 국제 관광박람회", "2025-07-18", "2025-07-21", "홀 7", "exhibition", 19000],
+  ["kx2025-055", "2025 어린이 통합 안전 박람회", "2025-07-24", "2025-07-26", "홀 7A", "trade", 13100],
+  ["kx2025-056", "2025 고양 우수중소기업&농수산물박람회", "2025-07-31", "2025-08-04", "홀 1A", "exhibition", 19200],
+  ["kx2025-057", "2025 코베 베이비페어&유아교육전", "2025-08-07", "2025-08-10", "홀 10", "culture", 20500],
+  ["kx2025-058", "2025 카페디저트페어", "2025-08-13", "2025-08-16", "홀 7A", "culture", 21900],
+  ["kx2025-059", "2025 한국관상어산업박람회 및 품평회", "2025-08-15", "2025-08-17", "홀 5", "exhibition", 17300],
+  ["kx2025-060", "K-PRINT 2025", "2025-08-20", "2025-08-23", "홀 7, 8A", "exhibition", 43100],
+  ["kx2025-061", "제69회 건축박람회 외(통합명칭)", "2025-08-21", "2025-08-24", "홀 3, 4", "exhibition", 34200],
+  ["kx2025-062", "2025 차세대 분체산업전", "2025-08-27", "2025-08-29", "홀 10B", "trade", 14400],
+  ["kx2025-063", "제18회 폐기물·자원순환산업전(RETECH 2025)", "2025-08-27", "2025-08-29", "홀 10A", "trade", 17800],
+  ["kx2025-064", "2025 한국국제가구 및 인테리어산업대전", "2025-08-28", "2025-08-31", "홀 7, 8, 2전시장 로비 7-1", "trade", 34000],
+  ["kx2025-065", "2025년 사회리더 대학생 멘토링 리더십콘서트", "2025-08-30", "2025-08-30", "홀 6", "exhibition", 4600],
+  ["kx2025-066", "2025 경기도교육청 직업계고 취창업박람회", "2025-09-02", "2025-09-03", "홀 7B", "exhibition", 12600],
+  ["kx2025-067", "2025 대한민국 글로벌 소싱위크", "2025-09-04", "2025-09-05", "홀 7A", "exhibition", 8500],
+  ["kx2025-068", "마이펫페어 2025 일산 Part2", "2025-09-05", "2025-09-07", "홀 10", "culture", 11700],
+  ["kx2025-069", "2025 이차전지 소재 · 부품 및 장비전(K-BATTERY)", "2025-09-10", "2025-09-12", "홀 4, 5", "tech", 24700],
+  ["kx2025-070", "제5회 유통·물류 및 공급망관리 산업전", "2025-09-10", "2025-09-12", "홀 3", "trade", 15900],
+  ["kx2025-071", "제2회 특화망 기술 산업전", "2025-09-10", "2025-09-12", "홀 2", "trade", 14400],
+  ["kx2025-072", "제1회 대한민국 산업단지 수출박람회", "2025-09-10", "2025-09-12", "홀 1", "trade", 16100],
+  ["kx2025-073", "2025 K-뷰티엑스포 코리아", "2025-09-11", "2025-09-13", "홀 7, 8", "culture", 39000],
+  ["kx2025-074", "2025 대한민국 안전산업박람회", "2025-09-17", "2025-09-19", "홀 1, 2, 3", "trade", 35800],
+  ["kx2025-075", "2025 한국건설ㆍ안전박람회", "2025-09-17", "2025-09-19", "홀 4", "trade", 14500],
+  ["kx2025-076", "2025 경기국제웹툰페어", "2025-09-18", "2025-09-21", "홀 5A", "culture", 24100],
+  ["kx2025-077", "2025 궁디팡팡 캣페스타", "2025-09-19", "2025-09-21", "홀 10", "exhibition", 12400],
+  ["kx2025-078", "2025 오토살롱테크코리아", "2025-09-19", "2025-09-21", "홀 7", "tech", 13200],
+  ["kx2025-079", "2025 아시아 기계 & 제조산업전", "2025-09-23", "2025-09-26", "홀 2, 3", "trade", 44100],
+  ["kx2025-080", "2025 K-GEO Festa", "2025-09-24", "2025-09-26", "홀 5", "exhibition", 14000],
+  ["kx2025-081", "2025 월드 시티테크 엑스포", "2025-09-24", "2025-09-26", "홀 4, 5", "tech", 26600],
+  ["kx2025-082", "2025 국제아웃도어캠핑&레포츠페스티벌 더 파이널 시즌 PART 1", "2025-09-26", "2025-09-28", "홀 7, 8", "culture", 35000],
+  ["kx2025-083", "경기도 5070 일자리박람회", "2025-10-14", "2025-10-14", "홀 6", "exhibition", 5400],
+  ["kx2025-084", "2025 코베 베이비페어&유아교육전", "2025-10-16", "2025-10-19", "홀 4A, 5A", "culture", 41100],
+  ["kx2025-085", "제18회 고양가구박람회", "2025-10-16", "2025-10-19", "홀 2, 3", "exhibition", 33500],
+  ["kx2025-086", "제24회 고양국제아트페어", "2025-10-16", "2025-10-19", "홀 6B", "culture", 19600],
+  ["kx2025-087", "서울 ADEX 2025(서울 국제 항공우주 및 방위산업 전시회 2025)", "2025-10-20", "2025-10-24", "홀 10, 7, 8, 9", "trade", 110600],
+  ["kx2025-088", "2025 수출붐업코리아 Week", "2025-10-21", "2025-10-22", "홀 1, 2", "trade", 14900],
+  ["kx2025-089", "제22회 국제모빌리티산업전", "2025-10-22", "2025-10-24", "홀 4", "tech", 14600],
+  ["kx2025-090", "2025 청소년비즈쿨 페스티벌", "2025-10-27", "2025-10-29", "홀 10A", "culture", 16000],
+  ["kx2025-091", "2025 국제도로교통박람회", "2025-10-28", "2025-10-30", "홀 7A", "exhibition", 13100],
+  ["kx2025-092", "2025 국제 공구 및 스마트 용접 자동화전", "2025-10-28", "2025-10-31", "홀 2", "tech", 17700],
+  ["kx2025-093", "한국포장전 2025", "2025-10-28", "2025-10-31", "홀 7B, 8", "exhibition", 48000],
+  ["kx2025-094", "2025 소부장뿌리 기술대전", "2025-10-29", "2025-10-31", "홀 1", "exhibition", 17600],
+  ["kx2025-095", "금속산업대전 2025", "2025-10-29", "2025-10-31", "홀 3", "trade", 15500],
+  ["kx2025-096", "제28회 대한민국우수상품전시회(G-FAIR KOREA 2025)", "2025-10-30", "2025-11-01", "홀 4, 5", "tech", 37300],
+  ["kx2025-097", "2025 대한민국 소상공인대회", "2025-10-31", "2025-11-01", "홀 9", "exhibition", 22400],
+  ["kx2025-098", "2025 드론 · 도심항공모빌리티 박람회", "2025-11-05", "2025-11-07", "홀 4A", "tech", 14200],
+  ["kx2025-099", "Solar Asia 2025", "2025-11-05", "2025-11-07", "홀 5A", "exhibition", 15200],
+  ["kx2025-100", "Battery Asia Show 2025", "2025-11-05", "2025-11-07", "홀 5B", "exhibition", 18100],
+  ["kx2025-101", "2025 스마트건설·안전·AI 엑스포", "2025-11-05", "2025-11-07", "홀 7, 8", "tech", 24900],
+  ["kx2025-102", "2025 경기도 건설신기술 박람회", "2025-11-05", "2025-11-07", "홀 8B", "trade", 11900],
+  ["kx2025-103", "2025 카페&베이커리페어 시즌2", "2025-11-05", "2025-11-08", "홀 10A", "culture", 19600],
+  ["kx2025-104", "2025 로보월드", "2025-11-05", "2025-11-08", "홀 1, 2", "exhibition", 40500],
+  ["kx2025-105", "2025 디지털미디어테크쇼", "2025-11-05", "2025-11-07", "홀 3A", "tech", 17100],
+  ["kx2025-106", "디지털퓨처쇼 2025", "2025-11-05", "2025-11-07", "홀 3B", "tech", 12800],
+  ["kx2025-107", "2025 마이프차 프랜차이즈 페스타", "2025-11-05", "2025-11-08", "홀 10B", "exhibition", 24500],
+  ["kx2025-108", "2025 고양시 중장년 일자리 박람회", "2025-11-06", "2025-11-06", "홀 6C", "exhibition", 5900],
+  ["kx2025-109", "2025 대한민국 가상융합산업대전", "2025-11-12", "2025-11-14", "홀 5", "trade", 10900],
+  ["kx2025-110", "콘텐츠코리아 2025", "2025-11-13", "2025-11-15", "홀 1", "exhibition", 17500],
+  ["kx2025-111", "메가쇼 2025 시즌2", "2025-11-13", "2025-11-16", "홀 2A, 3, 4", "exhibition", 49400],
+  ["kx2025-112", "제22회 더골프쇼 KOREA 시즌3", "2025-11-13", "2025-11-16", "홀 9B", "exhibition", 21300],
+  ["kx2025-113", "2025 아세안 무역전시회", "2025-11-13", "2025-11-16", "홀 6B, 6C", "trade", 25900],
+  ["kx2025-114", "2025년 한이음 드림업 엑스포", "2025-11-19", "2025-11-19", "홀 8B", "exhibition", 4800],
+  ["kx2025-115", "제1회 한국문신산업박람회 (TEXPO)", "2025-11-20", "2025-11-22", "홀 9", "exhibition", 13900],
+  ["kx2025-116", "2025 메가주 일산(하)", "2025-11-21", "2025-11-23", "홀 1A, 2, 3, 4", "culture", 71200],
+  ["kx2025-117", "2025 경기어린이박람회", "2025-11-21", "2025-11-23", "홀 8A", "exhibition", 12900],
+  ["kx2025-118", "2025 대한민국 AI교육 페스티벌", "2025-11-21", "2025-11-22", "홀 7B", "tech", 9500],
+  ["kx2025-119", "2025 고양 가구엑스포", "2025-11-27", "2025-11-30", "홀 9", "exhibition", 19300],
+  ["kx2025-120", "제51회 맘앤베이비엑스포", "2025-11-27", "2025-11-30", "홀 10", "culture", 16200],
+  ["kx2025-121", "2025 우리쌀·우리술 K- 라이스페스타", "2025-11-28", "2025-11-30", "홀 3", "exhibition", 15900],
+  ["kx2025-122", "2025 국제아웃도어캠핑&레포츠페스티벌", "2025-11-28", "2025-11-30", "홀 4, 5", "culture", 37100],
+  ["kx2025-123", "H2 MEET 2025", "2025-12-04", "2025-12-07", "홀 6C, 7A, 7B, 8", "exhibition", 51800],
+  ["kx2025-124", "제97회 국제친선을위한 세계아동 미술대회 입상작품 전시회", "2025-12-19", "2025-12-21", "홀 6B", "exhibition", 14600],
+  ["kx2026-001", "마이펫페어 2026 일산 Part1", "2026-01-16", "2026-01-18", "홀 7", "culture", 11600],
+  ["kx2026-002", "2026 카페디저트페어", "2026-01-22", "2026-01-25", "홀 7A", "culture", 17900],
+  ["kx2026-003", "2026 코리아빌드위크", "2026-02-04", "2026-02-07", "홀 1, 2, 3, 4, 5", "exhibition", 103300],
+  ["kx2026-004", "제52회 맘앤베이비엑스포", "2026-02-26", "2026-03-01", "홀 7", "culture", 24200],
+  ["kx2026-005", "2026 서울경기 밀리언쇼 우수중소기업&농특산품박람회", "2026-03-05", "2026-03-09", "홀 1A", "exhibition", 20200],
+  ["kx2026-006", "2026 캠핑앤피크닉페어", "2026-03-06", "2026-03-08", "홀 7, 8", "culture", 27000],
+  ["kx2026-007", "2026 한국국제낚시박람회", "2026-03-06", "2026-03-08", "홀 2", "exhibition", 17200],
+  ["kx2026-008", "2026 경기국제보트쇼", "2026-03-06", "2026-03-08", "홀 3, 4, 5", "exhibition", 36200],
+  ["kx2026-009", "2026 고양 가구엑스포 & 홈앤리빙 더쇼 & 큐브 현대미술展", "2026-03-12", "2026-03-15", "홀 10", "culture", 18400],
+  ["kx2026-010", "2026 펫쇼코리아(상)", "2026-03-13", "2026-03-15", "홀 7", "culture", 15200],
+  ["kx2026-011", "오토모티브 테스팅 엑스포 2026", "2026-03-18", "2026-03-20", "홀 10B", "exhibition", 17000],
+  ["kx2026-012", "제25회 세계 보안 엑스포 & 제14회 전자정부 정보보호 솔루션 페어", "2026-03-18", "2026-03-20", "홀 3, 4, 5", "tech", 38800],
+  ["kx2026-013", "코리아 나라장터 엑스포 2026", "2026-03-25", "2026-03-27", "홀 2B, 3, 4, 5", "exhibition", 51100],
+  ["kx2026-014", "국제의약품·바이오산업전", "2026-03-31", "2026-04-03", "홀 7A", "trade", 18300],
+  ["kx2026-015", "국제물류산업대전", "2026-03-31", "2026-04-03", "홀 9B", "trade", 26300],
+  ["kx2026-016", "국제연구·실험 및 첨단분석장비전", "2026-03-31", "2026-04-03", "홀 7A", "exhibition", 29000],
+  ["kx2026-017", "국제다크팩토리산업전", "2026-03-31", "2026-04-03", "홀 10B", "trade", 25500],
+  ["kx2026-018", "국제콜드체인산업전", "2026-03-31", "2026-04-03", "홀 10A", "trade", 20700],
+  ["kx2026-019", "코스메틱 인사이드 코리아", "2026-03-31", "2026-04-03", "홀 7A", "exhibition", 24400],
+  ["kx2026-020", "국제화학장치·공정기술전", "2026-03-31", "2026-04-03", "홀 4A", "trade", 20800],
+  ["kx2026-021", "국제제약·바이오·화장품기술전", "2026-03-31", "2026-04-03", "홀 4B, 5", "exhibition", 57000],
+  ["kx2026-022", "제 2회 ESG 지속가능패키징페어", "2026-03-31", "2026-04-03", "홀 1A", "culture", 24600],
+  ["kx2026-023", "제 25회 국제포장기자재전", "2026-03-31", "2026-04-03", "홀 1B, 2, 3", "exhibition", 67700],
+  ["kx2026-024", "서울국제생산제조기술전(SIMTOS 2026)", "2026-04-13", "2026-04-17", "홀 1, 2, 3, 4, 5, 7, 8, 9, 10", "trade", 251500],
+  ["kx2026-025", "2026 냥냥펀치 캣쇼 일산", "2026-04-24", "2026-04-26", "홀 7B", "exhibition", 11200],
+  ["kx2026-026", "2026 대한민국 과학축제 in 경기 (with 대한민국 과학기술대전)", "2026-04-24", "2026-04-26", "홀 4", "exhibition", 14400],
+  ["kx2026-027", "2026 AI Co-Scientist Challenge Korea 시상식 및 컨퍼런스", "2026-04-24", "2026-04-25", "홀 5A", "tech", 11800],
+  ["kx2026-028", "2026년 제17기 사회리더 대학생 멘토링 발대식", "2026-04-25", "2026-04-25", "홀 6", "exhibition", 5100],
+  ["kx2026-029", "2026년 국군장병 취업박람회", "2026-04-28", "2026-04-29", "홀 7A, 7B", "exhibition", 10600],
+  ["kx2026-030", "제70회 MBC건축박람회 외(통합명칭)", "2026-05-07", "2026-05-10", "홀 3A, 4, 5", "exhibition", 63600],
+  ["kx2026-031", "메가쇼 & 트래블쇼 2026 시즌 1", "2026-05-14", "2026-05-17", "홀 4, 5", "exhibition", 45500],
+  ["kx2026-032", "2026 코베 베이비페어&유아교육전 (5월)", "2026-05-14", "2026-05-17", "홀 10A-1, 10B-1", "culture", 24700],
+  ["kx2026-033", "2026 플레이엑스포", "2026-05-21", "2026-05-24", "홀 2A, 3A, 3B, 4A, 4B, 5A, 5B, 5B-2", "exhibition", 82400],
+  ["kx2026-034", "2026 국제아웃도어캠핑&레포츠페스티벌(5월)", "2026-05-23", "2026-05-25", "홀 7, 8", "culture", 31000],
+  ["kx2026-035", "2026 메가주 시즌1", "2026-05-29", "2026-05-31", "홀 7, 8", "culture", 29700],
+  ["kx2026-036", "2026 마이프차 프랜차이즈창업박람회 시즌 1", "2026-06-04", "2026-06-06", "홀 10B", "exhibition", 19200],
+  ["kx2026-037", "2026 카페&베이커리페어 시즌1", "2026-06-04", "2026-06-07", "홀 10A", "culture", 15300],
+  ["kx2026-038", "2026 서울국제식품산업대전", "2026-06-09", "2026-06-12", "홀 1, 2, 3, 4, 5, 7, 8", "trade", 128600],
+  ["kx2026-039", "2026 대한민국 직업계고 고졸인재 채용엑스포", "2026-06-10", "2026-06-11", "홀 6", "exhibition", 12900],
+  ["kx2026-040", "제53회 맘앤베이비엑스포", "2026-06-18", "2026-06-21", "홀 10", "culture", 16300],
+  ["kx2026-041", "2026고양가구박람회", "2026-06-18", "2026-06-21", "홀 7, 8", "exhibition", 36300],
+  ["kx2026-042", "2026 어린이안전박람회", "2026-06-25", "2026-06-27", "홀 7A", "trade", 13200],
+  ["kx2026-043", "렙타일페어", "2026-06-27", "2026-06-28", "홀 6B", "culture", 7900],
+  ["kx2026-044", "대한민국 국제 관광박람회", "2026-07-03", "2026-07-05", "홀 10", "exhibition", 14900],
+  ["kx2026-045", "2026년 제5회 킨텍스 캠핑페스타", "2026-07-03", "2026-07-05", "홀 2", "culture", 12300],
+  ["kx2026-046", "AI안전보건박람회(2026국제안전보건전시회)", "2026-07-06", "2026-07-09", "홀 7, 8", "tech", 49400],
+  ["kx2026-047", "제24회 국제 나노기술융합전시회", "2026-07-08", "2026-07-10", "홀 3, 4", "exhibition", 22100],
+  ["kx2026-048", "국제광융합엑스포 2026", "2026-07-08", "2026-07-10", "홀 2A", "exhibition", 12700],
+  ["kx2026-049", "KDTEX 2026", "2026-07-17", "2026-07-19", "홀 7B, 8A, 8B", "exhibition", 23800],
+  ["kx2026-050", "2026 펫쇼코리아(하)", "2026-07-24", "2026-07-26", "홀 10", "culture", 11400],
+  ["kx2026-051", "2026 코베 베이비페어&유아교육전", "2026-08-06", "2026-08-09", "홀 7A-1, 7B-1", "culture", 17600],
+  ["kx2026-052", "2026 카페디저트페어", "2026-08-13", "2026-08-16", "홀 10A", "culture", 17900],
+  ["kx2026-053", "K-PRINT 2026", "2026-08-19", "2026-08-22", "홀 7A, 7B, 8A, 8B-1", "exhibition", 31500],
+  ["kx2026-054", "제71회 MBC건축박람회 외(통합명칭)", "2026-08-20", "2026-08-23", "홀 4, 5", "exhibition", 28800],
+  ["kx2026-055", "2026 생활낚시박람회", "2026-08-21", "2026-08-23", "홀 10B", "exhibition", 18600],
+  ["kx2026-056", "2026 월드 시티테크 엑스포", "2026-08-26", "2026-08-28", "홀 4", "tech", 19200],
+  ["kx2026-057", "한국국제가구 및 인테리어산업대전 (코펀)", "2026-08-27", "2026-08-30", "홀 7, 8", "trade", 48700],
+  ["kx2026-058", "마이펫페어 2026 일산 Part 2", "2026-08-28", "2026-08-30", "홀 10", "culture", 12400],
+  ["kx2026-059", "제19회 폐기물·자원순환산업전(RETECH) & 차세대 분체·유체기술전(A-POWDER TECH)", "2026-09-02", "2026-09-04", "홀 7", "trade", 15100],
+  ["kx2026-060", "제6회 국제 운송 · 공급망관리 산업전", "2026-09-09", "2026-09-11", "홀 5", "trade", 12100],
+  ["kx2026-061", "이차전지 소재 · 부품 및 장비전 (K-BATTERY SHOW 2026)", "2026-09-09", "2026-09-11", "홀 7A-1, 7B-1", "tech", 15100],
+  ["kx2026-062", "2026 로컬 콘텐츠 페스타", "2026-09-18", "2026-09-20", "홀 4", "exhibition", 18800],
+  ["kx2026-063", "2026 코베 베이비페어&유아교육전", "2026-10-08", "2026-10-11", "홀 10", "culture", 17600],
+  ["kx2026-064", "2026 국제아웃도어캠핑&레포츠페스티벌 더 파이널 시즌 PART 1", "2026-10-09", "2026-10-11", "홀 7, 8", "culture", 23800],
+  ["kx2026-065", "2026 도시안전기술박람회", "2026-10-14", "2026-10-16", "홀 1", "trade", 17800],
+  ["kx2026-066", "2026 한국건설·안전박람회", "2026-10-14", "2026-10-16", "홀 2", "trade", 14500],
+  ["kx2026-067", "2026 K-뷰티엑스포 코리아", "2026-10-15", "2026-10-17", "홀 3, 4, 5", "culture", 48400],
+  ["kx2026-068", "국제 모빌리티 산업전", "2026-10-21", "2026-10-23", "홀 3", "tech", 13100],
+  ["kx2026-069", "2026 TEX+VISION", "2026-10-21", "2026-10-23", "홀 10", "exhibition", 19000],
+  ["kx2026-070", "2026 국제 공구 및 스마트 용접 자동화전", "2026-10-27", "2026-10-30", "홀 2A, 2B-1", "tech", 19400],
+  ["kx2026-071", "2026 솔라 아시아", "2026-10-28", "2026-10-30", "홀 7", "exhibition", 10700],
+  ["kx2026-072", "2026 카페&베이커리페어 시즌2", "2026-10-29", "2026-11-01", "홀 10", "culture", 29300],
+  ["kx2026-073", "2026 드론·도심항공모빌리티 박람회", "2026-11-04", "2026-11-06", "홀 2", "tech", 13200],
+  ["kx2026-074", "WORLD HYDROGEN EXPO 2026 (H₂ MEET 2026)", "2026-11-04", "2026-11-06", "홀 6C, 7, 8", "exhibition", 47900],
+  ["kx2026-075", "한국국제승강기엑스포 2026", "2026-11-11", "2026-11-13", "홀 5", "trade", 17500],
+  ["kx2026-076", "2026 메가주 일산 시즌2", "2026-11-20", "2026-11-22", "홀 2, 3, 4, 5", "culture", 63900],
+  ["kx2026-077", "2026 국제아웃도어캠핑&레포츠페스티벌 더 파이널 시즌 PART 2", "2026-11-27", "2026-11-29", "홀 8A, 7", "culture", 34500],
+];
diff --git a/src/frontend/src/screens/schedule/sampleSchedule.ts b/src/frontend/src/screens/schedule/sampleSchedule.ts
new file mode 100644
index 0000000..098f35d
--- /dev/null
+++ b/src/frontend/src/screens/schedule/sampleSchedule.ts
@@ -0,0 +1,159 @@
+/*
+ * 전시 일정 관리 표시 데이터 (SCR-15 · M1·M6).
+ * ★ 경계면(부분 실 + 부분 샘플):
+ *   - 행사(Event) 목록·기간·배정 홀은 실 API 가능(Event 엔티티 존재).
+ *     현재는 인증 응답 workspaces(WorkspaceDto)를 실 원천으로 사용하며, 없으면 크롤링 데이터로 폴백한다.
+ *   - 폴백 원천: kintex.com 크롤링 10년치(2016~2026, 1,098건) — kintexEvents.ts (백엔드 V10 시드와 동일).
+ *   - estVisitors·카테고리는 추정치(샘플). 홀 가동률·캘린더 점유는 크롤링 데이터 기반 계산.
+ */
+import type { FlowStatus } from '../../components/ui/Badge';
+import { KINTEX_EVENT_ROWS, type KxCategory } from './kintexEvents';
+
+export type EventCategory = KxCategory;
+export type EventStatus = 'ongoing' | 'upcoming' | 'ended';
+
+export interface ScheduleEvent {
+  id: string;
+  title: string;
+  category: EventCategory;
+  status: EventStatus;
+  period: string; // "2026.09.05–09.08"
+  start: string; // "2026-09-05"
+  end: string; // "2026-09-08"
+  halls: string; // "홀 4, 5"
+  estVisitors: string; // "25,000명"
+  designStatus?: FlowStatus;
+  thumbIdx: number; // 로컬 mock 썸네일 인덱스
+}
+
+export const CATEGORY_LABEL: Record<EventCategory, string> = {
+  exhibition: '전시',
+  culture: '문화·예술',
+  trade: '무역·산업',
+  tech: '기술',
+};
+export const STATUS_LABEL: Record<EventStatus, string> = {
+  ongoing: '진행중',
+  upcoming: '예정',
+  ended: '종료',
+};
+
+const TODAY_YMD = '2026-07-11'; // currentDate 고정(데모) — ExhibitionSchedulePage.TODAY 와 정합
+
+function statusOf(start: string, end: string): EventStatus {
+  if (end < TODAY_YMD) return 'ended';
+  if (start > TODAY_YMD) return 'upcoming';
+  return 'ongoing';
+}
+
+/** "2016-01-28","2016-01-31" → "2016.01.28–01.31" */
+function periodLabel(start: string, end: string): string {
+  const s = start.split('-').join('.');
+  const e = end.split('-').join('.');
+  return e.startsWith(s.slice(0, 5)) ? `${s}–${e.slice(5)}` : `${s}–${e}`;
+}
+
+// 진행중 데모 표시용 설계 상태(샘플) — 진행중·임박 행사에만 부여
+const DESIGN_CYCLE: FlowStatus[] = ['building', 'submitted', 'draft', 'inspected'];
+
+/** 크롤링 10년치 전체 (1,098건, 시작일 오름차순). */
+export const ALL_EVENTS: ScheduleEvent[] = KINTEX_EVENT_ROWS.map((r, i) => {
+  const [id, title, start, end, halls, category, visitors] = r;
+  const status = statusOf(start, end);
+  return {
+    id,
+    title,
+    category,
+    status,
+    period: periodLabel(start, end),
+    start,
+    end,
+    halls,
+    estVisitors: `${visitors.toLocaleString()}명`,
+    designStatus: status !== 'ended' ? DESIGN_CYCLE[i % DESIGN_CYCLE.length] : undefined,
+    thumbIdx: i % 3,
+  };
+});
+
+/** 데이터에 존재하는 연도 내림차순 목록 (연도 필터용). */
+export const EVENT_YEARS: number[] = [...new Set(ALL_EVENTS.map((e) => Number(e.start.slice(0, 4))))].sort(
+  (a, b) => b - a,
+);
+
+/** 하위 호환: 기존 SAMPLE_EVENTS — 오늘 기준 진행중·예정 상위 목록. */
+export const SAMPLE_EVENTS: ScheduleEvent[] = ALL_EVENTS.filter((e) => e.status !== 'ended').slice(0, 12);
+
+/** 해당 월에 행사가 있는 날짜 집합 — key: 'YYYY-M-D' (미니 캘린더 하이라이트). */
+export function eventDaysFor(year: number, month0: number, events: ScheduleEvent[] = ALL_EVENTS): Set<string> {
+  const days = new Set<string>();
+  const last = new Date(year, month0 + 1, 0).getDate();
+  const mStart = `${year}-${String(month0 + 1).padStart(2, '0')}-01`;
+  const mEnd = `${year}-${String(month0 + 1).padStart(2, '0')}-${String(last).padStart(2, '0')}`;
+  for (const e of events) {
+    if (e.end < mStart || e.start > mEnd) continue;
+    const from = e.start > mStart ? Number(e.start.slice(8, 10)) : 1;
+    const to = e.end < mEnd ? Number(e.end.slice(8, 10)) : last;
+    for (let d = from; d <= to; d++) days.add(`${year}-${month0 + 1}-${d}`);
+  }
+  return days;
+}
+
+/** 해당 월 날짜(YYYY-MM-DD) → 그 날 진행 중인 행사 목록 (WISE 달력 월 그리드용). */
+export function eventsByDateFor(year: number, month0: number, events: ScheduleEvent[] = ALL_EVENTS): Map<string, ScheduleEvent[]> {
+  const map = new Map<string, ScheduleEvent[]>();
+  const last = new Date(year, month0 + 1, 0).getDate();
+  const mm = String(month0 + 1).padStart(2, '0');
+  for (const e of events) {
+    if (e.end < `${year}-${mm}-01` || e.start > `${year}-${mm}-${String(last).padStart(2, '0')}`) continue;
+    const from = e.start.slice(0, 7) === `${year}-${mm}` ? Number(e.start.slice(8, 10)) : 1;
+    const to = e.end.slice(0, 7) === `${year}-${mm}` ? Number(e.end.slice(8, 10)) : last;
+    for (let d = from; d <= to; d++) {
+      const key = `${year}-${mm}-${String(d).padStart(2, '0')}`;
+      const arr = map.get(key) ?? [];
+      arr.push(e);
+      map.set(key, arr);
+    }
+  }
+  return map;
+}
+
+export interface HallUtilRow {
+  label: string;
+  pct: number;
+}
+
+const HALL_GROUPS: { label: string; lo: number; hi: number }[] = [
+  { label: '홀 1-3', lo: 1, hi: 3 },
+  { label: '홀 4-5', lo: 4, hi: 5 },
+  { label: '홀 6-8', lo: 6, hi: 8 },
+  { label: '홀 9-10', lo: 9, hi: 10 },
+];
+
+function hallNums(halls: string): number[] {
+  return (halls.match(/\d+/g) ?? []).map(Number).filter((n) => n >= 1 && n <= 10);
+}
+
+/** 크롤링 데이터 기반 월별 홀 그룹 가동률 — (그룹 홀에 행사가 있는 날 수)/(월 일수). */
+export function hallUtilizationFor(year: number, month0: number): HallUtilRow[] {
+  const last = new Date(year, month0 + 1, 0).getDate();
+  const mm = String(month0 + 1).padStart(2, '0');
+  const mStart = `${year}-${mm}-01`;
+  const mEnd = `${year}-${mm}-${String(last).padStart(2, '0')}`;
+  return HALL_GROUPS.map((g) => {
+    const busy = new Set<number>();
+    for (const e of ALL_EVENTS) {
+      if (e.end < mStart || e.start > mEnd) continue;
+      if (!hallNums(e.halls).some((n) => n >= g.lo && n <= g.hi)) continue;
+      const from = e.start > mStart ? Number(e.start.slice(8, 10)) : 1;
+      const to = e.end < mEnd ? Number(e.end.slice(8, 10)) : last;
+      for (let d = from; d <= to; d++) busy.add(d);
+    }
+    return { label: g.label, pct: Math.round((busy.size / last) * 100) };
+  });
+}
+
+/** 하위 호환: 2026-08 기준 가동률. */
+export const HALL_UTILIZATION: HallUtilRow[] = hallUtilizationFor(2026, 7);
+
+/** 하위 호환: 미니 캘린더 하이라이트(2026-08). */
+export const EVENT_DAYS = eventDaysFor(2026, 7);
diff --git a/src/frontend/src/screens/schedule/schedule.css b/src/frontend/src/screens/schedule/schedule.css
new file mode 100644
index 0000000..135e3bd
--- /dev/null
+++ b/src/frontend/src/screens/schedule/schedule.css
@@ -0,0 +1,371 @@
+@import '../shared.css';
+
+.kx-sched {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.kx-sched__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+}
+.kx-sched__subtitle {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+
+.kx-sched__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.kx-sched__filter-spacer {
+  flex: 1;
+}
+
+.kx-sched__split {
+  display: grid;
+  /* 소유자 피드백①: 어중간한 2:1 → 균형 50:50. 달력 7열이 반폭에서 답답하지 않게 좌측 최소폭 확보. */
+  grid-template-columns: minmax(0, 1fr) 1fr;
+  gap: var(--space-4);
+  /* 피드백③: 달력이 컬럼 높이를 채우도록 stretch(달력 아래 대형 빈 공간 제거). aside는 자연 높이. */
+  align-items: stretch;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.kx-sched__aside {
+  align-self: start;
+}
+.kx-sched__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-sched__calnote {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  padding: var(--space-3);
+  background: var(--color-neutral-050);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+}
+.kx-sched__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* 행사 카드 */
+.kx-evcard {
+  display: flex;
+  gap: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow: hidden;
+}
+.kx-evcard__poster {
+  width: 160px;
+  flex-shrink: 0;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--color-neutral-100);
+}
+.kx-evcard__body {
+  flex: 1;
+  min-width: 0;
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-evcard__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+.kx-evcard__title {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-evcard__cat {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-evcard__meta {
+  list-style: none;
+  margin: var(--space-1) 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-evcard__meta li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.kx-evcard__actions {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: auto;
+}
+
+/* 행사 상태 pill */
+.kx-evstatus {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+}
+.kx-evstatus.is-ongoing {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kx-evstatus.is-upcoming {
+  background: #fff4e5;
+  color: var(--color-warning);
+}
+.kx-evstatus.is-ended {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-500);
+}
+
+/* 미니 캘린더 */
+.kx-cal__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-cal__nav {
+  width: 28px;
+  height: 28px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  font-size: 16px;
+  cursor: pointer;
+}
+.kx-cal__nav:hover {
+  background: var(--color-neutral-050);
+}
+.kx-cal__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+}
+.kx-cal__wd {
+  text-align: center;
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  padding-bottom: 4px;
+}
+.kx-cal__cell {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  border-radius: var(--radius-sm);
+  position: relative;
+}
+.kx-cal__cell.is-empty {
+  visibility: hidden;
+}
+.kx-cal__cell.has-event {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+  font-weight: 600;
+}
+.kx-cal__cell.has-event::after {
+  content: '';
+  position: absolute;
+  bottom: 3px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--color-primary-600);
+}
+.kx-cal__cell.is-today {
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  font-weight: 700;
+}
+.kx-cal__cell.is-today.has-event::after {
+  background: var(--color-white);
+}
+
+/* 목록 건수 */
+.kx-sched__count {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+/* WISE(UIWS ScheduleCalendar) 참조 월 캘린더 */
+.kx-mcal {
+  min-width: 0;
+}
+.kx-mcal__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+.kx-mcal__title {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin: 0 var(--space-2);
+}
+.kx-mcal__nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  font-size: var(--fs-caption);
+  cursor: pointer;
+}
+.kx-mcal__nav:hover {
+  background: var(--color-neutral-050);
+}
+.kx-mcal__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border-top: var(--border-card);
+  border-left: var(--border-card);
+}
+.kx-mcal__dow {
+  text-align: center;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  padding: 6px 0;
+  background: var(--color-neutral-050);
+  border-right: var(--border-card);
+  border-bottom: var(--border-card);
+}
+.kx-mcal__cell {
+  min-height: 96px;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-right: var(--border-card);
+  border-bottom: var(--border-card);
+  overflow: hidden;
+}
+.kx-mcal__cell.is-out {
+  background: var(--color-neutral-050);
+}
+.kx-mcal__cell.is-today {
+  background: var(--color-primary-050);
+}
+.kx-mcal__daynum {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+}
+.kx-mcal__cell.is-sun .kx-mcal__daynum,
+.kx-mcal__dow.is-sun {
+  color: #d64545;
+}
+.kx-mcal__cell.is-sat .kx-mcal__daynum,
+.kx-mcal__dow.is-sat {
+  color: var(--color-primary-600);
+}
+.kx-mcal__cell.is-today .kx-mcal__daynum {
+  font-weight: 700;
+  color: var(--color-primary-700);
+}
+.kx-mcal__chip {
+  font-size: 11px;
+  line-height: 1.35;
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+.kx-mcal__chip.is-exhibition {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kx-mcal__chip.is-culture {
+  background: #fdeef3;
+  color: #b83268;
+}
+.kx-mcal__chip.is-trade {
+  background: #fff4e5;
+  color: #9a6b1f;
+}
+.kx-mcal__chip.is-tech {
+  background: #e6f4ee;
+  color: #1f7a54;
+}
+.kx-mcal__more {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+
+@media (max-width: 1100px) {
+  .kx-sched__split {
+    /* 단일 컬럼도 min-width:0 확보(7열 그리드가 뷰포트를 넘지 않게). */
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (max-width: 620px) {
+  .kx-evcard {
+    flex-direction: column;
+  }
+  .kx-evcard__poster {
+    width: 100%;
+    height: 120px;
+  }
+}
+
+/* F001 홀 가용성(빈 기간) 목록 — 스케줄 aside 보강 */
+.kx-availlist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.kx-availlist__item {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+.kx-availlist__label { color: var(--kx-text, #0f172a); }
+.kx-availlist__meta { color: var(--kx-text-muted, #64748b); }
+.kx-availbadge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: 600;
+}
+.kx-availbadge.is-open { color: #15803d; background: #f0fdf4; }
+.kx-availbadge.is-full { color: #b45309; background: #fffbeb; }
diff --git a/src/frontend/src/screens/schedule/scheduleApi.ts b/src/frontend/src/screens/schedule/scheduleApi.ts
new file mode 100644
index 0000000..ec4e4cd
--- /dev/null
+++ b/src/frontend/src/screens/schedule/scheduleApi.ts
@@ -0,0 +1,29 @@
+/*
+ * SCR-15 전시 일정 로컬 API 래퍼 — 홀 가동률·캘린더 점유 집계.
+ * 공용 client 의 `api` 만 import(엔드포인트 계약은 백엔드 com.zioinfo.kintex.catalog.EventCatalogController 정본).
+ * 실패(NETWORK/NOT_FOUND/NOT_IMPLEMENTED) 시 호출부에서 크롤링 샘플로 강등한다.
+ */
+import { api } from '../../api/client';
+
+/** 홀 그룹 가동률 항목 (백엔드 HallUtilizationDto 정합). */
+export interface HallUtilizationDto {
+  label: string;
+  pct: number;
+  busyDays: number;
+  totalDays: number;
+}
+
+/** 캘린더 점유 항목 — 행사 진행 날짜만(백엔드 CalendarDayDto 정합). */
+export interface CalendarDayDto {
+  date: string; // "YYYY-MM-DD"
+  count: number;
+}
+
+export const scheduleApi = {
+  /** 지정 월(1~12) 홀 가동률 집계. */
+  hallUtilization: (year: number, month: number) =>
+    api.get<HallUtilizationDto[]>(`/api/events/hall-utilization?year=${year}&month=${month}`),
+  /** 지정 월(1~12) 캘린더 점유. */
+  calendar: (year: number, month: number) =>
+    api.get<CalendarDayDto[]>(`/api/events/calendar?year=${year}&month=${month}`),
+};
diff --git a/src/frontend/src/screens/settlement/SettlementDashboardPage.tsx b/src/frontend/src/screens/settlement/SettlementDashboardPage.tsx
new file mode 100644
index 0000000..a7f4670
--- /dev/null
+++ b/src/frontend/src/screens/settlement/SettlementDashboardPage.tsx
@@ -0,0 +1,952 @@
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { CHART } from '../chartColors';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { useAuthStore } from '../../store/authStore';
+import { settlementApi } from './settlementApi';
+import type { InvoiceCategory, InvoiceStatus, ReportGroup, StatusBucket } from './settlementApi';
+import './settlement.css';
+
+/*
+ * SCR /settlement — M9 정산·결제 현황 대시보드.
+ * GET /api/settlement/dashboard (청구/수납/미수 KPI + 상태 분포),
+ * GET /api/settlement/invoices (상태 필터·페이지네이션), 상세(라인아이템+수납 이력),
+ * 수납 기록·발행·청구 생성(매니저 이상 — 서버 재검증).
+ * 금액은 모두 서버 계산 권위. 결제는 PG 위임 고지 — 실 PG 연동 없이 상태만 전이.
+ */
+
+const PAGE_SIZE = 20;
+
+const STATUS_META: Record<InvoiceStatus, { color: string; tone: string }> = {
+  pending: { color: CHART.slate, tone: 'muted' },
+  invoiced: { color: CHART.primary600, tone: 'info' },
+  paid: { color: CHART.success, tone: 'ok' },
+  overdue: { color: CHART.error, tone: 'error' },
+  cancelled: { color: CHART.slate, tone: 'muted' },
+};
+
+const STATUS_FILTER_VALUES: Array<'' | InvoiceStatus> = ['', 'pending', 'invoiced', 'paid', 'overdue', 'cancelled'];
+
+/** 청구 상태 → 현지화 라벨. '' 은 전체 필터. */
+function statusLabel(t: TFunction, status: '' | InvoiceStatus): string {
+  return status === '' ? t('settlement.status.all') : t(`settlement.status.${status}`);
+}
+
+export function SettlementDashboardPage() {
+  const { t } = useTranslation();
+  const eventId = useResolvedEventId();
+  const role = useAuthStore((s) => s.roleForCurrent());
+  const canManage = role === 'ORGANIZER' || role === 'HALL_MANAGER';
+
+  const [statusFilter, setStatusFilter] = useState<'' | InvoiceStatus>('');
+  const [page, setPage] = useState(0);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const qc = useQueryClient();
+
+  const dashboardQ = useQuery({
+    queryKey: ['settlement', 'dashboard', eventId],
+    queryFn: () => settlementApi.dashboard(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const listQ = useQuery({
+    queryKey: ['settlement', 'invoices', eventId, statusFilter, page],
+    queryFn: () => settlementApi.invoices(eventId as string, statusFilter || null, page, PAGE_SIZE),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const generateM = useMutation({
+    mutationFn: () => settlementApi.generate(eventId as string),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['settlement'] });
+    },
+  });
+
+  const refetchAll = () => {
+    qc.invalidateQueries({ queryKey: ['settlement'] });
+  };
+
+  if (!eventId) {
+    return (
+      <div className="kx-settle">
+        <PageHeader canManage={false} onGenerate={() => {}} generating={false} />
+        <EmptyState title={t('settlement.noEventTitle')} description={t('settlement.noEventDesc')} />
+      </div>
+    );
+  }
+
+  const dash = dashboardQ.data;
+  const list = listQ.data;
+  const totalPages = list ? Math.max(1, Math.ceil(list.total / PAGE_SIZE)) : 1;
+
+  return (
+    <div className="kx-settle">
+      <PageHeader
+        canManage={canManage}
+        onGenerate={() => generateM.mutate()}
+        generating={generateM.isPending}
+      />
+
+      {generateM.isSuccess && generateM.data && (
+        <div className="kx-settle__notice" role="status">
+          {t('settlement.genDone', { created: generateM.data.created, skipped: generateM.data.skipped })}
+        </div>
+      )}
+      {generateM.isError && (
+        <div className="kx-settle__notice kx-settle__notice--error" role="alert">
+          {t('settlement.genError')}
+        </div>
+      )}
+
+      {/* KPI 밴드 */}
+      {dashboardQ.isLoading ? (
+        <div className="kx-settle__kpis" aria-hidden="true">
+          {[0, 1, 2, 3].map((i) => (
+            <Skeleton key={i} height={92} radius={12} />
+          ))}
+        </div>
+      ) : dashboardQ.isError ? (
+        <ErrorState message={t('settlement.dashError')} onRetry={() => dashboardQ.refetch()} />
+      ) : dash ? (
+        <>
+          <section className="kx-settle__kpis" aria-label={t('settlement.kpisAria')}>
+            <KpiCard label={t('settlement.kpiBilled')} value={formatWon(dash.billed)} tone="info" sub={t('settlement.count', { n: dash.invoiceCount })} />
+            <KpiCard
+              label={t('settlement.kpiCollected')}
+              value={formatWon(dash.collected)}
+              tone="ok"
+              sub={t('settlement.collectionRate', { rate: dash.collectionRate.toFixed(1) })}
+            />
+            <KpiCard label={t('settlement.kpiOutstanding')} value={formatWon(dash.outstanding)} tone="muted" sub={t('settlement.outstandingSub')} />
+            <KpiCard
+              label={t('settlement.kpiOverdue')}
+              value={t('settlement.count', { n: dash.overdueCount })}
+              tone={dash.overdueCount > 0 ? 'error' : 'muted'}
+              sub={t('settlement.overdueSub')}
+            />
+          </section>
+
+          {/* 상태 분포 도넛 + 범례 */}
+          <section className="kx-card kx-settle__dist" aria-label={t('settlement.distTitle')}>
+            <div className="kx-card__head">
+              <h2>{t('settlement.distTitle')}</h2>
+            </div>
+            <StatusDistribution buckets={dash.statusDistribution} />
+            <p className="kx-settle__paynote">{dash.paymentNote}</p>
+          </section>
+        </>
+      ) : null}
+
+      {/* 청구서 목록 */}
+      <section className="kx-card kx-settle__list-card" aria-label={t('settlement.listTitle')}>
+        <div className="kx-card__head kx-settle__list-head">
+          <h2>{t('settlement.invoices')}</h2>
+          <div className="kx-seg" role="tablist" aria-label={t('settlement.statusFilter')}>
+            {STATUS_FILTER_VALUES.map((v) => (
+              <button
+                key={v || 'all'}
+                role="tab"
+                aria-selected={statusFilter === v}
+                className={`kx-seg__btn ${statusFilter === v ? 'is-active' : ''}`}
+                onClick={() => {
+                  setStatusFilter(v);
+                  setPage(0);
+                }}
+              >
+                {statusLabel(t, v)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {listQ.isLoading ? (
+          <div style={{ display: 'grid', gap: 8 }} aria-hidden="true">
+            {[0, 1, 2, 3, 4].map((i) => (
+              <Skeleton key={i} height={44} radius={8} />
+            ))}
+          </div>
+        ) : listQ.isError ? (
+          <ErrorState message={t('settlement.listError')} onRetry={() => listQ.refetch()} />
+        ) : !list || list.items.length === 0 ? (
+          <EmptyState
+            title={t('settlement.emptyTitle')}
+            description={canManage ? t('settlement.emptyManage') : t('settlement.emptyView')}
+          />
+        ) : (
+          <>
+            <div className="kx-table-scroll">
+              <table className="kx-table kx-table--zebra">
+                <thead>
+                  <tr>
+                    <th>{t('settlement.colNo')}</th>
+                    <th>{t('settlement.colExhibitor')}</th>
+                    <th className="kx-num">{t('settlement.colBilled')}</th>
+                    <th className="kx-num">{t('settlement.colPaid')}</th>
+                    <th className="kx-num">{t('settlement.colOutstanding')}</th>
+                    <th>{t('settlement.colDue')}</th>
+                    <th>{t('settlement.colStatus')}</th>
+                    <th aria-label={t('settlement.detail')} />
+                  </tr>
+                </thead>
+                <tbody>
+                  {list.items.map((inv) => (
+                    <tr key={inv.id} className="kx-settle__row" onClick={() => setSelectedId(inv.id)}>
+                      <td className="tnum">{inv.invoiceNo}</td>
+                      <td>
+                        {inv.exhibitorName}
+                        <CategoryTag category={inv.category} />
+                      </td>
+                      <td className="kx-num tnum">{formatWon(inv.total)}</td>
+                      <td className="kx-num tnum">{formatWon(inv.paidAmount)}</td>
+                      <td className="kx-num tnum">{formatWon(inv.outstanding)}</td>
+                      <td>{inv.dueDate ?? '-'}</td>
+                      <td>
+                        <StatusPill status={inv.status} />
+                      </td>
+                      <td>
+                        <button
+                          className="kx-settle__link"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setSelectedId(inv.id);
+                          }}
+                        >
+                          {t('settlement.detail')}
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="kx-settle__pager">
+              <Button
+                variant="secondary"
+                disabled={page <= 0}
+                onClick={() => setPage((p) => Math.max(0, p - 1))}
+              >
+                {t('settlement.prev')}
+              </Button>
+              <span className="kx-settle__pageinfo tnum">
+                {t('settlement.pageInfo', { page: page + 1, total: totalPages, cnt: list.total })}
+              </span>
+              <Button
+                variant="secondary"
+                disabled={page + 1 >= totalPages}
+                onClick={() => setPage((p) => p + 1)}
+              >
+                {t('settlement.next')}
+              </Button>
+            </div>
+          </>
+        )}
+      </section>
+
+      {/* 정산 리포트(카테고리별 합계·수납율·미수 + CSV) */}
+      <ReportSection eventId={eventId} />
+
+      {selectedId && (
+        <InvoiceDetailModal
+          invoiceId={selectedId}
+          onClose={() => setSelectedId(null)}
+          onChanged={refetchAll}
+        />
+      )}
+    </div>
+  );
+}
+
+// ── 정산 리포트 섹션(F083) ────────────────────────────────────────────────────
+function ReportSection({ eventId }: { eventId: string }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const reportQ = useQuery({
+    queryKey: ['settlement', 'report', eventId],
+    queryFn: () => settlementApi.report(eventId),
+    enabled: open && !!eventId,
+    retry: false,
+  });
+
+  const rep = reportQ.data;
+
+  const downloadCsv = () => {
+    if (!rep) return;
+    const header = [
+      t('settlement.colNo'),
+      t('settlement.colExhibitor'),
+      t('settlement.colCategory'),
+      t('settlement.colStatus'),
+      t('settlement.supplyAmount'),
+      t('settlement.vat'),
+      t('settlement.colBilled'),
+      t('settlement.colPaid'),
+      t('settlement.colOutstanding'),
+      t('settlement.colDue'),
+    ];
+    const lines = rep.rows.map((r) =>
+      [
+        r.invoiceNo,
+        r.exhibitorName,
+        r.category,
+        r.status,
+        r.subtotal,
+        r.vat,
+        r.total,
+        r.paidAmount,
+        r.outstanding,
+        r.dueDate ?? '',
+      ]
+        .map(csvCell)
+        .join(','),
+    );
+    const csv = '' + [header.map(csvCell).join(','), ...lines].join('\r\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `settlement_report_${eventId}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <section className="kx-card kx-settle__report" aria-label={t('settlement.reportTitle')}>
+      <div className="kx-card__head kx-settle__report-head">
+        <h2>{t('settlement.reportTitle')}</h2>
+        <div className="kx-settle__report-actions">
+          <Button variant="secondary" onClick={() => setOpen((v) => !v)}>
+            {open ? t('settlement.reportHide') : t('settlement.reportShow')}
+          </Button>
+          {open && rep && (
+            <Button variant="primary" onClick={downloadCsv} disabled={rep.rows.length === 0}>
+              {t('settlement.reportCsv')}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {!open ? (
+        <p className="kx-settle__muted">{t('settlement.reportHint')}</p>
+      ) : reportQ.isLoading ? (
+        <div style={{ display: 'grid', gap: 8 }} aria-hidden="true">
+          {[0, 1, 2].map((i) => (
+            <Skeleton key={i} height={40} radius={8} />
+          ))}
+        </div>
+      ) : reportQ.isError || !rep ? (
+        <ErrorState message={t('settlement.reportError')} onRetry={() => reportQ.refetch()} />
+      ) : (
+        <div className="kx-settle__report-body">
+          <div className="kx-settle__report-summary">
+            <span>
+              {t('settlement.colBilled')}: <strong className="tnum">{formatWon(rep.totalBilled)}</strong>
+            </span>
+            <span>
+              {t('settlement.colPaid')}: <strong className="tnum">{formatWon(rep.totalCollected)}</strong>
+            </span>
+            <span>
+              {t('settlement.colOutstanding')}: <strong className="tnum">{formatWon(rep.totalOutstanding)}</strong>
+            </span>
+            <span>
+              {t('settlement.collectionRate', { rate: rep.collectionRate.toFixed(1) })}
+            </span>
+          </div>
+          <ReportGroupTable title={t('settlement.reportByCategory')} groups={rep.byCategory} category />
+          <ReportGroupTable title={t('settlement.reportByStatus')} groups={rep.byStatus} />
+          <p className="kx-settle__muted">{t('settlement.reportNote')}</p>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function ReportGroupTable({ title, groups, category }: { title: string; groups: ReportGroup[]; category?: boolean }) {
+  const { t } = useTranslation();
+  return (
+    <div className="kx-settle__report-group">
+      <h3>{title}</h3>
+      {groups.length === 0 ? (
+        <p className="kx-settle__muted">{t('settlement.reportEmpty')}</p>
+      ) : (
+        <table className="kx-table kx-table--zebra">
+          <thead>
+            <tr>
+              <th>{category ? t('settlement.colCategory') : t('settlement.colStatus')}</th>
+              <th className="kx-num">{t('settlement.reportCount')}</th>
+              <th className="kx-num">{t('settlement.colBilled')}</th>
+              <th className="kx-num">{t('settlement.colPaid')}</th>
+              <th className="kx-num">{t('settlement.colOutstanding')}</th>
+              <th className="kx-num">{t('settlement.reportRate')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {groups.map((g) => (
+              <tr key={g.key}>
+                <td>{groupLabel(t, g.key, category)}</td>
+                <td className="kx-num tnum">{g.invoiceCount.toLocaleString()}</td>
+                <td className="kx-num tnum">{g.billed.toLocaleString()}</td>
+                <td className="kx-num tnum">{g.collected.toLocaleString()}</td>
+                <td className="kx-num tnum">{g.outstanding.toLocaleString()}</td>
+                <td className="kx-num tnum">{g.collectionRate.toFixed(1)}%</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+
+function groupLabel(t: TFunction, key: string, category?: boolean): string {
+  if (category) {
+    return key === 'auction_fee' ? t('settlement.catAuctionFee') : t('settlement.catRental');
+  }
+  const known: InvoiceStatus[] = ['pending', 'invoiced', 'paid', 'overdue', 'cancelled'];
+  return (known as string[]).includes(key) ? t(`settlement.status.${key}`) : key;
+}
+
+/** CSV 셀 이스케이프(쉼표·따옴표·줄바꿈 방어). */
+function csvCell(v: string | number): string {
+  const s = String(v ?? '');
+  return /[",\r\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+}
+
+// ── 헤더 ─────────────────────────────────────────────────────────────────────
+function PageHeader({
+  canManage,
+  onGenerate,
+  generating,
+}: {
+  canManage: boolean;
+  onGenerate: () => void;
+  generating: boolean;
+}) {
+  const { t } = useTranslation();
+  return (
+    <header className="kx-settle__head">
+      <div>
+        <h1 className="kx-settle__title">{t('settlement.title')}</h1>
+        <p className="kx-settle__subtitle">{t('settlement.subtitle')}</p>
+      </div>
+      {canManage && (
+        <div className="kx-settle__head-actions">
+          <Button variant="primary" onClick={onGenerate} disabled={generating}>
+            {generating ? t('settlement.generating') : t('settlement.generate')}
+          </Button>
+        </div>
+      )}
+    </header>
+  );
+}
+
+// ── KPI 카드 ─────────────────────────────────────────────────────────────────
+function KpiCard({
+  label,
+  value,
+  sub,
+  tone,
+}: {
+  label: string;
+  value: string;
+  sub?: string;
+  tone: 'info' | 'ok' | 'error' | 'muted';
+}) {
+  return (
+    <div className={`kx-kpi kx-settle__kpi kx-settle__kpi--${tone}`}>
+      <span className="kx-kpi__label">{label}</span>
+      <strong className="kx-kpi__value tnum">{value}</strong>
+      {sub && <span className="kx-settle__kpi-sub">{sub}</span>}
+    </div>
+  );
+}
+
+// ── 상태 분포(도넛) ───────────────────────────────────────────────────────────
+function StatusDistribution({ buckets }: { buckets: StatusBucket[] }) {
+  const { t } = useTranslation();
+  const data = useMemo(
+    () =>
+      buckets
+        .filter((b) => b.count > 0)
+        .map((b) => ({
+          key: b.status,
+          name: statusLabel(t, b.status),
+          value: b.totalAmount,
+          count: b.count,
+          color: STATUS_META[b.status]?.color ?? CHART.slate,
+        })),
+    [buckets, t],
+  );
+
+  if (data.length === 0) {
+    return <EmptyState title={t('settlement.distEmpty')} />;
+  }
+
+  return (
+    <div className="kx-settle__dist-body">
+      <div className="kx-settle__donut">
+        <ResponsiveContainer width="100%" height={220}>
+          <PieChart>
+            <Pie data={data} dataKey="value" nameKey="name" innerRadius={58} outerRadius={88} paddingAngle={2}>
+              {data.map((d) => (
+                <Cell key={d.key} fill={d.color} />
+              ))}
+            </Pie>
+            <Tooltip
+              contentStyle={TOOLTIP_STYLE}
+              formatter={(value, _name, item) => {
+                const p = (item?.payload ?? {}) as { count?: number; name?: string };
+                return [`${formatWon(Number(value))} · ${t('settlement.count', { n: p.count ?? 0 })}`, p.name ?? ''];
+              }}
+            />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+      <ul className="kx-settle__legend">
+        {data.map((d) => (
+          <li key={d.key} className="kx-settle__legend-item">
+            <span className="kx-settle__legend-dot" style={{ background: d.color }} aria-hidden="true" />
+            <span className="kx-settle__legend-name">{d.name}</span>
+            <span className="kx-settle__legend-val tnum">
+              {t('settlement.count', { n: d.count })} · {formatWon(d.value)}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+// ── 유형 표시(F084 옥션 수수료 구분) ─────────────────────────────────────────
+function CategoryTag({ category }: { category: InvoiceCategory }) {
+  const { t } = useTranslation();
+  const label = category === 'auction_fee' ? t('settlement.catAuctionFee') : t('settlement.catRental');
+  return <span className={`kx-settle__cattag kx-settle__cattag--${category}`}>{label}</span>;
+}
+
+// ── 상태 표시 ─────────────────────────────────────────────────────────────────
+function StatusPill({ status }: { status: InvoiceStatus }) {
+  const { t } = useTranslation();
+  const meta = STATUS_META[status] ?? { tone: 'muted', color: CHART.slate };
+  return <span className={`kx-settle__pill kx-settle__pill--${meta.tone}`}>{statusLabel(t, status)}</span>;
+}
+
+// ── 상세 모달(라인아이템 + 수납 이력 + 수납 기록) ─────────────────────────────
+function InvoiceDetailModal({
+  invoiceId,
+  onClose,
+  onChanged,
+}: {
+  invoiceId: string;
+  onClose: () => void;
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const [amount, setAmount] = useState('');
+  const [method, setMethod] = useState<'manual' | 'transfer' | 'card'>('transfer');
+  const [memo, setMemo] = useState('');
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const detailQ = useQuery({
+    queryKey: ['settlement', 'detail', invoiceId],
+    queryFn: () => settlementApi.detail(invoiceId),
+    retry: false,
+  });
+
+  const invalidate = () => {
+    qc.invalidateQueries({ queryKey: ['settlement', 'detail', invoiceId] });
+    onChanged();
+  };
+
+  const payM = useMutation({
+    mutationFn: () =>
+      settlementApi.recordPayment(invoiceId, { amount: Number(amount), method, memo: memo || undefined }),
+    onSuccess: () => {
+      setAmount('');
+      setMemo('');
+      setFormError(null);
+      invalidate();
+    },
+    onError: () => setFormError(t('settlement.payFail')),
+  });
+
+  const issueM = useMutation({
+    mutationFn: () => settlementApi.issue(invoiceId),
+    onSuccess: invalidate,
+  });
+
+  // F083 세금계산서
+  const taxQ = useQuery({
+    queryKey: ['settlement', 'tax', invoiceId],
+    queryFn: () => settlementApi.getTaxInvoice(invoiceId),
+    retry: false,
+  });
+  const issueTaxM = useMutation({
+    mutationFn: () => settlementApi.issueTaxInvoice(invoiceId),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['settlement', 'tax', invoiceId] });
+    },
+  });
+
+  // F085 환불·취소
+  const [showCancel, setShowCancel] = useState(false);
+  const [cancelReason, setCancelReason] = useState('');
+  const d = detailQ.data;
+  const refundQ = useQuery({
+    queryKey: ['settlement', 'refund', invoiceId],
+    queryFn: () => settlementApi.refundQuote(invoiceId),
+    enabled: showCancel && !!d && d.status !== 'cancelled',
+    retry: false,
+  });
+  const cancelM = useMutation({
+    mutationFn: () => settlementApi.cancel(invoiceId, { reason: cancelReason || undefined }),
+    onSuccess: () => {
+      setShowCancel(false);
+      setCancelReason('');
+      invalidate();
+    },
+  });
+
+  const submitPayment = () => {
+    const n = Number(amount);
+    if (!Number.isFinite(n) || n <= 0) {
+      setFormError(t('settlement.errPositive'));
+      return;
+    }
+    if (d && n > d.outstanding) {
+      setFormError(t('settlement.errExceed'));
+      return;
+    }
+    setFormError(null);
+    payM.mutate();
+  };
+
+  return (
+    <div className="kx-settle__overlay" role="dialog" aria-modal="true" aria-label={t('settlement.modalAria')} onClick={onClose}>
+      <div className="kx-settle__modal" onClick={(e) => e.stopPropagation()}>
+        <div className="kx-settle__modal-head">
+          <h2>{d ? d.invoiceNo : t('settlement.invoice')}</h2>
+          <button className="kx-settle__close" aria-label={t('settlement.close')} onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        {detailQ.isLoading ? (
+          <div style={{ display: 'grid', gap: 8, padding: 16 }} aria-hidden="true">
+            <Skeleton height={24} radius={6} />
+            <Skeleton height={120} radius={8} />
+            <Skeleton height={80} radius={8} />
+          </div>
+        ) : detailQ.isError || !d ? (
+          <ErrorState message={t('settlement.detailError')} onRetry={() => detailQ.refetch()} />
+        ) : (
+          <div className="kx-settle__modal-body">
+            <div className="kx-settle__meta">
+              <div>
+                <span className="kx-settle__meta-k">{t('settlement.colExhibitor')}</span>
+                <span className="kx-settle__meta-v">{d.exhibitorName}</span>
+              </div>
+              <div>
+                <span className="kx-settle__meta-k">{t('settlement.colCategory')}</span>
+                <CategoryTag category={d.category} />
+              </div>
+              <div>
+                <span className="kx-settle__meta-k">{t('settlement.colStatus')}</span>
+                <StatusPill status={d.status} />
+              </div>
+              <div>
+                <span className="kx-settle__meta-k">{t('settlement.colDue')}</span>
+                <span className="kx-settle__meta-v">{d.dueDate ?? '-'}</span>
+              </div>
+            </div>
+
+            {/* 라인아이템 */}
+            <table className="kx-table kx-settle__lines">
+              <thead>
+                <tr>
+                  <th>{t('settlement.liItem')}</th>
+                  <th className="kx-num">{t('settlement.liQty')}</th>
+                  <th className="kx-num">{t('settlement.liUnit')}</th>
+                  <th className="kx-num">{t('settlement.liAmount')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {d.lineItems.length === 0 ? (
+                  <tr>
+                    <td colSpan={4} className="kx-settle__muted">
+                      {t('settlement.noLines')}
+                    </td>
+                  </tr>
+                ) : (
+                  d.lineItems.map((li, i) => (
+                    <tr key={`${li.category}-${i}`}>
+                      <td>
+                        <span className="kx-settle__cat">{li.category}</span> {li.description}
+                      </td>
+                      <td className="kx-num tnum">{li.quantity.toLocaleString()}</td>
+                      <td className="kx-num tnum">{li.unitPrice.toLocaleString()}</td>
+                      <td className="kx-num tnum">{li.amount.toLocaleString()}</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td colSpan={3}>{t('settlement.supplyAmount')}</td>
+                  <td className="kx-num tnum">{d.subtotal.toLocaleString()}</td>
+                </tr>
+                <tr>
+                  <td colSpan={3}>{t('settlement.vat')}</td>
+                  <td className="kx-num tnum">{d.vat.toLocaleString()}</td>
+                </tr>
+                <tr className="kx-settle__total-row">
+                  <td colSpan={3}>{t('settlement.grandTotal')}</td>
+                  <td className="kx-num tnum">{d.total.toLocaleString()}</td>
+                </tr>
+                <tr>
+                  <td colSpan={3}>{t('settlement.paidOutstanding')}</td>
+                  <td className="kx-num tnum">
+                    {d.paidAmount.toLocaleString()} / {d.outstanding.toLocaleString()}
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+
+            {/* 수납 이력 */}
+            <div className="kx-settle__pay-hist">
+              <h3>{t('settlement.payHistory')}</h3>
+              {d.payments.length === 0 ? (
+                <p className="kx-settle__muted">{t('settlement.noPayments')}</p>
+              ) : (
+                <ul>
+                  {d.payments.map((p) => (
+                    <li key={p.id}>
+                      <span className="tnum">{t('settlement.won', { v: p.amount.toLocaleString() })}</span>
+                      <span className="kx-settle__pay-method">{p.method}</span>
+                      {p.memo && <span className="kx-settle__pay-memo">{p.memo}</span>}
+                      <span className="kx-settle__pay-date">{formatDate(p.recordedAt)}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            {/* 세금계산서(F083) */}
+            <div className="kx-settle__tax">
+              <h3>{t('settlement.taxTitle')}</h3>
+              {taxQ.isLoading ? (
+                <Skeleton height={60} radius={8} />
+              ) : taxQ.data ? (
+                <div className="kx-settle__tax-doc">
+                  <div className="kx-settle__tax-row">
+                    <span className="kx-settle__meta-k">{t('settlement.taxNo')}</span>
+                    <span className="kx-settle__meta-v tnum">{taxQ.data.taxInvoiceNo}</span>
+                  </div>
+                  <div className="kx-settle__tax-row">
+                    <span className="kx-settle__meta-k">{t('settlement.taxSupplier')}</span>
+                    <span className="kx-settle__meta-v">{taxQ.data.supplierName}</span>
+                  </div>
+                  <div className="kx-settle__tax-row">
+                    <span className="kx-settle__meta-k">{t('settlement.taxBuyer')}</span>
+                    <span className="kx-settle__meta-v">{taxQ.data.buyerName}</span>
+                  </div>
+                  <div className="kx-settle__tax-row">
+                    <span className="kx-settle__meta-k">{t('settlement.taxItem')}</span>
+                    <span className="kx-settle__meta-v">{taxQ.data.itemSummary}</span>
+                  </div>
+                  <div className="kx-settle__tax-amounts">
+                    <span>
+                      {t('settlement.supplyAmount')}: <strong className="tnum">{taxQ.data.supplyAmount.toLocaleString()}</strong>
+                    </span>
+                    <span>
+                      {t('settlement.vat')}: <strong className="tnum">{taxQ.data.vat.toLocaleString()}</strong>
+                    </span>
+                    <span>
+                      {t('settlement.grandTotal')}: <strong className="tnum">{taxQ.data.total.toLocaleString()}</strong>
+                    </span>
+                  </div>
+                  <p className="kx-settle__muted">{taxQ.data.issueNote}</p>
+                </div>
+              ) : (
+                <p className="kx-settle__muted">{t('settlement.taxNone')}</p>
+              )}
+              {d.canManage && !taxQ.data && d.status !== 'pending' && d.status !== 'cancelled' && (
+                <Button variant="secondary" onClick={() => issueTaxM.mutate()} disabled={issueTaxM.isPending}>
+                  {issueTaxM.isPending ? t('settlement.taxIssuing') : t('settlement.taxIssue')}
+                </Button>
+              )}
+              {issueTaxM.isError && (
+                <p className="kx-settle__form-error" role="alert">{t('settlement.taxIssueFail')}</p>
+              )}
+            </div>
+
+            {/* 매니저 액션 */}
+            {d.canManage ? (
+              <div className="kx-settle__actions">
+                {d.status === 'cancelled' && (
+                  <p className="kx-settle__muted">{t('settlement.cancelledNote')}</p>
+                )}
+                {d.status === 'pending' && (
+                  <Button variant="secondary" onClick={() => issueM.mutate()} disabled={issueM.isPending}>
+                    {issueM.isPending ? t('settlement.issuing') : t('settlement.issue')}
+                  </Button>
+                )}
+                {d.status !== 'cancelled' && d.outstanding > 0 && (
+                  <div className="kx-settle__pay-form">
+                    <div className="kx-settle__pay-inputs">
+                      <input
+                        className="kx-input"
+                        type="number"
+                        min={1}
+                        placeholder={t('settlement.payAmountPh')}
+                        value={amount}
+                        onChange={(e) => setAmount(e.target.value)}
+                        aria-label={t('settlement.payAmount')}
+                      />
+                      <select
+                        className="kx-select"
+                        value={method}
+                        onChange={(e) => setMethod(e.target.value as 'manual' | 'transfer' | 'card')}
+                        aria-label={t('settlement.payMethod')}
+                      >
+                        <option value="transfer">{t('settlement.methodTransfer')}</option>
+                        <option value="card">{t('settlement.methodCard')}</option>
+                        <option value="manual">{t('settlement.methodOther')}</option>
+                      </select>
+                      <input
+                        className="kx-input"
+                        type="text"
+                        placeholder={t('settlement.memoPh')}
+                        value={memo}
+                        onChange={(e) => setMemo(e.target.value)}
+                        aria-label={t('settlement.memo')}
+                      />
+                      <Button variant="primary" onClick={submitPayment} disabled={payM.isPending}>
+                        {payM.isPending ? t('settlement.recording') : t('settlement.recordPay')}
+                      </Button>
+                    </div>
+                    {formError && <p className="kx-settle__form-error" role="alert">{formError}</p>}
+                    <p className="kx-settle__muted">
+                      {t('settlement.pgNote')}
+                    </p>
+                  </div>
+                )}
+
+                {/* 취소·환불(F085) */}
+                {d.status !== 'cancelled' && (
+                  <div className="kx-settle__cancel">
+                    {!showCancel ? (
+                      <Button variant="secondary" onClick={() => setShowCancel(true)}>
+                        {t('settlement.cancelInvoice')}
+                      </Button>
+                    ) : (
+                      <div className="kx-settle__cancel-box">
+                        <h4>{t('settlement.refundPreview')}</h4>
+                        {refundQ.isLoading ? (
+                          <Skeleton height={80} radius={8} />
+                        ) : refundQ.isError || !refundQ.data ? (
+                          <ErrorState message={t('settlement.refundError')} onRetry={() => refundQ.refetch()} />
+                        ) : (
+                          <div className="kx-settle__refund">
+                            <div className="kx-settle__refund-row">
+                              <span>{t('settlement.refundBracket')}</span>
+                              <strong>
+                                {refundQ.data.bracketLabel}
+                                {refundQ.data.daysBeforeEvent != null &&
+                                  ` (D-${refundQ.data.daysBeforeEvent})`}
+                              </strong>
+                            </div>
+                            <div className="kx-settle__refund-row">
+                              <span>{t('settlement.refundRate')}</span>
+                              <strong className="tnum">{refundQ.data.refundRatePercent}%</strong>
+                            </div>
+                            <div className="kx-settle__refund-row">
+                              <span>{t('settlement.refundBase')}</span>
+                              <strong className="tnum">{refundQ.data.baseAmount.toLocaleString()}</strong>
+                            </div>
+                            <div className="kx-settle__refund-row kx-settle__refund-row--em">
+                              <span>{t('settlement.refundAmount')}</span>
+                              <strong className="tnum">{refundQ.data.refundAmount.toLocaleString()}</strong>
+                            </div>
+                            <div className="kx-settle__refund-row">
+                              <span>{t('settlement.forfeitAmount')}</span>
+                              <strong className="tnum">{refundQ.data.forfeitAmount.toLocaleString()}</strong>
+                            </div>
+                            {!refundQ.data.dateResolved && (
+                              <p className="kx-settle__form-error">{t('settlement.refundManual')}</p>
+                            )}
+                            <p className="kx-settle__muted">{refundQ.data.pgNote}</p>
+                          </div>
+                        )}
+                        <input
+                          className="kx-input"
+                          type="text"
+                          placeholder={t('settlement.cancelReasonPh')}
+                          value={cancelReason}
+                          onChange={(e) => setCancelReason(e.target.value)}
+                          aria-label={t('settlement.cancelReason')}
+                        />
+                        <div className="kx-settle__cancel-actions">
+                          <Button
+                            variant="secondary"
+                            onClick={() => {
+                              setShowCancel(false);
+                              setCancelReason('');
+                            }}
+                          >
+                            {t('settlement.cancelAbort')}
+                          </Button>
+                          <Button
+                            variant="primary"
+                            onClick={() => cancelM.mutate()}
+                            disabled={cancelM.isPending || refundQ.isLoading}
+                          >
+                            {cancelM.isPending ? t('settlement.cancelling') : t('settlement.cancelConfirm')}
+                          </Button>
+                        </div>
+                        {cancelM.isError && (
+                          <p className="kx-settle__form-error" role="alert">{t('settlement.cancelFail')}</p>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            ) : (
+              <p className="kx-settle__muted">{t('settlement.managerOnly')}</p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const TOOLTIP_STYLE = {
+  fontSize: 12,
+  borderRadius: 8,
+  border: '1px solid #E4E7EC',
+  boxShadow: '0 4px 12px rgba(16,24,40,0.1)',
+} as const;
+
+/** 원 금액 → 억/만 단위 축약(표시 전용, 서버 값 재계산 아님). */
+function formatWon(v: number): string {
+  if (v >= 1e8) return `₩${(v / 1e8).toFixed(2)}억`;
+  if (v >= 1e4) return `₩${Math.round(v / 1e4).toLocaleString()}만`;
+  return `₩${v.toLocaleString()}`;
+}
+
+function formatDate(iso: string | null): string {
+  if (!iso) return '-';
+  return iso.slice(0, 10);
+}
diff --git a/src/frontend/src/screens/settlement/settlement.css b/src/frontend/src/screens/settlement/settlement.css
new file mode 100644
index 0000000..b45dffb
--- /dev/null
+++ b/src/frontend/src/screens/settlement/settlement.css
@@ -0,0 +1,458 @@
+/*
+ * M9 정산·결제 화면 스타일 — 전 규칙 .kx-settle 로 스코프 격리(전역 재정의 방지).
+ * design.md §1 토큰(색·radius·spacing)만 사용. 선 SVG/텍스트만 — 이모지 장식 없음.
+ */
+
+.kx-settle {
+  display: grid;
+  gap: 16px;
+}
+
+/* 헤더 */
+.kx-settle__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.kx-settle__title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-settle__subtitle {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--color-neutral-500);
+}
+.kx-settle__head-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* 공지 배너 */
+.kx-settle__notice {
+  padding: 10px 14px;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-050);
+  border: 1px solid var(--color-primary-100);
+  color: var(--color-primary-700);
+  font-size: 13px;
+}
+.kx-settle__notice--error {
+  background: #fef3f2;
+  border-color: #fecdca;
+  color: var(--color-error);
+}
+
+/* KPI 밴드 */
+.kx-settle__kpis {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+.kx-settle__kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+}
+.kx-settle__kpi-sub {
+  font-size: 12px;
+  color: var(--color-neutral-500);
+}
+.kx-settle__kpi--info {
+  border-left: 4px solid var(--color-primary-600);
+}
+.kx-settle__kpi--ok {
+  border-left: 4px solid var(--color-success);
+}
+.kx-settle__kpi--error {
+  border-left: 4px solid var(--color-error);
+}
+.kx-settle__kpi--muted {
+  border-left: 4px solid var(--color-neutral-200);
+}
+
+/* 상태 분포 */
+.kx-settle__dist-body {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 20px;
+  align-items: center;
+}
+.kx-settle__legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+.kx-settle__legend-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+}
+.kx-settle__legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  flex: 0 0 auto;
+}
+.kx-settle__legend-name {
+  color: var(--color-neutral-700);
+  min-width: 60px;
+}
+.kx-settle__legend-val {
+  color: var(--color-neutral-500);
+  margin-left: auto;
+}
+.kx-settle__paynote {
+  margin: 12px 0 0;
+  font-size: 12px;
+  color: var(--color-neutral-500);
+}
+
+/* 목록 */
+.kx-settle__list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.kx-settle__row {
+  cursor: pointer;
+}
+.kx-settle__row:hover {
+  background: var(--color-primary-050);
+}
+.kx-settle__link {
+  border: none;
+  background: none;
+  color: var(--color-primary-600);
+  font-size: 13px;
+  cursor: pointer;
+  padding: 0;
+}
+.kx-settle__link:hover {
+  text-decoration: underline;
+}
+.kx-settle__pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 12px;
+}
+.kx-settle__pageinfo {
+  font-size: 13px;
+  color: var(--color-neutral-500);
+}
+
+/* 상태 pill */
+.kx-settle__pill {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+}
+.kx-settle__pill--muted {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-500);
+}
+.kx-settle__pill--info {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kx-settle__pill--ok {
+  background: #ecfdf3;
+  color: var(--color-success);
+}
+.kx-settle__pill--error {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+
+/* 상세 모달 */
+.kx-settle__overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(16, 24, 40, 0.45);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 40px 16px;
+  z-index: 50;
+  overflow-y: auto;
+}
+.kx-settle__modal {
+  width: 100%;
+  max-width: 720px;
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.2);
+}
+.kx-settle__modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: var(--border-card);
+}
+.kx-settle__modal-head h2 {
+  margin: 0;
+  font-size: 16px;
+}
+.kx-settle__close {
+  border: none;
+  background: none;
+  font-size: 16px;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kx-settle__modal-body {
+  padding: 20px;
+  display: grid;
+  gap: 16px;
+}
+.kx-settle__meta {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+.kx-settle__meta > div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.kx-settle__meta-k {
+  font-size: 12px;
+  color: var(--color-neutral-500);
+}
+.kx-settle__meta-v {
+  font-size: 14px;
+  color: var(--color-neutral-900);
+  font-weight: 600;
+}
+
+.kx-settle__lines {
+  width: 100%;
+}
+.kx-settle__lines tfoot td {
+  font-size: 13px;
+  color: var(--color-neutral-700);
+}
+.kx-settle__total-row td {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  border-top: 1px solid var(--color-neutral-200);
+}
+.kx-settle__cat {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-primary-700);
+  background: var(--color-primary-050);
+  border-radius: var(--radius-sm);
+  padding: 1px 6px;
+  margin-right: 4px;
+}
+
+.kx-settle__pay-hist h3 {
+  margin: 0 0 8px;
+  font-size: 14px;
+}
+.kx-settle__pay-hist ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 6px;
+}
+.kx-settle__pay-hist li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--color-neutral-700);
+  padding: 6px 10px;
+  background: var(--color-neutral-050);
+  border-radius: var(--radius-sm);
+}
+.kx-settle__pay-method {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  padding: 0 6px;
+}
+.kx-settle__pay-memo {
+  color: var(--color-neutral-500);
+}
+.kx-settle__pay-date {
+  margin-left: auto;
+  color: var(--color-neutral-500);
+}
+
+.kx-settle__actions {
+  display: grid;
+  gap: 12px;
+  border-top: var(--border-card);
+  padding-top: 16px;
+}
+.kx-settle__pay-inputs {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.kx-settle .kx-input {
+  padding: 8px 10px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  color: var(--color-neutral-900);
+}
+.kx-settle .kx-input:focus {
+  outline: none;
+  border-color: var(--color-primary-600);
+}
+.kx-settle__form-error {
+  margin: 0;
+  font-size: 12px;
+  color: var(--color-error);
+}
+.kx-settle__muted {
+  font-size: 12px;
+  color: var(--color-neutral-500);
+  text-align: left;
+}
+
+/* F084 정산 유형 태그(임대 / 옥션 수수료 구분) */
+.kx-settle__cattag {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.kx-settle__cattag--rental {
+  background: var(--color-neutral-100, #f2f4f7);
+  color: var(--color-neutral-600, #475467);
+}
+.kx-settle__cattag--auction_fee {
+  background: var(--color-primary-surface, #eef2ff);
+  color: var(--color-primary-600, #2f42fc);
+}
+
+/* ── W9: F085 환불·취소 + F083 세금계산서 + 정산 리포트 ───────────────────────── */
+.kx-settle__tax {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-neutral-200, #e4e7ec);
+  display: grid;
+  gap: 8px;
+}
+.kx-settle__tax h3 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+.kx-settle__tax-doc {
+  display: grid;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-neutral-200, #e4e7ec);
+  border-radius: 8px;
+  background: var(--color-neutral-50, #f9fafb);
+}
+.kx-settle__tax-row {
+  display: flex;
+  gap: 10px;
+  font-size: 12px;
+}
+.kx-settle__tax-amounts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 4px;
+  font-size: 12px;
+}
+.kx-settle__cancel {
+  margin-top: 12px;
+}
+.kx-settle__cancel-box {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--color-error-border, #fda29b);
+  border-radius: 8px;
+  background: var(--color-error-surface, #fffbfa);
+}
+.kx-settle__cancel-box h4 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+.kx-settle__refund {
+  display: grid;
+  gap: 4px;
+}
+.kx-settle__refund-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+}
+.kx-settle__refund-row--em {
+  padding-top: 4px;
+  border-top: 1px dashed var(--color-neutral-300, #d0d5dd);
+  font-size: 13px;
+}
+.kx-settle__refund-row--em strong {
+  color: var(--color-primary-600, #2f42fc);
+}
+.kx-settle__cancel-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.kx-settle__report {
+  margin-top: 16px;
+}
+.kx-settle__report-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+.kx-settle__report-actions {
+  display: flex;
+  gap: 8px;
+}
+.kx-settle__report-body {
+  display: grid;
+  gap: 16px;
+}
+.kx-settle__report-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 13px;
+}
+.kx-settle__report-group h3 {
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
diff --git a/src/frontend/src/screens/settlement/settlementApi.ts b/src/frontend/src/screens/settlement/settlementApi.ts
new file mode 100644
index 0000000..8912ea4
--- /dev/null
+++ b/src/frontend/src/screens/settlement/settlementApi.ts
@@ -0,0 +1,225 @@
+/*
+ * M9 정산·결제 실 API 클라이언트 — 공용 client(../../api/client)의 api 만 사용.
+ * 정본: 백엔드 com.zioinfo.kintex.settlement (SettlementController) 시그니처.
+ *
+ * ★ 금액은 서버 계산이 권위 — 프론트는 서버가 준 원 단위(long)를 표시만 한다(재계산 없음).
+ * ★ 결제는 PG 위임 고지 패턴 — 실 PG 연동 없음. 수납은 매니저 수동 기록으로 상태만 전이.
+ */
+import { api } from '../../api/client';
+
+export type InvoiceStatus = 'pending' | 'invoiced' | 'paid' | 'overdue' | 'cancelled';
+/** 정산 유형(F084) — rental(임대·유틸) | auction_fee(옥션 수수료). */
+export type InvoiceCategory = 'rental' | 'auction_fee';
+
+export interface StatusBucket {
+  status: InvoiceStatus;
+  count: number;
+  totalAmount: number;
+  paidAmount: number;
+}
+
+export interface SettlementDashboard {
+  eventId: string;
+  billed: number;
+  collected: number;
+  outstanding: number;
+  invoiceCount: number;
+  overdueCount: number;
+  collectionRate: number;
+  statusDistribution: StatusBucket[];
+  paymentNote: string;
+}
+
+export interface InvoiceSummary {
+  id: string;
+  eventId: string;
+  invoiceNo: string;
+  exhibitorName: string;
+  subtotal: number;
+  vat: number;
+  total: number;
+  paidAmount: number;
+  outstanding: number;
+  status: InvoiceStatus;
+  dueDate: string | null;
+  issuedAt: string | null;
+  category: InvoiceCategory;
+}
+
+export interface LineItem {
+  category: string; // RENTAL | UTILITY | OTHER
+  description: string;
+  quantity: number;
+  unitPrice: number;
+  amount: number;
+}
+
+export interface PaymentRecord {
+  id: string;
+  amount: number;
+  method: string; // manual | transfer | card
+  memo: string | null;
+  recordedAt: string;
+}
+
+export interface InvoiceDetail {
+  id: string;
+  eventId: string;
+  invoiceNo: string;
+  exhibitorName: string;
+  subtotal: number;
+  vat: number;
+  total: number;
+  paidAmount: number;
+  outstanding: number;
+  status: InvoiceStatus;
+  dueDate: string | null;
+  issuedAt: string | null;
+  paidAt: string | null;
+  note: string | null;
+  category: InvoiceCategory;
+  lineItems: LineItem[];
+  payments: PaymentRecord[];
+  canManage: boolean;
+}
+
+export interface PageResponse<T> {
+  items: T[];
+  page: number;
+  size: number;
+  total: number;
+}
+
+export interface GenerateResult {
+  eventId: string;
+  created: number;
+  skipped: number;
+  invoices: InvoiceSummary[];
+}
+
+export interface RecordPaymentInput {
+  amount: number;
+  method?: 'manual' | 'transfer' | 'card';
+  memo?: string;
+}
+
+// ── F085 환불·취소 ────────────────────────────────────────────────────────────
+/** 환불 산정 미리보기/확정 근거. 금액은 서버 계산 권위. base = 실 납입액 기준. */
+export interface RefundQuote {
+  invoiceId: string;
+  invoiceNo: string;
+  status: InvoiceStatus;
+  total: number;
+  baseAmount: number;
+  refundRatePercent: number;
+  refundAmount: number;
+  forfeitAmount: number;
+  daysBeforeEvent: number | null;
+  bracketLabel: string;
+  eventStartDate: string | null;
+  dateResolved: boolean;
+  rulesetVersion: string;
+  pgNote: string;
+}
+
+export interface CancelResult {
+  invoice: InvoiceDetail;
+  refund: RefundQuote;
+}
+
+// ── F083 세금계산서 ──────────────────────────────────────────────────────────
+export interface TaxInvoice {
+  id: string;
+  invoiceId: string;
+  eventId: string;
+  taxInvoiceNo: string;
+  supplierName: string;
+  supplierBizNo: string | null;
+  supplierCeo: string | null;
+  supplierAddr: string | null;
+  buyerName: string;
+  supplyAmount: number;
+  vat: number;
+  total: number;
+  itemSummary: string | null;
+  status: string; // issued | void
+  issuedAt: string;
+  issueNote: string;
+}
+
+// ── 정산 리포트 ──────────────────────────────────────────────────────────────
+export interface ReportGroup {
+  key: string;
+  invoiceCount: number;
+  billed: number;
+  collected: number;
+  outstanding: number;
+  collectionRate: number;
+}
+
+export interface ReportRow {
+  invoiceNo: string;
+  exhibitorName: string;
+  category: string;
+  status: string;
+  subtotal: number;
+  vat: number;
+  total: number;
+  paidAmount: number;
+  outstanding: number;
+  dueDate: string | null;
+}
+
+export interface SettlementReport {
+  eventId: string;
+  eventName: string | null;
+  generatedAt: string;
+  totalBilled: number;
+  totalCollected: number;
+  totalOutstanding: number;
+  collectionRate: number;
+  invoiceCount: number;
+  byCategory: ReportGroup[];
+  byStatus: ReportGroup[];
+  rows: ReportRow[];
+}
+
+export const settlementApi = {
+  dashboard: (eventId: string) =>
+    api.get<SettlementDashboard>(`/api/settlement/dashboard?eventId=${encodeURIComponent(eventId)}`),
+
+  invoices: (eventId: string, status: string | null, page: number, size: number) => {
+    const params = new URLSearchParams({ eventId, page: String(page), size: String(size) });
+    if (status) params.set('status', status);
+    return api.get<PageResponse<InvoiceSummary>>(`/api/settlement/invoices?${params.toString()}`);
+  },
+
+  detail: (id: string) => api.get<InvoiceDetail>(`/api/settlement/invoices/${encodeURIComponent(id)}`),
+
+  generate: (eventId: string) =>
+    api.post<GenerateResult>(`/api/settlement/invoices/generate?eventId=${encodeURIComponent(eventId)}`),
+
+  issue: (id: string) =>
+    api.post<InvoiceDetail>(`/api/settlement/invoices/${encodeURIComponent(id)}/issue`),
+
+  recordPayment: (id: string, input: RecordPaymentInput) =>
+    api.post<InvoiceDetail>(`/api/settlement/invoices/${encodeURIComponent(id)}/payments`, input),
+
+  // F085 환불·취소
+  refundQuote: (id: string, cancelDate?: string) => {
+    const q = cancelDate ? `?cancelDate=${encodeURIComponent(cancelDate)}` : '';
+    return api.get<RefundQuote>(`/api/settlement/invoices/${encodeURIComponent(id)}/refund-quote${q}`);
+  },
+  cancel: (id: string, body: { reason?: string; cancelDate?: string }) =>
+    api.post<CancelResult>(`/api/settlement/invoices/${encodeURIComponent(id)}/cancel`, body),
+
+  // F083 세금계산서 (없으면 data=null)
+  getTaxInvoice: (id: string) =>
+    api.get<TaxInvoice | null>(`/api/settlement/invoices/${encodeURIComponent(id)}/tax-invoice`),
+  issueTaxInvoice: (id: string) =>
+    api.post<TaxInvoice>(`/api/settlement/invoices/${encodeURIComponent(id)}/tax-invoice`),
+
+  // 정산 리포트
+  report: (eventId: string) =>
+    api.get<SettlementReport>(`/api/settlement/report?eventId=${encodeURIComponent(eventId)}`),
+};
diff --git a/src/frontend/src/screens/shared.css b/src/frontend/src/screens/shared.css
new file mode 100644
index 0000000..7cb758f
--- /dev/null
+++ b/src/frontend/src/screens/shared.css
@@ -0,0 +1,245 @@
+/*
+ * v2.0 확장 화면(SCR-13~17) 공통 프리미티브.
+ * design.md §1 토큰만 참조. 각 화면 CSS가 @import 로 선반영한다.
+ */
+
+/* 스크롤 가능한 페이지 루트 — kx-shell__content(overflow:hidden, flex) 내부에서 자체 스크롤. */
+.kx-page {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+/* 카드 */
+.kx-card {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+}
+.kx-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+.kx-card__head h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-card__hint {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin: -4px 0 var(--space-3);
+}
+
+/* 세그먼트 토글 */
+.kx-seg {
+  display: inline-flex;
+  padding: 3px;
+  background: var(--color-neutral-100);
+  border-radius: var(--radius-sm);
+  gap: 2px;
+}
+.kx-seg__btn {
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  border-radius: 3px;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+}
+.kx-seg__btn.is-active {
+  background: var(--color-white);
+  color: var(--color-primary-700);
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
+}
+
+/* 셀렉트 */
+.kx-select {
+  height: 36px;
+  padding: 0 var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+
+/* KPI 카드(공통) */
+.kx-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+}
+.kx-kpi__label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-kpi__ai {
+  color: var(--color-ai-accent);
+  font-weight: 700;
+  font-size: 11px;
+}
+.kx-kpi__value {
+  font-size: var(--fs-display);
+  line-height: var(--lh-display);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-kpi__sub {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-kpi--warn {
+  border-color: var(--color-violation-warn);
+}
+.kx-kpi--error .kx-kpi__value {
+  color: var(--color-error);
+}
+
+/* 델타 칩 */
+.kx-delta {
+  align-self: flex-start;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-delta--up {
+  color: var(--color-success);
+  background: var(--color-success-bg);
+}
+.kx-delta--down {
+  color: var(--color-error);
+  background: var(--color-error-bg);
+}
+
+/* degraded 배지 */
+.kx-bi__degraded {
+  font-size: 11px;
+  color: var(--color-warning);
+  background: var(--color-warning-bg);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * 데이터 그리드 표준 — Nifty "Advanced table headers" 계보
+ * (GUARDiA ITSM Nifty 다크 테마 계보와 정합)
+ * 헤더: 12px / 600 / 중간색(neutral-500) / 좌정렬 / 서브톤 배경 / 2px 하단 구분선
+ * 본문: 14px / neutral-700 / 1px 행 구분선(neutral-200) / 미들 정렬
+ * 숫자열(.kx-num): 우정렬 tabular-nums
+ * 전 화면 테이블(.kx-list-table·.kx-aq__table·.kx-adm-*·.kx-i18n-table·
+ * .kxp-ticktable·.kx-boq__table 등)은 이 정의로 폰트·정렬·헤더 스타일을 수렴한다.
+ * ══════════════════════════════════════════════════════════ */
+.kx-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 10px 12px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  text-align: left;
+  letter-spacing: 0.02em;
+  background: var(--color-neutral-050);
+  border-bottom: 2px solid var(--color-neutral-200);
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+.kx-table tbody td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-neutral-200);
+  color: var(--color-neutral-700);
+  vertical-align: middle;
+}
+.kx-table tbody tr:hover {
+  background: var(--row-hover);
+}
+.kx-table-scroll {
+  overflow-x: auto;
+}
+.kx-table--zebra tbody tr:nth-child(even) {
+  background: var(--zebra);
+}
+/* 숫자열: 우정렬 + 등폭 숫자(정렬 통일) */
+.kx-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 가로 막대 리스트 */
+.kx-barlist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-barlist__top {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+  margin-bottom: 6px;
+}
+.kx-barlist__track {
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-100);
+  overflow: hidden;
+}
+.kx-barlist__fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-600);
+}
+
+/* 성과 배지 */
+.kx-grade {
+  display: inline-block;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+}
+.kx-grade--excellent {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+.kx-grade--good {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kx-grade--fair {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+.kx-grade--review {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+}
diff --git a/src/frontend/src/screens/styleguide/ComponentGuidePage.tsx b/src/frontend/src/screens/styleguide/ComponentGuidePage.tsx
new file mode 100644
index 0000000..3ca5248
--- /dev/null
+++ b/src/frontend/src/screens/styleguide/ComponentGuidePage.tsx
@@ -0,0 +1,198 @@
+import { AiImage } from '../../components/ui/AiImage';
+import { AiLabel, DdayChip, RoleBadge, StatusBadge, type FlowStatus } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import './styleguide.css';
+
+/*
+ * SCR-17 컴포넌트 가이드 (§1 실증 스타일가이드 / 스토리북 성격).
+ * 내부 전용(/_styleguide) — 제품 내비 비노출. 색·치수 권위는 design.md §1(tokens.css).
+ * 실 데이터·API 없음(정적 참조). 기존 공통 컴포넌트를 실물 렌더한다.
+ */
+const STATUS_FLOW: FlowStatus[] = [
+  'draft', 'submitted', 'ai-review', 'approved', 'rejected', 'building', 'inspected',
+];
+
+const SWATCHES = [
+  { name: 'KINTEX Blue', varName: '--color-primary-600', hex: '#0066B3' },
+  { name: 'Primary 700', varName: '--color-primary-700', hex: '#004C86' },
+  { name: 'AI Accent', varName: '--color-ai-accent', hex: '#6D4AFF' },
+  { name: 'Success', varName: '--color-success', hex: '#0E8A5F' },
+  { name: 'Error', varName: '--color-error', hex: '#D92D20' },
+  { name: 'Warning', varName: '--color-warning', hex: '#B45309' },
+  { name: 'Neutral 900', varName: '--color-neutral-900', hex: '#101828' },
+  { name: 'Neutral 200', varName: '--color-neutral-200', hex: '#E4E7EC' },
+];
+
+const MOCK = `${import.meta.env.BASE_URL}mock/organizer_dashboard/img1.jpg`;
+
+export function ComponentGuidePage() {
+  return (
+    <div className="kx-sg">
+      <header className="kx-sg__head">
+        <div>
+          <p className="kx-sg__eyebrow">System Reference</p>
+          <h1 className="kx-sg__title">컴포넌트 가이드</h1>
+          <p className="kx-sg__desc">
+            KINTEX AI 디자인 시스템 — 고신뢰·정밀 정보 처리 B2B 전시 환경. 색·치수 권위는 design.md §1.
+          </p>
+        </div>
+        <span className="kx-sg__ver">design.md v1.3 · 내부 전용</span>
+      </header>
+
+      <div className="kx-sg__grid">
+        {/* 1. 타이포 & 컬러 */}
+        <section className="kx-sg-card" data-accent="primary">
+          <h2 className="kx-sg-card__title">타이포그래피 & 컬러</h2>
+          <div className="kx-sg__type">
+            <p className="kx-sg__t-display">전시공간 최적화 엔진</p>
+            <p className="kx-sg__t-headline">도면 분석 보고서</p>
+            <p className="kx-sg__t-title">부스 배치 시뮬레이션</p>
+            <p className="kx-sg__t-body">
+              본문 텍스트 — 참가업체 설계 스펙과 규정 검증 결과를 정밀하게 표시합니다. Pretendard 14px.
+            </p>
+          </div>
+          <div className="kx-sg__swatches">
+            {SWATCHES.map((s) => (
+              <div key={s.name} className="kx-sg__swatch">
+                <span className="kx-sg__swatch-chip" style={{ background: `var(${s.varName})` }} />
+                <span className="kx-sg__swatch-name">{s.name}</span>
+                <span className="kx-sg__swatch-hex tnum">{s.hex}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* 2. AI 전용 요소 */}
+        <section className="kx-sg-card" data-accent="ai">
+          <h2 className="kx-sg-card__title">AI 전용 요소</h2>
+          <div className="kx-sg__ai-row">
+            <AiLabel />
+            <AiLabel>AI 수요예측</AiLabel>
+            <AiLabel>AI 검토</AiLabel>
+          </div>
+          <div className="kx-sg__aiimg">
+            <AiImage
+              imageUrl={MOCK}
+              status="DONE"
+              sample
+              watermarkText="AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있습니다"
+              notice="AI 생성 이미지는 계약·심사 서류에 사용할 수 없습니다 — 시공 기준은 도면입니다"
+              shotLabel="S1 정면"
+              versionTag="설계 v2"
+              alt="AI 초안 컴포넌트 예시"
+            />
+          </div>
+          <div className="kx-sg__violations">
+            <span className="kx-sg__viol">📍 피난 통로 차단</span>
+            <span className="kx-sg__viol">📍 바닥하중 초과</span>
+          </div>
+        </section>
+
+        {/* 3. 버튼 & 액션 */}
+        <section className="kx-sg-card" data-accent="primary">
+          <h2 className="kx-sg-card__title">버튼 & 액션</h2>
+          <div className="kx-sg__btn-row">
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="ai" leadingIcon="✦">AI 제안 레이아웃</Button>
+            <Button variant="danger">삭제</Button>
+            <Button variant="primary" disabled>Disabled</Button>
+          </div>
+          <div className="kx-sg__btn-row">
+            <button className="kx-sg__icon-btn" aria-label="편집">✎</button>
+            <button className="kx-sg__icon-btn" aria-label="삭제">🗑</button>
+            <button className="kx-sg__icon-btn" aria-label="공유">↗</button>
+          </div>
+        </section>
+
+        {/* 4. 상태 배지 & 칩 */}
+        <section className="kx-sg-card" data-accent="success">
+          <h2 className="kx-sg-card__title">상태 배지 & 칩</h2>
+          <div className="kx-sg__chip-row">
+            {STATUS_FLOW.map((s) => (
+              <StatusBadge key={s} status={s} />
+            ))}
+          </div>
+          <div className="kx-sg__chip-row">
+            <DdayChip dday={30} />
+            <DdayChip dday={3} />
+            <DdayChip dday={-1} />
+            <RoleBadge role="ORGANIZER" />
+            <RoleBadge role="HALL_MANAGER" />
+            <span className="kx-badge kx-badge--role">Hall 1A</span>
+            <span className="kx-badge kx-badge--dday-warn">High Traffic</span>
+          </div>
+        </section>
+
+        {/* 5. 데이터 시각화 (범례·게이지 — 실제는 Recharts로 대체) */}
+        <section className="kx-sg-card" data-accent="primary">
+          <h2 className="kx-sg-card__title">데이터 시각화</h2>
+          <p className="kx-sg-card__note">차트 구현은 Recharts 사용 (SCR-13·14·16). 여기서는 토큰·범례만 실증.</p>
+          <div className="kx-sg__gauge">
+            <div className="kx-barlist__top">
+              <span>전시장 점유율</span>
+              <span className="tnum">78% / 임계치 85%</span>
+            </div>
+            <div className="kx-barlist__track">
+              <span className="kx-barlist__fill is-warning" style={{ width: '78%' }} />
+            </div>
+          </div>
+          <ul className="kx-sg__legend">
+            <li><span className="kx-dot is-busy" /> 매우 혼잡</li>
+            <li><span className="kx-dot is-moderate" /> 다소 혼잡</li>
+            <li><span className="kx-dot is-smooth" /> 원활</li>
+          </ul>
+        </section>
+
+        {/* 6. 폼 요소 */}
+        <section className="kx-sg-card" data-accent="primary">
+          <h2 className="kx-sg-card__title">폼 요소</h2>
+          <div className="kx-sg__form">
+            <label className="kx-sg__field">
+              <span>기본 Input</span>
+              <input className="kx-sg__input" placeholder="부스번호 입력" />
+            </label>
+            <label className="kx-sg__field">
+              <span>에러 Input</span>
+              <input className="kx-sg__input is-error" defaultValue="A-999" aria-invalid />
+              <em className="kx-sg__err-msg">존재하지 않는 부스입니다.</em>
+            </label>
+            <label className="kx-sg__field">
+              <span>Dropdown</span>
+              <select className="kx-select">
+                <option>기본 부스</option>
+                <option>프리미엄</option>
+              </select>
+            </label>
+            <div className="kx-sg__check-row">
+              <label className="kx-sg__check"><input type="checkbox" defaultChecked /> 방염 확인</label>
+              <label className="kx-sg__check"><input type="radio" name="sg-r" defaultChecked /> 주간</label>
+              <label className="kx-sg__check"><input type="radio" name="sg-r" /> 야간</label>
+            </div>
+          </div>
+        </section>
+
+        {/* 7. 피드백 & 오버레이 */}
+        <section className="kx-sg-card" data-accent="ai">
+          <h2 className="kx-sg-card__title">피드백 & 오버레이</h2>
+          <div className="kx-sg__toast">데이터가 저장되었습니다</div>
+          <div className="kx-sg__alert" role="alert">⚠ 소방법 위반 구역 3곳</div>
+          <div className="kx-sg__states">
+            <div className="kx-sg__state-box">
+              <Skeleton height={12} width="80%" />
+              <Skeleton height={12} width="60%" />
+            </div>
+            <div className="kx-sg__state-box">
+              <EmptyState title="데이터 없음" description="빈 상태 예시" />
+            </div>
+            <div className="kx-sg__state-box">
+              <ErrorState message="불러오기 실패" onRetry={() => {}} />
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/styleguide/styleguide.css b/src/frontend/src/screens/styleguide/styleguide.css
new file mode 100644
index 0000000..d70db58
--- /dev/null
+++ b/src/frontend/src/screens/styleguide/styleguide.css
@@ -0,0 +1,285 @@
+@import '../shared.css';
+
+.kx-sg {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  background: var(--color-neutral-050);
+}
+
+.kx-sg__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-sg__eyebrow {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-primary-600);
+}
+.kx-sg__title {
+  font-size: var(--fs-display);
+  line-height: var(--lh-display);
+  color: var(--color-neutral-900);
+}
+.kx-sg__desc {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin-top: 4px;
+  max-width: 640px;
+}
+.kx-sg__ver {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-pill);
+  padding: 4px 12px;
+}
+
+.kx-sg__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+
+.kx-sg-card {
+  position: relative;
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  padding-left: var(--space-5);
+  overflow: hidden;
+}
+.kx-sg-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+}
+.kx-sg-card[data-accent='primary']::before { background: var(--color-primary-600); }
+.kx-sg-card[data-accent='ai']::before { background: var(--color-ai-accent); }
+.kx-sg-card[data-accent='success']::before { background: var(--color-success); }
+.kx-sg-card__title {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+  margin-bottom: var(--space-4);
+}
+.kx-sg-card__note {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin: -8px 0 var(--space-4);
+}
+
+/* 타이포 */
+.kx-sg__type {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-bottom: var(--space-4);
+  border-bottom: var(--border-card);
+  margin-bottom: var(--space-4);
+}
+.kx-sg__t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; color: var(--color-neutral-900); }
+.kx-sg__t-headline { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; color: var(--color-neutral-900); }
+.kx-sg__t-title { font-size: var(--fs-h3); font-weight: 600; color: var(--color-neutral-700); }
+.kx-sg__t-body { font-size: var(--fs-body); color: var(--color-neutral-700); }
+
+.kx-sg__swatches {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-3);
+}
+.kx-sg__swatch {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.kx-sg__swatch-chip {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(16, 24, 40, 0.08);
+  flex-shrink: 0;
+}
+.kx-sg__swatch-name {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  flex: 1;
+}
+.kx-sg__swatch-hex {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+
+/* AI 요소 */
+.kx-sg__ai-row,
+.kx-sg__btn-row,
+.kx-sg__chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+  margin-bottom: var(--space-4);
+}
+.kx-sg__aiimg {
+  max-width: 320px;
+  margin-bottom: var(--space-4);
+}
+.kx-sg__violations {
+  display: flex;
+  gap: var(--space-3);
+}
+.kx-sg__viol {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-error);
+  background: #fef3f2;
+  border-radius: var(--radius-sm);
+  padding: 4px 10px;
+}
+
+.kx-sg__icon-btn {
+  width: 36px;
+  height: 36px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kx-sg__icon-btn:hover {
+  background: var(--color-neutral-050);
+}
+
+/* 게이지·범례 */
+.kx-sg__gauge {
+  margin-bottom: var(--space-4);
+}
+.kx-sg__legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: var(--space-4);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-sg__legend li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.kx-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.kx-dot.is-smooth { background: #12b76a; }
+.kx-dot.is-moderate { background: var(--color-violation-warn); }
+.kx-dot.is-busy { background: var(--color-error); }
+.kx-barlist__fill.is-warning { background: var(--color-violation-warn); }
+
+/* 폼 */
+.kx-sg__form {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-4);
+}
+.kx-sg__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-sg__input {
+  height: 36px;
+  padding: 0 var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-sg__input:focus {
+  outline: none;
+  border-color: var(--color-primary-600);
+  box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.15);
+}
+.kx-sg__input.is-error {
+  border-color: var(--color-error);
+}
+.kx-sg__err-msg {
+  color: var(--color-error);
+  font-style: normal;
+  font-size: 11px;
+}
+.kx-sg__check-row {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: var(--space-4);
+}
+.kx-sg__check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+
+/* 피드백 */
+.kx-sg__toast {
+  display: inline-block;
+  background: var(--color-neutral-900);
+  color: var(--color-white);
+  font-size: var(--fs-body);
+  padding: 10px var(--space-4);
+  border-radius: var(--radius-sm);
+  margin-bottom: var(--space-3);
+}
+.kx-sg__alert {
+  background: #fef3f2;
+  color: var(--color-error);
+  font-size: var(--fs-body);
+  font-weight: 600;
+  padding: 10px var(--space-4);
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(217, 45, 32, 0.3);
+  margin-bottom: var(--space-4);
+}
+.kx-sg__states {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-3);
+}
+.kx-sg__state-box {
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-height: 120px;
+  justify-content: center;
+}
+
+@media (max-width: 1000px) {
+  .kx-sg__grid,
+  .kx-sg__form,
+  .kx-sg__states {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/frontend/src/screens/utility/UtilityOrderSummaryPage.tsx b/src/frontend/src/screens/utility/UtilityOrderSummaryPage.tsx
new file mode 100644
index 0000000..c72c2c3
--- /dev/null
+++ b/src/frontend/src/screens/utility/UtilityOrderSummaryPage.tsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { utilityApi } from '../../api/endpoints';
+import { Button } from '../../components/ui/Button';
+import { DdayChip } from '../../components/ui/Badge';
+import type { UtilityOrderDto, UtilityQuote } from '../../api/types';
+import './utility-order.css';
+
+/*
+ * SCR-08 유틸리티 신청 요약. Stitch utility_order_summary 이식.
+ * - 좌: 위치표시도(PDF, "AI verified" 워터마크) / 우: 신청 내역 표 + 총 결제금액 + 마감 안내
+ * - 하단: 신청자 정보 + 동의 체크 2건 + 신청 제출
+ * ★ utility GET(order)이 501/미존재면 샘플 견적으로 degraded 시연.
+ */
+const MOCK = `${import.meta.env.BASE_URL}mock/utility_order_summary`;
+const DIAGRAM = `${MOCK}/img1.jpg`;
+
+const SAMPLE_QUOTE: UtilityQuote = {
+  totalPowerKw: 5,
+  requestedKw: 5,
+  distributionBox50A: 1,
+  lines: [
+    { label: '전기 (24시간) 5kW', qty: 1, unitPrice: 275000, amount: 275000 },
+    { label: '분전반 설치 (50A)', qty: 1, unitPrice: 100000, amount: 100000 },
+    { label: '전용선 인터넷 (LAN)', qty: 1, unitPrice: 150000, amount: 150000 },
+    { label: '급배수 (오·급수 연결점)', qty: 1, unitPrice: 150000, amount: 150000 },
+  ],
+  total: 675000,
+  currency: 'KRW',
+  rulesetVersion: 'v1.0',
+  disclaimer: 'AI verified — 위치표시도는 참고용이며 시공 기준은 확정 도면입니다.',
+};
+
+const won = (n: number) => `₩${n.toLocaleString('ko-KR')}`;
+
+export function UtilityOrderSummaryPage() {
+  const { eventId = '', boothId = 'A-102' } = useParams();
+  const [order, setOrder] = useState<UtilityOrderDto | null>(null);
+  const [quote, setQuote] = useState<UtilityQuote>(SAMPLE_QUOTE);
+  const [degraded, setDegraded] = useState(false);
+  const [agree1, setAgree1] = useState(false);
+  const [agree2, setAgree2] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    utilityApi
+      .get(eventId, boothId)
+      .then((o) => {
+        if (!alive) return;
+        setOrder(o);
+        setQuote(o.quote);
+      })
+      .catch(() => alive && setDegraded(true));
+    return () => {
+      alive = false;
+    };
+  }, [eventId, boothId]);
+
+  return (
+    <div className="kx-uord">
+      <header className="kx-uord__head">
+        <div className="kx-uord__title">
+          <button className="kx-uord__back" aria-label="뒤로" onClick={() => history.back()}>
+            ←
+          </button>
+          <h1>유틸리티 신청</h1>
+        </div>
+        <ol className="kx-uord__wizard" aria-label="신청 단계">
+          <li className="is-done">배선 설계</li>
+          <li className="is-current">신청 확인</li>
+          <li>제출 완료</li>
+        </ol>
+      </header>
+
+      <div className="kx-uord__body">
+        {/* 위치표시도 */}
+        <section className="kx-uord__diagram" aria-label="유틸리티 위치표시도">
+          <div className="kx-uord__diagram-bar">
+            <div>
+              <h2>유틸리티 시공 위치표시도</h2>
+              <p>각 기기 위치를 도면 위 좌표로 표시합니다.</p>
+            </div>
+            <Button variant="ghost" leadingIcon="⭳">
+              PDF 다운로드
+            </Button>
+          </div>
+          <figure className="kx-uord__diagram-frame">
+            <img src={DIAGRAM} alt="유틸리티 위치표시도 (도면)" loading="lazy" />
+            <span className="kx-uord__verified" aria-hidden="true">✔ AI verified</span>
+          </figure>
+        </section>
+
+        {/* 신청 내역 */}
+        <aside className="kx-uord__panel" aria-label="신청 내역">
+          <div className="kx-uord__panel-head">
+            <h2>신청 내역</h2>
+            <DdayChip dday={6} />
+          </div>
+
+          <ul className="kx-uord__lines">
+            {quote.lines.map((l) => (
+              <li key={l.label}>
+                <span>{l.label}</span>
+                <strong className="tnum">{won(l.amount)}</strong>
+              </li>
+            ))}
+          </ul>
+
+          <div className="kx-uord__total">
+            <span>총 결제 예상 금액 (VAT 포함)</span>
+            <strong className="tnum">{won(quote.total)}</strong>
+          </div>
+
+          <div className="kx-uord__notice">
+            <span className="kx-uord__notice-icon" aria-hidden="true">ⓘ</span>
+            <p>
+              마감 시점 안내 — 모든 유틸리티는 행사 마감일 낮 2시 이후부터 순차적으로 공급 중단·시공이 진행됩니다.
+            </p>
+          </div>
+
+          {degraded && (
+            <p className="kx-uord__degraded">견적 API 대기 중 — 샘플 견적을 표시합니다.</p>
+          )}
+
+          <div className="kx-uord__applicant">
+            <h3>신청자 정보</h3>
+            <p>(주)한빛로보틱스 · 부스 {boothId} (독립부스)</p>
+            <p>김하나 · 010-1234-5678 · dav@techsolutions.com</p>
+          </div>
+
+          <label className="kx-uord__agree">
+            <input type="checkbox" checked={agree1} onChange={(e) => setAgree1(e.target.checked)} />
+            마감(D-6) 이후 배선 위치 수정 및 유틸리티 변경이 불가함을 확인했습니다.
+          </label>
+          <label className="kx-uord__agree">
+            <input type="checkbox" checked={agree2} onChange={(e) => setAgree2(e.target.checked)} />
+            공사비 기준 견적임을 이해하며, 최종 결제는 실측 및 현장 확인 후 이뤄짐에 동의합니다.
+          </label>
+
+          <Button
+            block
+            disabled={!agree1 || !agree2 || submitted}
+            onClick={() => setSubmitted(true)}
+          >
+            {submitted ? '신청 완료됨' : '신청 제출 →'}
+          </Button>
+          {order && <p className="kx-uord__order-id tnum">주문번호 {order.orderId}</p>}
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/utility/UtilityWiringPage.tsx b/src/frontend/src/screens/utility/UtilityWiringPage.tsx
new file mode 100644
index 0000000..bcb8ec3
--- /dev/null
+++ b/src/frontend/src/screens/utility/UtilityWiringPage.tsx
@@ -0,0 +1,366 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { ApiRequestError } from '../../api/client';
+import { utilityApi } from '../../api/endpoints';
+import { Button } from '../../components/ui/Button';
+import type {
+  UtilityDevice,
+  UtilityOrderDto,
+  UtilityQuote,
+  WiringResult,
+  WiringTerminal,
+} from '../../api/types';
+import { WiringCanvas } from './WiringCanvas';
+import './utility.css';
+
+/*
+ * SCR-07 유틸리티 배선 뷰 (M4a 견적 + M4b 배선). Stitch utility_wiring_view 이식.
+ * - 좌: 기기 목록 빌더 → quote(완성 API). 중앙: WiringCanvas(경로). 우: 자동 견적 패널 + 신청 CTA.
+ * - quote는 완성 엔드포인트, wiring/order는 501 → degraded 클라이언트 산출/안내.
+ */
+
+type UtilTab = 'power' | 'network' | 'water';
+
+// 부스 로컬 기준 폴리곤(6×3m). ★부스 geometry 엔드포인트 부재 → 고정(경계면 이슈 기록).
+const BOOTH_POLY: number[][] = [
+  [0, 0],
+  [6, 0],
+  [6, 3],
+  [0, 3],
+  [0, 0],
+];
+
+const DEFAULT_DEVICES: UtilityDevice[] = [
+  { name: '로봇 시연장비', count: 2, powerKw: 1.5 },
+  { name: 'LED 스포트 조명', count: 6, powerKw: 0.3 },
+];
+
+/** degraded 배선: 최근접 트렌치 교차점(3m 그리드)에서 단말까지 L자 경로 산출. */
+function degradedWiring(terminals: WiringTerminal[]): WiringResult {
+  const snap = (v: number) => Math.round(v / 3) * 3;
+  return {
+    assumedTrench: true,
+    paths: terminals.map((t) => {
+      const [tx, ty] = t.position;
+      const sx = snap(tx);
+      const sy = snap(ty);
+      const coords = [
+        [sx, sy],
+        [tx, sy],
+        [tx, ty],
+      ];
+      let lengthM = 0;
+      for (let i = 1; i < coords.length; i += 1) {
+        lengthM += Math.hypot(coords[i][0] - coords[i - 1][0], coords[i][1] - coords[i - 1][1]);
+      }
+      const color = t.kind === 'power' ? 'red' : t.kind === 'network' ? 'blue' : 'green';
+      const label =
+        t.kind === 'power'
+          ? `${t.kw ?? ''}kW`
+          : t.kind === 'network'
+            ? '유선 회선'
+            : '급배수';
+      return { kind: t.kind, color, coords, lengthM: Math.round(lengthM * 100) / 100, label };
+    }),
+  };
+}
+
+export function UtilityWiringPage() {
+  const { eventId = '', boothId = '' } = useParams();
+  const [searchParams] = useSearchParams();
+  const hallId = searchParams.get('hallId') ?? 'H7';
+
+  const [tab, setTab] = useState<UtilTab>('power');
+  const [devices, setDevices] = useState<UtilityDevice[]>(DEFAULT_DEVICES);
+  const [networkLines, setNetworkLines] = useState(1);
+  const [plumbingOutlets, setPlumbingOutlets] = useState(1);
+  const [airOutlets, setAirOutlets] = useState(0);
+
+  const [quote, setQuote] = useState<UtilityQuote | null>(null);
+  const [wiring, setWiring] = useState<WiringResult | null>(null);
+  const [order, setOrder] = useState<UtilityOrderDto | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [selectedTerminal, setSelectedTerminal] = useState<number | null>(null);
+
+  // 필요 전력(로컬 미리보기 — 서버 quote가 권위).
+  const requestedKw = useMemo(() => {
+    const total = devices.reduce((s, d) => s + d.count * d.powerKw, 0);
+    return Math.ceil(total);
+  }, [devices]);
+  const distributionBox = useMemo(() => Math.ceil(requestedKw / 11), [requestedKw]);
+
+  // 단말 좌표(부스 내부 배치 — power 좌하단, network 좌상단, water 우하단).
+  const terminals: WiringTerminal[] = useMemo(() => {
+    const out: WiringTerminal[] = [];
+    if (requestedKw > 0) out.push({ kind: 'power', position: [4.5, 2.2], kw: requestedKw });
+    for (let i = 0; i < networkLines; i += 1)
+      out.push({ kind: 'network', position: [1.2, 0.8 + i * 0.6] });
+    for (let i = 0; i < plumbingOutlets; i += 1)
+      out.push({ kind: 'plumbing', position: [5.2, 0.8 + i * 0.6] });
+    for (let i = 0; i < airOutlets; i += 1)
+      out.push({ kind: 'air', position: [3.0, 0.6 + i * 0.6] });
+    return out;
+  }, [requestedKw, networkLines, plumbingOutlets, airOutlets]);
+
+  const buildRequest = useCallback(
+    () => ({
+      devices,
+      networkWiredLines: networkLines,
+      plumbingOutlets,
+      compressedAirOutlets: airOutlets,
+    }),
+    [devices, networkLines, plumbingOutlets, airOutlets],
+  );
+
+  const recalc = useCallback(async () => {
+    setBusy(true);
+    setNotice(null);
+    // quote (완성 API)
+    try {
+      const q = await utilityApi.quote(eventId, boothId, buildRequest());
+      setQuote(q);
+    } catch (err) {
+      if (err instanceof ApiRequestError && err.code === 'NOT_IMPLEMENTED') {
+        setNotice('견적 엔진이 준비 중입니다(로컬 추정 표시).');
+      } else {
+        setNotice(err instanceof ApiRequestError ? err.message : '견적 계산 중 오류가 발생했습니다.');
+      }
+    }
+    // wiring (501 → degraded 클라이언트 산출)
+    try {
+      const w = await utilityApi.wiring(eventId, boothId, hallId, { terminals });
+      setWiring(w);
+    } catch (err) {
+      if (err instanceof ApiRequestError && err.code === 'NOT_IMPLEMENTED') {
+        setWiring(degradedWiring(terminals));
+      }
+    }
+    setBusy(false);
+  }, [eventId, boothId, hallId, buildRequest, terminals]);
+
+  const submitOrder = useCallback(async () => {
+    setBusy(true);
+    setNotice(null);
+    try {
+      const o = await utilityApi.order(eventId, boothId, buildRequest());
+      setOrder(o);
+    } catch (err) {
+      if (err instanceof ApiRequestError && err.code === 'NOT_IMPLEMENTED') {
+        setNotice('신청 제출 경로가 준비 중입니다(백엔드 위치표시도 생성 대기).');
+      } else {
+        setNotice(err instanceof ApiRequestError ? err.message : '신청 제출 중 오류가 발생했습니다.');
+      }
+    }
+    setBusy(false);
+  }, [eventId, boothId, buildRequest]);
+
+  // 렌더용 배선(계산 전이면 degraded 미리보기).
+  const wiringView = wiring ?? degradedWiring(terminals);
+  const activeQuote = order?.quote ?? quote;
+
+  return (
+    <div className="kx-util">
+      <header className="kx-util__head">
+        <div>
+          <h2 className="kx-util__title">부스 {boothId || 'A-102'} · 홀 {hallId}</h2>
+          <div className="kx-util__deadline" role="note">
+            유틸리티 신청 마감 D-6 · 인터넷은 현장 추가신청 불가
+          </div>
+        </div>
+        <div className="kx-util__tabs" role="tablist" aria-label="유틸리티 종류">
+          <TabBtn active={tab === 'power'} onClick={() => setTab('power')} label="전기" />
+          <TabBtn active={tab === 'network'} onClick={() => setTab('network')} label="네트워크·전화" />
+          <TabBtn active={tab === 'water'} onClick={() => setTab('water')} label="급배수·압축공기" />
+        </div>
+      </header>
+
+      <div className="kx-util__body">
+        {/* 좌: 입력 빌더 */}
+        <aside className="kx-util__left" aria-label="유틸리티 입력">
+          {tab === 'power' && (
+            <section className="kx-util__section">
+              <h3>사용 기기 입력</h3>
+              <div className="kx-devtable">
+                <div className="kx-devtable__head">
+                  <span>기기명</span>
+                  <span>수량</span>
+                  <span>kW</span>
+                  <span aria-hidden="true" />
+                </div>
+                {devices.map((d, i) => (
+                  <div className="kx-devtable__row" key={i}>
+                    <input
+                      aria-label={`기기 ${i + 1} 이름`}
+                      value={d.name}
+                      onChange={(e) =>
+                        setDevices((ds) => ds.map((x, j) => (j === i ? { ...x, name: e.target.value } : x)))
+                      }
+                    />
+                    <input
+                      type="number"
+                      className="tnum"
+                      aria-label={`기기 ${i + 1} 수량`}
+                      value={d.count}
+                      min={0}
+                      onChange={(e) =>
+                        setDevices((ds) =>
+                          ds.map((x, j) => (j === i ? { ...x, count: Number(e.target.value) } : x)),
+                        )
+                      }
+                    />
+                    <input
+                      type="number"
+                      className="tnum"
+                      step={0.1}
+                      aria-label={`기기 ${i + 1} 소비전력`}
+                      value={d.powerKw}
+                      min={0}
+                      onChange={(e) =>
+                        setDevices((ds) =>
+                          ds.map((x, j) => (j === i ? { ...x, powerKw: Number(e.target.value) } : x)),
+                        )
+                      }
+                    />
+                    <button
+                      className="kx-devtable__del"
+                      aria-label={`기기 ${i + 1} 삭제`}
+                      onClick={() => setDevices((ds) => ds.filter((_, j) => j !== i))}
+                    >
+                      ✕
+                    </button>
+                  </div>
+                ))}
+              </div>
+              <button
+                className="kx-util__addrow"
+                onClick={() => setDevices((ds) => [...ds, { name: '신규 기기', count: 1, powerKw: 0.5 }])}
+              >
+                + 기기 추가
+              </button>
+
+              <div className="kx-util__compute tnum">
+                <div>
+                  필요 용량 <strong>{requestedKw}kW</strong>
+                  <span className="kx-util__arrow">→</span> 신청 {requestedKw}kW
+                </div>
+                <div>분전반 50A × {distributionBox}식 자동 산출</div>
+              </div>
+            </section>
+          )}
+
+          {tab === 'network' && (
+            <section className="kx-util__section">
+              <h3>네트워크·전화</h3>
+              <NumRow label="유선 인터넷 회선" value={networkLines} onChange={setNetworkLines} />
+              <p className="kx-util__hint">단말 위치는 도면에서 드래그로 미세 조정할 수 있습니다.</p>
+            </section>
+          )}
+
+          {tab === 'water' && (
+            <section className="kx-util__section">
+              <h3>급배수·압축공기</h3>
+              <NumRow label="급배수 구" value={plumbingOutlets} onChange={setPlumbingOutlets} />
+              <NumRow label="압축공기 구" value={airOutlets} onChange={setAirOutlets} />
+            </section>
+          )}
+
+          <Button variant="secondary" block onClick={recalc} disabled={busy}>
+            {busy ? '계산 중…' : '견적·배선 계산'}
+          </Button>
+        </aside>
+
+        {/* 중앙: 배선 캔버스 */}
+        <section className="kx-util__canvas">
+          <WiringCanvas
+            boothPolygon={BOOTH_POLY}
+            paths={wiringView.paths}
+            terminals={terminals}
+            assumedTrench={wiringView.assumedTrench}
+            selectedTerminalIdx={selectedTerminal}
+            onSelectTerminal={setSelectedTerminal}
+          />
+        </section>
+
+        {/* 우: 자동 견적 패널 */}
+        <aside className="kx-util__right" aria-label="자동 견적">
+          <h3 className="kx-quote__title">자동 견적</h3>
+          {activeQuote ? (
+            <>
+              <ul className="kx-quote__lines tnum">
+                {activeQuote.lines.map((l, i) => (
+                  <li key={i}>
+                    <span className="kx-quote__label">
+                      {l.label}
+                      {l.qty > 1 && <em> ×{l.qty}</em>}
+                    </span>
+                    <span className="kx-quote__amount">₩{l.amount.toLocaleString()}</span>
+                  </li>
+                ))}
+              </ul>
+              <div className="kx-quote__total tnum">
+                <span>합계</span>
+                <strong>₩{activeQuote.total.toLocaleString()}</strong>
+              </div>
+              <p className="kx-quote__disclaimer">{activeQuote.disclaimer}</p>
+              <p className="kx-quote__ruleset">요율 {activeQuote.rulesetVersion}</p>
+            </>
+          ) : (
+            <p className="kx-quote__empty">
+              기기·회선을 입력하고 <strong>견적·배선 계산</strong>을 누르면 자동 견적이 표시됩니다.
+            </p>
+          )}
+
+          {order ? (
+            <div className="kx-quote__submitted" role="status">
+              <p className="kx-quote__submitted-title">신청 제출됨</p>
+              <p>{order.supplyTiming}</p>
+              <p className="kx-quote__relay">{order.relayNotice}</p>
+              <a className="kx-quote__diagram" href={order.locationDiagramUrl}>
+                위치표시도 보기
+              </a>
+            </div>
+          ) : (
+            <Button block onClick={submitOrder} disabled={busy || !activeQuote}>
+              위치표시도 생성 및 신청
+            </Button>
+          )}
+
+          {notice && (
+            <p className="kx-util__banner" role="status">
+              {notice}
+            </p>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function TabBtn({ active, onClick, label }: { active: boolean; onClick: () => void; label: string }) {
+  return (
+    <button
+      role="tab"
+      aria-selected={active}
+      className={`kx-util__tab ${active ? 'is-active' : ''}`}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+}
+
+function NumRow({ label, value, onChange }: { label: string; value: number; onChange: (v: number) => void }) {
+  return (
+    <label className="kx-util__numrow">
+      <span>{label}</span>
+      <input
+        type="number"
+        className="tnum"
+        min={0}
+        value={value}
+        onChange={(e) => onChange(Math.max(0, Number(e.target.value)))}
+      />
+    </label>
+  );
+}
diff --git a/src/frontend/src/screens/utility/WiringCanvas.tsx b/src/frontend/src/screens/utility/WiringCanvas.tsx
new file mode 100644
index 0000000..5957893
--- /dev/null
+++ b/src/frontend/src/screens/utility/WiringCanvas.tsx
@@ -0,0 +1,172 @@
+import { useMemo } from 'react';
+import type { WiringPath, WiringTerminal } from '../../api/types';
+import './wiring.css';
+
+/*
+ * 배선 오버레이 렌더러 (SCR-07 히어로).
+ * - 다크 서피스(#1C2536) 위 부스 폴리곤 + 트렌치 그리드 + 배선 경로.
+ * - 색상 규약(design.md §1·S6·계약 §5): 전기 power=적 / 네트워크 network=청 / 급배수·압축공기 plumbing·air=녹.
+ * - 좌표계: 홀 로컬 미터(계약 WiringResult.coords / terminal.position) → SVG 유저 유닛(1m=1unit).
+ *   부스·트렌치·경로가 같은 좌표 공간을 공유(좌표 정합).
+ */
+
+interface WiringCanvasProps {
+  /** 부스 폴리곤(홀 로컬 미터). 뷰포트 중심 대상. */
+  boothPolygon: number[][];
+  /** 배선 경로(계약 WiringResult.paths). */
+  paths: WiringPath[];
+  /** 단말(드래그 조정 대상). */
+  terminals: WiringTerminal[];
+  assumedTrench: boolean;
+  selectedTerminalIdx: number | null;
+  onSelectTerminal: (idx: number | null) => void;
+}
+
+const COLOR_CLASS: Record<string, string> = {
+  power: 'is-power',
+  red: 'is-power',
+  network: 'is-network',
+  blue: 'is-network',
+  plumbing: 'is-water',
+  air: 'is-water',
+  green: 'is-water',
+};
+
+const TRENCH_SPACING_M = 3;
+const PAD = 4; // viewBox 여백(m)
+
+function bbox(poly: number[][]): { minX: number; minY: number; maxX: number; maxY: number } {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [x, y] of poly) {
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+  }
+  return { minX, minY, maxX, maxY };
+}
+
+function kindClass(p: WiringPath): string {
+  return COLOR_CLASS[p.color] ?? COLOR_CLASS[p.kind] ?? 'is-power';
+}
+
+export function WiringCanvas({
+  boothPolygon,
+  paths,
+  terminals,
+  assumedTrench,
+  selectedTerminalIdx,
+  onSelectTerminal,
+}: WiringCanvasProps) {
+  // 부스 주변 여유를 둔 뷰박스(부스 + 인접 트렌치가 보이게).
+  const view = useMemo(() => {
+    const b = bbox(boothPolygon);
+    const marginX = Math.max(6, (b.maxX - b.minX) * 0.4);
+    const marginY = Math.max(6, (b.maxY - b.minY) * 0.4);
+    const minX = b.minX - marginX;
+    const minY = b.minY - marginY;
+    const w = b.maxX - b.minX + marginX * 2;
+    const h = b.maxY - b.minY + marginY * 2;
+    return { minX, minY, w, h };
+  }, [boothPolygon]);
+
+  // 뷰박스 범위의 트렌치 그리드(가정 그리드 — 실측 대기).
+  const trench = useMemo(() => {
+    const lines: { x1: number; y1: number; x2: number; y2: number }[] = [];
+    const startX = Math.ceil((view.minX - PAD) / TRENCH_SPACING_M) * TRENCH_SPACING_M;
+    const startY = Math.ceil((view.minY - PAD) / TRENCH_SPACING_M) * TRENCH_SPACING_M;
+    for (let x = startX; x < view.minX + view.w + PAD; x += TRENCH_SPACING_M) {
+      lines.push({ x1: x, y1: view.minY - PAD, x2: x, y2: view.minY + view.h + PAD });
+    }
+    for (let y = startY; y < view.minY + view.h + PAD; y += TRENCH_SPACING_M) {
+      lines.push({ x1: view.minX - PAD, y1: y, x2: view.minX + view.w + PAD, y2: y });
+    }
+    return lines;
+  }, [view]);
+
+  const boothPts = boothPolygon.map(([x, y]) => `${x},${y}`).join(' ');
+
+  return (
+    <div className="kx-wire">
+      {assumedTrench && (
+        <span className="kx-wire__assumed" title="실측 트렌치 좌표 반영 전 — 가정 그리드">
+          가정 트렌치 좌표 (실측 대기)
+        </span>
+      )}
+      <div className="kx-wire__legend" aria-hidden="true">
+        <span className="kx-wire__legend-item is-power">전기</span>
+        <span className="kx-wire__legend-item is-network">네트워크</span>
+        <span className="kx-wire__legend-item is-water">급배수</span>
+      </div>
+
+      <svg
+        className="kx-wire__svg"
+        viewBox={`${view.minX} ${view.minY} ${view.w} ${view.h}`}
+        role="img"
+        aria-label={`부스 배선 도면, 경로 ${paths.length}개`}
+        onClick={() => onSelectTerminal(null)}
+      >
+        {/* 트렌치 그리드 */}
+        <g className="kx-wire__trench">
+          {trench.map((l, i) => (
+            <line key={i} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} />
+          ))}
+        </g>
+
+        {/* 부스 외곽 */}
+        <polygon className="kx-wire__booth" points={boothPts} />
+
+        {/* 배선 경로 (색상 규약) */}
+        <g className="kx-wire__paths">
+          {paths.map((p, i) => {
+            const d = p.coords.map(([x, y], j) => `${j === 0 ? 'M' : 'L'} ${x} ${y}`).join(' ');
+            const mid = p.coords[Math.floor(p.coords.length / 2)] ?? p.coords[0];
+            return (
+              <g key={i} className={`kx-wire__path ${kindClass(p)}`}>
+                <path d={d} className="kx-wire__path-line" />
+                {mid && (
+                  <text x={mid[0]} y={mid[1] - 0.6} className="kx-wire__path-label">
+                    {p.label}
+                  </text>
+                )}
+              </g>
+            );
+          })}
+        </g>
+
+        {/* 단말 노드 */}
+        <g className="kx-wire__terminals">
+          {terminals.map((t, i) => {
+            const [x, y] = t.position;
+            const sel = i === selectedTerminalIdx;
+            const cls = COLOR_CLASS[t.kind] ?? 'is-power';
+            return (
+              <g
+                key={i}
+                className={`kx-wire__terminal ${cls} ${sel ? 'is-selected' : ''}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelectTerminal(i);
+                }}
+                tabIndex={0}
+                role="button"
+                aria-label={`단말 ${i + 1} (${t.kind})`}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onSelectTerminal(i);
+                  }
+                }}
+              >
+                <circle cx={x} cy={y} r={0.9} />
+              </g>
+            );
+          })}
+        </g>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/utility/utility-order.css b/src/frontend/src/screens/utility/utility-order.css
new file mode 100644
index 0000000..127f2b1
--- /dev/null
+++ b/src/frontend/src/screens/utility/utility-order.css
@@ -0,0 +1,234 @@
+.kx-uord {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.kx-uord__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  border-bottom: var(--border-card);
+  background: var(--color-white);
+}
+.kx-uord__title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.kx-uord__title h1 {
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+}
+.kx-uord__back {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-white);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--color-neutral-700);
+}
+.kx-uord__wizard {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  list-style: none;
+  counter-reset: step;
+}
+.kx-uord__wizard li {
+  counter-increment: step;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-uord__wizard li::before {
+  content: counter(step);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  background: var(--color-neutral-200);
+  color: var(--color-neutral-500);
+}
+.kx-uord__wizard li.is-done::before {
+  content: '✓';
+  background: var(--color-primary-600);
+  color: var(--color-white);
+}
+.kx-uord__wizard li.is-current {
+  color: var(--color-primary-700);
+  font-weight: 600;
+}
+.kx-uord__wizard li.is-current::before {
+  background: var(--color-primary-600);
+  color: var(--color-white);
+}
+
+.kx-uord__body {
+  display: grid;
+  grid-template-columns: 1fr 380px;
+  gap: var(--space-5);
+  padding: var(--space-5);
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  align-items: start;
+}
+
+.kx-uord__diagram-bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin-bottom: var(--space-3);
+}
+.kx-uord__diagram-bar h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-uord__diagram-bar p {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-uord__diagram-frame {
+  position: relative;
+  margin: 0;
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-primary-050);
+}
+.kx-uord__diagram-frame img {
+  width: 100%;
+  display: block;
+  object-fit: contain;
+  background: #f6f8fb;
+}
+.kx-uord__verified {
+  position: absolute;
+  bottom: var(--space-3);
+  right: var(--space-3);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-primary-700);
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--color-primary-100);
+  padding: 3px 8px;
+  border-radius: var(--radius-pill);
+}
+
+/* 신청 내역 패널 */
+.kx-uord__panel {
+  background: var(--color-white);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-uord__panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.kx-uord__panel-head h2 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-uord__lines {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+.kx-uord__lines li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--color-neutral-100);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-uord__lines strong {
+  color: var(--color-neutral-900);
+}
+.kx-uord__total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) 0;
+  border-top: 2px solid var(--color-neutral-200);
+}
+.kx-uord__total span {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-uord__total strong {
+  font-size: var(--fs-h2);
+  color: var(--color-primary-700);
+}
+.kx-uord__notice {
+  display: flex;
+  gap: var(--space-2);
+  background: var(--color-primary-050);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  font-size: var(--fs-caption);
+  color: var(--color-primary-700);
+  line-height: 16px;
+}
+.kx-uord__notice-icon {
+  flex-shrink: 0;
+}
+.kx-uord__degraded {
+  font-size: var(--fs-caption);
+  color: var(--color-warning);
+}
+.kx-uord__applicant {
+  border-top: 1px solid var(--color-neutral-100);
+  padding-top: var(--space-3);
+}
+.kx-uord__applicant h3 {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-bottom: var(--space-1);
+}
+.kx-uord__applicant p {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+}
+.kx-uord__agree {
+  display: flex;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  line-height: 16px;
+  align-items: flex-start;
+}
+.kx-uord__agree input {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+.kx-uord__order-id {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  text-align: center;
+}
+
+@media (max-width: 1000px) {
+  .kx-uord__body {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/frontend/src/screens/utility/utility.css b/src/frontend/src/screens/utility/utility.css
new file mode 100644
index 0000000..4272b0a
--- /dev/null
+++ b/src/frontend/src/screens/utility/utility.css
@@ -0,0 +1,263 @@
+.kx-util {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.kx-util__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  border-bottom: var(--border-card);
+  background: var(--color-white);
+  flex-wrap: wrap;
+}
+.kx-util__title {
+  font-size: var(--fs-h2);
+  line-height: var(--lh-h2);
+  color: var(--color-neutral-900);
+}
+.kx-util__deadline {
+  margin-top: var(--space-2);
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-violation-warn-text);
+  background: var(--color-violation-warn-bg);
+}
+.kx-util__tabs {
+  display: flex;
+  gap: var(--space-1);
+  background: var(--color-neutral-100);
+  padding: 3px;
+  border-radius: var(--radius-sm);
+}
+.kx-util__tab {
+  border: none;
+  background: transparent;
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-util__tab.is-active {
+  background: var(--color-white);
+  color: var(--color-primary-700);
+  box-shadow: var(--shadow-level2);
+}
+
+.kx-util__body {
+  display: grid;
+  grid-template-columns: 320px 1fr 340px;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  flex: 1;
+  min-height: 0;
+}
+
+.kx-util__left,
+.kx-util__right {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  overflow-y: auto;
+}
+.kx-util__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+}
+.kx-util__section h3 {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+
+/* 기기 테이블 */
+.kx-devtable {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.kx-devtable__head,
+.kx-devtable__row {
+  display: grid;
+  grid-template-columns: 1fr 52px 56px 24px;
+  gap: var(--space-2);
+  align-items: center;
+}
+.kx-devtable__head {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-devtable__row input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+}
+.kx-devtable__del {
+  border: none;
+  background: transparent;
+  color: var(--color-neutral-500);
+  font-size: 12px;
+}
+.kx-devtable__del:hover {
+  color: var(--color-error);
+}
+.kx-util__addrow {
+  align-self: flex-start;
+  border: 1px dashed var(--color-neutral-200);
+  background: var(--color-neutral-050);
+  color: var(--color-primary-700);
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+}
+
+.kx-util__compute {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+  font-size: var(--fs-body);
+}
+.kx-util__compute strong {
+  font-size: var(--fs-h3);
+}
+.kx-util__arrow {
+  margin: 0 6px;
+  color: var(--color-neutral-500);
+}
+.kx-util__numrow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+.kx-util__numrow input {
+  width: 88px;
+  padding: 6px 8px;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  text-align: right;
+}
+.kx-util__hint {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+/* 중앙 캔버스 */
+.kx-util__canvas {
+  min-height: 420px;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/* 우측 견적 */
+.kx-util__right {
+  padding: var(--space-4);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+}
+.kx-quote__title {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-quote__lines {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+.kx-quote__lines li {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--color-neutral-100);
+  font-size: var(--fs-body);
+}
+.kx-quote__label em {
+  color: var(--color-neutral-500);
+  font-style: normal;
+}
+.kx-quote__amount {
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-quote__total {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: var(--space-3) 0;
+  border-top: 2px solid var(--color-neutral-200);
+  margin-top: var(--space-2);
+}
+.kx-quote__total strong {
+  font-size: var(--fs-h1);
+  color: var(--color-primary-700);
+}
+.kx-quote__disclaimer {
+  font-size: 11px;
+  line-height: 15px;
+  color: var(--color-neutral-500);
+}
+.kx-quote__ruleset {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-quote__empty {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kx-quote__submitted {
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  background: #e6f4ee;
+  color: var(--color-success);
+  font-size: var(--fs-caption);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.kx-quote__submitted-title {
+  font-weight: 700;
+  font-size: var(--fs-body);
+}
+.kx-quote__relay {
+  color: var(--color-neutral-700);
+}
+.kx-quote__diagram {
+  font-weight: 600;
+}
+.kx-util__banner {
+  font-size: var(--fs-caption);
+  color: var(--color-warning);
+  background: #fff4e5;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+}
+
+@media (max-width: 1200px) {
+  .kx-util__body {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/frontend/src/screens/utility/wiring.css b/src/frontend/src/screens/utility/wiring.css
new file mode 100644
index 0000000..e439d91
--- /dev/null
+++ b/src/frontend/src/screens/utility/wiring.css
@@ -0,0 +1,138 @@
+.kx-wire {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+  background: var(--color-canvas-bg);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.kx-wire__svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* 가정 트렌치 배지 */
+.kx-wire__assumed {
+  position: absolute;
+  top: var(--space-3);
+  left: var(--space-3);
+  z-index: 2;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: #fde68a;
+  background: rgba(180, 83, 9, 0.28);
+  border: 1px solid rgba(253, 224, 71, 0.4);
+}
+
+/* 범례 */
+.kx-wire__legend {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: rgba(16, 24, 40, 0.55);
+}
+.kx-wire__legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-white);
+}
+.kx-wire__legend-item::before {
+  content: '';
+  width: 14px;
+  height: 3px;
+  border-radius: 2px;
+}
+.kx-wire__legend-item.is-power::before {
+  background: var(--color-wire-power);
+}
+.kx-wire__legend-item.is-network::before {
+  background: var(--color-wire-network);
+}
+.kx-wire__legend-item.is-water::before {
+  background: var(--color-wire-water);
+}
+
+/* 트렌치 그리드 */
+.kx-wire__trench line {
+  stroke: var(--color-canvas-line);
+  stroke-width: 0.08;
+  stroke-dasharray: 0.6 0.5;
+  vector-effect: non-scaling-stroke;
+}
+
+/* 부스 외곽 */
+.kx-wire__booth {
+  fill: rgba(0, 102, 179, 0.16);
+  stroke: var(--color-primary-600);
+  stroke-width: 0.2;
+  vector-effect: non-scaling-stroke;
+}
+
+/* 배선 경로 */
+.kx-wire__path-line {
+  fill: none;
+  stroke-width: 2.4;
+  vector-effect: non-scaling-stroke;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.kx-wire__path.is-power .kx-wire__path-line {
+  stroke: var(--color-wire-power);
+}
+.kx-wire__path.is-network .kx-wire__path-line {
+  stroke: var(--color-wire-network);
+  stroke-dasharray: 6 4;
+}
+.kx-wire__path.is-water .kx-wire__path-line {
+  stroke: var(--color-wire-water);
+  stroke-dasharray: 1 4;
+}
+.kx-wire__path-label {
+  fill: var(--color-white);
+  font-size: 1.4px;
+  font-weight: 600;
+  text-anchor: middle;
+  paint-order: stroke;
+  stroke: rgba(16, 24, 40, 0.85);
+  stroke-width: 0.5px;
+}
+
+/* 단말 노드 */
+.kx-wire__terminal circle {
+  stroke: var(--color-white);
+  stroke-width: 0.18;
+  vector-effect: non-scaling-stroke;
+  cursor: pointer;
+}
+.kx-wire__terminal.is-power circle {
+  fill: var(--color-wire-power);
+}
+.kx-wire__terminal.is-network circle {
+  fill: var(--color-wire-network);
+}
+.kx-wire__terminal.is-water circle {
+  fill: var(--color-wire-water);
+}
+.kx-wire__terminal.is-selected circle {
+  stroke: var(--color-white);
+  stroke-width: 0.4;
+}
+.kx-wire__terminal:focus-visible {
+  outline: none;
+}
+.kx-wire__terminal:focus-visible circle {
+  stroke: var(--color-primary-100);
+  stroke-width: 0.4;
+}
diff --git a/src/frontend/src/screens/visitor/CheckinDeskPage.tsx b/src/frontend/src/screens/visitor/CheckinDeskPage.tsx
new file mode 100644
index 0000000..3caf532
--- /dev/null
+++ b/src/frontend/src/screens/visitor/CheckinDeskPage.tsx
@@ -0,0 +1,395 @@
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconSearch, IconWifiOff, IconCheckCircle, IconGrid, IconUsers } from '../../components/ui/icons';
+import { ApiRequestError } from '../../api/client';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { CHART } from '../chartColors';
+import { REG_TYPE_LABEL, type RegVisitorType } from './sampleVisitor';
+import {
+  visitorApi,
+  type CheckinResultDto,
+  type CheckinSearchItemDto,
+  type CheckinStatsDto,
+} from './visitorApi';
+import './visitor.css';
+import './checkin.css';
+
+/*
+ * SCR-31 현장 체크인 데스크 / 키오스크 (M10). Stitch scr_31_checkin_desk 이식.
+ * 정상 경로: POST /api/events/{eventId}/checkin (토큰/등록번호), GET /checkin/search, GET /checkin/stats,
+ *   POST /visitors/{id}/badge/reissue. 3상태(로딩/빈/에러) 준수.
+ * ★ 보안 불변: 관람객 이름·연락처는 서버 마스킹 필드만 소비(원문 미노출, N2/R10).
+ * ★ 카메라 대신 토큰 입력 + 수동 검색으로 실동작(요청 사양). 오프라인 폴백 배지 표기(F049).
+ */
+export function CheckinDeskPage() {
+  const eventId = useResolvedEventId();
+  const qc = useQueryClient();
+  const [kiosk, setKiosk] = useState(false);
+  const [token, setToken] = useState('');
+  const [search, setSearch] = useState('');
+  const [searchResults, setSearchResults] = useState<CheckinSearchItemDto[] | null>(null);
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [card, setCard] = useState<CheckinResultDto | null>(null);
+  const [scanError, setScanError] = useState<string | null>(null);
+
+  const statsQ = useQuery({
+    queryKey: ['checkin-stats', eventId],
+    queryFn: () => visitorApi.checkinStats(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+    refetchInterval: 15000,
+  });
+
+  const degraded = isDegradable(statsQ.error);
+  const stats: CheckinStatsDto | null = statsQ.data ?? (degraded ? SAMPLE_STATS : null);
+  const hardError = statsQ.isError && !degraded;
+
+  const checkinMut = useMutation({
+    mutationFn: (body: { token?: string; registrationId?: string }) =>
+      visitorApi.checkin(eventId as string, body),
+    onSuccess: (res) => {
+      setCard(res);
+      setScanError(null);
+      setToken('');
+      setSearchResults(null);
+      setSearch('');
+      qc.invalidateQueries({ queryKey: ['checkin-stats', eventId] });
+    },
+    onError: (e) => {
+      setCard(null);
+      setScanError(
+        e instanceof ApiRequestError && e.code === 'NOT_FOUND'
+          ? '등록 정보를 찾을 수 없습니다 — 현장 등록이 필요합니다.'
+          : '체크인 처리 중 오류가 발생했습니다. 다시 시도해 주세요.',
+      );
+    },
+  });
+
+  const reissueMut = useMutation({
+    mutationFn: (registrationId: string) => visitorApi.reissueBadge(eventId as string, registrationId),
+    onSuccess: (res) =>
+      setCard((c) => (c ? { ...c, badgeCode: res.badgeCode, badgeIssued: true } : c)),
+  });
+
+  const runSearch = async () => {
+    if (!eventId || search.trim().length < 2) {
+      setSearchError('검색어는 2자 이상 입력해 주세요.');
+      return;
+    }
+    setSearchError(null);
+    try {
+      const rows = await visitorApi.checkinSearch(eventId, search.trim());
+      setSearchResults(rows);
+    } catch (e) {
+      setSearchResults([]);
+      setSearchError(
+        e instanceof ApiRequestError && e.code === 'NETWORK'
+          ? '네트워크 연결을 확인해 주세요.'
+          : '검색 중 오류가 발생했습니다.',
+      );
+    }
+  };
+
+  const submitToken = () => {
+    if (!token.trim()) {
+      setScanError('QR 토큰(배지 코드)을 입력해 주세요.');
+      return;
+    }
+    checkinMut.mutate({ token: token.trim() });
+  };
+
+  const chartData = useMemo(
+    () => (stats?.byHour ?? []).map((b) => ({ hour: b.hour, count: b.count })),
+    [stats],
+  );
+
+  if (!eventId) {
+    return (
+      <div className="kx-vis">
+        <EmptyState title="행사를 선택해 주세요" description="체크인을 진행할 행사가 지정되지 않았습니다." />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`kx-vis kx-checkin ${kiosk ? 'is-kiosk' : ''}`}>
+      <header className="kx-vis__head">
+        <div>
+          <h1 className="kx-vis__title">현장 체크인 데스크</h1>
+          <p className="kx-vis__subtitle">배지 QR 스캔 · 수동 검색 · 실시간 입장 집계</p>
+        </div>
+        <div className="kx-vis__head-actions">
+          {degraded && (
+            <span className="kx-vis__degraded" title="집계 API 미연결 — 시연 데이터">
+              <IconWifiOff size={14} /> 오프라인 — 로컬 저장 후 동기화
+            </span>
+          )}
+          <button
+            type="button"
+            className={`kx-checkin__kiosk-toggle ${kiosk ? 'is-on' : ''}`}
+            aria-pressed={kiosk}
+            onClick={() => setKiosk((v) => !v)}
+          >
+            <IconGrid size={16} /> 키오스크 모드
+          </button>
+        </div>
+      </header>
+
+      <div className="kx-checkin__grid">
+        {/* 좌: 스캔 존 + 수동 검색 */}
+        <section className="kx-card kx-checkin__scan" aria-label="배지 스캔">
+          <div className="kx-checkin__frame" aria-hidden="true">
+            <span className="kx-checkin__frame-corner tl" />
+            <span className="kx-checkin__frame-corner tr" />
+            <span className="kx-checkin__frame-corner bl" />
+            <span className="kx-checkin__frame-corner br" />
+            <ScanGlyph />
+            <p className="kx-checkin__frame-hint">배지 QR을 스캔하세요</p>
+          </div>
+
+          <form
+            className="kx-checkin__token"
+            onSubmit={(e) => {
+              e.preventDefault();
+              submitToken();
+            }}
+          >
+            <label htmlFor="kx-token" className="kx-checkin__label">QR 토큰 / 배지 코드 입력</label>
+            <div className="kx-checkin__token-row">
+              <input
+                id="kx-token"
+                className="kx-checkin__input"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                placeholder="예: QR-XXXX 또는 KTX-V-0001"
+                autoComplete="off"
+              />
+              <Button type="submit" disabled={checkinMut.isPending}>
+                {checkinMut.isPending ? '확인 중…' : '체크인'}
+              </Button>
+            </div>
+          </form>
+
+          <div className="kx-checkin__divider"><span>또는 수동 검색</span></div>
+
+          <div className="kx-checkin__search">
+            <label htmlFor="kx-search" className="kx-checkin__label">이름 · 연락처 · 등록번호</label>
+            <div className="kx-checkin__token-row">
+              <input
+                id="kx-search"
+                className="kx-checkin__input"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    runSearch();
+                  }
+                }}
+                placeholder="검색어 2자 이상"
+                autoComplete="off"
+              />
+              <Button variant="secondary" leadingIcon={<IconSearch size={16} />} onClick={runSearch}>
+                검색
+              </Button>
+            </div>
+            {searchError && <p className="kx-checkin__err" role="alert">{searchError}</p>}
+
+            {searchResults && searchResults.length > 0 && (
+              <ul className="kx-checkin__results" aria-label="검색 결과">
+                {searchResults.map((r) => (
+                  <li key={r.registrationId} className="kx-checkin__result">
+                    <span className="kx-vis__avatar" aria-hidden="true">{r.nameMasked.charAt(0)}</span>
+                    <div className="kx-checkin__result-info">
+                      <span className="kx-checkin__result-name">
+                        {r.nameMasked} <TypePill type={r.type} />
+                      </span>
+                      <span className="kx-checkin__result-meta">
+                        {r.company ?? '-'} · {r.phoneMasked ?? '-'} · {r.badgeCode ?? '-'}
+                      </span>
+                    </div>
+                    {r.checkinState === 'done' ? (
+                      <span className="kx-checkin__done-tag"><IconCheckCircle size={14} /> 완료</span>
+                    ) : (
+                      <Button
+                        variant="secondary"
+                        onClick={() => checkinMut.mutate({ registrationId: r.registrationId })}
+                        disabled={checkinMut.isPending}
+                      >
+                        체크인
+                      </Button>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            )}
+            {searchResults && searchResults.length === 0 && !searchError && (
+              <p className="kx-checkin__empty">검색 결과가 없습니다 — 현장 등록을 진행해 주세요.</p>
+            )}
+          </div>
+        </section>
+
+        {/* 중: 스캔 결과 카드 */}
+        <section className="kx-card kx-checkin__result-card" aria-label="체크인 결과">
+          {scanError && (
+            <div className="kx-checkin__scan-error" role="alert">
+              <p>{scanError}</p>
+              <Button variant="secondary" onClick={() => setScanError(null)}>닫기</Button>
+            </div>
+          )}
+
+          {!card && !scanError && (
+            <div className="kx-checkin__idle">
+              <span className="kx-checkin__pulse" aria-hidden="true" />
+              <p>배지를 스캔하거나 검색해 체크인을 시작하세요.</p>
+            </div>
+          )}
+
+          {card && (
+            <div className={`kx-checkin__visitor ${card.alreadyCheckedIn ? 'is-dup' : 'is-ok'}`}>
+              <div className="kx-checkin__visitor-status">
+                {card.alreadyCheckedIn ? (
+                  <span className="kx-checkin__badge-dup">이미 체크인됨</span>
+                ) : (
+                  <span className="kx-checkin__badge-ok"><IconCheckCircle size={18} /> 체크인 완료</span>
+                )}
+              </div>
+              <span className="kx-vis__avatar kx-vis__avatar--lg" aria-hidden="true">
+                {card.nameMasked.charAt(0)}
+              </span>
+              <h2 className="kx-checkin__visitor-name">{card.nameMasked}</h2>
+              <p className="kx-checkin__visitor-meta">
+                <TypePill type={card.type} /> · {card.company ?? '-'}
+              </p>
+              <dl className="kx-checkin__visitor-dl">
+                <div><dt>배지 번호</dt><dd className="tnum">{card.badgeCode ?? '-'}</dd></div>
+                <div><dt>체크인 시각</dt><dd className="tnum">{card.checkinAt ?? '-'}</dd></div>
+              </dl>
+              <div className="kx-checkin__visitor-actions">
+                <Button block leadingIcon={<QrGlyph size={16} />}>즉석 배지 인쇄</Button>
+                <Button
+                  variant="secondary"
+                  block
+                  onClick={() => reissueMut.mutate(card.registrationId)}
+                  disabled={reissueMut.isPending}
+                >
+                  {reissueMut.isPending ? '재발급 중…' : '배지 재발급'}
+                </Button>
+              </div>
+              <p className="kx-vis__pii-note">개인정보 보호 · 이름 마스킹 표기(원문 미표시)</p>
+            </div>
+          )}
+        </section>
+
+        {/* 우: 실시간 입장 집계 */}
+        <aside className="kx-checkin__side" aria-label="실시간 입장">
+          {statsQ.isLoading && !degraded && (
+            <div style={{ display: 'grid', gap: 12 }}>
+              <Skeleton height={120} radius={12} />
+              <Skeleton height={220} radius={12} />
+            </div>
+          )}
+
+          {hardError && (
+            <ErrorState message="입장 집계를 불러오지 못했습니다." onRetry={() => statsQ.refetch()} />
+          )}
+
+          {stats && (
+            <>
+              <div className="kx-card kx-checkin__inside">
+                <span className="kx-checkin__inside-label"><IconUsers size={16} /> 현재 장내 추정</span>
+                <strong className="kx-checkin__inside-num tnum">{stats.inside.toLocaleString()}명</strong>
+                <div className="kx-checkin__inside-sub">
+                  <span>사전등록 <b className="tnum">{stats.preRegistered.toLocaleString()}</b></span>
+                  <span>체크인 <b className="tnum">{stats.checkedIn.toLocaleString()}</b></span>
+                </div>
+              </div>
+
+              <div className="kx-card kx-checkin__hours">
+                <div className="kx-card__head"><h2>시간대별 체크인</h2></div>
+                {chartData.length === 0 ? (
+                  <EmptyState title="집계 없음" description="체크인이 시작되면 시간대별 추이가 표시됩니다." />
+                ) : (
+                  <ResponsiveContainer width="100%" height={200}>
+                    <BarChart data={chartData} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}>
+                      <CartesianGrid stroke={CHART.neutral200} strokeDasharray="3 3" vertical={false} />
+                      <XAxis dataKey="hour" tick={{ fontSize: 11, fill: CHART.slate }} tickLine={false} axisLine={{ stroke: CHART.neutral200 }} />
+                      <YAxis tick={{ fontSize: 11, fill: CHART.slate }} tickLine={false} axisLine={false} width={40} allowDecimals={false} />
+                      <Tooltip contentStyle={TOOLTIP_STYLE} formatter={(v) => [`${(v as number).toLocaleString()}명`, '체크인']} />
+                      <Bar dataKey="count" fill={CHART.primary600} radius={[4, 4, 0, 0]} maxBarSize={28} />
+                    </BarChart>
+                  </ResponsiveContainer>
+                )}
+              </div>
+            </>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+const TOOLTIP_STYLE = {
+  fontSize: 12,
+  borderRadius: 8,
+  border: '1px solid #E4E7EC',
+  boxShadow: '0 4px 12px rgba(16,24,40,0.1)',
+} as const;
+
+const KNOWN_TYPES: RegVisitorType[] = ['visitor', 'buyer', 'vip'];
+function TypePill({ type }: { type: string }) {
+  const t = (KNOWN_TYPES as string[]).includes(type) ? (type as RegVisitorType) : 'visitor';
+  return <span className={`kx-vis__type is-${t}`}>{REG_TYPE_LABEL[t]}</span>;
+}
+
+/** 폴백 집계(오프라인 강등 시). */
+const SAMPLE_STATS: CheckinStatsDto = {
+  preRegistered: 12480,
+  checkedIn: 8210,
+  inside: 7553,
+  byHour: [
+    { hour: '09시', count: 1240 },
+    { hour: '10시', count: 2180 },
+    { hour: '11시', count: 1760 },
+    { hour: '12시', count: 980 },
+    { hour: '13시', count: 1150 },
+    { hour: '14시', count: 900 },
+  ],
+};
+
+function isDegradable(error: unknown): boolean {
+  return (
+    error instanceof ApiRequestError &&
+    (error.code === 'NETWORK' || error.code === 'NOT_FOUND' || error.code === 'NOT_IMPLEMENTED')
+  );
+}
+
+/** 스캔 프레임 글리프(선 SVG). */
+function ScanGlyph() {
+  return (
+    <svg width={72} height={72} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2" />
+      <path d="M4 12h16" className="kx-checkin__scanline" />
+    </svg>
+  );
+}
+
+/** QR 글리프(선 SVG, 장식). */
+function QrGlyph({ size = 40 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M3 3h7v7H3V3zm2 2v3h3V5H5zm-2 9h7v7H3v-7zm2 2v3h3v-3H5zM14 3h7v7h-7V3zm2 2v3h3V5h-3zM14 14h3v3h-3v-3zm4 0h3v3h-3v-3zm-4 4h3v3h-3v-3zm4 0h3v3h-3v-3z" />
+    </svg>
+  );
+}
diff --git a/src/frontend/src/screens/visitor/LeadScoringPage.tsx b/src/frontend/src/screens/visitor/LeadScoringPage.tsx
new file mode 100644
index 0000000..e478c66
--- /dev/null
+++ b/src/frontend/src/screens/visitor/LeadScoringPage.tsx
@@ -0,0 +1,409 @@
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { AiLabel } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconDownload, IconSpark } from '../../components/ui/icons';
+import { ApiRequestError } from '../../api/client';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { useParams } from 'react-router-dom';
+import { LEADS } from './sampleVisitor';
+import { visitorApi, type LeadItemDto } from './visitorApi';
+import './visitor.css';
+
+/*
+ * SCR-32 리드 관리·AI 스코어링 (M10). Stitch scr_32_lead_scoring 이식.
+ * 정상 경로: GET /api/events/{eventId}/leads?boothId (마스킹 목록 + AI 저장 스코어).
+ * KPI 는 로드된 리드에서 파생(핫리드=스코어 80+, 전환 추정=AI 파생). 폴백: 오프라인 강등 시 sampleVisitor.LEADS.
+ * ★ 보안 불변: 리드 이름·연락처·이메일은 서버 마스킹 필드만 소비(PII 동의·보존 R10).
+ */
+export function LeadScoringPage() {
+  const eventId = useResolvedEventId();
+  const { boothId } = useParams();
+  const [hotOnly, setHotOnly] = useState(false);
+  const [selectedId, setSelectedId] = useState<string>('');
+  const [exporting, setExporting] = useState(false);
+  const [exportError, setExportError] = useState<string | null>(null);
+  const [rescoringId, setRescoringId] = useState<string | null>(null);
+  const [rescoreNote, setRescoreNote] = useState<string | null>(null);
+
+  const handleExport = async () => {
+    if (!eventId || exporting) return;
+    setExporting(true);
+    setExportError(null);
+    try {
+      await visitorApi.exportLeadsCsv(eventId, boothId ?? null);
+    } catch {
+      setExportError('CSV 내보내기에 실패했습니다. 잠시 후 다시 시도해 주세요.');
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const q = useQuery({
+    queryKey: ['leads', eventId, boothId ?? null],
+    queryFn: () => visitorApi.leads(eventId as string, boothId ?? null, 0, 100),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const handleRescore = async (leadId: string) => {
+    if (!eventId || rescoringId) return;
+    setRescoringId(leadId);
+    setRescoreNote(null);
+    try {
+      const r = await visitorApi.rescoreLead(eventId, leadId);
+      setRescoreNote(
+        r.degraded
+          ? 'AI 미가용 — 기존 규칙 스코어 유지'
+          : `AI 재계산 완료 · ${r.provider}`,
+      );
+      await q.refetch();
+    } catch {
+      setRescoreNote('AI 재계산에 실패했습니다. 잠시 후 다시 시도해 주세요.');
+    } finally {
+      setRescoringId(null);
+    }
+  };
+
+  const degraded = isDegradable(q.error);
+  const leads: LeadItemDto[] = q.data?.items ?? (degraded ? SAMPLE_LEADS : []);
+  const total = q.data?.total ?? (degraded ? SAMPLE_LEADS.length : 0);
+  const hardError = q.isError && !degraded;
+
+  const rows = useMemo(
+    () => (hotOnly ? leads.filter((l) => l.score >= 80) : leads),
+    [hotOnly, leads],
+  );
+  const selected = leads.find((l) => l.id === selectedId) ?? rows[0] ?? leads[0] ?? null;
+
+  const hotCount = leads.filter((l) => l.score >= 80).length;
+  const kpis = [
+    { label: '총 리드', value: total.toLocaleString(), sub: undefined as string | undefined, ai: false },
+    { label: '핫리드', value: String(hotCount), sub: 'AI 스코어 80+', ai: false },
+    { label: '팔로업 대기', value: String(Math.max(total - hotCount, 0)), sub: undefined, ai: false },
+    { label: '전환 추정', value: String(Math.round(hotCount * 0.35)), sub: 'AI 파생', ai: true },
+  ];
+
+  return (
+    <div className="kx-vis">
+      <header className="kx-vis__head">
+        <div>
+          <h1 className="kx-vis__title">리드 관리 · AI 스코어링</h1>
+          <p className="kx-vis__subtitle">부스 방문 리드 수집 · 스코어링 · 후속</p>
+        </div>
+        <div className="kx-vis__head-actions">
+          {degraded && (
+            <span className="kx-vis__degraded" title="리드 API 미연결 — 시연 데이터">오프라인 — 샘플</span>
+          )}
+          {exportError && (
+            <span className="kx-vis__degraded" role="alert">{exportError}</span>
+          )}
+          <Button
+            variant="secondary"
+            leadingIcon={<IconDownload size={16} />}
+            onClick={handleExport}
+            disabled={exporting || degraded}
+          >
+            {exporting ? '내보내는 중…' : 'CSV 내보내기'}
+          </Button>
+        </div>
+      </header>
+
+      {!eventId && (
+        <EmptyState title="행사를 선택해 주세요" description="리드를 조회할 행사가 지정되지 않았습니다." />
+      )}
+
+      {eventId && q.isLoading && !degraded && (
+        <div style={{ display: 'grid', gap: 16 }}>
+          <Skeleton height={92} radius={12} />
+          <Skeleton height={420} radius={12} />
+        </div>
+      )}
+
+      {hardError && (
+        <ErrorState message="리드를 불러오지 못했습니다." onRetry={() => q.refetch()} />
+      )}
+
+      {eventId && (!q.isLoading || degraded) && !hardError && (
+        <>
+          <section className="kx-vis__kpis kx-vis__kpis--4" aria-label="리드 핵심 지표">
+            {kpis.map((k) => (
+              <div key={k.label} className={`kx-kpi ${k.ai ? 'kx-kpi--ai' : ''}`}>
+                <span className="kx-kpi__label">
+                  {k.label}
+                  {k.ai && (
+                    <span className="kx-kpi__ai" aria-hidden="true">
+                      <IconSpark size={12} />
+                    </span>
+                  )}
+                </span>
+                <strong className="kx-kpi__value tnum">{k.value}</strong>
+                {k.sub && <span className="kx-kpi__sub">{k.sub}</span>}
+              </div>
+            ))}
+          </section>
+
+          <div className="kx-vis__lead-split">
+            {/* 리드 테이블 */}
+            <section className="kx-card kx-vis__lead-table-card" aria-label="리드 목록">
+              <div className="kx-vis__filters" role="group" aria-label="리드 필터">
+                <span className="kx-vis__filters-label">필터</span>
+                <button
+                  type="button"
+                  className={`kx-chip ${hotOnly ? 'is-active' : ''}`}
+                  aria-pressed={hotOnly}
+                  onClick={() => setHotOnly((v) => !v)}
+                >
+                  스코어 80+ {hotOnly && <span aria-hidden="true">×</span>}
+                </button>
+                <span className="kx-vis__filters-count tnum">{rows.length}건</span>
+              </div>
+              <div className="kx-table-scroll">
+                <table className="kx-table">
+                  <thead>
+                    <tr>
+                      <th scope="col">이름</th>
+                      <th scope="col">소속</th>
+                      <th scope="col">관심 제품</th>
+                      <th scope="col">관심도</th>
+                      <th scope="col">AI 스코어</th>
+                      <th scope="col">수집시각</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {rows.map((l) => {
+                      const isSel = l.id === selected?.id;
+                      return (
+                        <tr
+                          key={l.id}
+                          className={`kx-vis__lead-row ${isSel ? 'is-selected' : ''}`}
+                          onClick={() => setSelectedId(l.id)}
+                          tabIndex={0}
+                          aria-selected={isSel}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              setSelectedId(l.id);
+                            }
+                          }}
+                        >
+                          <td className="kx-vis__lead-name">{l.nameMasked}</td>
+                          <td>{l.company ?? '-'}</td>
+                          <td>{l.product ?? '-'}</td>
+                          <td><Stars value={l.interest} /></td>
+                          <td><ScoreGauge score={l.score} /></td>
+                          <td className="tnum">{l.collectedAt ?? '-'}</td>
+                        </tr>
+                      );
+                    })}
+                    {rows.length === 0 && (
+                      <tr>
+                        <td colSpan={6}>
+                          <EmptyState title="수집된 리드가 없습니다" description="부스 배지 QR 스캔이 수집되면 표시됩니다." />
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+              <div className="kx-vis__table-foot">
+                <span className="kx-vis__count">총 {total.toLocaleString()}건 중 {rows.length}건 표시</span>
+              </div>
+            </section>
+
+            {/* 리드 상세·팔로업 */}
+            {selected && (
+              <LeadDetail
+                lead={selected}
+                onExport={handleExport}
+                exporting={exporting}
+                onRescore={handleRescore}
+                rescoring={rescoringId === selected.id}
+                canRescore={!degraded}
+                rescoreNote={rescoreNote}
+              />
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function LeadDetail({
+  lead,
+  onExport,
+  exporting,
+  onRescore,
+  rescoring,
+  canRescore,
+  rescoreNote,
+}: {
+  lead: LeadItemDto;
+  onExport: () => void;
+  exporting: boolean;
+  onRescore: (leadId: string) => void;
+  rescoring: boolean;
+  canRescore: boolean;
+  rescoreNote: string | null;
+}) {
+  const hot = lead.score >= 80;
+  return (
+    <aside className="kx-vis__lead-detail" aria-label="리드 상세">
+      <div className="kx-card">
+        <div className="kx-vis__lead-profile">
+          <span className="kx-vis__avatar kx-vis__avatar--lg" aria-hidden="true">
+            {lead.nameMasked.charAt(0)}
+          </span>
+          <div>
+            <div className="kx-vis__lead-profile-top">
+              <h2>{lead.nameMasked}</h2>
+              {hot && <span className="kx-vis__hot">HOT</span>}
+            </div>
+            <p className="kx-vis__lead-role">{lead.role ?? '-'} · {lead.company ?? '-'}</p>
+            <p className="kx-vis__lead-contact">
+              {lead.phoneMasked ?? '-'} · {lead.emailMasked ?? '-'}
+            </p>
+          </div>
+        </div>
+
+        {/* AI 스코어 분석 */}
+        <div className="kx-vis__ai-card">
+          <div className="kx-vis__ai-card-head">
+            <span className="kx-vis__ai-card-title">
+              <AiLabel>AI 스코어 분석</AiLabel>
+            </span>
+            <span className="kx-vis__ai-score tnum">{lead.score}</span>
+          </div>
+          <div className="kx-vis__ai-actions">
+            <Button
+              variant="ai"
+              leadingIcon={<IconSpark size={14} />}
+              onClick={() => onRescore(lead.id)}
+              disabled={rescoring || !canRescore}
+              title={canRescore ? 'AI로 리드 스코어를 재계산합니다' : '오프라인(샘플) 상태에서는 재계산할 수 없습니다'}
+            >
+              {rescoring ? 'AI 재계산 중…' : 'AI 재계산'}
+            </Button>
+            {rescoreNote && (
+              <span className="kx-vis__ai-note" role="status">{rescoreNote}</span>
+            )}
+            {!lead.aiGenerated && (
+              <span className="kx-vis__ai-note" title="AI 미생성 — 규칙 기반 스코어">규칙 기반</span>
+            )}
+          </div>
+          <ul className="kx-vis__ai-reasons">
+            {lead.aiReasons.map((r, i) => (
+              <li key={i}>
+                <span className="kx-vis__ai-check" aria-hidden="true">
+                  <CheckGlyph />
+                </span>
+                {r}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* AI 추천 팔로업 */}
+        <div className="kx-vis__followup">
+          <label className="kx-vis__followup-label" htmlFor="kx-followup">
+            <IconSpark size={14} /> AI 추천 팔로업 메시지
+          </label>
+          <textarea id="kx-followup" className="kx-vis__followup-input" defaultValue={lead.followupDraft ?? ''} rows={7} />
+        </div>
+
+        <div className="kx-vis__lead-actions">
+          <Button block>EDM 발송하기</Button>
+          <div className="kx-vis__lead-actions-row">
+            <Button variant="secondary" leadingIcon={<IconDownload size={16} />} onClick={onExport} disabled={exporting}>
+              {exporting ? '내보내는 중…' : 'CSV 내보내기'}
+            </Button>
+            <Button variant="secondary">노트 기록</Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="kx-card">
+        <div className="kx-card__head">
+          <h2>최근 활동 로그</h2>
+        </div>
+        <ul className="kx-vis__activity">
+          {lead.activity.map((a, i) => (
+            <li key={i}>
+              <span className="kx-dot" />
+              <span className="kx-vis__activity-text">{a.text}</span>
+              <span className="kx-vis__activity-at">{a.at}</span>
+            </li>
+          ))}
+          {lead.activity.length === 0 && <li className="kx-vis__activity-empty">활동 로그 없음</li>}
+        </ul>
+      </div>
+    </aside>
+  );
+}
+
+/** 관심도 별점(1~5, 선 SVG). */
+function Stars({ value }: { value: number }) {
+  return (
+    <span className="kx-stars" role="img" aria-label={`관심도 ${value}점 / 5점`}>
+      {[1, 2, 3, 4, 5].map((n) => (
+        <StarGlyph key={n} filled={n <= value} />
+      ))}
+    </span>
+  );
+}
+function StarGlyph({ filled }: { filled: boolean }) {
+  return (
+    <svg width={16} height={16} viewBox="0 0 24 24" fill={filled ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth={filled ? 0 : 1.6} className={filled ? 'is-filled' : 'is-empty'} aria-hidden="true">
+      <path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17.8 6.4 20.4l1.4-6.3L3 9.8l6.4-.6L12 3z" />
+    </svg>
+  );
+}
+
+/** 체크 글리프(선 SVG) — AI 근거 목록 마커(글리프 텍스트 ✓ 대체, QA 지적). */
+function CheckGlyph() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M4 12l5 5L20 6" />
+    </svg>
+  );
+}
+
+/** AI 스코어 게이지(0~100). 80+ 는 AI 액센트(보라). */
+function ScoreGauge({ score }: { score: number }) {
+  const hot = score >= 80;
+  return (
+    <span className="kx-gauge">
+      <span className="kx-gauge__track">
+        <span className={`kx-gauge__fill ${hot ? 'is-hot' : ''}`} style={{ width: `${score}%` }} />
+      </span>
+      <span className={`kx-gauge__num tnum ${hot ? 'is-hot' : ''}`}>{score}</span>
+    </span>
+  );
+}
+
+/** 폴백 리드(오프라인 강등 시) — sampleVisitor.LEADS 파생(마스킹 유지). */
+const SAMPLE_LEADS: LeadItemDto[] = LEADS.map((l) => ({
+  id: l.id,
+  nameMasked: l.nameMasked,
+  role: l.role,
+  company: l.company,
+  product: l.product,
+  interest: l.interest,
+  score: l.score,
+  collectedAt: l.collectedAt,
+  phoneMasked: l.phoneMasked,
+  emailMasked: l.emailMasked,
+  aiReasons: l.aiReasons,
+  activity: l.activity,
+  followupDraft: l.followupDraft,
+  aiGenerated: true,
+}));
+
+function isDegradable(error: unknown): boolean {
+  return (
+    error instanceof ApiRequestError &&
+    (error.code === 'NETWORK' || error.code === 'NOT_FOUND' || error.code === 'NOT_IMPLEMENTED')
+  );
+}
diff --git a/src/frontend/src/screens/visitor/VisitorRegistrationDashboardPage.tsx b/src/frontend/src/screens/visitor/VisitorRegistrationDashboardPage.tsx
new file mode 100644
index 0000000..9578fe3
--- /dev/null
+++ b/src/frontend/src/screens/visitor/VisitorRegistrationDashboardPage.tsx
@@ -0,0 +1,376 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { AiLabel } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconDownload, IconSpark } from '../../components/ui/icons';
+import { ApiRequestError } from '../../api/client';
+import { useResolvedEventId } from '../../hooks/useResolvedEventId';
+import { CHART } from '../chartColors';
+import {
+  CHECKIN_LABEL,
+  REG_FORMS,
+  REG_TREND,
+  REG_TYPES,
+  REG_TYPE_LABEL,
+  REGISTRANTS,
+  type CheckinState,
+  type RegVisitorType,
+} from './sampleVisitor';
+import { visitorApi, type VisitorSummaryDto, type VisitorListItemDto } from './visitorApi';
+import './visitor.css';
+
+/*
+ * SCR-30 관람객 등록 관리 대시보드 (M10·M11). Stitch scr_30_visitor_reg_dashboard 이식.
+ * 정상 경로: GET /api/events/{eventId}/visitors/summary + /visitors (실 집계·마스킹 목록).
+ * 폴백: NETWORK/NOT_FOUND/NOT_IMPLEMENTED 시에만 sampleVisitor 로 강등("오프라인 — 샘플" 표기).
+ * ★ 보안 불변: 관람객 이름·연락처·이메일은 서버 마스킹 필드만 소비(원문 미노출, N2/R10).
+ */
+export function VisitorRegistrationDashboardPage() {
+  const eventId = useResolvedEventId();
+
+  const summaryQ = useQuery({
+    queryKey: ['visitor-summary', eventId],
+    queryFn: () => visitorApi.summary(eventId as string),
+    enabled: !!eventId,
+    retry: false,
+  });
+  const listQ = useQuery({
+    queryKey: ['visitor-list', eventId],
+    queryFn: () => visitorApi.visitors(eventId as string, 0, 20),
+    enabled: !!eventId,
+    retry: false,
+  });
+
+  const degraded = isDegradable(summaryQ.error) || isDegradable(listQ.error);
+  const summary: VisitorSummaryDto | null = summaryQ.data ?? (degraded ? SAMPLE_SUMMARY : null);
+  const rows: VisitorListItemDto[] =
+    listQ.data?.items ?? (degraded ? SAMPLE_ROWS : []);
+  const total = listQ.data?.total ?? (degraded ? SAMPLE_ROWS.length : 0);
+  const hardError = (summaryQ.isError && !degraded) || (listQ.isError && !degraded);
+
+  return (
+    <div className="kx-vis">
+      <header className="kx-vis__head">
+        <div>
+          <h1 className="kx-vis__title">관람객 데이터 관리</h1>
+          <p className="kx-vis__subtitle">사전등록 · 체크인 · 배지 발급 현황</p>
+        </div>
+        <div className="kx-vis__head-actions">
+          {degraded && (
+            <span className="kx-vis__degraded" title="집계 API 미연결 — 시연 데이터">오프라인 — 샘플</span>
+          )}
+          <Button variant="secondary" leadingIcon={<IconDownload size={16} />}>
+            엑셀 다운로드
+          </Button>
+        </div>
+      </header>
+
+      {!eventId && (
+        <EmptyState title="행사를 선택해 주세요" description="관람객 데이터를 조회할 행사가 지정되지 않았습니다." />
+      )}
+
+      {eventId && summaryQ.isLoading && !degraded && <VisSkeleton />}
+
+      {hardError && (
+        <ErrorState message="관람객 집계를 불러오지 못했습니다." onRetry={() => { summaryQ.refetch(); listQ.refetch(); }} />
+      )}
+
+      {summary && (
+        <>
+          {/* KPI 밴드 */}
+          <section className="kx-vis__kpis" aria-label="관람객 핵심 지표">
+            {summary.kpis.map((k) => (
+              <div key={k.label} className={`kx-kpi ${k.ai ? 'kx-kpi--ai' : ''}`}>
+                <span className="kx-kpi__label">
+                  {k.label}
+                  {k.ai && (
+                    <span className="kx-kpi__ai" aria-hidden="true">
+                      <IconSpark size={12} />
+                    </span>
+                  )}
+                </span>
+                <strong className="kx-kpi__value tnum">{k.value}</strong>
+                {k.delta && (
+                  <span className={`kx-delta kx-delta--${k.trend === 'down' ? 'down' : 'up'}`}>
+                    {k.trend === 'down' ? '▼' : '▲'} {k.delta}
+                  </span>
+                )}
+                {k.sub && <span className="kx-kpi__sub">{k.sub}</span>}
+              </div>
+            ))}
+          </section>
+
+          {/* 추이(2/3) + 폼·배지(1/3) */}
+          <div className="kx-vis__split">
+            <section className="kx-card kx-vis__trend" aria-label="등록·체크인 추이">
+              <div className="kx-card__head">
+                <h2>등록 · 체크인 추이</h2>
+                <ul className="kx-vis__legend" aria-hidden="true">
+                  <li>
+                    <span className="kx-dot" style={{ background: CHART.primary600 }} /> 사전등록
+                  </li>
+                  <li>
+                    <span className="kx-dot" style={{ background: CHART.slate }} /> 체크인
+                  </li>
+                </ul>
+              </div>
+              <p className="kx-card__hint">누적 사전등록·체크인 인원입니다.</p>
+              <div className="kx-vis__chart">
+                <ResponsiveContainer width="100%" height={300}>
+                  <AreaChart data={summary.trend} margin={{ top: 8, right: 12, bottom: 0, left: -8 }}>
+                    <defs>
+                      <linearGradient id="gPreReg" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor={CHART.primary600} stopOpacity={0.35} />
+                        <stop offset="100%" stopColor={CHART.primary600} stopOpacity={0.02} />
+                      </linearGradient>
+                      <linearGradient id="gCheckIn" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor={CHART.slate} stopOpacity={0.25} />
+                        <stop offset="100%" stopColor={CHART.slate} stopOpacity={0.02} />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid stroke={CHART.neutral200} strokeDasharray="3 3" vertical={false} />
+                    <XAxis dataKey="label" tick={{ fontSize: 12, fill: CHART.slate }} tickLine={false} axisLine={{ stroke: CHART.neutral200 }} />
+                    <YAxis tick={{ fontSize: 12, fill: CHART.slate }} tickLine={false} axisLine={false} width={48} tickFormatter={(v) => (v as number >= 1000 ? `${Math.round((v as number) / 1000)}천` : String(v))} />
+                    <Tooltip
+                      contentStyle={TOOLTIP_STYLE}
+                      formatter={(value, name) => [`${(value as number).toLocaleString()}명`, name]}
+                    />
+                    <Area type="monotone" dataKey="preReg" name="사전등록" stroke={CHART.primary600} fill="url(#gPreReg)" strokeWidth={2} />
+                    <Area type="monotone" dataKey="checkIn" name="체크인" stroke={CHART.slate} fill="url(#gCheckIn)" strokeWidth={2} />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </div>
+
+              <div className="kx-vis__donut-row">
+                <div className="kx-vis__donut">
+                  <ResponsiveContainer width="100%" height={140}>
+                    <PieChart>
+                      <Pie data={summary.types} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={38} outerRadius={58} paddingAngle={2} strokeWidth={0}>
+                        {summary.types.map((s) => (
+                          <Cell key={s.name} fill={s.color} />
+                        ))}
+                      </Pie>
+                      <Tooltip contentStyle={TOOLTIP_STYLE} formatter={(value, name) => [`${value}%`, name]} />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="kx-vis__donut-legend">
+                  <p className="kx-vis__donut-title">등록 유형 분포</p>
+                  <ul>
+                    {summary.types.map((s) => (
+                      <li key={s.name}>
+                        <span className="kx-dot" style={{ background: s.color }} />
+                        {s.name}
+                        <strong className="tnum">{s.value}%</strong>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </section>
+
+            <aside className="kx-vis__aside">
+              <section className="kx-card" aria-label="등록 폼 관리">
+                <div className="kx-card__head">
+                  <h2>등록 폼 관리</h2>
+                </div>
+                <ul className="kx-vis__forms">
+                  {summary.forms.map((f) => (
+                    <li key={f.id} className="kx-vis__form">
+                      <span className="kx-vis__form-name">
+                        <span className={`kx-dot ${f.active ? 'is-on' : 'is-off'}`} />
+                        {f.name}
+                      </span>
+                      <span className="kx-vis__form-count tnum">{f.count.toLocaleString()}명</span>
+                      <span className={`kx-vis__form-state ${f.active ? 'is-on' : ''}`}>
+                        {f.active ? '활성' : '비활성'}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+                <Button variant="ai" block leadingIcon={<IconSpark size={16} />}>
+                  AI 폼빌더 시작
+                </Button>
+                <p className="kx-vis__ai-note">
+                  <AiLabel>AI 폼빌더</AiLabel> 세그먼트 성향에 맞춘 등록 문항을 자동 제안합니다.
+                </p>
+              </section>
+
+              <section className="kx-card" aria-label="배지 템플릿">
+                <div className="kx-card__head">
+                  <h2>배지 템플릿</h2>
+                </div>
+                <div className="kx-vis__badge-preview">
+                  <div className="kx-badgecard">
+                    <div className="kx-badgecard__top">KINTEX VISITOR</div>
+                    <div className="kx-badgecard__qr" aria-hidden="true">
+                      <QrGlyph />
+                    </div>
+                    <p className="kx-badgecard__name">김 **</p>
+                    <p className="kx-badgecard__org">Samsung Electronics</p>
+                    <div className="kx-badgecard__foot">
+                      <span className="kx-badgecard__tag">BUYER</span>
+                      <span className="kx-badgecard__no tnum">2026-V01</span>
+                    </div>
+                  </div>
+                </div>
+                <p className="kx-vis__ai-note">배지 미리보기는 마스킹 표기 템플릿입니다(실 데이터 아님).</p>
+                <Button variant="secondary" block>배지 편집</Button>
+              </section>
+            </aside>
+          </div>
+
+          {/* 등록자 명단 */}
+          <section className="kx-card kx-vis__table-card" aria-label="전체 신청자 명단">
+            <div className="kx-card__head">
+              <h2>전체 신청자 명단</h2>
+              <span className="kx-vis__pii-note">개인정보 보호 · 이름 마스킹 표기</span>
+            </div>
+            <div className="kx-table-scroll">
+              <table className="kx-table kx-table--zebra">
+                <thead>
+                  <tr>
+                    <th scope="col">이름</th>
+                    <th scope="col">유형</th>
+                    <th scope="col">소속</th>
+                    <th scope="col">등록일</th>
+                    <th scope="col">체크인</th>
+                    <th scope="col">배지</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((r) => (
+                    <tr key={r.id}>
+                      <td>
+                        <span className="kx-vis__person">
+                          <span className="kx-vis__avatar" aria-hidden="true">{initialOf(r.nameMasked)}</span>
+                          {r.nameMasked}
+                        </span>
+                      </td>
+                      <td><TypePill type={r.type} /></td>
+                      <td>{r.company ?? '-'}</td>
+                      <td className="tnum">{r.registeredAt ?? '-'}</td>
+                      <td><CheckinPill state={r.checkin} /></td>
+                      <td>
+                        {r.badgeIssued ? (
+                          <span className="kx-vis__badge-issued" title="배지 발급 완료">
+                            <QrGlyph size={16} /> 발급
+                          </span>
+                        ) : (
+                          <span className="kx-vis__badge-none">미발급</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                  {rows.length === 0 && (
+                    <tr>
+                      <td colSpan={6}>
+                        <EmptyState title="등록자가 없습니다" description="사전등록이 접수되면 이 곳에 표시됩니다." />
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+            <div className="kx-vis__table-foot">
+              <span className="kx-vis__count">
+                총 {total.toLocaleString()}명 중 {rows.length}명 표시
+              </span>
+            </div>
+          </section>
+        </>
+      )}
+    </div>
+  );
+}
+
+function VisSkeleton() {
+  return (
+    <div style={{ display: 'grid', gap: 16 }}>
+      <Skeleton height={92} radius={12} />
+      <Skeleton height={360} radius={12} />
+      <Skeleton height={260} radius={12} />
+    </div>
+  );
+}
+
+const TOOLTIP_STYLE = {
+  fontSize: 12,
+  borderRadius: 8,
+  border: '1px solid #E4E7EC',
+  boxShadow: '0 4px 12px rgba(16,24,40,0.1)',
+} as const;
+
+/** 마스킹 이름 첫 글자(아바타). */
+function initialOf(nameMasked: string): string {
+  return nameMasked ? nameMasked.charAt(0) : '?';
+}
+
+const KNOWN_TYPES: RegVisitorType[] = ['visitor', 'buyer', 'vip'];
+function TypePill({ type }: { type: string }) {
+  const t = (KNOWN_TYPES as string[]).includes(type) ? (type as RegVisitorType) : 'visitor';
+  return <span className={`kx-vis__type is-${t}`}>{REG_TYPE_LABEL[t]}</span>;
+}
+
+const KNOWN_CHECKIN: CheckinState[] = ['done', 'waiting', 'cancelled'];
+function CheckinPill({ state }: { state: string }) {
+  const s = (KNOWN_CHECKIN as string[]).includes(state) ? (state as CheckinState) : 'waiting';
+  return (
+    <span className={`kx-vis__checkin is-${s}`}>
+      <span className="kx-dot" /> {CHECKIN_LABEL[s]}
+    </span>
+  );
+}
+
+/** 폴백 요약(오프라인 강등 시) — sampleVisitor 파생. */
+const SAMPLE_SUMMARY: VisitorSummaryDto = {
+  kpis: [
+    { label: '사전등록', value: '12,480' },
+    { label: '체크인', value: '8,210', sub: '진행률 65.7%' },
+    { label: '노쇼/취소', value: '1,540', trend: 'down', sub: '12%' },
+    { label: '바이어 비중', value: '34%', sub: '목표 30%' },
+    { label: '리드 생성', value: '2,140', ai: true, sub: 'AI 스코어링 대상' },
+  ],
+  trend: REG_TREND.map((p) => ({ label: p.label, preReg: p.preReg, checkIn: p.checkIn })),
+  types: REG_TYPES.map((t) => ({ name: t.name, value: t.value, color: t.color })),
+  forms: REG_FORMS.map((f) => ({ id: f.id, name: f.name, active: f.active, count: f.count })),
+};
+
+/** 폴백 등록자 목록(오프라인 강등 시). */
+const SAMPLE_ROWS: VisitorListItemDto[] = REGISTRANTS.map((r) => ({
+  id: r.id,
+  nameMasked: r.nameMasked,
+  type: r.type,
+  company: r.company,
+  registeredAt: r.registeredAt,
+  checkin: r.checkin,
+  badgeIssued: r.badgeIssued,
+}));
+
+function isDegradable(error: unknown): boolean {
+  return (
+    error instanceof ApiRequestError &&
+    (error.code === 'NETWORK' || error.code === 'NOT_FOUND' || error.code === 'NOT_IMPLEMENTED')
+  );
+}
+
+/** QR 코드 글리프 (선 SVG, 장식용). */
+function QrGlyph({ size = 40 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M3 3h7v7H3V3zm2 2v3h3V5H5zm-2 9h7v7H3v-7zm2 2v3h3v-3H5zM14 3h7v7h-7V3zm2 2v3h3V5h-3zM14 14h3v3h-3v-3zm4 0h3v3h-3v-3zm-4 4h3v3h-3v-3zm4 0h3v3h-3v-3z" />
+    </svg>
+  );
+}
diff --git a/src/frontend/src/screens/visitor/checkin.css b/src/frontend/src/screens/visitor/checkin.css
new file mode 100644
index 0000000..7fdd22e
--- /dev/null
+++ b/src/frontend/src/screens/visitor/checkin.css
@@ -0,0 +1,320 @@
+@import '../shared.css';
+
+/* SCR-31 현장 체크인 데스크 (M10) — 스캔 존 · 결과 카드 · 실시간 집계. visitor.css 위에 얹는 화면 전용 스타일. */
+
+.kx-checkin__kiosk-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 6px 12px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  background: var(--color-white);
+  border: 1px solid var(--border-card);
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+}
+.kx-checkin__kiosk-toggle.is-on {
+  color: var(--color-primary-700);
+  background: var(--color-primary-050);
+  border-color: var(--color-primary-600);
+}
+
+/* ── 3단 레이아웃: 스캔 | 결과 | 집계 ── */
+.kx-checkin__grid {
+  display: grid;
+  grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr) minmax(260px, 0.9fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1100px) {
+  .kx-checkin__grid { grid-template-columns: 1fr 1fr; }
+  .kx-checkin__side { grid-column: 1 / -1; }
+}
+@media (max-width: 720px) {
+  .kx-checkin__grid { grid-template-columns: 1fr; }
+}
+
+/* 키오스크 모드 — 스캔·결과에 집중(집계 숨김·확대) */
+.kx-checkin.is-kiosk .kx-checkin__side { display: none; }
+.kx-checkin.is-kiosk .kx-checkin__grid { grid-template-columns: 1.2fr 1fr; }
+.kx-checkin.is-kiosk .kx-checkin__frame { min-height: 300px; }
+.kx-checkin.is-kiosk .kx-checkin__visitor-name { font-size: var(--fs-display); }
+
+/* ── 스캔 존 ── */
+.kx-checkin__scan {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-checkin__frame {
+  position: relative;
+  min-height: 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  color: var(--color-primary-600);
+  background: var(--color-neutral-050);
+  border-radius: var(--radius-lg);
+}
+.kx-checkin__frame-corner {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border: 2px solid var(--color-primary-600);
+  border-radius: 2px;
+}
+.kx-checkin__frame-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
+.kx-checkin__frame-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
+.kx-checkin__frame-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
+.kx-checkin__frame-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
+.kx-checkin__frame-hint {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kx-checkin__scanline {
+  animation: kx-checkin-scan 2.2s ease-in-out infinite;
+}
+@keyframes kx-checkin-scan {
+  0%, 100% { transform: translateY(-5px); opacity: 0.35; }
+  50%      { transform: translateY(5px);  opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kx-checkin__scanline, .kx-checkin__pulse { animation: none; }
+}
+
+/* ── 토큰 입력 · 수동 검색 ── */
+.kx-checkin__label {
+  display: block;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-700);
+  margin-bottom: var(--space-1);
+}
+.kx-checkin__token-row {
+  display: flex;
+  gap: var(--space-1);
+}
+.kx-checkin__input {
+  flex: 1;
+  min-width: 0;
+  padding: 9px 12px;
+  font-size: var(--fs-body);
+  font-family: var(--font-sans);
+  color: var(--color-neutral-900);
+  background: var(--color-white);
+  border: 1px solid var(--border-card);
+  border-radius: var(--radius-sm);
+}
+.kx-checkin__input:focus-visible {
+  outline: 2px solid var(--color-primary-600);
+  outline-offset: 1px;
+}
+.kx-checkin__divider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--color-neutral-500);
+  font-size: var(--fs-caption);
+}
+.kx-checkin__divider::before,
+.kx-checkin__divider::after {
+  content: '';
+  flex: 1;
+  border-top: 1px solid var(--border-card);
+}
+.kx-checkin__err {
+  margin-top: var(--space-1);
+  font-size: var(--fs-caption);
+  color: var(--color-error);
+}
+.kx-checkin__empty {
+  margin-top: var(--space-3);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+/* 검색 결과 목록 */
+.kx-checkin__results {
+  list-style: none;
+  margin: var(--space-3) 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  max-height: 280px;
+  overflow-y: auto;
+}
+.kx-checkin__result {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+}
+.kx-checkin__result-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.kx-checkin__result-name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-checkin__result-meta {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kx-checkin__done-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--fs-caption);
+  color: var(--color-success);
+  white-space: nowrap;
+}
+
+/* ── 결과 카드 ── */
+.kx-checkin__result-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 380px;
+}
+.kx-checkin__scan-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  text-align: center;
+  color: var(--color-error);
+  font-size: var(--fs-body);
+}
+.kx-checkin__idle {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  text-align: center;
+  color: var(--color-neutral-500);
+  font-size: var(--fs-body);
+}
+.kx-checkin__pulse {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--color-primary-600);
+  animation: kx-checkin-pulse 1.6s ease-in-out infinite;
+}
+@keyframes kx-checkin-pulse {
+  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
+  70%  { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
+}
+
+.kx-checkin__visitor {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  text-align: center;
+}
+.kx-checkin__visitor-status { min-height: 28px; }
+.kx-checkin__badge-ok,
+.kx-checkin__badge-dup {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 4px 12px;
+  font-size: var(--fs-caption);
+  border-radius: var(--radius-pill);
+}
+.kx-checkin__badge-ok {
+  color: var(--color-success);
+  background: rgba(3, 152, 85, 0.08);
+}
+.kx-checkin__badge-dup {
+  color: var(--color-warning);
+  background: rgba(220, 104, 3, 0.1);
+}
+.kx-checkin__visitor.is-dup .kx-vis__avatar { opacity: 0.6; }
+.kx-checkin__visitor-name {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-checkin__visitor-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kx-checkin__visitor-dl {
+  width: 100%;
+  max-width: 320px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.kx-checkin__visitor-dl > div {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: 6px 0;
+  border-bottom: 1px dashed var(--border-card);
+  font-size: var(--fs-body);
+}
+.kx-checkin__visitor-dl dt { color: var(--color-neutral-500); }
+.kx-checkin__visitor-dl dd { margin: 0; color: var(--color-neutral-900); }
+.kx-checkin__visitor-actions {
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin-top: var(--space-1);
+}
+
+/* ── 우측 집계 ── */
+.kx-checkin__side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+.kx-checkin__inside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.kx-checkin__inside-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-checkin__inside-num {
+  font-size: var(--fs-display);
+  line-height: var(--lh-display);
+  color: var(--color-neutral-900);
+}
+.kx-checkin__inside-sub {
+  display: flex;
+  gap: var(--space-4);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-checkin__inside-sub b { color: var(--color-neutral-700); font-weight: 600; }
+.kx-checkin__hours { min-width: 0; }
diff --git a/src/frontend/src/screens/visitor/sampleVisitor.ts b/src/frontend/src/screens/visitor/sampleVisitor.ts
new file mode 100644
index 0000000..62a70fe
--- /dev/null
+++ b/src/frontend/src/screens/visitor/sampleVisitor.ts
@@ -0,0 +1,233 @@
+/*
+ * SCR-30 관람객 등록 관리 · SCR-32 리드 관리 샘플 데이터 (M10/M11).
+ * ★ M10/M11 백엔드 미구현 → 화면은 실 API 를 호출하지 않고 본 시연 데이터를 표시한다("샘플 데이터" 배지).
+ * ★ 보안 불변(PII 미노출): 이름·연락처·이메일은 이미 마스킹된 형태로만 보관/노출한다.
+ *   실제 구현 시 원문 PII 는 서버가 보관하고 API 응답에서 마스킹하여 내려준다(N2/R10).
+ */
+
+// ── SCR-30 관람객 등록 대시보드 ──
+
+export interface VisitorKpi {
+  label: string;
+  value: string;
+  delta?: string;
+  trend?: 'up' | 'down' | 'flat';
+  ai?: boolean;
+  sub?: string;
+}
+
+export const REG_KPIS: VisitorKpi[] = [
+  { label: '사전등록', value: '12,480', delta: '+12.4%', trend: 'up' },
+  { label: '체크인', value: '8,210', sub: '진행률 65.7%' },
+  { label: '노쇼율', value: '12%', delta: '주의', trend: 'down' },
+  { label: '바이어 비중', value: '34%', sub: '목표 30%' },
+  { label: '리드 생성', value: '2,140', ai: true, sub: 'AI 예측 성과' },
+];
+
+export interface RegTrendPoint {
+  label: string;
+  preReg: number;
+  checkIn: number;
+}
+
+/** 개장 D-14 ~ 당일 누적 사전등록/체크인 추이. */
+export const REG_TREND: RegTrendPoint[] = [
+  { label: 'D-14', preReg: 4200, checkIn: 0 },
+  { label: 'D-12', preReg: 5600, checkIn: 0 },
+  { label: 'D-10', preReg: 6800, checkIn: 0 },
+  { label: 'D-7', preReg: 8300, checkIn: 0 },
+  { label: 'D-5', preReg: 9700, checkIn: 0 },
+  { label: 'D-3', preReg: 11050, checkIn: 0 },
+  { label: 'D-1', preReg: 12100, checkIn: 1240 },
+  { label: '당일', preReg: 12480, checkIn: 8210 },
+];
+
+export interface RegTypeSlice {
+  name: string;
+  value: number;
+  color: string;
+}
+
+export const REG_TYPES: RegTypeSlice[] = [
+  { name: '관람객', value: 62, color: '#0066B3' },
+  { name: '바이어', value: 34, color: '#6D4AFF' },
+  { name: 'VIP', value: 4, color: '#0E8A5F' },
+];
+
+export interface RegForm {
+  id: string;
+  name: string;
+  active: boolean;
+  count: number;
+}
+
+export const REG_FORMS: RegForm[] = [
+  { id: 'general', name: '일반 참관객', active: true, count: 7740 },
+  { id: 'buyer', name: '비즈니스 바이어', active: true, count: 4210 },
+  { id: 'vip', name: 'VIP 초청', active: false, count: 530 },
+];
+
+export type RegVisitorType = 'visitor' | 'buyer' | 'vip';
+export type CheckinState = 'done' | 'waiting' | 'cancelled';
+
+export interface Registrant {
+  id: string;
+  /** 마스킹된 이름. */
+  nameMasked: string;
+  initial: string;
+  type: RegVisitorType;
+  company: string;
+  registeredAt: string;
+  checkin: CheckinState;
+  badgeIssued: boolean;
+}
+
+export const REGISTRANTS: Registrant[] = [
+  { id: 'v1', nameMasked: '김*희', initial: 'K', type: 'visitor', company: 'LG전자', registeredAt: '2026.10.12', checkin: 'done', badgeIssued: true },
+  { id: 'v2', nameMasked: '이*준', initial: 'L', type: 'buyer', company: '삼성전자', registeredAt: '2026.10.14', checkin: 'waiting', badgeIssued: true },
+  { id: 'v3', nameMasked: '박*서', initial: 'P', type: 'vip', company: '현대자동차', registeredAt: '2026.10.15', checkin: 'done', badgeIssued: true },
+  { id: 'v4', nameMasked: '최*훈', initial: 'C', type: 'visitor', company: '개인 참관', registeredAt: '2026.10.15', checkin: 'cancelled', badgeIssued: false },
+  { id: 'v5', nameMasked: '정*아', initial: 'J', type: 'buyer', company: '(주)미래기술', registeredAt: '2026.10.16', checkin: 'done', badgeIssued: true },
+  { id: 'v6', nameMasked: '한*수', initial: 'H', type: 'visitor', company: '두산로보틱스', registeredAt: '2026.10.16', checkin: 'waiting', badgeIssued: true },
+];
+
+export const REG_TYPE_LABEL: Record<RegVisitorType, string> = {
+  visitor: '관람객',
+  buyer: '바이어',
+  vip: 'VIP',
+};
+
+export const CHECKIN_LABEL: Record<CheckinState, string> = {
+  done: '완료',
+  waiting: '미입장',
+  cancelled: '취소',
+};
+
+// ── SCR-32 리드 관리·AI 스코어링 ──
+
+export const LEAD_KPIS: VisitorKpi[] = [
+  { label: '총 리드', value: '342' },
+  { label: '핫리드', value: '68', sub: 'AI 스코어 80+' },
+  { label: '팔로업 대기', value: '120' },
+  { label: '전환 추정', value: '24', ai: true },
+];
+
+export interface Lead {
+  id: string;
+  nameMasked: string;
+  role: string;
+  company: string;
+  product: string;
+  interest: number; // 1~5 별점
+  score: number; // 0~100 AI 스코어
+  collectedAt: string;
+  /** 마스킹된 연락처(표기용). */
+  phoneMasked: string;
+  emailMasked: string;
+  aiReasons: string[];
+  activity: { text: string; at: string }[];
+  followupDraft: string;
+}
+
+export const LEADS: Lead[] = [
+  {
+    id: 'l1',
+    nameMasked: '김**',
+    role: '구매 담당자',
+    company: '(주)테크솔루션',
+    product: '협동로봇 HR-A1',
+    interest: 5,
+    score: 87,
+    collectedAt: '14:22:05',
+    phoneMasked: '010-****-3021',
+    emailMasked: 'kim***@techsol.co.kr',
+    aiReasons: [
+      '과거 유사 전시회 로봇 구매 이력 있음',
+      '당사 부스 체류 시간 평균 대비 240% 높음',
+      '기술 사양서(PDF) 다운로드 2회 기록',
+    ],
+    activity: [
+      { text: '제품 카탈로그 QR 스캔', at: '오늘 14:22' },
+      { text: '부스 내 HR-A1 구동 시연 참관', at: '오늘 14:15' },
+    ],
+    followupDraft:
+      '안녕하세요, (주)테크솔루션 김** 팀장님.\n\nKINTEX 부스에 방문해주셔서 감사합니다. 관심을 보이셨던 협동로봇 HR-A1의 상세 기술 사양과 귀사 공정 최적화를 위한 커스텀 제안서를 준비했습니다. 다음 주 중 편하신 시간에 짧은 미팅이 가능하실까요?',
+  },
+  {
+    id: 'l2',
+    nameMasked: '이**',
+    role: '기술 기획',
+    company: '넥스트이노베이션',
+    product: '스마트 물류 시스템',
+    interest: 3,
+    score: 65,
+    collectedAt: '14:15:30',
+    phoneMasked: '010-****-7742',
+    emailMasked: 'lee***@nextinno.com',
+    aiReasons: [
+      '물류 자동화 세션 참석 이력',
+      '부스 체류 시간 평균 수준',
+    ],
+    activity: [
+      { text: '스마트 물류 데모 영상 시청', at: '오늘 14:15' },
+      { text: '브로슈어 다운로드', at: '오늘 14:03' },
+    ],
+    followupDraft:
+      '안녕하세요, 넥스트이노베이션 이** 님.\n\n스마트 물류 시스템에 관심 가져주셔서 감사합니다. 도입 사례집과 ROI 시뮬레이션 자료를 보내드립니다.',
+  },
+  {
+    id: 'l3',
+    nameMasked: '박**',
+    role: '연구소장',
+    company: '미래제조연구소',
+    product: 'AI 비전 검사 모듈',
+    interest: 4,
+    score: 82,
+    collectedAt: '14:02:11',
+    phoneMasked: '010-****-1188',
+    emailMasked: 'park***@fmlab.re.kr',
+    aiReasons: [
+      'AI 비전 검사 데모 3회 재방문',
+      '구매 결정권자(연구소장) 직급',
+      '견적 요청 폼 작성 완료',
+    ],
+    activity: [
+      { text: '견적 요청 폼 제출', at: '오늘 14:02' },
+      { text: 'AI 비전 모듈 상세 상담', at: '오늘 13:50' },
+    ],
+    followupDraft:
+      '안녕하세요, 미래제조연구소 박** 소장님.\n\n요청하신 AI 비전 검사 모듈 견적서를 첨부드립니다. 파일럿 도입 프로그램도 안내드리겠습니다.',
+  },
+  {
+    id: 'l4',
+    nameMasked: '정**',
+    role: '설비 담당',
+    company: '글로벌테크',
+    product: '자율주행 AMR',
+    interest: 2,
+    score: 44,
+    collectedAt: '13:55:42',
+    phoneMasked: '010-****-9003',
+    emailMasked: 'jung***@globaltech.io',
+    aiReasons: ['AMR 부스 단순 방문', '자료 열람 이력 없음'],
+    activity: [{ text: '부스 QR 스캔', at: '오늘 13:55' }],
+    followupDraft:
+      '안녕하세요, 글로벌테크 정** 님.\n\n자율주행 AMR 소개 자료를 보내드립니다. 궁금하신 점이 있으시면 언제든 문의해 주세요.',
+  },
+  {
+    id: 'l5',
+    nameMasked: '강**',
+    role: '인프라 엔지니어',
+    company: 'SCT시스템',
+    product: '클라우드 모니터링',
+    interest: 1,
+    score: 28,
+    collectedAt: '13:48:19',
+    phoneMasked: '010-****-2250',
+    emailMasked: 'kang***@sctsys.kr',
+    aiReasons: ['짧은 부스 체류', '경쟁사 부스 위주 관람'],
+    activity: [{ text: '부스 QR 스캔', at: '오늘 13:48' }],
+    followupDraft:
+      '안녕하세요, SCT시스템 강** 님.\n\n클라우드 모니터링 솔루션 소개서를 보내드립니다.',
+  },
+];
diff --git a/src/frontend/src/screens/visitor/visitor.css b/src/frontend/src/screens/visitor/visitor.css
new file mode 100644
index 0000000..aea781c
--- /dev/null
+++ b/src/frontend/src/screens/visitor/visitor.css
@@ -0,0 +1,687 @@
+@import '../shared.css';
+
+/* SCR-30 관람객 등록 대시보드 · SCR-32 리드 관리 (M10/M11) 공통 스타일. */
+
+.kx-vis {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.kx-vis__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-vis__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+}
+.kx-vis__subtitle {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-vis__head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+/* 샘플 데이터 배지 */
+.kx-sample {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-warning);
+  background: #fff4e5;
+  border: 1px solid #fcd9a8;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+}
+
+/* 오프라인 강등(폴백) 표시 — 집계 API 미연결 시 시연 데이터 안내 */
+.kx-vis__degraded {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-warning);
+  background: #fff4e5;
+  border: 1px solid #fcd9a8;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+}
+.kx-vis__activity-empty {
+  color: var(--color-text-muted, #667085);
+  font-size: 13px;
+  padding: 6px 0;
+  list-style: none;
+}
+
+/* KPI 밴드 */
+.kx-vis__kpis {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--space-4);
+}
+.kx-vis__kpis--4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+.kx-kpi--ai {
+  border-left: var(--accent-ai);
+}
+.kx-kpi__sub {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+/* 도트 */
+.kx-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+  background: var(--color-neutral-500);
+}
+.kx-dot.is-on {
+  background: var(--color-primary-600);
+}
+.kx-dot.is-off {
+  background: var(--color-neutral-200);
+}
+
+/* 추이 + aside 분할 */
+.kx-vis__split {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--space-4);
+  align-items: start;
+}
+.kx-vis__legend {
+  display: flex;
+  gap: var(--space-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-vis__legend li {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.kx-vis__chart {
+  width: 100%;
+}
+
+/* 등록 유형 도넛 */
+.kx-vis__donut-row {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  align-items: center;
+  gap: var(--space-4);
+  margin-top: var(--space-4);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-neutral-100);
+}
+.kx-vis__donut {
+  width: 140px;
+}
+.kx-vis__donut-title {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  margin-bottom: var(--space-2);
+}
+.kx-vis__donut-legend ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.kx-vis__donut-legend li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-vis__donut-legend strong {
+  margin-left: auto;
+  color: var(--color-neutral-900);
+}
+
+/* aside */
+.kx-vis__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* 등록 폼 관리 */
+.kx-vis__forms {
+  list-style: none;
+  margin: 0 0 var(--space-4);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-vis__form {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-2);
+  border-radius: var(--radius-sm);
+}
+.kx-vis__form:hover {
+  background: var(--color-neutral-050);
+}
+.kx-vis__form-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+}
+.kx-vis__form-count {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-vis__form-state {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  background: var(--color-neutral-050);
+  border: 1px solid var(--color-neutral-200);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+.kx-vis__form-state.is-on {
+  color: var(--color-primary-600);
+  background: rgba(0, 102, 179, 0.08);
+  border-color: transparent;
+}
+.kx-vis__ai-note {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: var(--space-3);
+}
+
+/* 배지 템플릿 프리뷰 */
+.kx-vis__badge-preview {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-4);
+  background: var(--color-neutral-050);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-3);
+}
+.kx-badgecard {
+  width: 132px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  box-shadow: var(--shadow-level2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: var(--space-3);
+}
+.kx-badgecard__top {
+  width: 100%;
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-align: center;
+  padding: 5px 0;
+}
+.kx-badgecard__qr {
+  color: var(--color-neutral-700);
+  margin: var(--space-3) 0 var(--space-2);
+}
+.kx-badgecard__name {
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-primary-700);
+}
+.kx-badgecard__org {
+  font-size: 9px;
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-badgecard__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 var(--space-3);
+  margin-top: var(--space-3);
+}
+.kx-badgecard__tag {
+  font-size: 7px;
+  font-weight: 800;
+  color: var(--color-white);
+  background: var(--color-ai-accent);
+  padding: 2px 5px;
+  border-radius: 3px;
+}
+.kx-badgecard__no {
+  font-size: 8px;
+  color: var(--color-neutral-500);
+}
+
+/* 등록자 테이블 */
+.kx-vis__table-card {
+  overflow: hidden;
+}
+.kx-vis__pii-note {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-vis__person {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--color-neutral-900);
+  font-weight: 500;
+}
+.kx-vis__avatar {
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.kx-vis__avatar--lg {
+  width: 56px;
+  height: 56px;
+  font-size: var(--fs-h2);
+  border: 2px solid var(--color-ai-accent);
+}
+
+/* 유형 pill */
+.kx-vis__type {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+}
+.kx-vis__type.is-visitor {
+  color: var(--color-primary-700);
+  background: var(--color-primary-100);
+}
+.kx-vis__type.is-buyer {
+  color: #4500d8;
+  background: #e9e3ff;
+}
+.kx-vis__type.is-vip {
+  color: var(--color-success);
+  background: #dcf3e9;
+}
+
+/* 체크인 pill */
+.kx-vis__checkin {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-body);
+  font-weight: 600;
+}
+.kx-vis__checkin.is-done {
+  color: var(--color-success);
+}
+.kx-vis__checkin.is-done .kx-dot {
+  background: var(--color-success);
+}
+.kx-vis__checkin.is-waiting {
+  color: var(--color-neutral-500);
+}
+.kx-vis__checkin.is-waiting .kx-dot {
+  background: var(--color-neutral-500);
+}
+.kx-vis__checkin.is-cancelled {
+  color: var(--color-error);
+}
+.kx-vis__checkin.is-cancelled .kx-dot {
+  background: var(--color-error);
+}
+
+.kx-vis__badge-issued {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: var(--fs-caption);
+  color: var(--color-primary-600);
+  font-weight: 600;
+}
+.kx-vis__badge-none {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-200);
+}
+.kx-vis__table-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: var(--space-3);
+  margin-top: var(--space-2);
+  border-top: 1px solid var(--color-neutral-100);
+}
+.kx-vis__count {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+
+/* ── SCR-32 리드 관리 ── */
+.kx-vis__lead-split {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--space-4);
+  align-items: start;
+}
+.kx-vis__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+.kx-vis__filters-label {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-vis__filters-count {
+  margin-left: auto;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  background: var(--color-neutral-100);
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.kx-chip.is-active {
+  color: var(--color-primary-700);
+  background: var(--color-primary-100);
+}
+
+.kx-vis__lead-row {
+  cursor: pointer;
+}
+.kx-vis__lead-row.is-selected {
+  background: var(--color-ai-surface);
+  box-shadow: inset 4px 0 0 var(--color-ai-accent);
+}
+.kx-vis__lead-row:focus-visible {
+  outline: 2px solid var(--color-primary-600);
+  outline-offset: -2px;
+}
+.kx-vis__lead-name {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+
+/* 별점 */
+.kx-stars {
+  display: inline-flex;
+  gap: 1px;
+  color: var(--color-ai-accent);
+}
+.kx-stars .is-empty {
+  color: var(--color-neutral-200);
+}
+
+/* AI 스코어 게이지 */
+.kx-gauge {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 110px;
+}
+.kx-gauge__track {
+  flex: 1;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-100);
+  overflow: hidden;
+}
+.kx-gauge__fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-600);
+}
+.kx-gauge__fill.is-hot {
+  background: var(--color-ai-accent);
+}
+.kx-gauge__num {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-white);
+  background: var(--color-primary-600);
+  border-radius: var(--radius-pill);
+  padding: 1px 8px;
+  min-width: 30px;
+  text-align: center;
+}
+.kx-gauge__num.is-hot {
+  background: var(--color-ai-accent);
+}
+
+/* 리드 상세 패널 */
+.kx-vis__lead-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.kx-vis__lead-profile {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  margin-bottom: var(--space-4);
+}
+.kx-vis__lead-profile-top {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.kx-vis__lead-profile-top h2 {
+  font-size: var(--fs-h2);
+  color: var(--color-neutral-900);
+}
+.kx-vis__hot {
+  font-size: 10px;
+  font-weight: 800;
+  color: #4500d8;
+  background: #e9e3ff;
+  padding: 2px 7px;
+  border-radius: 4px;
+}
+.kx-vis__lead-role {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+  margin-top: 2px;
+}
+.kx-vis__lead-contact {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+
+.kx-vis__ai-card {
+  background: var(--color-ai-surface);
+  border: 1px solid #d9cfff;
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  margin-bottom: var(--space-4);
+}
+.kx-vis__ai-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+.kx-vis__ai-score {
+  font-size: var(--fs-display);
+  line-height: 1;
+  font-weight: 700;
+  color: var(--color-ai-accent);
+}
+.kx-vis__ai-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+.kx-vis__ai-note {
+  font-size: var(--fs-caption, 12px);
+  color: var(--color-text-muted, #667085);
+}
+.kx-vis__ai-reasons {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.kx-vis__ai-reasons li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-vis__ai-check {
+  color: var(--color-ai-accent);
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.kx-vis__followup {
+  margin-bottom: var(--space-4);
+}
+.kx-vis__followup-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin-bottom: var(--space-2);
+}
+.kx-vis__followup-label svg {
+  color: var(--color-ai-accent);
+}
+.kx-vis__followup-input {
+  width: 100%;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  color: var(--color-neutral-700);
+  background: var(--color-neutral-050);
+  resize: vertical;
+  font-family: inherit;
+}
+.kx-vis__followup-input:focus-visible {
+  outline: 2px solid var(--color-primary-600);
+  outline-offset: -1px;
+}
+.kx-vis__lead-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-vis__lead-actions-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+
+/* 활동 로그 */
+.kx-vis__activity {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-vis__activity li {
+  display: grid;
+  grid-template-columns: 8px 1fr auto;
+  align-items: baseline;
+  gap: var(--space-2);
+}
+.kx-vis__activity .kx-dot {
+  background: var(--color-ai-accent);
+  align-self: center;
+}
+.kx-vis__activity-text {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-vis__activity-at {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  white-space: nowrap;
+}
+
+/* 반응형 */
+@media (max-width: 1200px) {
+  .kx-vis__kpis {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (max-width: 1100px) {
+  .kx-vis__split,
+  .kx-vis__lead-split {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 640px) {
+  .kx-vis__kpis,
+  .kx-vis__kpis--4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .kx-vis__donut-row {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+}
diff --git a/src/frontend/src/screens/visitor/visitorApi.ts b/src/frontend/src/screens/visitor/visitorApi.ts
new file mode 100644
index 0000000..37c4961
--- /dev/null
+++ b/src/frontend/src/screens/visitor/visitorApi.ts
@@ -0,0 +1,189 @@
+/*
+ * M10 관람객·리드 실 API 계약 (SCR-30·SCR-32).
+ * 공용 클라이언트(../../api/client)만 사용 — client.ts·endpoints.ts·types.ts 무수정.
+ * ★ PII 불변: 응답에는 마스킹 필드(nameMasked·phoneMasked·emailMasked)만 존재한다(원문 없음).
+ *
+ * 백엔드 컨트롤러 정본:
+ *   GET  /api/events/{eventId}/visitors/summary → ApiResponse<VisitorSummary>
+ *   GET  /api/events/{eventId}/visitors?page&size → ApiResponse<PageResponse<VisitorListItem>>
+ *   GET  /api/events/{eventId}/leads?boothId&page&size → ApiResponse<PageResponse<LeadItem>>
+ *   POST /api/public/events/{eventId}/register (공개 — 공개 P4 팀 배선)
+ */
+import { api, ApiRequestError, getAccessToken } from '../../api/client';
+import type { PageResponse } from '../../api/types';
+
+const API_BASE = (import.meta.env.VITE_API_BASE as string | undefined) ?? '';
+
+// ── SCR-30 요약 ──
+export interface VisitorKpiDto {
+  label: string;
+  value: string;
+  delta?: string | null;
+  trend?: string | null;
+  ai?: boolean | null;
+  sub?: string | null;
+}
+export interface TrendPointDto {
+  label: string;
+  preReg: number;
+  checkIn: number;
+}
+export interface TypeSliceDto {
+  name: string;
+  value: number;
+  color: string;
+}
+export interface FormItemDto {
+  id: string;
+  name: string;
+  active: boolean;
+  count: number;
+}
+export interface VisitorSummaryDto {
+  kpis: VisitorKpiDto[];
+  trend: TrendPointDto[];
+  types: TypeSliceDto[];
+  forms: FormItemDto[];
+}
+
+// ── SCR-30 등록자(마스킹) ──
+export interface VisitorListItemDto {
+  id: string;
+  nameMasked: string;
+  type: string; // visitor|buyer|vip
+  company: string | null;
+  registeredAt: string | null;
+  checkin: string; // done|waiting|cancelled
+  badgeIssued: boolean;
+}
+
+// ── SCR-32 리드(마스킹 + AI 저장값) ──
+export interface LeadActivityDto {
+  text: string;
+  at: string;
+}
+export interface LeadItemDto {
+  id: string;
+  nameMasked: string;
+  role: string | null;
+  company: string | null;
+  product: string | null;
+  interest: number;
+  score: number;
+  collectedAt: string | null;
+  phoneMasked: string | null;
+  emailMasked: string | null;
+  aiReasons: string[];
+  activity: LeadActivityDto[];
+  followupDraft: string | null;
+  aiGenerated: boolean;
+}
+
+// ── SCR-32 리드 AI 재계산(F051) ──
+export interface LeadRescoreResultDto {
+  leadId: string;
+  score: number;
+  aiReasons: string[];
+  scoreSource: string; // 'ai' | 'rule'
+  aiGenerated: boolean;
+  degraded: boolean;
+  provider: string; // 'claude' | 'ollama' | 'none'
+}
+
+// ── SCR-31 현장 체크인 ──
+export interface CheckinResultDto {
+  registrationId: string;
+  nameMasked: string;
+  type: string; // visitor|buyer|vip
+  company: string | null;
+  badgeCode: string | null;
+  badgeIssued: boolean;
+  checkinState: string; // done|waiting|cancelled
+  alreadyCheckedIn: boolean;
+  checkinAt: string | null;
+}
+export interface CheckinSearchItemDto {
+  registrationId: string;
+  nameMasked: string;
+  type: string;
+  company: string | null;
+  phoneMasked: string | null;
+  badgeCode: string | null;
+  checkinState: string;
+}
+export interface HourBucketDto {
+  hour: string;
+  count: number;
+}
+export interface CheckinStatsDto {
+  preRegistered: number;
+  checkedIn: number;
+  inside: number;
+  byHour: HourBucketDto[];
+}
+export interface BadgeReissueResultDto {
+  registrationId: string;
+  badgeCode: string;
+  badgeIssued: boolean;
+}
+
+function evPath(eventId: string): string {
+  return `/api/events/${encodeURIComponent(eventId)}`;
+}
+
+export const visitorApi = {
+  summary: (eventId: string) =>
+    api.get<VisitorSummaryDto>(`${evPath(eventId)}/visitors/summary`),
+  visitors: (eventId: string, page = 0, size = 20) =>
+    api.get<PageResponse<VisitorListItemDto>>(`${evPath(eventId)}/visitors?page=${page}&size=${size}`),
+  leads: (eventId: string, boothId?: string | null, page = 0, size = 50) => {
+    const qs = new URLSearchParams();
+    if (boothId) qs.set('boothId', boothId);
+    qs.set('page', String(page));
+    qs.set('size', String(size));
+    return api.get<PageResponse<LeadItemDto>>(`${evPath(eventId)}/leads?${qs.toString()}`);
+  },
+  /** 리드 AI 재계산(F051, 매니저↑) — AI 실패 시 서버가 기존 규칙 스코어 유지(scoreSource='rule'·degraded=true). */
+  rescoreLead: (eventId: string, leadId: string) =>
+    api.post<LeadRescoreResultDto>(
+      `${evPath(eventId)}/leads/${encodeURIComponent(leadId)}/rescore`,
+    ),
+
+  // SCR-31 체크인 데스크 — 토큰/등록번호 체크인, 수동 검색, 실시간 집계, 배지 재발급.
+  checkin: (eventId: string, body: { token?: string; registrationId?: string }) =>
+    api.post<CheckinResultDto>(`${evPath(eventId)}/checkin`, body),
+  checkinSearch: (eventId: string, q: string) =>
+    api.get<CheckinSearchItemDto[]>(`${evPath(eventId)}/checkin/search?q=${encodeURIComponent(q)}`),
+  checkinStats: (eventId: string) =>
+    api.get<CheckinStatsDto>(`${evPath(eventId)}/checkin/stats`),
+  reissueBadge: (eventId: string, registrationId: string) =>
+    api.post<BadgeReissueResultDto>(
+      `${evPath(eventId)}/visitors/${encodeURIComponent(registrationId)}/badge/reissue`,
+    ),
+
+  // SCR-32 리드 CSV 내보내기 — 봉투가 아닌 파일(byte) 응답이라 fetch 직결 후 blob 다운로드.
+  exportLeadsCsv: async (eventId: string, boothId?: string | null): Promise<void> => {
+    const qs = boothId ? `?boothId=${encodeURIComponent(boothId)}` : '';
+    const token = getAccessToken();
+    let res: Response;
+    try {
+      res = await fetch(`${API_BASE}${evPath(eventId)}/leads/export${qs}`, {
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+      });
+    } catch {
+      throw new ApiRequestError('NETWORK', '네트워크 연결을 확인해 주세요.', 0);
+    }
+    if (!res.ok) {
+      throw new ApiRequestError('UNKNOWN', `CSV 내보내기에 실패했습니다. (${res.status})`, res.status);
+    }
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `leads-${eventId}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  },
+};
diff --git a/src/frontend/src/screens/work/MeetingPage.tsx b/src/frontend/src/screens/work/MeetingPage.tsx
new file mode 100644
index 0000000..45ca872
--- /dev/null
+++ b/src/frontend/src/screens/work/MeetingPage.tsx
@@ -0,0 +1,324 @@
+/*
+ * SCR-45 회의록 (meeting). 참조: UIWS meeting/MeetingDetailPage.
+ * 좌: 회의 목록 / 우: 상세(본문·회의록 편집·액션아이템).
+ * 백엔드: /api/work/meetings (get·create·minutes·actions·action status).
+ * ★ 갭: 녹음 재생·STT 전사·AI 요약·Jasper PDF 엔드포인트 부재 → 해당 UI는 disabled+툴팁. 07_work_api_gaps.md 기록.
+ */
+import { useEffect, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { meetingApi } from '../../api/endpoints';
+import type { MeetingSaveRequest } from '../../api/types';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconDownload, IconPlus } from '../../components/ui/icons';
+import { StatusPill, errMessage, fmtDateTime, useToast } from './workShared';
+import './work.css';
+
+const NOT_SUPPORTED = '백엔드 미지원 — STT/PDF 파이프라인 연동 후 활성화';
+
+export function MeetingPage() {
+  const qc = useQueryClient();
+  const { show, node: toast } = useToast();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [composing, setComposing] = useState(false);
+  const [minutesDraft, setMinutesDraft] = useState('');
+  const [actionText, setActionText] = useState('');
+
+  const listQ = useQuery({
+    queryKey: ['meetings'],
+    queryFn: () => meetingApi.list({ page: 0, size: 50 }),
+  });
+  const detailQ = useQuery({
+    queryKey: ['meeting', selectedId],
+    queryFn: () => meetingApi.get(selectedId as string),
+    enabled: !!selectedId,
+  });
+
+  useEffect(() => {
+    if (detailQ.data) setMinutesDraft(detailQ.data.meeting.minutes ?? '');
+  }, [detailQ.data]);
+
+  const createM = useMutation({
+    mutationFn: (b: MeetingSaveRequest) => meetingApi.create(b),
+    onSuccess: (m) => {
+      show('회의가 등록되었습니다.');
+      setComposing(false);
+      setSelectedId(m.id);
+      qc.invalidateQueries({ queryKey: ['meetings'] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+  const minutesM = useMutation({
+    mutationFn: ({ id, minutes }: { id: string; minutes: string }) =>
+      meetingApi.saveMinutes(id, minutes),
+    onSuccess: () => {
+      show('회의록이 저장되었습니다.');
+      qc.invalidateQueries({ queryKey: ['meeting', selectedId] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+  const actionM = useMutation({
+    mutationFn: ({ id, item }: { id: string; item: string }) =>
+      meetingApi.addAction(id, { actionItem: item }),
+    onSuccess: () => {
+      setActionText('');
+      qc.invalidateQueries({ queryKey: ['meeting', selectedId] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+  const actionStatusM = useMutation({
+    mutationFn: ({ actionId, value }: { actionId: string; value: string }) =>
+      meetingApi.actionStatus(actionId, value),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['meeting', selectedId] }),
+    onError: (e) => show(errMessage(e)),
+  });
+
+  const rows = listQ.data?.items ?? [];
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">회의록</h1>
+          <p className="kx-work__subtitle">사전업무협의(D-30) 회의 기록 · 액션아이템 관리</p>
+        </div>
+        <Button leadingIcon={<IconPlus size={16} />} onClick={() => setComposing(true)}>
+          회의 등록
+        </Button>
+      </header>
+
+      <div className="kx-meet">
+        {/* 목록 */}
+        <section className="kx-card" aria-label="회의 목록" style={{ padding: 0 }}>
+          <div className="kx-scroll-70">
+            {listQ.isLoading &&
+              Array.from({ length: 5 }).map((_, i) => (
+                <div className="kx-meet__list-item" key={i}>
+                  <Skeleton height={16} width="70%" />
+                  <Skeleton height={13} width="40%" />
+                </div>
+              ))}
+            {listQ.isError && (
+              <ErrorState message={errMessage(listQ.error)} onRetry={() => listQ.refetch()} />
+            )}
+            {!listQ.isLoading && !listQ.isError && rows.length === 0 && (
+              <EmptyState title="등록된 회의가 없습니다" />
+            )}
+            {rows.map((m) => (
+              <div
+                key={m.id}
+                className={`kx-meet__list-item ${selectedId === m.id ? 'is-selected' : ''}`}
+                onClick={() => {
+                  setComposing(false);
+                  setSelectedId(m.id);
+                }}
+              >
+                <span className="kx-list-table__title">{m.title}</span>
+                <span className="kx-detail__meta">
+                  {fmtDateTime(m.meetingAt)}
+                  {m.location && ` · ${m.location}`}
+                </span>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* 상세 */}
+        <section className="kx-detail" aria-label="회의 상세" style={{ position: 'static' }}>
+          {composing ? (
+            <MeetingCompose
+              saving={createM.isPending}
+              onCancel={() => setComposing(false)}
+              onSave={(b) => createM.mutate(b)}
+            />
+          ) : !selectedId ? (
+            <EmptyState title="회의를 선택하세요" description="목록에서 회의를 선택하면 상세가 표시됩니다." />
+          ) : detailQ.isLoading ? (
+            <>
+              <Skeleton height={24} width="60%" />
+              <Skeleton height={120} />
+            </>
+          ) : detailQ.isError ? (
+            <ErrorState message={errMessage(detailQ.error)} onRetry={() => detailQ.refetch()} />
+          ) : detailQ.data ? (
+            <>
+              <div className="kx-detail__head">
+                <h2 className="kx-detail__title">{detailQ.data.meeting.title}</h2>
+                <span title={NOT_SUPPORTED} style={{ display: 'inline-flex' }}>
+                  <Button variant="secondary" disabled leadingIcon={<IconDownload size={16} />}>
+                    회의록 PDF
+                  </Button>
+                </span>
+              </div>
+              <div className="kx-detail__meta">
+                <span>{detailQ.data.meeting.organizerName}</span>
+                <span>· {fmtDateTime(detailQ.data.meeting.meetingAt)}</span>
+                {detailQ.data.meeting.location && <span>· {detailQ.data.meeting.location}</span>}
+              </div>
+
+              {/* 녹음/STT (미지원) */}
+              <div className="kx-meet__player" title={NOT_SUPPORTED}>
+                ▶ 녹음 재생 · STT 전사 (준비 중)
+              </div>
+
+              {detailQ.data.meeting.content && (
+                <div className="kx-field">
+                  <span className="kx-label">회의 안건</span>
+                  <div className="kx-detail__body">{detailQ.data.meeting.content}</div>
+                </div>
+              )}
+
+              {/* 회의록 편집 */}
+              <div className="kx-field">
+                <span className="kx-label">회의록</span>
+                <textarea
+                  className="kx-textarea"
+                  style={{ minHeight: 140 }}
+                  value={minutesDraft}
+                  onChange={(e) => setMinutesDraft(e.target.value)}
+                  placeholder="회의 내용을 기록하세요."
+                />
+                <div style={{ marginTop: 8 }}>
+                  <Button
+                    disabled={minutesM.isPending}
+                    onClick={() => minutesM.mutate({ id: detailQ.data!.meeting.id, minutes: minutesDraft })}
+                  >
+                    {minutesM.isPending ? '저장 중…' : '회의록 저장'}
+                  </Button>
+                </div>
+              </div>
+
+              {/* 액션아이템 */}
+              <div className="kx-field">
+                <span className="kx-label">액션아이템</span>
+                <table className="kx-list-table">
+                  <thead>
+                    <tr>
+                      <th style={{ width: 40 }}>#</th>
+                      <th>내용</th>
+                      <th style={{ width: 96 }}>상태</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {detailQ.data.actions.length === 0 && (
+                      <tr>
+                        <td colSpan={3} className="kx-list-table__muted">
+                          등록된 액션아이템이 없습니다.
+                        </td>
+                      </tr>
+                    )}
+                    {detailQ.data.actions.map((a) => (
+                      <tr key={a.id} style={{ cursor: 'default' }}>
+                        <td className="kx-num">{a.seq}</td>
+                        <td>{a.actionItem}</td>
+                        <td>
+                          <button
+                            className="kx-pill kx-pill--neutral"
+                            style={{ cursor: 'pointer', border: 'none' }}
+                            onClick={() =>
+                              actionStatusM.mutate({
+                                actionId: a.id,
+                                value: a.status === 'DONE' ? 'OPEN' : 'DONE',
+                              })
+                            }
+                            title="상태 토글"
+                          >
+                            <StatusPill value={a.status} />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+                <div className="kx-thread__compose" style={{ marginTop: 8 }}>
+                  <input
+                    className="kx-input"
+                    placeholder="새 액션아이템…"
+                    value={actionText}
+                    onChange={(e) => setActionText(e.target.value)}
+                    onKeyDown={(e) =>
+                      e.key === 'Enter' &&
+                      actionText.trim() &&
+                      actionM.mutate({ id: detailQ.data!.meeting.id, item: actionText })
+                    }
+                  />
+                  <Button
+                    disabled={!actionText.trim() || actionM.isPending}
+                    onClick={() => actionM.mutate({ id: detailQ.data!.meeting.id, item: actionText })}
+                  >
+                    추가
+                  </Button>
+                </div>
+              </div>
+            </>
+          ) : null}
+        </section>
+      </div>
+      {toast}
+    </div>
+  );
+}
+
+function MeetingCompose({
+  onCancel,
+  onSave,
+  saving,
+}: {
+  onCancel: () => void;
+  onSave: (b: MeetingSaveRequest) => void;
+  saving: boolean;
+}) {
+  const now = new Date();
+  const [form, setForm] = useState<MeetingSaveRequest>({
+    title: '',
+    location: '',
+    meetingAt: `${now.toISOString().slice(0, 16)}`,
+    content: '',
+  });
+  return (
+    <>
+      <div className="kx-detail__head">
+        <h2 className="kx-detail__title">회의 등록</h2>
+      </div>
+      <label className="kx-field">
+        <span className="kx-label">제목 *</span>
+        <input className="kx-input" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
+      </label>
+      <div className="kx-formgrid">
+        <label className="kx-field">
+          <span className="kx-label">일시 *</span>
+          <input
+            type="datetime-local"
+            className="kx-input"
+            value={form.meetingAt}
+            onChange={(e) => setForm({ ...form, meetingAt: e.target.value })}
+          />
+        </label>
+        <label className="kx-field">
+          <span className="kx-label">장소</span>
+          <input
+            className="kx-input"
+            value={form.location ?? ''}
+            onChange={(e) => setForm({ ...form, location: e.target.value })}
+          />
+        </label>
+      </div>
+      <label className="kx-field">
+        <span className="kx-label">안건</span>
+        <textarea
+          className="kx-textarea"
+          value={form.content ?? ''}
+          onChange={(e) => setForm({ ...form, content: e.target.value })}
+        />
+      </label>
+      <div className="kx-detail__actions">
+        <Button disabled={!form.title.trim() || saving} onClick={() => onSave(form)}>
+          {saving ? '등록 중…' : '등록'}
+        </Button>
+        <Button variant="ghost" onClick={onCancel}>
+          취소
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/frontend/src/screens/work/MessagePage.tsx b/src/frontend/src/screens/work/MessagePage.tsx
new file mode 100644
index 0000000..4a309b7
--- /dev/null
+++ b/src/frontend/src/screens/work/MessagePage.tsx
@@ -0,0 +1,258 @@
+/*
+ * SCR-41 쪽지 (message). 참조: UIWS message/*.
+ * 3-패널: 폴더 레일(받은/보낸) · 목록 · 읽기/작성. 읽음 처리·수신자 태그 입력.
+ * 백엔드: /api/work/messages (inbox·sent·send·read·delete).
+ * ★ 갭: 부서 트리 사용자 디렉터리 엔드포인트 부재 → 수신자는 사용자 ID 직접 입력. 07_work_api_gaps.md 기록.
+ */
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { messageApi } from '../../api/endpoints';
+import type { MessageDto, MessageSendRequest } from '../../api/types';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconClose, IconPlus } from '../../components/ui/icons';
+import { errMessage, fmtDateTime, timeAgo, useToast } from './workShared';
+import './work.css';
+
+type Folder = 'inbox' | 'sent';
+
+export function MessagePage() {
+  const qc = useQueryClient();
+  const { show, node: toast } = useToast();
+  const [folder, setFolder] = useState<Folder>('inbox');
+  const [selected, setSelected] = useState<MessageDto | null>(null);
+  const [composing, setComposing] = useState(false);
+
+  const unreadQ = useQuery({ queryKey: ['msg-unread'], queryFn: () => messageApi.unreadCount() });
+  const listQ = useQuery({
+    queryKey: ['messages', folder],
+    queryFn: () => (folder === 'inbox' ? messageApi.inbox(0, 50) : messageApi.sent(0, 50)),
+  });
+
+  const readM = useMutation({
+    mutationFn: (id: string) => messageApi.read(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['messages', 'inbox'] });
+      qc.invalidateQueries({ queryKey: ['msg-unread'] });
+    },
+  });
+  const delM = useMutation({
+    mutationFn: (id: string) => messageApi.remove(id),
+    onSuccess: () => {
+      show('삭제되었습니다.');
+      setSelected(null);
+      qc.invalidateQueries({ queryKey: ['messages'] });
+      qc.invalidateQueries({ queryKey: ['msg-unread'] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+  const sendM = useMutation({
+    mutationFn: (body: MessageSendRequest) => messageApi.send(body),
+    onSuccess: () => {
+      show('쪽지를 보냈습니다.');
+      setComposing(false);
+      qc.invalidateQueries({ queryKey: ['messages', 'sent'] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  function openMessage(m: MessageDto) {
+    setSelected(m);
+    if (folder === 'inbox' && !m.readAt) readM.mutate(m.id);
+  }
+
+  const rows = listQ.data?.items ?? [];
+  const unread = unreadQ.data?.unread ?? 0;
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">쪽지</h1>
+          <p className="kx-work__subtitle">행사 내 커뮤니케이션 · 주최자↔참가↔업체↔홀매니저</p>
+        </div>
+        <Button leadingIcon={<IconPlus size={16} />} onClick={() => setComposing(true)}>
+          쪽지 쓰기
+        </Button>
+      </header>
+
+      <div className="kx-msg">
+        {/* 폴더 레일 */}
+        <nav className="kx-msg__rail" aria-label="쪽지 폴더">
+          <button
+            className={`kx-msg__rail-btn ${folder === 'inbox' ? 'is-active' : ''}`}
+            onClick={() => {
+              setFolder('inbox');
+              setSelected(null);
+            }}
+          >
+            받은 쪽지
+            {unread > 0 && <span className="kx-msg__rail-count tnum">{unread}</span>}
+          </button>
+          <button
+            className={`kx-msg__rail-btn ${folder === 'sent' ? 'is-active' : ''}`}
+            onClick={() => {
+              setFolder('sent');
+              setSelected(null);
+            }}
+          >
+            보낸 쪽지
+          </button>
+        </nav>
+
+        {/* 목록 */}
+        <section className="kx-msg__list" aria-label={folder === 'inbox' ? '받은 쪽지 목록' : '보낸 쪽지 목록'}>
+          {listQ.isLoading &&
+            Array.from({ length: 6 }).map((_, i) => (
+              <div className="kx-msg__item" key={i}>
+                <Skeleton height={16} width="60%" />
+                <Skeleton height={14} width="90%" />
+              </div>
+            ))}
+          {listQ.isError && (
+            <ErrorState message={errMessage(listQ.error)} onRetry={() => listQ.refetch()} />
+          )}
+          {!listQ.isLoading && !listQ.isError && rows.length === 0 && (
+            <EmptyState
+              title={folder === 'inbox' ? '받은 쪽지가 없습니다' : '보낸 쪽지가 없습니다'}
+            />
+          )}
+          {rows.map((m) => {
+            const unreadItem = folder === 'inbox' && !m.readAt;
+            return (
+              <div
+                key={m.id}
+                className={`kx-msg__item ${selected?.id === m.id ? 'is-selected' : ''} ${
+                  unreadItem ? 'is-unread' : ''
+                }`}
+                onClick={() => openMessage(m)}
+              >
+                <div className="kx-msg__item-top">
+                  <span className="kx-msg__item-sender">
+                    {unreadItem && <span className="kx-msg__unread-dot" aria-label="안읽음" />}{' '}
+                    {folder === 'inbox' ? m.senderName : m.title || '(제목 없음)'}
+                  </span>
+                  <span className="kx-msg__item-time">{timeAgo(m.createdAt)}</span>
+                </div>
+                <span className="kx-msg__item-title">{m.title || '(제목 없음)'}</span>
+              </div>
+            );
+          })}
+        </section>
+
+        {/* 읽기/작성 */}
+        <section className="kx-msg__read" aria-label="쪽지 내용">
+          {composing ? (
+            <ComposeForm
+              onCancel={() => setComposing(false)}
+              onSend={(b) => sendM.mutate(b)}
+              sending={sendM.isPending}
+            />
+          ) : selected ? (
+            <>
+              <div className="kx-detail__head">
+                <h2 className="kx-detail__title">{selected.title || '(제목 없음)'}</h2>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    if (window.confirm('이 쪽지를 삭제할까요?')) delM.mutate(selected.id);
+                  }}
+                >
+                  삭제
+                </Button>
+              </div>
+              <div className="kx-detail__meta">
+                <span>보낸이: {selected.senderName}</span>
+                <span>· {fmtDateTime(selected.createdAt)}</span>
+                {selected.recvType && <span>· {selected.recvType === 'REF' ? '참조' : '수신'}</span>}
+              </div>
+              <div className="kx-detail__body">{selected.content || '(내용 없음)'}</div>
+            </>
+          ) : (
+            <EmptyState title="쪽지를 선택하세요" description="목록에서 쪽지를 선택하면 내용이 표시됩니다." />
+          )}
+        </section>
+      </div>
+      {toast}
+    </div>
+  );
+}
+
+function ComposeForm({
+  onCancel,
+  onSend,
+  sending,
+}: {
+  onCancel: () => void;
+  onSend: (b: MessageSendRequest) => void;
+  sending: boolean;
+}) {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [recipients, setRecipients] = useState<string[]>([]);
+  const [entry, setEntry] = useState('');
+
+  function addRecipient() {
+    const v = entry.trim();
+    if (v && !recipients.includes(v)) setRecipients([...recipients, v]);
+    setEntry('');
+  }
+
+  return (
+    <>
+      <div className="kx-detail__head">
+        <h2 className="kx-detail__title">쪽지 쓰기</h2>
+      </div>
+      <div className="kx-field">
+        <span className="kx-label">받는 사람 (사용자 ID)</span>
+        <div className="kx-tags">
+          {recipients.map((r) => (
+            <span className="kx-tag" key={r}>
+              {r}
+              <button
+                onClick={() => setRecipients(recipients.filter((x) => x !== r))}
+                aria-label={`${r} 제거`}
+              >
+                <IconClose size={12} />
+              </button>
+            </span>
+          ))}
+          <input
+            value={entry}
+            placeholder="ID 입력 후 Enter"
+            onChange={(e) => setEntry(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ',') {
+                e.preventDefault();
+                addRecipient();
+              }
+            }}
+          />
+        </div>
+      </div>
+      <label className="kx-field">
+        <span className="kx-label">제목</span>
+        <input className="kx-input" value={title} onChange={(e) => setTitle(e.target.value)} />
+      </label>
+      <label className="kx-field">
+        <span className="kx-label">내용</span>
+        <textarea
+          className="kx-textarea"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+        />
+      </label>
+      <div className="kx-detail__actions">
+        <Button
+          disabled={recipients.length === 0 || sending}
+          onClick={() => onSend({ title, content, recipientIds: recipients })}
+        >
+          {sending ? '보내는 중…' : '보내기'}
+        </Button>
+        <Button variant="ghost" onClick={onCancel}>
+          취소
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/frontend/src/screens/work/MyPage.tsx b/src/frontend/src/screens/work/MyPage.tsx
new file mode 100644
index 0000000..1f22608
--- /dev/null
+++ b/src/frontend/src/screens/work/MyPage.tsx
@@ -0,0 +1,243 @@
+/*
+ * SCR-48 마이페이지·환경설정. 참조: UIWS auth/MyProfilePage.
+ * 좌: 탭 레일(프로필·보안·알림설정·테마/언어) / 우: 설정 폼.
+ * 백엔드: /api/auth/me·/api/auth/otp/status. 2FA는 기존 /otp-setup 화면으로 연결(중복 구현 금지).
+ * ★ 갭: 프로필 수정·알림 규칙·환경설정 저장 엔드포인트 부재 → 테마/언어는 클라이언트 로컬 저장. 07_work_api_gaps.md 기록.
+ */
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { authApi } from '../../api/endpoints';
+import { useAuthStore } from '../../store/authStore';
+import { Button } from '../../components/ui/Button';
+import { RoleBadge } from '../../components/ui/Badge';
+import { ErrorState, Skeleton } from '../../components/ui/States';
+import { IconCheckCircle } from '../../components/ui/icons';
+import { useToast } from './workShared';
+import './work.css';
+
+type Tab = 'profile' | 'security' | 'notify' | 'theme';
+const TABS: { v: Tab; l: string }[] = [
+  { v: 'profile', l: '프로필' },
+  { v: 'security', l: '보안(2차 인증)' },
+  { v: 'notify', l: '알림 설정' },
+  { v: 'theme', l: '테마·언어' },
+];
+
+const PREF_KEY = 'kintex.prefs';
+interface Prefs {
+  theme: 'light' | 'dark';
+  lang: 'ko' | 'en' | 'zh' | 'ja';
+  notifyDeadline: boolean;
+  notifyApproval: boolean;
+  notifyPayment: boolean;
+}
+const DEFAULT_PREFS: Prefs = {
+  theme: 'light',
+  lang: 'ko',
+  notifyDeadline: true,
+  notifyApproval: true,
+  notifyPayment: true,
+};
+
+function loadPrefs(): Prefs {
+  try {
+    return { ...DEFAULT_PREFS, ...JSON.parse(localStorage.getItem(PREF_KEY) ?? '{}') };
+  } catch {
+    return DEFAULT_PREFS;
+  }
+}
+
+export function MyPage() {
+  const { show, node: toast } = useToast();
+  const storeUser = useAuthStore((s) => s.user);
+  const workspaces = useAuthStore((s) => s.workspaces);
+  const [tab, setTab] = useState<Tab>('profile');
+  const [prefs, setPrefs] = useState<Prefs>(loadPrefs);
+
+  const meQ = useQuery({ queryKey: ['me'], queryFn: () => authApi.me() });
+  const otpQ = useQuery({ queryKey: ['otp-status'], queryFn: () => authApi.otpStatus() });
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', prefs.theme);
+    document.documentElement.setAttribute('lang', prefs.lang);
+  }, [prefs.theme, prefs.lang]);
+
+  function savePrefs(next: Prefs) {
+    setPrefs(next);
+    localStorage.setItem(PREF_KEY, JSON.stringify(next));
+    show('설정이 저장되었습니다.');
+  }
+
+  const displayName = meQ.data?.displayName ?? storeUser?.displayName ?? '사용자';
+  const roles = meQ.data?.eventRoles ? Object.values(meQ.data.eventRoles) : [];
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">마이페이지</h1>
+          <p className="kx-work__subtitle">프로필 · 보안 · 알림 · 환경설정</p>
+        </div>
+      </header>
+
+      <div className="kx-my">
+        <nav className="kx-my__rail" aria-label="설정 탭">
+          {TABS.map((t) => (
+            <button
+              key={t.v}
+              className={`kx-my__rail-btn ${tab === t.v ? 'is-active' : ''}`}
+              onClick={() => setTab(t.v)}
+            >
+              {t.l}
+            </button>
+          ))}
+        </nav>
+
+        <section className="kx-card" aria-label="설정 내용">
+          {/* 프로필 */}
+          {tab === 'profile' && (
+            <>
+              <div className="kx-card__head">
+                <h2>프로필</h2>
+              </div>
+              {meQ.isLoading ? (
+                <Skeleton height={80} />
+              ) : meQ.isError ? (
+                <ErrorState onRetry={() => meQ.refetch()} />
+              ) : (
+                <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
+                  <span className="kx-my__avatar">{displayName[0] ?? '·'}</span>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                    <strong style={{ fontSize: 18 }}>{displayName}</strong>
+                    <span className="kx-list-table__muted">사용자 ID: {meQ.data?.userId}</span>
+                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                      {meQ.data?.hallManager && <span className="kx-pill kx-pill--info">홀매니저</span>}
+                      {roles.map((r, i) => (
+                        <RoleBadge key={i} role={r} />
+                      ))}
+                    </div>
+                    <span className="kx-list-table__muted">
+                      참여 행사 {workspaces.length}건
+                    </span>
+                  </div>
+                </div>
+              )}
+              <p className="kx-list-table__muted" style={{ marginTop: 12, fontSize: 12 }}>
+                프로필 정보 수정은 준비 중입니다.
+              </p>
+            </>
+          )}
+
+          {/* 보안 (2FA) */}
+          {tab === 'security' && (
+            <>
+              <div className="kx-card__head">
+                <h2>2차 인증(OTP)</h2>
+              </div>
+              {otpQ.isLoading ? (
+                <Skeleton height={60} />
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    {otpQ.data?.otpEnabled ? (
+                      <>
+                        <span style={{ color: 'var(--color-success)', display: 'inline-flex' }}>
+                          <IconCheckCircle size={20} />
+                        </span>
+                        <span>2차 인증이 활성화되어 있습니다.</span>
+                      </>
+                    ) : (
+                      <span className="kx-pill kx-pill--warn">2차 인증 미설정</span>
+                    )}
+                  </div>
+                  <p className="kx-list-table__muted" style={{ fontSize: 13 }}>
+                    Google Authenticator 등 TOTP 앱으로 로그인 2단계 인증을 사용합니다.
+                    등록·재설정은 전용 화면에서 진행합니다.
+                  </p>
+                  <div>
+                    <Link to="/otp-setup">
+                      <Button>{otpQ.data?.otpEnabled ? '2차 인증 재설정' : '2차 인증 등록'}</Button>
+                    </Link>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* 알림 설정 */}
+          {tab === 'notify' && (
+            <>
+              <div className="kx-card__head">
+                <h2>알림 설정</h2>
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                {(
+                  [
+                    ['notifyDeadline', '마감 D-데이 알림'],
+                    ['notifyApproval', '승인·검수 알림'],
+                    ['notifyPayment', '결제·정산 알림'],
+                  ] as const
+                ).map(([key, label]) => (
+                  <label className="kx-switch" key={key}>
+                    <input
+                      type="checkbox"
+                      checked={prefs[key]}
+                      onChange={(e) => savePrefs({ ...prefs, [key]: e.target.checked })}
+                    />
+                    <span>{label}</span>
+                  </label>
+                ))}
+                <p className="kx-list-table__muted" style={{ fontSize: 12 }}>
+                  현재 알림 설정은 이 기기에 저장됩니다. 서버 동기화는 준비 중입니다.
+                </p>
+              </div>
+            </>
+          )}
+
+          {/* 테마·언어 */}
+          {tab === 'theme' && (
+            <>
+              <div className="kx-card__head">
+                <h2>테마·언어</h2>
+              </div>
+              <div className="kx-formgrid">
+                <label className="kx-field">
+                  <span className="kx-label">테마</span>
+                  <div className="kx-seg" role="tablist">
+                    {(['light', 'dark'] as const).map((t) => (
+                      <button
+                        key={t}
+                        className={`kx-seg__btn ${prefs.theme === t ? 'is-active' : ''}`}
+                        onClick={() => savePrefs({ ...prefs, theme: t })}
+                      >
+                        {t === 'light' ? '라이트' : '다크'}
+                      </button>
+                    ))}
+                  </div>
+                </label>
+                <label className="kx-field">
+                  <span className="kx-label">언어</span>
+                  <select
+                    className="kx-select"
+                    value={prefs.lang}
+                    onChange={(e) => savePrefs({ ...prefs, lang: e.target.value as Prefs['lang'] })}
+                  >
+                    <option value="ko">한국어</option>
+                    <option value="en">English</option>
+                    <option value="zh">中文</option>
+                    <option value="ja">日本語</option>
+                  </select>
+                </label>
+              </div>
+              <p className="kx-list-table__muted" style={{ marginTop: 12, fontSize: 12 }}>
+                테마·언어는 이 기기에 저장됩니다. 다국어 리소스는 순차 적용 예정입니다.
+              </p>
+            </>
+          )}
+        </section>
+      </div>
+      {toast}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/work/NoticePage.tsx b/src/frontend/src/screens/work/NoticePage.tsx
new file mode 100644
index 0000000..3ad5387
--- /dev/null
+++ b/src/frontend/src/screens/work/NoticePage.tsx
@@ -0,0 +1,255 @@
+/*
+ * SCR-42 공지 (notice). 참조: UIWS notice/*.
+ * 고정 공지(상단) + 검색/목록 테이블 + 상세. 쓰기=매니저(백엔드 requireManager) → 홀매니저만 작성 UI 노출.
+ * 백엔드: /api/work/notices.
+ */
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { noticeApi } from '../../api/endpoints';
+import type { NoticeDto, NoticeSaveRequest } from '../../api/types';
+import { useAuthStore } from '../../store/authStore';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconPlus, IconSearch } from '../../components/ui/icons';
+import { errMessage, fmtDateTime, useToast } from './workShared';
+import './work.css';
+
+export function NoticePage() {
+  const qc = useQueryClient();
+  const { show, node: toast } = useToast();
+  const isManager = useAuthStore((s) => s.user?.hallManager ?? false);
+  const [keyword, setKeyword] = useState('');
+  const [term, setTerm] = useState('');
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [composing, setComposing] = useState(false);
+
+  const listQ = useQuery({
+    queryKey: ['notices', term],
+    queryFn: () => noticeApi.list({ keyword: term || undefined, page: 0, size: 50 }),
+  });
+  const detailQ = useQuery({
+    queryKey: ['notice', selectedId],
+    queryFn: () => noticeApi.get(selectedId as string),
+    enabled: !!selectedId && !composing,
+  });
+
+  const saveM = useMutation({
+    mutationFn: (body: NoticeSaveRequest) => noticeApi.create(body),
+    onSuccess: (n: NoticeDto) => {
+      show('공지가 등록되었습니다.');
+      setComposing(false);
+      setSelectedId(n.id);
+      qc.invalidateQueries({ queryKey: ['notices'] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+  const delM = useMutation({
+    mutationFn: (id: string) => noticeApi.remove(id),
+    onSuccess: () => {
+      show('삭제되었습니다.');
+      setSelectedId(null);
+      qc.invalidateQueries({ queryKey: ['notices'] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  const rows = listQ.data?.items ?? [];
+  const pinned = rows.filter((r) => r.pinned);
+  const normal = rows.filter((r) => !r.pinned);
+
+  const renderRow = (r: NoticeDto) => (
+    <tr
+      key={r.id}
+      className={selectedId === r.id ? 'is-selected' : ''}
+      onClick={() => {
+        setComposing(false);
+        setSelectedId(r.id);
+      }}
+    >
+      <td>
+        {r.pinned && <span className="kx-pill kx-pill--danger" style={{ marginRight: 6 }}>중요</span>}
+        <span className="kx-list-table__title">{r.title}</span>
+        {r.category && <span className="kx-list-table__muted"> · {r.category}</span>}
+      </td>
+      <td className="kx-list-table__muted">{r.authorName}</td>
+      <td className="kx-list-table__muted kx-num">{fmtDateTime(r.publishedAt ?? r.createdAt)}</td>
+      <td className="kx-num">{r.viewCount ?? 0}</td>
+    </tr>
+  );
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">공지</h1>
+          <p className="kx-work__subtitle">킨텍스·행사 공지 · 중요 공지 상단 고정</p>
+        </div>
+        {isManager && (
+          <Button leadingIcon={<IconPlus size={16} />} onClick={() => setComposing(true)}>
+            공지 작성
+          </Button>
+        )}
+      </header>
+
+      <div className="kx-split">
+        <section className="kx-card" aria-label="공지 목록">
+          <div className="kx-filterbar">
+            <div className="kx-search__box" style={{ height: 40, flex: 1 }}>
+              <IconSearch size={18} />
+              <input
+                placeholder="공지 검색…"
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && setTerm(keyword)}
+              />
+            </div>
+            <Button variant="secondary" onClick={() => setTerm(keyword)}>
+              검색
+            </Button>
+          </div>
+
+          <div className="kx-table-scroll kx-scroll-70">
+            <table className="kx-list-table">
+              <thead>
+                <tr>
+                  <th>제목</th>
+                  <th style={{ width: 110 }}>작성자</th>
+                  <th style={{ width: 140 }}>게시일</th>
+                  <th style={{ width: 70 }} className="kx-num">
+                    조회
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {listQ.isLoading &&
+                  Array.from({ length: 6 }).map((_, i) => (
+                    <tr key={i}>
+                      <td colSpan={4}>
+                        <Skeleton height={20} />
+                      </td>
+                    </tr>
+                  ))}
+                {!listQ.isLoading && pinned.map(renderRow)}
+                {!listQ.isLoading && normal.map(renderRow)}
+              </tbody>
+            </table>
+          </div>
+
+          {listQ.isError && (
+            <ErrorState message={errMessage(listQ.error)} onRetry={() => listQ.refetch()} />
+          )}
+          {!listQ.isLoading && !listQ.isError && rows.length === 0 && (
+            <EmptyState title="등록된 공지가 없습니다" />
+          )}
+        </section>
+
+        <aside className="kx-detail" aria-label="공지 상세">
+          {composing ? (
+            <NoticeCompose
+              saving={saveM.isPending}
+              onCancel={() => setComposing(false)}
+              onSave={(b) => saveM.mutate(b)}
+            />
+          ) : selectedId ? (
+            detailQ.isLoading ? (
+              <>
+                <Skeleton height={24} width="70%" />
+                <Skeleton height={16} />
+                <Skeleton height={120} />
+              </>
+            ) : detailQ.isError ? (
+              <ErrorState message={errMessage(detailQ.error)} onRetry={() => detailQ.refetch()} />
+            ) : detailQ.data ? (
+              <>
+                <div className="kx-detail__head">
+                  <h2 className="kx-detail__title">
+                    {detailQ.data.pinned && (
+                      <span className="kx-pill kx-pill--danger" style={{ marginRight: 6 }}>
+                        중요
+                      </span>
+                    )}
+                    {detailQ.data.title}
+                  </h2>
+                  {isManager && (
+                    <Button
+                      variant="danger"
+                      onClick={() => {
+                        if (window.confirm('이 공지를 삭제할까요?')) delM.mutate(detailQ.data!.id);
+                      }}
+                    >
+                      삭제
+                    </Button>
+                  )}
+                </div>
+                <div className="kx-detail__meta">
+                  <span>{detailQ.data.authorName}</span>
+                  <span>· {fmtDateTime(detailQ.data.publishedAt ?? detailQ.data.createdAt)}</span>
+                  <span>· 조회 {detailQ.data.viewCount ?? 0}</span>
+                </div>
+                <div className="kx-detail__body">{detailQ.data.content || '(내용 없음)'}</div>
+              </>
+            ) : null
+          ) : (
+            <EmptyState title="공지를 선택하세요" description="목록에서 공지를 선택하면 내용이 표시됩니다." />
+          )}
+        </aside>
+      </div>
+      {toast}
+    </div>
+  );
+}
+
+function NoticeCompose({
+  onCancel,
+  onSave,
+  saving,
+}: {
+  onCancel: () => void;
+  onSave: (b: NoticeSaveRequest) => void;
+  saving: boolean;
+}) {
+  const [title, setTitle] = useState('');
+  const [category, setCategory] = useState('일반');
+  const [content, setContent] = useState('');
+  const [pinned, setPinned] = useState(false);
+  return (
+    <>
+      <div className="kx-detail__head">
+        <h2 className="kx-detail__title">공지 작성</h2>
+      </div>
+      <label className="kx-field">
+        <span className="kx-label">제목 *</span>
+        <input className="kx-input" value={title} onChange={(e) => setTitle(e.target.value)} />
+      </label>
+      <label className="kx-field">
+        <span className="kx-label">분류</span>
+        <select className="kx-select" value={category} onChange={(e) => setCategory(e.target.value)}>
+          {['일반', '행사', '규정', '시스템'].map((c) => (
+            <option key={c} value={c}>
+              {c}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="kx-field">
+        <span className="kx-label">내용</span>
+        <textarea className="kx-textarea" value={content} onChange={(e) => setContent(e.target.value)} />
+      </label>
+      <label className="kx-switch">
+        <input type="checkbox" checked={pinned} onChange={(e) => setPinned(e.target.checked)} />
+        <span>중요 공지로 상단 고정</span>
+      </label>
+      <div className="kx-detail__actions">
+        <Button
+          disabled={!title.trim() || saving}
+          onClick={() => onSave({ title, category, content, pinned })}
+        >
+          {saving ? '등록 중…' : '등록'}
+        </Button>
+        <Button variant="ghost" onClick={onCancel}>
+          취소
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/frontend/src/screens/work/NotificationCenterPage.tsx b/src/frontend/src/screens/work/NotificationCenterPage.tsx
new file mode 100644
index 0000000..3201953
--- /dev/null
+++ b/src/frontend/src/screens/work/NotificationCenterPage.tsx
@@ -0,0 +1,172 @@
+/*
+ * SCR-47 알림센터 (notification). 참조: UIWS NotificationsPage.
+ * 카테고리 칩 + 시간순 목록 + 읽음/모두읽음 + 딥링크 + 삭제.
+ * 백엔드: /api/work/notifications (list·unread-count·read·read-all·delete).
+ */
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { notificationApi } from '../../api/endpoints';
+import type { NotificationDto } from '../../api/types';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconArrowRight, IconBell, IconCheck } from '../../components/ui/icons';
+import { errMessage, timeAgo, useToast } from './workShared';
+import './work.css';
+
+// 알림 유형 라벨(백엔드 notiType 원문 매핑, 미지정은 원문 표기).
+const TYPE_LABEL: Record<string, string> = {
+  DEADLINE: '마감',
+  AWARD: '낙찰',
+  APPROVAL: '승인',
+  PAYMENT: '결제',
+  SYSTEM: '시스템',
+};
+
+export function NotificationCenterPage() {
+  const qc = useQueryClient();
+  const navigate = useNavigate();
+  const { show, node: toast } = useToast();
+  const [category, setCategory] = useState<string>('ALL');
+
+  const listQ = useQuery({
+    queryKey: ['notifications-center'],
+    queryFn: () => notificationApi.list({ page: 0, size: 100 }),
+  });
+
+  const readM = useMutation({
+    mutationFn: (id: string) => notificationApi.read(id),
+    onSuccess: () => invalidate(),
+  });
+  const readAllM = useMutation({
+    mutationFn: () => notificationApi.readAll(),
+    onSuccess: () => {
+      show('모두 읽음 처리했습니다.');
+      invalidate();
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+  const delM = useMutation({
+    mutationFn: (id: string) => notificationApi.remove(id),
+    onSuccess: () => invalidate(),
+    onError: (e) => show(errMessage(e)),
+  });
+
+  function invalidate() {
+    qc.invalidateQueries({ queryKey: ['notifications-center'] });
+    qc.invalidateQueries({ queryKey: ['notif-unread'] });
+  }
+
+  const items = listQ.data?.items ?? [];
+  const categories = useMemo(() => {
+    const present = Array.from(new Set(items.map((n) => n.notiType)));
+    return ['ALL', ...present];
+  }, [items]);
+  const filtered = category === 'ALL' ? items : items.filter((n) => n.notiType === category);
+  const unreadCount = items.filter((n) => !n.readAt).length;
+
+  function openItem(n: NotificationDto) {
+    if (!n.readAt) readM.mutate(n.id);
+    if (n.link) {
+      if (/^https?:\/\//.test(n.link)) window.open(n.link, '_blank', 'noopener');
+      else navigate(n.link);
+    }
+  }
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">알림</h1>
+          <p className="kx-work__subtitle">
+            마감·낙찰·승인·결제·시스템 알림 {unreadCount > 0 && `· 안읽음 ${unreadCount}`}
+          </p>
+        </div>
+        <div className="kx-work__head-actions">
+          <Button
+            variant="secondary"
+            leadingIcon={<IconCheck size={16} />}
+            disabled={unreadCount === 0 || readAllM.isPending}
+            onClick={() => readAllM.mutate()}
+          >
+            모두 읽음
+          </Button>
+        </div>
+      </header>
+
+      <div className="kx-noti__chips">
+        {categories.map((c) => (
+          <button
+            key={c}
+            className={`kx-chip ${category === c ? 'is-active' : ''}`}
+            onClick={() => setCategory(c)}
+          >
+            {c === 'ALL' ? '전체' : (TYPE_LABEL[c] ?? c)}
+          </button>
+        ))}
+      </div>
+
+      <section className="kx-card" style={{ padding: 0 }} aria-label="알림 목록">
+        {listQ.isLoading &&
+          Array.from({ length: 6 }).map((_, i) => (
+            <div className="kx-noti__item" key={i}>
+              <Skeleton height={32} width={32} radius={16} />
+              <div style={{ flex: 1 }}>
+                <Skeleton height={16} width="40%" />
+                <Skeleton height={14} width="70%" />
+              </div>
+            </div>
+          ))}
+        {listQ.isError && (
+          <ErrorState message={errMessage(listQ.error)} onRetry={() => listQ.refetch()} />
+        )}
+        {!listQ.isLoading && !listQ.isError && filtered.length === 0 && (
+          <EmptyState title="새 알림이 없습니다" icon={<IconBell size={28} />} />
+        )}
+        {filtered.map((n) => (
+          <div key={n.id} className={`kx-noti__item ${!n.readAt ? 'is-unread' : ''}`}>
+            <span className="kx-noti__icon">
+              <IconBell size={16} />
+            </span>
+            <div
+              className="kx-noti__body"
+              style={{ cursor: n.link ? 'pointer' : 'default' }}
+              onClick={() => openItem(n)}
+            >
+              <div className="kx-noti__title">
+                <span className="kx-pill kx-pill--info" style={{ marginRight: 6 }}>
+                  {TYPE_LABEL[n.notiType] ?? n.notiType}
+                </span>
+                {n.title}
+              </div>
+              {n.message && <div className="kx-noti__desc">{n.message}</div>}
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
+              <span className="kx-noti__time">{timeAgo(n.createdAt)}</span>
+              <div style={{ display: 'flex', gap: 6 }}>
+                {n.link && (
+                  <button
+                    className="kx-tag"
+                    onClick={() => openItem(n)}
+                    aria-label="바로가기"
+                  >
+                    바로가기 <IconArrowRight size={12} />
+                  </button>
+                )}
+                <button className="kx-tag" onClick={() => delM.mutate(n.id)} aria-label="삭제">
+                  삭제
+                </button>
+              </div>
+            </div>
+            {!n.readAt && <span className="kx-noti__dot" aria-label="안읽음" />}
+          </div>
+        ))}
+      </section>
+
+      <p className="kx-list-table__muted" style={{ fontSize: 12 }}>
+        알림 규칙 설정은 마이페이지 > 알림 설정에서 관리합니다.
+      </p>
+      {toast}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/work/OpinionPage.tsx b/src/frontend/src/screens/work/OpinionPage.tsx
new file mode 100644
index 0000000..69344cc
--- /dev/null
+++ b/src/frontend/src/screens/work/OpinionPage.tsx
@@ -0,0 +1,284 @@
+/*
+ * SCR-43 의견접수 (opinion). 참조: UIWS opinion/*.
+ * 좌: 접수 폼 + 내 접수 목록(상태 배지) / 우: 상세(답변 스레드).
+ * 백엔드: /api/work/opinions. 상태변경·답변=매니저(requireManager).
+ */
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { opinionApi } from '../../api/endpoints';
+import type { OpinionDto, OpinionSaveRequest } from '../../api/types';
+import { useAuthStore } from '../../store/authStore';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { StatusPill, errMessage, fmtDateTime, useToast } from './workShared';
+import './work.css';
+
+const CATEGORIES = ['규정 문의', '개선 제안', '불편 신고', '기타'];
+const STATUS_FLOW = ['접수', '검토중', '답변완료'];
+
+export function OpinionPage() {
+  const qc = useQueryClient();
+  const { show, node: toast } = useToast();
+  const isManager = useAuthStore((s) => s.user?.hallManager ?? false);
+  const [statusFilter, setStatusFilter] = useState('');
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const [form, setForm] = useState<OpinionSaveRequest>({
+    category: CATEGORIES[0],
+    title: '',
+    content: '',
+    secretYn: 'N',
+  });
+  const [comment, setComment] = useState('');
+
+  const listQ = useQuery({
+    queryKey: ['opinions', statusFilter],
+    queryFn: () => opinionApi.list({ status: statusFilter || undefined, page: 0, size: 50 }),
+  });
+  const detailQ = useQuery({
+    queryKey: ['opinion', selectedId],
+    queryFn: () => opinionApi.get(selectedId as string),
+    enabled: !!selectedId,
+  });
+
+  const createM = useMutation({
+    mutationFn: (b: OpinionSaveRequest) => opinionApi.create(b),
+    onSuccess: () => {
+      show('의견이 접수되었습니다.');
+      setForm({ category: CATEGORIES[0], title: '', content: '', secretYn: 'N' });
+      qc.invalidateQueries({ queryKey: ['opinions'] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+  const statusM = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: string }) => opinionApi.changeStatus(id, value),
+    onSuccess: () => {
+      show('상태가 변경되었습니다.');
+      qc.invalidateQueries({ queryKey: ['opinions'] });
+      qc.invalidateQueries({ queryKey: ['opinion', selectedId] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+  const commentM = useMutation({
+    mutationFn: ({ id, content }: { id: string; content: string }) => opinionApi.comment(id, content),
+    onSuccess: () => {
+      show('답변이 등록되었습니다.');
+      setComment('');
+      qc.invalidateQueries({ queryKey: ['opinion', selectedId] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  const rows = listQ.data?.items ?? [];
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">의견접수</h1>
+          <p className="kx-work__subtitle">고객의 소리 · 규정 문의 · 개선 제안</p>
+        </div>
+      </header>
+
+      <div className="kx-split">
+        {/* 좌: 접수 폼 + 목록 */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <section className="kx-card" aria-label="의견 접수">
+            <div className="kx-card__head">
+              <h2>의견 접수</h2>
+            </div>
+            <div className="kx-formgrid">
+              <label className="kx-field">
+                <span className="kx-label">분류</span>
+                <select
+                  className="kx-select"
+                  value={form.category ?? ''}
+                  onChange={(e) => setForm({ ...form, category: e.target.value })}
+                >
+                  {CATEGORIES.map((c) => (
+                    <option key={c} value={c}>
+                      {c}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="kx-switch" style={{ alignSelf: 'end' }}>
+                <input
+                  type="checkbox"
+                  checked={form.secretYn === 'Y'}
+                  onChange={(e) => setForm({ ...form, secretYn: e.target.checked ? 'Y' : 'N' })}
+                />
+                <span>비공개(작성자·매니저만)</span>
+              </label>
+              <label className="kx-field kx-field--full">
+                <span className="kx-label">제목 *</span>
+                <input
+                  className="kx-input"
+                  value={form.title}
+                  onChange={(e) => setForm({ ...form, title: e.target.value })}
+                />
+              </label>
+              <label className="kx-field kx-field--full">
+                <span className="kx-label">내용</span>
+                <textarea
+                  className="kx-textarea"
+                  value={form.content ?? ''}
+                  onChange={(e) => setForm({ ...form, content: e.target.value })}
+                />
+              </label>
+            </div>
+            <div className="kx-detail__actions" style={{ marginTop: 12 }}>
+              <Button disabled={!form.title.trim() || createM.isPending} onClick={() => createM.mutate(form)}>
+                {createM.isPending ? '제출 중…' : '제출'}
+              </Button>
+            </div>
+          </section>
+
+          <section className="kx-card" aria-label="접수 목록">
+            <div className="kx-card__head">
+              <h2>접수 내역</h2>
+              <select
+                className="kx-select"
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value)}
+              >
+                <option value="">전체 상태</option>
+                {STATUS_FLOW.map((s) => (
+                  <option key={s} value={s}>
+                    {s}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="kx-table-scroll">
+              <table className="kx-list-table">
+                <thead>
+                  <tr>
+                    <th>제목</th>
+                    <th style={{ width: 96 }}>분류</th>
+                    <th style={{ width: 96 }}>상태</th>
+                    <th style={{ width: 120 }}>접수일</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {listQ.isLoading &&
+                    Array.from({ length: 4 }).map((_, i) => (
+                      <tr key={i}>
+                        <td colSpan={4}>
+                          <Skeleton height={20} />
+                        </td>
+                      </tr>
+                    ))}
+                  {!listQ.isLoading &&
+                    rows.map((r: OpinionDto) => (
+                      <tr
+                        key={r.id}
+                        className={selectedId === r.id ? 'is-selected' : ''}
+                        onClick={() => setSelectedId(r.id)}
+                      >
+                        <td>
+                          <span className="kx-list-table__title">{r.title}</span>
+                          {r.secretYn === 'Y' && (
+                            <span className="kx-list-table__muted"> · 비공개</span>
+                          )}
+                        </td>
+                        <td className="kx-list-table__muted">{r.category ?? '-'}</td>
+                        <td>
+                          <StatusPill value={r.status} />
+                        </td>
+                        <td className="kx-list-table__muted kx-num">{fmtDateTime(r.createdAt)}</td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </div>
+            {listQ.isError && (
+              <ErrorState message={errMessage(listQ.error)} onRetry={() => listQ.refetch()} />
+            )}
+            {!listQ.isLoading && !listQ.isError && rows.length === 0 && (
+              <EmptyState title="접수된 의견이 없습니다" />
+            )}
+          </section>
+        </div>
+
+        {/* 우: 상세 */}
+        <aside className="kx-detail" aria-label="의견 상세">
+          {!selectedId ? (
+            <EmptyState title="의견을 선택하세요" description="목록에서 항목을 선택하면 상세·답변이 표시됩니다." />
+          ) : detailQ.isLoading ? (
+            <>
+              <Skeleton height={24} width="70%" />
+              <Skeleton height={80} />
+            </>
+          ) : detailQ.isError ? (
+            <ErrorState message={errMessage(detailQ.error)} onRetry={() => detailQ.refetch()} />
+          ) : detailQ.data ? (
+            <>
+              <div className="kx-detail__head">
+                <h2 className="kx-detail__title">{detailQ.data.opinion.title}</h2>
+                <StatusPill value={detailQ.data.opinion.status} />
+              </div>
+              <div className="kx-detail__meta">
+                <span>{detailQ.data.opinion.authorName}</span>
+                <span>· {detailQ.data.opinion.category}</span>
+                <span>· {fmtDateTime(detailQ.data.opinion.createdAt)}</span>
+              </div>
+              <div className="kx-detail__body">{detailQ.data.opinion.content || '(내용 없음)'}</div>
+
+              {isManager && (
+                <div className="kx-field">
+                  <span className="kx-label">상태 변경 (매니저)</span>
+                  <div className="kx-noti__chips">
+                    {STATUS_FLOW.map((s) => (
+                      <button
+                        key={s}
+                        className={`kx-chip ${detailQ.data!.opinion.status === s ? 'is-active' : ''}`}
+                        onClick={() => statusM.mutate({ id: detailQ.data!.opinion.id, value: s })}
+                      >
+                        {s}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div className="kx-thread">
+                {detailQ.data.comments.length === 0 && (
+                  <p className="kx-list-table__muted">아직 답변이 없습니다.</p>
+                )}
+                {detailQ.data.comments.map((c) => (
+                  <div className="kx-thread__item" key={c.id}>
+                    <div className="kx-thread__meta">
+                      <span className="kx-thread__author">{c.authorName}</span>
+                      <span>{fmtDateTime(c.createdAt)}</span>
+                    </div>
+                    <div className="kx-thread__text">{c.content}</div>
+                  </div>
+                ))}
+                {isManager && (
+                  <div className="kx-thread__compose">
+                    <textarea
+                      className="kx-textarea"
+                      placeholder="답변 작성…"
+                      value={comment}
+                      onChange={(e) => setComment(e.target.value)}
+                    />
+                    <Button
+                      disabled={!comment.trim() || commentM.isPending}
+                      onClick={() =>
+                        commentM.mutate({ id: detailQ.data!.opinion.id, content: comment })
+                      }
+                    >
+                      답변
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </>
+          ) : null}
+        </aside>
+      </div>
+      {toast}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/work/ReportPage.tsx b/src/frontend/src/screens/work/ReportPage.tsx
new file mode 100644
index 0000000..501c26d
--- /dev/null
+++ b/src/frontend/src/screens/work/ReportPage.tsx
@@ -0,0 +1,251 @@
+/*
+ * SCR-46 업무보고·통계 (report + stats). 참조: UIWS report/*·stats/*.
+ * 기간 탭(일/주/월/분기/연) + 요약 KPI + 유형별 차트 + 작성자별 표 + 최근 보고서 목록.
+ * 백엔드: /api/work/stats/worklog(fromDate·toDate 집계), /api/work/reports(문서).
+ * ★ 갭: 보고서 Jasper PDF 출력 엔드포인트 부재 → PDF 버튼 disabled. 07_work_api_gaps.md 기록.
+ */
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { reportApi, workStatsApi } from '../../api/endpoints';
+import { Button } from '../../components/ui/Button';
+import { CHART } from '../chartColors';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconDownload } from '../../components/ui/icons';
+import { errMessage, fmtDate } from './workShared';
+import './work.css';
+
+type Period = 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'QUARTERLY' | 'YEARLY';
+const PERIODS: { v: Period; l: string }[] = [
+  { v: 'DAILY', l: '일간' },
+  { v: 'WEEKLY', l: '주간' },
+  { v: 'MONTHLY', l: '월간' },
+  { v: 'QUARTERLY', l: '분기' },
+  { v: 'YEARLY', l: '연간' },
+];
+const BAR_COLORS = [CHART.primary600, CHART.primary700, CHART.aiAccent, CHART.success, CHART.warning, CHART.slate];
+
+function iso(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+/** 기간 → [fromDate, toDate] (역년/ISO 주 기준, 화면 편의 산출). */
+function periodRange(p: Period): [string, string] {
+  const now = new Date();
+  const y = now.getFullYear();
+  if (p === 'DAILY') return [iso(now), iso(now)];
+  if (p === 'WEEKLY') {
+    const day = now.getDay();
+    const mon = new Date(now);
+    mon.setDate(now.getDate() - ((day + 6) % 7));
+    const sun = new Date(mon);
+    sun.setDate(mon.getDate() + 6);
+    return [iso(mon), iso(sun)];
+  }
+  if (p === 'MONTHLY') return [iso(new Date(y, now.getMonth(), 1)), iso(new Date(y, now.getMonth() + 1, 0))];
+  if (p === 'QUARTERLY') {
+    const q = Math.floor(now.getMonth() / 3);
+    return [iso(new Date(y, q * 3, 1)), iso(new Date(y, q * 3 + 3, 0))];
+  }
+  return [iso(new Date(y, 0, 1)), iso(new Date(y, 11, 31))];
+}
+
+export function ReportPage() {
+  const [period, setPeriod] = useState<Period>('WEEKLY');
+  const [from, to] = useMemo(() => periodRange(period), [period]);
+
+  const statsQ = useQuery({
+    queryKey: ['work-stats', from, to],
+    queryFn: () => workStatsApi.worklog({ fromDate: from, toDate: to }),
+  });
+  const reportsQ = useQuery({
+    queryKey: ['reports'],
+    queryFn: () => reportApi.list({ page: 0, size: 20 }),
+  });
+
+  const stats = statsQ.data;
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">업무보고·통계</h1>
+          <p className="kx-work__subtitle">
+            일상 업무보고 집계 ({from.replace(/-/g, '.')} ~ {to.replace(/-/g, '.')})
+          </p>
+        </div>
+        <div className="kx-work__head-actions">
+          <div className="kx-seg" role="tablist" aria-label="기간">
+            {PERIODS.map((p) => (
+              <button
+                key={p.v}
+                role="tab"
+                aria-selected={period === p.v}
+                className={`kx-seg__btn ${period === p.v ? 'is-active' : ''}`}
+                onClick={() => setPeriod(p.v)}
+              >
+                {p.l}
+              </button>
+            ))}
+          </div>
+          <span title="백엔드 미지원 — Jasper PDF 연동 후 활성화" style={{ display: 'inline-flex' }}>
+            <Button variant="secondary" disabled leadingIcon={<IconDownload size={16} />}>
+              보고서 PDF
+            </Button>
+          </span>
+        </div>
+      </header>
+
+      {/* KPI */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
+        <div className="kx-kpi">
+          <span className="kx-kpi__label">총 업무 건수</span>
+          <span className="kx-kpi__value tnum">
+            {statsQ.isLoading ? <Skeleton height={28} width={80} /> : (stats?.totalCount ?? 0)}
+          </span>
+        </div>
+        <div className="kx-kpi">
+          <span className="kx-kpi__label">총 공수(시간)</span>
+          <span className="kx-kpi__value tnum">
+            {statsQ.isLoading ? <Skeleton height={28} width={80} /> : (stats?.totalHours ?? 0)}
+          </span>
+        </div>
+        <div className="kx-kpi">
+          <span className="kx-kpi__label">참여 작성자</span>
+          <span className="kx-kpi__value tnum">
+            {statsQ.isLoading ? <Skeleton height={28} width={80} /> : (stats?.byWriter.length ?? 0)}
+          </span>
+        </div>
+      </div>
+
+      {statsQ.isError && (
+        <ErrorState message={errMessage(statsQ.error)} onRetry={() => statsQ.refetch()} />
+      )}
+
+      {/* 유형별 차트 */}
+      <section className="kx-card" aria-label="유형별 업무량">
+        <div className="kx-card__head">
+          <h2>유형별 업무량</h2>
+        </div>
+        {statsQ.isLoading ? (
+          <Skeleton height={260} />
+        ) : !stats || stats.byType.length === 0 ? (
+          <EmptyState title="집계할 데이터가 없습니다" description="선택 기간에 등록된 업무일지가 없습니다." />
+        ) : (
+          <div style={{ width: '100%', height: 280 }}>
+            <ResponsiveContainer>
+              <BarChart data={stats.byType} margin={{ top: 8, right: 8, bottom: 8, left: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke={CHART.neutral100} vertical={false} />
+                <XAxis dataKey="name" tick={{ fontSize: 12, fill: CHART.slate }} />
+                <YAxis tick={{ fontSize: 12, fill: CHART.slate }} allowDecimals={false} />
+                <Tooltip
+                  contentStyle={{ fontSize: 12, borderRadius: 8, border: `1px solid ${CHART.neutral200}` }}
+                  formatter={(v) => [`${Number(v ?? 0)}건`, '건수']}
+                />
+                <Bar dataKey="count" radius={[4, 4, 0, 0]}>
+                  {stats.byType.map((_, i) => (
+                    <Cell key={i} fill={BAR_COLORS[i % BAR_COLORS.length]} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+      </section>
+
+      {/* 작성자별 표 + 최근 보고서 */}
+      <div className="kx-split" style={{ gridTemplateColumns: '1fr 1fr' }}>
+        <section className="kx-card" aria-label="작성자별 집계">
+          <div className="kx-card__head">
+            <h2>작성자별 집계</h2>
+          </div>
+          <div className="kx-table-scroll">
+            <table className="kx-list-table">
+              <thead>
+                <tr>
+                  <th>작성자</th>
+                  <th className="kx-num" style={{ width: 80 }}>
+                    건수
+                  </th>
+                  <th className="kx-num" style={{ width: 90 }}>
+                    공수(h)
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {statsQ.isLoading &&
+                  Array.from({ length: 4 }).map((_, i) => (
+                    <tr key={i}>
+                      <td colSpan={3}>
+                        <Skeleton height={20} />
+                      </td>
+                    </tr>
+                  ))}
+                {!statsQ.isLoading &&
+                  (stats?.byWriter ?? []).map((w) => (
+                    <tr key={w.name} style={{ cursor: 'default' }}>
+                      <td className="kx-list-table__title">{w.name}</td>
+                      <td className="kx-num">{w.count}</td>
+                      <td className="kx-num">{w.hours}</td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+          {!statsQ.isLoading && (stats?.byWriter.length ?? 0) === 0 && (
+            <EmptyState title="집계 데이터 없음" />
+          )}
+        </section>
+
+        <section className="kx-card" aria-label="최근 보고서">
+          <div className="kx-card__head">
+            <h2>최근 업무보고</h2>
+          </div>
+          <div className="kx-table-scroll">
+            <table className="kx-list-table">
+              <thead>
+                <tr>
+                  <th>제목</th>
+                  <th style={{ width: 80 }}>유형</th>
+                  <th style={{ width: 90 }}>작성일</th>
+                </tr>
+              </thead>
+              <tbody>
+                {reportsQ.isLoading &&
+                  Array.from({ length: 4 }).map((_, i) => (
+                    <tr key={i}>
+                      <td colSpan={3}>
+                        <Skeleton height={20} />
+                      </td>
+                    </tr>
+                  ))}
+                {!reportsQ.isLoading &&
+                  (reportsQ.data?.items ?? []).map((r) => (
+                    <tr key={r.id} style={{ cursor: 'default' }}>
+                      <td className="kx-list-table__title">{r.title}</td>
+                      <td className="kx-list-table__muted">{r.reportType}</td>
+                      <td className="kx-list-table__muted kx-num">{fmtDate(r.createdAt)}</td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+          {reportsQ.isError && (
+            <ErrorState message={errMessage(reportsQ.error)} onRetry={() => reportsQ.refetch()} />
+          )}
+          {!reportsQ.isLoading && !reportsQ.isError && (reportsQ.data?.items.length ?? 0) === 0 && (
+            <EmptyState title="작성된 보고서가 없습니다" />
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/work/SearchPage.tsx b/src/frontend/src/screens/work/SearchPage.tsx
new file mode 100644
index 0000000..d31dba7
--- /dev/null
+++ b/src/frontend/src/screens/work/SearchPage.tsx
@@ -0,0 +1,227 @@
+/*
+ * SCR-44 통합검색 (search). 참조: UIWS SearchResultsPage.
+ * 대형 검색창 + 결과 타입 탭 + 좌측 파셋. 백엔드: /api/work/search (WORKLOG|NOTICE|MEETING|REPORT|OPINION).
+ * ★ 갭: AI 자연어 검색 엔드포인트·크로스모듈(행사/부스/업체) 검색 부재 → AI 토글은 UI 표기(비활성 안내). 07_work_api_gaps.md 기록.
+ */
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { searchApi } from '../../api/endpoints';
+import type { SearchResultItem } from '../../api/types';
+import { AiLabel } from '../../components/ui/Badge';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import {
+  IconCalendar,
+  IconDocument,
+  IconSearch,
+  IconSpark,
+} from '../../components/ui/icons';
+import { fmtDateTime, errMessage } from './workShared';
+import './work.css';
+
+const TYPE_META: Record<string, { label: string; Icon: typeof IconDocument }> = {
+  WORKLOG: { label: '업무일지', Icon: IconDocument },
+  NOTICE: { label: '공지', Icon: IconDocument },
+  MEETING: { label: '회의록', Icon: IconCalendar },
+  REPORT: { label: '업무보고', Icon: IconDocument },
+  OPINION: { label: '의견', Icon: IconDocument },
+  EVENT: { label: '행사', Icon: IconCalendar },
+  COMPANY: { label: '업체', Icon: IconDocument },
+  AUCTION: { label: '옥션', Icon: IconDocument },
+  BOOTH: { label: '부스', Icon: IconDocument },
+  LEAD: { label: '리드', Icon: IconDocument },
+  CMS: { label: '콘텐츠', Icon: IconDocument },
+};
+
+/** type(+id)별 이동 경로 파생(백엔드 route 와 정합). null=이동 불가. */
+function routeFor(type: string, id: string): string | null {
+  switch (type) {
+    case 'WORKLOG':
+      return '/work/worklog';
+    case 'NOTICE':
+      return '/work/notice';
+    case 'MEETING':
+      return '/work/meeting';
+    case 'REPORT':
+      return '/work/report';
+    case 'OPINION':
+      return '/work/opinion';
+    case 'EVENT':
+      return '/schedule';
+    case 'COMPANY':
+      return '/admin/companies';
+    case 'AUCTION':
+      return id ? `/auctions/${id}` : '/auctions';
+    case 'BOOTH':
+      return '/booth-sales';
+    case 'LEAD':
+      return '/leads';
+    case 'CMS':
+      return '/cms';
+    default:
+      return null;
+  }
+}
+
+export function SearchPage() {
+  const navigate = useNavigate();
+  const [input, setInput] = useState('');
+  const [query, setQuery] = useState('');
+  const [aiMode, setAiMode] = useState(false);
+  const [tab, setTab] = useState<string>('ALL');
+
+  const searchQ = useQuery({
+    queryKey: ['search', query],
+    queryFn: () => searchApi.search(query, 50),
+    enabled: query.trim().length > 0,
+  });
+
+  const results = searchQ.data ?? [];
+  const counts = useMemo(() => {
+    const c: Record<string, number> = { ALL: results.length };
+    for (const r of results) c[r.type] = (c[r.type] ?? 0) + 1;
+    return c;
+  }, [results]);
+
+  const tabs = useMemo(() => {
+    const present = Array.from(new Set(results.map((r) => r.type)));
+    return ['ALL', ...present];
+  }, [results]);
+
+  const filtered = tab === 'ALL' ? results : results.filter((r) => r.type === tab);
+
+  function highlight(text: string): React.ReactNode {
+    if (!query.trim()) return text;
+    const idx = text.toLowerCase().indexOf(query.toLowerCase());
+    if (idx < 0) return text;
+    return (
+      <>
+        {text.slice(0, idx)}
+        <mark style={{ background: '#FEF0C7', padding: '0 1px' }}>
+          {text.slice(idx, idx + query.length)}
+        </mark>
+        {text.slice(idx + query.length)}
+      </>
+    );
+  }
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">통합검색</h1>
+          <p className="kx-work__subtitle">업무일지·공지·회의록·보고·의견 + 행사·업체·옥션·부스·리드·콘텐츠 크로스 검색</p>
+        </div>
+      </header>
+
+      <div className="kx-search__hero">
+        <div className="kx-search__box">
+          <IconSearch size={22} />
+          <input
+            placeholder="검색어를 입력하세요"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && setQuery(input)}
+            aria-label="통합검색"
+            autoFocus
+          />
+          <button
+            className={`kx-search__ai-toggle ${aiMode ? '' : 'is-off'}`}
+            onClick={() => setAiMode((v) => !v)}
+            title="AI 자연어 검색(준비 중)"
+          >
+            <IconSpark size={14} /> AI 자연어 검색
+          </button>
+        </div>
+        <Button onClick={() => setQuery(input)}>검색</Button>
+      </div>
+
+      {aiMode && (
+        <div className="kx-meet__ai-card" role="note">
+          <AiLabel>AI 자연어 검색</AiLabel>{' '}
+          <span className="kx-list-table__muted">
+            자연어 검색은 준비 중입니다. 현재는 키워드 검색으로 동작합니다.
+          </span>
+        </div>
+      )}
+
+      {!query.trim() ? (
+        <EmptyState
+          title="검색어를 입력하세요"
+          description="업무 데이터 전반을 한 번에 검색합니다."
+          icon={<IconSearch size={28} />}
+        />
+      ) : (
+        <div className="kx-cal" style={{ gridTemplateColumns: '200px minmax(0,1fr)' }}>
+          {/* 파셋 */}
+          <aside className="kx-card" aria-label="검색 필터">
+            <div className="kx-card__head">
+              <h2>유형</h2>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              {tabs.map((t) => (
+                <button
+                  key={t}
+                  className={`kx-msg__rail-btn ${tab === t ? 'is-active' : ''}`}
+                  onClick={() => setTab(t)}
+                >
+                  {t === 'ALL' ? '전체' : (TYPE_META[t]?.label ?? t)}
+                  <span className="kx-list-table__muted">{counts[t] ?? 0}</span>
+                </button>
+              ))}
+            </div>
+          </aside>
+
+          {/* 결과 */}
+          <section aria-label="검색 결과" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {searchQ.isLoading &&
+              Array.from({ length: 5 }).map((_, i) => (
+                <div className="kx-search__result" key={i}>
+                  <Skeleton height={36} width={36} radius={6} />
+                  <div style={{ flex: 1 }}>
+                    <Skeleton height={16} width="50%" />
+                    <Skeleton height={14} width="80%" />
+                  </div>
+                </div>
+              ))}
+            {searchQ.isError && (
+              <ErrorState message={errMessage(searchQ.error)} onRetry={() => searchQ.refetch()} />
+            )}
+            {!searchQ.isLoading && !searchQ.isError && filtered.length === 0 && (
+              <EmptyState title="검색 결과가 없습니다" description={`'${query}'에 대한 결과를 찾지 못했습니다.`} />
+            )}
+            {filtered.map((r: SearchResultItem) => {
+              const meta = TYPE_META[r.type] ?? { label: r.type, Icon: IconDocument };
+              const Icon = meta.Icon;
+              const route = routeFor(r.type, r.id);
+              const go = () => route && navigate(route);
+              return (
+                <div
+                  className="kx-search__result"
+                  key={`${r.type}-${r.id}`}
+                  onClick={route ? go : undefined}
+                  onKeyDown={route ? (e) => (e.key === 'Enter' || e.key === ' ') && go() : undefined}
+                  role={route ? 'button' : undefined}
+                  tabIndex={route ? 0 : undefined}
+                  style={route ? { cursor: 'pointer' } : undefined}
+                >
+                  <span className="kx-search__result-icon">
+                    <Icon size={18} />
+                  </span>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div className="kx-list-table__title">{highlight(r.title)}</div>
+                    <div className="kx-detail__meta">
+                      <span className="kx-pill kx-pill--info">{meta.label}</span>
+                      <span>{fmtDateTime(r.createdAt)}</span>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </section>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/work/WorkSchedulePage.tsx b/src/frontend/src/screens/work/WorkSchedulePage.tsx
new file mode 100644
index 0000000..13756d0
--- /dev/null
+++ b/src/frontend/src/screens/work/WorkSchedulePage.tsx
@@ -0,0 +1,282 @@
+/*
+ * SCR-40 통합 일정·캘린더 (schedule). 참조: UIWS schedule/PersonalSchedulePage.
+ * 월 캘린더 + 우측 선택일 어젠다/작성. 개인·부서 업무 일정(운영 SCR-15와 구분).
+ * 백엔드: /api/work/schedules (fromAt/toAt ISO 범위). 색상 범례.
+ */
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { scheduleWorkApi } from '../../api/endpoints';
+import type { ScheduleDto, ScheduleSaveRequest } from '../../api/types';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState } from '../../components/ui/States';
+import { IconPlus } from '../../components/ui/icons';
+import KxCalendarView, { type KxCalendarItem } from '../schedule/KxCalendarView';
+import { fetchHolidaySet } from '../admin/holidayApi';
+import { errMessage, fmtDateTime, useToast } from './workShared';
+import './work.css';
+
+const TYPE_COLOR: Record<string, string> = {
+  milestone: '#0066B3',
+  auction: '#6D4AFF',
+  movein: '#0E8A5F',
+  meeting: '#B45309',
+  personal: '#667085',
+};
+const TYPE_LABEL: Record<string, string> = {
+  milestone: '행사 마일스톤',
+  auction: '옥션 마감',
+  movein: '반입 슬롯',
+  meeting: '회의',
+  personal: '개인',
+};
+
+function ymd(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+function colorOf(s: ScheduleDto): string {
+  return s.color || TYPE_COLOR[(s.scheduleType ?? '').toLowerCase()] || '#0066B3';
+}
+
+/** 표시 월(baseDate 기준 일요일 시작 6주 그리드)의 조회 범위(yyyy-MM-dd). */
+function monthRange(d: Date): { fromDate: string; toDate: string } {
+  const first = new Date(d.getFullYear(), d.getMonth(), 1);
+  const start = new Date(first);
+  start.setDate(1 - first.getDay());
+  const end = new Date(start);
+  end.setDate(start.getDate() + 41);
+  return { fromDate: ymd(start), toDate: ymd(end) };
+}
+
+/** ScheduleDto → KxCalendarItem(기간=시작~종료일, 유형색·라벨). startAt 없으면 제외(호출부 필터). */
+function toWorkItem(s: ScheduleDto): KxCalendarItem {
+  return {
+    id: String(s.id),
+    startDate: (s.startAt ?? '').slice(0, 10),
+    endDate: (s.endAt ?? s.startAt ?? '').slice(0, 10),
+    title: s.title,
+    color: colorOf(s),
+    badge: TYPE_LABEL[(s.scheduleType ?? '').toLowerCase()],
+  };
+}
+
+export function WorkSchedulePage() {
+  const qc = useQueryClient();
+  const { show, node: toast } = useToast();
+  const today = new Date();
+  // 표시 범위(캘린더 뷰/기준일 변경 시 KxCalendarView.onRangeChange 로 갱신). 초기=이번 달 그리드.
+  const [range, setRange] = useState(() => monthRange(today));
+  const [selDate, setSelDate] = useState(ymd(today));
+  const [composing, setComposing] = useState(false);
+  const [form, setForm] = useState<ScheduleSaveRequest>({
+    title: '',
+    scheduleType: 'personal',
+    startAt: `${ymd(today)}T09:00`,
+    endAt: `${ymd(today)}T10:00`,
+    allDay: false,
+    location: '',
+    content: '',
+  });
+
+  const listQ = useQuery({
+    queryKey: ['schedules', range.fromDate, range.toDate],
+    queryFn: () =>
+      scheduleWorkApi.list({
+        fromAt: `${range.fromDate}T00:00:00`,
+        toAt: `${range.toDate}T23:59:59`,
+      }),
+  });
+
+  // 공휴일 세트(캘린더 붉은색 표시) — 표시 범위별 조회. 실패해도 캘린더는 정상 동작(빈 세트).
+  const holidayQ = useQuery({
+    queryKey: ['holidays', range.fromDate, range.toDate],
+    queryFn: () => fetchHolidaySet(range.fromDate, range.toDate),
+    retry: false,
+  });
+  const holidays = holidayQ.data ?? new Map<string, string>();
+
+  const byDay = useMemo(() => {
+    const map = new Map<string, ScheduleDto[]>();
+    for (const s of listQ.data ?? []) {
+      const key = (s.startAt ?? '').slice(0, 10);
+      if (!key) continue;
+      const arr = map.get(key) ?? [];
+      arr.push(s);
+      map.set(key, arr);
+    }
+    return map;
+  }, [listQ.data]);
+
+  // 월/주/일 뷰 항목(기간 막대·유형색). startAt 있는 항목만.
+  const calItems = useMemo(
+    () => (listQ.data ?? []).filter((s) => !!(s.startAt ?? '').slice(0, 10)).map(toWorkItem),
+    [listQ.data],
+  );
+  const legend = useMemo(
+    () => Object.entries(TYPE_LABEL).map(([code, label]) => ({ code, label, color: TYPE_COLOR[code] })),
+    [],
+  );
+
+  const createM = useMutation({
+    mutationFn: (body: ScheduleSaveRequest) => scheduleWorkApi.create(body),
+    onSuccess: () => {
+      show('일정이 추가되었습니다.');
+      setComposing(false);
+      qc.invalidateQueries({ queryKey: ['schedules'] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+  const delM = useMutation({
+    mutationFn: (id: string) => scheduleWorkApi.remove(id),
+    onSuccess: () => {
+      show('삭제되었습니다.');
+      qc.invalidateQueries({ queryKey: ['schedules'] });
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  const agenda = byDay.get(selDate) ?? [];
+
+  function openCompose() {
+    setForm({
+      title: '',
+      scheduleType: 'personal',
+      startAt: `${selDate}T09:00`,
+      endAt: `${selDate}T10:00`,
+      allDay: false,
+      location: '',
+      content: '',
+    });
+    setComposing(true);
+  }
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">일정</h1>
+          <p className="kx-work__subtitle">개인·부서 업무 일정 · 마일스톤/옥션/반입 통합 뷰 · 월/주/일</p>
+        </div>
+      </header>
+
+      <div className="kx-cal">
+        <div>
+          <KxCalendarView
+            items={calItems}
+            legend={legend}
+            selectedDate={selDate}
+            loading={listQ.isLoading}
+            holidays={holidays}
+            onRangeChange={(r) => setRange(r)}
+            onDateClick={(d) => setSelDate(d)}
+            onItemClick={(it) => setSelDate(it.startDate)}
+          />
+          {listQ.isError && (
+            <ErrorState message={errMessage(listQ.error)} onRetry={() => listQ.refetch()} />
+          )}
+        </div>
+
+        {/* 어젠다 */}
+        <aside className="kx-cal__agenda" aria-label={`${selDate} 일정`}>
+          <div className="kx-detail__head">
+            <h2 className="kx-detail__title">{selDate.replace(/-/g, '.')}</h2>
+            <Button leadingIcon={<IconPlus size={16} />} onClick={openCompose}>
+              일정 추가
+            </Button>
+          </div>
+
+          {composing ? (
+            <div className="kx-formgrid" style={{ gridTemplateColumns: '1fr' }}>
+              <label className="kx-field">
+                <span className="kx-label">제목 *</span>
+                <input
+                  className="kx-input"
+                  value={form.title}
+                  onChange={(e) => setForm({ ...form, title: e.target.value })}
+                />
+              </label>
+              <label className="kx-field">
+                <span className="kx-label">유형</span>
+                <select
+                  className="kx-select"
+                  value={form.scheduleType ?? 'personal'}
+                  onChange={(e) => setForm({ ...form, scheduleType: e.target.value })}
+                >
+                  {Object.entries(TYPE_LABEL).map(([k, l]) => (
+                    <option key={k} value={k}>
+                      {l}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="kx-field">
+                <span className="kx-label">시작</span>
+                <input
+                  type="datetime-local"
+                  className="kx-input"
+                  value={form.startAt}
+                  onChange={(e) => setForm({ ...form, startAt: e.target.value })}
+                />
+              </label>
+              <label className="kx-field">
+                <span className="kx-label">종료</span>
+                <input
+                  type="datetime-local"
+                  className="kx-input"
+                  value={form.endAt ?? ''}
+                  onChange={(e) => setForm({ ...form, endAt: e.target.value })}
+                />
+              </label>
+              <label className="kx-field">
+                <span className="kx-label">장소</span>
+                <input
+                  className="kx-input"
+                  value={form.location ?? ''}
+                  onChange={(e) => setForm({ ...form, location: e.target.value })}
+                />
+              </label>
+              <div className="kx-detail__actions">
+                <Button
+                  disabled={!form.title.trim() || createM.isPending}
+                  onClick={() => createM.mutate(form)}
+                >
+                  {createM.isPending ? '저장 중…' : '저장'}
+                </Button>
+                <Button variant="ghost" onClick={() => setComposing(false)}>
+                  취소
+                </Button>
+              </div>
+            </div>
+          ) : agenda.length === 0 ? (
+            <EmptyState title="일정이 없습니다" description="이 날짜에 등록된 일정이 없습니다." />
+          ) : (
+            agenda.map((s) => (
+              <div
+                key={s.id}
+                className="kx-cal__agenda-item"
+                style={{ borderLeftColor: colorOf(s) }}
+              >
+                <div style={{ flex: 1 }}>
+                  <div className="kx-list-table__title">{s.title}</div>
+                  <div className="kx-detail__meta">
+                    <span>{s.allDay ? '종일' : fmtDateTime(s.startAt)}</span>
+                    {s.location && <span>· {s.location}</span>}
+                    <span>· {TYPE_LABEL[(s.scheduleType ?? '').toLowerCase()] ?? s.scheduleType ?? ''}</span>
+                  </div>
+                </div>
+                <button
+                  className="kx-tag"
+                  onClick={() => {
+                    if (window.confirm('이 일정을 삭제할까요?')) delM.mutate(s.id);
+                  }}
+                >
+                  삭제
+                </button>
+              </div>
+            ))
+          )}
+        </aside>
+      </div>
+      {toast}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/work/WorklogPage.tsx b/src/frontend/src/screens/work/WorklogPage.tsx
new file mode 100644
index 0000000..9a7ecfd
--- /dev/null
+++ b/src/frontend/src/screens/work/WorklogPage.tsx
@@ -0,0 +1,339 @@
+/*
+ * SCR-39 업무일지 (worklog). 참조: UIWS worklog/*.
+ * 좌: 필터 + 목록 테이블(날짜·제목·유형·진행·공수) / 우: 상세·작성 폼(공수·이슈).
+ * 백엔드: /api/work/worklogs (PageResponse). 3상태(로딩/빈/에러) 필수.
+ * ★ 갭: worklog 댓글 스레드 엔드포인트 부재 → 07_work_api_gaps.md 기록.
+ */
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { worklogApi } from '../../api/endpoints';
+import type { WorklogDto, WorklogSaveRequest } from '../../api/types';
+import { Button } from '../../components/ui/Button';
+import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { IconPlus } from '../../components/ui/icons';
+import { StatusPill, errMessage, fmtDate, useToast } from './workShared';
+import './work.css';
+
+const STATUS_OPTS = [
+  { v: '', l: '전체' },
+  { v: '진행중', l: '진행중' },
+  { v: '완료', l: '완료' },
+  { v: '보류', l: '보류' },
+];
+const TYPE_OPTS = ['현장점검', '시공관리', '설계검토', '행정', '회의', '기타'];
+
+const EMPTY_FORM: WorklogSaveRequest = {
+  workDate: new Date().toISOString().slice(0, 10),
+  title: '',
+  workType: '현장점검',
+  progress: '',
+  status: '진행중',
+  content: '',
+  hours: 0,
+};
+
+export function WorklogPage() {
+  const qc = useQueryClient();
+  const { show, node: toast } = useToast();
+  const [fromDate, setFromDate] = useState('');
+  const [toDate, setToDate] = useState('');
+  const [status, setStatus] = useState('');
+  const [page, setPage] = useState(0);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [form, setForm] = useState<WorklogSaveRequest>(EMPTY_FORM);
+
+  const listQ = useQuery({
+    queryKey: ['worklogs', { fromDate, toDate, status, page }],
+    queryFn: () =>
+      worklogApi.list({
+        fromDate: fromDate || undefined,
+        toDate: toDate || undefined,
+        status: status || undefined,
+        page,
+        size: 20,
+      }),
+  });
+
+  const invalidate = () => qc.invalidateQueries({ queryKey: ['worklogs'] });
+
+  const saveM = useMutation({
+    mutationFn: (body: WorklogSaveRequest) =>
+      selectedId ? worklogApi.update(selectedId, body) : worklogApi.create(body),
+    onSuccess: (saved: WorklogDto) => {
+      show(selectedId ? '수정되었습니다.' : '등록되었습니다.');
+      setSelectedId(saved.id);
+      invalidate();
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  const delM = useMutation({
+    mutationFn: (id: string) => worklogApi.remove(id),
+    onSuccess: () => {
+      show('삭제되었습니다.');
+      resetForm();
+      invalidate();
+    },
+    onError: (e) => show(errMessage(e)),
+  });
+
+  function resetForm() {
+    setSelectedId(null);
+    setForm(EMPTY_FORM);
+  }
+
+  function selectRow(row: WorklogDto) {
+    setSelectedId(row.id);
+    setForm({
+      eventId: row.eventId ?? undefined,
+      workDate: row.workDate,
+      title: row.title,
+      workType: row.workType ?? '',
+      progress: row.progress ?? '',
+      status: row.status ?? '',
+      content: row.content ?? '',
+      hours: row.hours,
+    });
+  }
+
+  const rows = listQ.data?.items ?? [];
+  const total = listQ.data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / 20));
+  const canSave = form.title.trim().length > 0 && !!form.workDate;
+
+  const editingTitle = useMemo(() => (selectedId ? '업무일지 수정' : '새 업무일지'), [selectedId]);
+
+  return (
+    <div className="kx-page">
+      <header className="kx-work__head">
+        <div>
+          <h1 className="kx-work__title">업무일지</h1>
+          <p className="kx-work__subtitle">현장·시공·설계 일지 기록 · 공수/이슈 관리</p>
+        </div>
+        <Button leadingIcon={<IconPlus size={16} />} onClick={resetForm}>
+          새 일지
+        </Button>
+      </header>
+
+      <div className="kx-split">
+        {/* 목록 */}
+        <section className="kx-card" aria-label="업무일지 목록">
+          <div className="kx-filterbar">
+            <label className="kx-field">
+              <span className="kx-label">시작일</span>
+              <input
+                type="date"
+                className="kx-input"
+                value={fromDate}
+                onChange={(e) => {
+                  setFromDate(e.target.value);
+                  setPage(0);
+                }}
+              />
+            </label>
+            <label className="kx-field">
+              <span className="kx-label">종료일</span>
+              <input
+                type="date"
+                className="kx-input"
+                value={toDate}
+                onChange={(e) => {
+                  setToDate(e.target.value);
+                  setPage(0);
+                }}
+              />
+            </label>
+            <label className="kx-field">
+              <span className="kx-label">진행상태</span>
+              <select
+                className="kx-select"
+                value={status}
+                onChange={(e) => {
+                  setStatus(e.target.value);
+                  setPage(0);
+                }}
+              >
+                {STATUS_OPTS.map((o) => (
+                  <option key={o.v} value={o.v}>
+                    {o.l}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+
+          <div className="kx-table-scroll kx-scroll-70">
+            <table className="kx-list-table">
+              <thead>
+                <tr>
+                  <th style={{ width: 72 }}>날짜</th>
+                  <th>제목</th>
+                  <th style={{ width: 92 }}>유형</th>
+                  <th style={{ width: 92 }}>진행상태</th>
+                  <th style={{ width: 64 }} className="kx-num">
+                    공수
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {listQ.isLoading &&
+                  Array.from({ length: 6 }).map((_, i) => (
+                    <tr key={i}>
+                      <td colSpan={5}>
+                        <Skeleton height={20} />
+                      </td>
+                    </tr>
+                  ))}
+                {!listQ.isLoading &&
+                  rows.map((r) => (
+                    <tr
+                      key={r.id}
+                      className={selectedId === r.id ? 'is-selected' : ''}
+                      onClick={() => selectRow(r)}
+                    >
+                      <td className="kx-num">{fmtDate(r.workDate)}</td>
+                      <td>
+                        <div className="kx-list-table__title">{r.title}</div>
+                        <div className="kx-list-table__muted">{r.writerName}</div>
+                      </td>
+                      <td className="kx-list-table__muted">{r.workType ?? '-'}</td>
+                      <td>
+                        <StatusPill value={r.status} />
+                      </td>
+                      <td className="kx-num">{r.hours ?? 0}h</td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+
+          {!listQ.isLoading && listQ.isError && (
+            <ErrorState message={errMessage(listQ.error)} onRetry={() => listQ.refetch()} />
+          )}
+          {!listQ.isLoading && !listQ.isError && rows.length === 0 && (
+            <EmptyState
+              title="작성된 업무일지가 없습니다"
+              description="우측에서 새 일지를 작성하세요."
+            />
+          )}
+
+          {totalPages > 1 && (
+            <div className="kx-pager">
+              <button disabled={page === 0} onClick={() => setPage((p) => Math.max(0, p - 1))}>
+                이전
+              </button>
+              <span className="tnum">
+                {page + 1} / {totalPages}
+              </span>
+              <button
+                disabled={page + 1 >= totalPages}
+                onClick={() => setPage((p) => p + 1)}
+              >
+                다음
+              </button>
+            </div>
+          )}
+        </section>
+
+        {/* 상세·작성 */}
+        <aside className="kx-detail" aria-label="업무일지 작성">
+          <div className="kx-detail__head">
+            <h2 className="kx-detail__title">{editingTitle}</h2>
+            {selectedId && (
+              <Button
+                variant="danger"
+                onClick={() => {
+                  if (window.confirm('이 일지를 삭제할까요?')) delM.mutate(selectedId);
+                }}
+              >
+                삭제
+              </Button>
+            )}
+          </div>
+
+          <div className="kx-formgrid">
+            <label className="kx-field">
+              <span className="kx-label">작업일 *</span>
+              <input
+                type="date"
+                className="kx-input"
+                value={form.workDate}
+                onChange={(e) => setForm({ ...form, workDate: e.target.value })}
+              />
+            </label>
+            <label className="kx-field">
+              <span className="kx-label">공수(시간)</span>
+              <input
+                type="number"
+                min={0}
+                step={0.5}
+                className="kx-input"
+                value={form.hours ?? 0}
+                onChange={(e) => setForm({ ...form, hours: Number(e.target.value) })}
+              />
+            </label>
+            <label className="kx-field kx-field--full">
+              <span className="kx-label">제목 *</span>
+              <input
+                className="kx-input"
+                value={form.title}
+                maxLength={200}
+                placeholder="업무 제목"
+                onChange={(e) => setForm({ ...form, title: e.target.value })}
+              />
+            </label>
+            <label className="kx-field">
+              <span className="kx-label">유형</span>
+              <select
+                className="kx-select"
+                value={form.workType ?? ''}
+                onChange={(e) => setForm({ ...form, workType: e.target.value })}
+              >
+                {TYPE_OPTS.map((t) => (
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="kx-field">
+              <span className="kx-label">진행상태</span>
+              <select
+                className="kx-select"
+                value={form.status ?? ''}
+                onChange={(e) => setForm({ ...form, status: e.target.value })}
+              >
+                {STATUS_OPTS.filter((o) => o.v).map((o) => (
+                  <option key={o.v} value={o.v}>
+                    {o.l}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="kx-field kx-field--full">
+              <span className="kx-label">이슈·내용</span>
+              <textarea
+                className="kx-textarea"
+                value={form.content ?? ''}
+                placeholder="진행 내용, 이슈, 특이사항을 기록하세요."
+                onChange={(e) => setForm({ ...form, content: e.target.value })}
+              />
+            </label>
+          </div>
+
+          <div className="kx-detail__actions">
+            <Button disabled={!canSave || saveM.isPending} onClick={() => saveM.mutate(form)}>
+              {saveM.isPending ? '저장 중…' : selectedId ? '수정 저장' : '등록'}
+            </Button>
+            {selectedId && (
+              <Button variant="ghost" onClick={resetForm}>
+                취소
+              </Button>
+            )}
+          </div>
+        </aside>
+      </div>
+      {toast}
+    </div>
+  );
+}
diff --git a/src/frontend/src/screens/work/work.css b/src/frontend/src/screens/work/work.css
new file mode 100644
index 0000000..43fcc5c
--- /dev/null
+++ b/src/frontend/src/screens/work/work.css
@@ -0,0 +1,856 @@
+/*
+ * §5B 공통 업무 기능(SCR-39~48) 공유 스타일.
+ * design.md §1 토큰만 참조. shared.css 프리미티브(kx-page·kx-card·kx-seg·kx-select·kx-kpi) 위에 얹는다.
+ */
+@import '../shared.css';
+
+/* ── 페이지 헤더 ── */
+.kx-work__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.kx-work__title {
+  font-size: var(--fs-h1);
+  line-height: var(--lh-h1);
+  color: var(--color-neutral-900);
+}
+.kx-work__subtitle {
+  margin-top: 2px;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-500);
+}
+.kx-work__head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+/* ── 목록/상세 2-Pane 분할 (worklog·opinion) — 좌우 50:50(소유자 지시 2026-07-12) ── */
+.kx-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1100px) {
+  .kx-split {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── 필터 바 ── */
+.kx-filterbar {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-3);
+}
+.kx-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.kx-field--grow {
+  flex: 1;
+}
+.kx-label {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-input,
+.kx-textarea {
+  height: 36px;
+  padding: 0 var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  font-size: var(--fs-body);
+  color: var(--color-neutral-900);
+  font-family: inherit;
+  width: 100%;
+}
+.kx-textarea {
+  height: auto;
+  min-height: 96px;
+  padding: var(--space-2) var(--space-3);
+  line-height: var(--lh-body);
+  resize: vertical;
+}
+.kx-input:focus,
+.kx-textarea:focus,
+.kx-select:focus {
+  outline: 2px solid var(--color-primary-100);
+  border-color: var(--color-primary-600);
+}
+
+/* ── 데이터 테이블 ── */
+.kx-list-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-body);
+}
+.kx-list-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--color-neutral-050);
+  text-align: left;
+  padding: 10px 12px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--color-neutral-500);
+  border-bottom: 2px solid var(--color-neutral-200);
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+.kx-list-table tbody td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-neutral-200);
+  color: var(--color-neutral-700);
+  vertical-align: middle;
+}
+.kx-list-table tbody tr:nth-child(even) {
+  background: var(--zebra);
+}
+.kx-list-table tbody tr {
+  cursor: pointer;
+}
+.kx-list-table tbody tr:hover {
+  background: var(--color-primary-050);
+}
+.kx-list-table tbody tr.is-selected {
+  background: var(--color-primary-100);
+}
+.kx-list-table__title {
+  font-weight: 600;
+  color: var(--color-neutral-900);
+}
+.kx-list-table__muted {
+  color: var(--color-neutral-500);
+}
+.kx-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 상태 필/배지(경량) ── */
+.kx-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 10px;
+  border-radius: var(--radius-pill);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.kx-pill--neutral {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+.kx-pill--info {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kx-pill--warn {
+  background: var(--color-violation-warn-bg);
+  color: var(--color-violation-warn-text);
+}
+.kx-pill--success {
+  background: #e6f4ee;
+  color: var(--color-success);
+}
+.kx-pill--danger {
+  background: #fef3f2;
+  color: var(--color-error);
+}
+
+/* ── 상세/작성 패널 ── */
+.kx-detail {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  position: sticky;
+  top: 0;
+}
+.kx-detail__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.kx-detail__title {
+  font-size: var(--fs-h3);
+  color: var(--color-neutral-900);
+}
+.kx-detail__meta {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.kx-detail__body {
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  color: var(--color-neutral-700);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.kx-detail__actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+/* ── 폼 그리드 ── */
+.kx-formgrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+  max-width: 640px;   /* 입력 폼이 콘텐츠 전폭으로 늘어나지 않게 제한(WISE 폼 폭) */
+}
+.kx-formgrid .kx-field--full {
+  grid-column: 1 / -1;
+}
+
+/* ── 댓글/스레드 ── */
+.kx-thread {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  border-top: var(--border-card);
+  padding-top: var(--space-3);
+}
+.kx-thread__item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-thread__meta {
+  display: flex;
+  gap: var(--space-2);
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-thread__author {
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+.kx-thread__text {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+  line-height: var(--lh-body);
+}
+.kx-thread__compose {
+  display: flex;
+  gap: var(--space-2);
+  align-items: flex-end;
+}
+.kx-thread__compose .kx-textarea {
+  min-height: 60px;
+}
+
+/* ── SCR-41 쪽지 3-Pane ── */
+.kx-msg {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1.4fr) minmax(320px, 1.2fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1200px) {
+  .kx-msg {
+    grid-template-columns: 180px 1fr;
+  }
+  .kx-msg__read {
+    grid-column: 1 / -1;
+  }
+}
+.kx-msg__rail {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-msg__rail-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: 8px var(--space-3);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  cursor: pointer;
+  text-align: left;
+}
+.kx-msg__rail-btn.is-active {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kx-msg__rail-count {
+  font-size: var(--fs-caption);
+  background: var(--color-primary-600);
+  color: #fff;
+  border-radius: var(--radius-pill);
+  padding: 0 7px;
+  min-width: 18px;
+  text-align: center;
+}
+.kx-msg__list {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow: hidden;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.kx-msg__item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-neutral-100);
+  cursor: pointer;
+}
+.kx-msg__item:hover {
+  background: var(--color-primary-050);
+}
+.kx-msg__item.is-selected {
+  background: var(--color-primary-100);
+}
+.kx-msg__item.is-unread .kx-msg__item-title {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+.kx-msg__item-top {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.kx-msg__item-sender {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-msg__item-title {
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-msg__item-time {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  white-space: nowrap;
+}
+.kx-msg__read {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-msg__unread-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-primary-600);
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+/* ── 태그 입력(수신자 등) ── */
+.kx-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  min-height: 36px;
+}
+.kx-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+  border-radius: var(--radius-pill);
+  padding: 2px 6px 2px 10px;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+}
+.kx-tag button {
+  border: none;
+  background: transparent;
+  color: var(--color-primary-700);
+  cursor: pointer;
+  display: inline-flex;
+  padding: 0;
+}
+.kx-tags input {
+  border: none;
+  outline: none;
+  flex: 1;
+  min-width: 120px;
+  font-size: var(--fs-body);
+  background: transparent;
+}
+
+/* ── SCR-40 캘린더 ── */
+.kx-cal {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1100px) {
+  .kx-cal {
+    grid-template-columns: 1fr;
+  }
+}
+.kx-cal__grid {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  overflow: hidden;
+}
+.kx-cal__weekhead,
+.kx-cal__week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.kx-cal__weekhead {
+  border-bottom: var(--border-card);
+}
+.kx-cal__wd {
+  padding: 8px;
+  text-align: center;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+}
+.kx-cal__wd--sun {
+  color: var(--color-error);
+}
+.kx-cal__cell {
+  min-height: 96px;
+  border-right: 1px solid var(--color-neutral-100);
+  border-bottom: 1px solid var(--color-neutral-100);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  cursor: pointer;
+  background: var(--color-white);
+}
+.kx-cal__cell:hover {
+  background: var(--color-primary-050);
+}
+.kx-cal__cell.is-other {
+  background: var(--color-neutral-050);
+}
+.kx-cal__cell.is-selected {
+  outline: 2px solid var(--color-primary-600);
+  outline-offset: -2px;
+}
+.kx-cal__daynum {
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+.kx-cal__cell.is-today .kx-cal__daynum {
+  background: var(--color-primary-600);
+  color: #fff;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.kx-cal__event {
+  font-size: 11px;
+  line-height: 16px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kx-cal__more {
+  font-size: 11px;
+  color: var(--color-neutral-500);
+}
+.kx-cal__legend {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+}
+.kx-cal__legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.kx-cal__swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  display: inline-block;
+}
+.kx-cal__agenda {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.kx-cal__agenda-item {
+  display: flex;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--color-primary-600);
+  background: var(--color-neutral-050);
+}
+
+/* ── SCR-44 검색 ── */
+.kx-search__hero {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+.kx-search__box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 52px;
+  padding: 0 var(--space-4);
+  border: 1.5px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+}
+.kx-search__box:focus-within {
+  border-color: var(--color-primary-600);
+  box-shadow: 0 0 0 3px var(--color-primary-050);
+}
+.kx-search__box input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: var(--fs-h3);
+  background: transparent;
+}
+.kx-search__ai-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-ai-accent);
+  background: var(--color-ai-surface);
+  color: var(--color-ai-accent);
+  font-size: var(--fs-caption);
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.kx-search__ai-toggle.is-off {
+  border-color: var(--color-neutral-200);
+  background: var(--color-white);
+  color: var(--color-neutral-500);
+}
+.kx-search__tabs {
+  display: flex;
+  gap: var(--space-1);
+  border-bottom: var(--border-card);
+  flex-wrap: wrap;
+}
+.kx-search__tab {
+  padding: 8px 14px;
+  border: none;
+  background: transparent;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+.kx-search__tab.is-active {
+  color: var(--color-primary-700);
+  border-bottom-color: var(--color-primary-600);
+}
+.kx-search__result {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  cursor: pointer;
+}
+.kx-search__result:hover {
+  border-color: var(--color-primary-600);
+  background: var(--color-primary-050);
+}
+.kx-search__result-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-050);
+  color: var(--color-primary-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ── SCR-45 회의록 ── */
+.kx-meet {
+  display: grid;
+  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 1100px) {
+  .kx-meet {
+    grid-template-columns: 1fr;
+  }
+}
+.kx-meet__list-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-neutral-100);
+  cursor: pointer;
+}
+.kx-meet__list-item:hover {
+  background: var(--color-primary-050);
+}
+.kx-meet__list-item.is-selected {
+  background: var(--color-primary-100);
+}
+.kx-meet__ai-card {
+  border: 1px solid var(--color-ai-accent);
+  background: var(--color-ai-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+}
+.kx-meet__transcript {
+  max-height: 320px;
+  overflow-y: auto;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  background: var(--color-neutral-050);
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  white-space: pre-wrap;
+}
+.kx-meet__player {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-050);
+  color: var(--color-neutral-500);
+  font-size: var(--fs-body);
+}
+
+/* ── SCR-47 알림센터 ── */
+.kx-noti__chips {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.kx-chip {
+  padding: 6px 14px;
+  border-radius: var(--radius-pill);
+  border: var(--border-card);
+  background: var(--color-white);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kx-chip.is-active {
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+  color: #fff;
+}
+.kx-noti__item {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-neutral-100);
+  align-items: flex-start;
+}
+.kx-noti__item.is-unread {
+  background: var(--color-primary-050);
+}
+.kx-noti__icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--color-primary-050);
+  color: var(--color-primary-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.kx-noti__body {
+  flex: 1;
+  min-width: 0;
+}
+.kx-noti__title {
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  font-size: var(--fs-body);
+}
+.kx-noti__desc {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  margin-top: 2px;
+}
+.kx-noti__time {
+  font-size: var(--fs-caption);
+  color: var(--color-neutral-500);
+  white-space: nowrap;
+}
+.kx-noti__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-primary-600);
+  margin-top: 6px;
+  flex-shrink: 0;
+}
+
+/* ── SCR-48 마이페이지 ── */
+.kx-my {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 900px) {
+  .kx-my {
+    grid-template-columns: 1fr;
+  }
+}
+.kx-my__rail {
+  border: var(--border-card);
+  border-radius: var(--radius-lg);
+  background: var(--color-white);
+  padding: var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kx-my__rail-btn {
+  text-align: left;
+  padding: 10px var(--space-3);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  cursor: pointer;
+}
+.kx-my__rail-btn.is-active {
+  background: var(--color-primary-050);
+  color: var(--color-primary-700);
+}
+.kx-my__avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--color-primary-600);
+  color: #fff;
+  font-size: 26px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kx-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+}
+
+/* ── 토스트 ── */
+.kx-toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 60;
+  background: var(--color-neutral-900);
+  color: #fff;
+  padding: 10px 18px;
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-body);
+  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.24);
+}
+
+/* ── 페이지네이션 ── */
+.kx-pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) 0 0;
+  font-size: var(--fs-body);
+  color: var(--color-neutral-700);
+}
+.kx-pager button {
+  height: 32px;
+  min-width: 32px;
+  padding: 0 10px;
+  border: var(--border-card);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  cursor: pointer;
+  color: var(--color-neutral-700);
+}
+.kx-pager button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* 스크롤 컨테이너 상한 */
+.kx-scroll-70 {
+  max-height: 70vh;
+  overflow-y: auto;
+}
diff --git a/src/frontend/src/screens/work/workShared.tsx b/src/frontend/src/screens/work/workShared.tsx
new file mode 100644
index 0000000..b504732
--- /dev/null
+++ b/src/frontend/src/screens/work/workShared.tsx
@@ -0,0 +1,85 @@
+/*
+ * §5B 업무 화면 공유 유틸 — 날짜 포맷·상태 필·토스트.
+ * 백엔드 상태 문자열은 그대로 표기(권위)하되, 알려진 코드는 톤으로 매핑한다.
+ */
+import { useCallback, useState } from 'react';
+import { ApiRequestError } from '../../api/client';
+
+/** ISO/DB 문자열 → "MM.DD" (실패 시 원문 앞 10자). */
+export function fmtDate(s: string | null | undefined): string {
+  if (!s) return '-';
+  const d = new Date(s);
+  if (Number.isNaN(d.getTime())) return s.slice(0, 10);
+  return `${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
+}
+
+/** ISO/DB 문자열 → "YYYY.MM.DD HH:mm". */
+export function fmtDateTime(s: string | null | undefined): string {
+  if (!s) return '-';
+  const d = new Date(s);
+  if (Number.isNaN(d.getTime())) return s;
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}.${p(d.getMonth() + 1)}.${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+/** 상대 시간(방금·N분·N시간·N일 전). */
+export function timeAgo(s: string | null | undefined): string {
+  if (!s) return '';
+  const d = new Date(s);
+  if (Number.isNaN(d.getTime())) return fmtDate(s);
+  const diff = Date.now() - d.getTime();
+  const min = Math.floor(diff / 60000);
+  if (min < 1) return '방금';
+  if (min < 60) return `${min}분 전`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}시간 전`;
+  const day = Math.floor(hr / 24);
+  if (day < 7) return `${day}일 전`;
+  return fmtDate(s);
+}
+
+/** 봉투 오류 → 한국어 메시지(코드 우선). */
+export function errMessage(e: unknown): string {
+  if (e instanceof ApiRequestError) {
+    if (e.code === 'FORBIDDEN') return '권한이 없습니다.';
+    if (e.code === 'NOT_FOUND') return '대상을 찾을 수 없습니다.';
+    if (e.code === 'NOT_IMPLEMENTED') return '준비 중인 기능입니다.';
+    return e.message;
+  }
+  if (e instanceof Error) return e.message;
+  return '요청을 처리하지 못했습니다.';
+}
+
+type PillTone = 'neutral' | 'info' | 'warn' | 'success' | 'danger';
+
+/** 상태 코드 → 필 톤·라벨(백엔드 원문 라벨 표기, 알려진 코드만 톤 부여). */
+export function statusPillTone(raw: string | null | undefined): PillTone {
+  const v = (raw ?? '').toUpperCase();
+  if (['DONE', 'ANSWERED', 'COMPLETED', 'COMPLETE', '완료', '답변완료', 'CLOSED'].includes(v)) return 'success';
+  if (['REVIEWING', 'IN_PROGRESS', 'PROGRESS', '진행중', '검토중', 'OPEN'].includes(v)) return 'info';
+  if (['RECEIVED', '접수', 'PENDING', 'WAIT'].includes(v)) return 'neutral';
+  if (['REJECTED', '반려', 'BLOCKED', 'FAILED'].includes(v)) return 'danger';
+  if (['HOLD', 'DELAYED', '보류'].includes(v)) return 'warn';
+  return 'neutral';
+}
+
+/** 상태 필 — 라벨은 원문 유지. */
+export function StatusPill({ value }: { value: string | null | undefined }) {
+  if (!value) return <span className="kx-pill kx-pill--neutral">-</span>;
+  return <span className={`kx-pill kx-pill--${statusPillTone(value)}`}>{value}</span>;
+}
+
+/** 간단 토스트 훅. */
+export function useToast() {
+  const [toast, setToast] = useState<string | null>(null);
+  const show = useCallback((msg: string) => {
+    setToast(msg);
+    window.setTimeout(() => setToast(null), 2600);
+  }, []);
+  const node = toast ? (
+    <div className="kx-toast" role="status">
+      {toast}
+    </div>
+  ) : null;
+  return { show, node };
+}
diff --git a/src/frontend/src/store/authStore.ts b/src/frontend/src/store/authStore.ts
new file mode 100644
index 0000000..ad8504a
--- /dev/null
+++ b/src/frontend/src/store/authStore.ts
@@ -0,0 +1,53 @@
+/*
+ * 인증 상태 (zustand) — 로그인 토큰·사용자·워크스페이스·현재 선택 행사.
+ * 토큰은 client.ts의 setAccessToken과 동기화(단일 출처는 client, 여기선 표시 상태).
+ */
+import { create } from 'zustand';
+import { getAccessToken, setAccessToken } from '../api/client';
+import type { AuthUser, EventRole, LoginResponse, WorkspaceDto } from '../api/types';
+
+interface AuthState {
+  user: AuthUser | null;
+  workspaces: WorkspaceDto[];
+  currentEventId: string | null;
+  isAuthenticated: boolean;
+  applyLogin: (res: LoginResponse) => void;
+  selectEvent: (eventId: string) => void;
+  logout: () => void;
+  currentWorkspace: () => WorkspaceDto | null;
+  roleForCurrent: () => EventRole | null;
+  // 전역 역할(app_user.role_code — 'ADMIN' | 'MANAGER' | …). 없으면 null. 관리자 판정(AdminGuard) 등에 사용.
+  globalRole: () => string | null;
+}
+
+export const useAuthStore = create<AuthState>((set, get) => ({
+  user: null,
+  workspaces: [],
+  currentEventId: null,
+  isAuthenticated: Boolean(getAccessToken()),
+
+  applyLogin: (res) => {
+    setAccessToken(res.accessToken);
+    set({
+      user: res.user,
+      workspaces: res.workspaces,
+      isAuthenticated: true,
+    });
+  },
+
+  selectEvent: (eventId) => set({ currentEventId: eventId }),
+
+  logout: () => {
+    setAccessToken(null);
+    set({ user: null, workspaces: [], currentEventId: null, isAuthenticated: false });
+  },
+
+  currentWorkspace: () => {
+    const { workspaces, currentEventId } = get();
+    return workspaces.find((w) => w.eventId === currentEventId) ?? null;
+  },
+
+  roleForCurrent: () => get().currentWorkspace()?.myRole ?? null,
+
+  globalRole: () => get().user?.roleCode ?? null,
+}));
diff --git a/src/frontend/src/store/mdiStore.ts b/src/frontend/src/store/mdiStore.ts
new file mode 100644
index 0000000..eaa2cf2
--- /dev/null
+++ b/src/frontend/src/store/mdiStore.ts
@@ -0,0 +1,150 @@
+/*
+ * MDI(다중 문서 인터페이스) 탭 상태 (zustand) — design.md §2.7 MDI 셸.
+ *
+ * W7 범위(셸 레이어 라우팅 래핑 = "탭 = 라우트 북마크"):
+ * 라우트 구조는 App.tsx 가 소유(불변). 이 스토어는 열린 문서 탭의 목록·활성 경로만 관리하며
+ * 실제 화면 전환은 react-router 이 담당한다. 비활성 탭의 DOM 상태 보존(display:none DocumentHost)은
+ * 후속 웨이브 과제로, 본 웨이브는 순증 레이어(탭 북마크 + 현재 라우트 동기화)만 구현한다.
+ *
+ * 지속: sessionStorage(새로고침 유지, 브라우저 종료 시 소멸). 직렬화 대상은 {path,label} 목록·활성 path.
+ * 패턴: themeStore(모듈 로드 시 초기값 복원, set 시 즉시 저장).
+ */
+import { create } from 'zustand';
+
+export interface MdiTab {
+  /** 문서 라우트(딥링크) — 문서키 겸 dedup 기준. */
+  path: string;
+  /** 탭에 표시할 화면명(라벨 매핑 테이블 해소값). */
+  label: string;
+}
+
+/** 동시 열림 상한 — 초과 시 가장 오래된 비활성 탭을 닫는다. */
+export const MAX_TABS = 10;
+
+const STORAGE_KEY = 'kx-mdi';
+
+interface Persisted {
+  tabs: MdiTab[];
+  activePath: string | null;
+}
+
+function readStored(): Persisted {
+  if (typeof sessionStorage === 'undefined') return { tabs: [], activePath: null };
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return { tabs: [], activePath: null };
+    const parsed = JSON.parse(raw) as Partial<Persisted>;
+    const tabs = Array.isArray(parsed.tabs)
+      ? parsed.tabs.filter(
+          (t): t is MdiTab =>
+            !!t && typeof t.path === 'string' && typeof t.label === 'string',
+        )
+      : [];
+    const activePath =
+      typeof parsed.activePath === 'string' && tabs.some((t) => t.path === parsed.activePath)
+        ? parsed.activePath
+        : (tabs[tabs.length - 1]?.path ?? null);
+    return { tabs, activePath };
+  } catch {
+    return { tabs: [], activePath: null };
+  }
+}
+
+function persist(state: Persisted) {
+  if (typeof sessionStorage === 'undefined') return;
+  try {
+    sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ tabs: state.tabs, activePath: state.activePath }),
+    );
+  } catch {
+    /* 저장 실패(쿼터·프라이빗 모드)는 무시 — 세션 지속은 best-effort. */
+  }
+}
+
+interface MdiState {
+  tabs: MdiTab[];
+  activePath: string | null;
+
+  /**
+   * 문서 탭 열기/활성 전환 — 현재 라우트 동기화의 진입점.
+   * 이미 열린 경로면 새로 만들지 않고 활성만 전환(중복 방지, §2.7-2).
+   * 라벨이 갱신되면 반영한다(예: 딥링크로 먼저 열린 뒤 매핑 해소).
+   * 상한 초과 시 가장 오래된 비활성 탭을 닫는다.
+   */
+  openTab: (path: string, label: string) => void;
+
+  /** 탭 활성 전환(경로가 목록에 있을 때만). */
+  activateTab: (path: string) => void;
+
+  /**
+   * 탭 닫기. 활성 탭을 닫으면 오른쪽(없으면 왼쪽) 인접 탭을 활성으로 계산한다.
+   * @returns 닫은 뒤 이동해야 할 활성 경로(없으면 null) — 호출부가 navigate 담당.
+   */
+  closeTab: (path: string) => string | null;
+
+  /** 전 탭 닫기(모두 닫기). @returns 이동할 기본 경로('/home') — 호출부가 navigate 담당. */
+  closeAll: () => string;
+}
+
+const initial = readStored();
+
+export const useMdiStore = create<MdiState>((set, get) => ({
+  tabs: initial.tabs,
+  activePath: initial.activePath,
+
+  openTab: (path, label) => {
+    const { tabs } = get();
+    const existing = tabs.find((t) => t.path === path);
+    let next: MdiTab[];
+    if (existing) {
+      // 라벨만 갱신(위치 유지) — 중복 생성 금지.
+      next = existing.label === label
+        ? tabs
+        : tabs.map((t) => (t.path === path ? { ...t, label } : t));
+    } else {
+      next = [...tabs, { path, label }];
+      // 상한 초과 → 가장 오래된 비활성 탭 제거(활성 대상·방금 연 탭 제외).
+      if (next.length > MAX_TABS) {
+        const victim = next.find((t) => t.path !== path);
+        if (victim) next = next.filter((t) => t.path !== victim.path);
+      }
+    }
+    const state = { tabs: next, activePath: path };
+    persist(state);
+    set(state);
+  },
+
+  activateTab: (path) => {
+    const { tabs } = get();
+    if (!tabs.some((t) => t.path === path)) return;
+    const state = { tabs, activePath: path };
+    persist(state);
+    set({ activePath: path });
+  },
+
+  closeTab: (path) => {
+    const { tabs, activePath } = get();
+    const idx = tabs.findIndex((t) => t.path === path);
+    if (idx === -1) return activePath;
+    const next = tabs.filter((t) => t.path !== path);
+
+    let nextActive = activePath;
+    if (activePath === path) {
+      // 오른쪽 우선, 없으면 왼쪽 인접.
+      const neighbor = tabs[idx + 1] ?? tabs[idx - 1] ?? null;
+      nextActive = neighbor ? neighbor.path : null;
+    }
+    const state = { tabs: next, activePath: nextActive };
+    persist(state);
+    set(state);
+    return nextActive;
+  },
+
+  closeAll: () => {
+    const state = { tabs: [], activePath: null };
+    persist(state);
+    set(state);
+    return '/home';
+  },
+}));
diff --git a/src/frontend/src/store/themeStore.ts b/src/frontend/src/store/themeStore.ts
new file mode 100644
index 0000000..ad4af02
--- /dev/null
+++ b/src/frontend/src/store/themeStore.ts
@@ -0,0 +1,78 @@
+/*
+ * 테마 상태 (zustand) — 라이트/다크/시스템 선호 + localStorage 지속.
+ * document.documentElement[data-theme] 를 항상 스탬프해 셸 밖(로그인 등)에도 적용된다.
+ * 값 정의는 CSS(global.css :root[data-theme='dark'] + @media prefers-color-scheme).
+ * 라이트가 기본 — 저장값이 없으면 'system'(OS 선호 추종, 대부분 라이트).
+ */
+import { create } from 'zustand';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+
+const STORAGE_KEY = 'kx-theme';
+const DARK_QUERY = '(prefers-color-scheme: dark)';
+
+function readStored(): ThemeMode {
+  if (typeof localStorage === 'undefined') return 'system';
+  const v = localStorage.getItem(STORAGE_KEY);
+  return v === 'light' || v === 'dark' || v === 'system' ? v : 'system';
+}
+
+function systemPrefersDark(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia(DARK_QUERY).matches
+  );
+}
+
+/** 모드 → 실제 적용 테마(system 은 OS 선호로 해소). */
+export function resolveTheme(mode: ThemeMode): ResolvedTheme {
+  return mode === 'system' ? (systemPrefersDark() ? 'dark' : 'light') : mode;
+}
+
+/** documentElement 에 테마를 스탬프(셸 밖 화면 포함 전역 적용). */
+function stamp(mode: ThemeMode): ResolvedTheme {
+  const resolved = resolveTheme(mode);
+  if (typeof document !== 'undefined') {
+    document.documentElement.dataset.theme = resolved;
+    document.documentElement.style.colorScheme = resolved;
+  }
+  return resolved;
+}
+
+interface ThemeState {
+  mode: ThemeMode;
+  resolved: ResolvedTheme;
+  /** 명시 모드 설정(light|dark|system) — 지속 + 스탬프. */
+  setMode: (mode: ThemeMode) => void;
+  /** 현재 표시 테마의 반대편으로 명시 고정(라이트↔다크). */
+  toggle: () => void;
+}
+
+export const useThemeStore = create<ThemeState>((set, get) => ({
+  mode: readStored(),
+  resolved: resolveTheme(readStored()),
+
+  setMode: (mode) => {
+    if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, mode);
+    set({ mode, resolved: stamp(mode) });
+  },
+
+  toggle: () => {
+    const next: ThemeMode = get().resolved === 'dark' ? 'light' : 'dark';
+    get().setMode(next);
+  },
+}));
+
+// ── 앱 진입 즉시 스탬프(모듈 import 시점 — main.tsx 가 렌더 전에 로드) ──
+stamp(useThemeStore.getState().mode);
+
+// ── 시스템 선호 변경 반영(system 모드일 때만 재해소) ──
+if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+  window.matchMedia(DARK_QUERY).addEventListener('change', () => {
+    if (useThemeStore.getState().mode === 'system') {
+      useThemeStore.setState({ resolved: stamp('system') });
+    }
+  });
+}
diff --git a/src/frontend/src/store/uiStore.ts b/src/frontend/src/store/uiStore.ts
new file mode 100644
index 0000000..c364217
--- /dev/null
+++ b/src/frontend/src/store/uiStore.ts
@@ -0,0 +1,61 @@
+/*
+ * 셸 UI 상태 (zustand) — 사이드바 접힘(navCollapsed) 토글 + localStorage 지속.
+ * WISE(UIWS) uiStore 패턴 이식: 상단 Header 햄버거(nav-toggle)가 toggleNav 로 사이드바를 접고,
+ * 데스크톱=사이드바 숨김(콘텐츠 전폭), <1024px=오버레이 드로어(+백드롭). themeStore 와 동일한
+ * 지속·스탬프 관례를 따른다(신규 store 최소 표면).
+ */
+import { create } from 'zustand';
+
+const STORAGE_KEY = 'kx-nav-collapsed';
+const MOBILE_QUERY = '(max-width: 1024px)';
+
+/**
+ * 초기 접힘 상태 — 저장값 우선, 없으면 뷰포트로 추정(모바일이면 접힘=드로어 닫힘 기본).
+ * 모바일에서 저장값 없이 열린 채 첫 렌더되어 드로어가 화면을 덮는 회귀를 방지한다.
+ */
+function readInitial(): boolean {
+  if (typeof localStorage !== 'undefined') {
+    const v = localStorage.getItem(STORAGE_KEY);
+    if (v === 'true') return true;
+    if (v === 'false') return false;
+  }
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    return window.matchMedia(MOBILE_QUERY).matches;
+  }
+  return false;
+}
+
+interface UiState {
+  /** 사이드바 접힘 여부. true=접힘(데스크톱 숨김 / 모바일 드로어 닫힘). */
+  navCollapsed: boolean;
+  /** 명시 설정 — 지속. */
+  setNavCollapsed: (v: boolean) => void;
+  /** 햄버거 토글. */
+  toggleNav: () => void;
+}
+
+function persist(v: boolean) {
+  if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, String(v));
+}
+
+export const useUiStore = create<UiState>((set, get) => ({
+  navCollapsed: readInitial(),
+  setNavCollapsed: (v) => {
+    persist(v);
+    set({ navCollapsed: v });
+  },
+  toggleNav: () => {
+    const next = !get().navCollapsed;
+    persist(next);
+    set({ navCollapsed: next });
+  },
+}));
+
+/** <1024px 여부(모바일 드로어 판정용). SSR 안전. */
+export function isMobileViewport(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia(MOBILE_QUERY).matches
+  );
+}
diff --git a/src/frontend/src/styles/global.css b/src/frontend/src/styles/global.css
new file mode 100644
index 0000000..4be39bc
--- /dev/null
+++ b/src/frontend/src/styles/global.css
@@ -0,0 +1,231 @@
+@import './tokens.css';
+
+/*
+ * ── 다크 테마 (W5 NFR) ──
+ * 값 단일 출처: `--dk-*` 상수를 :root 에 정의 → 명시 선택(data-theme=dark)과
+ * 시스템 선호(@media, 명시 선택 없을 때) 두 경로가 동일 값을 remap 한다.
+ * 라이트가 기본 — data-theme 미지정 + OS 라이트면 tokens.css :root 원본을 그대로 사용.
+ * 런타임은 themeStore 가 document.documentElement[data-theme] 를 항상 스탬프한다.
+ */
+:root {
+  /* 다크 팔레트 상수 (slate — 캔버스 #1C2536 계열 정렬) */
+  --dk-neutral-050: #10151f; /* 앱 배경 */
+  --dk-surface: #1a2130; /* 카드/화이트 서피스 */
+  --dk-neutral-100: #232c3d;
+  --dk-neutral-200: #2f3a4c; /* 보더·구분선 */
+  --dk-neutral-500: #8b94a4;
+  --dk-neutral-700: #c6ced9;
+  --dk-neutral-900: #f0f3f8;
+  --dk-primary-600: #3f9ae2;
+  --dk-primary-700: #62b0ea;
+  --dk-primary-900: #2d7cc0;
+  --dk-primary-100: #16344c; /* 활성 사이드바 */
+  --dk-primary-050: #14202f; /* 서브 배경·테이블 호버 */
+  --dk-ai-accent: #9a80ff;
+  --dk-ai-surface: #221d39;
+  --dk-ai-bg: #2a2247;
+  --dk-ai-accent-strong: #7c5cff;
+  --dk-success: #34c88b;
+  --dk-warning: #e0983a;
+  --dk-error: #f4796d;
+  --dk-success-bg: #122a20;
+  --dk-warning-bg: #2c2413;
+  --dk-error-bg: #2e1a19;
+  --dk-violation-warn-bg: #3a2c10;
+  --dk-violation-warn-text: #e5a54a;
+  --dk-row-hover: #222c3c;
+  --dk-zebra: #151c28;
+  --dk-skeleton-a: #1e2634;
+  --dk-skeleton-b: #28323f;
+  --dk-ai-skeleton-a: #221d39;
+  --dk-ai-skeleton-b: #2c2547;
+}
+
+/* remap 리스트 — 명시 다크 선택 */
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --color-neutral-050: var(--dk-neutral-050);
+  --color-white: var(--dk-surface);
+  --color-neutral-100: var(--dk-neutral-100);
+  --color-neutral-200: var(--dk-neutral-200);
+  --color-neutral-500: var(--dk-neutral-500);
+  --color-neutral-700: var(--dk-neutral-700);
+  --color-neutral-900: var(--dk-neutral-900);
+  --color-primary-600: var(--dk-primary-600);
+  --color-primary-700: var(--dk-primary-700);
+  --color-primary-900: var(--dk-primary-900);
+  --color-primary-100: var(--dk-primary-100);
+  --color-primary-050: var(--dk-primary-050);
+  --color-ai-accent: var(--dk-ai-accent);
+  --color-ai-surface: var(--dk-ai-surface);
+  --color-ai-bg: var(--dk-ai-bg);
+  --color-ai-accent-strong: var(--dk-ai-accent-strong);
+  --color-success: var(--dk-success);
+  --color-warning: var(--dk-warning);
+  --color-error: var(--dk-error);
+  --color-success-bg: var(--dk-success-bg);
+  --color-warning-bg: var(--dk-warning-bg);
+  --color-error-bg: var(--dk-error-bg);
+  --color-violation-warn-bg: var(--dk-violation-warn-bg);
+  --color-violation-warn-text: var(--dk-violation-warn-text);
+  --row-hover: var(--dk-row-hover);
+  --zebra: var(--dk-zebra);
+  --skeleton-a: var(--dk-skeleton-a);
+  --skeleton-b: var(--dk-skeleton-b);
+  --ai-skeleton-a: var(--dk-ai-skeleton-a);
+  --ai-skeleton-b: var(--dk-ai-skeleton-b);
+  --focus-ring: var(--dk-primary-700);
+  --shadow-level2: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+/* 시스템 선호 폴백 — 명시 선택(data-theme) 없고 OS 다크일 때 (pre-JS/no-JS 대비) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --color-neutral-050: var(--dk-neutral-050);
+    --color-white: var(--dk-surface);
+    --color-neutral-100: var(--dk-neutral-100);
+    --color-neutral-200: var(--dk-neutral-200);
+    --color-neutral-500: var(--dk-neutral-500);
+    --color-neutral-700: var(--dk-neutral-700);
+    --color-neutral-900: var(--dk-neutral-900);
+    --color-primary-600: var(--dk-primary-600);
+    --color-primary-700: var(--dk-primary-700);
+    --color-primary-900: var(--dk-primary-900);
+    --color-primary-100: var(--dk-primary-100);
+    --color-primary-050: var(--dk-primary-050);
+    --color-ai-accent: var(--dk-ai-accent);
+    --color-ai-surface: var(--dk-ai-surface);
+    --color-ai-bg: var(--dk-ai-bg);
+    --color-ai-accent-strong: var(--dk-ai-accent-strong);
+    --color-success: var(--dk-success);
+    --color-warning: var(--dk-warning);
+    --color-error: var(--dk-error);
+    --color-success-bg: var(--dk-success-bg);
+    --color-warning-bg: var(--dk-warning-bg);
+    --color-error-bg: var(--dk-error-bg);
+    --color-violation-warn-bg: var(--dk-violation-warn-bg);
+    --color-violation-warn-text: var(--dk-violation-warn-text);
+    --row-hover: var(--dk-row-hover);
+    --zebra: var(--dk-zebra);
+    --skeleton-a: var(--dk-skeleton-a);
+    --skeleton-b: var(--dk-skeleton-b);
+    --ai-skeleton-a: var(--dk-ai-skeleton-a);
+    --ai-skeleton-b: var(--dk-ai-skeleton-b);
+    --focus-ring: var(--dk-primary-700);
+    --shadow-level2: 0 4px 12px rgba(0, 0, 0, 0.5);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  color: var(--color-neutral-700);
+  background: var(--color-neutral-050);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+  margin: 0;
+}
+
+a {
+  color: var(--color-primary-600);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--color-primary-700);
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+input,
+select,
+textarea {
+  font-family: inherit;
+}
+
+/* 숫자·좌표·금액 tabular numerals */
+.tnum {
+  font-variant-numeric: tabular-nums;
+}
+
+.mono {
+  font-family: var(--font-mono);
+  font-size: var(--fs-mono);
+}
+
+/* 접근성: 키보드 포커스 링 (WCAG AA) — 토큰화(테마별 대비 확보) */
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* 스크린리더 전용 */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* prefers-reduced-motion 존중 — 전역 (셸·화면 공통) */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto !important;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* 스킵 링크 — 키보드 사용자용 "본문 바로가기" (포커스 시 노출) */
+.kx-skip-link {
+  position: absolute;
+  left: var(--space-3);
+  top: -48px;
+  z-index: 100;
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-600);
+  color: var(--color-white);
+  font-size: var(--fs-body);
+  font-weight: 600;
+  transition: top 0.15s ease;
+}
+.kx-skip-link:focus-visible {
+  top: var(--space-3);
+  color: var(--color-white);
+}
diff --git a/src/frontend/src/styles/tokens.css b/src/frontend/src/styles/tokens.css
new file mode 100644
index 0000000..e1a0eb7
--- /dev/null
+++ b/src/frontend/src/styles/tokens.css
@@ -0,0 +1,116 @@
+/*
+ * 킨텍스 AI 전시관리 — 디자인 토큰 (단일 출처)
+ * 근거: docs/design.md v1.1 §1 (컬러 팔레트·타이포·라운드·엘리베이션·그리드)
+ * 하드코딩 금지 — 컴포넌트는 이 변수만 참조한다.
+ */
+:root {
+  /* ── 컬러 팔레트 (§1-2) ── */
+  --color-primary-700: #004c86; /* 헤더, 강조 텍스트, hover */
+  --color-primary-600: #0066b3; /* 주 브랜드 블루(킨텍스 CI) */
+  --color-primary-100: #d9eaf7; /* 선택 배경, 활성 사이드바 */
+  --color-primary-050: #eff6fc; /* 페이지 서브 배경, 테이블 호버 */
+  --color-primary-900: #00427d; /* 짙은 대체 톤(hover 한정) */
+
+  --color-ai-accent: #6d4aff; /* AI 액션 전용 */
+  --color-ai-surface: #f5f3ff; /* AI 카드 배경 (Intelligence 변형 채택) */
+
+  --color-success: #0e8a5f;
+  --color-warning: #b45309;
+  --color-error: #d92d20;
+
+  --color-neutral-900: #101828; /* 본문 제목 */
+  --color-neutral-700: #344054; /* 본문 텍스트 */
+  --color-neutral-500: #667085; /* 보조 텍스트, 플레이스홀더 */
+  --color-neutral-200: #e4e7ec; /* 구분선, 카드 테두리 */
+  --color-neutral-100: #f2f4f7;
+  --color-neutral-050: #f9fafb; /* 앱 배경 */
+  --color-white: #ffffff;
+
+  --color-canvas-bg: #1c2536; /* 에디터 캔버스 다크 서피스 */
+  --color-canvas-line: #2f3b52; /* 캔버스 위 보조 라인 */
+
+  /* 배선 오버레이 (S6) */
+  --color-wire-power: #ef4444; /* 전기(적) */
+  --color-wire-network: #3b82f6; /* 네트워크(청) */
+  --color-wire-water: #22c55e; /* 급배수(녹) */
+
+  /* 위반 심각도 */
+  --color-violation-block: var(--color-error);
+  --color-violation-warn: #f79009; /* 도면 오버레이용 주황 (텍스트는 warning 진값) */
+  --color-violation-warn-bg: #fef0c7;
+  --color-violation-warn-text: #b54708;
+
+  /* 상태 배지 진행 색 (§1-4) */
+  --status-draft: var(--color-neutral-500); /* 작성중(회색) */
+  --status-submitted: var(--color-primary-600); /* 제출됨(파랑) */
+  --status-ai-review: var(--color-ai-accent); /* AI검토(보라) */
+  --status-approved: var(--color-success); /* 승인(녹색) */
+  --status-rejected: var(--color-error); /* 반려(빨강) */
+  --status-building: #7a5af8; /* 시공중 */
+  --status-inspected: var(--color-primary-700); /* 검수완료 */
+
+  /* ── 타이포 (§1-3) — Pretendard 권위, Inter 라틴 보조 ── */
+  --font-sans: 'Pretendard', 'Inter', 'Noto Sans KR', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
+
+  --fs-display: 28px;
+  --lh-display: 36px;
+  --fs-h1: 24px;
+  --lh-h1: 32px;
+  --fs-h2: 20px;
+  --lh-h2: 28px;
+  --fs-h3: 16px;
+  --lh-h3: 24px;
+  --fs-body: 14px;
+  --lh-body: 22px;
+  --fs-caption: 12px;
+  --lh-caption: 18px;
+  --fs-mono: 13px;
+
+  /* ── 라운드 (§1-4) — 최대 8px, 칩은 pill ── */
+  --radius-sm: 4px; /* 버튼·인풋·작은 요소 */
+  --radius-lg: 8px; /* 카드·모달·섹션 */
+  --radius-pill: 9999px;
+
+  /* ── 엘리베이션 — 톤 레이어 + 1px 테두리 ── */
+  --border-card: 1px solid var(--color-neutral-200);
+  --shadow-level2: 0 4px 12px rgba(16, 24, 40, 0.1);
+  --accent-ai: 4px solid var(--color-ai-accent); /* AI 카드 좌측 액센트 */
+
+  /* ── 그리드·간격 (§1-4) — 4px 베이스 ── */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-8: 48px;
+  --container-max: 1440px;
+  --gutter: 24px;
+  --sidebar-w: 240px;
+  --panel-left-w: 240px;
+  --panel-right-w: 360px;
+
+  /* 테이블 */
+  --row-h: 44px;
+  --row-h-mobile: 48px;
+  --zebra: var(--color-neutral-050);
+  --row-hover: #f1f5f9;
+
+  /* ── 시맨틱 상태 배경 톤 (배지·칩·상태 카드) — 라이트 기본값, 다크는 global.css 에서 재정의 ── */
+  --color-success-bg: #e6f4ee;
+  --color-warning-bg: #fff4e5;
+  --color-error-bg: #fef3f2;
+  --color-ai-bg: #ede9fe; /* AI검토·시공중 배지 배경(보라 옅음) */
+  --color-ai-accent-strong: #5b3aeb; /* AI 버튼 hover 진한 톤 */
+  --ai-glow: rgba(109, 74, 255, 0.3); /* AI 버튼 글로우 */
+
+  /* 스켈레톤 시머 (states·ai-image) */
+  --skeleton-a: #eceff3;
+  --skeleton-b: #f6f8fa;
+  --ai-skeleton-a: #ece9fb;
+  --ai-skeleton-b: #f5f3ff;
+
+  /* 접근성 — 포커스 링 (라이트 기본, 다크 재정의) */
+  --focus-ring: var(--color-primary-600);
+}
diff --git a/src/frontend/src/vite-env.d.ts b/src/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..55132bf
--- /dev/null
+++ b/src/frontend/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE?: string;
+  readonly VITE_BACKEND_ORIGIN?: string;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/src/frontend/tsconfig.app.json b/src/frontend/tsconfig.app.json
new file mode 100644
index 0000000..e0f5a81
--- /dev/null
+++ b/src/frontend/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/src/frontend/tsconfig.json b/src/frontend/tsconfig.json
new file mode 100644
index 0000000..d32ff68
--- /dev/null
+++ b/src/frontend/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}
diff --git a/src/frontend/tsconfig.node.json b/src/frontend/tsconfig.node.json
new file mode 100644
index 0000000..40424e3
--- /dev/null
+++ b/src/frontend/tsconfig.node.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "types": ["node"],
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/src/frontend/vite.config.d.ts b/src/frontend/vite.config.d.ts
new file mode 100644
index 0000000..340562a
--- /dev/null
+++ b/src/frontend/vite.config.d.ts
@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;
diff --git a/src/frontend/vite.config.js b/src/frontend/vite.config.js
new file mode 100644
index 0000000..3a978d3
--- /dev/null
+++ b/src/frontend/vite.config.js
@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { fileURLToPath, URL } from 'node:url';
+// 백엔드(Spring Boot)는 기본 :8080. 개발 중 /api·/ws 프록시.
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
+    },
+    server: {
+        port: 5173,
+        proxy: {
+            '/api': {
+                target: process.env.VITE_BACKEND_ORIGIN || 'http://localhost:8080',
+                changeOrigin: true,
+            },
+            // 관리자 업로드 정적 파일(로그인 슬라이드 이미지) — 백엔드가 서빙
+            '/uploads': {
+                target: process.env.VITE_BACKEND_ORIGIN || 'http://localhost:8080',
+                changeOrigin: true,
+            },
+            '/ws': {
+                target: process.env.VITE_BACKEND_ORIGIN || 'http://localhost:8080',
+                changeOrigin: true,
+                ws: true,
+            },
+        },
+    },
+});
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
new file mode 100644
index 0000000..636a725
--- /dev/null
+++ b/src/frontend/vite.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { fileURLToPath, URL } from 'node:url';
+
+// 백엔드(Spring Boot)는 기본 :8080. 개발 중 /api·/ws 프록시.
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: process.env.VITE_BACKEND_ORIGIN || 'http://localhost:8080',
+        changeOrigin: true,
+      },
+      // 관리자 업로드 정적 파일(로그인 슬라이드 이미지) — 백엔드가 서빙
+      '/uploads': {
+        target: process.env.VITE_BACKEND_ORIGIN || 'http://localhost:8080',
+        changeOrigin: true,
+      },
+      '/ws': {
+        target: process.env.VITE_BACKEND_ORIGIN || 'http://localhost:8080',
+        changeOrigin: true,
+        ws: true,
+      },
+    },
+  },
+});
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_ai_bot/code.html b/stitch_kintex_ai_system_architect/_icons/icon_ai_bot/code.html
new file mode 100644
index 0000000..abd30ed
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/_icons/icon_ai_bot/code.html
@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="14" width="32" height="24" rx="4" stroke="#6D4AFF" stroke-width="2.5"/>
+  <circle cx="18" cy="24" r="2" fill="#6D4AFF"/>
+  <circle cx="30" cy="24" r="2" fill="#6D4AFF"/>
+  <path d="M20 32C20 32 22 34 24 34C26 34 28 32 28 32" stroke="#6D4AFF" stroke-width="2" stroke-linecap="round"/>
+  <path d="M14 14V10C14 8.89543 14.8954 8 16 8H32C33.1046 8 34 8.89543 34 10V14" stroke="#6D4AFF" stroke-width="2"/>
+  <path d="M8 22H5C4.44772 22 4 22.4477 4 23V29C4 29.5523 4.44772 30 5 30H8" stroke="#6D4AFF" stroke-width="2"/>
+  <path x="40" y="22" d="M40 22H43C43.5523 22 44 22.4477 44 23V29C44 29.5523 43.5523 30 43 30H40" stroke="#6D4AFF" stroke-width="2"/>
+  <path d="M24 8V4" stroke="#6D4AFF" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="24" cy="3" r="1.5" fill="#6D4AFF"/>
+</svg>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_ai_bot/screen.png b/stitch_kintex_ai_system_architect/_icons/icon_ai_bot/screen.png
new file mode 100644
index 0000000..0fdd0a0
Binary files /dev/null and b/stitch_kintex_ai_system_architect/_icons/icon_ai_bot/screen.png differ
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_analytics/code.html b/stitch_kintex_ai_system_architect/_icons/icon_analytics/code.html
new file mode 100644
index 0000000..e207818
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/_icons/icon_analytics/code.html
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 20V10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M12 20V4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M6 20V14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_analytics/screen.png b/stitch_kintex_ai_system_architect/_icons/icon_analytics/screen.png
new file mode 100644
index 0000000..6e0f742
Binary files /dev/null and b/stitch_kintex_ai_system_architect/_icons/icon_analytics/screen.png differ
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_calendar/code.html b/stitch_kintex_ai_system_architect/_icons/icon_calendar/code.html
new file mode 100644
index 0000000..19ce073
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/_icons/icon_calendar/code.html
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
+  <path d="M16 2V6" stroke="currentColor" stroke-width="2"/>
+  <path d="M8 2V6" stroke="currentColor" stroke-width="2"/>
+  <path d="M3 10H21" stroke="currentColor" stroke-width="2"/>
+</svg>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_calendar/screen.png b/stitch_kintex_ai_system_architect/_icons/icon_calendar/screen.png
new file mode 100644
index 0000000..0483f7b
Binary files /dev/null and b/stitch_kintex_ai_system_architect/_icons/icon_calendar/screen.png differ
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_dashboard/code.html b/stitch_kintex_ai_system_architect/_icons/icon_dashboard/code.html
new file mode 100644
index 0000000..f7a42c4
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/_icons/icon_dashboard/code.html
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
+  <path d="M3 9H21" stroke="currentColor" stroke-width="2"/>
+  <path d="M9 21V9" stroke="currentColor" stroke-width="2"/>
+</svg>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_dashboard/screen.png b/stitch_kintex_ai_system_architect/_icons/icon_dashboard/screen.png
new file mode 100644
index 0000000..f0f6afb
Binary files /dev/null and b/stitch_kintex_ai_system_architect/_icons/icon_dashboard/screen.png differ
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_menu/code.html b/stitch_kintex_ai_system_architect/_icons/icon_menu/code.html
new file mode 100644
index 0000000..c7e5f11
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/_icons/icon_menu/code.html
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_menu/screen.png b/stitch_kintex_ai_system_architect/_icons/icon_menu/screen.png
new file mode 100644
index 0000000..a97c444
Binary files /dev/null and b/stitch_kintex_ai_system_architect/_icons/icon_menu/screen.png differ
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_operations/code.html b/stitch_kintex_ai_system_architect/_icons/icon_operations/code.html
new file mode 100644
index 0000000..b60c18a
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/_icons/icon_operations/code.html
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
+  <path d="M12 15V22" stroke="currentColor" stroke-width="2"/>
+</svg>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_operations/screen.png b/stitch_kintex_ai_system_architect/_icons/icon_operations/screen.png
new file mode 100644
index 0000000..8df28de
Binary files /dev/null and b/stitch_kintex_ai_system_architect/_icons/icon_operations/screen.png differ
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_search/code.html b/stitch_kintex_ai_system_architect/_icons/icon_search/code.html
new file mode 100644
index 0000000..eb61ffa
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/_icons/icon_search/code.html
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
+  <path d="M20 20L16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/_icons/icon_search/screen.png b/stitch_kintex_ai_system_architect/_icons/icon_search/screen.png
new file mode 100644
index 0000000..482c155
Binary files /dev/null and b/stitch_kintex_ai_system_architect/_icons/icon_search/screen.png differ
diff --git a/stitch_kintex_ai_system_architect/admin_dashboard_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/admin_dashboard_kintex_ai_system/code.html
new file mode 100644
index 0000000..949af3a
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/admin_dashboard_kintex_ai_system/code.html
@@ -0,0 +1,430 @@
+<!DOCTYPE html><html class="light" lang="en"><head></head><body class="bg-background text-on-background font-body-md overflow-x-hidden antialiased">```html
+
+<meta charset="utf-8">
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
+<title>KINTEX AI CMS - Dashboard</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "surface-border": "#E5E7EB",
+                    "surface-dim": "#d9dadb",
+                    "surface-bright": "#f8f9fa",
+                    "outline": "#727782",
+                    "inverse-on-surface": "#f0f1f2",
+                    "primary-fixed-dim": "#a6c8ff",
+                    "error-container": "#ffdad6",
+                    "on-background": "#191c1d",
+                    "on-surface": "#191c1d",
+                    "on-tertiary-container": "#ffc1b8",
+                    "on-primary-fixed-variant": "#004786",
+                    "on-primary": "#ffffff",
+                    "primary-fixed": "#d5e3ff",
+                    "surface-container-lowest": "#ffffff",
+                    "on-tertiary-fixed-variant": "#930002",
+                    "on-secondary": "#ffffff",
+                    "surface-container": "#edeeef",
+                    "surface-tint": "#115fac",
+                    "surface-variant": "#e1e3e4",
+                    "surface-container-highest": "#e1e3e4",
+                    "status-pending": "#F59E0B",
+                    "status-active": "#10B981",
+                    "on-tertiary-fixed": "#410000",
+                    "primary-container": "#0059a6",
+                    "surface-container-high": "#e7e8e9",
+                    "error": "#ba1a1a",
+                    "on-secondary-fixed-variant": "#1e4974",
+                    "secondary-fixed": "#d2e4ff",
+                    "tertiary": "#8a0002",
+                    "tertiary-fixed": "#ffdad5",
+                    "secondary-container": "#a6ccff",
+                    "outline-variant": "#c2c6d3",
+                    "on-surface-variant": "#424751",
+                    "surface-container-low": "#f3f4f5",
+                    "on-primary-fixed": "#001c3b",
+                    "surface": "#f8f9fa",
+                    "inverse-surface": "#2e3132",
+                    "on-error-container": "#93000a",
+                    "tertiary-container": "#b60004",
+                    "primary": "#00427d",
+                    "on-primary-container": "#b6d1ff",
+                    "on-tertiary": "#ffffff",
+                    "on-secondary-container": "#2e5682",
+                    "secondary": "#39608d",
+                    "on-secondary-fixed": "#001c37",
+                    "inverse-primary": "#a6c8ff",
+                    "on-error": "#ffffff",
+                    "secondary-fixed-dim": "#a3c9fc",
+                    "table-header": "#F1F5F9",
+                    "tertiary-fixed-dim": "#ffb4a9",
+                    "background": "#f8f9fa"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.125rem",
+                    "lg": "0.25rem",
+                    "xl": "0.5rem",
+                    "full": "0.75rem"
+            },
+            "spacing": {
+                    "margin-desktop": "32px",
+                    "container-max": "1440px",
+                    "margin-mobile": "16px",
+                    "gutter": "24px",
+                    "stack-sm": "8px",
+                    "stack-md": "16px",
+                    "stack-lg": "24px"
+            },
+            "fontFamily": {
+                    "headline-md": [
+                            "Hanken Grotesk"
+                    ],
+                    "mono-data": [
+                            "jetbrainsMono"
+                    ],
+                    "body-md": [
+                            "Hanken Grotesk"
+                    ],
+                    "headline-lg": [
+                            "Hanken Grotesk"
+                    ],
+                    "headline-lg-mobile": [
+                            "Hanken Grotesk"
+                    ],
+                    "body-sm": [
+                            "Hanken Grotesk"
+                    ],
+                    "label-md": [
+                            "Hanken Grotesk"
+                    ],
+                    "body-lg": [
+                            "Hanken Grotesk"
+                    ]
+            },
+            "fontSize": {
+                    "headline-md": [
+                            "20px",
+                            {
+                                    "lineHeight": "28px",
+                                    "fontWeight": "600"
+                            }
+                    ],
+                    "mono-data": [
+                            "13px",
+                            {
+                                    "lineHeight": "18px",
+                                    "fontWeight": "400"
+                            }
+                    ],
+                    "body-md": [
+                            "14px",
+                            {
+                                    "lineHeight": "20px",
+                                    "fontWeight": "400"
+                            }
+                    ],
+                    "headline-lg": [
+                            "30px",
+                            {
+                                    "lineHeight": "38px",
+                                    "letterSpacing": "-0.02em",
+                                    "fontWeight": "700"
+                            }
+                    ],
+                    "headline-lg-mobile": [
+                            "24px",
+                            {
+                                    "lineHeight": "32px",
+                                    "fontWeight": "700"
+                            }
+                    ],
+                    "body-sm": [
+                            "13px",
+                            {
+                                    "lineHeight": "18px",
+                                    "fontWeight": "400"
+                            }
+                    ],
+                    "label-md": [
+                            "12px",
+                            {
+                                    "lineHeight": "16px",
+                                    "letterSpacing": "0.05em",
+                                    "fontWeight": "600"
+                            }
+                    ],
+                    "body-lg": [
+                            "16px",
+                            {
+                                    "lineHeight": "24px",
+                                    "fontWeight": "400"
+                            }
+                    ]
+            }
+    },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .icon-fill {
+            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+    </style>
+
+<nav class="hidden md:flex w-[240px] h-screen fixed left-0 top-0 bg-surface border-r border-surface-border flex-col py-stack-lg z-50">
+<div class="px-margin-desktop mb-stack-lg">
+<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuDt1Xknrc1Y8U3nIV6ewYeyN8tXpFjPEsXVPB96F8oyD0Ah3VvX2GSupS4YD19zbqoex67mNuCmHKh4XtuF0urGZk3FAwwjZDIu6PDs4YcKuZmMEbRuQrZDXFIcuARq3eA4G5lWgNBvQ12RHvX34GnkFHz5in3XxBq2E7mjsqEc-6UdDr6Wsi_XzE-RDcgGdB9zh5lHTdkxw8DxI3cbqMh-w627ljBUdSFR_XYta_8dCP3-6Xmj4ens-w1ctxsa9RofvA" alt="KINTEX" class="h-8 mb-2">
+<p class="font-body-sm text-body-sm text-on-surface-variant">Exhibition Management</p>
+</div>
+<div class="flex-1 px-4 space-y-2">
+<a class="flex items-center gap-3 px-4 py-3 rounded-lg bg-secondary-container text-on-secondary-container font-semibold transition-colors duration-200" href="#">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLtO2EjzKAcW5wn4YYTv12rmtFAvwxlN4fmvGGktwdLqfBGzTTC8C_nxjBMV0s73Yz_eqq3my6ASAxnQk9MMCNSeoTVuQwK9CU8en_ZU63PoTk6muzScTpKFEU2aFgRqpZAs3IBLHhlZXl4ENmWt1GO_lvpxzlx-FAVMFPeSHBfqi8lMEy8xvdRkiRB0MpVPgcEnBWn0SU0BsxlrRVjlVMlL3gAwpYNlLruSqKP5tDnBgDNwjHSKU9SUV04" class="w-6 h-6" alt="Dashboard">
+                Dashboard
+            </a>
+<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 hover:bg-surface-container-high active:scale-[0.98]" href="#">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLvpb_qiARCcrTrv6YnOIVjyk5szWwIfCGaaCmyRAnuu9aficeKfPTRrRHDgl4gJCHQUc7LYwtF1Ak04oSwBAezPs20C51ZjzHDaBCkRYJaYqHS-DOPHSGLdeLL_S2tlRlUAG-XF_ib2I1Svtqq26yY0uxmEQA5cWHJabFRv_0WVtBKiSP2QbCssxeccpcVHcWr_6CJ6zXonlepkxJcDXURlfHpvg7P2-O1urNto3A0xsepsB1ucua9Vnw" class="w-6 h-6" alt="Schedule">
+                Exhibition Schedule
+            </a>
+<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 hover:bg-surface-container-high active:scale-[0.98]" href="#">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLvz-lIs0s4a8Cy8eurZwY-dsuBDuvrLeIlIdHrd3y0aSi_u9kpOR3v59PRVX3Y1qP8SJ-459rs6AT8ZgXe7HMwRzZCOTLEpNNY1YqLtB8BBuVmnHOOVESaovK6ib38tM-qoAgpfO5Yxp-0ZCx3EwnULjy98lc_fpS8cQgxMEM-G3oAr71ToD4n-SEH55g1Kyz_ucSfAciJazI6fgyJbqOLgEAOJ-J-Bp1O30aTcbYVLFw3GRp7R06emYmc" class="w-6 h-6" alt="Operations">
+                Hall Operations
+            </a>
+<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 hover:bg-surface-container-high active:scale-[0.98]" href="#">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLujD1FMRHChfM_aVKt2cd12chhcnm31L8Ks2EAzo-_FQ1_RV3zmYa4WUlSJ67wYexda4SpJU88Y5L0HdiYx6fLuKFdsDKjKWm1SmTq4PIP2tx1Nys-Txdlq4Wc1keg1GKsgrxNY68bHBEhurr-0NorgLbpp032gBkj_vE345bYKJwSr5MEnipvo_1P7iE9cXEBybLmdLLYK6vM1nB7dbmVt9_NHG3NQgK7wcPfIaNBrnXrEqtZeckWX3v8" class="w-6 h-6" alt="Analytics">
+                Business Intelligence
+            </a>
+</div>
+<div class="px-4 mt-auto space-y-4">
+<button class="w-full bg-primary text-on-primary py-2 rounded-lg font-label-md text-label-md hover:bg-primary-fixed-variant transition-colors flex items-center justify-center gap-2">
+                Create New Event
+            </button>
+<div class="pt-4 border-t border-surface-border space-y-2">
+<a class="flex items-center gap-3 px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
+<span class="material-symbols-outlined">settings</span>
+                    Settings
+                </a>
+<a class="flex items-center gap-3 px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
+<span class="material-symbols-outlined">help</span>
+                    Support
+                </a>
+</div>
+<div class="flex items-center gap-3 px-4 pt-2">
+<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center">
+<span class="material-symbols-outlined text-on-surface-variant">person</span>
+</div>
+<span class="font-body-sm text-body-sm text-on-surface-variant">Admin Profile</span>
+</div>
+</div>
+</nav>
+
+<header class="hidden md:flex h-16 w-[calc(100%-240px)] fixed top-0 right-0 z-40 bg-surface border-b border-surface-border items-center justify-between px-margin-desktop ml-[240px]">
+<div class="flex items-center gap-8">
+<nav class="flex gap-6">
+<a class="font-label-md text-label-md text-primary border-b-2 border-primary pb-1" href="#">Overview</a>
+<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Hall Map</a>
+<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Reports</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="relative">
+<img alt="Search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 opacity-50" src="https://lh3.googleusercontent.com/aida/AP1WRLvR8KDDPFgH9vKk_aFJ_lA5WCSRmrDnPhJH5rSjuWilOAI5PMDe5z2hRnRLQhSn7_712ig52lC61Bb_R8bUkkbqNGZPv3dvykD_Oky9hXWygGnc1ybvaI9TcbT1Yw4Bd2JySNFbit4ho4113ql2BsDvpvJ2ZN64zJqv5GowDs0mdnDyFTwPWmGEKEPr3MigJ4LAaeegtd0fEG_pZWtGpsGSNPVdj4r_TbmkKSxdvmZG_kh-ujSkrXGZzkQ">
+<input class="pl-10 pr-4 py-1.5 bg-surface-container-low border border-surface-border rounded-full text-body-sm font-body-sm focus:outline-none focus:border-primary w-64" placeholder="Search..." type="text">
+</div>
+<button class="font-label-md text-label-md text-primary hover:bg-primary-container hover:text-on-primary-container px-4 py-1.5 rounded-full transition-colors border border-primary">
+                Refresh Data
+            </button>
+<button class="text-on-surface-variant hover:text-primary transition-colors">
+<span class="material-symbols-outlined">notifications</span>
+</button>
+<button class="text-on-surface-variant hover:text-primary transition-colors">
+<span class="material-symbols-outlined">account_circle</span>
+</button>
+</div>
+</header>
+
+<main class="md:ml-[240px] pt-16 md:pt-24 px-margin-mobile md:px-margin-desktop pb-stack-lg max-w-container-max mx-auto min-h-screen">
+<div class="mb-stack-lg flex justify-between items-end">
+<div>
+<h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg text-on-background">System Overview</h2>
+<p class="font-body-md text-body-md text-on-surface-variant mt-1">Real-time metrics and operations status.</p>
+</div>
+<div class="hidden md:flex items-center gap-2 text-body-sm font-body-sm text-on-surface-variant">
+<span class="w-2 h-2 rounded-full bg-status-active"></span>
+                System Operational
+            </div>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter mb-stack-lg">
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-xl p-stack-md flex flex-col justify-between">
+<div class="flex justify-between items-start mb-4">
+<div class="w-10 h-10 rounded-lg bg-primary-container text-on-primary-container flex items-center justify-center">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLvpb_qiARCcrTrv6YnOIVjyk5szWwIfCGaaCmyRAnuu9aficeKfPTRrRHDgl4gJCHQUc7LYwtF1Ak04oSwBAezPs20C51ZjzHDaBCkRYJaYqHS-DOPHSGLdeLL_S2tlRlUAG-XF_ib2I1Svtqq26yY0uxmEQA5cWHJabFRv_0WVtBKiSP2QbCssxeccpcVHcWr_6CJ6zXonlepkxJcDXURlfHpvg7P2-O1urNto3A0xsepsB1ucua9Vnw" class="w-6 h-6" alt="Exhibitions">
+</div>
+<span class="font-label-md text-label-md text-status-active bg-status-active/10 px-2 py-1 rounded-full">+2 this week</span>
+</div>
+<div>
+<p class="font-body-sm text-body-sm text-on-surface-variant mb-1">Total Exhibitions (Active)</p>
+<p class="font-headline-lg text-headline-lg text-on-background">14</p>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-xl p-stack-md flex flex-col justify-between">
+<div class="flex justify-between items-start mb-4">
+<div class="w-10 h-10 rounded-lg bg-secondary-container text-on-secondary-container flex items-center justify-center">
+<span class="material-symbols-outlined">groups</span>
+</div>
+<span class="font-label-md text-label-md text-status-active bg-status-active/10 px-2 py-1 rounded-full">+12% vs yesterday</span>
+</div>
+<div>
+<p class="font-body-sm text-body-sm text-on-surface-variant mb-1">Real-time Visitors</p>
+<p class="font-headline-lg text-headline-lg text-on-background font-mono-data">24,592</p>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-xl p-stack-md flex flex-col justify-between">
+<div class="flex justify-between items-start mb-4">
+<div class="w-10 h-10 rounded-lg bg-tertiary-container text-on-tertiary-container flex items-center justify-center">
+<span class="material-symbols-outlined">local_parking</span>
+</div>
+<span class="font-label-md text-label-md text-status-pending bg-status-pending/10 px-2 py-1 rounded-full">High Capacity</span>
+</div>
+<div>
+<p class="font-body-sm text-body-sm text-on-surface-variant mb-1">Parking Availability</p>
+<div class="flex items-end gap-2">
+<p class="font-headline-lg text-headline-lg text-on-background">18%</p>
+<p class="font-body-sm text-body-sm text-on-surface-variant pb-1">/ 8,400 spots</p>
+</div>
+</div>
+<div class="w-full bg-surface-container-high h-1.5 rounded-full mt-3 overflow-hidden">
+<div class="bg-status-pending h-full w-[82%] rounded-full"></div>
+</div>
+</div>
+</div>
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
+
+<div class="lg:col-span-2 bg-surface-container-lowest border border-surface-border rounded-xl p-stack-md flex flex-col">
+<div class="flex justify-between items-center mb-6">
+<h3 class="font-headline-md text-headline-md text-on-background">Visitor Trends (Today)</h3>
+<div class="flex gap-2">
+<button class="px-3 py-1 bg-surface-container-high text-on-surface rounded font-label-md text-label-md">Today</button>
+<button class="px-3 py-1 bg-transparent text-on-surface-variant hover:bg-surface-container-low rounded font-label-md text-label-md">Week</button>
+</div>
+</div>
+
+<div class="flex-1 w-full min-h-[300px] relative border-l border-b border-surface-border flex items-end">
+
+<div class="absolute -left-10 top-0 bottom-0 flex flex-col justify-between text-[10px] text-outline font-mono-data py-2">
+<span class="">10k</span>
+<span class="">7.5k</span>
+<span class="">5k</span>
+<span class="">2.5k</span>
+<span class="">0</span>
+</div>
+
+<div class="absolute inset-0 flex flex-col justify-between pointer-events-none">
+<div class="w-full h-px bg-surface-border/50"></div>
+<div class="w-full h-px bg-surface-border/50"></div>
+<div class="w-full h-px bg-surface-border/50"></div>
+<div class="w-full h-px bg-surface-border/50"></div>
+<div class="w-full h-px bg-surface-border"></div>
+</div>
+
+<div class="w-full h-full flex items-end justify-around px-2 relative z-10 pt-4">
+<div class="w-1/12 bg-primary/20 hover:bg-primary/40 transition-colors rounded-t-sm h-[20%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">2,100</div></div>
+<div class="w-1/12 bg-primary/40 hover:bg-primary/60 transition-colors rounded-t-sm h-[45%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">4,500</div></div>
+<div class="w-1/12 bg-primary hover:bg-primary-fixed-variant transition-colors rounded-t-sm h-[85%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">8,500</div></div>
+<div class="w-1/12 bg-primary hover:bg-primary-fixed-variant transition-colors rounded-t-sm h-[70%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">7,000</div></div>
+<div class="w-1/12 bg-primary/60 hover:bg-primary/80 transition-colors rounded-t-sm h-[90%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">9,000</div></div>
+<div class="w-1/12 bg-primary/40 hover:bg-primary/60 transition-colors rounded-t-sm h-[50%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">5,000</div></div>
+</div>
+
+<div class="absolute -bottom-6 left-0 right-0 flex justify-around text-[10px] text-outline font-mono-data">
+<span class="">09:00</span>
+<span class="">11:00</span>
+<span class="">13:00</span>
+<span class="">15:00</span>
+<span class="">17:00</span>
+<span class="">19:00</span>
+</div>
+</div>
+</div>
+
+<div class="lg:col-span-1 flex flex-col gap-stack-md">
+<div class="flex justify-between items-center">
+<h3 class="font-headline-md text-headline-md text-on-background">Current Live Events</h3>
+<a class="font-label-md text-label-md text-primary hover:underline" href="#">View All</a>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-xl overflow-hidden flex shadow-sm hover:shadow-md transition-shadow">
+<div class="w-1/3 min-h-full bg-surface-container-high relative">
+<img alt="" class="absolute inset-0 w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLuTJllS4I1nbHXEBA6rTtfsEgDs7HSWU3ZvN5MWlygnyHWXik8qMDyqNOaYp1fxiUxdEage2cpiVCv0_WlwB6jBEGOm3NTCRWhCwtdjQXAiERgVwKPKww8mfCGKPBv9Cw7UfWBjRO6ztwOtcocqi3cP1Ei96BgMR5whcGWQljKEnJflf1BX4Sa_-aCGHSWGH5s6_NLff4U8Yd9mDkwZ26nHkcRkQQrD66lcPws86w1_YX-L6tg_6ywr7QI">
+</div>
+<div class="w-2/3 p-4 flex flex-col justify-center">
+<div class="flex items-center gap-2 mb-1">
+<span class="w-1.5 h-1.5 rounded-full bg-status-active"></span>
+<span class="font-label-md text-[10px] text-status-active uppercase tracking-wider">Live Now</span>
+</div>
+<h4 class="font-body-lg text-body-lg font-semibold text-on-background leading-tight mb-1">P1Harmony Fan Meeting</h4>
+<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Hall 2, Exhibition Center I</p>
+<div class="flex items-center gap-1 text-xs text-outline">
+<span class="material-symbols-outlined text-[14px]">schedule</span>
+                            14:00 - 18:00
+                        </div>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-xl overflow-hidden flex shadow-sm hover:shadow-md transition-shadow">
+<div class="w-1/3 min-h-full bg-surface-container-high relative">
+<img alt="" class="absolute inset-0 w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLtsocUuOxtEm-alc6d65dh5o4U3u-CggqrYH7Xbqcimz9JL8VwWAOiQvKy3fhJ4rJsK0RBj89R5A_ooRyY4sij_Dq-GBy3CBBdSFBkuKHx5MFNM1UO7CtakB0nPIPbUIg_8oB-dW6Rq8BRQlMNvN6NY9ZzLHnDTT3elY1G4zqLMH2AuUsUg-iUYj0NQ0lkQuUisEVm5gkgEYZdfb3EaBNMfxQi0S7HSpPzdyzIurlON2jRTQyM7QDoCew0">
+</div>
+<div class="w-2/3 p-4 flex flex-col justify-center">
+<div class="flex items-center gap-2 mb-1">
+<span class="w-1.5 h-1.5 rounded-full bg-status-active"></span>
+<span class="font-label-md text-[10px] text-status-active uppercase tracking-wider">Live Now</span>
+</div>
+<h4 class="font-body-lg text-body-lg font-semibold text-on-background leading-tight mb-1">Vernon The 8 Live</h4>
+<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Grand Ballroom, Center II</p>
+<div class="flex items-center gap-1 text-xs text-outline">
+<span class="material-symbols-outlined text-[14px]">schedule</span>
+                            19:00 - 22:30
+                        </div>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-xl p-4 flex flex-col justify-center shadow-sm">
+<div class="flex items-center justify-between mb-1">
+<div class="flex items-center gap-2">
+<span class="w-1.5 h-1.5 rounded-full bg-status-pending"></span>
+<span class="font-label-md text-[10px] text-status-pending uppercase tracking-wider">Setting Up</span>
+</div>
+</div>
+<h4 class="font-body-lg text-body-lg font-semibold text-on-background leading-tight mb-1">Seoul Motor Show Prep</h4>
+<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Halls 1-5, Exhibition Center I</p>
+<div class="w-full bg-surface-container-high h-1.5 rounded-full mt-2 overflow-hidden">
+<div class="bg-status-pending h-full w-[45%] rounded-full"></div>
+</div>
+</div>
+</div>
+</div>
+</main>
+
+<button class="fixed bottom-8 right-8 w-14 h-14 bg-white border border-surface-border shadow-xl rounded-full flex items-center justify-center hover:scale-110 transition-transform z-50">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY" class="w-8 h-8" alt="AI Bot">
+</button>
+
+<button class="md:hidden fixed top-4 left-4 z-50 p-2 bg-surface rounded-lg border border-surface-border shadow-md">
+<img alt="Menu" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/AP1WRLvsx4tVeyADsrv6nLlY0PM7oxWgkL9gXJ0QAXqJZmzqStfnij6yOt5LsMKGZwBBMOVo8pSaKZA3AcXICD_Wat3ye_0y8Fp-3vWdjl_yjP_RWt1Zo7a6t4YQ2QoPLOPAXZXdNG9hLc6_7NCbU5EWQBmHyra45kfx0UkIyEfS9HlE2b6STJw42QoX3kLCM1GamQm7IHd3pPK0mGmWAAMDUzwoXR7RQSRVCs1kjQUq5dvSD_fF-pPXppK8_g">
+</button>
+
+
+```
+
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/booth_design_studio_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/booth_design_studio_kintex_ai_system/code.html
new file mode 100644
index 0000000..568d346
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/booth_design_studio_kintex_ai_system/code.html
@@ -0,0 +1,351 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>부스 디자인 스튜디오 - KINTEX AI</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Geist:wght@500;600&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-secondary-fixed-variant": "#4500d8",
+                        "on-primary-container": "#d2e3ff",
+                        "primary-fixed": "#d3e4ff",
+                        "surface-container-lowest": "#ffffff",
+                        "surface-variant": "#dbe2f9",
+                        "on-error-container": "#93000a",
+                        "on-surface": "#141b2c",
+                        "surface-bright": "#f9f9ff",
+                        "surface": "#f9f9ff",
+                        "inverse-surface": "#293041",
+                        "on-tertiary-fixed": "#002113",
+                        "inverse-primary": "#a2c9ff",
+                        "primary-fixed-dim": "#a2c9ff",
+                        "secondary-container": "#6d4aff",
+                        "on-primary-fixed-variant": "#004881",
+                        "on-primary-fixed": "#001c38",
+                        "outline": "#717782",
+                        "error-container": "#ffdad6",
+                        "on-tertiary": "#ffffff",
+                        "background": "#f9f9ff",
+                        "tertiary": "#00583b",
+                        "on-primary": "#ffffff",
+                        "on-error": "#ffffff",
+                        "secondary": "#5427e6",
+                        "on-surface-variant": "#414751",
+                        "on-secondary-fixed": "#1b0063",
+                        "on-secondary": "#ffffff",
+                        "outline-variant": "#c1c7d3",
+                        "surface-container-high": "#e0e8ff",
+                        "tertiary-container": "#00734e",
+                        "on-tertiary-fixed-variant": "#005236",
+                        "primary": "#004e8b",
+                        "secondary-fixed-dim": "#c9bfff",
+                        "surface-dim": "#d2daf0",
+                        "primary-container": "#0066b3",
+                        "on-tertiary-container": "#8ef7c3",
+                        "secondary-fixed": "#e5deff",
+                        "on-secondary-container": "#f3edff",
+                        "tertiary-fixed-dim": "#72daa9",
+                        "surface-container-highest": "#dbe2f9",
+                        "surface-tint": "#0060a9",
+                        "surface-container-low": "#f1f3ff",
+                        "inverse-on-surface": "#edf0ff",
+                        "tertiary-fixed": "#8ef7c4",
+                        "surface-container": "#e9edff",
+                        "error": "#ba1a1a",
+                        "on-background": "#141b2c"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "stack-md": "16px",
+                        "stack-lg": "24px",
+                        "container-padding": "24px",
+                        "gutter": "16px",
+                        "stack-sm": "8px",
+                        "base": "4px"
+                    },
+                    "fontFamily": {
+                        "title-sm": ["Inter"],
+                        "display-lg-mobile": ["Inter"],
+                        "display-lg": ["Inter"],
+                        "headline-md": ["Inter"],
+                        "body-base": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "label-md": ["Geist"],
+                        "label-xs": ["Geist"]
+                    },
+                    "fontSize": {
+                        "title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
+                        "display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
+                        "body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
+                        "label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c7d3; border-radius: 4px; }
+        .slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #004e8b; cursor: pointer; }
+        .range-slider-comparison { position: relative; width: 100%; height: 100%; overflow: hidden; }
+        .range-slider-comparison input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 20; }
+        .range-slider-comparison .handle { position: absolute; top: 0; bottom: 0; width: 2px; background: white; pointer-events: none; z-index: 10; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
+        .range-slider-comparison .handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
+        .range-slider-comparison .handle-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11; font-family: 'Material Symbols Outlined'; color: #004e8b; font-size: 20px; user-select: none; pointer-events: none; }
+        .glass-panel { background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); }
+    </style>
+</head>
+<body class="bg-surface text-on-surface font-body-base overflow-hidden h-screen flex">
+
+<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
+<div class="px-gutter mb-stack-lg flex items-center gap-stack-sm">
+<div class="w-8 h-8 bg-primary rounded flex items-center justify-center text-white font-bold">K</div>
+<div>
+<h1 class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI</h1>
+<p class="text-label-md font-label-md text-on-surface-variant">Exhibition Manager</p>
+</div>
+</div>
+<div class="flex-1 overflow-y-auto px-base">
+<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">dashboard</span>
+<span class="text-label-md font-label-md">Dashboard</span>
+</a>
+<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded bg-primary-container/10 border-r-4 border-primary text-primary font-bold transition-all duration-200 opacity-90" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">architecture</span>
+<span class="text-label-md font-label-md">Floor Plan Studio</span>
+</a>
+<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">groups</span>
+<span class="text-label-md font-label-md">Exhibitor Management</span>
+</a>
+<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">assignment</span>
+<span class="text-label-md font-label-md">Documents</span>
+</a>
+<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">payments</span>
+<span class="text-label-md font-label-md">Settlement</span>
+</a>
+</div>
+<div class="px-base mt-auto pt-stack-md border-t border-outline-variant/30">
+<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
+<span class="material-symbols-outlined">settings</span>
+<span class="text-label-md font-label-md">Settings</span>
+</a>
+<a class="flex items-center gap-stack-md px-gutter py-stack-sm rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
+<span class="material-symbols-outlined">help</span>
+<span class="text-label-md font-label-md">Support</span>
+</a>
+</div>
+</nav>
+
+<div class="flex-1 ml-60 flex flex-col h-screen relative bg-inverse-surface">
+
+<header class="flex justify-between items-center w-full px-container-padding h-16 bg-surface border-b border-outline-variant z-40 shrink-0">
+<div class="flex items-center gap-stack-lg">
+<div class="flex items-center gap-stack-sm text-title-sm font-title-sm font-bold text-on-surface">
+<span class="material-symbols-outlined text-outline">arrow_back</span>
+<span>부스 A-102 · 독립부스 6×3m · 높이 제한 5m</span>
+</div>
+<div class="h-6 w-px bg-outline-variant"></div>
+<select class="bg-surface-container-low border border-outline-variant text-body-sm font-body-sm rounded px-3 py-1 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
+<option>설계 v2</option>
+<option>설계 v1</option>
+</select>
+</div>
+<div class="flex items-center gap-stack-md">
+<button class="flex items-center gap-2 bg-secondary-container text-white px-4 py-2 rounded font-label-md text-label-md hover:opacity-90 transition-opacity shadow-sm">
+<span class="material-symbols-outlined text-[18px]">auto_awesome</span>
+                    예상 사진 생성
+                </button>
+</div>
+</header>
+
+<main class="flex-1 flex overflow-hidden">
+
+<aside class="w-[360px] bg-surface border-r border-outline-variant flex flex-col h-full shrink-0 z-10 glass-panel">
+<div class="p-gutter border-b border-outline-variant flex justify-between items-center bg-surface-container-lowest">
+<h2 class="text-title-sm font-title-sm font-semibold">속성 설정</h2>
+<span class="material-symbols-outlined text-outline hover:text-on-surface cursor-pointer">tune</span>
+</div>
+<div class="flex-1 overflow-y-auto custom-scrollbar p-gutter space-y-stack-md">
+
+<div class="border border-outline-variant rounded bg-surface-container-lowest">
+<div class="p-3 flex justify-between items-center cursor-pointer bg-surface-container-low rounded-t">
+<span class="text-body-sm font-semibold">기본 정보</span>
+<span class="material-symbols-outlined text-[20px]">expand_less</span>
+</div>
+<div class="p-3 space-y-3">
+<div>
+<label class="block text-label-xs font-label-xs text-on-surface-variant mb-1">업종</label>
+<select class="w-full bg-surface border border-outline-variant rounded p-2 text-body-sm">
+<option>로봇/제조</option>
+<option>IT/소프트웨어</option>
+</select>
+</div>
+<div>
+<label class="block text-label-xs font-label-xs text-on-surface-variant mb-1">예산 (KRW)</label>
+<input class="w-full bg-surface border border-outline-variant rounded p-2 text-body-sm text-right" type="text" value="15,000,000"/>
+</div>
+</div>
+</div>
+
+<div class="border border-outline-variant rounded bg-surface-container-lowest">
+<div class="p-3 flex justify-between items-center cursor-pointer bg-surface-container-low rounded-t">
+<span class="text-body-sm font-semibold">공간 구성</span>
+<span class="material-symbols-outlined text-[20px]">expand_less</span>
+</div>
+<div class="p-3 space-y-4">
+<div class="flex flex-wrap gap-2">
+<span class="px-3 py-1 bg-primary-container/10 border border-primary text-primary rounded-full text-label-xs font-label-xs cursor-pointer">안내데스크</span>
+<span class="px-3 py-1 bg-primary-container/10 border border-primary text-primary rounded-full text-label-xs font-label-xs cursor-pointer">시연존</span>
+<span class="px-3 py-1 bg-surface border border-outline-variant text-on-surface rounded-full text-label-xs font-label-xs cursor-pointer">상담존</span>
+<span class="px-3 py-1 bg-surface border border-outline-variant text-on-surface rounded-full text-label-xs font-label-xs cursor-pointer">창고</span>
+</div>
+
+<div class="space-y-2">
+<div class="flex justify-between text-label-xs text-on-surface-variant"><label>시연존 면적 비율</label><span>60%</span></div>
+<input class="w-full slider-thumb appearance-none bg-outline-variant h-1 rounded" max="100" min="0" type="range" value="60"/>
+</div>
+</div>
+</div>
+
+<div class="border border-outline-variant rounded bg-surface-container-lowest">
+<div class="p-3 flex justify-between items-center cursor-pointer bg-surface-container-low rounded-t">
+<span class="text-body-sm font-semibold border-l-4 border-error pl-2">구조</span>
+<span class="material-symbols-outlined text-[20px]">expand_less</span>
+</div>
+<div class="p-3 space-y-4">
+<div>
+<div class="flex justify-between text-label-xs mb-1">
+<label class="text-on-surface-variant">벽체 높이</label>
+<span class="text-error font-bold">4.2m (5m 제한)</span>
+</div>
+<input class="w-full slider-thumb appearance-none bg-outline-variant h-1 rounded accent-error" max="5" min="2" step="0.1" type="range" value="4.2"/>
+</div>
+<div>
+<label class="block text-label-xs font-label-xs text-on-surface-variant mb-1">간판 문구 <span class="text-secondary-container material-symbols-outlined text-[12px] inline align-text-bottom">auto_awesome</span></label>
+<input class="w-full bg-surface border border-secondary-container/50 focus:border-secondary-container focus:ring-1 focus:ring-secondary-container rounded p-2 text-body-sm" type="text" value="한빛로보틱스"/>
+</div>
+<div class="flex items-center justify-between p-2 bg-error-container/30 rounded border border-error-container">
+<div>
+<span class="block text-body-sm font-semibold">리깅 사용</span>
+<span class="text-label-xs text-error">구조계산서 D-7 제출 필요</span>
+</div>
+<div class="w-10 h-6 bg-primary rounded-full relative cursor-pointer">
+<div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</aside>
+
+<div class="flex-1 flex flex-col relative overflow-hidden bg-[#1e2330]">
+
+<div class="absolute top-4 right-4 z-20 flex gap-2">
+<button class="w-8 h-8 bg-surface/10 backdrop-blur border border-white/20 rounded flex items-center justify-center text-white hover:bg-surface/20">
+<span class="material-symbols-outlined text-[18px]">zoom_in</span>
+</button>
+<button class="w-8 h-8 bg-surface/10 backdrop-blur border border-white/20 rounded flex items-center justify-center text-white hover:bg-surface/20">
+<span class="material-symbols-outlined text-[18px]">zoom_out</span>
+</button>
+</div>
+
+<div class="flex-1 p-stack-lg overflow-y-auto">
+<div class="grid grid-cols-2 gap-4 h-full max-h-[800px]">
+
+<div class="relative rounded border border-outline-variant/30 overflow-hidden group bg-surface-container-lowest">
+<img alt="S1 부스 정면" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLt7Owqk04bQHpDRgW-TOypxVfJaLrvGQkPASyNEHGKREzRPLbA3WCQeI_EPz-feK-fDR17TWVMPmQjtYDnTjXIAw_a9ctvRCW-GENeZYnEOC7qPsOdbhFyx-xS4VIDsARlepBMwyh-2lbIf85_kbEg-w0Z_r189I59Hh6nF0V5mCvUHWsQQVYY5s2jSHwa5K9U3OKeEMBBV-xB1jWziZ_5pGqizp5S5_FdYxsFmwdCD1dVUUJNkc8Hqpu8"/>
+<div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent">
+<span class="text-white font-semibold text-body-sm">S1 부스 정면</span>
+</div>
+<div class="absolute top-2 right-2 px-2 py-1 bg-black/50 backdrop-blur rounded text-white/80 text-[10px] flex items-center gap-1">
+<span class="material-symbols-outlined text-[12px] text-secondary-container">auto_awesome</span>
+                                AI 생성 예상 이미지
+                            </div>
+</div>
+
+<div class="relative rounded border border-outline-variant/30 overflow-hidden group bg-surface-container-lowest">
+<img alt="S2 야간 점등" class="w-full h-full object-cover brightness-75" src="https://lh3.googleusercontent.com/aida/AP1WRLvlMBhK-x7BJ_zqesAhPqP9572iihZjYj1q_iEGKwGB4F7PBeF9UEQ4d386iT2R61Us4TxTJJuy8thujGcACbuT905c9fOpfiZIHl6Pzn6_qMQQNw7QM9-lI7rDYbIq6UuupnZAZuqTcWK9CtPVDwjwtIg3eP_zCrVy3iffd5nnCSzvbewqhXR9iM8O0DOdoFlX-POYo89D6wS39zw8x36ozVtvGfG-HOfqAqm5AsfZsqrDk9pP0cAb4p0"/>
+<div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent">
+<span class="text-white font-semibold text-body-sm">S2 야간 점등</span>
+</div>
+</div>
+
+<div class="relative rounded border border-outline-variant/30 overflow-hidden group bg-surface-container-lowest">
+<img alt="S3 통로 뷰" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLuTJllS4I1nbHXEBA6rTtfsEgDs7HSWU3ZvN5MWlygnyHWXik8qMDyqNOaYp1fxiUxdEage2cpiVCv0_WlwB6jBEGOm3NTCRWhCwtdjQXAiERgVwKPKww8mfCGKPBv9Cw7UfWBjRO6ztwOtcocqi3cP1Ei96BgMR5whcGWQljKEnJflf1BX4Sa_-aCGHSWGH5s6_NLff4U8Yd9mDkwZ26nHkcRkQQrD66lcPws86w1_YX-L6tg_6ywr7QI"/>
+<div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent">
+<span class="text-white font-semibold text-body-sm">S3 통로 뷰</span>
+</div>
+</div>
+
+<div class="relative rounded border border-dashed border-outline-variant bg-surface-container-low flex flex-col items-center justify-center p-6">
+<div class="w-12 h-12 rounded-full bg-secondary-container/10 flex items-center justify-center mb-3">
+<span class="material-symbols-outlined text-secondary-container text-[24px]">add_photo_alternate</span>
+</div>
+<span class="text-on-surface-variant font-semibold text-body-sm mb-2">S4 부스 내부</span>
+<button class="px-4 py-2 bg-secondary-container text-white rounded text-label-xs font-label-xs flex items-center gap-1 hover:bg-secondary">
+<span class="material-symbols-outlined text-[14px]">auto_awesome</span> 클릭해 생성
+                            </button>
+</div>
+</div>
+
+<div class="mt-4 h-48 w-full relative rounded border border-outline-variant/30 overflow-hidden">
+<div class="absolute top-2 left-2 px-2 py-1 bg-black/60 backdrop-blur rounded text-white text-label-xs z-30">시공 전</div>
+<div class="absolute top-2 right-2 px-2 py-1 bg-black/60 backdrop-blur rounded text-white text-label-xs z-30">시공 후</div>
+<div class="range-slider-comparison">
+
+<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLt7Owqk04bQHpDRgW-TOypxVfJaLrvGQkPASyNEHGKREzRPLbA3WCQeI_EPz-feK-fDR17TWVMPmQjtYDnTjXIAw_a9ctvRCW-GENeZYnEOC7qPsOdbhFyx-xS4VIDsARlepBMwyh-2lbIf85_kbEg-w0Z_r189I59Hh6nF0V5mCvUHWsQQVYY5s2jSHwa5K9U3OKeEMBBV-xB1jWziZ_5pGqizp5S5_FdYxsFmwdCD1dVUUJNkc8Hqpu8')"></div>
+
+<div class="absolute inset-0 bg-cover bg-center border-r-2 border-white" id="comparison-clip" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLv4g1wEc50g6SV874dKYhY3pekuOO8DpFUuNZ11z4Q9S02vd7fQvZ9QsCAvdeYFBXOYbahll5cJgd62hawt4xdYf0e8xkbeVizuekpfrV9gYnvxdbuMzdxHNS3Fezbi-jMX1GlgJemL6ifKvATHzgW0NdON_MkV1Y95qXcjt5RTHo07vmXj6OXmgL_ltfpfRYzAfGuClIQDY612hRpS_RVRkeLDV0RFHgjGIR3Y_xNhhQmNt2StB4C7Rw'); width: 50%;"></div>
+<input id="comparison-slider" max="100" min="0" oninput="document.getElementById('comparison-clip').style.width = this.value + '%'; document.getElementById('comparison-handle').style.left = this.value + '%';" type="range" value="50"/>
+<div class="handle" id="comparison-handle" style="left: 50%;"></div>
+<span class="handle-icon material-symbols-outlined" id="comparison-icon" style="left: 50%;">swap_horiz</span>
+<script>
+                                document.getElementById('comparison-slider').addEventListener('input', function(e) {
+                                    document.getElementById('comparison-icon').style.left = e.target.value + '%';
+                                });
+                            </script>
+</div>
+</div>
+</div>
+
+<div class="absolute bottom-0 left-0 right-0 bg-surface border-t border-outline-variant p-4 flex justify-between items-center z-20 shadow-[0_-4px_12px_rgba(0,0,0,0.1)]">
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-2">
+<span class="w-2 h-2 rounded-full bg-[#12B76A]"></span>
+<span class="text-body-sm font-semibold">통과 11</span>
+</div>
+<div class="w-px h-4 bg-outline-variant"></div>
+<div class="flex items-center gap-2">
+<span class="w-2 h-2 rounded-full bg-error"></span>
+<span class="text-body-sm font-semibold text-error">경고 1</span>
+</div>
+</div>
+<button class="bg-primary text-white px-6 py-2 rounded font-label-md hover:bg-surface-tint transition-colors">
+                        장치업체에 컨펌 요청
+                    </button>
+</div>
+</div>
+</main>
+</div>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/booth_layout_editor_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/booth_layout_editor_kintex_ai_system/code.html
new file mode 100644
index 0000000..039efc2
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/booth_layout_editor_kintex_ai_system/code.html
@@ -0,0 +1,484 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Floor Plan Editor - KINTEX AI 전시관리</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Geist:wght@500;600&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-secondary-fixed-variant": "#4500d8",
+                        "on-primary-container": "#d2e3ff",
+                        "primary-fixed": "#d3e4ff",
+                        "surface-container-lowest": "#ffffff",
+                        "surface-variant": "#dbe2f9",
+                        "on-error-container": "#93000a",
+                        "on-surface": "#141b2c",
+                        "surface-bright": "#f9f9ff",
+                        "surface": "#f9f9ff",
+                        "inverse-surface": "#293041",
+                        "on-tertiary-fixed": "#002113",
+                        "inverse-primary": "#a2c9ff",
+                        "primary-fixed-dim": "#a2c9ff",
+                        "secondary-container": "#6d4aff",
+                        "on-primary-fixed-variant": "#004881",
+                        "on-primary-fixed": "#001c38",
+                        "outline": "#717782",
+                        "error-container": "#ffdad6",
+                        "on-tertiary": "#ffffff",
+                        "background": "#f9f9ff",
+                        "tertiary": "#00583b",
+                        "on-primary": "#ffffff",
+                        "on-error": "#ffffff",
+                        "secondary": "#5427e6",
+                        "on-surface-variant": "#414751",
+                        "on-secondary-fixed": "#1b0063",
+                        "on-secondary": "#ffffff",
+                        "outline-variant": "#c1c7d3",
+                        "surface-container-high": "#e0e8ff",
+                        "tertiary-container": "#00734e",
+                        "on-tertiary-fixed-variant": "#005236",
+                        "primary": "#004e8b",
+                        "secondary-fixed-dim": "#c9bfff",
+                        "surface-dim": "#d2daf0",
+                        "primary-container": "#0066b3",
+                        "on-tertiary-container": "#8ef7c3",
+                        "secondary-fixed": "#e5deff",
+                        "on-secondary-container": "#f3edff",
+                        "tertiary-fixed-dim": "#72daa9",
+                        "surface-container-highest": "#dbe2f9",
+                        "surface-tint": "#0060a9",
+                        "surface-container-low": "#f1f3ff",
+                        "inverse-on-surface": "#edf0ff",
+                        "tertiary-fixed": "#8ef7c4",
+                        "surface-container": "#e9edff",
+                        "error": "#ba1a1a",
+                        "on-background": "#141b2c",
+                        "editor-canvas": "#1c2536",
+                        "editor-grid": "#2a3548",
+                        "booth-blue": "#0066b3",
+                        "booth-stroke": "#004881",
+                        "violation-red": "#d92d20",
+                        "violation-orange": "#f79009"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "stack-md": "16px",
+                        "stack-lg": "24px",
+                        "container-padding": "24px",
+                        "gutter": "16px",
+                        "stack-sm": "8px",
+                        "base": "4px"
+                    },
+                    "fontFamily": {
+                        "title-sm": ["Inter", "sans-serif"],
+                        "display-lg-mobile": ["Inter", "sans-serif"],
+                        "display-lg": ["Inter", "sans-serif"],
+                        "headline-md": ["Inter", "sans-serif"],
+                        "body-base": ["Inter", "sans-serif"],
+                        "body-sm": ["Inter", "sans-serif"],
+                        "label-md": ["Geist", "sans-serif"],
+                        "label-xs": ["Geist", "sans-serif"]
+                    },
+                    "fontSize": {
+                        "title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
+                        "display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
+                        "body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
+                        "label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .canvas-grid {
+            background-image: 
+                linear-gradient(to right, rgba(42, 53, 72, 0.4) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(42, 53, 72, 0.4) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .trench-grid {
+            background-image: 
+                linear-gradient(to right, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
+                linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
+            background-size: 100px 100px;
+        }
+        /* Custom scrollbar for dense panels */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #c1c7d3;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #717782;
+        }
+    </style>
+</head>
+<body class="bg-background text-on-surface h-screen overflow-hidden flex font-body-base">
+
+<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low dark:bg-inverse-surface border-r border-outline-variant dark:border-outline flex flex-col py-container-padding z-50">
+<div class="px-gutter mb-stack-lg flex items-center gap-2">
+<span class="material-symbols-outlined text-headline-md font-headline-md font-bold text-primary dark:text-primary-fixed" data-icon="token">token</span>
+<div>
+<h1 class="text-title-sm font-title-sm font-bold text-primary dark:text-primary-fixed">KINTEX AI</h1>
+<p class="text-label-xs font-label-xs text-on-surface-variant">Exhibition Manager</p>
+</div>
+</div>
+<ul class="flex-1 flex flex-col gap-1 px-sm">
+<li>
+<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
+<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
+<span class="text-label-md font-label-md">Dashboard</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-gutter py-2 text-primary dark:text-primary-fixed-dim font-bold border-r-4 border-primary dark:border-primary-fixed-dim bg-primary-container/10 transition-all duration-200 opacity-90 rounded-r-full" href="#">
+<span class="material-symbols-outlined" data-icon="architecture" style="font-variation-settings: 'FILL' 1;">architecture</span>
+<span class="text-label-md font-label-md">Floor Plan Studio</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
+<span class="material-symbols-outlined" data-icon="groups">groups</span>
+<span class="text-label-md font-label-md">Exhibitor Management</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
+<span class="material-symbols-outlined" data-icon="assignment">assignment</span>
+<span class="text-label-md font-label-md">Documents</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
+<span class="material-symbols-outlined" data-icon="payments">payments</span>
+<span class="text-label-md font-label-md">Settlement</span>
+</a>
+</li>
+</ul>
+<ul class="mt-auto flex flex-col gap-1 px-sm border-t border-outline-variant/30 pt-stack-sm">
+<li>
+<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
+<span class="material-symbols-outlined" data-icon="settings">settings</span>
+<span class="text-label-md font-label-md">Settings</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
+<span class="material-symbols-outlined" data-icon="help">help</span>
+<span class="text-label-md font-label-md">Support</span>
+</a>
+</li>
+</ul>
+</nav>
+
+<div class="ml-60 flex flex-col w-full h-full bg-surface">
+
+<header class="h-16 flex items-center justify-between px-gutter border-b border-outline-variant bg-surface-container-lowest shrink-0 z-40">
+<div class="flex items-center gap-stack-md">
+<div class="flex items-center gap-2">
+<h2 class="text-title-sm font-title-sm font-bold text-on-surface">제1전시장 1홀</h2>
+<span class="material-symbols-outlined text-outline text-[20px]" data-icon="chevron_right">chevron_right</span>
+</div>
+<div class="flex items-center bg-surface-container border border-outline-variant rounded px-3 py-1.5 cursor-pointer hover:bg-surface-container-highest transition-colors">
+<span class="text-body-sm font-body-sm font-semibold text-on-surface mr-2">배치안 B · v3</span>
+<span class="material-symbols-outlined text-[18px] text-on-surface-variant" data-icon="arrow_drop_down">arrow_drop_down</span>
+</div>
+<span class="text-label-xs font-label-xs text-outline flex items-center gap-1">
+<span class="material-symbols-outlined text-[14px]" data-icon="cloud_done">cloud_done</span>
+                    저장됨
+                </span>
+</div>
+<div class="flex items-center gap-stack-sm">
+<button class="px-4 py-2 text-body-sm font-body-sm border border-outline text-on-surface-variant rounded hover:bg-surface-container transition-colors flex items-center gap-2">
+<span class="material-symbols-outlined text-[18px]" data-icon="image">image</span>
+                    홀 전경 생성
+                </button>
+<button class="px-4 py-2 text-body-sm font-body-sm border border-outline text-on-surface-variant rounded hover:bg-surface-container transition-colors flex items-center gap-2">
+<span class="material-symbols-outlined text-[18px]" data-icon="fact_check">fact_check</span>
+                    규정 검증 실행
+                </button>
+<button class="px-4 py-2 text-body-sm font-body-sm font-semibold bg-secondary-container text-white rounded hover:opacity-90 transition-opacity flex items-center gap-2 ring-1 ring-secondary-container/50 shadow-[0_0_12px_rgba(109,74,255,0.3)]">
+<span class="material-symbols-outlined text-[18px]" data-icon="auto_awesome">auto_awesome</span>
+                    AI 자동배치
+                </button>
+</div>
+</header>
+
+<main class="flex-1 flex min-h-0">
+
+<aside class="w-[240px] bg-surface-container-lowest border-r border-outline-variant flex flex-col shrink-0 z-30">
+<div class="p-gutter border-b border-outline-variant/50">
+<h3 class="text-label-md font-label-md text-on-surface-variant mb-stack-sm uppercase">부스 팔레트</h3>
+<div class="grid grid-cols-2 gap-2">
+<div class="border border-outline-variant rounded p-2 flex flex-col items-center gap-1 cursor-pointer hover:border-primary hover:bg-surface-container transition-all">
+<div class="w-8 h-8 border border-primary bg-primary-container/20"></div>
+<span class="text-label-xs font-label-xs text-center">기본 부스<br/>3×3m</span>
+</div>
+<div class="border border-outline-variant rounded p-2 flex flex-col items-center gap-1 cursor-pointer hover:border-primary hover:bg-surface-container transition-all">
+<div class="w-12 h-8 border border-primary bg-primary-container/20"></div>
+<span class="text-label-xs font-label-xs text-center">프리미엄<br/>6×3m</span>
+</div>
+<div class="border border-outline-variant rounded p-2 flex flex-col items-center gap-1 cursor-pointer hover:border-primary hover:bg-surface-container transition-all col-span-2">
+<div class="w-full h-10 border border-primary bg-primary-container/20 flex items-center justify-center">
+<span class="material-symbols-outlined text-primary text-[18px]" data-icon="grid_4x4">grid_4x4</span>
+</div>
+<span class="text-label-xs font-label-xs">아일랜드 부스 (자유형)</span>
+</div>
+</div>
+</div>
+<div class="p-gutter border-b border-outline-variant/50">
+<h3 class="text-label-md font-label-md text-on-surface-variant mb-stack-sm uppercase">부대 시설</h3>
+<div class="flex flex-col gap-2">
+<button class="flex items-center gap-3 p-2 border border-outline-variant rounded hover:bg-surface-container text-body-sm font-body-sm text-left">
+<span class="material-symbols-outlined text-outline" data-icon="stadium">stadium</span> 무대
+                        </button>
+<button class="flex items-center gap-3 p-2 border border-outline-variant rounded hover:bg-surface-container text-body-sm font-body-sm text-left">
+<span class="material-symbols-outlined text-outline" data-icon="local_cafe">local_cafe</span> 라운지
+                        </button>
+<button class="flex items-center gap-3 p-2 border border-outline-variant rounded hover:bg-surface-container text-body-sm font-body-sm text-left">
+<span class="material-symbols-outlined text-outline" data-icon="meeting_room">meeting_room</span> 주출입구
+                        </button>
+</div>
+</div>
+<div class="p-gutter flex-1 overflow-y-auto">
+<h3 class="text-label-md font-label-md text-on-surface-variant mb-stack-sm uppercase flex justify-between items-center">
+                        레이어
+                        <span class="material-symbols-outlined text-[16px] cursor-pointer" data-icon="add">add</span>
+</h3>
+<div class="flex flex-col gap-3">
+<div class="flex items-center justify-between">
+<span class="text-body-sm font-body-sm text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-[16px] text-outline" data-icon="grid_on">grid_on</span>
+                                트렌치 그리드
+                            </span>
+<div class="w-8 h-4 bg-primary rounded-full relative cursor-pointer">
+<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5"></div>
+</div>
+</div>
+<div class="flex items-center justify-between">
+<span class="text-body-sm font-body-sm text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-[16px] text-outline" data-icon="view_column">view_column</span>
+                                기둥·비상구
+                            </span>
+<div class="w-8 h-4 bg-primary rounded-full relative cursor-pointer">
+<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5"></div>
+</div>
+</div>
+<div class="flex items-center justify-between">
+<span class="text-body-sm font-body-sm text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-[16px] text-violation-red" data-icon="warning">warning</span>
+                                위반 오버레이
+                            </span>
+<div class="w-8 h-4 bg-primary rounded-full relative cursor-pointer">
+<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5"></div>
+</div>
+</div>
+<div class="flex items-center justify-between opacity-50">
+<span class="text-body-sm font-body-sm text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-[16px] text-outline" data-icon="route">route</span>
+                                동선 히트맵
+                            </span>
+<div class="w-8 h-4 bg-outline-variant rounded-full relative cursor-pointer">
+<div class="w-3 h-3 bg-white rounded-full absolute left-0.5 top-0.5"></div>
+</div>
+</div>
+</div>
+</div>
+</aside>
+
+<section class="flex-1 bg-editor-canvas relative overflow-hidden flex flex-col z-10">
+
+<div class="absolute top-4 left-4 flex bg-surface-container-lowest border border-outline-variant rounded shadow-sm z-20">
+<button class="p-1.5 hover:bg-surface-container border-r border-outline-variant text-on-surface" title="선택">
+<span class="material-symbols-outlined text-[20px]" data-icon="near_me">near_me</span>
+</button>
+<button class="p-1.5 hover:bg-surface-container border-r border-outline-variant text-on-surface" title="이동">
+<span class="material-symbols-outlined text-[20px]" data-icon="pan_tool">pan_tool</span>
+</button>
+<button class="p-1.5 hover:bg-surface-container text-on-surface" title="자">
+<span class="material-symbols-outlined text-[20px]" data-icon="straighten">straighten</span>
+</button>
+</div>
+
+<div class="flex-1 canvas-grid trench-grid relative w-full h-full flex items-center justify-center cursor-crosshair overflow-hidden">
+
+<div class="relative border-4 border-outline w-[800px] h-[550px] bg-editor-canvas shadow-2xl">
+
+<div class="absolute -top-6 left-0 right-0 h-4 border-b border-l border-r border-outline flex justify-between px-2 text-[10px] text-outline">
+<span>0m</span>
+<span>63m</span>
+<span>126m</span>
+</div>
+<div class="absolute top-0 -left-6 bottom-0 w-4 border-r border-t border-b border-outline flex flex-col justify-between py-2 text-[10px] text-outline">
+<span>0m</span>
+<span class="rotate-[-90deg]">45m</span>
+<span>90m</span>
+</div>
+
+<div class="absolute top-1/4 left-1/3 w-8 h-8 bg-surface-variant/20 border border-outline-variant flex items-center justify-center text-outline-variant">
+<span class="material-symbols-outlined text-[16px]" data-icon="close">close</span>
+</div>
+<div class="absolute top-1/4 right-1/3 w-8 h-8 bg-surface-variant/20 border border-outline-variant flex items-center justify-center text-outline-variant">
+<span class="material-symbols-outlined text-[16px]" data-icon="close">close</span>
+</div>
+
+<div class="absolute -top-1 left-1/4 w-8 h-2 bg-tertiary-fixed"></div>
+<div class="absolute -top-1 right-1/4 w-8 h-2 bg-tertiary-fixed"></div>
+<div class="absolute -bottom-1 left-1/4 w-8 h-2 bg-tertiary-fixed"></div>
+<div class="absolute -bottom-1 right-1/4 w-8 h-2 bg-tertiary-fixed"></div>
+
+<div class="absolute top-12 left-12 grid grid-cols-4 gap-2">
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-101</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-102</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-103</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-104</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-105</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-106</div>
+</div>
+<div class="absolute top-12 right-12 grid grid-cols-4 gap-2">
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">B-101</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">B-102</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">B-103</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">B-104</div>
+</div>
+
+<div class="absolute top-1/2 left-12 -translate-y-1/2 w-32 h-24 bg-booth-blue/60 border-2 border-booth-stroke flex items-center justify-center text-[10px] text-white font-mono">
+                            PREMIUM A
+                        </div>
+<div class="absolute top-1/2 right-12 -translate-y-1/2 w-48 h-32 bg-booth-blue/60 border-2 border-booth-stroke flex items-center justify-center text-[10px] text-white font-mono">
+                            PREMIUM B
+                        </div>
+
+<div class="absolute bottom-12 left-1/4 flex gap-2">
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">C-101</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">C-102</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">C-103</div>
+<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">C-104</div>
+</div>
+
+
+<div class="absolute top-32 left-12 right-1/2 h-8 bg-violation-red/30 border border-violation-red/50 flex items-center justify-center z-10 pointer-events-none">
+<div class="bg-violation-red text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center shadow-md">1</div>
+</div>
+
+<div class="absolute top-1/4 left-1/3 w-16 h-16 bg-violation-red/40 flex items-center justify-center z-10 pointer-events-none -translate-x-1/4 -translate-y-1/4">
+<div class="bg-violation-red text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center shadow-md absolute top-0 right-0">2</div>
+</div>
+
+<div class="absolute bottom-12 left-[calc(25%+112px)] w-12 h-12 border-2 border-violation-orange z-10" style="background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(247,144,9,0.3) 4px, rgba(247,144,9,0.3) 8px);">
+<div class="bg-violation-orange text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center shadow-md absolute -top-2 -right-2">3</div>
+</div>
+</div>
+</div>
+
+<div class="h-10 bg-surface-container-lowest border-t border-outline-variant flex items-center justify-between px-gutter text-body-sm font-body-sm z-20">
+<div class="flex items-center gap-4 text-on-surface-variant">
+<span>부스 486 / 510</span>
+<span class="w-1 h-1 rounded-full bg-outline"></span>
+<span>판매면적 4,374㎡</span>
+</div>
+<div class="flex items-center gap-2">
+<button class="p-1 hover:bg-surface-container rounded text-outline"><span class="material-symbols-outlined text-[18px]" data-icon="remove">remove</span></button>
+<span class="w-12 text-center text-on-surface font-semibold">100%</span>
+<button class="p-1 hover:bg-surface-container rounded text-outline"><span class="material-symbols-outlined text-[18px]" data-icon="add">add</span></button>
+</div>
+</div>
+</section>
+
+<aside class="w-[360px] bg-surface-container-lowest border-l border-outline-variant flex flex-col shrink-0 z-30">
+
+<div class="flex border-b border-outline-variant">
+<button class="flex-1 py-3 text-body-sm font-body-sm font-semibold text-on-surface-variant hover:text-on-surface transition-colors">속성</button>
+<button class="flex-1 py-3 text-body-sm font-body-sm font-bold text-primary border-b-2 border-primary">검증 (5)</button>
+</div>
+
+<div class="flex-1 overflow-y-auto p-gutter flex flex-col gap-stack-md bg-surface-bright">
+
+<div class="flex gap-2">
+<div class="px-3 py-1 bg-error-container text-on-error-container rounded-full text-label-xs font-label-xs font-bold border border-error/20 flex items-center gap-1">
+<span class="material-symbols-outlined text-[14px]" data-icon="block">block</span> 차단 2
+                        </div>
+<div class="px-3 py-1 bg-[#FEF0C7] text-[#B54708] rounded-full text-label-xs font-label-xs font-bold border border-[#F79009]/20 flex items-center gap-1">
+<span class="material-symbols-outlined text-[14px]" data-icon="warning">warning</span> 경고 3
+                        </div>
+</div>
+<p class="text-body-sm font-body-sm text-on-surface-variant">소방 규정 및 자체 배치 가이드라인 위반 사항입니다.</p>
+
+<div class="flex flex-col gap-3">
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded shadow-sm overflow-hidden flex">
+<div class="w-1 bg-violation-red shrink-0"></div>
+<div class="p-3 w-full">
+<div class="flex justify-between items-start mb-1">
+<div class="flex items-center gap-2">
+<div class="bg-violation-red text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">1</div>
+<span class="text-label-md font-label-md text-on-surface">통로 폭 위반</span>
+</div>
+<button class="text-primary text-[11px] font-semibold hover:underline">위치 보기</button>
+</div>
+<p class="text-body-sm font-body-sm text-on-surface-variant">피난 통로 폭 3m 미만 (규정 §4.2). 현재 2.5m로 측정되었습니다.</p>
+<div class="mt-2 flex gap-2">
+<button class="px-2 py-1 bg-surface-container text-on-surface-variant text-[11px] rounded hover:bg-outline-variant/30 transition-colors">무시</button>
+<button class="px-2 py-1 border border-primary text-primary text-[11px] rounded hover:bg-primary-container/10 transition-colors">자동 간격 조정 (AI)</button>
+</div>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded shadow-sm overflow-hidden flex">
+<div class="w-1 bg-violation-red shrink-0"></div>
+<div class="p-3 w-full">
+<div class="flex justify-between items-start mb-1">
+<div class="flex items-center gap-2">
+<div class="bg-violation-red text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">2</div>
+<span class="text-label-md font-label-md text-on-surface">구조물 간섭</span>
+</div>
+<button class="text-primary text-[11px] font-semibold hover:underline">위치 보기</button>
+</div>
+<p class="text-body-sm font-body-sm text-on-surface-variant">부스가 전시장 기둥 영역을 침범했습니다. 재배치가 필요합니다.</p>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded shadow-sm overflow-hidden flex">
+<div class="w-1 bg-violation-orange shrink-0"></div>
+<div class="p-3 w-full">
+<div class="flex justify-between items-start mb-1">
+<div class="flex items-center gap-2">
+<div class="bg-violation-orange text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">3</div>
+<span class="text-label-md font-label-md text-on-surface">설비 접근성 경고</span>
+</div>
+<button class="text-primary text-[11px] font-semibold hover:underline">위치 보기</button>
+</div>
+<p class="text-body-sm font-body-sm text-on-surface-variant">부스(C-104) 하단에 전기 트렌치가 없습니다. 배선 작업 시 추가 비용이 발생할 수 있습니다.</p>
+</div>
+</div>
+</div>
+</div>
+</aside>
+</main>
+</div>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/business_intelligence_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/business_intelligence_kintex_ai_system/code.html
new file mode 100644
index 0000000..eb4ac1d
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/business_intelligence_kintex_ai_system/code.html
@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Business Intelligence - KINTEX CMS</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "surface-border": "#E5E7EB",
+                    "surface-dim": "#d9dadb",
+                    "surface-bright": "#f8f9fa",
+                    "outline": "#727782",
+                    "inverse-on-surface": "#f0f1f2",
+                    "primary-fixed-dim": "#a6c8ff",
+                    "error-container": "#ffdad6",
+                    "on-background": "#191c1d",
+                    "on-surface": "#191c1d",
+                    "on-tertiary-container": "#ffc1b8",
+                    "on-primary-fixed-variant": "#004786",
+                    "on-primary": "#ffffff",
+                    "primary-fixed": "#d5e3ff",
+                    "surface-container-lowest": "#ffffff",
+                    "on-tertiary-fixed-variant": "#930002",
+                    "on-secondary": "#ffffff",
+                    "surface-container": "#edeeef",
+                    "surface-tint": "#115fac",
+                    "surface-variant": "#e1e3e4",
+                    "surface-container-highest": "#e1e3e4",
+                    "status-pending": "#F59E0B",
+                    "status-active": "#10B981",
+                    "on-tertiary-fixed": "#410000",
+                    "primary-container": "#0059a6",
+                    "surface-container-high": "#e7e8e9",
+                    "error": "#ba1a1a",
+                    "on-secondary-fixed-variant": "#1e4974",
+                    "secondary-fixed": "#d2e4ff",
+                    "tertiary": "#8a0002",
+                    "tertiary-fixed": "#ffdad5",
+                    "secondary-container": "#a6ccff",
+                    "outline-variant": "#c2c6d3",
+                    "on-surface-variant": "#424751",
+                    "surface-container-low": "#f3f4f5",
+                    "on-primary-fixed": "#001c3b",
+                    "surface": "#f8f9fa",
+                    "inverse-surface": "#2e3132",
+                    "on-error-container": "#93000a",
+                    "tertiary-container": "#b60004",
+                    "primary": "#00427d",
+                    "on-primary-container": "#b6d1ff",
+                    "on-tertiary": "#ffffff",
+                    "on-secondary-container": "#2e5682",
+                    "secondary": "#39608d",
+                    "on-secondary-fixed": "#001c37",
+                    "inverse-primary": "#a6c8ff",
+                    "on-error": "#ffffff",
+                    "secondary-fixed-dim": "#a3c9fc",
+                    "table-header": "#F1F5F9",
+                    "tertiary-fixed-dim": "#ffb4a9",
+                    "background": "#f8f9fa"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.125rem",
+                    "lg": "0.25rem",
+                    "xl": "0.5rem",
+                    "full": "0.75rem"
+            },
+            "spacing": {
+                    "margin-desktop": "32px",
+                    "container-max": "1440px",
+                    "margin-mobile": "16px",
+                    "gutter": "24px",
+                    "stack-sm": "8px",
+                    "stack-md": "16px",
+                    "stack-lg": "24px"
+            },
+            "fontFamily": {
+                    "headline-md": [
+                            "Hanken Grotesk"
+                    ],
+                    "mono-data": [
+                            "jetbrainsMono"
+                    ],
+                    "body-md": [
+                            "Hanken Grotesk"
+                    ],
+                    "headline-lg": [
+                            "Hanken Grotesk"
+                    ],
+                    "headline-lg-mobile": [
+                            "Hanken Grotesk"
+                    ],
+                    "body-sm": [
+                            "Hanken Grotesk"
+                    ],
+                    "label-md": [
+                            "Hanken Grotesk"
+                    ],
+                    "body-lg": [
+                            "Hanken Grotesk"
+                    ]
+            },
+            "fontSize": {
+                    "headline-md": [
+                            "20px",
+                            {
+                                    "lineHeight": "28px",
+                                    "fontWeight": "600"
+                            }
+                    ],
+                    "mono-data": [
+                            "13px",
+                            {
+                                    "lineHeight": "18px",
+                                    "fontWeight": "400"
+                            }
+                    ],
+                    "body-md": [
+                            "14px",
+                            {
+                                    "lineHeight": "20px",
+                                    "fontWeight": "400"
+                            }
+                    ],
+                    "headline-lg": [
+                            "30px",
+                            {
+                                    "lineHeight": "38px",
+                                    "letterSpacing": "-0.02em",
+                                    "fontWeight": "700"
+                            }
+                    ],
+                    "headline-lg-mobile": [
+                            "24px",
+                            {
+                                    "lineHeight": "32px",
+                                    "fontWeight": "700"
+                            }
+                    ],
+                    "body-sm": [
+                            "13px",
+                            {
+                                    "lineHeight": "18px",
+                                    "fontWeight": "400"
+                            }
+                    ],
+                    "label-md": [
+                            "12px",
+                            {
+                                    "lineHeight": "16px",
+                                    "letterSpacing": "0.05em",
+                                    "fontWeight": "600"
+                            }
+                    ],
+                    "body-lg": [
+                            "16px",
+                            {
+                                    "lineHeight": "24px",
+                                    "fontWeight": "400"
+                            }
+                    ]
+            }
+          },
+        }
+    </script>
+<style>
+        body { font-family: 'Hanken Grotesk', sans-serif; background-color: #f8f9fa; }
+        .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
+    </style>
+</head>
+<body class="bg-background text-on-background antialiased flex">
+
+<nav class="bg-surface dark:bg-surface text-primary dark:text-primary-fixed-dim font-body-md text-body-md w-[240px] h-screen fixed left-0 top-0 border-r border-surface-border dark:border-outline-variant hidden md:flex flex-col py-stack-lg z-50">
+<div class="px-gutter mb-stack-lg">
+<img alt="KINTEX CMS" class="h-8 w-auto mb-1" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhJ6mSmO7gYB5yorAcPYJvt7ueEqWunfucG8e_Jzc46nmEHQEJcqyjcE2wwSqJt-k8X-VZTFokrecioWxwsTSoEv2NseKlClk3NQdHyKgSid4vB-ephP5sTysFaWD1sDIRyJzuiJQvndrbq8K_sNftZWG3WEmhDQJQ-9CMcL6XEE2lSAxyCcBuZqScKfMI_7Cpf1YY7Mz9-96Tv-GmSpIGm4nYsDCST_Xbo7x4QH4Y6ijQVnID3nQFi3DfVKhr_vuJVg"/>
+<p class="font-body-sm text-body-sm text-on-surface-variant">Exhibition Management</p>
+</div>
+<div class="px-gutter mb-stack-md">
+<button class="w-full bg-primary-container text-on-primary-container py-2 rounded font-label-md text-label-md hover:opacity-90 transition-opacity" style="background-color: rgb(59, 98, 173);">Create New Event</button>
+</div>
+<ul class="flex-1 px-stack-sm flex flex-col gap-1">
+<li class="">
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200 active:scale-[0.98]" href="#">
+<img alt="Dashboard" class="w-5 h-5 opacity-70" src="https://lh3.googleusercontent.com/aida/AP1WRLtO2EjzKAcW5wn4YYTv12rmtFAvwxlN4fmvGGktwdLqfBGzTTC8C_nxjBMV0s73Yz_eqq3my6ASAxnQk9MMCNSeoTVuQwK9CU8en_ZU63PoTk6muzScTpKFEU2aFgRqpZAs3IBLHhlZXl4ENmWt1GO_lvpxzlx-FAVMFPeSHBfqi8lMEy8xvdRkiRB0MpVPgcEnBWn0SU0BsxlrRVjlVMlL3gAwpYNlLruSqKP5tDnBgDNwjHSKU9SUV04"/>
+                    Dashboard
+                </a>
+</li>
+<li class="">
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200 active:scale-[0.98]" href="#">
+<img alt="Exhibition Schedule" class="w-5 h-5 opacity-70" src="https://lh3.googleusercontent.com/aida/AP1WRLvpb_qiARCcrTrv6YnOIVjyk5szWwIfCGaaCmyRAnuu9aficeKfPTRrRHDgl4gJCHQUc7LYwtF1Ak04oSwBAezPs20C51ZjzHDaBCkRYJaYqHS-DOPHSGLdeLL_S2tlRlUAG-XF_ib2I1Svtqq26yY0uxmEQA5cWHJabFRv_0WVtBKiSP2QbCssxeccpcVHcWr_6CJ6zXonlepkxJcDXURlfHpvg7P2-O1urNto3A0xsepsB1ucua9Vnw"/>
+                    Exhibition Schedule
+                </a>
+</li>
+<li class="">
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200 active:scale-[0.98]" href="#">
+<img alt="Hall Operations" class="w-5 h-5 opacity-70" src="https://lh3.googleusercontent.com/aida/AP1WRLvz-lIs0s4a8Cy8eurZwY-dsuBDuvrLeIlIdHrd3y0aSi_u9kpOR3v59PRVX3Y1qP8SJ-459rs6AT8ZgXe7HMwRzZCOTLEpNNY1YqLtB8BBuVmnHOOVESaovK6ib38tM-qoAgpfO5Yxp-0ZCx3EwnULjy98lc_fpS8cQgxMEM-G3oAr71ToD4n-SEH55g1Kyz_ucSfAciJazI6fgyJbqOLgEAOJ-J-Bp1O30aTcbYVLFw3GRp7R06emYmc"/>
+                    Hall Operations
+                </a>
+</li>
+<li class="">
+<a class="flex items-center gap-3 px-3 py-2 rounded bg-secondary-container text-on-secondary-container dark:bg-primary-container dark:text-on-primary-container font-semibold transition-colors duration-200 active:scale-[0.98]" href="#">
+<img alt="Business Intelligence" class="w-5 h-5 brightness-0 invert" src="https://lh3.googleusercontent.com/aida/AP1WRLujD1FMRHChfM_aVKt2cd12chhcnm31L8Ks2EAzo-_FQ1_RV3zmYa4WUlSJ67wYexda4SpJU88Y5L0HdiYx6fLuKFdsDKjKWm1SmTq4PIP2tx1Nys-Txdlq4Wc1keg1GKsgrxNY68bHBEhurr-0NorgLbpp032gBkj_vE345bYKJwSr5MEnipvo_1P7iE9cXEBybLmdLLYK6vM1nB7dbmVt9_NHG3NQgK7wcPfIaNBrnXrEqtZeckWX3v8"/>
+                    Business Intelligence
+                </a>
+</li>
+</ul>
+<div class="mt-auto px-stack-sm border-t border-surface-border pt-stack-md">
+<ul class="flex flex-col gap-1">
+<li class="">
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200" href="#">
+<span class="material-symbols-outlined text-lg">settings</span>
+                        Settings
+                    </a>
+</li>
+<li class="">
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200" href="#">
+<span class="material-symbols-outlined text-lg">help</span>
+                        Support
+                    </a>
+</li>
+</ul>
+</div>
+</nav>
+
+<div class="flex-1 md:ml-[240px] flex flex-col min-h-screen">
+
+<header class="bg-surface dark:bg-surface text-primary dark:text-primary-fixed-dim font-label-md text-label-md h-16 w-full md:w-[calc(100%-240px)] fixed top-0 right-0 z-40 border-b border-surface-border dark:border-outline-variant flex items-center justify-between px-margin-desktop ml-0 md:ml-[240px]">
+
+<button class="md:hidden text-primary mr-4">
+<span class="material-symbols-outlined">menu</span>
+</button>
+<nav class="hidden md:flex items-center gap-stack-lg flex-1">
+<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100 pb-1" href="#">Overview</a>
+<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100 pb-1" href="#">Hall Map</a>
+<a class="text-primary border-b-2 border-primary pb-1 transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Reports</a>
+</nav>
+<div class="flex items-center gap-stack-md ml-auto">
+<div class="relative hidden sm:block">
+<img alt="Search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 opacity-50" src="https://lh3.googleusercontent.com/aida/AP1WRLvR8KDDPFgH9vKk_aFJ_lA5WCSRmrDnPhJH5rSjuWilOAI5PMDe5z2hRnRLQhSn7_712ig52lC61Bb_R8bUkkbqNGZPv3dvykD_Oky9hXWygGnc1ybvaI9TcbT1Yw4Bd2JySNFbit4ho4113ql2BsDvpvJ2ZN64zJqv5GowDs0mdnDyFTwPWmGEKEPr3MigJ4LAaeegtd0fEG_pZWtGpsGSNPVdj4r_TbmkKSxdvmZG_kh-ujSkrXGZzkQ"/>
+<input class="pl-10 pr-4 py-1.5 rounded-full border border-surface-border bg-surface-bright focus:outline-none focus:border-primary-container text-sm w-48 lg:w-64" placeholder="Search reports..." type="text"/>
+</div>
+<button class="text-primary hover:text-primary-container transition-colors cursor-pointer opacity-90 hover:opacity-100 flex items-center gap-2 border border-surface-border px-3 py-1.5 rounded">
+<span class="material-symbols-outlined text-sm">refresh</span>
+<span class="hidden lg:inline">Refresh Data</span>
+</button>
+<div class="flex items-center gap-3 border-l border-surface-border pl-stack-md ml-stack-sm">
+<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100">
+<span class="material-symbols-outlined">notifications</span>
+</button>
+<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100">
+<span class="material-symbols-outlined">account_circle</span>
+</button>
+</div>
+</div>
+</header>
+
+<main class="flex-1 mt-16 p-margin-mobile md:p-margin-desktop max-w-[1440px] w-full mx-auto">
+
+<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-stack-lg gap-4">
+<div>
+<h2 class="font-headline-lg-mobile md:font-headline-lg text-headline-lg-mobile md:text-headline-lg text-on-background">Analytics Reports</h2>
+<p class="font-body-md text-body-md text-on-surface-variant mt-1">Exhibition Organizer & Exhibitor Insights</p>
+</div>
+<div class="flex gap-2">
+<button class="bg-surface-container-low border border-surface-border text-on-surface px-4 py-2 rounded flex items-center gap-2 hover:bg-surface-container transition-colors">
+<span class="material-symbols-outlined text-sm">download</span>
+<span class="font-label-md text-label-md">Export PDF</span>
+</button>
+<button class="bg-surface-container-low border border-surface-border text-on-surface px-4 py-2 rounded flex items-center gap-2 hover:bg-surface-container transition-colors">
+<span class="material-symbols-outlined text-sm">table_view</span>
+<span class="font-label-md text-label-md">Export Excel</span>
+</button>
+</div>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
+
+<div class="md:col-span-3 grid grid-cols-1 sm:grid-cols-3 gap-gutter">
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col justify-between">
+<div class="flex justify-between items-start mb-2">
+<span class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Total Visitors</span>
+<span class="material-symbols-outlined text-primary-container">groups</span>
+</div>
+<div class="font-headline-lg text-headline-lg text-on-background">45,210</div>
+<div class="flex items-center gap-1 mt-2 text-status-active font-body-sm text-body-sm">
+<span class="material-symbols-outlined text-sm">trending_up</span>
+<span class="">+12.5% vs last event</span>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col justify-between">
+<div class="flex justify-between items-start mb-2">
+<span class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Avg Dwell Time</span>
+<span class="material-symbols-outlined text-primary-container">schedule</span>
+</div>
+<div class="font-headline-lg text-headline-lg text-on-background">4h 15m</div>
+<div class="flex items-center gap-1 mt-2 text-status-active font-body-sm text-body-sm">
+<span class="material-symbols-outlined text-sm">trending_up</span>
+<span class="">+45m vs last event</span>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col justify-between">
+<div class="flex justify-between items-start mb-2">
+<span class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Matching Success</span>
+<img alt="AI Match" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY"/>
+</div>
+<div class="font-headline-lg text-headline-lg text-on-background">87.3%</div>
+<div class="flex items-center gap-1 mt-2 text-on-surface-variant font-body-sm text-body-sm">
+<span class="material-symbols-outlined text-sm">insights</span>
+<span class="">AI-driven matches</span>
+</div>
+</div>
+</div>
+
+<div class="md:col-span-2 bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md min-h-[400px] flex flex-col">
+<div class="flex justify-between items-center mb-stack-md">
+<h3 class="font-headline-md text-headline-md text-on-background">Exhibitor vs Buyer Matching Trends</h3>
+<select class="bg-surface-bright border border-surface-border rounded px-3 py-1 font-body-sm text-body-sm focus:outline-none focus:border-primary">
+<option>Last 7 Days</option>
+<option>This Month</option>
+<option>Overall Event</option>
+</select>
+</div>
+
+<div class="flex-1 bg-surface-bright rounded border border-surface-dim flex items-center justify-center relative overflow-hidden">
+<div class="absolute inset-0 bg-[linear-gradient(to_right,#f0f1f2_1px,transparent_1px),linear-gradient(to_bottom,#f0f1f2_1px,transparent_1px)] bg-[size:2rem_2rem] opacity-50"></div>
+
+<svg class="absolute inset-0 w-full h-full" preserveaspectratio="none" viewbox="0 0 100 100">
+<path class="opacity-80" d="M0,80 Q20,60 40,70 T80,40 T100,20" fill="none" stroke="#3b62ad" stroke-width="2"></path>
+<path class="opacity-80" d="M0,90 Q30,70 50,80 T90,50 T100,60" fill="none" stroke="#6389b8" stroke-width="2"></path>
+</svg>
+<div class="relative z-10 font-mono-data text-mono-data text-outline">Chart Visualization Area</div>
+</div>
+</div>
+
+<div class="md:col-span-1 bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col">
+<div class="flex items-center gap-2 mb-stack-md">
+<h3 class="font-headline-md text-headline-md text-on-background">Industry Trend Analysis</h3>
+<img alt="Analytics" class="w-5 h-5 opacity-50" src="https://lh3.googleusercontent.com/aida/AP1WRLujD1FMRHChfM_aVKt2cd12chhcnm31L8Ks2EAzo-_FQ1_RV3zmYa4WUlSJ67wYexda4SpJU88Y5L0HdiYx6fLuKFdsDKjKWm1SmTq4PIP2tx1Nys-Txdlq4Wc1keg1GKsgrxNY68bHBEhurr-0NorgLbpp032gBkj_vE345bYKJwSr5MEnipvo_1P7iE9cXEBybLmdLLYK6vM1nB7dbmVt9_NHG3NQgK7wcPfIaNBrnXrEqtZeckWX3v8"/>
+</div>
+<div class="flex-1 flex flex-col gap-4">
+
+<div>
+<div class="flex justify-between font-body-sm text-body-sm mb-1">
+<span class="text-on-background">Technology & IT</span>
+<span class="font-mono-data text-mono-data">45%</span>
+</div>
+<div class="w-full bg-surface-container rounded-full h-2">
+<div class="bg-primary-container h-2 rounded-full" style="width: 45%; background-color: rgb(59, 98, 173);"></div>
+</div>
+</div>
+
+<div>
+<div class="flex justify-between font-body-sm text-body-sm mb-1">
+<span class="text-on-background">Manufacturing</span>
+<span class="font-mono-data text-mono-data">28%</span>
+</div>
+<div class="w-full bg-surface-container rounded-full h-2">
+<div class="bg-secondary h-2 rounded-full" style="width: 28%"></div>
+</div>
+</div>
+
+<div>
+<div class="flex justify-between font-body-sm text-body-sm mb-1">
+<span class="text-on-background">Healthcare</span>
+<span class="font-mono-data text-mono-data">15%</span>
+</div>
+<div class="w-full bg-surface-container rounded-full h-2">
+<div class="bg-outline h-2 rounded-full" style="width: 15%"></div>
+</div>
+</div>
+
+<div>
+<div class="flex justify-between font-body-sm text-body-sm mb-1">
+<span class="text-on-background">Retail & E-commerce</span>
+<span class="font-mono-data text-mono-data">12%</span>
+</div>
+<div class="w-full bg-surface-container rounded-full h-2">
+<div class="bg-surface-dim h-2 rounded-full" style="width: 12%"></div>
+</div>
+</div>
+</div>
+</div>
+
+<div class="md:col-span-3 bg-surface-container-lowest border border-surface-border rounded-lg overflow-hidden flex flex-col">
+<div class="p-stack-md border-b border-surface-border flex justify-between items-center bg-surface-bright">
+<h3 class="font-headline-md text-headline-md text-on-background">Top Exhibitor Performance</h3>
+<button class="text-primary font-label-md text-label-md hover:underline">View All</button>
+</div>
+<div class="overflow-x-auto">
+<table class="w-full text-left border-collapse">
+<thead>
+<tr class="bg-table-header text-on-surface-variant font-label-md text-label-md uppercase">
+<th class="py-3 px-4 font-semibold border-b border-surface-border">Exhibitor Name</th>
+<th class="py-3 px-4 font-semibold border-b border-surface-border">Booth Location</th>
+<th class="py-3 px-4 font-semibold border-b border-surface-border text-right">Total Visitors</th>
+<th class="py-3 px-4 font-semibold border-b border-surface-border text-right">Matches Made</th>
+<th class="py-3 px-4 font-semibold border-b border-surface-border text-center">Status</th>
+</tr>
+</thead>
+<tbody class="font-body-sm text-body-sm text-on-background">
+<tr class="border-b border-surface-border hover:bg-surface-bright transition-colors">
+<td class="py-3 px-4 font-medium">TechNova Solutions</td>
+<td class="py-3 px-4 text-on-surface-variant">Hall 1 - A12</td>
+<td class="py-3 px-4 text-right font-mono-data text-mono-data">1,245</td>
+<td class="py-3 px-4 text-right font-mono-data text-mono-data">84</td>
+<td class="py-3 px-4 text-center">
+<span class="bg-status-active/10 text-status-active px-2 py-1 rounded-full text-xs font-semibold">Excellent</span>
+</td>
+</tr>
+<tr class="border-b border-surface-border bg-[#F9FAFB] hover:bg-surface-bright transition-colors">
+<td class="py-3 px-4 font-medium">Global Manufacturing Inc.</td>
+<td class="py-3 px-4 text-on-surface-variant">Hall 2 - B04</td>
+<td class="py-3 px-4 text-right font-mono-data text-mono-data">980</td>
+<td class="py-3 px-4 text-right font-mono-data text-mono-data">62</td>
+<td class="py-3 px-4 text-center">
+<span class="bg-status-active/10 text-status-active px-2 py-1 rounded-full text-xs font-semibold">Good</span>
+</td>
+</tr>
+<tr class="border-b border-surface-border hover:bg-surface-bright transition-colors">
+<td class="py-3 px-4 font-medium">HealthSys Providers</td>
+<td class="py-3 px-4 text-on-surface-variant">Hall 3 - C22</td>
+<td class="py-3 px-4 text-right font-mono-data text-mono-data">750</td>
+<td class="py-3 px-4 text-right font-mono-data text-mono-data">45</td>
+<td class="py-3 px-4 text-center">
+<span class="bg-status-pending/10 text-status-pending px-2 py-1 rounded-full text-xs font-semibold">Average</span>
+</td>
+</tr>
+<tr class="hover:bg-surface-bright transition-colors bg-[#F9FAFB]">
+<td class="py-3 px-4 font-medium">Retail Innovations LLC</td>
+<td class="py-3 px-4 text-on-surface-variant">Hall 1 - D01</td>
+<td class="py-3 px-4 text-right font-mono-data text-mono-data">520</td>
+<td class="py-3 px-4 text-right font-mono-data text-mono-data">30</td>
+<td class="py-3 px-4 text-center">
+<span class="bg-status-pending/10 text-status-pending px-2 py-1 rounded-full text-xs font-semibold">Needs Review</span>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+</div>
+</main>
+</div>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/compliance_report_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/compliance_report_kintex_ai_system/code.html
new file mode 100644
index 0000000..e4750f3
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/compliance_report_kintex_ai_system/code.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>규정 검증 결과 - KINTEX AI</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
+<style>
+        .material-symbols-outlined {
+            font-family: 'Material Symbols Outlined';
+            font-weight: normal;
+            font-style: normal;
+            font-size: 24px;
+            line-height: 1;
+            letter-spacing: normal;
+            text-transform: none;
+            display: inline-block;
+            white-space: nowrap;
+            word-wrap: normal;
+            direction: ltr;
+            -webkit-font-feature-settings: 'liga';
+            -webkit-font-smoothing: antialiased;
+        }
+    </style>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-secondary-fixed-variant": "#4500d8",
+                        "on-primary-container": "#d2e3ff",
+                        "primary-fixed": "#d3e4ff",
+                        "surface-container-lowest": "#ffffff",
+                        "surface-variant": "#dbe2f9",
+                        "on-error-container": "#93000a",
+                        "on-surface": "#141b2c",
+                        "surface-bright": "#f9f9ff",
+                        "surface": "#f9f9ff",
+                        "inverse-surface": "#293041",
+                        "on-tertiary-fixed": "#002113",
+                        "inverse-primary": "#a2c9ff",
+                        "primary-fixed-dim": "#a2c9ff",
+                        "secondary-container": "#6d4aff",
+                        "on-primary-fixed-variant": "#004881",
+                        "on-primary-fixed": "#001c38",
+                        "outline": "#717782",
+                        "error-container": "#ffdad6",
+                        "on-tertiary": "#ffffff",
+                        "background": "#f9f9ff",
+                        "tertiary": "#00583b",
+                        "on-primary": "#ffffff",
+                        "on-error": "#ffffff",
+                        "secondary": "#5427e6",
+                        "on-surface-variant": "#414751",
+                        "on-secondary-fixed": "#1b0063",
+                        "on-secondary": "#ffffff",
+                        "outline-variant": "#c1c7d3",
+                        "surface-container-high": "#e0e8ff",
+                        "tertiary-container": "#00734e",
+                        "on-tertiary-fixed-variant": "#005236",
+                        "primary": "#004e8b",
+                        "secondary-fixed-dim": "#c9bfff",
+                        "surface-dim": "#d2daf0",
+                        "primary-container": "#0066b3",
+                        "on-tertiary-container": "#8ef7c3",
+                        "secondary-fixed": "#e5deff",
+                        "on-secondary-container": "#f3edff",
+                        "tertiary-fixed-dim": "#72daa9",
+                        "surface-container-highest": "#dbe2f9",
+                        "surface-tint": "#0060a9",
+                        "surface-container-low": "#f1f3ff",
+                        "inverse-on-surface": "#edf0ff",
+                        "tertiary-fixed": "#8ef7c4",
+                        "surface-container": "#e9edff",
+                        "error": "#ba1a1a",
+                        "on-background": "#141b2c"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "stack-md": "16px",
+                        "stack-lg": "24px",
+                        "container-padding": "24px",
+                        "gutter": "16px",
+                        "stack-sm": "8px",
+                        "base": "4px"
+                    },
+                    "fontFamily": {
+                        "title-sm": ["Inter"],
+                        "display-lg-mobile": ["Inter"],
+                        "display-lg": ["Inter"],
+                        "headline-md": ["Inter"],
+                        "body-base": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "label-md": ["Geist"],
+                        "label-xs": ["Geist"]
+                    },
+                    "fontSize": {
+                        "title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
+                        "display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
+                        "body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
+                        "label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }]
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-background text-on-background font-body-base h-screen flex overflow-hidden">
+
+<nav class="fixed left-0 top-0 h-screen w-60 border-r border-outline-variant bg-surface-container-low flex flex-col h-full py-container-padding z-50">
+<div class="px-container-padding mb-stack-lg">
+<div class="flex items-center gap-stack-sm">
+<span class="material-symbols-outlined text-primary text-[32px]">apartment</span>
+<div>
+<h1 class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI</h1>
+<p class="text-label-md font-label-md text-on-surface-variant mt-base">Exhibition Manager</p>
+</div>
+</div>
+</div>
+<div class="flex-1 overflow-y-auto mt-stack-md flex flex-col gap-base px-stack-sm">
+
+<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
+                Dashboard
+            </a>
+<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span class="material-symbols-outlined" data-icon="architecture">architecture</span>
+                Floor Plan Studio
+            </a>
+<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span class="material-symbols-outlined" data-icon="groups">groups</span>
+                Exhibitor Management
+            </a>
+
+<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-primary font-bold border-r-4 border-primary bg-primary-container/10 text-label-md font-label-md" href="#">
+<span class="material-symbols-outlined" data-icon="assignment" style="font-variation-settings: 'FILL' 1;">assignment</span>
+                Documents
+            </a>
+<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span class="material-symbols-outlined" data-icon="payments">payments</span>
+                Settlement
+            </a>
+</div>
+<div class="mt-auto pt-stack-md border-t border-outline-variant flex flex-col gap-base px-stack-sm">
+<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span class="material-symbols-outlined" data-icon="settings">settings</span>
+                Settings
+            </a>
+<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span class="material-symbols-outlined" data-icon="help">help</span>
+                Support
+            </a>
+</div>
+</nav>
+
+<main class="ml-60 flex-1 flex flex-col h-full overflow-y-auto">
+<div class="max-w-[1440px] mx-auto w-full px-container-padding py-stack-lg flex flex-col h-full gap-stack-lg">
+
+<header class="flex flex-col gap-stack-sm">
+<div class="flex items-center gap-2 text-label-md font-label-md text-on-surface-variant mb-1">
+<span class="cursor-pointer hover:text-primary">Exhibitor Management</span>
+<span class="material-symbols-outlined text-[16px]">chevron_right</span>
+<span class="text-on-surface">Documents</span>
+</div>
+<h2 class="text-display-lg font-display-lg text-on-surface">부스 A-102 · 설계 v2 · 규정 검증 결과</h2>
+
+<div class="mt-stack-sm bg-error-container text-on-error-container px-stack-md py-3 rounded-lg flex items-center gap-stack-sm border border-error/20">
+<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">error</span>
+<span class="text-title-sm font-title-sm font-semibold">차단 1건 · 경고 2건 · 통과 14건 — 차단 항목 해결 전 제출 불가</span>
+</div>
+</header>
+
+<section class="w-full border-2 border-dashed border-outline-variant bg-surface-bright rounded-xl p-stack-lg flex flex-col items-center justify-center gap-stack-sm hover:border-primary transition-colors cursor-pointer group">
+<div class="bg-surface-container rounded-full p-3 group-hover:bg-primary-container/10 transition-colors">
+<span class="material-symbols-outlined text-primary text-[32px]">upload_file</span>
+</div>
+<div class="flex items-center gap-2">
+<span class="text-body-base font-body-base font-medium text-on-surface">기존 도면 업로드 (PDF/이미지)</span>
+<span class="bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded-full text-label-xs font-label-xs border border-outline-variant">참고용 검증</span>
+</div>
+<p class="text-body-sm font-body-sm text-on-surface-variant">드래그 앤 드롭 또는 클릭하여 파일 선택</p>
+</section>
+
+<div class="grid grid-cols-12 gap-gutter flex-1 min-h-0 pb-stack-lg">
+
+<div class="col-span-7 bg-surface-container-lowest border border-outline-variant rounded-xl flex flex-col overflow-hidden">
+<div class="px-stack-md py-3 border-b border-outline-variant bg-surface-bright flex justify-between items-center">
+<h3 class="text-title-sm font-title-sm text-on-surface">자동 검증 체크리스트</h3>
+<div class="flex items-center gap-2 text-body-sm font-body-sm text-on-surface-variant">
+<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-error"></span>차단</span>
+<span class="flex items-center gap-1 ml-2"><span class="w-2 h-2 rounded-full bg-[#f59e0b]"></span>경고</span>
+<span class="flex items-center gap-1 ml-2"><span class="w-2 h-2 rounded-full bg-tertiary-container"></span>통과</span>
+</div>
+</div>
+<div class="flex-1 overflow-y-auto p-stack-md flex flex-col gap-stack-sm">
+
+<div class="border border-error/30 rounded-lg overflow-hidden">
+<div class="bg-error-container/30 px-stack-md py-2 border-b border-error/20 flex items-center gap-2">
+<span class="material-symbols-outlined text-error text-[20px]">straighten</span>
+<span class="text-label-md font-label-md text-on-error-container font-bold">높이 규정</span>
+</div>
+<div class="bg-surface-container-lowest p-stack-md flex items-start justify-between gap-stack-md">
+<div class="flex gap-stack-sm">
+<span class="material-symbols-outlined text-error mt-0.5" style="font-variation-settings: 'FILL' 1;">cancel</span>
+<div>
+<p class="text-body-base font-body-base text-on-surface font-medium">장치물 높이 5m 이하</p>
+<p class="text-body-sm font-body-sm text-error mt-1 font-medium bg-error/10 inline-block px-2 py-0.5 rounded">측정 5.4m — 0.4m 초과</p>
+</div>
+</div>
+<span class="bg-error text-on-error px-2 py-1 rounded-md text-label-xs font-label-xs font-bold uppercase tracking-wide flex items-center gap-1">
+                                    차단
+                                </span>
+</div>
+</div>
+
+<div class="border border-[#f59e0b]/30 rounded-lg overflow-hidden">
+<div class="bg-[#fef3c7] px-stack-md py-2 border-b border-[#f59e0b]/20 flex items-center gap-2">
+<span class="material-symbols-outlined text-[#d97706] text-[20px]">architecture</span>
+<span class="text-label-md font-label-md text-[#92400e] font-bold">리깅 (Rigging)</span>
+</div>
+<div class="bg-surface-container-lowest p-stack-md flex items-start justify-between gap-stack-md">
+<div class="flex gap-stack-sm">
+<span class="material-symbols-outlined text-[#d97706] mt-0.5" style="font-variation-settings: 'FILL' 1;">warning</span>
+<div>
+<p class="text-body-base font-body-base text-on-surface font-medium">리깅 트러스 하중 및 구조체 확인</p>
+<p class="text-body-sm font-body-sm text-on-surface-variant mt-1">도면상 리깅 포인트 확인됨. 규정 하중 내인지 증빙 필요.</p>
+</div>
+</div>
+<span class="bg-secondary text-on-secondary px-2 py-1 rounded-md text-label-xs font-label-xs font-medium flex items-center gap-1 whitespace-nowrap">
+<span class="material-symbols-outlined text-[14px]">auto_awesome</span>
+                                    구조계산서 D-7 제출 필요
+                                </span>
+</div>
+</div>
+
+<div class="border border-outline-variant rounded-lg overflow-hidden">
+<div class="bg-surface-container px-stack-md py-2 border-b border-outline-variant flex items-center gap-2">
+<span class="material-symbols-outlined text-on-surface-variant text-[20px]">layers</span>
+<span class="text-label-md font-label-md text-on-surface font-bold">복층 구조</span>
+</div>
+<div class="bg-surface-container-lowest p-stack-md flex items-start justify-between gap-stack-md">
+<div class="flex gap-stack-sm">
+<span class="material-symbols-outlined text-tertiary-container mt-0.5" style="font-variation-settings: 'FILL' 1;">check_circle</span>
+<div>
+<p class="text-body-base font-body-base text-on-surface font-medium">복층 면적 제한 (전체 부스 면적의 50% 이하)</p>
+<p class="text-body-sm font-body-sm text-on-surface-variant mt-1">측정 30% (통과)</p>
+</div>
+</div>
+</div>
+</div>
+
+<div class="border border-outline-variant rounded-lg overflow-hidden">
+<div class="bg-surface-container px-stack-md py-2 border-b border-outline-variant flex items-center gap-2">
+<span class="material-symbols-outlined text-on-surface-variant text-[20px]">local_fire_department</span>
+<span class="text-label-md font-label-md text-on-surface font-bold">방염 규정</span>
+</div>
+<div class="bg-surface-container-lowest p-stack-md flex flex-col gap-2">
+<div class="flex items-start justify-between gap-stack-md py-1 border-b border-outline-variant border-dashed last:border-0">
+<div class="flex gap-stack-sm">
+<span class="material-symbols-outlined text-tertiary-container mt-0.5 text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
+<p class="text-body-sm font-body-sm text-on-surface">목공 마감재 방염 처리</p>
+</div>
+</div>
+<div class="flex items-start justify-between gap-stack-md py-1 border-b border-outline-variant border-dashed last:border-0">
+<div class="flex gap-stack-sm">
+<span class="material-symbols-outlined text-tertiary-container mt-0.5 text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
+<p class="text-body-sm font-body-sm text-on-surface">바닥재(파이텍스) 방염 성능</p>
+</div>
+</div>
+</div>
+</div>
+
+<div class="border border-outline-variant rounded-lg overflow-hidden">
+<div class="bg-surface-container px-stack-md py-2 border-b border-outline-variant flex items-center gap-2">
+<span class="material-symbols-outlined text-on-surface-variant text-[20px]">block</span>
+<span class="text-label-md font-label-md text-on-surface font-bold">금지작업</span>
+</div>
+<div class="bg-surface-container-lowest p-stack-md flex items-start justify-between gap-stack-md">
+<div class="flex gap-stack-sm">
+<span class="material-symbols-outlined text-tertiary-container mt-0.5" style="font-variation-settings: 'FILL' 1;">check_circle</span>
+<div>
+<p class="text-body-base font-body-base text-on-surface font-medium">용접 및 현장 도장 작업 금지</p>
+<p class="text-body-sm font-body-sm text-on-surface-variant mt-1">도면 내 특이사항 없음</p>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+<div class="col-span-5 bg-surface-container-lowest border border-outline-variant rounded-xl flex flex-col p-stack-md">
+<div class="flex justify-between items-center mb-stack-sm">
+<h3 class="text-title-sm font-title-sm text-on-surface">설계 도면 검토 (Elevation)</h3>
+<div class="flex gap-2">
+<button class="p-1 rounded hover:bg-surface-variant text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">zoom_in</span></button>
+<button class="p-1 rounded hover:bg-surface-variant text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">zoom_out</span></button>
+</div>
+</div>
+<div class="flex-1 relative bg-surface-variant rounded-lg border border-outline-variant overflow-hidden group min-h-[400px]">
+
+<div class="absolute inset-0 bg-cover bg-center w-full h-full opacity-90" data-alt="A highly detailed, technical blueprint elevation drawing of a modern exhibition booth. The drawing is on a bright, minimalist grid background with stark black lines and architectural dimensions. The lighting is flat and neutral, fitting a corporate B2B structural review context. Aesthetically clean, precise, and institutional." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBHUs3va7g3b7TQk9nWcOijjo3U1kfVr1-Zm-mmsaOEchkr0GHZ2JUDChM26bsDLSFGiDZ6yX4itJ6olM6eJOivcQIhFDDofuB4JLujZlsieMXpPkPw4uQnN_i2XSR-Fc1fpDjgoM8lcZJSnmm2enpZfEZ9ZKpplAtjE9MqM9G0crZUI3u7TqDJnnkK8i0opUoNZ1yK9hfo08c7qXz0ZPM14Sj5ODonOjOrRpDiUuRAVPGFr66dJYsw')"></div>
+
+<div class="absolute inset-0 bg-black/5 pointer-events-none"></div>
+
+<div class="absolute top-[15%] left-[30%] w-[40%] h-[20%] border-2 border-error bg-error/20 flex items-center justify-center pointer-events-none animate-pulse">
+
+<div class="absolute -right-2 -translate-y-1/2 top-1/2 translate-x-full bg-error text-on-error px-2 py-1 rounded text-label-md font-label-md font-bold whitespace-nowrap shadow-lg flex items-center gap-1">
+<span class="material-symbols-outlined text-[16px]">warning</span>
+                                5.4m (초과)
+                                
+<div class="absolute right-full top-1/2 -translate-y-1/2 w-2 h-0.5 bg-error"></div>
+</div>
+</div>
+
+<div class="absolute bottom-4 right-4 bg-surface-container-lowest/90 backdrop-blur-sm border border-outline-variant p-2 rounded shadow-sm">
+<div class="w-16 h-16 bg-cover bg-center opacity-70 border border-outline" data-alt="A small, stylized thumbnail of a full exhibition hall floor plan, shown from a top-down perspective. Minimalist gray and white blocks on a light surface background, corporate and precise." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDBbzLkhGlWBnAjEBLDvBEsrC9X4uifRkinxIfAGdL4DK0qQnAPYTiCczPQKLGkYTqixzTFFacKmzJnkQFHb3hblGobbP52rCxka8DZ2zjmLon8pLSdU833icpCg3ilcJCUKUizknEsb3_oYyWGZUsaoLQG7TTnUUpaD0wDrfDA2zcuDl_OHj2adXg_HdOvGhEyOt_sbL6Aq5zDfKUBWv_Hhb5tR896DwvMfahz7ylBrUJrA59npB04')"></div>
+<div class="w-2 h-2 bg-primary rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
+</div>
+</div>
+</div>
+</div>
+
+<footer class="mt-auto pt-stack-md border-t border-outline-variant flex items-center justify-between bg-background">
+<div class="flex items-center gap-2 text-body-sm font-body-sm text-on-surface-variant">
+<span class="material-symbols-outlined text-[18px]">info</span>
+<p>본 검증은 사전 필터이며 최종 승인은 킨텍스·구조기술사 판단 · v1.0</p>
+</div>
+<button class="bg-surface-variant text-on-surface-variant/50 cursor-not-allowed px-6 py-3 rounded-lg text-label-md font-label-md flex items-center gap-2 border border-outline-variant/30" disabled="">
+                    검증 리포트 첨부하여 제출
+                    <span class="material-symbols-outlined text-[18px]">send</span>
+</button>
+</footer>
+</div>
+</main>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/component_guide_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/component_guide_kintex_ai_system/code.html
new file mode 100644
index 0000000..a28f2ea
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/component_guide_kintex_ai_system/code.html
@@ -0,0 +1,566 @@
+<!DOCTYPE html>
+
+<html class="light" lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>KINTEX AI - UI Library</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "tertiary": "#00583b",
+                    "on-secondary-fixed-variant": "#4500d8",
+                    "surface-bright": "#f9f9ff",
+                    "secondary-container": "#6d4aff",
+                    "on-secondary-container": "#f3edff",
+                    "tertiary-fixed": "#8ef7c4",
+                    "surface-container-high": "#e0e8ff",
+                    "on-tertiary": "#ffffff",
+                    "on-primary-fixed": "#001c38",
+                    "on-tertiary-fixed": "#002113",
+                    "primary-container": "#0066b3",
+                    "surface": "#f9f9ff",
+                    "error": "#ba1a1a",
+                    "on-secondary": "#ffffff",
+                    "on-primary-container": "#d2e3ff",
+                    "inverse-surface": "#293041",
+                    "on-error": "#ffffff",
+                    "background": "#f9f9ff",
+                    "surface-container-highest": "#dbe2f9",
+                    "on-background": "#141b2c",
+                    "surface-dim": "#d2daf0",
+                    "on-primary-fixed-variant": "#004881",
+                    "secondary-fixed-dim": "#c9bfff",
+                    "secondary-fixed": "#e5deff",
+                    "on-secondary-fixed": "#1b0063",
+                    "secondary": "#5427e6",
+                    "on-error-container": "#93000a",
+                    "tertiary-fixed-dim": "#72daa9",
+                    "surface-variant": "#dbe2f9",
+                    "surface-container-lowest": "#ffffff",
+                    "on-tertiary-container": "#8ef7c3",
+                    "error-container": "#ffdad6",
+                    "primary": "#004e8b",
+                    "surface-tint": "#0060a9",
+                    "on-surface-variant": "#414751",
+                    "outline": "#717782",
+                    "primary-fixed": "#d3e4ff",
+                    "inverse-primary": "#a2c9ff",
+                    "tertiary-container": "#00734e",
+                    "on-surface": "#141b2c",
+                    "on-primary": "#ffffff",
+                    "primary-fixed-dim": "#a2c9ff",
+                    "inverse-on-surface": "#edf0ff",
+                    "surface-container-low": "#f1f3ff",
+                    "surface-container": "#e9edff",
+                    "outline-variant": "#c1c7d3",
+                    "on-tertiary-fixed-variant": "#005236"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.125rem",
+                    "lg": "0.25rem",
+                    "xl": "0.5rem",
+                    "full": "0.75rem"
+            },
+            "spacing": {
+                    "base": "4px",
+                    "stack-sm": "8px",
+                    "container-padding": "24px",
+                    "stack-md": "16px",
+                    "stack-lg": "24px",
+                    "gutter": "16px"
+            },
+            "fontFamily": {
+                    "label-xs": ["Geist"],
+                    "body-base": ["Inter"],
+                    "label-md": ["Geist"],
+                    "headline-md": ["Inter"],
+                    "display-lg": ["Inter"],
+                    "body-sm": ["Inter"],
+                    "title-sm": ["Inter"]
+            },
+            "fontSize": {
+                    "label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
+                    "body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
+                    "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
+                    "headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
+                    "display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
+                    "body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
+                    "title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .ai-glow-border {
+            border: 1px solid #6d4aff;
+            box-shadow: 0 0 8px rgba(109, 74, 255, 0.2);
+        }
+        .glass-panel {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(228, 231, 236, 1);
+        }
+        .bento-grid {
+            display: grid;
+            grid-template-columns: repeat(12, 1fr);
+            gap: 16px;
+        }
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f3ff;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #c1c7d3;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #717782;
+        }
+    </style>
+</head>
+<body class="bg-background text-on-background font-body-base">
+
+<aside class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
+<div class="px-6 mb-8">
+<h1 class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI</h1>
+<p class="text-body-sm font-body-sm text-on-surface-variant">Exhibition Manager</p>
+</div>
+<nav class="flex-1 space-y-1">
+<a class="flex items-center px-6 py-3 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">dashboard</span>
+<span class="text-label-md font-label-md">Dashboard</span>
+</a>
+<a class="flex items-center px-6 py-3 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">architecture</span>
+<span class="text-label-md font-label-md">Floor Plan Studio</span>
+</a>
+<a class="flex items-center px-6 py-3 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">groups</span>
+<span class="text-label-md font-label-md">Exhibitor Management</span>
+</a>
+
+<a class="flex items-center px-6 py-3 space-x-3 text-primary font-bold border-r-4 border-primary bg-primary-container/10 transition-all duration-200" href="#">
+<span class="material-symbols-outlined">library_books</span>
+<span class="text-label-md font-label-md">Component Guide</span>
+</a>
+<a class="flex items-center px-6 py-3 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">payments</span>
+<span class="text-label-md font-label-md">Settlement</span>
+</a>
+</nav>
+<div class="mt-auto px-6 space-y-1">
+<a class="flex items-center py-2 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">settings</span>
+<span class="text-label-md font-label-md">Settings</span>
+</a>
+<a class="flex items-center py-2 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">help</span>
+<span class="text-label-md font-label-md">Support</span>
+</a>
+</div>
+</aside>
+
+<header class="fixed top-0 right-0 left-60 h-16 bg-surface border-b border-outline-variant flex justify-between items-center px-container-padding z-40">
+<div class="flex items-center space-x-8">
+<span class="text-title-sm font-title-sm font-bold text-on-surface">Exhibition Studio</span>
+<nav class="flex space-x-6 h-full items-center">
+<a class="text-on-surface-variant text-label-md font-label-md hover:text-primary transition-colors" href="#">Projects</a>
+<a class="text-on-surface-variant text-label-md font-label-md hover:text-primary transition-colors" href="#">Analytics</a>
+</nav>
+</div>
+<div class="flex items-center space-x-4">
+<span class="bg-error text-white px-3 py-1 rounded-full text-label-md font-label-md">D-31</span>
+<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-transform hover:scale-105">notifications</button>
+<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden border border-outline-variant">
+<img class="w-full h-full object-cover" data-alt="A clean, professional headshot of a Korean business manager for an exhibition center. The lighting is corporate and bright, with a soft-focus office background. High-quality digital photography style with professional skin tones." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDm1aqLEx_Q2mj7aBGn8DA4oloT45mA_qSrkmAAGaX62wMuKBSv2eMrcf20AMZ7p7dDRTGiKXpPQoxw26VmFhs45FhUD1OXJtxDwyOU81zKX-9m5AtZ3w9rre-ihdJiXLmZiVsc4n3hd-lzJ9ebzRmTjReE8wn1GH_tt3-XsqV-um2JjJFpPS-yNWeGo_e_RObu1a21sA5GKGXLg2FUSktNOcstFb1uYcRK0QfrgWmhXdpAgpiadHKe"/>
+</div>
+<button class="bg-primary text-on-primary px-4 py-2 rounded-lg text-label-md font-label-md hover:opacity-90 transition-all">Publish Layout</button>
+</div>
+</header>
+
+<main class="ml-60 mt-16 p-stack-lg min-h-screen">
+
+<div class="mb-stack-lg flex justify-between items-end">
+<div>
+<span class="text-label-md font-label-md text-primary tracking-widest uppercase">System Reference</span>
+<h2 class="text-display-lg font-display-lg text-on-surface mt-1">Component Guide</h2>
+<p class="text-body-sm font-body-sm text-on-surface-variant mt-2 max-w-2xl">
+                    KINTEX AI 디자인 시스템 v1.0. 본 가이드는 고도의 신뢰성과 정밀한 정보 처리가 필요한 B2B 전시 환경을 위해 설계되었습니다.
+                </p>
+</div>
+<div class="text-right">
+<span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-lg text-label-xs font-label-xs">LATEST STABLE v1.0.4</span>
+</div>
+</div>
+<div class="bento-grid">
+
+<section class="col-span-12 lg:col-span-8 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Typography & Colors</h3>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+
+<div class="space-y-4">
+<div class="border-b border-outline-variant pb-2 mb-4">
+<span class="text-label-xs font-label-xs text-outline uppercase">Pretendard Type Scale</span>
+</div>
+<div class="space-y-4">
+<div>
+<p class="text-label-xs text-outline mb-1">Display Large (36px)</p>
+<p class="text-display-lg font-display-lg">전시공간 최적화 엔진</p>
+</div>
+<div>
+<p class="text-label-xs text-outline mb-1">Headline Medium (24px)</p>
+<p class="text-headline-md font-headline-md">도면 분석 보고서</p>
+</div>
+<div>
+<p class="text-label-xs text-outline mb-1">Title Small (18px)</p>
+<p class="text-title-sm font-title-sm">신규 부스 배치 시뮬레이션</p>
+</div>
+<div>
+<p class="text-label-xs text-outline mb-1">Body Base (14px)</p>
+<p class="text-body-base font-body-base">전시 관리자는 실시간으로 변화하는 도면 데이터를 분석하여 최적의 동선을 설계합니다.</p>
+</div>
+</div>
+</div>
+
+<div class="space-y-4">
+<div class="border-b border-outline-variant pb-2 mb-4">
+<span class="text-label-xs font-label-xs text-outline uppercase">Primary Color Palette</span>
+</div>
+<div class="grid grid-cols-2 gap-3">
+<div class="p-3 bg-primary rounded-lg text-white">
+<p class="text-label-md font-label-md">KINTEX Blue</p>
+<p class="text-label-xs opacity-80">#004E8B</p>
+</div>
+<div class="p-3 bg-secondary-container rounded-lg text-on-secondary-container border border-secondary">
+<p class="text-label-md font-label-md">AI Accent</p>
+<p class="text-label-xs opacity-80">#6D4AFF</p>
+</div>
+<div class="p-3 bg-tertiary-container rounded-lg text-white">
+<p class="text-label-md font-label-md">Success</p>
+<p class="text-label-xs opacity-80">#00734E</p>
+</div>
+<div class="p-3 bg-error rounded-lg text-white">
+<p class="text-label-md font-label-md">Error/Alert</p>
+<p class="text-label-xs opacity-80">#BA1A1A</p>
+</div>
+<div class="p-3 bg-surface-container-low border border-outline-variant rounded-lg col-span-2">
+<p class="text-label-md font-label-md">Neutral Low</p>
+<p class="text-label-xs text-outline">#F1F3FF</p>
+</div>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-4 bg-white border border-outline-variant p-stack-md rounded-lg overflow-hidden relative">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-secondary pl-2">
+<h3 class="text-title-sm font-title-sm">AI Specific Elements</h3>
+</div>
+<div class="space-y-6">
+<div class="ai-glow-border p-4 rounded-xl bg-surface-container-low flex flex-col gap-3">
+<div class="flex items-center space-x-2">
+<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
+<span class="text-label-md font-label-md text-secondary">AI Drafted Component</span>
+</div>
+<div class="h-16 w-full bg-white/50 rounded border border-secondary/20 flex items-center justify-center relative overflow-hidden">
+
+<div class="absolute inset-0 opacity-10 flex flex-wrap gap-4 text-[10px] font-bold rotate-12 pointer-events-none">
+<span>AI GENERATED</span><span>AI GENERATED</span><span>AI GENERATED</span>
+<span>AI GENERATED</span><span>AI GENERATED</span><span>AI GENERATED</span>
+</div>
+<p class="text-label-xs text-on-surface-variant z-10">워터마크 샘플 영역</p>
+</div>
+</div>
+<div class="space-y-2">
+<p class="text-label-xs text-outline">Violation Flag Pins (Safety)</p>
+<div class="flex items-center space-x-4">
+<div class="flex flex-col items-center">
+<span class="material-symbols-outlined text-error text-[32px]" style="font-variation-settings: 'FILL' 1;">location_on</span>
+<span class="text-label-xs text-error font-bold">Fire Exit Block</span>
+</div>
+<div class="flex flex-col items-center">
+<span class="material-symbols-outlined text-error text-[32px]" style="font-variation-settings: 'FILL' 1;">warning</span>
+<span class="text-label-xs text-error font-bold">Overload</span>
+</div>
+</div>
+</div>
+</div>
+
+<div class="absolute -right-4 -bottom-4 opacity-5">
+<span class="material-symbols-outlined text-[120px]">smart_toy</span>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-6 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Buttons & Actions</h3>
+</div>
+<div class="grid grid-cols-2 gap-6">
+<div class="space-y-4">
+<button class="w-full bg-primary text-white py-3 rounded-lg text-label-md font-bold transition-all hover:shadow-lg active:scale-95">Primary Button</button>
+<button class="w-full border border-primary text-primary py-3 rounded-lg text-label-md font-bold transition-all hover:bg-primary/5 active:scale-95">Secondary Outlined</button>
+<button class="w-full text-on-surface-variant py-3 rounded-lg text-label-md font-bold hover:bg-surface-container transition-colors">Ghost Action</button>
+</div>
+<div class="space-y-4">
+<button class="w-full bg-secondary text-white py-3 rounded-lg text-label-md font-bold flex items-center justify-center space-x-2 shadow-md hover:opacity-90 active:scale-95">
+<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
+<span>AI 제안 레이아웃</span>
+</button>
+<div class="relative group">
+<button class="w-full bg-surface-container-highest border border-outline-variant text-on-surface py-3 rounded-lg text-label-md font-bold opacity-50 cursor-not-allowed">Disabled State</button>
+</div>
+<div class="flex space-x-2">
+<button class="flex-1 bg-surface-container-high p-3 rounded-lg flex items-center justify-center transition-transform hover:-translate-y-1">
+<span class="material-symbols-outlined">edit</span>
+</button>
+<button class="flex-1 bg-surface-container-high p-3 rounded-lg flex items-center justify-center transition-transform hover:-translate-y-1">
+<span class="material-symbols-outlined">delete</span>
+</button>
+<button class="flex-1 bg-surface-container-high p-3 rounded-lg flex items-center justify-center transition-transform hover:-translate-y-1">
+<span class="material-symbols-outlined">share</span>
+</button>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-6 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Status Badges & Chips</h3>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+<div class="space-y-4">
+<p class="text-label-xs text-outline uppercase border-b border-outline-variant pb-1">Lifecycle Status</p>
+<div class="flex flex-wrap gap-2">
+<span class="px-3 py-1 bg-surface-container-highest text-on-surface-variant text-label-xs font-bold rounded border-l-4 border-outline">작성중</span>
+<span class="px-3 py-1 bg-primary-container/20 text-primary text-label-xs font-bold rounded border-l-4 border-primary">제출됨</span>
+<span class="px-3 py-1 bg-secondary-container/20 text-secondary text-label-xs font-bold rounded border-l-4 border-secondary">AI검토</span>
+<span class="px-3 py-1 bg-tertiary-container/20 text-tertiary text-label-xs font-bold rounded border-l-4 border-tertiary">승인</span>
+<span class="px-3 py-1 bg-error-container text-error text-label-xs font-bold rounded border-l-4 border-error">반려</span>
+</div>
+<div class="flex flex-wrap gap-2">
+<span class="px-3 py-1 bg-secondary text-white text-label-xs font-bold rounded">시공중</span>
+<span class="px-3 py-1 bg-tertiary text-white text-label-xs font-bold rounded">검수완료</span>
+</div>
+</div>
+<div class="space-y-4">
+<p class="text-label-xs text-outline uppercase border-b border-outline-variant pb-1">Contextual Chips</p>
+<div class="flex flex-wrap gap-2">
+<span class="bg-error text-white px-2 py-1 rounded text-label-xs font-bold flex items-center">
+<span class="material-symbols-outlined text-[14px] mr-1">alarm</span> D-3
+                            </span>
+<span class="bg-primary text-white px-2 py-1 rounded text-label-xs font-bold flex items-center">
+<span class="material-symbols-outlined text-[14px] mr-1">event</span> 10/24
+                            </span>
+<span class="bg-surface-container text-on-surface-variant px-2 py-1 rounded text-label-xs border border-outline-variant">Hall 1A</span>
+<span class="bg-secondary-container text-on-secondary-container px-2 py-1 rounded text-label-xs font-bold ring-1 ring-secondary/20">High Traffic</span>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-12 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Data Visualization Components</h3>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+<div class="bg-surface-container-low p-4 rounded-lg">
+<div class="flex justify-between items-center mb-4">
+<span class="text-label-md font-bold">전시장 점유율</span>
+<span class="text-primary font-bold">78%</span>
+</div>
+<div class="w-full h-3 bg-surface-container-highest rounded-full overflow-hidden">
+<div class="h-full bg-primary rounded-full transition-all duration-1000" style="width: 78%;"></div>
+</div>
+<div class="flex justify-between mt-2 text-label-xs text-on-surface-variant">
+<span>0%</span>
+<span>임계치 85%</span>
+<span>100%</span>
+</div>
+</div>
+
+<div class="bg-surface-container-low p-4 rounded-lg">
+<p class="text-label-md font-bold mb-4">혼잡도 히트맵 범례</p>
+<div class="flex items-center space-x-2 mb-2">
+<div class="w-4 h-4 bg-[#D92D20] rounded-sm"></div>
+<span class="text-label-xs">매우 혼잡 (Bottle Neck)</span>
+</div>
+<div class="flex items-center space-x-2 mb-2">
+<div class="w-4 h-4 bg-[#F79009] rounded-sm"></div>
+<span class="text-label-xs">다소 혼잡</span>
+</div>
+<div class="flex items-center space-x-2">
+<div class="w-4 h-4 bg-[#12B76A] rounded-sm"></div>
+<span class="text-label-xs">원활 (Optimized)</span>
+</div>
+</div>
+
+<div class="bg-surface-container-low p-4 rounded-lg flex flex-col justify-between">
+<p class="text-label-md font-bold mb-2">방문객 추이 (Weekly)</p>
+<div class="flex items-end space-x-1 h-12">
+<div class="flex-1 bg-primary/20 rounded-t h-[40%]"></div>
+<div class="flex-1 bg-primary/20 rounded-t h-[60%]"></div>
+<div class="flex-1 bg-primary/20 rounded-t h-[30%]"></div>
+<div class="flex-1 bg-primary rounded-t h-[80%]"></div>
+<div class="flex-1 bg-primary/20 rounded-t h-[50%]"></div>
+<div class="flex-1 bg-primary/20 rounded-t h-[90%]"></div>
+<div class="flex-1 bg-primary/20 rounded-t h-[45%]"></div>
+</div>
+<div class="flex justify-between text-[10px] text-on-surface-variant mt-2">
+<span>Mon</span><span>Wed</span><span>Sun</span>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-7 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Form Elements</h3>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+<div class="space-y-4">
+<div>
+<label class="block text-label-xs font-bold text-on-surface-variant mb-1">Standard Input</label>
+<input class="w-full border border-outline-variant rounded p-3 text-body-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all" placeholder="전시회 명칭 입력" type="text"/>
+</div>
+<div>
+<label class="block text-label-xs font-bold text-on-surface-variant mb-1">Active / Focus</label>
+<input class="w-full border border-primary ring-2 ring-primary/20 rounded p-3 text-body-sm outline-none" type="text" value="KINTEX Exhibition Studio"/>
+</div>
+<div>
+<label class="block text-label-xs font-bold text-error mb-1">Error State</label>
+<input class="w-full border border-error rounded p-3 text-body-sm focus:ring-2 focus:ring-error/20 outline-none" type="text" value="Invalid Location"/>
+<p class="text-label-xs text-error mt-1">올바른 위치 정보를 입력하세요.</p>
+</div>
+</div>
+<div class="space-y-6">
+<div>
+<label class="block text-label-xs font-bold text-on-surface-variant mb-2">Dropdown Selector</label>
+<select class="w-full border border-outline-variant rounded p-3 text-body-sm focus:border-primary outline-none appearance-none bg-no-repeat bg-[right_1rem_center] bg-[url('https://api.iconify.design/material-symbols:expand-more.svg')]">
+<option>전시홀 선택 (Hall 1~5)</option>
+<option>Hall 1A</option>
+<option>Hall 2B</option>
+</select>
+</div>
+<div class="flex items-center space-x-8">
+<div class="space-y-2">
+<label class="flex items-center space-x-2 cursor-pointer group">
+<input checked="" class="w-4 h-4 rounded text-primary focus:ring-primary border-outline-variant" type="checkbox"/>
+<span class="text-body-sm">AI 최적화 자동 적용</span>
+</label>
+<label class="flex items-center space-x-2 cursor-pointer group">
+<input class="w-4 h-4 rounded text-primary focus:ring-primary border-outline-variant" type="checkbox"/>
+<span class="text-body-sm">비공개 전환</span>
+</label>
+</div>
+<div class="space-y-2">
+<label class="flex items-center space-x-2 cursor-pointer group">
+<input checked="" class="w-4 h-4 text-primary focus:ring-primary border-outline-variant" name="perm" type="radio"/>
+<span class="text-body-sm">전체 공개</span>
+</label>
+<label class="flex items-center space-x-2 cursor-pointer group">
+<input class="w-4 h-4 text-primary focus:ring-primary border-outline-variant" name="perm" type="radio"/>
+<span class="text-body-sm">관리자만</span>
+</label>
+</div>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-5 bg-white border border-outline-variant p-stack-md rounded-lg flex flex-col">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Feedback & Overlays</h3>
+</div>
+<div class="space-y-6 flex-1">
+
+<div class="flex items-center justify-between p-4 bg-inverse-surface text-inverse-on-surface rounded-lg shadow-lg">
+<div class="flex items-center space-x-3">
+<span class="material-symbols-outlined text-[#12B76A]">check_circle</span>
+<span class="text-body-sm font-medium">데이터가 성공적으로 저장되었습니다.</span>
+</div>
+<button class="material-symbols-outlined text-[20px] opacity-60">close</button>
+</div>
+
+<div class="flex items-start space-x-3 p-4 bg-error-container text-on-error-container rounded-lg border border-error/20">
+<span class="material-symbols-outlined">error</span>
+<div>
+<p class="text-label-md font-bold">중요 알림</p>
+<p class="text-body-sm">현재 설계된 도면에 소방법 위반 구역이 3곳 발견되었습니다. 수정을 권장합니다.</p>
+</div>
+</div>
+
+<div class="border border-outline-variant rounded-lg p-6 bg-surface relative overflow-hidden">
+<div class="absolute top-0 left-0 w-full h-1 bg-primary"></div>
+<h4 class="text-title-sm font-bold mb-2">변경사항 적용</h4>
+<p class="text-body-sm text-on-surface-variant mb-6">수정된 레이아웃을 서버에 동기화하시겠습니까? 이 작업은 되돌릴 수 없습니다.</p>
+<div class="flex justify-end space-x-3">
+<button class="px-4 py-2 text-label-md font-bold text-on-surface-variant">취소</button>
+<button class="px-4 py-2 bg-primary text-white rounded text-label-md font-bold">확인</button>
+</div>
+</div>
+</div>
+</section>
+</div>
+
+<footer class="mt-stack-lg border-t border-outline-variant pt-8 pb-12 flex flex-col md:flex-row justify-between items-center text-on-surface-variant">
+<div class="flex items-center space-x-4 mb-4 md:mb-0">
+<h2 class="text-headline-md font-bold text-primary opacity-50">KINTEX AI</h2>
+<div class="h-4 w-[1px] bg-outline-variant"></div>
+<p class="text-label-md">© 2024 KINTEX AI System. All Rights Reserved.</p>
+</div>
+<div class="flex space-x-6">
+<a class="text-label-md hover:text-primary transition-colors" href="#">Documentation</a>
+<a class="text-label-md hover:text-primary transition-colors" href="#">Changelog</a>
+<a class="text-label-md hover:text-primary transition-colors" href="#">Style Guide PDF</a>
+</div>
+</footer>
+</main>
+
+<div class="fixed bottom-8 right-8 flex flex-col space-y-4">
+<button class="w-14 h-14 bg-secondary text-white rounded-full flex items-center justify-center shadow-xl hover:scale-110 transition-transform group relative">
+<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 1;">smart_toy</span>
+<div class="absolute right-16 bg-white border border-outline-variant px-3 py-1 rounded shadow-md opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap text-on-surface text-label-md pointer-events-none">
+                AI 어시스턴트 호출
+            </div>
+</button>
+</div>
+<script>
+        // Simple micro-interactions for the demo
+        document.querySelectorAll('button').forEach(button => {
+            button.addEventListener('mousedown', () => {
+                button.classList.add('scale-95');
+            });
+            button.addEventListener('mouseup', () => {
+                button.classList.remove('scale-95');
+            });
+            button.addEventListener('mouseleave', () => {
+                button.classList.remove('scale-95');
+            });
+        });
+
+        // Simulating some loading state on the gauge for visual interest
+        const gauge = document.querySelector('.bg-primary.rounded-full');
+        if (gauge) {
+            setTimeout(() => {
+                gauge.style.width = '78%';
+            }, 300);
+        }
+    </script>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/component_guide_updated_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/component_guide_updated_kintex_ai_system/code.html
new file mode 100644
index 0000000..0c17614
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/component_guide_updated_kintex_ai_system/code.html
@@ -0,0 +1,616 @@
+<!DOCTYPE html><html class="light" lang="ko"><head>
+<meta charset="utf-8">
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
+<title>KINTEX AI - UI Library</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "tertiary": "#00583b",
+                    "on-secondary-fixed-variant": "#4500d8",
+                    "surface-bright": "#f9f9ff",
+                    "secondary-container": "#6d4aff",
+                    "on-secondary-container": "#f3edff",
+                    "tertiary-fixed": "#8ef7c4",
+                    "surface-container-high": "#e0e8ff",
+                    "on-tertiary": "#ffffff",
+                    "on-primary-fixed": "#001c38",
+                    "on-tertiary-fixed": "#002113",
+                    "primary-container": "#0066b3",
+                    "surface": "#f9f9ff",
+                    "error": "#ba1a1a",
+                    "on-secondary": "#ffffff",
+                    "on-primary-container": "#d2e3ff",
+                    "inverse-surface": "#293041",
+                    "on-error": "#ffffff",
+                    "background": "#f9f9ff",
+                    "surface-container-highest": "#dbe2f9",
+                    "on-background": "#141b2c",
+                    "surface-dim": "#d2daf0",
+                    "on-primary-fixed-variant": "#004881",
+                    "secondary-fixed-dim": "#c9bfff",
+                    "secondary-fixed": "#e5deff",
+                    "on-secondary-fixed": "#1b0063",
+                    "secondary": "#5427e6",
+                    "on-error-container": "#93000a",
+                    "tertiary-fixed-dim": "#72daa9",
+                    "surface-variant": "#dbe2f9",
+                    "surface-container-lowest": "#ffffff",
+                    "on-tertiary-container": "#8ef7c3",
+                    "error-container": "#ffdad6",
+                    "primary": "#004e8b",
+                    "surface-tint": "#0060a9",
+                    "on-surface-variant": "#414751",
+                    "outline": "#717782",
+                    "primary-fixed": "#d3e4ff",
+                    "inverse-primary": "#a2c9ff",
+                    "tertiary-container": "#00734e",
+                    "on-surface": "#141b2c",
+                    "on-primary": "#ffffff",
+                    "primary-fixed-dim": "#a2c9ff",
+                    "inverse-on-surface": "#edf0ff",
+                    "surface-container-low": "#f1f3ff",
+                    "surface-container": "#e9edff",
+                    "outline-variant": "#c1c7d3",
+                    "on-tertiary-fixed-variant": "#005236"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.125rem",
+                    "lg": "0.25rem",
+                    "xl": "0.5rem",
+                    "full": "0.75rem"
+            },
+            "spacing": {
+                    "base": "4px",
+                    "stack-sm": "8px",
+                    "container-padding": "24px",
+                    "stack-md": "16px",
+                    "stack-lg": "24px",
+                    "gutter": "16px"
+            },
+            "fontFamily": {
+                    "label-xs": ["Geist"],
+                    "body-base": ["Inter"],
+                    "label-md": ["Geist"],
+                    "headline-md": ["Inter"],
+                    "display-lg": ["Inter"],
+                    "body-sm": ["Inter"],
+                    "title-sm": ["Inter"]
+            },
+            "fontSize": {
+                    "label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
+                    "body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
+                    "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
+                    "headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
+                    "display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
+                    "body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
+                    "title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .ai-glow-border {
+            border: 1px solid #6d4aff;
+            box-shadow: 0 0 8px rgba(109, 74, 255, 0.2);
+        }
+        .glass-panel {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(228, 231, 236, 1);
+        }
+        .bento-grid {
+            display: grid;
+            grid-template-columns: repeat(12, 1fr);
+            gap: 16px;
+        }
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f3ff;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #c1c7d3;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #717782;
+        }
+        .custom-icon {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .custom-icon svg {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body class="bg-background text-on-background font-body-base">
+
+<aside class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
+<div class="px-6 mb-8">
+<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuABJ1mCYGO3z2dV9mQV-FaWxWJkEPOmozrzGBFt0wLzcQLPA0fbz-d9pe5rSZ2k33_XwOOkH1Kc09XDe9rGEbM22V-18TZFJRlPs2nLV-GxuNJji0R003uiiM-1IS1MP7d-APBUu8lLC0xFRJAgWH8psQ80pgIGH0MZgECicjnoGf77rWkwEacmkt_nB631knQLF5mt06xSoSQHI-kHPPLp1kAXIh5vL5YqEW3fE317ieDuyp5joPTG5Ygp6PKxvs7D1A" class="h-8" alt="KINTEX AI">
+<p class="text-body-sm font-body-sm text-on-surface-variant">Exhibition Manager</p>
+</div>
+<nav class="flex-1 space-y-1">
+<a class="flex items-center px-6 py-3 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="custom-icon">https://lh3.googleusercontent.com/aida/AP1WRLtO2EjzKAcW5wn4YYTv12rmtFAvwxlN4fmvGGktwdLqfBGzTTC8C_nxjBMV0s73Yz_eqq3my6ASAxnQk9MMCNSeoTVuQwK9CU8en_ZU63PoTk6muzScTpKFEU2aFgRqpZAs3IBLHhlZXl4ENmWt1GO_lvpxzlx-FAVMFPeSHBfqi8lMEy8xvdRkiRB0MpVPgcEnBWn0SU0BsxlrRVjlVMlL3gAwpYNlLruSqKP5tDnBgDNwjHSKU9SUV04</span>
+<span class="text-label-md font-label-md">Dashboard</span>
+</a>
+<a class="flex items-center px-6 py-3 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">architecture</span>
+<span class="text-label-md font-label-md">Floor Plan Studio</span>
+</a>
+<a class="flex items-center px-6 py-3 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">groups</span>
+<span class="text-label-md font-label-md">Exhibitor Management</span>
+</a>
+
+<a class="flex items-center px-6 py-3 space-x-3 text-primary font-bold border-r-4 border-primary bg-primary-container/10 transition-all duration-200" href="#">
+<span class="material-symbols-outlined">library_books</span>
+<span class="text-label-md font-label-md">Component Guide</span>
+</a>
+<a class="flex items-center px-6 py-3 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">payments</span>
+<span class="text-label-md font-label-md">Settlement</span>
+</a>
+</nav>
+<div class="mt-auto px-6 space-y-1">
+<a class="flex items-center py-2 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">settings</span>
+<span class="text-label-md font-label-md">Settings</span>
+</a>
+<a class="flex items-center py-2 space-x-3 text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">help</span>
+<span class="text-label-md font-label-md">Support</span>
+</a>
+</div>
+</aside>
+
+<header class="fixed top-0 right-0 left-60 h-16 bg-surface border-b border-outline-variant flex justify-between items-center px-container-padding z-40">
+<div class="flex items-center space-x-8">
+<span class="text-title-sm font-title-sm font-bold text-on-surface">Exhibition Studio</span>
+<nav class="flex space-x-6 h-full items-center">
+<a class="text-on-surface-variant text-label-md font-label-md hover:text-primary transition-colors" href="#">Projects</a>
+<a class="text-on-surface-variant text-label-md font-label-md hover:text-primary transition-colors flex items-center space-x-1" href="#">
+<span class="">Analytics</span>
+</a>
+</nav>
+</div>
+<div class="flex items-center space-x-4">
+<span class="bg-error text-white px-3 py-1 rounded-full text-label-md font-label-md">D-31</span>
+<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-transform hover:scale-105">notifications</button>
+<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden border border-outline-variant">
+<img class="w-full h-full object-cover" data-alt="A clean, professional headshot of a Korean business manager for an exhibition center. The lighting is corporate and bright, with a soft-focus office background. High-quality digital photography style with professional skin tones." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDm1aqLEx_Q2mj7aBGn8DA4oloT45mA_qSrkmAAGaX62wMuKBSv2eMrcf20AMZ7p7dDRTGiKXpPQoxw26VmFhs45FhUD1OXJtxDwyOU81zKX-9m5AtZ3w9rre-ihdJiXLmZiVsc4n3hd-lzJ9ebzRmTjReE8wn1GH_tt3-XsqV-um2JjJFpPS-yNWeGo_e_RObu1a21sA5GKGXLg2FUSktNOcstFb1uYcRK0QfrgWmhXdpAgpiadHKe">
+</div>
+<button class="bg-primary text-on-primary px-4 py-2 rounded-lg text-label-md font-label-md hover:opacity-90 transition-all">Publish Layout</button>
+</div>
+</header>
+
+<main class="ml-60 mt-16 p-stack-lg min-h-screen">
+
+<div class="mb-stack-lg flex justify-between items-end">
+<div>
+<span class="text-label-md font-label-md text-primary tracking-widest uppercase">System Reference</span>
+<h2 class="text-display-lg font-display-lg text-on-surface mt-1">Component Guide</h2>
+<p class="text-body-sm font-body-sm text-on-surface-variant mt-2 max-w-2xl">
+                    KINTEX AI 디자인 시스템 v1.0. 본 가이드는 고도의 신뢰성과 정밀한 정보 처리가 필요한 B2B 전시 환경을 위해 설계되었습니다.
+                </p>
+</div>
+<div class="text-right">
+<span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-lg text-label-xs font-label-xs">LATEST STABLE v1.0.4</span>
+</div>
+</div>
+<div class="bento-grid">
+
+<section class="col-span-12 lg:col-span-8 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Typography & Colors</h3>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+
+<div class="space-y-4">
+<div class="border-b border-outline-variant pb-2 mb-4">
+<span class="text-label-xs font-label-xs text-outline uppercase">Pretendard Type Scale</span>
+</div>
+<div class="space-y-4">
+<div>
+<p class="text-label-xs text-outline mb-1">Display Large (36px)</p>
+<p class="text-display-lg font-display-lg">전시공간 최적화 엔진</p>
+</div>
+<div>
+<p class="text-label-xs text-outline mb-1">Headline Medium (24px)</p>
+<p class="text-headline-md font-headline-md">도면 분석 보고서</p>
+</div>
+<div>
+<p class="text-label-xs text-outline mb-1">Title Small (18px)</p>
+<p class="text-title-sm font-title-sm">신규 부스 배치 시뮬레이션</p>
+</div>
+<div>
+<p class="text-label-xs text-outline mb-1">Body Base (14px)</p>
+<p class="text-body-base font-body-base">전시 관리자는 실시간으로 변화하는 도면 데이터를 분석하여 최적의 동선을 설계합니다.</p>
+</div>
+</div>
+</div>
+
+<div class="space-y-4">
+<div class="border-b border-outline-variant pb-2 mb-4">
+<span class="text-label-xs font-label-xs text-outline uppercase">Primary Color Palette</span>
+</div>
+<div class="grid grid-cols-2 gap-3">
+<div class="p-3 bg-primary rounded-lg text-white">
+<p class="text-label-md font-label-md">KINTEX Blue</p>
+<p class="text-label-xs opacity-80">#004E8B</p>
+</div>
+<div class="p-3 bg-secondary-container rounded-lg text-on-secondary-container border border-secondary">
+<p class="text-label-md font-label-md">AI Accent</p>
+<p class="text-label-xs opacity-80">#6D4AFF</p>
+</div>
+<div class="p-3 bg-tertiary-container rounded-lg text-white">
+<p class="text-label-md font-label-md">Success</p>
+<p class="text-label-xs opacity-80">#00734E</p>
+</div>
+<div class="p-3 bg-error rounded-lg text-white">
+<p class="text-label-md font-label-md">Error/Alert</p>
+<p class="text-label-xs opacity-80">#BA1A1A</p>
+</div>
+<div class="p-3 bg-surface-container-low border border-outline-variant rounded-lg col-span-2">
+<p class="text-label-md font-label-md">Neutral Low</p>
+<p class="text-label-xs text-outline">#F1F3FF</p>
+</div>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-4 bg-white border border-outline-variant p-stack-md rounded-lg overflow-hidden relative">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-secondary pl-2">
+<h3 class="text-title-sm font-title-sm">AI Specific Elements</h3>
+</div>
+<div class="space-y-6">
+<div class="ai-glow-border p-4 rounded-xl bg-surface-container-low flex flex-col gap-3">
+<div class="flex items-center space-x-2">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY" class="w-5 h-5">
+<span class="text-label-md font-label-md text-secondary">AI Drafted Component</span>
+</div>
+<div class="h-16 w-full bg-white/50 rounded border border-secondary/20 flex items-center justify-center relative overflow-hidden">
+<div class="absolute inset-0 opacity-10 flex flex-wrap gap-4 text-[10px] font-bold rotate-12 pointer-events-none">
+<span class="">AI GENERATED</span><span class="">AI GENERATED</span><span class="">AI GENERATED</span>
+<span class="">AI GENERATED</span><span class="">AI GENERATED</span><span class="">AI GENERATED</span>
+</div>
+<p class="text-label-xs text-on-surface-variant z-10">워터마크 샘플 영역</p>
+</div>
+</div>
+<div class="space-y-2">
+<p class="text-label-xs text-outline">Violation Flag Pins (Safety)</p>
+<div class="flex items-center space-x-4">
+<div class="flex flex-col items-center">
+<span class="material-symbols-outlined text-error text-[32px]" style="font-variation-settings: 'FILL' 1;">location_on</span>
+<span class="text-label-xs text-error font-bold">Fire Exit Block</span>
+</div>
+<div class="flex flex-col items-center">
+<span class="material-symbols-outlined text-error text-[32px]" style="font-variation-settings: 'FILL' 1;">warning</span>
+<span class="text-label-xs text-error font-bold">Overload</span>
+</div>
+</div>
+</div>
+</div>
+
+<div class="absolute -right-4 -bottom-4 opacity-10">
+<div class="w-32 h-32">https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-6 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Buttons & Actions</h3>
+</div>
+<div class="grid grid-cols-2 gap-6">
+<div class="space-y-4">
+<button class="w-full bg-primary text-white py-3 rounded-lg text-label-md font-bold transition-all hover:shadow-lg active:scale-95">Primary Button</button>
+<button class="w-full border border-primary text-primary py-3 rounded-lg text-label-md font-bold transition-all hover:bg-primary/5 active:scale-95">Secondary Outlined</button>
+<button class="w-full text-on-surface-variant py-3 rounded-lg text-label-md font-bold hover:bg-surface-container transition-colors">Ghost Action</button>
+</div>
+<div class="space-y-4">
+<button class="w-full bg-secondary text-white py-3 rounded-lg text-label-md font-bold flex items-center justify-center space-x-2 shadow-md hover:opacity-90 active:scale-95">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY" class="w-5 h-5">
+<span class="">AI 제안 레이아웃</span>
+</button>
+<div class="relative group">
+<button class="w-full bg-surface-container-highest border border-outline-variant text-on-surface py-3 rounded-lg text-label-md font-bold opacity-50 cursor-not-allowed">Disabled State</button>
+</div>
+<div class="flex space-x-2">
+<button class="flex-1 bg-surface-container-high p-3 rounded-lg flex items-center justify-center transition-transform hover:-translate-y-1">
+<span class="material-symbols-outlined">edit</span>
+</button>
+<button class="flex-1 bg-surface-container-high p-3 rounded-lg flex items-center justify-center transition-transform hover:-translate-y-1">
+<span class="material-symbols-outlined">delete</span>
+</button>
+<button class="flex-1 bg-surface-container-high p-3 rounded-lg flex items-center justify-center transition-transform hover:-translate-y-1">
+<span class="material-symbols-outlined">share</span>
+</button>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-6 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Status Badges & Chips</h3>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+<div class="space-y-4">
+<p class="text-label-xs text-outline uppercase border-b border-outline-variant pb-1">Lifecycle Status</p>
+<div class="flex flex-wrap gap-2">
+<span class="px-3 py-1 bg-surface-container-highest text-on-surface-variant text-label-xs font-bold rounded border-l-4 border-outline">작성중</span>
+<span class="px-3 py-1 bg-primary-container/20 text-primary text-label-xs font-bold rounded border-l-4 border-primary">제출됨</span>
+<span class="px-3 py-1 bg-secondary-container/20 text-secondary text-label-xs font-bold rounded border-l-4 border-secondary">AI검토</span>
+<span class="px-3 py-1 bg-tertiary-container/20 text-tertiary text-label-xs font-bold rounded border-l-4 border-tertiary">승인</span>
+<span class="px-3 py-1 bg-error-container text-error text-label-xs font-bold rounded border-l-4 border-error">반려</span>
+</div>
+<div class="flex flex-wrap gap-2">
+<span class="px-3 py-1 bg-secondary text-white text-label-xs font-bold rounded">시공중</span>
+<span class="px-3 py-1 bg-tertiary text-white text-label-xs font-bold rounded">검수완료</span>
+</div>
+</div>
+<div class="space-y-4">
+<p class="text-label-xs text-outline uppercase border-b border-outline-variant pb-1">Contextual Chips</p>
+<div class="flex flex-wrap gap-2">
+<span class="bg-error text-white px-2 py-1 rounded text-label-xs font-bold flex items-center">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLvpb_qiARCcrTrv6YnOIVjyk5szWwIfCGaaCmyRAnuu9aficeKfPTRrRHDgl4gJCHQUc7LYwtF1Ak04oSwBAezPs20C51ZjzHDaBCkRYJaYqHS-DOPHSGLdeLL_S2tlRlUAG-XF_ib2I1Svtqq26yY0uxmEQA5cWHJabFRv_0WVtBKiSP2QbCssxeccpcVHcWr_6CJ6zXonlepkxJcDXURlfHpvg7P2-O1urNto3A0xsepsB1ucua9Vnw" class="w-3.5 h-3.5 mr-1"> D-3
+                            </span>
+<span class="bg-primary text-white px-2 py-1 rounded text-label-xs font-bold flex items-center">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLvpb_qiARCcrTrv6YnOIVjyk5szWwIfCGaaCmyRAnuu9aficeKfPTRrRHDgl4gJCHQUc7LYwtF1Ak04oSwBAezPs20C51ZjzHDaBCkRYJaYqHS-DOPHSGLdeLL_S2tlRlUAG-XF_ib2I1Svtqq26yY0uxmEQA5cWHJabFRv_0WVtBKiSP2QbCssxeccpcVHcWr_6CJ6zXonlepkxJcDXURlfHpvg7P2-O1urNto3A0xsepsB1ucua9Vnw" class="w-3.5 h-3.5 mr-1"> 10/24
+                            </span>
+<span class="bg-surface-container text-on-surface-variant px-2 py-1 rounded text-label-xs border border-outline-variant">Hall 1A</span>
+<span class="bg-secondary-container text-on-secondary-container px-2 py-1 rounded text-label-xs font-bold ring-1 ring-secondary/20">High Traffic</span>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-12 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">System Assets Library (Custom SVG)</h3>
+</div>
+<div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 gap-4">
+<div class="flex flex-col items-center p-4 bg-surface-container-low rounded-lg border border-outline-variant/30">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLtO2EjzKAcW5wn4YYTv12rmtFAvwxlN4fmvGGktwdLqfBGzTTC8C_nxjBMV0s73Yz_eqq3my6ASAxnQk9MMCNSeoTVuQwK9CU8en_ZU63PoTk6muzScTpKFEU2aFgRqpZAs3IBLHhlZXl4ENmWt1GO_lvpxzlx-FAVMFPeSHBfqi8lMEy8xvdRkiRB0MpVPgcEnBWn0SU0BsxlrRVjlVMlL3gAwpYNlLruSqKP5tDnBgDNwjHSKU9SUV04" class="w-10 h-10 mb-2">
+<span class="text-label-xs text-on-surface-variant">Dashboard</span>
+</div>
+<div class="flex flex-col items-center p-4 bg-surface-container-low rounded-lg border border-outline-variant/30">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLvpb_qiARCcrTrv6YnOIVjyk5szWwIfCGaaCmyRAnuu9aficeKfPTRrRHDgl4gJCHQUc7LYwtF1Ak04oSwBAezPs20C51ZjzHDaBCkRYJaYqHS-DOPHSGLdeLL_S2tlRlUAG-XF_ib2I1Svtqq26yY0uxmEQA5cWHJabFRv_0WVtBKiSP2QbCssxeccpcVHcWr_6CJ6zXonlepkxJcDXURlfHpvg7P2-O1urNto3A0xsepsB1ucua9Vnw" class="w-10 h-10 mb-2">
+<span class="text-label-xs text-on-surface-variant">Calendar</span>
+</div>
+<div class="flex flex-col items-center p-4 bg-surface-container-low rounded-lg border border-outline-variant/30">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLvz-lIs0s4a8Cy8eurZwY-dsuBDuvrLeIlIdHrd3y0aSi_u9kpOR3v59PRVX3Y1qP8SJ-459rs6AT8ZgXe7HMwRzZCOTLEpNNY1YqLtB8BBuVmnHOOVESaovK6ib38tM-qoAgpfO5Yxp-0ZCx3EwnULjy98lc_fpS8cQgxMEM-G3oAr71ToD4n-SEH55g1Kyz_ucSfAciJazI6fgyJbqOLgEAOJ-J-Bp1O30aTcbYVLFw3GRp7R06emYmc" class="w-10 h-10 mb-2">
+<span class="text-label-xs text-on-surface-variant">Operations</span>
+</div>
+<div class="flex flex-col items-center p-4 bg-surface-container-low rounded-lg border border-outline-variant/30">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLujD1FMRHChfM_aVKt2cd12chhcnm31L8Ks2EAzo-_FQ1_RV3zmYa4WUlSJ67wYexda4SpJU88Y5L0HdiYx6fLuKFdsDKjKWm1SmTq4PIP2tx1Nys-Txdlq4Wc1keg1GKsgrxNY68bHBEhurr-0NorgLbpp032gBkj_vE345bYKJwSr5MEnipvo_1P7iE9cXEBybLmdLLYK6vM1nB7dbmVt9_NHG3NQgK7wcPfIaNBrnXrEqtZeckWX3v8" class="w-10 h-10 mb-2">
+<span class="text-label-xs text-on-surface-variant">Analytics</span>
+</div>
+<div class="flex flex-col items-center p-4 bg-surface-container-low rounded-lg border border-outline-variant/30">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLvR8KDDPFgH9vKk_aFJ_lA5WCSRmrDnPhJH5rSjuWilOAI5PMDe5z2hRnRLQhSn7_712ig52lC61Bb_R8bUkkbqNGZPv3dvykD_Oky9hXWygGnc1ybvaI9TcbT1Yw4Bd2JySNFbit4ho4113ql2BsDvpvJ2ZN64zJqv5GowDs0mdnDyFTwPWmGEKEPr3MigJ4LAaeegtd0fEG_pZWtGpsGSNPVdj4r_TbmkKSxdvmZG_kh-ujSkrXGZzkQ" class="w-10 h-10 mb-2">
+<span class="text-label-xs text-on-surface-variant">Search</span>
+</div>
+<div class="flex flex-col items-center p-4 bg-surface-container-low rounded-lg border border-outline-variant/30">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLvsx4tVeyADsrv6nLlY0PM7oxWgkL9gXJ0QAXqJZmzqStfnij6yOt5LsMKGZwBBMOVo8pSaKZA3AcXICD_Wat3ye_0y8Fp-3vWdjl_yjP_RWt1Zo7a6t4YQ2QoPLOPAXZXdNG9hLc6_7NCbU5EWQBmHyra45kfx0UkIyEfS9HlE2b6STJw42QoX3kLCM1GamQm7IHd3pPK0mGmWAAMDUzwoXR7RQSRVCs1kjQUq5dvSD_fF-pPXppK8_g" class="w-10 h-10 mb-2">
+<span class="text-label-xs text-on-surface-variant">Menu</span>
+</div>
+<div class="flex flex-col items-center p-4 bg-secondary/5 rounded-lg border border-secondary/20"><img src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY" class="w-16 h-16 mb-2"><span class="text-label-xs text-secondary font-bold">Friendly AI Bot</span></div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-12 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Data Visualization Components</h3>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+<div class="bg-surface-container-low p-4 rounded-lg">
+<div class="flex justify-between items-center mb-4">
+<span class="text-label-md font-bold">전시장 점유율</span>
+<span class="text-primary font-bold">78%</span>
+</div>
+<div class="w-full h-3 bg-surface-container-highest rounded-full overflow-hidden">
+<div class="h-full bg-primary rounded-full transition-all duration-1000" style="width: 78%;"></div>
+</div>
+<div class="flex justify-between mt-2 text-label-xs text-on-surface-variant">
+<span class="">0%</span>
+<span class="">임계치 85%</span>
+<span class="">100%</span>
+</div>
+</div>
+
+<div class="bg-surface-container-low p-4 rounded-lg">
+<p class="text-label-md font-bold mb-4">혼잡도 히트맵 범례</p>
+<div class="flex items-center space-x-2 mb-2">
+<div class="w-4 h-4 bg-[#D92D20] rounded-sm"></div>
+<span class="text-label-xs">매우 혼잡 (Bottle Neck)</span>
+</div>
+<div class="flex items-center space-x-2 mb-2">
+<div class="w-4 h-4 bg-[#F79009] rounded-sm"></div>
+<span class="text-label-xs">다소 혼잡</span>
+</div>
+<div class="flex items-center space-x-2">
+<div class="w-4 h-4 bg-[#12B76A] rounded-sm"></div>
+<span class="text-label-xs">원활 (Optimized)</span>
+</div>
+</div>
+
+<div class="bg-surface-container-low p-4 rounded-lg flex flex-col justify-between">
+<div class="flex justify-between items-center mb-2">
+<p class="text-label-md font-bold">방문객 추이 (Weekly)</p>
+<span class="w-4 h-4 text-primary">https://lh3.googleusercontent.com/aida/AP1WRLujD1FMRHChfM_aVKt2cd12chhcnm31L8Ks2EAzo-_FQ1_RV3zmYa4WUlSJ67wYexda4SpJU88Y5L0HdiYx6fLuKFdsDKjKWm1SmTq4PIP2tx1Nys-Txdlq4Wc1keg1GKsgrxNY68bHBEhurr-0NorgLbpp032gBkj_vE345bYKJwSr5MEnipvo_1P7iE9cXEBybLmdLLYK6vM1nB7dbmVt9_NHG3NQgK7wcPfIaNBrnXrEqtZeckWX3v8</span>
+</div>
+<div class="flex items-end space-x-1 h-12">
+<div class="flex-1 bg-primary/20 rounded-t h-[40%]"></div>
+<div class="flex-1 bg-primary/20 rounded-t h-[60%]"></div>
+<div class="flex-1 bg-primary/20 rounded-t h-[30%]"></div>
+<div class="flex-1 bg-primary rounded-t h-[80%]"></div>
+<div class="flex-1 bg-primary/20 rounded-t h-[50%]"></div>
+<div class="flex-1 bg-primary rounded-t h-[90%]"></div>
+<div class="flex-1 bg-primary/20 rounded-t h-[45%]"></div>
+</div>
+<div class="flex justify-between text-[10px] text-on-surface-variant mt-2">
+<span class="">Mon</span><span class="">Wed</span><span class="">Sun</span>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-7 bg-white border border-outline-variant p-stack-md rounded-lg">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Form Elements</h3>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+<div class="space-y-4">
+<div class="relative">
+<label class="block text-label-xs font-bold text-on-surface-variant mb-1">Standard Input</label>
+<div class="relative">
+<input class="w-full border border-outline-variant rounded p-3 pl-10 text-body-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all" placeholder="전시회 명칭 입력" type="text">
+<span class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-outline">https://lh3.googleusercontent.com/aida/AP1WRLvR8KDDPFgH9vKk_aFJ_lA5WCSRmrDnPhJH5rSjuWilOAI5PMDe5z2hRnRLQhSn7_712ig52lC61Bb_R8bUkkbqNGZPv3dvykD_Oky9hXWygGnc1ybvaI9TcbT1Yw4Bd2JySNFbit4ho4113ql2BsDvpvJ2ZN64zJqv5GowDs0mdnDyFTwPWmGEKEPr3MigJ4LAaeegtd0fEG_pZWtGpsGSNPVdj4r_TbmkKSxdvmZG_kh-ujSkrXGZzkQ</span>
+</div>
+</div>
+<div>
+<label class="block text-label-xs font-bold text-on-surface-variant mb-1">Active / Focus</label>
+<input class="w-full border border-primary ring-2 ring-primary/20 rounded p-3 text-body-sm outline-none" type="text" value="KINTEX Exhibition Studio">
+</div>
+<div>
+<label class="block text-label-xs font-bold text-error mb-1">Error State</label>
+<input class="w-full border border-error rounded p-3 text-body-sm focus:ring-2 focus:ring-error/20 outline-none" type="text" value="Invalid Location">
+<p class="text-label-xs text-error mt-1">올바른 위치 정보를 입력하세요.</p>
+</div>
+</div>
+<div class="space-y-6">
+<div>
+<label class="block text-label-xs font-bold text-on-surface-variant mb-2">Dropdown Selector</label>
+<select class="w-full border border-outline-variant rounded p-3 text-body-sm focus:border-primary outline-none appearance-none bg-no-repeat bg-[right_1rem_center] bg-[url('https://api.iconify.design/material-symbols:expand-more.svg')]">
+<option>전시홀 선택 (Hall 1~5)</option>
+<option>Hall 1A</option>
+<option>Hall 2B</option>
+</select>
+</div>
+<div class="flex items-center space-x-8">
+<div class="space-y-2">
+<label class="flex items-center space-x-2 cursor-pointer group">
+<input checked="" class="w-4 h-4 rounded text-primary focus:ring-primary border-outline-variant" type="checkbox">
+<span class="text-body-sm">AI 최적화 자동 적용</span>
+</label>
+<label class="flex items-center space-x-2 cursor-pointer group">
+<input class="w-4 h-4 rounded text-primary focus:ring-primary border-outline-variant" type="checkbox">
+<span class="text-body-sm">비공개 전환</span>
+</label>
+</div>
+<div class="space-y-2">
+<label class="flex items-center space-x-2 cursor-pointer group">
+<input checked="" class="w-4 h-4 text-primary focus:ring-primary border-outline-variant" name="perm" type="radio">
+<span class="text-body-sm">전체 공개</span>
+</label>
+<label class="flex items-center space-x-2 cursor-pointer group">
+<input class="w-4 h-4 text-primary focus:ring-primary border-outline-variant" name="perm" type="radio">
+<span class="text-body-sm">관리자만</span>
+</label>
+</div>
+</div>
+</div>
+</div>
+</section>
+
+<section class="col-span-12 lg:col-span-5 bg-white border border-outline-variant p-stack-md rounded-lg flex flex-col">
+<div class="flex items-center space-x-2 mb-6 border-l-4 border-primary pl-2">
+<h3 class="text-title-sm font-title-sm">Feedback & Overlays</h3>
+</div>
+<div class="space-y-6 flex-1">
+
+<div class="flex items-center justify-between p-4 bg-inverse-surface text-inverse-on-surface rounded-lg shadow-lg">
+<div class="flex items-center space-x-3">
+<span class="material-symbols-outlined text-[#12B76A]">check_circle</span>
+<span class="text-body-sm font-medium">데이터가 성공적으로 저장되었습니다.</span>
+</div>
+<button class="material-symbols-outlined text-[20px] opacity-60">close</button>
+</div>
+
+<div class="flex items-start space-x-3 p-4 bg-error-container text-on-error-container rounded-lg border border-error/20">
+<span class="material-symbols-outlined">error</span>
+<div>
+<p class="text-label-md font-bold">중요 알림</p>
+<p class="text-body-sm">현재 설계된 도면에 소방법 위반 구역이 3곳 발견되었습니다. 수정을 권장합니다.</p>
+</div>
+</div>
+
+<div class="border border-outline-variant rounded-lg p-6 bg-surface relative overflow-hidden">
+<div class="absolute top-0 left-0 w-full h-1 bg-primary"></div>
+<h4 class="text-title-sm font-bold mb-2">변경사항 적용</h4>
+<p class="text-body-sm text-on-surface-variant mb-6">수정된 레이아웃을 서버에 동기화하시겠습니까? 이 작업은 되돌릴 수 없습니다.</p>
+<div class="flex justify-end space-x-3">
+<button class="px-4 py-2 text-label-md font-bold text-on-surface-variant">취소</button>
+<button class="px-4 py-2 bg-primary text-white rounded text-label-md font-bold">확인</button>
+</div>
+</div>
+</div>
+</section>
+</div>
+
+<footer class="mt-stack-lg border-t border-outline-variant pt-8 pb-12 flex flex-col md:flex-row justify-between items-center text-on-surface-variant">
+<div class="flex items-center space-x-4 mb-4 md:mb-0">
+<h2 class="text-headline-md font-bold text-primary opacity-50">KINTEX AI</h2>
+<div class="h-4 w-[1px] bg-outline-variant"></div>
+<p class="text-label-md">© 2024 KINTEX AI System. All Rights Reserved.</p>
+</div>
+<div class="flex space-x-6">
+<a class="text-label-md hover:text-primary transition-colors" href="#">Documentation</a>
+<a class="text-label-md hover:text-primary transition-colors" href="#">Changelog</a>
+<a class="text-label-md hover:text-primary transition-colors" href="#">Style Guide PDF</a>
+</div>
+</footer>
+</main>
+
+<div class="fixed bottom-8 right-8 flex flex-col space-y-4">
+<button class="w-14 h-14 bg-secondary text-white rounded-full flex items-center justify-center shadow-xl hover:scale-110 transition-transform group relative">
+<img src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY" class="w-5 h-5">
+<div class="absolute right-16 bg-white border border-outline-variant px-3 py-1 rounded shadow-md opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap text-on-surface text-label-md pointer-events-none">
+                AI 어시스턴트 호출
+            </div>
+</button>
+</div>
+<script>
+        // Simple micro-interactions for the demo
+        document.querySelectorAll('button').forEach(button => {
+            button.addEventListener('mousedown', () => {
+                button.classList.add('scale-95');
+            });
+            button.addEventListener('mouseup', () => {
+                button.classList.remove('scale-95');
+            });
+            button.addEventListener('mouseleave', () => {
+                button.classList.remove('scale-95');
+            });
+        });
+
+        // Simulating some loading state on the gauge for visual interest
+        const gauge = document.querySelector('.bg-primary.rounded-full');
+        if (gauge) {
+            setTimeout(() => {
+                gauge.style.width = '78%';
+            }, 300);
+        }
+    </script>
+
+
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/contractor_on_site_checklist_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/contractor_on_site_checklist_kintex_ai_system/code.html
new file mode 100644
index 0000000..5ebf386
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/contractor_on_site_checklist_kintex_ai_system/code.html
@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>KINTEX AI - Booth Construction Checklist</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Geist:wght@500;600&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-secondary-fixed-variant": "#4500d8",
+                        "on-primary-container": "#d2e3ff",
+                        "primary-fixed": "#d3e4ff",
+                        "surface-container-lowest": "#ffffff",
+                        "surface-variant": "#dbe2f9",
+                        "on-error-container": "#93000a",
+                        "on-surface": "#141b2c",
+                        "surface-bright": "#f9f9ff",
+                        "surface": "#f9f9ff",
+                        "inverse-surface": "#293041",
+                        "on-tertiary-fixed": "#002113",
+                        "inverse-primary": "#a2c9ff",
+                        "primary-fixed-dim": "#a2c9ff",
+                        "secondary-container": "#6d4aff",
+                        "on-primary-fixed-variant": "#004881",
+                        "on-primary-fixed": "#001c38",
+                        "outline": "#717782",
+                        "error-container": "#ffdad6",
+                        "on-tertiary": "#ffffff",
+                        "background": "#f9f9ff",
+                        "tertiary": "#00583b",
+                        "on-primary": "#ffffff",
+                        "on-error": "#ffffff",
+                        "secondary": "#5427e6",
+                        "on-surface-variant": "#414751",
+                        "on-secondary-fixed": "#1b0063",
+                        "on-secondary": "#ffffff",
+                        "outline-variant": "#c1c7d3",
+                        "surface-container-high": "#e0e8ff",
+                        "tertiary-container": "#00734e",
+                        "on-tertiary-fixed-variant": "#005236",
+                        "primary": "#004e8b",
+                        "secondary-fixed-dim": "#c9bfff",
+                        "surface-dim": "#d2daf0",
+                        "primary-container": "#0066b3",
+                        "on-tertiary-container": "#8ef7c3",
+                        "secondary-fixed": "#e5deff",
+                        "on-secondary-container": "#f3edff",
+                        "tertiary-fixed-dim": "#72daa9",
+                        "surface-container-highest": "#dbe2f9",
+                        "surface-tint": "#0060a9",
+                        "surface-container-low": "#f1f3ff",
+                        "inverse-on-surface": "#edf0ff",
+                        "tertiary-fixed": "#8ef7c4",
+                        "surface-container": "#e9edff",
+                        "error": "#ba1a1a",
+                        "on-background": "#141b2c"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "stack-md": "16px",
+                        "stack-lg": "24px",
+                        "container-padding": "24px",
+                        "gutter": "16px",
+                        "stack-sm": "8px",
+                        "base": "4px"
+                    },
+                    "fontFamily": {
+                        "title-sm": ["Inter"],
+                        "display-lg-mobile": ["Inter"],
+                        "display-lg": ["Inter"],
+                        "headline-md": ["Inter"],
+                        "body-base": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "label-md": ["Geist"],
+                        "label-xs": ["Geist"]
+                    },
+                    "fontSize": {
+                        "title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
+                        "display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
+                        "body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
+                        "label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        /* Custom toggle switch styling */
+        .toggle-checkbox:checked {
+            right: 0;
+            border-color: #0066b3;
+        }
+        .toggle-checkbox:checked + .toggle-label {
+            background-color: #0066b3;
+        }
+        
+        /* Hide scrollbar for clean mobile view */
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+
+        /* Large custom checkboxes */
+        .checklist-box {
+            appearance: none;
+            background-color: #fff;
+            margin: 0;
+            font: inherit;
+            color: currentColor;
+            width: 2rem;
+            height: 2rem;
+            border: 2px solid #c1c7d3;
+            border-radius: 0.25rem;
+            display: grid;
+            place-content: center;
+        }
+        
+        .checklist-box::before {
+            content: "";
+            width: 1.2rem;
+            height: 1.2rem;
+            transform: scale(0);
+            transition: 120ms transform ease-in-out;
+            box-shadow: inset 1em 1em white;
+            background-color: Transform;
+            transform-origin: center;
+            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+        }
+
+        .checklist-box:checked {
+            background-color: #0066b3;
+            border-color: #0066b3;
+        }
+
+        .checklist-box:checked::before {
+            transform: scale(1);
+        }
+    </style>
+<style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+  </head>
+<body class="bg-background text-on-background font-body-base antialiased w-[390px] mx-auto min-h-screen relative flex flex-col shadow-xl">
+
+<header class="sticky top-0 z-50 bg-surface border-b border-outline-variant shadow-sm px-4 py-3 flex flex-col gap-3">
+<div class="flex justify-between items-center w-full">
+<div class="flex items-center gap-2">
+<button aria-label="Back" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high transition-colors -ml-2">
+<span class="material-symbols-outlined text-on-surface">arrow_back</span>
+</button>
+<div class="flex flex-col">
+<h1 class="font-title-sm text-title-sm text-on-surface">부스 A-102</h1>
+<div class="flex items-center gap-1 text-on-surface-variant font-label-xs text-label-xs">
+<span>홀7</span>
+<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
+<span class="font-bold text-primary">장치 1일차</span>
+</div>
+</div>
+</div>
+
+<div class="flex items-center gap-1 bg-surface-container-highest px-2 py-1 rounded-full border border-outline-variant">
+<span class="material-symbols-outlined text-[14px] text-on-surface-variant">cloud_off</span>
+<span class="font-label-xs text-label-xs text-on-surface-variant">오프라인</span>
+</div>
+</div>
+
+<div class="flex bg-surface-container-low rounded-lg p-1 border border-outline-variant w-full">
+<button class="flex-1 py-1.5 bg-surface text-primary font-label-md text-label-md rounded shadow-sm flex items-center justify-center gap-1">
+<span class="material-symbols-outlined text-[16px]">architecture</span>도면
+            </button>
+<button class="flex-1 py-1.5 text-on-surface-variant font-label-md text-label-md rounded flex items-center justify-center gap-1 hover:bg-surface-container-high transition-colors">
+<span class="material-symbols-outlined text-[16px]">image</span>예상 사진
+            </button>
+</div>
+</header>
+
+<main class="flex-1 overflow-y-auto no-scrollbar pb-32 px-4 py-4 flex flex-col gap-4">
+
+<div class="flex items-center gap-2 bg-primary-container/10 border border-primary-container rounded-lg p-3">
+<span class="material-symbols-outlined text-primary-container">info</span>
+<span class="font-label-md text-label-md text-primary-container">필수 항목 3개 남음</span>
+</div>
+
+<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden">
+<button class="w-full flex justify-between items-center p-4 bg-surface-container-lowest hover:bg-surface-container-low transition-colors text-left border-b border-outline-variant">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-tertiary-container">check_circle</span>
+<h2 class="font-title-sm text-title-sm text-on-surface">반입 전</h2>
+<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-variant px-2 py-0.5 rounded-full">2/2</span>
+</div>
+<span class="material-symbols-outlined text-on-surface-variant">expand_more</span>
+</button>
+<div class="p-4 flex flex-col gap-4 bg-surface-container-lowest">
+
+<div class="flex items-start gap-4 p-3 bg-surface-container-low rounded-lg border border-outline-variant">
+<input checked="" class="checklist-box mt-1" disabled="" type="checkbox"/>
+<div class="flex flex-col flex-1">
+<span class="font-body-base text-body-base text-on-surface line-through text-on-surface-variant">방염 확인서 제출 확인</span>
+</div>
+</div>
+
+<div class="flex items-start gap-4 p-3 bg-surface-container-low rounded-lg border border-outline-variant">
+<input checked="" class="checklist-box mt-1" disabled="" type="checkbox"/>
+<div class="flex flex-col flex-1">
+<span class="font-body-base text-body-base text-on-surface line-through text-on-surface-variant">안전모 및 보호장구 착용</span>
+</div>
+</div>
+</div>
+</section>
+
+<div class="bg-error-container border border-error rounded-xl p-4 flex flex-col gap-2">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">warning</span>
+<h3 class="font-label-md text-label-md text-error">장내 금지 작업 주의</h3>
+</div>
+<ul class="list-disc list-inside font-body-sm text-body-sm text-on-error-container space-y-1">
+<li>금지: 전기톱, 용접, 페인트 작업</li>
+<li>소음 한도: 70~75dB 준수</li>
+</ul>
+</div>
+
+<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
+<button class="w-full flex justify-between items-center p-4 bg-surface-container-low transition-colors text-left border-b border-outline-variant">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-primary">build</span>
+<h2 class="font-title-sm text-title-sm text-on-surface">시공 중</h2>
+<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-variant px-2 py-0.5 rounded-full">0/2</span>
+</div>
+<span class="material-symbols-outlined text-on-surface-variant transform rotate-180">expand_more</span>
+</button>
+<div class="p-4 flex flex-col gap-4">
+
+<div class="flex items-center gap-4 p-3 bg-surface-bright rounded-lg border-2 border-outline-variant hover:border-primary-container transition-colors">
+<input class="checklist-box flex-shrink-0" id="check-floor" type="checkbox"/>
+<label class="flex-1 cursor-pointer" for="check-floor">
+<span class="font-body-base text-body-base text-on-surface block">바닥 마감 상태 양호</span>
+<span class="font-body-sm text-body-sm text-on-surface-variant mt-1 block">테이핑 및 단차 확인</span>
+</label>
+<button class="w-12 h-12 flex items-center justify-center rounded-full bg-surface-container-highest border border-outline-variant text-on-surface-variant hover:bg-surface-variant transition-colors flex-shrink-0">
+<span class="material-symbols-outlined">photo_camera</span>
+</button>
+</div>
+
+<div class="flex items-center gap-4 p-3 bg-surface-bright rounded-lg border-2 border-outline-variant hover:border-primary-container transition-colors">
+<input class="checklist-box flex-shrink-0" id="check-elec" type="checkbox"/>
+<label class="flex-1 cursor-pointer" for="check-elec">
+<span class="font-body-base text-body-base text-on-surface block">전기 배선 안전 확인</span>
+<span class="font-body-sm text-body-sm text-on-surface-variant mt-1 block">노출된 전선 정리</span>
+</label>
+<button class="w-12 h-12 flex items-center justify-center rounded-full bg-surface-container-highest border border-outline-variant text-on-surface-variant hover:bg-surface-variant transition-colors flex-shrink-0">
+<span class="material-symbols-outlined">photo_camera</span>
+</button>
+</div>
+</div>
+</section>
+
+<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
+<button class="w-full flex justify-between items-center p-4 bg-surface-container-low transition-colors text-left border-b border-outline-variant">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-primary">square_foot</span>
+<h2 class="font-title-sm text-title-sm text-on-surface">구조 확인</h2>
+<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-variant px-2 py-0.5 rounded-full">0/1</span>
+</div>
+<span class="material-symbols-outlined text-on-surface-variant transform rotate-180">expand_more</span>
+</button>
+<div class="p-4 flex flex-col gap-4">
+<div class="flex flex-col gap-2 p-3 bg-surface-bright rounded-lg border-2 border-outline-variant">
+<label class="font-body-base text-body-base text-on-surface flex justify-between items-center" for="height-input">
+                        장치물 최고 높이 실측
+                        <span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-container-high px-2 py-1 rounded">규정: 5m 이하</span>
+</label>
+<div class="relative mt-2">
+<input class="w-full h-14 pl-4 pr-12 rounded-lg border border-outline bg-surface-container-lowest text-on-surface font-title-sm text-title-sm focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 transition-shadow" id="height-input" placeholder="4.2" type="number"/>
+<span class="absolute right-4 top-1/2 -translate-y-1/2 font-title-sm text-title-sm text-on-surface-variant">m</span>
+</div>
+</div>
+</div>
+</section>
+</main>
+
+<footer class="fixed bottom-0 left-1/2 -translate-x-1/2 w-[390px] bg-surface border-t border-outline-variant p-4 z-50 pb-8">
+<div class="text-center mb-2">
+<span class="font-label-xs text-label-xs text-on-surface-variant flex items-center justify-center gap-1">
+<span class="material-symbols-outlined text-[14px]">sync</span>
+                오프라인 — 연결 시 동기화
+            </span>
+</div>
+<button class="w-full h-14 rounded-xl bg-primary-container/50 text-on-primary-container/50 font-title-sm text-title-sm font-bold flex items-center justify-center gap-2 cursor-not-allowed" disabled="">
+<span class="material-symbols-outlined">send</span>
+            검수 요청 보내기
+        </button>
+</footer>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/contractor_onsite_checklist_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/contractor_onsite_checklist_kintex_ai_system/code.html
new file mode 100644
index 0000000..5ebf386
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/contractor_onsite_checklist_kintex_ai_system/code.html
@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>KINTEX AI - Booth Construction Checklist</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Geist:wght@500;600&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-secondary-fixed-variant": "#4500d8",
+                        "on-primary-container": "#d2e3ff",
+                        "primary-fixed": "#d3e4ff",
+                        "surface-container-lowest": "#ffffff",
+                        "surface-variant": "#dbe2f9",
+                        "on-error-container": "#93000a",
+                        "on-surface": "#141b2c",
+                        "surface-bright": "#f9f9ff",
+                        "surface": "#f9f9ff",
+                        "inverse-surface": "#293041",
+                        "on-tertiary-fixed": "#002113",
+                        "inverse-primary": "#a2c9ff",
+                        "primary-fixed-dim": "#a2c9ff",
+                        "secondary-container": "#6d4aff",
+                        "on-primary-fixed-variant": "#004881",
+                        "on-primary-fixed": "#001c38",
+                        "outline": "#717782",
+                        "error-container": "#ffdad6",
+                        "on-tertiary": "#ffffff",
+                        "background": "#f9f9ff",
+                        "tertiary": "#00583b",
+                        "on-primary": "#ffffff",
+                        "on-error": "#ffffff",
+                        "secondary": "#5427e6",
+                        "on-surface-variant": "#414751",
+                        "on-secondary-fixed": "#1b0063",
+                        "on-secondary": "#ffffff",
+                        "outline-variant": "#c1c7d3",
+                        "surface-container-high": "#e0e8ff",
+                        "tertiary-container": "#00734e",
+                        "on-tertiary-fixed-variant": "#005236",
+                        "primary": "#004e8b",
+                        "secondary-fixed-dim": "#c9bfff",
+                        "surface-dim": "#d2daf0",
+                        "primary-container": "#0066b3",
+                        "on-tertiary-container": "#8ef7c3",
+                        "secondary-fixed": "#e5deff",
+                        "on-secondary-container": "#f3edff",
+                        "tertiary-fixed-dim": "#72daa9",
+                        "surface-container-highest": "#dbe2f9",
+                        "surface-tint": "#0060a9",
+                        "surface-container-low": "#f1f3ff",
+                        "inverse-on-surface": "#edf0ff",
+                        "tertiary-fixed": "#8ef7c4",
+                        "surface-container": "#e9edff",
+                        "error": "#ba1a1a",
+                        "on-background": "#141b2c"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "stack-md": "16px",
+                        "stack-lg": "24px",
+                        "container-padding": "24px",
+                        "gutter": "16px",
+                        "stack-sm": "8px",
+                        "base": "4px"
+                    },
+                    "fontFamily": {
+                        "title-sm": ["Inter"],
+                        "display-lg-mobile": ["Inter"],
+                        "display-lg": ["Inter"],
+                        "headline-md": ["Inter"],
+                        "body-base": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "label-md": ["Geist"],
+                        "label-xs": ["Geist"]
+                    },
+                    "fontSize": {
+                        "title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
+                        "display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
+                        "body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
+                        "label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        /* Custom toggle switch styling */
+        .toggle-checkbox:checked {
+            right: 0;
+            border-color: #0066b3;
+        }
+        .toggle-checkbox:checked + .toggle-label {
+            background-color: #0066b3;
+        }
+        
+        /* Hide scrollbar for clean mobile view */
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+
+        /* Large custom checkboxes */
+        .checklist-box {
+            appearance: none;
+            background-color: #fff;
+            margin: 0;
+            font: inherit;
+            color: currentColor;
+            width: 2rem;
+            height: 2rem;
+            border: 2px solid #c1c7d3;
+            border-radius: 0.25rem;
+            display: grid;
+            place-content: center;
+        }
+        
+        .checklist-box::before {
+            content: "";
+            width: 1.2rem;
+            height: 1.2rem;
+            transform: scale(0);
+            transition: 120ms transform ease-in-out;
+            box-shadow: inset 1em 1em white;
+            background-color: Transform;
+            transform-origin: center;
+            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+        }
+
+        .checklist-box:checked {
+            background-color: #0066b3;
+            border-color: #0066b3;
+        }
+
+        .checklist-box:checked::before {
+            transform: scale(1);
+        }
+    </style>
+<style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+  </head>
+<body class="bg-background text-on-background font-body-base antialiased w-[390px] mx-auto min-h-screen relative flex flex-col shadow-xl">
+
+<header class="sticky top-0 z-50 bg-surface border-b border-outline-variant shadow-sm px-4 py-3 flex flex-col gap-3">
+<div class="flex justify-between items-center w-full">
+<div class="flex items-center gap-2">
+<button aria-label="Back" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high transition-colors -ml-2">
+<span class="material-symbols-outlined text-on-surface">arrow_back</span>
+</button>
+<div class="flex flex-col">
+<h1 class="font-title-sm text-title-sm text-on-surface">부스 A-102</h1>
+<div class="flex items-center gap-1 text-on-surface-variant font-label-xs text-label-xs">
+<span>홀7</span>
+<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
+<span class="font-bold text-primary">장치 1일차</span>
+</div>
+</div>
+</div>
+
+<div class="flex items-center gap-1 bg-surface-container-highest px-2 py-1 rounded-full border border-outline-variant">
+<span class="material-symbols-outlined text-[14px] text-on-surface-variant">cloud_off</span>
+<span class="font-label-xs text-label-xs text-on-surface-variant">오프라인</span>
+</div>
+</div>
+
+<div class="flex bg-surface-container-low rounded-lg p-1 border border-outline-variant w-full">
+<button class="flex-1 py-1.5 bg-surface text-primary font-label-md text-label-md rounded shadow-sm flex items-center justify-center gap-1">
+<span class="material-symbols-outlined text-[16px]">architecture</span>도면
+            </button>
+<button class="flex-1 py-1.5 text-on-surface-variant font-label-md text-label-md rounded flex items-center justify-center gap-1 hover:bg-surface-container-high transition-colors">
+<span class="material-symbols-outlined text-[16px]">image</span>예상 사진
+            </button>
+</div>
+</header>
+
+<main class="flex-1 overflow-y-auto no-scrollbar pb-32 px-4 py-4 flex flex-col gap-4">
+
+<div class="flex items-center gap-2 bg-primary-container/10 border border-primary-container rounded-lg p-3">
+<span class="material-symbols-outlined text-primary-container">info</span>
+<span class="font-label-md text-label-md text-primary-container">필수 항목 3개 남음</span>
+</div>
+
+<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden">
+<button class="w-full flex justify-between items-center p-4 bg-surface-container-lowest hover:bg-surface-container-low transition-colors text-left border-b border-outline-variant">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-tertiary-container">check_circle</span>
+<h2 class="font-title-sm text-title-sm text-on-surface">반입 전</h2>
+<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-variant px-2 py-0.5 rounded-full">2/2</span>
+</div>
+<span class="material-symbols-outlined text-on-surface-variant">expand_more</span>
+</button>
+<div class="p-4 flex flex-col gap-4 bg-surface-container-lowest">
+
+<div class="flex items-start gap-4 p-3 bg-surface-container-low rounded-lg border border-outline-variant">
+<input checked="" class="checklist-box mt-1" disabled="" type="checkbox"/>
+<div class="flex flex-col flex-1">
+<span class="font-body-base text-body-base text-on-surface line-through text-on-surface-variant">방염 확인서 제출 확인</span>
+</div>
+</div>
+
+<div class="flex items-start gap-4 p-3 bg-surface-container-low rounded-lg border border-outline-variant">
+<input checked="" class="checklist-box mt-1" disabled="" type="checkbox"/>
+<div class="flex flex-col flex-1">
+<span class="font-body-base text-body-base text-on-surface line-through text-on-surface-variant">안전모 및 보호장구 착용</span>
+</div>
+</div>
+</div>
+</section>
+
+<div class="bg-error-container border border-error rounded-xl p-4 flex flex-col gap-2">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">warning</span>
+<h3 class="font-label-md text-label-md text-error">장내 금지 작업 주의</h3>
+</div>
+<ul class="list-disc list-inside font-body-sm text-body-sm text-on-error-container space-y-1">
+<li>금지: 전기톱, 용접, 페인트 작업</li>
+<li>소음 한도: 70~75dB 준수</li>
+</ul>
+</div>
+
+<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
+<button class="w-full flex justify-between items-center p-4 bg-surface-container-low transition-colors text-left border-b border-outline-variant">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-primary">build</span>
+<h2 class="font-title-sm text-title-sm text-on-surface">시공 중</h2>
+<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-variant px-2 py-0.5 rounded-full">0/2</span>
+</div>
+<span class="material-symbols-outlined text-on-surface-variant transform rotate-180">expand_more</span>
+</button>
+<div class="p-4 flex flex-col gap-4">
+
+<div class="flex items-center gap-4 p-3 bg-surface-bright rounded-lg border-2 border-outline-variant hover:border-primary-container transition-colors">
+<input class="checklist-box flex-shrink-0" id="check-floor" type="checkbox"/>
+<label class="flex-1 cursor-pointer" for="check-floor">
+<span class="font-body-base text-body-base text-on-surface block">바닥 마감 상태 양호</span>
+<span class="font-body-sm text-body-sm text-on-surface-variant mt-1 block">테이핑 및 단차 확인</span>
+</label>
+<button class="w-12 h-12 flex items-center justify-center rounded-full bg-surface-container-highest border border-outline-variant text-on-surface-variant hover:bg-surface-variant transition-colors flex-shrink-0">
+<span class="material-symbols-outlined">photo_camera</span>
+</button>
+</div>
+
+<div class="flex items-center gap-4 p-3 bg-surface-bright rounded-lg border-2 border-outline-variant hover:border-primary-container transition-colors">
+<input class="checklist-box flex-shrink-0" id="check-elec" type="checkbox"/>
+<label class="flex-1 cursor-pointer" for="check-elec">
+<span class="font-body-base text-body-base text-on-surface block">전기 배선 안전 확인</span>
+<span class="font-body-sm text-body-sm text-on-surface-variant mt-1 block">노출된 전선 정리</span>
+</label>
+<button class="w-12 h-12 flex items-center justify-center rounded-full bg-surface-container-highest border border-outline-variant text-on-surface-variant hover:bg-surface-variant transition-colors flex-shrink-0">
+<span class="material-symbols-outlined">photo_camera</span>
+</button>
+</div>
+</div>
+</section>
+
+<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
+<button class="w-full flex justify-between items-center p-4 bg-surface-container-low transition-colors text-left border-b border-outline-variant">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-primary">square_foot</span>
+<h2 class="font-title-sm text-title-sm text-on-surface">구조 확인</h2>
+<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-variant px-2 py-0.5 rounded-full">0/1</span>
+</div>
+<span class="material-symbols-outlined text-on-surface-variant transform rotate-180">expand_more</span>
+</button>
+<div class="p-4 flex flex-col gap-4">
+<div class="flex flex-col gap-2 p-3 bg-surface-bright rounded-lg border-2 border-outline-variant">
+<label class="font-body-base text-body-base text-on-surface flex justify-between items-center" for="height-input">
+                        장치물 최고 높이 실측
+                        <span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-container-high px-2 py-1 rounded">규정: 5m 이하</span>
+</label>
+<div class="relative mt-2">
+<input class="w-full h-14 pl-4 pr-12 rounded-lg border border-outline bg-surface-container-lowest text-on-surface font-title-sm text-title-sm focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 transition-shadow" id="height-input" placeholder="4.2" type="number"/>
+<span class="absolute right-4 top-1/2 -translate-y-1/2 font-title-sm text-title-sm text-on-surface-variant">m</span>
+</div>
+</div>
+</div>
+</section>
+</main>
+
+<footer class="fixed bottom-0 left-1/2 -translate-x-1/2 w-[390px] bg-surface border-t border-outline-variant p-4 z-50 pb-8">
+<div class="text-center mb-2">
+<span class="font-label-xs text-label-xs text-on-surface-variant flex items-center justify-center gap-1">
+<span class="material-symbols-outlined text-[14px]">sync</span>
+                오프라인 — 연결 시 동기화
+            </span>
+</div>
+<button class="w-full h-14 rounded-xl bg-primary-container/50 text-on-primary-container/50 font-title-sm text-title-sm font-bold flex items-center justify-center gap-2 cursor-not-allowed" disabled="">
+<span class="material-symbols-outlined">send</span>
+            검수 요청 보내기
+        </button>
+</footer>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/exhibition_schedule_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/exhibition_schedule_kintex_ai_system/code.html
new file mode 100644
index 0000000..0dbf366
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/exhibition_schedule_kintex_ai_system/code.html
@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Exhibition Schedule - KINTEX CMS</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@100..900&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "surface-border": "#E5E7EB",
+                        "surface-dim": "#d9dadb",
+                        "surface-bright": "#f8f9fa",
+                        "outline": "#727782",
+                        "inverse-on-surface": "#f0f1f2",
+                        "primary-fixed-dim": "#a6c8ff",
+                        "error-container": "#ffdad6",
+                        "on-background": "#191c1d",
+                        "on-surface": "#191c1d",
+                        "on-tertiary-container": "#ffc1b8",
+                        "on-primary-fixed-variant": "#004786",
+                        "on-primary": "#ffffff",
+                        "primary-fixed": "#d5e3ff",
+                        "surface-container-lowest": "#ffffff",
+                        "on-tertiary-fixed-variant": "#930002",
+                        "on-secondary": "#ffffff",
+                        "surface-container": "#edeeef",
+                        "surface-tint": "#115fac",
+                        "surface-variant": "#e1e3e4",
+                        "surface-container-highest": "#e1e3e4",
+                        "status-pending": "#F59E0B",
+                        "status-active": "#10B981",
+                        "on-tertiary-fixed": "#410000",
+                        "primary-container": "#0059a6",
+                        "surface-container-high": "#e7e8e9",
+                        "error": "#ba1a1a",
+                        "on-secondary-fixed-variant": "#1e4974",
+                        "secondary-fixed": "#d2e4ff",
+                        "tertiary": "#8a0002",
+                        "tertiary-fixed": "#ffdad5",
+                        "secondary-container": "#a6ccff",
+                        "outline-variant": "#c2c6d3",
+                        "on-surface-variant": "#424751",
+                        "surface-container-low": "#f3f4f5",
+                        "on-primary-fixed": "#001c3b",
+                        "surface": "#f8f9fa",
+                        "inverse-surface": "#2e3132",
+                        "on-error-container": "#93000a",
+                        "tertiary-container": "#b60004",
+                        "primary": "#00427d",
+                        "on-primary-container": "#b6d1ff",
+                        "on-tertiary": "#ffffff",
+                        "on-secondary-container": "#2e5682",
+                        "secondary": "#39608d",
+                        "on-secondary-fixed": "#001c37",
+                        "inverse-primary": "#a6c8ff",
+                        "on-error": "#ffffff",
+                        "secondary-fixed-dim": "#a3c9fc",
+                        "table-header": "#F1F5F9",
+                        "tertiary-fixed-dim": "#ffb4a9",
+                        "background": "#f8f9fa"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "margin-desktop": "32px",
+                        "container-max": "1440px",
+                        "margin-mobile": "16px",
+                        "gutter": "24px",
+                        "stack-sm": "8px",
+                        "stack-md": "16px",
+                        "stack-lg": "24px"
+                    },
+                    "fontFamily": {
+                        "headline-md": ["Hanken Grotesk"],
+                        "mono-data": ["JetBrains Mono"],
+                        "body-md": ["Hanken Grotesk"],
+                        "headline-lg": ["Hanken Grotesk"],
+                        "headline-lg-mobile": ["Hanken Grotesk"],
+                        "body-sm": ["Hanken Grotesk"],
+                        "label-md": ["Hanken Grotesk"],
+                        "body-lg": ["Hanken Grotesk"]
+                    },
+                    "fontSize": {
+                        "headline-md": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "mono-data": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "headline-lg": ["30px", { "lineHeight": "38px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-lg-mobile": ["24px", { "lineHeight": "32px", "fontWeight": "700" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600" }],
+                        "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }]
+                    }
+                },
+            },
+        }
+    </script>
+<style>
+        body { font-family: 'Hanken Grotesk', sans-serif; background-color: #f8f9fa; }
+        .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
+    </style>
+</head>
+<body class="bg-background text-on-background antialiased flex">
+
+<nav class="w-[240px] h-screen fixed left-0 top-0 bg-surface border-r border-surface-border flex flex-col py-stack-lg z-50 hidden md:flex">
+<div class="px-gutter mb-stack-lg flex items-center gap-stack-md flex-col !items-start !gap-2">
+<img alt="KINTEX Logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCLR11UaLwSJShCFFLbDqobx_Y5WpGTGg83m-TotZaoHau7LMFu26QIjyc0NXUv48pZuIsLjReOcoPPUaXqfzp8zNGOgOLjHjIDXLsKHZnhakWSywmqAP2QBnvdAGzhfaNkrp6K3uRIdxzQKx4I_DaxpejAvK_jo19oX44muOW8R00uESszsqVX5UDWxN6vsKhwjATm5AcKznxk0j9IMzorJj2Vg-0mEw8QTRjcePTZGKC3PNZlH193FHaSyuZ7shfjcg"/>
+<div><p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Exhibition Management System</p></div>
+</div>
+<div class="px-gutter mb-stack-lg">
+<button class="w-full text-on-primary text-body-md font-body-md py-2 px-4 rounded hover:opacity-90 transition-opacity flex items-center justify-center gap-2 bg-primary">
+<span class="material-symbols-outlined text-[18px]">add</span> Create New Event
+             </button>
+</div>
+<ul class="flex-1 overflow-y-auto font-body-md text-body-md">
+<li class="mb-1">
+<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
+<img alt="Dashboard" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/AP1WRLtO2EjzKAcW5wn4YYTv12rmtFAvwxlN4fmvGGktwdLqfBGzTTC8C_nxjBMV0s73Yz_eqq3my6ASAxnQk9MMCNSeoTVuQwK9CU8en_ZU63PoTk6muzScTpKFEU2aFgRqpZAs3IBLHhlZXl4ENmWt1GO_lvpxzlx-FAVMFPeSHBfqi8lMEy8xvdRkiRB0MpVPgcEnBWn0SU0BsxlrRVjlVMlL3gAwpYNlLruSqKP5tDnBgDNwjHSKU9SUV04"/> Dashboard
+                </a>
+</li>
+<li class="mb-1">
+<a class="flex items-center gap-3 px-gutter py-3 font-semibold transition-colors duration-200 active:scale-[0.98] bg-primary/10 !text-primary" href="#">
+<img alt="Exhibition Schedule" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/AP1WRLvpb_qiARCcrTrv6YnOIVjyk5szWwIfCGaaCmyRAnuu9aficeKfPTRrRHDgl4gJCHQUc7LYwtF1Ak04oSwBAezPs20C51ZjzHDaBCkRYJaYqHS-DOPHSGLdeLL_S2tlRlUAG-XF_ib2I1Svtqq26yY0uxmEQA5cWHJabFRv_0WVtBKiSP2QbCssxeccpcVHcWr_6CJ6zXonlepkxJcDXURlfHpvg7P2-O1urNto3A0xsepsB1ucua9Vnw"/> Exhibition Schedule
+                </a>
+</li>
+<li class="mb-1">
+<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
+<img alt="Hall Operations" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/AP1WRLvz-lIs0s4a8Cy8eurZwY-dsuBDuvrLeIlIdHrd3y0aSi_u9kpOR3v59PRVX3Y1qP8SJ-459rs6AT8ZgXe7HMwRzZCOTLEpNNY1YqLtB8BBuVmnHOOVESaovK6ib38tM-qoAgpfO5Yxp-0ZCx3EwnULjy98lc_fpS8cQgxMEM-G3oAr71ToD4n-SEH55g1Kyz_ucSfAciJazI6fgyJbqOLgEAOJ-J-Bp1O30aTcbYVLFw3GRp7R06emYmc"/> Hall Operations
+                </a>
+</li>
+<li class="mb-1">
+<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
+<img alt="Business Intelligence" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/AP1WRLujD1FMRHChfM_aVKt2cd12chhcnm31L8Ks2EAzo-_FQ1_RV3zmYa4WUlSJ67wYexda4SpJU88Y5L0HdiYx6fLuKFdsDKjKWm1SmTq4PIP2tx1Nys-Txdlq4Wc1keg1GKsgrxNY68bHBEhurr-0NorgLbpp032gBkj_vE345bYKJwSr5MEnipvo_1P7iE9cXEBybLmdLLYK6vM1nB7dbmVt9_NHG3NQgK7wcPfIaNBrnXrEqtZeckWX3v8"/> Business Intelligence
+                </a>
+</li>
+<li class="mb-1">
+<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
+<img alt="AI Bot" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY"/> AI Assistant
+                </a>
+</li>
+</ul>
+<div class="mt-auto px-gutter pt-stack-md border-t border-surface-border">
+<ul>
+<li class="mb-1">
+<a class="flex items-center gap-3 py-2 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
+<span class="material-symbols-outlined">settings</span> Settings
+                    </a>
+</li>
+<li class="">
+<a class="flex items-center gap-3 py-2 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
+<span class="material-symbols-outlined">help</span> Support
+                    </a>
+</li>
+</ul>
+</div>
+</nav>
+
+<div class="flex-1 md:ml-[240px] flex flex-col min-h-screen">
+
+<header class="h-16 w-full md:w-[calc(100%-240px)] fixed top-0 right-0 z-40 bg-surface border-b border-surface-border flex items-center justify-between px-margin-desktop md:px-gutter">
+<div class="flex items-center gap-stack-lg md:hidden">
+<span class="material-symbols-outlined cursor-pointer">menu</span>
+<span class="font-headline-md text-headline-md font-bold text-primary">KINTEX CMS</span>
+</div>
+<nav class="hidden md:flex items-center gap-stack-lg font-label-md text-label-md">
+<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Overview</a>
+<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Hall Map</a>
+<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Reports</a>
+</nav>
+<div class="flex items-center gap-stack-md">
+<div class="relative hidden sm:block">
+<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[18px]">search</span>
+<input class="pl-10 pr-4 py-1.5 rounded bg-surface-container-low border border-surface-border focus:outline-none focus:border-primary-container text-body-sm font-body-sm w-64" placeholder="Search events..." type="text"/>
+</div>
+<button class="text-primary-container font-label-md text-label-md hover:opacity-80 transition-opacity hidden sm:block border border-primary-container px-3 py-1.5 rounded bg-surface">Refresh Data</button>
+<div class="flex items-center gap-2 text-on-surface-variant">
+<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">notifications</span>
+<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">account_circle</span>
+</div>
+</div>
+</header>
+
+<main class="flex-1 mt-16 p-margin-mobile md:p-gutter max-w-container-max mx-auto w-full">
+<div class="mb-stack-lg">
+<h2 class="font-headline-lg-mobile md:font-headline-lg text-headline-lg-mobile md:text-headline-lg text-on-background mb-2">Exhibition Schedule</h2>
+<p class="font-body-md text-body-md text-on-surface-variant">Manage and monitor all scheduled events across KINTEX halls.</p>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border p-stack-md rounded-lg mb-stack-lg flex flex-col md:flex-row gap-stack-md justify-between items-start md:items-center">
+<div class="flex flex-wrap gap-stack-md w-full md:w-auto">
+<select class="border-surface-border bg-surface-bright rounded text-body-md font-body-md py-1.5 px-3 focus:ring-primary-container focus:border-primary-container w-full md:w-auto">
+<option>All Halls (1-10)</option>
+<option>Hall 1</option>
+<option>Hall 2</option>
+<option>Hall 3</option>
+</select>
+<select class="border-surface-border bg-surface-bright rounded text-body-md font-body-md py-1.5 px-3 focus:ring-primary-container focus:border-primary-container w-full md:w-auto">
+<option>All Categories</option>
+<option>Culture & Arts</option>
+<option>Trade & Industry</option>
+<option>Technology</option>
+</select>
+<select class="border-surface-border bg-surface-bright rounded text-body-md font-body-md py-1.5 px-3 focus:ring-primary-container focus:border-primary-container w-full md:w-auto">
+<option>All Statuses</option>
+<option>Upcoming</option>
+<option>Ongoing</option>
+<option>Completed</option>
+</select>
+</div>
+<div class="flex bg-surface-bright border border-surface-border rounded overflow-hidden">
+<button class="px-4 py-1.5 bg-surface-container-high text-on-surface font-label-md text-label-md border-r border-surface-border flex items-center gap-2">
+<span class="material-symbols-outlined text-[16px]">view_list</span> List
+                    </button>
+<button class="px-4 py-1.5 text-on-surface-variant hover:bg-surface-container-low font-label-md text-label-md flex items-center gap-2 transition-colors">
+<span class="material-symbols-outlined text-[16px]">calendar_view_month</span> Calendar
+                    </button>
+</div>
+</div>
+
+<div class="grid grid-cols-1 xl:grid-cols-3 gap-gutter">
+
+<div class="xl:col-span-2 flex flex-col gap-stack-md">
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col sm:flex-row gap-stack-md hover:bg-surface-container-low transition-colors group">
+<div class="w-full sm:w-48 h-32 flex-shrink-0 bg-surface-container-high rounded overflow-hidden border border-surface-border">
+<img alt="Comic World Summer 2026 Poster" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLuhE3Vd0GA0P7-YrpkgIx42CAZc4R0siEKp4C6Mar5e5pyriuApjq9hIelV50973-kvsDZ1bwDw2MAN9hZD1SCj2NNYrnHo3j1Isw7AGFmeLByaZ9EAcNyvjA0D6ikHOoATtUTneRSmhRpSOOdLe32I1coUcsBLg9P1lCUyCLsJ1Fr53uM31oVf0Wva13z7EeJHlBAnZ4PkzyjprfUKx2jcZ6A0U9_pV9faI3YUNV35nE2wVzVm_ADdoWQ"/>
+</div>
+<div class="flex-1 flex flex-col justify-between py-1">
+<div>
+<div class="flex justify-between items-start mb-1">
+<h3 class="font-headline-md text-headline-md text-on-surface">Comic World Summer 2026</h3>
+<span class="bg-status-active/20 text-status-active px-2 py-0.5 rounded font-label-md text-label-md border border-status-active/30">Ongoing</span>
+</div>
+<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Culture & Arts Festival</p>
+<div class="flex flex-wrap gap-4 text-body-sm font-body-sm text-on-surface-variant">
+<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">event</span> Aug 15 - Aug 18, 2026</div>
+<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">location_on</span> Hall 1, 2, 3</div>
+<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">groups</span> Est. 50,000</div>
+</div>
+</div>
+<div class="mt-4 sm:mt-0 flex gap-2">
+<button class="px-3 py-1 bg-surface border border-surface-border text-on-surface font-label-md text-label-md rounded hover:bg-surface-container-high transition-colors">Edit Details</button>
+<button class="px-3 py-1 bg-surface border border-surface-border text-on-surface font-label-md text-label-md rounded hover:bg-surface-container-high transition-colors">View Logistics</button>
+</div>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col sm:flex-row gap-stack-md hover:bg-surface-container-low transition-colors group">
+<div class="w-full sm:w-48 h-32 flex-shrink-0 bg-surface-container-high rounded overflow-hidden border border-surface-border relative">
+<div class="w-full h-full bg-cover bg-center" data-alt="A clean, brightly lit trade show floor with modern tech booths. High angle shot showing organized aisles and minimal crowds. Cool white lighting, corporate modern aesthetic." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA1iVHP2zaLTADA0j0mJnO5UTxi3KE6dR9k_m4auiWG4koDltA0Tp0GAwAwJbJUxmHObvOV3bhvymF8vJDhhia4mb4cL9YE3dKVMiHDNpArZzryOYfKwgH3qMXBrRTzLcUzHsBAsydwk2eUKG6k0M-u4d5C39nXIPENZN3b6Nv0BAqH4JC8Dm2NPFt8A-yRoI0lQZd_OYPRuuNKkxJihRTRE3iQ_bB_kJ08RYDUKij30OIImks7wMy_')"></div>
+</div>
+<div class="flex-1 flex flex-col justify-between py-1">
+<div>
+<div class="flex justify-between items-start mb-1">
+<h3 class="font-headline-md text-headline-md text-on-surface">Smart Factory Expo</h3>
+<span class="bg-status-pending/20 text-status-pending px-2 py-0.5 rounded font-label-md text-label-md border border-status-pending/30">Upcoming</span>
+</div>
+<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Trade & Industry Exhibition</p>
+<div class="flex flex-wrap gap-4 text-body-sm font-body-sm text-on-surface-variant">
+<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">event</span> Sep 05 - Sep 08, 2026</div>
+<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">location_on</span> Hall 4, 5</div>
+<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">groups</span> Est. 25,000</div>
+</div>
+</div>
+<div class="mt-4 sm:mt-0 flex gap-2">
+<button class="px-3 py-1 bg-surface border border-surface-border text-on-surface font-label-md text-label-md rounded hover:bg-surface-container-high transition-colors">Edit Details</button>
+<button class="px-3 py-1 bg-surface border border-surface-border text-on-surface font-label-md text-label-md rounded hover:bg-surface-container-high transition-colors">View Logistics</button>
+</div>
+</div>
+</div>
+</div>
+
+<div class="flex flex-col gap-gutter">
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md">
+<div class="flex justify-between items-center mb-4">
+<h4 class="font-headline-md text-headline-md text-on-surface">August 2026</h4>
+<div class="flex gap-1">
+<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">chevron_left</span>
+<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">chevron_right</span>
+</div>
+</div>
+<div class="grid grid-cols-7 gap-1 text-center font-label-md text-label-md text-on-surface-variant mb-2">
+<div class="">S</div><div class="">M</div><div class="">T</div><div class="">W</div><div class="">T</div><div class="">F</div><div class="">S</div>
+</div>
+<div class="grid grid-cols-7 gap-1 text-center font-mono-data text-mono-data text-on-surface">
+<div class="text-surface-dim p-1">26</div><div class="text-surface-dim p-1">27</div><div class="text-surface-dim p-1">28</div><div class="text-surface-dim p-1">29</div><div class="text-surface-dim p-1">30</div><div class="text-surface-dim p-1">31</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">1</div>
+
+<div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">2</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">3</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">4</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">5</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">6</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">7</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">8</div>
+<div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">9</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">10</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">11</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">12</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">13</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">14</div><div class="bg-primary-container text-on-primary rounded p-1">15</div>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md">
+<h4 class="font-headline-md text-headline-md text-on-surface mb-4">Hall Utilization (Aug)</h4>
+<div class="space-y-4">
+<div>
+<div class="flex justify-between text-body-sm font-body-sm mb-1">
+<span class="text-on-surface-variant">Hall 1-3</span>
+<span class="font-mono-data text-on-surface">85%</span>
+</div>
+<div class="w-full bg-surface-container-high h-2 rounded-full overflow-hidden">
+<div class="bg-primary-container h-full" style="width: 85%"></div>
+</div>
+</div>
+<div>
+<div class="flex justify-between text-body-sm font-body-sm mb-1">
+<span class="text-on-surface-variant">Hall 4-5</span>
+<span class="font-mono-data text-on-surface">40%</span>
+</div>
+<div class="w-full bg-surface-container-high h-2 rounded-full overflow-hidden">
+<div class="bg-primary-container h-full" style="width: 40%"></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</main>
+</div>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/exhibitor_home_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/exhibitor_home_kintex_ai_system/code.html
new file mode 100644
index 0000000..673f574
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/exhibitor_home_kintex_ai_system/code.html
@@ -0,0 +1,301 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Exhibitor Home - KINTEX AI</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-secondary-fixed-variant": "#4500d8",
+                        "on-primary-container": "#d2e3ff",
+                        "primary-fixed": "#d3e4ff",
+                        "surface-container-lowest": "#ffffff",
+                        "surface-variant": "#dbe2f9",
+                        "on-error-container": "#93000a",
+                        "on-surface": "#141b2c",
+                        "surface-bright": "#f9f9ff",
+                        "surface": "#f9f9ff",
+                        "inverse-surface": "#293041",
+                        "on-tertiary-fixed": "#002113",
+                        "inverse-primary": "#a2c9ff",
+                        "primary-fixed-dim": "#a2c9ff",
+                        "secondary-container": "#6d4aff",
+                        "on-primary-fixed-variant": "#004881",
+                        "on-primary-fixed": "#001c38",
+                        "outline": "#717782",
+                        "error-container": "#ffdad6",
+                        "on-tertiary": "#ffffff",
+                        "background": "#f9f9ff",
+                        "tertiary": "#00583b",
+                        "on-primary": "#ffffff",
+                        "on-error": "#ffffff",
+                        "secondary": "#5427e6",
+                        "on-surface-variant": "#414751",
+                        "on-secondary-fixed": "#1b0063",
+                        "on-secondary": "#ffffff",
+                        "outline-variant": "#c1c7d3",
+                        "surface-container-high": "#e0e8ff",
+                        "tertiary-container": "#00734e",
+                        "on-tertiary-fixed-variant": "#005236",
+                        "primary": "#004e8b",
+                        "secondary-fixed-dim": "#c9bfff",
+                        "surface-dim": "#d2daf0",
+                        "primary-container": "#0066b3",
+                        "on-tertiary-container": "#8ef7c3",
+                        "secondary-fixed": "#e5deff",
+                        "on-secondary-container": "#f3edff",
+                        "tertiary-fixed-dim": "#72daa9",
+                        "surface-container-highest": "#dbe2f9",
+                        "surface-tint": "#0060a9",
+                        "surface-container-low": "#f1f3ff",
+                        "inverse-on-surface": "#edf0ff",
+                        "tertiary-fixed": "#8ef7c4",
+                        "surface-container": "#e9edff",
+                        "error": "#ba1a1a",
+                        "on-background": "#141b2c",
+                        "warning": "#F59E0B"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "stack-md": "16px",
+                        "stack-lg": "24px",
+                        "container-padding": "24px",
+                        "gutter": "16px",
+                        "stack-sm": "8px",
+                        "base": "4px"
+                    },
+                    "fontFamily": {
+                        "title-sm": ["Inter"],
+                        "display-lg-mobile": ["Inter"],
+                        "display-lg": ["Inter"],
+                        "headline-md": ["Inter"],
+                        "body-base": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "label-md": ["Inter"],
+                        "label-xs": ["Inter"]
+                    },
+                    "fontSize": {
+                        "title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
+                        "display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
+                        "body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
+                        "label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .ai-border {
+            border: 1px solid #6D4AFF;
+        }
+    </style>
+</head>
+<body class="bg-surface text-on-surface font-body-base h-screen flex overflow-hidden">
+
+<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
+
+<div class="px-container-padding mb-stack-lg flex items-center gap-stack-sm">
+<img class="w-8 h-8 rounded-full object-cover" data-alt="A minimalist and sleek corporate logo for KINTEX AI in deep blue and stark white, modern b2b tech aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAGMHqzoosZusnl_2O-U--zo_pi0PA9LUW6vmQhUO5LGfBthYM8aHL2ZTHAzC-QAQPIxU9svKiXmRXwAMnmscxxxbBKVEJmCq_3ETHGM3kVgZXSkoEsYeqzw9_vYUJdg9M6jgFz84JzzvQy-k3nc55BgU-JJlyJr1FgPJykwuxH9ve50mUrYCD0evZmklkN5fv65bwbLKaRTyHurZgTylO0QLQ5yGLIFmZU4fwA9U6jkT9zoZ7tO1fn"/>
+<div>
+<h1 class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI</h1>
+<p class="text-label-md font-label-md text-on-surface-variant">Exhibition Manager</p>
+</div>
+</div>
+
+<ul class="flex flex-col flex-1 px-stack-sm gap-base">
+
+<li>
+<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-primary font-bold border-r-4 border-primary bg-primary-container/10" href="#">
+<span class="material-symbols-outlined">dashboard</span>
+<span class="text-title-sm font-title-sm">Dashboard</span>
+</a>
+</li>
+
+<li>
+<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">architecture</span>
+<span class="text-label-md font-label-md">Floor Plan Studio</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">groups</span>
+<span class="text-label-md font-label-md">Exhibitor Management</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">assignment</span>
+<span class="text-label-md font-label-md">Documents</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">payments</span>
+<span class="text-label-md font-label-md">Settlement</span>
+</a>
+</li>
+</ul>
+
+<ul class="flex flex-col px-stack-sm gap-base mt-auto">
+<li>
+<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">settings</span>
+<span class="text-label-md font-label-md">Settings</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
+<span class="material-symbols-outlined">help</span>
+<span class="text-label-md font-label-md">Support</span>
+</a>
+</li>
+</ul>
+</nav>
+
+<main class="ml-60 flex-1 h-screen overflow-y-auto bg-surface p-container-padding flex flex-col gap-stack-lg">
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-container-padding flex items-center justify-between">
+<div>
+<h2 class="text-display-lg font-display-lg text-on-surface mb-base">(주)한빛로보틱스</h2>
+<div class="flex items-center gap-stack-sm text-on-surface-variant text-title-sm font-title-sm">
+<span>부스 A-102</span>
+<span>·</span>
+<span>독립부스 6×3m</span>
+<span>·</span>
+<span>홀7</span>
+</div>
+</div>
+<div class="w-32 h-24 bg-surface-variant rounded-lg border border-outline-variant relative overflow-hidden flex items-center justify-center">
+<div class="w-full h-full opacity-50" data-alt="A minimalist architectural floor plan schematic of an exhibition hall, high contrast, clean lines, professional B2B software aesthetic" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBiwDimFk1sBuNnPE_2RSjfsmamf_Sr70bc2Vbr55j7jMLHaC9VKUvtSLmR5_CcFbd4wpwPjcy_QAgfXLVDkoXvsvodD7DFp5ThCXMf0muIp1s_TnAyqi7-ljT9_mb4KEDpRQROMlk2JQ5hwhJLokGVFis67KjLu2vIkrII7Xng2CXD56wIii1Ys48DTO7tLVUqKCJ2FshDPZmKLzTYnpW0N1bkqCHrEPBcPnZO7-n6mr9m1HMt_uml')"></div>
+<div class="absolute w-6 h-4 bg-primary/80 border-2 border-primary top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-sm shadow-md"></div>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-container-padding">
+<div class="flex items-center justify-between w-full max-w-3xl mx-auto relative">
+
+<div class="absolute top-1/2 left-0 w-full h-0.5 bg-outline-variant -z-10 transform -translate-y-1/2"></div>
+
+<div class="flex flex-col items-center gap-stack-sm bg-surface-container-lowest px-2">
+<div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold">
+<span class="material-symbols-outlined text-sm">check</span>
+</div>
+<span class="text-label-md font-label-md text-on-surface">신청</span>
+</div>
+
+<div class="flex flex-col items-center gap-stack-sm bg-surface-container-lowest px-2">
+<div class="w-8 h-8 rounded-full border-2 border-primary bg-surface-container-lowest text-primary flex items-center justify-center font-bold relative">
+<div class="w-3 h-3 bg-primary rounded-full"></div>
+</div>
+<span class="text-label-md font-label-md text-primary font-bold">승인</span>
+<span class="absolute -bottom-6 text-label-xs text-primary bg-primary-container/10 px-2 py-0.5 rounded">설계 승인 대기중</span>
+</div>
+
+<div class="flex flex-col items-center gap-stack-sm bg-surface-container-lowest px-2">
+<div class="w-8 h-8 rounded-full border-2 border-outline-variant bg-surface-container-lowest text-outline-variant flex items-center justify-center font-bold">3</div>
+<span class="text-label-md font-label-md text-on-surface-variant">시공</span>
+</div>
+
+<div class="flex flex-col items-center gap-stack-sm bg-surface-container-lowest px-2">
+<div class="w-8 h-8 rounded-full border-2 border-outline-variant bg-surface-container-lowest text-outline-variant flex items-center justify-center font-bold">4</div>
+<span class="text-label-md font-label-md text-on-surface-variant">검수</span>
+</div>
+</div>
+</div>
+<div class="grid grid-cols-12 gap-gutter flex-1">
+
+<div class="col-span-12 md:col-span-5 flex flex-col gap-stack-md">
+<h3 class="text-headline-md font-headline-md text-on-surface">해야 할 일</h3>
+
+<div class="bg-surface-container-lowest border border-[#F59E0B] rounded-xl p-stack-md pl-stack-lg relative overflow-hidden">
+<div class="absolute left-0 top-0 bottom-0 w-1 bg-[#F59E0B]"></div>
+<div class="flex justify-between items-start mb-base">
+<span class="bg-[#F59E0B] text-white px-2 py-0.5 rounded text-label-xs font-label-xs font-bold">D-6</span>
+</div>
+<h4 class="text-title-sm font-title-sm text-on-surface mb-1">유틸리티 신청 마감</h4>
+<p class="text-body-sm font-body-sm text-error">인터넷 회선은 현장 추가 신청이 불가합니다</p>
+</div>
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md pl-stack-lg relative overflow-hidden">
+<div class="absolute left-0 top-0 bottom-0 w-1 bg-outline-variant"></div>
+<div class="flex justify-between items-start mb-base">
+<span class="bg-surface-variant text-on-surface-variant px-2 py-0.5 rounded text-label-xs font-label-xs font-bold">D-15</span>
+</div>
+<h4 class="text-title-sm font-title-sm text-on-surface">장치업체 초대하기</h4>
+</div>
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md pl-stack-lg relative overflow-hidden">
+<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
+<h4 class="text-title-sm font-title-sm text-on-surface">설계 컨펌 대기 1건</h4>
+<button class="mt-stack-sm text-primary text-label-md font-label-md hover:underline flex items-center gap-1">
+                        확인하기 <span class="material-symbols-outlined text-sm">arrow_forward</span>
+</button>
+</div>
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md mt-auto">
+<h4 class="text-label-md font-label-md text-on-surface-variant mb-stack-sm uppercase">비용 요약</h4>
+<div class="flex flex-col gap-base">
+<div class="flex justify-between items-center text-body-sm font-body-sm py-2 border-b border-surface-variant">
+<span class="text-on-surface">전기 5kW</span>
+<div class="flex items-center gap-stack-sm">
+<span class="font-semibold">₩275,000</span>
+<span class="bg-tertiary-container/20 text-tertiary px-2 py-0.5 rounded-full text-label-xs">신청됨</span>
+</div>
+</div>
+<div class="flex justify-between items-center text-body-sm font-body-sm py-2">
+<span class="text-on-surface">인터넷 1회선</span>
+<div class="flex items-center gap-stack-sm">
+<span class="font-semibold">₩150,000</span>
+<span class="bg-surface-variant text-on-surface-variant px-2 py-0.5 rounded-full text-label-xs">작성중</span>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+<div class="col-span-12 md:col-span-7 flex flex-col gap-stack-md h-full">
+<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md flex flex-col h-full">
+<h3 class="text-headline-md font-headline-md text-on-surface mb-stack-sm flex items-center gap-2">
+                        내 부스 예상 사진
+                        <span class="material-symbols-outlined text-secondary text-sm" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
+</h3>
+<div class="relative flex-1 rounded-lg overflow-hidden border border-outline-variant ai-border bg-surface-variant flex flex-col justify-end min-h-[300px]">
+<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLt7Owqk04bQHpDRgW-TOypxVfJaLrvGQkPASyNEHGKREzRPLbA3WCQeI_EPz-feK-fDR17TWVMPmQjtYDnTjXIAw_a9ctvRCW-GENeZYnEOC7qPsOdbhFyx-xS4VIDsARlepBMwyh-2lbIf85_kbEg-w0Z_r189I59Hh6nF0V5mCvUHWsQQVYY5s2jSHwa5K9U3OKeEMBBV-xB1jWziZ_5pGqizp5S5_FdYxsFmwdCD1dVUUJNkc8Hqpu8');"></div>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
+<p class="relative z-10 text-white/70 text-label-xs font-label-xs p-stack-md">AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있음</p>
+</div>
+<div class="flex gap-stack-md mt-stack-md">
+<button class="flex-1 bg-primary text-on-primary py-2 px-4 rounded-lg font-title-sm text-title-sm hover:bg-surface-tint transition-colors shadow-sm">
+                            부스 설계 스튜디오
+                        </button>
+<button class="flex-1 border border-outline text-on-surface py-2 px-4 rounded-lg font-title-sm text-title-sm hover:bg-surface-variant transition-colors">
+                            유틸리티 신청
+                        </button>
+</div>
+</div>
+</div>
+</div>
+</main>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/hall_operations_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/hall_operations_kintex_ai_system/code.html
new file mode 100644
index 0000000..4e02f2c
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/hall_operations_kintex_ai_system/code.html
@@ -0,0 +1,439 @@
+<!DOCTYPE html>
+
+<html lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>KINTEX CMS - Smart Hall Operations</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+          darkMode: "class",
+          theme: {
+            extend: {
+              "colors": {
+                      "surface-border": "#E5E7EB",
+                      "surface-dim": "#d9dadb",
+                      "surface-bright": "#f8f9fa",
+                      "outline": "#727782",
+                      "inverse-on-surface": "#f0f1f2",
+                      "primary-fixed-dim": "#a6c8ff",
+                      "error-container": "#ffdad6",
+                      "on-background": "#191c1d",
+                      "on-surface": "#191c1d",
+                      "on-tertiary-container": "#ffc1b8",
+                      "on-primary-fixed-variant": "#004786",
+                      "on-primary": "#ffffff",
+                      "primary-fixed": "#d5e3ff",
+                      "surface-container-lowest": "#ffffff",
+                      "on-tertiary-fixed-variant": "#930002",
+                      "on-secondary": "#ffffff",
+                      "surface-container": "#edeeef",
+                      "surface-tint": "#115fac",
+                      "surface-variant": "#e1e3e4",
+                      "surface-container-highest": "#e1e3e4",
+                      "status-pending": "#F59E0B",
+                      "status-active": "#10B981",
+                      "on-tertiary-fixed": "#410000",
+                      "primary-container": "#0059a6",
+                      "surface-container-high": "#e7e8e9",
+                      "error": "#ba1a1a",
+                      "on-secondary-fixed-variant": "#1e4974",
+                      "secondary-fixed": "#d2e4ff",
+                      "tertiary": "#8a0002",
+                      "tertiary-fixed": "#ffdad5",
+                      "secondary-container": "#a6ccff",
+                      "outline-variant": "#c2c6d3",
+                      "on-surface-variant": "#424751",
+                      "surface-container-low": "#f3f4f5",
+                      "on-primary-fixed": "#001c3b",
+                      "surface": "#f8f9fa",
+                      "inverse-surface": "#2e3132",
+                      "on-error-container": "#93000a",
+                      "tertiary-container": "#b60004",
+                      "primary": "#00427d",
+                      "on-primary-container": "#b6d1ff",
+                      "on-tertiary": "#ffffff",
+                      "on-secondary-container": "#2e5682",
+                      "secondary": "#39608d",
+                      "on-secondary-fixed": "#001c37",
+                      "inverse-primary": "#a6c8ff",
+                      "on-error": "#ffffff",
+                      "secondary-fixed-dim": "#a3c9fc",
+                      "table-header": "#F1F5F9",
+                      "tertiary-fixed-dim": "#ffb4a9",
+                      "background": "#f8f9fa"
+              },
+              "borderRadius": {
+                      "DEFAULT": "0.125rem",
+                      "lg": "0.25rem",
+                      "xl": "0.5rem",
+                      "full": "0.75rem"
+              },
+              "spacing": {
+                      "margin-desktop": "32px",
+                      "container-max": "1440px",
+                      "margin-mobile": "16px",
+                      "gutter": "24px",
+                      "stack-sm": "8px",
+                      "stack-md": "16px",
+                      "stack-lg": "24px"
+              },
+              "fontFamily": {
+                      "headline-md": [
+                              "Hanken Grotesk"
+                      ],
+                      "mono-data": [
+                              "jetbrainsMono"
+                      ],
+                      "body-md": [
+                              "Hanken Grotesk"
+                      ],
+                      "headline-lg": [
+                              "Hanken Grotesk"
+                      ],
+                      "headline-lg-mobile": [
+                              "Hanken Grotesk"
+                      ],
+                      "body-sm": [
+                              "Hanken Grotesk"
+                      ],
+                      "label-md": [
+                              "Hanken Grotesk"
+                      ],
+                      "body-lg": [
+                              "Hanken Grotesk"
+                      ]
+              },
+              "fontSize": {
+                      "headline-md": [
+                              "20px",
+                              {
+                                      "lineHeight": "28px",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "mono-data": [
+                              "13px",
+                              {
+                                      "lineHeight": "18px",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "body-md": [
+                              "14px",
+                              {
+                                      "lineHeight": "20px",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "headline-lg": [
+                              "30px",
+                              {
+                                      "lineHeight": "38px",
+                                      "letterSpacing": "-0.02em",
+                                      "fontWeight": "700"
+                              }
+                      ],
+                      "headline-lg-mobile": [
+                              "24px",
+                              {
+                                      "lineHeight": "32px",
+                                      "fontWeight": "700"
+                              }
+                      ],
+                      "body-sm": [
+                              "13px",
+                              {
+                                      "lineHeight": "18px",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "label-md": [
+                              "12px",
+                              {
+                                      "lineHeight": "16px",
+                                      "letterSpacing": "0.05em",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "body-lg": [
+                              "16px",
+                              {
+                                      "lineHeight": "24px",
+                                      "fontWeight": "400"
+                              }
+                      ]
+              }
+      },
+          },
+        }
+    </script>
+<style>
+        body { background-color: #f8f9fa; }
+    </style>
+</head>
+<body class="bg-background text-on-surface font-body-md antialiased overflow-x-hidden">
+
+<nav class="w-[240px] h-screen fixed left-0 top-0 bg-surface dark:bg-surface border-r border-surface-border flex flex-col py-stack-lg z-50">
+<div class="px-gutter mb-stack-lg flex items-center gap-3">
+<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container overflow-hidden">
+<img alt="KINTEX CMS Logo" class="w-6 h-6 object-contain brightness-0 invert" src="https://lh3.googleusercontent.com/aida/AP1WRLu1SFz3uW8s6iC8BUAS9XvAFoM_7LQZUzR-UgorcHCSIZ_uRCF-ZTLQnQbNUG13WdRaQDX_3m0ewu6jxJ2Ie-gQvwFXyYdy3ZIxhkl0hJ2VGRZF6Iul1GgmSKzO5x92HASTCa0m0XzXjctyxy5aRgxOTOxhzl-Qz9P5jTlRzXngIWh6bCNZdaVEIxd9H6a2fDdToHYg0gowaU93SV2P5YbT0-8ShD0eeNiQEFHXn4HcsQUCrsiacEeGDZY"/>
+</div>
+<div>
+<img alt="KINTEX Logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAkMBjVM7IWaH47IzpnpoyhFdfwyNQ7Ns7YHqt-z2DDCnToIJcAf848B38CIWVPkiK1TBkk1gKruf_KCA3jVl-gc4NqY6Lc2aiXgQ8yhQNo2eohoFHP7wsdhjzkblMlTCzQzYWiPA7nsncBC0tbYBCJv-xnyq3ErGnpOusWMcFddoXm6ayHIWxRVR9YKG5WOj4PRvhrhVvlSL7xpJpJfCH37ilwRHBzXKVdZgEO28ZQPViNcOp2IpefeQsYd45YoMEEvg"/>
+</div>
+</div>
+<div class="px-gutter mb-stack-lg">
+<button class="w-full bg-primary text-on-primary py-2 px-4 rounded font-label-md text-label-md hover:bg-primary-container hover:text-on-primary-container transition-colors duration-200 flex items-center justify-center gap-2 shadow-sm">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
+                Create New Event
+            </button>
+</div>
+<div class="flex-1 px-3 space-y-1">
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
+<img alt="Dashboard" class="w-5 h-5 opacity-70" src="https://lh3.googleusercontent.com/aida/AP1WRLtO2EjzKAcW5wn4YYTv12rmtFAvwxlN4fmvGGktwdLqfBGzTTC8C_nxjBMV0s73Yz_eqq3my6ASAxnQk9MMCNSeoTVuQwK9CU8en_ZU63PoTk6muzScTpKFEU2aFgRqpZAs3IBLHhlZXl4ENmWt1GO_lvpxzlx-FAVMFPeSHBfqi8lMEy8xvdRkiRB0MpVPgcEnBWn0SU0BsxlrRVjlVMlL3gAwpYNlLruSqKP5tDnBgDNwjHSKU9SUV04"/>
+<span class="font-label-md text-label-md">Dashboard</span>
+</a>
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
+<img alt="Schedule" class="w-5 h-5 opacity-70" src="https://lh3.googleusercontent.com/aida/AP1WRLvpb_qiARCcrTrv6YnOIVjyk5szWwIfCGaaCmyRAnuu9aficeKfPTRrRHDgl4gJCHQUc7LYwtF1Ak04oSwBAezPs20C51ZjzHDaBCkRYJaYqHS-DOPHSGLdeLL_S2tlRlUAG-XF_ib2I1Svtqq26yY0uxmEQA5cWHJabFRv_0WVtBKiSP2QbCssxeccpcVHcWr_6CJ6zXonlepkxJcDXURlfHpvg7P2-O1urNto3A0xsepsB1ucua9Vnw"/>
+<span class="font-label-md text-label-md">Exhibition Schedule</span>
+</a>
+<a class="flex items-center gap-3 px-3 py-2 rounded bg-secondary-container text-on-secondary-container font-semibold transition-colors duration-200" href="#">
+<img alt="Operations" class="w-5 h-5" src="https://lh3.googleusercontent.com/aida/AP1WRLvz-lIs0s4a8Cy8eurZwY-dsuBDuvrLeIlIdHrd3y0aSi_u9kpOR3v59PRVX3Y1qP8SJ-459rs6AT8ZgXe7HMwRzZCOTLEpNNY1YqLtB8BBuVmnHOOVESaovK6ib38tM-qoAgpfO5Yxp-0ZCx3EwnULjy98lc_fpS8cQgxMEM-G3oAr71ToD4n-SEH55g1Kyz_ucSfAciJazI6fgyJbqOLgEAOJ-J-Bp1O30aTcbYVLFw3GRp7R06emYmc"/>
+<span class="font-label-md text-label-md">Hall Operations</span>
+</a>
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
+<img alt="Analytics" class="w-5 h-5 opacity-70" src="https://lh3.googleusercontent.com/aida/AP1WRLujD1FMRHChfM_aVKt2cd12chhcnm31L8Ks2EAzo-_FQ1_RV3zmYa4WUlSJ67wYexda4SpJU88Y5L0HdiYx6fLuKFdsDKjKWm1SmTq4PIP2tx1Nys-Txdlq4Wc1keg1GKsgrxNY68bHBEhurr-0NorgLbpp032gBkj_vE345bYKJwSr5MEnipvo_1P7iE9cXEBybLmdLLYK6vM1nB7dbmVt9_NHG3NQgK7wcPfIaNBrnXrEqtZeckWX3v8"/>
+<span class="font-label-md text-label-md">Business Intelligence</span>
+</a>
+</div>
+<div class="px-3 space-y-1 mt-auto border-t border-surface-border pt-stack-sm">
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
+<span class="material-symbols-outlined">settings</span>
+<span class="font-label-md text-label-md">Settings</span>
+</a>
+<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
+<span class="material-symbols-outlined">help</span>
+<span class="font-label-md text-label-md">Support</span>
+</a>
+</div>
+</nav>
+
+<header class="h-16 w-[calc(100%-240px)] fixed top-0 right-0 z-40 bg-surface dark:bg-surface border-b border-surface-border flex items-center justify-between px-margin-desktop ml-[240px]">
+<div class="flex items-center gap-6">
+<nav class="hidden md:flex items-center gap-6">
+<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Overview</a>
+<a class="font-label-md text-label-md text-primary border-b-2 border-primary pb-1" href="#">Hall Map</a>
+<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Reports</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="relative hidden lg:block">
+<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm">search</span>
+<input class="pl-9 pr-4 py-1.5 rounded-full border border-surface-border bg-surface-container-lowest text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary w-64" placeholder="Search operations..." type="text"/>
+</div>
+<button class="font-label-md text-label-md text-primary border border-surface-border bg-surface-container-lowest px-4 py-1.5 rounded hover:bg-surface-container-low transition-colors flex items-center gap-2">
+<span class="material-symbols-outlined text-[18px]">refresh</span>
+                Refresh Data
+            </button>
+<div class="flex items-center gap-2 border-l border-surface-border pl-4">
+<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100">
+<span class="material-symbols-outlined">notifications</span>
+</button>
+<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100">
+<span class="material-symbols-outlined">account_circle</span>
+</button>
+</div>
+</div>
+</header>
+
+<main class="ml-[240px] mt-16 p-margin-desktop max-w-container-max">
+<div class="flex items-center justify-between mb-stack-lg">
+<div>
+<h2 class="font-headline-lg text-headline-lg text-on-surface">Smart Hall Operations</h2>
+<p class="font-body-md text-body-md text-on-surface-variant mt-1">Real-time facility monitoring and resource optimization.</p>
+</div>
+<div class="flex items-center gap-2 bg-surface-container-lowest border border-surface-border rounded-lg p-1">
+<button class="px-3 py-1 bg-surface-container-high rounded shadow-sm font-label-md text-label-md text-on-surface">Live View</button>
+<button class="px-3 py-1 rounded font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-low">Historical</button>
+</div>
+</div>
+
+<div class="grid grid-cols-12 gap-gutter">
+
+<div class="col-span-12 lg:col-span-8 bg-surface-container-lowest rounded-xl border border-surface-border overflow-hidden flex flex-col h-[500px]">
+<div class="px-stack-lg py-stack-md border-b border-surface-border flex justify-between items-center bg-surface-bright">
+<h3 class="font-headline-md text-headline-md text-on-surface flex items-center gap-3">
+<img alt="Density" class="w-6 h-6 text-primary" src="https://lh3.googleusercontent.com/aida/AP1WRLvz-lIs0s4a8Cy8eurZwY-dsuBDuvrLeIlIdHrd3y0aSi_u9kpOR3v59PRVX3Y1qP8SJ-459rs6AT8ZgXe7HMwRzZCOTLEpNNY1YqLtB8BBuVmnHOOVESaovK6ib38tM-qoAgpfO5Yxp-0ZCx3EwnULjy98lc_fpS8cQgxMEM-G3oAr71ToD4n-SEH55g1Kyz_ucSfAciJazI6fgyJbqOLgEAOJ-J-Bp1O30aTcbYVLFw3GRp7R06emYmc"/>
+                        Live Crowd Density Heatmap
+                    </h3>
+<div class="flex gap-2">
+<select class="text-sm border-surface-border rounded bg-surface-container-lowest focus:ring-primary focus:border-primary py-1 pl-2 pr-8">
+<option>Halls 1-5 (Exhibition Center 1)</option>
+<option>Halls 6-10 (Exhibition Center 2)</option>
+</select>
+</div>
+</div>
+<div class="flex-1 relative bg-surface-variant p-4">
+
+<div class="absolute inset-0 bg-gradient-to-br from-surface-variant via-surface to-surface-variant opacity-50"></div>
+
+<div class="relative w-full h-full bg-surface-container-lowest border border-surface-border rounded-lg shadow-sm overflow-hidden flex items-center justify-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAzDGCxZryR6cy1r-TqP3RGKxo9Q2SrEo5oqMaZVpLfvhZj7YBSwlVKNq5O4bvG-KFCWIB7ptcbsksw5m6ttfP_KbPFpPAJD2JCufmfiY_7AXdcR6B7yaf88RxuPmB_kviQa1GNFYKVBDYUAPzPdPf_qmV7PTMKcisaMQkM8fIzN4w2ncnDR4TV_EVfiiKmikS7pdvPg2CPN9d7eRsMZIu4qOWqsUVQLtwMIhRygocuOLrAIy81gxLL'); background-size: cover; background-position: center;">
+
+<div class="absolute top-1/4 left-1/4 w-32 h-32 bg-status-pending rounded-full blur-2xl opacity-60 mix-blend-multiply"></div>
+<div class="absolute top-1/2 right-1/3 w-48 h-48 rounded-full blur-3xl opacity-40 mix-blend-multiply bg-tertiary"></div>
+<div class="absolute bottom-1/4 left-1/2 w-24 h-24 bg-status-active rounded-full blur-xl opacity-50 mix-blend-multiply"></div>
+
+<div class="absolute inset-0 grid grid-cols-5 gap-2 p-4">
+<div class="border-2 border-outline/30 rounded flex items-center justify-center bg-surface-container-lowest/80 backdrop-blur-sm"><span class="font-label-md text-outline">Hall 1</span></div>
+<div class="border-2 border-outline/30 rounded flex items-center justify-center bg-surface-container-lowest/80 backdrop-blur-sm"><span class="font-label-md text-outline">Hall 2</span></div>
+<div class="border-2 border-outline-variant rounded flex items-center justify-center bg-error-container/40 backdrop-blur-sm border-error/50"><span class="font-label-md text-error">Hall 3 (High)</span></div>
+<div class="border-2 border-outline/30 rounded flex items-center justify-center bg-surface-container-lowest/80 backdrop-blur-sm"><span class="font-label-md text-outline">Hall 4</span></div>
+<div class="border-2 border-outline/30 rounded flex items-center justify-center bg-surface-container-lowest/80 backdrop-blur-sm"><span class="font-label-md text-outline">Hall 5</span></div>
+</div>
+</div>
+</div>
+<div class="px-stack-lg py-3 border-t border-surface-border bg-surface-bright flex justify-between text-sm">
+<div class="flex items-center gap-4">
+<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-status-active"></span> Low</span>
+<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-status-pending"></span> Moderate</span>
+<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-tertiary"></span> High</span>
+</div>
+<span class="font-mono-data text-mono-data text-outline">Total Est. Attendance: 14,250</span>
+</div>
+</div>
+
+<div class="col-span-12 lg:col-span-4 flex flex-col gap-gutter h-[500px]">
+
+<div class="flex-1 bg-surface-container-lowest rounded-xl border border-surface-border p-stack-md flex flex-col">
+<h3 class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-4 flex items-center gap-3">
+<img alt="HVAC" class="w-5 h-5 opacity-60" src="https://lh3.googleusercontent.com/aida/AP1WRLvz-lIs0s4a8Cy8eurZwY-dsuBDuvrLeIlIdHrd3y0aSi_u9kpOR3v59PRVX3Y1qP8SJ-459rs6AT8ZgXe7HMwRzZCOTLEpNNY1YqLtB8BBuVmnHOOVESaovK6ib38tM-qoAgpfO5Yxp-0ZCx3EwnULjy98lc_fpS8cQgxMEM-G3oAr71ToD4n-SEH55g1Kyz_ucSfAciJazI6fgyJbqOLgEAOJ-J-Bp1O30aTcbYVLFw3GRp7R06emYmc"/>
+                        HVAC Optimization
+                    </h3>
+<div class="flex items-end gap-2 mb-2">
+<span class="text-3xl font-headline-lg font-bold text-primary">22.5°C</span>
+<span class="font-body-sm text-outline pb-1">Avg Temp</span>
+</div>
+<div class="w-full bg-surface-container h-2 rounded-full mb-4 overflow-hidden">
+<div class="bg-primary h-full rounded-full" style="width: 65%;"></div>
+</div>
+<div class="grid grid-cols-2 gap-4 mt-auto">
+<div>
+<span class="block font-label-md text-outline mb-1">Power Draw</span>
+<span class="font-mono-data text-on-surface">4.2 MW</span>
+</div>
+<div>
+<span class="block font-label-md text-outline mb-1">Status</span>
+<span class="inline-flex items-center gap-1 font-label-md text-status-active bg-status-active/10 px-2 py-0.5 rounded">
+<span class="material-symbols-outlined text-[14px]">check_circle</span> Optimal
+                            </span>
+</div>
+</div>
+</div>
+
+<div class="flex-1 bg-surface-container-lowest rounded-xl border border-surface-border p-stack-md flex flex-col">
+<h3 class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-4 flex items-center gap-3">
+<img alt="Lighting" class="w-5 h-5 opacity-60" src="https://lh3.googleusercontent.com/aida/AP1WRLtO2EjzKAcW5wn4YYTv12rmtFAvwxlN4fmvGGktwdLqfBGzTTC8C_nxjBMV0s73Yz_eqq3my6ASAxnQk9MMCNSeoTVuQwK9CU8en_ZU63PoTk6muzScTpKFEU2aFgRqpZAs3IBLHhlZXl4ENmWt1GO_lvpxzlx-FAVMFPeSHBfqi8lMEy8xvdRkiRB0MpVPgcEnBWn0SU0BsxlrRVjlVMlL3gAwpYNlLruSqKP5tDnBgDNwjHSKU9SUV04"/>
+                        Lighting Zones
+                    </h3>
+<div class="space-y-3">
+<div class="flex justify-between items-center">
+<span class="font-body-md text-on-surface">Exhibition Halls</span>
+<span class="font-mono-data text-primary font-medium">85% ON</span>
+</div>
+<div class="w-full bg-surface-container h-1.5 rounded-full overflow-hidden">
+<div class="bg-status-pending h-full rounded-full" style="width: 85%;"></div>
+</div>
+<div class="flex justify-between items-center mt-2">
+<span class="font-body-md text-on-surface">Public Concourses</span>
+<span class="font-mono-data text-primary font-medium">100% ON</span>
+</div>
+<div class="w-full bg-surface-container h-1.5 rounded-full overflow-hidden">
+<div class="bg-status-pending h-full rounded-full" style="width: 100%;"></div>
+</div>
+</div>
+<div class="mt-auto pt-3 border-t border-surface-border flex justify-between items-center">
+<span class="font-label-md text-outline">Auto-dimming active</span>
+<div class="w-8 h-4 bg-primary rounded-full relative cursor-pointer">
+<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5"></div>
+</div>
+</div>
+</div>
+</div>
+
+<div class="col-span-12 bg-surface-container-lowest rounded-xl border border-surface-border p-stack-lg">
+<div class="flex justify-between items-center mb-stack-md">
+<h3 class="font-headline-md text-headline-md text-on-surface flex items-center gap-3">
+<img alt="Parking" class="w-6 h-6 text-primary" src="https://lh3.googleusercontent.com/aida/AP1WRLujD1FMRHChfM_aVKt2cd12chhcnm31L8Ks2EAzo-_FQ1_RV3zmYa4WUlSJ67wYexda4SpJU88Y5L0HdiYx6fLuKFdsDKjKWm1SmTq4PIP2tx1Nys-Txdlq4Wc1keg1GKsgrxNY68bHBEhurr-0NorgLbpp032gBkj_vE345bYKJwSr5MEnipvo_1P7iE9cXEBybLmdLLYK6vM1nB7dbmVt9_NHG3NQgK7wcPfIaNBrnXrEqtZeckWX3v8"/>
+                        Parking Occupancy Status
+                    </h3>
+<span class="font-label-md bg-surface-container-high px-3 py-1 rounded text-on-surface-variant">Updated: Just now</span>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter">
+
+<div class="border border-surface-border rounded-lg p-4 bg-surface-bright relative overflow-hidden">
+<div class="absolute bottom-0 left-0 h-1 bg-error w-full"></div>
+<div class="flex justify-between items-start mb-2">
+<div>
+<h4 class="font-label-md text-label-md text-on-surface">Zone A (Underground)</h4>
+<span class="font-body-sm text-outline">VIP / Exhibitors</span>
+</div>
+<span class="font-mono-data text-error font-bold">98%</span>
+</div>
+<div class="flex items-end gap-1 mt-4">
+<span class="text-2xl font-headline-md text-on-surface">1,176</span>
+<span class="font-body-sm text-outline pb-1">/ 1,200</span>
+</div>
+</div>
+
+<div class="border border-surface-border rounded-lg p-4 bg-surface-bright relative overflow-hidden">
+<div class="absolute bottom-0 left-0 h-1 bg-status-pending w-[75%]"></div>
+<div class="flex justify-between items-start mb-2">
+<div>
+<h4 class="font-label-md text-label-md text-on-surface">Zone B (Outdoor South)</h4>
+<span class="font-body-sm text-outline">General Public</span>
+</div>
+<span class="font-mono-data text-status-pending font-bold">75%</span>
+</div>
+<div class="flex items-end gap-1 mt-4">
+<span class="text-2xl font-headline-md text-on-surface">2,250</span>
+<span class="font-body-sm text-outline pb-1">/ 3,000</span>
+</div>
+</div>
+
+<div class="border border-surface-border rounded-lg p-4 bg-surface-bright relative overflow-hidden">
+<div class="absolute bottom-0 left-0 h-1 bg-status-active w-[42%]"></div>
+<div class="flex justify-between items-start mb-2">
+<div>
+<h4 class="font-label-md text-label-md text-on-surface">Zone C (Outdoor North)</h4>
+<span class="font-body-sm text-outline">General Public</span>
+</div>
+<span class="font-mono-data text-status-active font-bold">42%</span>
+</div>
+<div class="flex items-end gap-1 mt-4">
+<span class="text-2xl font-headline-md text-on-surface">1,050</span>
+<span class="font-body-sm text-outline pb-1">/ 2,500</span>
+</div>
+</div>
+
+<div class="border border-surface-border rounded-lg p-4 bg-surface-bright relative overflow-hidden">
+<div class="absolute bottom-0 left-0 h-1 bg-outline-variant w-[20%]"></div>
+<div class="flex justify-between items-start mb-2">
+<div>
+<h4 class="font-label-md text-label-md text-on-surface">Loading Docks 1-5</h4>
+<span class="font-body-sm text-outline">Freight Only</span>
+</div>
+<span class="font-mono-data text-outline font-bold">20%</span>
+</div>
+<div class="flex items-end gap-1 mt-4">
+<span class="text-2xl font-headline-md text-on-surface">12</span>
+<span class="font-body-sm text-outline pb-1">/ 60 bays</span>
+</div>
+</div>
+</div>
+</div>
+</div>
+</main>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/kintex_ai_intelligence_system/DESIGN.md b/stitch_kintex_ai_system_architect/kintex_ai_intelligence_system/DESIGN.md
new file mode 100644
index 0000000..71152ee
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/kintex_ai_intelligence_system/DESIGN.md
@@ -0,0 +1,182 @@
+---
+name: Kintex AI Intelligence System
+colors:
+  surface: '#f9f9fc'
+  surface-dim: '#dadadc'
+  surface-bright: '#f9f9fc'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f3f3f6'
+  surface-container: '#eeeef0'
+  surface-container-high: '#e8e8ea'
+  surface-container-highest: '#e2e2e5'
+  on-surface: '#1a1c1e'
+  on-surface-variant: '#424751'
+  inverse-surface: '#2f3133'
+  inverse-on-surface: '#f0f0f3'
+  outline: '#727782'
+  outline-variant: '#c2c6d3'
+  surface-tint: '#115fac'
+  primary: '#00427d'
+  on-primary: '#ffffff'
+  primary-container: '#0059a6'
+  on-primary-container: '#b6d1ff'
+  inverse-primary: '#a6c8ff'
+  secondary: '#5427e6'
+  on-secondary: '#ffffff'
+  secondary-container: '#6d4aff'
+  on-secondary-container: '#f3edff'
+  tertiary: '#004950'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#00636b'
+  on-tertiary-container: '#65e2ef'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#d5e3ff'
+  primary-fixed-dim: '#a6c8ff'
+  on-primary-fixed: '#001c3b'
+  on-primary-fixed-variant: '#004786'
+  secondary-fixed: '#e5deff'
+  secondary-fixed-dim: '#c9bfff'
+  on-secondary-fixed: '#1b0063'
+  on-secondary-fixed-variant: '#4500d8'
+  tertiary-fixed: '#87f3ff'
+  tertiary-fixed-dim: '#59d8e5'
+  on-tertiary-fixed: '#001f23'
+  on-tertiary-fixed-variant: '#004f55'
+  background: '#f9f9fc'
+  on-background: '#1a1c1e'
+  surface-variant: '#e2e2e5'
+  ai-surface: '#F5F3FF'
+  status-safe: '#2ECC71'
+  status-warning: '#F1C40F'
+  status-alert: '#E74C3C'
+  surface-muted: '#F8FAFC'
+typography:
+  display-lg:
+    fontFamily: Hanken Grotesk
+    fontSize: 48px
+    fontWeight: '700'
+    lineHeight: '1.2'
+    letterSpacing: -0.02em
+  display-lg-mobile:
+    fontFamily: Hanken Grotesk
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: '1.2'
+  headline-lg:
+    fontFamily: Hanken Grotesk
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.3'
+  headline-md:
+    fontFamily: Hanken Grotesk
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: '1.4'
+  body-lg:
+    fontFamily: Hanken Grotesk
+    fontSize: 18px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  body-md:
+    fontFamily: Hanken Grotesk
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  body-sm:
+    fontFamily: Hanken Grotesk
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: '1.5'
+  label-md:
+    fontFamily: Hanken Grotesk
+    fontSize: 14px
+    fontWeight: '600'
+    lineHeight: '1'
+    letterSpacing: 0.05em
+  code-sm:
+    fontFamily: Courier Prime
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: '1.4'
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 4px
+  gutter: 24px
+  margin-mobile: 16px
+  margin-desktop: 48px
+  container-max: 1440px
+---
+
+## Brand & Style
+
+The design system is engineered for the intersection of industrial facility management and advanced artificial intelligence. It adopts a **Corporate / Modern** aesthetic that prioritizes reliability, precision, and efficiency. The target audience includes exhibition managers, technical engineers, and corporate stakeholders who require high-density information delivery without cognitive overload.
+
+The visual narrative balances the "stability" of traditional infrastructure management with the "intelligence" of AI integration. By utilizing a clean, structured layout with subtle technological accents, the UI evokes a sense of trustworthy authority and forward-thinking innovation. White space is used strategically to maintain clarity in complex data environments, ensuring that "human-centric" service remains at the forefront of "technology-driven" operations.
+
+## Colors
+
+The palette is anchored by **Corporate Blue (#0059A6)**, representing the established heritage of KINTEX and professional facility management. This is contrasted by **AI-Accent Purple (#6D4AFF)**, which is reserved exclusively for intelligent features, automated insights, and predictive maintenance indicators.
+
+**Neutral tones** are predominantly cool grays to maintain a technical feel. Surface colors utilize a tiered approach: white for primary cards, and `surface-muted` for background grouping. The `ai-surface` is a very subtle purple tint used to highlight dashboard sections or components that are actively powered by AI, providing a clear visual cue for "smart" versus "manual" data.
+
+## Typography
+
+The typography system relies on **Hanken Grotesk** to provide a sharp, contemporary, and highly legible experience across both digital interfaces and technical reports. For Korean text, **Pretendard** is the designated fallback, ensuring consistent weights and optical balance.
+
+Hierarchy is strictly enforced to manage high-density data. Headlines use a tighter letter-spacing to appear more cohesive and authoritative. Labels use all-caps and increased tracking for utility-based navigation and metadata tags. For logs and technical ID strings, a monospaced font is utilized to differentiate system data from user-readable content.
+
+## Layout & Spacing
+
+This design system employs a **Fixed Grid** model for desktop, centered within a 1440px container to ensure readability of data tables and management dashboards. A 12-column grid is standard, allowing for flexible layouts of 2, 3, 4, or 6 units.
+
+For exhibition management tasks, a **High-Density** spacing rhythm is utilized (4px base unit). 
+- **Desktop:** 24px gutters with 48px page margins.
+- **Tablet:** 16px gutters with 32px page margins.
+- **Mobile:** 12px gutters with 16px page margins.
+
+Content reflows from multi-column grids to single-column stacks on mobile, with secondary navigation moving to a bottom-tab bar or a simplified "hamburger" menu to maximize vertical screen real estate for data visualization.
+
+## Elevation & Depth
+
+Visual hierarchy is established through **Tonal Layers** and **Low-Contrast Outlines** rather than heavy shadows, maintaining a professional and clean "B2B dashboard" feel.
+
+- **Level 0 (Surface):** The main background color.
+- **Level 1 (Cards):** Raised using a 1px border (#E2E8F0) or a very soft, diffused shadow (0px 4px 12px, 4% opacity).
+- **Level 2 (Active/Overlays):** Used for modals and dropdowns, featuring a slightly more pronounced shadow and a backdrop blur (8px) to separate the element from the dense data behind it.
+
+AI-specific components may use a subtle purple outer-glow (tinted shadow) to indicate an active processing state or a high-confidence recommendation.
+
+## Shapes
+
+The shape language is **Soft**, utilizing small radii to maintain a disciplined, architectural feel. 
+- **Standard elements** (Buttons, Inputs, Cards): 0.25rem (4px).
+- **Large containers** (Section blocks): 0.5rem (8px).
+- **Interactive Tags/Chips:** May use a pill-shape for high-contrast status indicators, but structural components must remain geometric.
+
+This minimal roundedness reflects the industrial nature of KINTEX while softening the edges for a modern software experience.
+
+## Components
+
+### Buttons
+Primary buttons use the Corporate Blue. AI-action buttons use the Purple accent. Both feature a subtle 1px inset border on hover to provide tactile feedback. Text is always semi-bold Hanken Grotesk.
+
+### Input Fields
+Inputs utilize a 1px border-bottom as the primary visual marker in high-density forms, or a full 4px rounded box in standard layouts. The focus state uses a 2px Corporate Blue border.
+
+### Cards
+Cards are the primary container for data. They must feature a clear "Header" section with 16px padding, separated by a 1px divider from the "Content" area. AI-powered cards include a left-hand purple border accent (4px width).
+
+### Chips & Status Indicators
+Used for "Safe", "Warning", or "Alert" status. They are small, high-density elements with a background-tinted version of the status color and dark-text for accessibility.
+
+### Data Lists
+Lists must support high-density viewing. Row heights are kept at 40px for desktop with a subtle hover state (#F1F5F9) to help the user track information across horizontal planes.
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/kintex_ai_system_proposal.md b/stitch_kintex_ai_system_architect/kintex_ai_system_proposal.md
new file mode 100644
index 0000000..6222cc9
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/kintex_ai_system_proposal.md
@@ -0,0 +1,36 @@
+# 킨텍스(KINTEX) AI 시스템 개발 기획안
+
+## 1. 개요
+본 기획안은 대한민국 최대 전시 컨벤션 센터인 킨텍스의 디지털 전환을 가속화하고, AI 기술을 통해 방문객 경험을 혁신하며 운영 효율성을 극대화하기 위한 'KINTEX AI Intelligence System' 구축을 제안합니다.
+
+## 2. 핵심 목표
+- **방문객 경험 혁신**: 개인화된 추천 및 실시간 안내 서비스 제공
+- **운영 효율화**: 데이터 기반의 전시장 운영 및 혼잡도 관리
+- **전시 마케팅 고도화**: 전시 주최자 및 참가 업체를 위한 맞춤형 매칭 및 분석 리포트 제공
+
+## 3. 주요 AI 시스템 기능 제안
+
+### A. 스마트 방문객 가이드 (AI Concierge)
+- **개인화된 전시 일정 추천**: 방문객의 관심 분야 및 과거 방문 이력을 분석하여 맞춤형 전시 및 세션 추천
+- **실시간 다국어 챗봇/보이스봇**: 위치 안내, 부대시설 정보, 주차 정보 등을 다국어로 실시간 응대
+- **AR 기반 실내 내비게이션**: 대규모 전시장 내에서 목적지(부스, 편의시설)까지의 최적 경로 안내
+
+### B. 지능형 전시장 관리 (Smart Hall Operations)
+- **AI 혼잡도 분석 및 예측**: CCTV 데이터를 활용한 실시간 인파 밀집도 분석 및 위험 구역 사전 경고
+- **에너지 최적화 시스템**: 전시장 내 인원 분포에 따른 조명 및 냉난방 자동 최적 제어
+- **주차 수요 예측**: 실시간 주차 상황 데이터와 행사 일정을 연계하여 주차 공간 최적 배정 및 안내
+
+### C. 비즈니스 매칭 및 데이터 분석 (Business Intelligence)
+- **AI 비즈니스 매칭**: 전시 주최자와 잠재적 참가 업체, 혹은 참가 업체와 바이어 간의 최적 매칭 제안
+- **성과 분석 리포트**: 부스별 방문자 수, 체류 시간, 유입 경로 등을 분석하여 참가 업체에 제공
+- **전시회 트렌드 분석**: 글로벌 전시 트렌드 데이터를 분석하여 신규 기획 전시 테마 제안
+
+## 4. 시스템 아키텍처 (Harness) 제안
+- **Data Lake**: 웹사이트 로그, 현장 센서 데이터, 외부 트렌드 데이터를 통합 관리
+- **AI Model Layer**: 자연어 처리(LLM), 컴퓨터 비전(CCTV 분석), 예측 모델(주차/에너지) 탑재
+- **API Gateway**: 모바일 앱, 웹사이트, 키오스크 등 다양한 채널에 AI 기능 공급
+
+## 5. 기대 효과
+- 방문객 만족도 제고 및 체류 시간 증대
+- 운영 비용 절감 및 인력 운용 효율화
+- 전시 데이터 자산화를 통한 새로운 비즈니스 모델 창출
diff --git a/stitch_kintex_ai_system_architect/kintex_nexus/DESIGN.md b/stitch_kintex_ai_system_architect/kintex_nexus/DESIGN.md
new file mode 100644
index 0000000..aaa1144
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/kintex_nexus/DESIGN.md
@@ -0,0 +1,181 @@
+---
+name: Kintex Nexus
+colors:
+  surface: '#f8f9fa'
+  surface-dim: '#d9dadb'
+  surface-bright: '#f8f9fa'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f3f4f5'
+  surface-container: '#edeeef'
+  surface-container-high: '#e7e8e9'
+  surface-container-highest: '#e1e3e4'
+  on-surface: '#191c1d'
+  on-surface-variant: '#424751'
+  inverse-surface: '#2e3132'
+  inverse-on-surface: '#f0f1f2'
+  outline: '#727782'
+  outline-variant: '#c2c6d3'
+  surface-tint: '#115fac'
+  primary: '#00427d'
+  on-primary: '#ffffff'
+  primary-container: '#0059a6'
+  on-primary-container: '#b6d1ff'
+  inverse-primary: '#a6c8ff'
+  secondary: '#39608d'
+  on-secondary: '#ffffff'
+  secondary-container: '#a6ccff'
+  on-secondary-container: '#2e5682'
+  tertiary: '#8a0002'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#b60004'
+  on-tertiary-container: '#ffc1b8'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#d5e3ff'
+  primary-fixed-dim: '#a6c8ff'
+  on-primary-fixed: '#001c3b'
+  on-primary-fixed-variant: '#004786'
+  secondary-fixed: '#d2e4ff'
+  secondary-fixed-dim: '#a3c9fc'
+  on-secondary-fixed: '#001c37'
+  on-secondary-fixed-variant: '#1e4974'
+  tertiary-fixed: '#ffdad5'
+  tertiary-fixed-dim: '#ffb4a9'
+  on-tertiary-fixed: '#410000'
+  on-tertiary-fixed-variant: '#930002'
+  background: '#f8f9fa'
+  on-background: '#191c1d'
+  surface-variant: '#e1e3e4'
+  surface-border: '#E5E7EB'
+  status-active: '#10B981'
+  status-pending: '#F59E0B'
+  table-header: '#F1F5F9'
+typography:
+  headline-lg:
+    fontFamily: Hanken Grotesk
+    fontSize: 30px
+    fontWeight: '700'
+    lineHeight: 38px
+    letterSpacing: -0.02em
+  headline-lg-mobile:
+    fontFamily: Hanken Grotesk
+    fontSize: 24px
+    fontWeight: '700'
+    lineHeight: 32px
+  headline-md:
+    fontFamily: Hanken Grotesk
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+  body-lg:
+    fontFamily: Hanken Grotesk
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+  body-md:
+    fontFamily: Hanken Grotesk
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  body-sm:
+    fontFamily: Hanken Grotesk
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 18px
+  label-md:
+    fontFamily: Hanken Grotesk
+    fontSize: 12px
+    fontWeight: '600'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+  mono-data:
+    fontFamily: jetbrainsMono
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 18px
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  container-max: 1440px
+  margin-desktop: 32px
+  margin-mobile: 16px
+  gutter: 24px
+  stack-sm: 8px
+  stack-md: 16px
+  stack-lg: 24px
+---
+
+## Brand & Style
+
+The design system is engineered for the high-density requirements of exhibition management and administrative oversight. It targets professional operators and event organizers who require a high degree of "information scent" and clarity.
+
+The aesthetic follows a **Corporate / Modern** movement, prioritizing structural integrity and functional density over decorative flourishes. It utilizes a balanced combination of high-density data visualization and clear, hierarchical navigation. The UI evokes a sense of reliability and institutional authority, reflecting the physical scale of the KINTEX venue. The layout is systematic, utilizing a clean "dashboard-first" philosophy where every pixel serves a purpose in decision-making and logistics management.
+
+## Colors
+
+The palette is anchored by **Corporate Blue (#0059A6)**, representing the established brand identity and used for primary actions, navigation headers, and brand-critical elements. A **Secondary Blue (#6389B8)** acts as a supportive hue for data visualization and secondary interactive states, bridging the gap between brand identity and UI utility.
+
+**Tertiary Red (#E32219)** is reserved strictly for high-urgency alerts, error states, and critical "Delete" or "Cancel" actions to ensure it maintains its semantic impact. The neutral foundation relies on **Light Gray (#F8F9FA)** for background surfaces to reduce eye strain during long working sessions, with darker grays used for structural borders and high-contrast text.
+
+## Typography
+
+This design system uses **Hanken Grotesk** for its exceptional legibility in dense administrative interfaces. It provides a sharp, contemporary feel that aligns with the "Pretendard" aesthetic requested while offering superior geometric balance for international stakeholders.
+
+- **Headlines:** Use Bold weights for section titles to establish a strong visual anchor.
+- **Body:** Standard body text is set at 14px (md) to maximize information density without compromising readability.
+- **Data Sets:** For numerical values, ID strings, or technical logs within tables, the **JetBrains Mono** font (mono-data) is recommended to ensure clear distinction between characters and aligned columns.
+- **Labels:** Small, uppercase labels with increased letter spacing are used for table headers and category tags to differentiate them from interactive content.
+
+## Layout & Spacing
+
+The layout utilizes a **Fixed-Fluid Hybrid Grid**. The main sidebar navigation is fixed (240px), while the content area expands to a maximum of 1440px to ensure data tables don't become excessively wide and difficult to scan horizontally.
+
+A **base-8 spacing system** is strictly enforced to maintain rhythmic consistency.
+- **Desktop:** 12-column grid with 24px gutters.
+- **Tablet:** 8-column grid with 20px gutters.
+- **Mobile:** 4-column grid with 16px margins.
+
+Content should reflow into single-column stacks on mobile devices. For complex data tables, horizontal scrolling is the preferred pattern over hidden columns to ensure all administrative data remains accessible.
+
+## Elevation & Depth
+
+To maintain a "Professional & Functional" aesthetic, this design system avoids heavy shadows. Depth is primarily conveyed through **Tonal Layers** and **Low-Contrast Outlines**.
+
+- **Level 0 (Base):** Light Gray background (#F8F9FA).
+- **Level 1 (Cards/Containers):** White background with a 1px border (#E5E7EB). No shadow.
+- **Level 2 (Modals/Dropdowns):** White background with a subtle, tight ambient shadow (Blur 8px, Y 4px, Opacity 5%) to indicate temporary interaction layers.
+- **Interactive Elements:** Buttons and inputs use a flat design with a 1px solid stroke. Primary buttons use a solid fill to pop against the outlined secondary elements.
+
+## Shapes
+
+The design system employs a **Soft (0.25rem)** roundedness level. This subtle rounding softens the industrial nature of the dashboard while maintaining a professional, structured appearance. 
+
+- **Inputs and Buttons:** 4px (0.25rem) radius.
+- **Cards and Containers:** 8px (0.5rem) radius.
+- **Status Tags:** Fully rounded (pill) to clearly distinguish them from interactive buttons or input fields.
+
+## Components
+
+### Data Tables
+Tables are the heart of the system. Use a "Zebra Stripe" pattern (alternate rows in #F9FAFB) for long datasets. Headers must be "Sticky" during scroll and styled with a light gray background and `label-md` typography.
+
+### Analytics Charts
+Use a minimalist approach. Grid lines should be faint (#F3F4F6). Primary data series should use Corporate Blue (#0059A6), with secondary series in #6389B8 and #94A3B8. Avoid 3D effects.
+
+### Status Cards
+Exhibition status cards should feature a prominent "Current State" indicator (e.g., "Active," "Completed," "Scheduled") using semantic background tints and dark text for accessibility.
+
+### Buttons
+- **Primary:** Solid #0059A6 with white text.
+- **Secondary:** White background with #E5E7EB border and #374151 text.
+- **Destructive:** Solid #E32219 for critical admin actions.
+
+### Administrative Controls
+Toggle switches should be used for binary states (e.g., "Public Visibility"). Checkboxes are preferred for multi-select actions in tables. Input fields should have a distinct focus state using a 2px Corporate Blue border.
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/layout_comparison_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/layout_comparison_kintex_ai_system/code.html
new file mode 100644
index 0000000..f615df3
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/layout_comparison_kintex_ai_system/code.html
@@ -0,0 +1,329 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>AI 배치안 비교 - KINTEX AI</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Geist:wght@500;600&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-secondary-fixed-variant": "#4500d8",
+                        "on-primary-container": "#d2e3ff",
+                        "primary-fixed": "#d3e4ff",
+                        "surface-container-lowest": "#ffffff",
+                        "surface-variant": "#dbe2f9",
+                        "on-error-container": "#93000a",
+                        "on-surface": "#141b2c",
+                        "surface-bright": "#f9f9ff",
+                        "surface": "#f9f9ff",
+                        "inverse-surface": "#293041",
+                        "on-tertiary-fixed": "#002113",
+                        "inverse-primary": "#a2c9ff",
+                        "primary-fixed-dim": "#a2c9ff",
+                        "secondary-container": "#6d4aff",
+                        "on-primary-fixed-variant": "#004881",
+                        "on-primary-fixed": "#001c38",
+                        "outline": "#717782",
+                        "error-container": "#ffdad6",
+                        "on-tertiary": "#ffffff",
+                        "background": "#f9f9ff",
+                        "tertiary": "#00583b",
+                        "on-primary": "#ffffff",
+                        "on-error": "#ffffff",
+                        "secondary": "#5427e6",
+                        "on-surface-variant": "#414751",
+                        "on-secondary-fixed": "#1b0063",
+                        "on-secondary": "#ffffff",
+                        "outline-variant": "#c1c7d3",
+                        "surface-container-high": "#e0e8ff",
+                        "tertiary-container": "#00734e",
+                        "on-tertiary-fixed-variant": "#005236",
+                        "primary": "#004e8b",
+                        "secondary-fixed-dim": "#c9bfff",
+                        "surface-dim": "#d2daf0",
+                        "primary-container": "#0066b3",
+                        "on-tertiary-container": "#8ef7c3",
+                        "secondary-fixed": "#e5deff",
+                        "on-secondary-container": "#f3edff",
+                        "tertiary-fixed-dim": "#72daa9",
+                        "surface-container-highest": "#dbe2f9",
+                        "surface-tint": "#0060a9",
+                        "surface-container-low": "#f1f3ff",
+                        "inverse-on-surface": "#edf0ff",
+                        "tertiary-fixed": "#8ef7c4",
+                        "surface-container": "#e9edff",
+                        "error": "#ba1a1a",
+                        "on-background": "#141b2c"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "stack-md": "16px",
+                        "stack-lg": "24px",
+                        "container-padding": "24px",
+                        "gutter": "16px",
+                        "stack-sm": "8px",
+                        "base": "4px"
+                    },
+                    "fontFamily": {
+                        "title-sm": ["Inter"],
+                        "display-lg-mobile": ["Inter"],
+                        "display-lg": ["Inter"],
+                        "headline-md": ["Inter"],
+                        "body-base": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "label-md": ["Geist"],
+                        "label-xs": ["Geist"]
+                    },
+                    "fontSize": {
+                        "title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
+                        "display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
+                        "body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
+                        "label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }]
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-background text-on-background font-body-base min-h-screen flex selection:bg-primary selection:text-on-primary">
+
+<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
+<div class="px-container-padding mb-stack-lg">
+<span class="text-headline-md font-headline-md font-bold text-primary block">KINTEX AI</span>
+<span class="text-label-xs font-label-xs text-on-surface-variant uppercase tracking-wider block mt-1">Exhibition Manager</span>
+</div>
+<div class="flex-1 overflow-y-auto flex flex-col gap-1 px-3">
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span aria-hidden="true" class="material-symbols-outlined text-[20px]">dashboard</span>
+                Dashboard
+            </a>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-primary font-bold border-r-4 border-primary bg-primary-container/10 text-label-md font-label-md" href="#">
+<span aria-hidden="true" class="material-symbols-outlined text-[20px] text-primary">architecture</span>
+                Floor Plan Studio
+            </a>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span aria-hidden="true" class="material-symbols-outlined text-[20px]">groups</span>
+                Exhibitor Management
+            </a>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span aria-hidden="true" class="material-symbols-outlined text-[20px]">assignment</span>
+                Documents
+            </a>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span aria-hidden="true" class="material-symbols-outlined text-[20px]">payments</span>
+                Settlement
+            </a>
+</div>
+<div class="mt-auto flex flex-col gap-1 px-3 pt-4 border-t border-outline-variant/30">
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span aria-hidden="true" class="material-symbols-outlined text-[20px]">settings</span>
+                Settings
+            </a>
+<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
+<span aria-hidden="true" class="material-symbols-outlined text-[20px]">help</span>
+                Support
+            </a>
+</div>
+</nav>
+
+<div class="ml-60 flex-1 flex flex-col min-h-screen">
+
+<header class="docked full-width top-0 sticky z-40 bg-surface flex justify-between items-center w-full px-container-padding h-16 border-b border-outline-variant">
+<div class="flex items-center gap-6">
+<span class="text-title-sm font-title-sm font-bold text-on-surface">Exhibition Studio</span>
+<nav class="hidden md:flex gap-4">
+<a class="text-primary border-b-2 border-primary pb-base text-label-md font-label-md" href="#">Projects</a>
+<a class="text-on-surface-variant hover:text-primary transition-colors text-label-md font-label-md" href="#">Analytics</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-2">
+<button class="w-8 h-8 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-container-high transition-colors">
+<span class="material-symbols-outlined text-[20px]">notifications</span>
+</button>
+<button class="w-8 h-8 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-container-high transition-colors">
+<span class="material-symbols-outlined text-[20px]">help</span>
+</button>
+</div>
+<div class="h-4 w-px bg-outline-variant mx-1"></div>
+<span class="bg-surface-container-high text-on-surface px-2 py-1 rounded text-label-xs font-label-xs font-bold border border-outline-variant">D-31</span>
+<button class="bg-primary text-on-primary px-4 py-2 rounded hover:bg-primary-container transition-colors text-label-md font-label-md shadow-sm">
+                    Publish Layout
+                </button>
+</div>
+</header>
+
+<main class="flex-1 p-container-padding bg-background overflow-x-auto">
+<div class="max-w-[1200px] mx-auto flex flex-col gap-stack-lg">
+
+<div class="flex items-end justify-between border-b border-outline-variant pb-4">
+<div>
+<h1 class="text-display-lg font-display-lg text-on-surface mb-2">AI 배치안 비교</h1>
+<p class="text-body-base font-body-base text-on-surface-variant flex items-center gap-2">
+<span class="material-symbols-outlined text-[16px]">info</span>
+                            조건: 목표 510부스 · 프리미엄 15% · 무대 1개소
+                        </p>
+</div>
+<button class="border border-primary text-primary px-4 py-2 rounded hover:bg-primary/5 transition-colors text-label-md font-label-md bg-surface">
+                        조건 수정
+                    </button>
+</div>
+
+<div class="grid grid-cols-3 gap-gutter">
+
+<label class="group relative bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden cursor-pointer hover:border-primary transition-all duration-200">
+<input class="peer sr-only" name="layout_option" type="radio" value="A"/>
+<div class="absolute inset-0 border-2 border-transparent peer-checked:border-primary rounded-xl pointer-events-none z-10 transition-colors"></div>
+<div class="absolute top-4 right-4 z-20 opacity-0 peer-checked:opacity-100 transition-opacity">
+<span class="material-symbols-outlined text-primary" data-weight="fill">check_circle</span>
+</div>
+
+<div class="relative h-48 w-full bg-surface-container-high overflow-hidden border-b border-outline-variant">
+<div class="absolute top-2 left-2 z-10 bg-secondary-container text-on-secondary border border-secondary-container/50 px-2 py-1 rounded text-label-xs font-label-xs flex items-center gap-1 shadow-sm">
+<span class="material-symbols-outlined text-[14px]">auto_awesome</span> AI 생성
+                            </div>
+<div class="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none z-0 transform -rotate-12">
+<span class="text-headline-md font-headline-md text-on-surface-variant tracking-widest uppercase">AI 생성 예상 이미지</span>
+</div>
+<img alt="AI generated isometric rendering of exhibition hall layout A" class="w-full h-full object-cover mix-blend-multiply opacity-80 group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida/AP1WRLv4g1wEc50g6SV874dKYhY3pekuOO8DpFUuNZ11z4Q9S02vd7fQvZ9QsCAvdeYFBXOYbahll5cJgd62hawt4xdYf0e8xkbeVizuekpfrV9gYnvxdbuMzdxHNS3Fezbi-jMX1GlgJemL6ifKvATHzgW0NdON_MkV1Y95qXcjt5RTHo07vmXj6OXmgL_ltfpfRYzAfGuClIQDY612hRpS_RVRkeLDV0RFHgjGIR3Y_xNhhQmNt2StB4C7Rw"/>
+</div>
+<div class="p-4 flex flex-col gap-3">
+<h3 class="text-title-sm font-title-sm text-on-surface flex items-center justify-between">
+                                배치안 A
+                            </h3>
+<div class="flex flex-col gap-2 text-body-sm font-body-sm text-on-surface-variant">
+<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
+<span>총 부스</span>
+<span class="font-bold text-on-surface">512개</span>
+</div>
+<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
+<span>판매면적</span>
+<span class="font-bold text-on-surface">4,450㎡</span>
+</div>
+<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
+<span>최소 통로폭</span>
+<span class="font-bold text-on-surface">3.2m</span>
+</div>
+<div class="flex justify-between items-center py-1">
+<span>위반사항</span>
+<span class="text-tertiary-container font-bold flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">check</span> 0건</span>
+</div>
+</div>
+</div>
+</label>
+
+<label class="group relative bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden cursor-pointer hover:border-primary transition-all duration-200">
+<input checked="" class="peer sr-only" name="layout_option" type="radio" value="B"/>
+<div class="absolute inset-0 border-2 border-transparent peer-checked:border-primary rounded-xl pointer-events-none z-10 transition-colors bg-primary/5"></div>
+<div class="absolute top-4 right-4 z-20 opacity-0 peer-checked:opacity-100 transition-opacity">
+<span class="material-symbols-outlined text-primary text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
+</div>
+
+<div class="relative h-48 w-full bg-surface-container-high overflow-hidden border-b border-outline-variant">
+<div class="absolute top-2 left-2 z-10 bg-secondary-container text-on-secondary border border-secondary-container/50 px-2 py-1 rounded text-label-xs font-label-xs flex items-center gap-1 shadow-sm">
+<span class="material-symbols-outlined text-[14px]">auto_awesome</span> AI 생성
+                            </div>
+<div class="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none z-0 transform -rotate-12">
+<span class="text-headline-md font-headline-md text-on-surface-variant tracking-widest uppercase">AI 생성 예상 이미지</span>
+</div>
+
+<div class="w-full h-full bg-[linear-gradient(45deg,transparent_25%,rgba(0,102,179,0.1)_50%,transparent_75%,transparent_100%)] bg-[length:20px_20px]">
+<img alt="AI generated isometric rendering of exhibition hall layout B" class="w-full h-full object-cover mix-blend-overlay opacity-90 group-hover:scale-105 transition-transform duration-500 hue-rotate-15" src="https://lh3.googleusercontent.com/aida/AP1WRLv4g1wEc50g6SV874dKYhY3pekuOO8DpFUuNZ11z4Q9S02vd7fQvZ9QsCAvdeYFBXOYbahll5cJgd62hawt4xdYf0e8xkbeVizuekpfrV9gYnvxdbuMzdxHNS3Fezbi-jMX1GlgJemL6ifKvATHzgW0NdON_MkV1Y95qXcjt5RTHo07vmXj6OXmgL_ltfpfRYzAfGuClIQDY612hRpS_RVRkeLDV0RFHgjGIR3Y_xNhhQmNt2StB4C7Rw"/>
+</div>
+</div>
+<div class="p-4 flex flex-col gap-3">
+<div class="flex items-center gap-2">
+<div class="w-1 h-4 bg-secondary-container rounded-full"></div>
+<h3 class="text-title-sm font-title-sm text-on-surface">배치안 B</h3>
+<span class="ml-auto bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded text-[10px] font-bold">추천</span>
+</div>
+<div class="flex flex-col gap-2 text-body-sm font-body-sm text-on-surface-variant">
+<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
+<span>총 부스</span>
+<span class="font-bold text-on-surface">510개</span>
+</div>
+<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
+<span>판매면적</span>
+<span class="font-bold text-on-surface">4,420㎡</span>
+</div>
+<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
+<span>최소 통로폭</span>
+<span class="font-bold text-on-surface">3.5m</span>
+</div>
+<div class="flex justify-between items-center py-1">
+<span>위반사항</span>
+<span class="text-tertiary-container font-bold flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">check</span> 0건</span>
+</div>
+</div>
+</div>
+</label>
+
+<label class="group relative bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden cursor-pointer hover:border-primary transition-all duration-200">
+<input class="peer sr-only" name="layout_option" type="radio" value="C"/>
+<div class="absolute inset-0 border-2 border-transparent peer-checked:border-primary rounded-xl pointer-events-none z-10 transition-colors"></div>
+<div class="absolute top-4 right-4 z-20 opacity-0 peer-checked:opacity-100 transition-opacity">
+<span class="material-symbols-outlined text-primary" data-weight="fill">check_circle</span>
+</div>
+
+<div class="relative h-48 w-full bg-surface-container-high overflow-hidden border-b border-outline-variant">
+<div class="absolute top-2 left-2 z-10 bg-secondary-container text-on-secondary border border-secondary-container/50 px-2 py-1 rounded text-label-xs font-label-xs flex items-center gap-1 shadow-sm">
+<span class="material-symbols-outlined text-[14px]">auto_awesome</span> AI 생성
+                            </div>
+<div class="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none z-0 transform -rotate-12">
+<span class="text-headline-md font-headline-md text-on-surface-variant tracking-widest uppercase">AI 생성 예상 이미지</span>
+</div>
+<img alt="AI generated isometric rendering of exhibition hall layout C" class="w-full h-full object-cover mix-blend-luminosity opacity-70 group-hover:scale-105 transition-transform duration-500 sepia-[.3]" src="https://lh3.googleusercontent.com/aida/AP1WRLv4g1wEc50g6SV874dKYhY3pekuOO8DpFUuNZ11z4Q9S02vd7fQvZ9QsCAvdeYFBXOYbahll5cJgd62hawt4xdYf0e8xkbeVizuekpfrV9gYnvxdbuMzdxHNS3Fezbi-jMX1GlgJemL6ifKvATHzgW0NdON_MkV1Y95qXcjt5RTHo07vmXj6OXmgL_ltfpfRYzAfGuClIQDY612hRpS_RVRkeLDV0RFHgjGIR3Y_xNhhQmNt2StB4C7Rw"/>
+</div>
+<div class="p-4 flex flex-col gap-3">
+<div class="flex items-center gap-2">
+<div class="w-1 h-4 bg-error rounded-full"></div>
+<h3 class="text-title-sm font-title-sm text-on-surface">배치안 C</h3>
+</div>
+<div class="flex flex-col gap-2 text-body-sm font-body-sm text-on-surface-variant">
+<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
+<span>총 부스</span>
+<span class="font-bold text-on-surface">525개</span>
+</div>
+<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
+<span>판매면적</span>
+<span class="font-bold text-on-surface">4,550㎡</span>
+</div>
+<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
+<span>최소 통로폭</span>
+<span class="font-bold text-error">2.8m</span>
+</div>
+<div class="flex justify-between items-center py-1">
+<span>위반사항</span>
+<span class="text-error font-bold flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">warning</span> 2건</span>
+</div>
+</div>
+</div>
+</label>
+</div>
+
+<div class="flex justify-end pt-4 border-t border-outline-variant mt-4">
+<button class="bg-primary text-on-primary px-6 py-3 rounded-lg hover:bg-primary-container transition-colors text-label-md font-label-md shadow-sm flex items-center gap-2">
+                        이 안으로 편집 시작
+                        <span class="material-symbols-outlined text-[18px]">arrow_forward</span>
+</button>
+</div>
+</div>
+</main>
+</div>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/login_workspace_selection_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/login_workspace_selection_kintex_ai_system/code.html
new file mode 100644
index 0000000..4919eee
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/login_workspace_selection_kintex_ai_system/code.html
@@ -0,0 +1,451 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>KINTEX AI 전시관리 - 로그인</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "on-secondary-fixed-variant": "#4500d8",
+                    "on-primary-container": "#d2e3ff",
+                    "primary-fixed": "#d3e4ff",
+                    "surface-container-lowest": "#ffffff",
+                    "surface-variant": "#dbe2f9",
+                    "on-error-container": "#93000a",
+                    "on-surface": "#141b2c",
+                    "surface-bright": "#f9f9ff",
+                    "surface": "#f9f9ff",
+                    "inverse-surface": "#293041",
+                    "on-tertiary-fixed": "#002113",
+                    "inverse-primary": "#a2c9ff",
+                    "primary-fixed-dim": "#a2c9ff",
+                    "secondary-container": "#6d4aff",
+                    "on-primary-fixed-variant": "#004881",
+                    "on-primary-fixed": "#001c38",
+                    "outline": "#717782",
+                    "error-container": "#ffdad6",
+                    "on-tertiary": "#ffffff",
+                    "background": "#f9f9ff",
+                    "tertiary": "#00583b",
+                    "on-primary": "#ffffff",
+                    "on-error": "#ffffff",
+                    "secondary": "#5427e6",
+                    "on-surface-variant": "#414751",
+                    "on-secondary-fixed": "#1b0063",
+                    "on-secondary": "#ffffff",
+                    "outline-variant": "#c1c7d3",
+                    "surface-container-high": "#e0e8ff",
+                    "tertiary-container": "#00734e",
+                    "on-tertiary-fixed-variant": "#005236",
+                    "primary": "#004e8b",
+                    "secondary-fixed-dim": "#c9bfff",
+                    "surface-dim": "#d2daf0",
+                    "primary-container": "#0066b3",
+                    "on-tertiary-container": "#8ef7c3",
+                    "secondary-fixed": "#e5deff",
+                    "on-secondary-container": "#f3edff",
+                    "tertiary-fixed-dim": "#72daa9",
+                    "surface-container-highest": "#dbe2f9",
+                    "surface-tint": "#0060a9",
+                    "surface-container-low": "#f1f3ff",
+                    "inverse-on-surface": "#edf0ff",
+                    "tertiary-fixed": "#8ef7c4",
+                    "surface-container": "#e9edff",
+                    "error": "#ba1a1a",
+                    "on-background": "#141b2c"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.125rem",
+                    "lg": "0.25rem",
+                    "xl": "0.5rem",
+                    "full": "0.75rem"
+            },
+            "spacing": {
+                    "stack-md": "16px",
+                    "stack-lg": "24px",
+                    "container-padding": "24px",
+                    "gutter": "16px",
+                    "stack-sm": "8px",
+                    "base": "4px"
+            },
+            "fontFamily": {
+                    "title-sm": [
+                            "Inter"
+                    ],
+                    "display-lg-mobile": [
+                            "Inter"
+                    ],
+                    "display-lg": [
+                            "Inter"
+                    ],
+                    "headline-md": [
+                            "Inter"
+                    ],
+                    "body-base": [
+                            "Inter"
+                    ],
+                    "body-sm": [
+                            "Inter"
+                    ],
+                    "label-md": [
+                            "Geist"
+                    ],
+                    "label-xs": [
+                            "Geist"
+                    ]
+            },
+            "fontSize": {
+                    "title-sm": [
+                            "18px",
+                            {
+                                    "lineHeight": "28px",
+                                    "fontWeight": "600"
+                            }
+                    ],
+                    "display-lg-mobile": [
+                            "28px",
+                            {
+                                    "lineHeight": "36px",
+                                    "fontWeight": "700"
+                            }
+                    ],
+                    "display-lg": [
+                            "36px",
+                            {
+                                    "lineHeight": "44px",
+                                    "letterSpacing": "-0.02em",
+                                    "fontWeight": "700"
+                            }
+                    ],
+                    "headline-md": [
+                            "24px",
+                            {
+                                    "lineHeight": "32px",
+                                    "fontWeight": "600"
+                            }
+                    ],
+                    "body-base": [
+                            "14px",
+                            {
+                                    "lineHeight": "20px",
+                                    "fontWeight": "400"
+                            }
+                    ],
+                    "body-sm": [
+                            "13px",
+                            {
+                                    "lineHeight": "18px",
+                                    "fontWeight": "400"
+                            }
+                    ],
+                    "label-md": [
+                            "12px",
+                            {
+                                    "lineHeight": "16px",
+                                    "letterSpacing": "0.02em",
+                                    "fontWeight": "600"
+                            }
+                    ],
+                    "label-xs": [
+                            "11px",
+                            {
+                                    "lineHeight": "14px",
+                                    "fontWeight": "500"
+                            }
+                    ]
+            }
+    },
+        },
+      }
+    </script>
+<style>
+        @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+        body {
+            font-family: 'Pretendard', sans-serif;
+        }
+        .bg-overlay-gradient {
+            background: linear-gradient(to right, rgba(0, 76, 134, 0.9) 0%, rgba(0, 76, 134, 0.7) 100%);
+        }
+        /* Hide success screen initially */
+        #success-screen {
+            display: none;
+        }
+    </style>
+</head>
+<body class="bg-background min-h-screen text-on-surface antialiased overflow-hidden">
+
+<div class="flex min-h-screen" id="login-screen">
+
+<div class="hidden lg:flex lg:w-[55%] relative flex-col justify-end p-12 lg:p-24 bg-surface-dim" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLt7Owqk04bQHpDRgW-TOypxVfJaLrvGQkPASyNEHGKREzRPLbA3WCQeI_EPz-feK-fDR17TWVMPmQjtYDnTjXIAw_a9ctvRCW-GENeZYnEOC7qPsOdbhFyx-xS4VIDsARlepBMwyh-2lbIf85_kbEg-w0Z_r189I59Hh6nF0V5mCvUHWsQQVYY5s2jSHwa5K9U3OKeEMBBV-xB1jWziZ_5pGqizp5S5_FdYxsFmwdCD1dVUUJNkc8Hqpu8'); background-size: cover; background-position: center;">
+<div class="absolute inset-0 bg-overlay-gradient z-0"></div>
+<div class="relative z-10 flex flex-col gap-6 max-w-2xl">
+
+<div class="inline-flex items-center gap-2 self-start rounded-full border border-secondary-container bg-surface-container-lowest/10 px-4 py-2 backdrop-blur-sm">
+<span class="material-symbols-outlined text-secondary-fixed-dim" style="font-variation-settings: 'FILL' 1;">spark</span>
+<span class="text-secondary-fixed-dim text-label-md font-label-md">AI 생성 예상 이미지</span>
+</div>
+<h1 class="text-on-primary text-display-lg font-display-lg leading-tight tracking-tight">
+                    신청서를 내는 순간,<br/>
+                    시공 후 사진을 먼저 봅니다.
+                </h1>
+<p class="text-on-primary-container text-title-sm font-title-sm opacity-80 mt-4">
+                    KINTEX AI 전시관리 솔루션으로 더 빠르고 정확하게 공간을 기획하세요.
+                </p>
+</div>
+</div>
+
+<div class="flex-1 w-full lg:w-[45%] flex flex-col justify-center items-center p-8 bg-surface-container-lowest relative z-10 shadow-[-10px_0_30px_rgba(0,0,0,0.05)]">
+<div class="w-full max-w-md flex flex-col gap-8">
+
+<div class="flex justify-center mb-8">
+<img alt="KINTEX Logo" class="h-10 w-auto" src="https://lh3.googleusercontent.com/aida/AP1WRLuPIxmrE2KEEIZK1TQvP8jxtO3MkEPMwc1tVCXQeurK2ywZzqrmszTWhS-MOk7l0NlBT-fBPr7AhpqDh_Us84e3UMXjCij089BjFJFtd8hUFB4nCRvA34TPEVBBTUOI57NDo3tHcwfds6dQIDxogGQ3h7AjQhNuygBIiOTVTVUBEtlzz7vP_MViWoBmnjyisUQcYXxLs8rK6MRbhhGH4FpRm8pylR9CssnJFPS2I6dvpRX4NSTCyvpubg"/>
+</div>
+<div class="text-center mb-2">
+<h2 class="text-headline-md font-headline-md text-on-surface">로그인</h2>
+<p class="text-body-sm font-body-sm text-on-surface-variant mt-2">KINTEX 전시 관리 시스템에 오신 것을 환영합니다.</p>
+</div>
+<form class="flex flex-col gap-6" id="login-form">
+<div class="flex flex-col gap-2">
+<label class="text-label-md font-label-md text-on-surface" for="email">이메일</label>
+<input class="w-full h-12 px-4 rounded border border-outline-variant bg-surface-container-lowest text-body-base font-body-base focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 transition-all outline-none" id="email" placeholder="name@company.com" required="" type="email"/>
+</div>
+<div class="flex flex-col gap-2">
+<div class="flex justify-between items-center">
+<label class="text-label-md font-label-md text-on-surface" for="password">비밀번호</label>
+</div>
+<input class="w-full h-12 px-4 rounded border border-outline-variant bg-surface-container-lowest text-body-base font-body-base focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 transition-all outline-none" id="password" placeholder="••••••••" required="" type="password"/>
+</div>
+<div class="flex items-center justify-between mt-[-8px]">
+<label class="flex items-center gap-2 cursor-pointer">
+<input class="w-4 h-4 rounded border-outline-variant text-primary-container focus:ring-primary-container cursor-pointer" type="checkbox"/>
+<span class="text-body-sm font-body-sm text-on-surface-variant">이메일 기억하기</span>
+</label>
+<a class="text-body-sm font-body-sm text-primary-container hover:text-primary transition-colors" href="#">비밀번호 찾기</a>
+</div>
+<button class="w-full h-12 rounded bg-primary-container hover:bg-surface-tint text-on-primary text-title-sm font-title-sm flex items-center justify-center transition-colors" type="submit">
+                        로그인
+                    </button>
+</form>
+<div class="flex items-center gap-4 my-2">
+<div class="h-px bg-outline-variant flex-1"></div>
+<span class="text-label-md font-label-md text-outline">또는</span>
+<div class="h-px bg-outline-variant flex-1"></div>
+</div>
+<button class="w-full h-12 rounded border border-outline-variant bg-surface-container-lowest hover:bg-surface-container-low text-on-surface text-title-sm font-title-sm flex items-center justify-center gap-2 transition-colors" type="button">
+<span class="material-symbols-outlined text-[20px]">badge</span>
+                    킨텍스 내부 계정으로 로그인
+                </button>
+<div class="text-center mt-4">
+<a class="text-body-sm font-body-sm text-primary-container hover:text-primary transition-colors flex items-center justify-center gap-1" href="#">
+                        초대 코드로 참여하기
+                        <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
+</a>
+</div>
+</div>
+<div class="absolute bottom-8 text-center w-full max-w-md">
+<p class="text-label-xs font-label-xs text-outline">© 2024 KINTEX. All rights reserved.</p>
+</div>
+</div>
+</div>
+
+<div class="min-h-screen bg-background flex" id="success-screen">
+
+<nav class="bg-surface-container-low dark:bg-inverse-surface fixed left-0 top-0 h-screen w-60 border-r border-outline-variant dark:border-outline flex flex-col h-full py-container-padding z-50">
+
+<div class="px-6 mb-8 flex items-center gap-3">
+<div class="w-8 h-8 bg-primary-container rounded flex items-center justify-center">
+<span class="text-on-primary font-bold text-lg">K</span>
+</div>
+<div>
+<h2 class="text-headline-md font-headline-md font-bold text-primary dark:text-primary-fixed">KINTEX AI</h2>
+<p class="text-label-xs font-label-xs text-on-surface-variant">Exhibition Manager</p>
+</div>
+</div>
+
+<div class="flex flex-col gap-1 flex-1 px-4">
+<a class="flex items-center gap-3 px-4 py-3 rounded text-primary dark:text-primary-fixed-dim font-bold border-r-4 border-primary dark:border-primary-fixed-dim bg-primary-container/10" href="#">
+<span class="material-symbols-outlined">dashboard</span>
+<span class="text-label-md font-label-md">Dashboard</span>
+</a>
+<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
+<span class="material-symbols-outlined">architecture</span>
+<span class="text-label-md font-label-md">Floor Plan Studio</span>
+</a>
+<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
+<span class="material-symbols-outlined">groups</span>
+<span class="text-label-md font-label-md">Exhibitor Management</span>
+</a>
+<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
+<span class="material-symbols-outlined">assignment</span>
+<span class="text-label-md font-label-md">Documents</span>
+</a>
+<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
+<span class="material-symbols-outlined">payments</span>
+<span class="text-label-md font-label-md">Settlement</span>
+</a>
+</div>
+
+<div class="flex flex-col gap-1 px-4 mt-auto">
+<a class="flex items-center gap-3 px-4 py-2 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
+<span class="material-symbols-outlined">settings</span>
+<span class="text-label-md font-label-md">Settings</span>
+</a>
+<a class="flex items-center gap-3 px-4 py-2 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
+<span class="material-symbols-outlined">help</span>
+<span class="text-label-md font-label-md">Support</span>
+</a>
+</div>
+</nav>
+
+<div class="flex-1 ml-60 flex flex-col min-h-screen">
+
+<header class="bg-surface dark:bg-surface-dim docked full-width top-0 sticky z-40 border-b border-outline-variant dark:border-outline flex justify-between items-center w-full px-container-padding h-16">
+
+<div class="flex items-center gap-8">
+<span class="text-title-sm font-title-sm font-bold text-on-surface dark:text-inverse-on-surface hidden">Exhibition Studio</span>
+<div class="flex gap-6 h-16">
+<a class="flex items-center h-full text-primary dark:text-primary-fixed-dim border-b-2 border-primary dark:border-primary-fixed-dim pb-base mt-base text-label-md font-label-md" href="#">Projects</a>
+<a class="flex items-center h-full text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors text-label-md font-label-md" href="#">Analytics</a>
+</div>
+</div>
+
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-2 mr-4">
+<span class="bg-error text-on-error px-2 py-1 rounded text-label-xs font-label-xs font-bold shadow-sm">D-31</span>
+<button class="bg-primary-container text-on-primary px-4 py-2 rounded text-label-md font-label-md hover:scale-105 duration-200 shadow-sm transition-transform">Publish Layout</button>
+</div>
+<div class="flex gap-2 text-on-surface-variant">
+<button class="p-2 rounded-full hover:bg-surface-container-high transition-colors"><span class="material-symbols-outlined">notifications</span></button>
+<button class="p-2 rounded-full hover:bg-surface-container-high transition-colors"><span class="material-symbols-outlined">help</span></button>
+</div>
+<div class="w-8 h-8 rounded-full bg-surface-container-highest border border-outline-variant overflow-hidden ml-2 cursor-pointer">
+<img alt="User Profile" class="w-full h-full object-cover" data-alt="A professional headshot of an Asian male executive wearing a dark navy suit and white shirt, smiling slightly against a neutral gray background. Soft studio lighting. High resolution, corporate aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCam5tKAOhtYTGHjfW8PoNadzZ1iThlBzibz3nAzDmAAYCLYnJuJbPVgBm9xACwgUGOmL5aIzlWmqI_pYcVXCoDZ3NUk5IDCOvefxnExEtd9i43OtzVsZ2CfAxKL2sWpW6DKXsBLpkC9E48igsuw2NaKPjcQCtaIht_3YkDGjpXxifymwkmT6Ltvx2402EFYcg6ZI_DOkKRUWmHQB7PVTe6rf8ClEBOazalQsj76WBmZie2jBdUppy7"/>
+</div>
+</div>
+</header>
+
+<main class="flex-1 p-8 lg:p-12 overflow-y-auto">
+<div class="max-w-7xl mx-auto flex flex-col gap-8">
+<div class="flex justify-between items-end">
+<div>
+<h1 class="text-display-lg font-display-lg text-on-surface mb-2">My Projects</h1>
+<p class="text-body-base font-body-base text-on-surface-variant">Manage your upcoming exhibitions and floor plans.</p>
+</div>
+<button class="bg-surface-container-lowest border border-outline-variant px-4 py-2 rounded text-label-md font-label-md text-on-surface hover:bg-surface-container-low transition-colors flex items-center gap-2">
+<span class="material-symbols-outlined text-[18px]">filter_list</span>
+                            Filter
+                        </button>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+
+<div class="group bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col hover:shadow-lg transition-all duration-300 relative">
+<div class="absolute left-0 top-0 bottom-0 w-1 bg-secondary-container z-10"></div>
+<div class="h-40 bg-surface-container-high relative overflow-hidden">
+<div class="absolute inset-0 bg-cover bg-center group-hover:scale-105 transition-transform duration-500" data-alt="A futuristic, high-tech isometric 3D render of an exhibition hall floor plan focused on smart factory technology. The layout features robotic arms, automated assembly lines, and glowing blue and purple data streams connecting booths. High contrast, clean modern industrial aesthetic." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCdQmPmQS7CQd7oiETmqAIOav2PV7HV1OatN4BOQ3qI0GxX6xRxYcSQ9_UvJt4DR_EK3JvDFDJWfOJAj6b1_tL029oZW37ZXTbSLhKhd470r-aBdvC8E_wZwYOkbXRTyiFdlUq-NdQTEY6LAzKPw9HrgwRZSSBUHwCNIaohTxAWT60fKE9A38hRaa6QX_NmNswuWKzPgySFpTnD25rXFsvBg4Ms5M4veiAZFrZttKXqEQDKg4S2iC0X')"></div>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+<div class="absolute bottom-4 left-4 right-4 flex justify-between items-end">
+<span class="bg-error text-on-error px-2 py-1 rounded text-label-xs font-label-xs font-bold shadow-sm">D-31</span>
+<div class="inline-flex items-center gap-1 bg-secondary-container/90 text-on-primary px-2 py-1 rounded backdrop-blur-sm">
+<span class="material-symbols-outlined text-[14px]">spark</span>
+<span class="text-label-xs font-label-xs">AI Optimized</span>
+</div>
+</div>
+</div>
+<div class="p-6 flex flex-col gap-4 flex-1">
+<div>
+<h3 class="text-title-sm font-title-sm text-on-surface mb-1">2026 스마트팩토리 코리아</h3>
+<p class="text-label-xs font-label-xs text-on-surface-variant flex items-center gap-1">
+<span class="material-symbols-outlined text-[14px]">calendar_today</span>
+                                        2026.10.15 - 10.18
+                                    </p>
+</div>
+<div class="flex justify-between items-center text-body-sm font-body-sm text-on-surface-variant mt-auto">
+<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">storefront</span> 142 Booths</span>
+<span class="flex items-center gap-1 text-primary-container font-semibold">Open Studio <span class="material-symbols-outlined text-[16px]">arrow_forward</span></span>
+</div>
+</div>
+</div>
+
+<div class="group bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col hover:shadow-lg transition-all duration-300">
+<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary-container z-10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+<div class="h-40 bg-surface-container-high relative overflow-hidden">
+<div class="absolute inset-0 bg-cover bg-center group-hover:scale-105 transition-transform duration-500" data-alt="A clean, minimalist isometric 3D render of a software and AI exhibition hall. Features sleek white booths with glowing cyan screens, networking lounges, and scattered digital avatars. Bright, light-mode corporate tech aesthetic with soft shadows." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAHyqkR0PadSsl5X2XMC678qAb9cTpBSh9fd7EfLkOB6MtpMoqgba4DdcXYRfU9TnQd1GHkwOKa0YvTcMq7THJIF3LWVhsZ6cCvTcKhB0FQebQrjopDR0s_BbOINaq_kmDNdJepJHJMz3EQdt_yvelhErd1lZu2kgNAg48SkpjzO-LW_8K3us6dMNCz9A7NYmDJFzRlE8cN3rPWnn5Sd3ipTMKT3hGBLw927Dn1HgPdvfxXQo8geNwN')"></div>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+<div class="absolute bottom-4 left-4 right-4 flex justify-between items-end">
+<span class="bg-surface-dim text-on-surface px-2 py-1 rounded text-label-xs font-label-xs font-bold">D-120</span>
+<div class="inline-flex items-center gap-1 bg-primary-container/90 text-on-primary px-2 py-1 rounded backdrop-blur-sm">
+<span class="text-label-xs font-label-xs">In Review</span>
+</div>
+</div>
+</div>
+<div class="p-6 flex flex-col gap-4 flex-1">
+<div>
+<h3 class="text-title-sm font-title-sm text-on-surface mb-1">Global AI Expo 2026</h3>
+<p class="text-label-xs font-label-xs text-on-surface-variant flex items-center gap-1">
+<span class="material-symbols-outlined text-[14px]">calendar_today</span>
+                                        2026.12.01 - 12.04
+                                    </p>
+</div>
+<div class="flex justify-between items-center text-body-sm font-body-sm text-on-surface-variant mt-auto">
+<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">storefront</span> 86 Booths</span>
+<span class="flex items-center gap-1 group-hover:text-primary-container transition-colors font-semibold">Open Studio <span class="material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-100 transition-opacity">arrow_forward</span></span>
+</div>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border-2 border-dashed border-outline-variant rounded-xl flex flex-col items-center justify-center p-8 hover:border-primary-container hover:bg-surface-container-low transition-all duration-300 cursor-pointer min-h-[280px]">
+<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center mb-4 text-on-surface-variant">
+<span class="material-symbols-outlined text-[24px]">add</span>
+</div>
+<h3 class="text-title-sm font-title-sm text-on-surface mb-1">Create New Project</h3>
+<p class="text-body-sm font-body-sm text-on-surface-variant text-center max-w-[200px]">Start a new exhibition floor plan with AI assistance.</p>
+</div>
+</div>
+</div>
+</main>
+</div>
+</div>
+<script>
+        // Simple script to handle login transition for demonstration
+        document.getElementById('login-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            // Fade out login screen
+            const loginScreen = document.getElementById('login-screen');
+            loginScreen.style.opacity = '0';
+            loginScreen.style.transition = 'opacity 0.5s ease';
+            
+            setTimeout(() => {
+                loginScreen.style.display = 'none';
+                
+                // Show success screen (dashboard)
+                const successScreen = document.getElementById('success-screen');
+                successScreen.style.display = 'flex';
+                
+                // Trigger reflow
+                void successScreen.offsetWidth;
+                
+                successScreen.style.opacity = '0';
+                successScreen.style.animation = 'fadeIn 0.5s ease forwards';
+            }, 500);
+        });
+
+        // Add CSS keyframes for fade in
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes fadeIn {
+                from { opacity: 0; }
+                to { opacity: 1; }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/manager_approval_queue_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/manager_approval_queue_kintex_ai_system/code.html
new file mode 100644
index 0000000..4086d38
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/manager_approval_queue_kintex_ai_system/code.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>KINTEX AI - Approval Queue</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Geist:wght@500;600&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-secondary-fixed-variant": "#4500d8",
+                        "on-primary-container": "#d2e3ff",
+                        "primary-fixed": "#d3e4ff",
+                        "surface-container-lowest": "#ffffff",
+                        "surface-variant": "#dbe2f9",
+                        "on-error-container": "#93000a",
+                        "on-surface": "#141b2c",
+                        "surface-bright": "#f9f9ff",
+                        "surface": "#f9f9ff",
+                        "inverse-surface": "#293041",
+                        "on-tertiary-fixed": "#002113",
+                        "inverse-primary": "#a2c9ff",
+                        "primary-fixed-dim": "#a2c9ff",
+                        "secondary-container": "#6d4aff",
+                        "on-primary-fixed-variant": "#004881",
+                        "on-primary-fixed": "#001c38",
+                        "outline": "#717782",
+                        "error-container": "#ffdad6",
+                        "on-tertiary": "#ffffff",
+                        "background": "#f9f9ff",
+                        "tertiary": "#00583b",
+                        "on-primary": "#ffffff",
+                        "on-error": "#ffffff",
+                        "secondary": "#5427e6",
+                        "on-surface-variant": "#414751",
+                        "on-secondary-fixed": "#1b0063",
+                        "on-secondary": "#ffffff",
+                        "outline-variant": "#c1c7d3",
+                        "surface-container-high": "#e0e8ff",
+                        "tertiary-container": "#00734e",
+                        "on-tertiary-fixed-variant": "#005236",
+                        "primary": "#004e8b",
+                        "secondary-fixed-dim": "#c9bfff",
+                        "surface-dim": "#d2daf0",
+                        "primary-container": "#0066b3",
+                        "on-tertiary-container": "#8ef7c3",
+                        "secondary-fixed": "#e5deff",
+                        "on-secondary-container": "#f3edff",
+                        "tertiary-fixed-dim": "#72daa9",
+                        "surface-container-highest": "#dbe2f9",
+                        "surface-tint": "#0060a9",
+                        "surface-container-low": "#f1f3ff",
+                        "inverse-on-surface": "#edf0ff",
+                        "tertiary-fixed": "#8ef7c4",
+                        "surface-container": "#e9edff",
+                        "error": "#ba1a1a",
+                        "on-background": "#141b2c"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "stack-md": "16px",
+                        "stack-lg": "24px",
+                        "container-padding": "24px",
+                        "gutter": "16px",
+                        "stack-sm": "8px",
+                        "base": "4px"
+                    },
+                    "fontFamily": {
+                        "title-sm": ["Inter"],
+                        "display-lg-mobile": ["Inter"],
+                        "display-lg": ["Inter"],
+                        "headline-md": ["Inter"],
+                        "body-base": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "label-md": ["Geist"],
+                        "label-xs": ["Geist"]
+                    },
+                    "fontSize": {
+                        "title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
+                        "display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
+                        "body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
+                        "label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }]
+                    }
+                },
+            },
+        }
+    </script>
+</head>
+<body class="bg-background text-on-background font-body-base antialiased flex w-full min-h-screen">
+
+<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
+<div class="px-gutter mb-stack-lg flex flex-col gap-base">
+<span class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI</span>
+<span class="text-label-md font-label-md text-on-surface-variant">Exhibition Manager</span>
+</div>
+<div class="flex-1 flex flex-col gap-base px-sm">
+<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">dashboard</span>
+<span class="text-label-md font-label-md">Dashboard</span>
+</a>
+<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">architecture</span>
+<span class="text-label-md font-label-md">Floor Plan Studio</span>
+</a>
+<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">groups</span>
+<span class="text-label-md font-label-md">Exhibitor Management</span>
+</a>
+
+<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-primary font-bold border-l-4 border-primary bg-primary-container/10 transition-all duration-200 opacity-90 rounded-r-full mr-gutter" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">assignment</span>
+<span class="text-label-md font-label-md">Documents</span>
+</a>
+<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">payments</span>
+<span class="text-label-md font-label-md">Settlement</span>
+</a>
+</div>
+<div class="mt-auto flex flex-col gap-base px-sm pt-stack-md border-t border-outline-variant/30">
+<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">settings</span>
+<span class="text-label-md font-label-md">Settings</span>
+</a>
+<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">help</span>
+<span class="text-label-md font-label-md">Support</span>
+</a>
+</div>
+</nav>
+
+<div class="ml-60 flex-1 flex flex-col h-screen overflow-hidden">
+
+<header class="bg-surface border-b border-outline-variant px-container-padding py-stack-md flex flex-col gap-stack-md z-40 sticky top-0">
+<div class="flex justify-between items-center w-full">
+<div class="flex items-center gap-stack-md">
+<h1 class="text-title-sm font-title-sm font-bold text-on-surface">도면 및 서류 검수 대기열</h1>
+<div class="flex gap-base">
+<button class="px-stack-md py-base border border-outline-variant rounded-full text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high">홀6</button>
+<button class="px-stack-md py-base border border-primary bg-primary-container/10 rounded-full text-label-md font-label-md text-primary font-bold">홀7</button>
+<button class="px-stack-md py-base border border-outline-variant rounded-full text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high">홀8</button>
+</div>
+</div>
+<div class="flex items-center gap-stack-md">
+<div class="relative">
+<span class="material-symbols-outlined absolute left-stack-sm top-1/2 -translate-y-1/2 text-on-surface-variant" style="font-size: 18px;">search</span>
+<input class="pl-8 pr-stack-sm py-base border border-outline-variant rounded bg-surface-container-lowest text-body-sm font-body-sm focus:border-primary focus:ring-2 focus:ring-primary-container/30 w-64" placeholder="검색어 입력..." type="text"/>
+</div>
+<img class="w-8 h-8 rounded bg-surface-container-high object-cover" data-alt="A small square profile picture of a Korean professional venue manager wearing glasses, modern corporate lighting, light mode UI context, clean background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_C7mCG6UhnWkDKA2GzDjoI6WuRgnBbXoL8O8m-nkGFrz2FoEG_Xg4BB5kIPTcl59NbD7Z1SunU55qBfjsspQBMtp2UEZw-0awvXD3lDUB64z_L9fdiDPvBj15OxY9qBLfw_wZbny9G7oxeLZXbgjXPcqbEqvBMbV1lf55RUP1ijhUuOwq5vibeu9mtP32ir0jdaLPW_Du89TK1r53bkAwFJWmLgQpmoHewMCWxSvgC43VqFeR4IAN"/>
+</div>
+</div>
+<div class="flex gap-stack-md">
+<div class="flex items-center gap-stack-sm px-stack-md py-stack-sm bg-surface-container-lowest border border-outline-variant rounded-lg">
+<span class="text-label-md font-label-md text-on-surface-variant">검수 대기</span>
+<span class="text-title-sm font-title-sm text-on-surface">23</span>
+</div>
+<div class="flex items-center gap-stack-sm px-stack-md py-stack-sm bg-surface-container-lowest border border-outline-variant rounded-lg">
+<span class="text-label-md font-label-md text-on-surface-variant">오늘 마감</span>
+<span class="text-title-sm font-title-sm text-primary">5</span>
+</div>
+<div class="flex items-center gap-stack-sm px-stack-md py-stack-sm bg-error-container/20 border border-error/30 rounded-lg">
+<span class="material-symbols-outlined text-error" style="font-size: 18px;">warning</span>
+<span class="text-label-md font-label-md text-error">AI 차단 플래그</span>
+<span class="text-title-sm font-title-sm text-error font-bold">4</span>
+</div>
+</div>
+</header>
+
+<main class="flex-1 flex overflow-hidden bg-background">
+
+<section class="flex-1 overflow-auto p-container-padding flex flex-col gap-stack-md">
+<div class="flex justify-between items-center">
+<h2 class="text-title-sm font-title-sm text-on-surface">제출 서류 목록 (홀7)</h2>
+<button class="bg-primary text-on-primary px-stack-lg py-stack-sm rounded hover:bg-surface-tint transition-colors text-label-md font-label-md flex items-center gap-base">
+<span class="material-symbols-outlined" style="font-size: 16px;">check_circle</span>
+                        일괄 승인
+                    </button>
+</div>
+<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex-1 flex flex-col">
+<div class="overflow-x-auto flex-1">
+<table class="w-full text-left border-collapse">
+<thead class="bg-surface-container-low border-b border-outline-variant sticky top-0">
+<tr>
+<th class="p-stack-sm pl-stack-md w-10"><input class="border-outline-variant rounded text-primary focus:ring-primary" type="checkbox"/></th>
+<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">행사/부스</th>
+<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">서류 유형</th>
+<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">제출자</th>
+<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">제출일</th>
+<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">마감</th>
+<th class="p-stack-sm text-label-md font-label-md text-secondary">AI 사전심사</th>
+<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">상태</th>
+<th class="p-stack-sm pr-stack-md text-label-md font-label-md text-on-surface-variant text-right">액션</th>
+</tr>
+</thead>
+<tbody class="divide-y divide-outline-variant/50 text-body-sm font-body-sm">
+
+<tr class="hover:bg-surface-bright transition-colors group">
+<td class="p-stack-sm pl-stack-md"><input class="border-outline-variant rounded text-primary focus:ring-primary" type="checkbox"/></td>
+<td class="p-stack-sm">
+<div class="font-bold text-on-surface">스마트팩토리 코리아</div>
+<div class="text-on-surface-variant text-label-xs font-label-xs">A-102</div>
+</td>
+<td class="p-stack-sm text-on-surface">장치 도면</td>
+<td class="p-stack-sm text-on-surface-variant">(주)공간디자인</td>
+<td class="p-stack-sm text-on-surface-variant">07.10</td>
+<td class="p-stack-sm"><span class="bg-error text-on-error px-2 py-1 rounded text-label-xs font-label-xs font-bold">D-6</span></td>
+<td class="p-stack-sm">
+<div class="inline-flex items-center gap-1 border border-error bg-error-container/20 text-error px-2 py-1 rounded text-label-xs font-label-xs">
+<span class="material-symbols-outlined text-[14px]">warning</span>
+                                            차단 1
+                                        </div>
+</td>
+<td class="p-stack-sm text-on-surface-variant">검토 대기</td>
+<td class="p-stack-sm pr-stack-md text-right">
+<button class="border border-outline-variant px-3 py-1.5 rounded text-label-md font-label-md text-primary hover:bg-primary-container/10 transition-colors">검수</button>
+</td>
+</tr>
+
+<tr class="hover:bg-surface-bright transition-colors group">
+<td class="p-stack-sm pl-stack-md"><input class="border-outline-variant rounded text-primary focus:ring-primary" type="checkbox"/></td>
+<td class="p-stack-sm">
+<div class="font-bold text-on-surface">스마트팩토리 코리아</div>
+<div class="text-on-surface-variant text-label-xs font-label-xs">B-201</div>
+</td>
+<td class="p-stack-sm text-on-surface">유틸리티 위치표시도</td>
+<td class="p-stack-sm text-on-surface-variant">미래테크(주)</td>
+<td class="p-stack-sm text-on-surface-variant">07.11</td>
+<td class="p-stack-sm"><span class="bg-surface-container-high text-on-surface-variant px-2 py-1 rounded text-label-xs font-label-xs">D-14</span></td>
+<td class="p-stack-sm">
+<div class="inline-flex items-center gap-1 border border-[#00734e] bg-[#00734e]/10 text-[#00734e] px-2 py-1 rounded text-label-xs font-label-xs">
+<span class="material-symbols-outlined text-[14px]">check</span>
+                                            통과
+                                        </div>
+</td>
+<td class="p-stack-sm text-on-surface-variant">검토 대기</td>
+<td class="p-stack-sm pr-stack-md text-right">
+<button class="border border-outline-variant px-3 py-1.5 rounded text-label-md font-label-md text-primary hover:bg-primary-container/10 transition-colors">검수</button>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+</section>
+
+<aside class="w-80 border-l border-outline-variant bg-surface p-container-padding flex flex-col gap-stack-lg overflow-y-auto hidden lg:flex">
+<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-md flex flex-col gap-stack-md shadow-sm">
+<h3 class="text-title-sm font-title-sm text-on-surface border-b border-outline-variant pb-stack-sm">홀7 유틸리티 부하</h3>
+<div class="flex flex-col gap-stack-sm">
+<div class="flex justify-between items-end">
+<span class="text-label-md font-label-md text-on-surface-variant">전기 신청</span>
+<span class="text-title-sm font-title-sm text-primary">412kW</span>
+</div>
+<div class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden">
+<div class="h-full bg-primary" style="width: 75%;"></div>
+</div>
+<div class="flex justify-between text-label-xs font-label-xs text-on-surface-variant">
+<span>0</span>
+<span>수용 한도: 550kW</span>
+</div>
+</div>
+<div class="flex flex-col gap-stack-sm pt-stack-sm">
+<div class="flex justify-between items-end">
+<span class="text-label-md font-label-md text-on-surface-variant">인터넷 신청</span>
+<span class="text-title-sm font-title-sm text-on-surface">128회선</span>
+</div>
+<div class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden">
+<div class="h-full bg-[#00734e]" style="width: 40%;"></div>
+</div>
+</div>
+</div>
+
+<div class="relative bg-surface-container-lowest border border-secondary/30 rounded-lg p-stack-md overflow-hidden">
+<div class="absolute inset-0 bg-gradient-to-br from-secondary/5 to-transparent"></div>
+<div class="relative z-10 flex flex-col gap-stack-sm">
+<div class="flex items-center gap-1 text-secondary">
+<span class="material-symbols-outlined text-[18px]">temp_preferences_custom</span>
+<h3 class="text-label-md font-label-md font-bold">AI 최적화 분석</h3>
+</div>
+<p class="text-body-sm font-body-sm text-on-surface">현재 제출된 A-102 부스의 장치 도면이 인접 부스와의 동선 충돌을 유발할 확률이 85% 입니다. 반려를 권장합니다.</p>
+</div>
+</div>
+</aside>
+</main>
+</div>
+</body></html>
\ No newline at end of file
diff --git a/stitch_kintex_ai_system_architect/manager_field_inspection_kintex_ai_system/code.html b/stitch_kintex_ai_system_architect/manager_field_inspection_kintex_ai_system/code.html
new file mode 100644
index 0000000..efd3e1b
--- /dev/null
+++ b/stitch_kintex_ai_system_architect/manager_field_inspection_kintex_ai_system/code.html
@@ -0,0 +1,345 @@
+<!DOCTYPE html>
+
+<html lang="ko"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>현장 검수 - KINTEX</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com" rel="preconnect"/>
+<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Inter:wght@400..700&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+          darkMode: "class",
+          theme: {
+            extend: {
+              "colors": {
+                      "on-secondary-fixed-variant": "#4500d8",
+                      "on-primary-container": "#d2e3ff",
+                      "primary-fixed": "#d3e4ff",
+                      "surface-container-lowest": "#ffffff",
+                      "surface-variant": "#dbe2f9",
+                      "on-error-container": "#93000a",
+                      "on-surface": "#141b2c",
+                      "surface-bright": "#f9f9ff",
+                      "surface": "#f9f9ff",
+                      "inverse-surface": "#293041",
+                      "on-tertiary-fixed": "#002113",
+                      "inverse-primary": "#a2c9ff",
+                      "primary-fixed-dim": "#a2c9ff",
+                      "secondary-container": "#6d4aff",
+                      "on-primary-fixed-variant": "#004881",
+                      "on-primary-fixed": "#001c38",
+                      "outline": "#717782",
+                      "error-container": "#ffdad6",
+                      "on-tertiary": "#ffffff",
+                      "background": "#f9f9ff",
+                      "tertiary": "#00583b",
+                      "on-primary": "#ffffff",
+                      "on-error": "#ffffff",
+                      "secondary": "#5427e6",
+                      "on-surface-variant": "#414751",
+                      "on-secondary-fixed": "#1b0063",
+                      "on-secondary": "#ffffff",
+                      "outline-variant": "#c1c7d3",
+                      "surface-container-high": "#e0e8ff",
+                      "tertiary-container": "#00734e",
+                      "on-tertiary-fixed-variant": "#005236",
+                      "primary": "#004e8b",
+                      "secondary-fixed-dim": "#c9bfff",
+                      "surface-dim": "#d2daf0",
+                      "primary-container": "#0066b3",
+                      "on-tertiary-container": "#8ef7c3",
+                      "secondary-fixed": "#e5deff",
+                      "on-secondary-container": "#f3edff",
+                      "tertiary-fixed-dim": "#72daa9",
+                      "surface-container-highest": "#dbe2f9",
+                      "surface-tint": "#0060a9",
+                      "surface-container-low": "#f1f3ff",
+                      "inverse-on-surface": "#edf0ff",
+                      "tertiary-fixed": "#8ef7c4",
+                      "surface-container": "#e9edff",
+                      "error": "#ba1a1a",
+                      "on-background": "#141b2c"
+              },
+              "borderRadius": {
+                      "DEFAULT": "0.125rem",
+                      "lg": "0.25rem",
+                      "xl": "0.5rem",
+                      "full": "0.75rem"
+              },
+              "spacing": {
+                      "stack-md": "16px",
+                      "stack-lg": "24px",
+                      "container-padding": "24px",
+                      "gutter": "16px",
+                      "stack-sm": "8px",
+                      "base": "4px"
+              },
+              "fontFamily": {
+                      "title-sm": [
+                              "Inter"
+                      ],
+                      "display-lg-mobile": [
+                              "Inter"
+                      ],
+                      "display-lg": [
+                              "Inter"
+                      ],
+                      "headline-md": [
+                              "Inter"
+                      ],
+                      "body-base": [
+                              "Inter"
+                      ],
+                      "body-sm": [
+                              "Inter"
+                      ],
+                      "label-md": [
+                              "Geist"
+                      ],
+                      "label-xs": [
+                              "Geist"
+                      ]
+              },
+              "fontSize": {
+                      "title-sm": [
+                              "18px",
+                              {
+                                      "lineHeight": "28px",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "display-lg-mobile": [
+                              "28px",
+                              {
+                                      "lineHeight": "36px",
+                                      "fontWeight": "700"
+                              }
+                      ],
+                      "display-lg": [
+                              "36px",
+                              {
+                                      "lineHeight": "44px",
+                                      "letterSpacing": "-0.02em",
+                                      "fontWeight": "700"
+                              }
+                      ],
+                      "headline-md": [
+                              "24px",
+                              {
+                                      "lineHeight": "32px",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "body-base": [
+                              "14px",
+                              {
+                                      "lineHeight": "20px",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "body-sm": [
+                              "13px",
+                              {
+                                      "lineHeight": "18px",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "label-md": [
+                              "12px",
+                              {
+                                      "lineHeight": "16px",
+                                      "letterSpacing": "0.02em",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "label-xs": [
+                              "11px",
+                              {
+                                      "lineHeight": "14px",
+                                      "fontWeight": "500"
+                              }
+                      ]
+              }
+            }
+          }
+        }
+    </script>
+<style>
+        /* Custom scrollbar for mobile */
+        ::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #c1c7d3;
+            border-radius: 4px;
+        }
+        /* Mobile container lock */
+        body {
+            display: flex;
+            justify-content: center;
+            background-color: #E4E7EC; /* darker background outside app */
+        }
+        #mobile-container {
+            width: 100%;
+            max-width: 390px;
+            height: 100vh;
+            height: 100dvh;
+            background-color: #f9f9ff;
+            position: relative;
+            overflow-y: auto;
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
+            display: flex;
+            flex-direction: column;
+        }
+    </style>
+<style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+  </head>
+<body class="bg-surface-variant text-on-background font-body-base antialiased">
+<div id="mobile-container">
+
+<header class="bg-surface sticky top-0 z-40 border-b border-outline-variant px-stack-md h-16 flex items-center justify-between shrink-0">
+<div class="flex items-center gap-stack-sm">
+<button class="p-1 text-on-surface-variant rounded-full hover:bg-surface-container-high transition-colors">
+<span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
+</button>
+<div class="flex flex-col">
+<h1 class="text-title-sm font-title-sm text-on-surface">현장 검수 · 부스 A-102</h1>
+<span class="text-label-xs font-label-xs text-on-surface-variant">홀7 · KINTEX</span>
+</div>
+</div>
+<img alt="도면 썸네일" class="w-10 h-10 rounded object-cover border border-outline-variant shadow-sm" data-alt="A small, clear thumbnail of a technical architectural floor plan for an exhibition booth, displaying clean lines, minimal labels, and a professional light-mode blueprint aesthetic, high contrast." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8KE3mXcMbgQotfW_VsDdPZ3pSI-yzsIvyCpUa8KPOy_ADfWPV5VjjbdZ2s-wX3tQ_eDiiYYzdpz2MF3am0artwXJZC8ag9ji9C0Qz2j-diXNpobz3rE2Ktifn1EzqP4vVHP1iir1S10NE7f1QD5VPOs-PpCKsS4sEd9Qz-kPc4uPpI14kJ_CxxzCHO0Ure01sw1MGCMnE4-EK8fLl1DE_XFG-tBT5Uy1ihTOmEbOBPe-UeS4PHKfq"/>
+</header>
+
+<main class="flex-1 flex flex-col gap-stack-md p-stack-md pb-[100px] overflow-y-auto">
+
+<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm flex flex-col">
+
+<div class="px-stack-sm py-stack-sm border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
+<h2 class="text-label-md font-label-md text-on-surface font-bold">도면 vs 현장 비교</h2>
+<div class="flex items-center gap-1 bg-secondary-container/10 border border-secondary text-secondary px-2 py-1 rounded-full">
+<span class="material-symbols-outlined text-[14px]" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
+<span class="text-label-xs font-label-xs font-bold text-secondary">AI 사전심사 플래그 3건</span>
+</div>
+</div>
+
+<div class="p-stack-sm flex gap-stack-sm relative">
+
+<div class="flex-1 flex flex-col gap-1 relative">
+<span class="text-label-xs font-label-xs text-on-surface-variant text-center bg-surface/80 absolute top-1 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded backdrop-blur-sm shadow-sm z-10">승인 도면</span>
+<img alt="승인 도면" class="w-full aspect-[4/5] object-cover rounded border border-outline-variant" data-alt="A clean, professional 2D CAD floor plan of a 3x3 exhibition booth, showing dimensions, structural walls, and furniture layout, light gray background with dark blue drafting lines, highly detailed technical illustration." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAPapaO6JXY15IKatpqIwFeCvijJR-KGit8OcWrvlxLuKguxHdwk-8RU7p35jwi4wNypJoGeIhstrSNLrF_unAhJIkz8gY0kz4yhnctYG_41MVp31xuXlxlx26ivhRak7feq-xXtgpc9QPz4dfbHUGiZYW60dOsXkSnn9Dkc6dmnET2s5pNVQ4SoOUYO8zq4Kr8SlLaVlZeEViHcd2iP4VlpZVWmL4nkfCoDgwRGi1mks4pnB5XjgS8"/>
+</div>
+
+<div class="w-px bg-outline-variant self-stretch relative flex items-center justify-center">
+<div class="absolute w-6 h-6 bg-surface border border-outline-variant rounded-full flex items-center justify-center text-on-surface-variant shadow-sm z-10">
+<span class="material-symbols-outlined text-[14px]" data-icon="compare_arrows">compare_arrows</span>
+</div>
+</div>
+
+<div class="flex-1 flex flex-col gap-1 relative">
+<span class="text-label-xs font-label-xs text-on-surface-variant text-center bg-surface/80 absolute top-1 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded backdrop-blur-sm shadow-sm z-10">현장 사진</span>
+<img alt="현장 사진" class="w-full aspect-[4/5] object-cover rounded border border-outline-variant" data-alt="A bright, clear photograph taken from a mobile phone showing an exhibition booth under construction inside a massive modern convention hall. The booth has white modular walls, exposed aluminum framing, and concrete flooring. Industrial ceiling lighting, busy exhibition setup atmosphere, realistic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDR4i67HvKb15GSR2T1nwr5DMQkCXFn-XsejyXp7FUtUHsQnodUfJ9dOSXFOKL6WOBHEsUyyjukx3grOgFVPPLw_Ti8RwDtvn-g8AZ4FhFHwAqBHb-q93O7Vz4Y0a93kczT58hsTA6UgCXVGZth6WyiqC8PrsCCFrsiHozVISTf8EJGwGVG4hndWOX2LaN5M70idGDdhVHwUmIdWIVCTi4ZEXLq8LrXoZbG0bt03OjtWpr0C2-L5G8Q"/>
+</div>
+</div>
+
+<div class="flex justify-center gap-1 pb-stack-sm pt-1 bg-surface-container-lowest">
+<div class="w-2 h-2 rounded-full bg-primary"></div>
+<div class="w-2 h-2 rounded-full bg-outline-variant"></div>
+<div class="w-2 h-2 rounded-full bg-outline-variant"></div>
+</div>
+</section>
+
+<section class="flex flex-col gap-stack-sm">
+<h3 class="text-label-md font-label-md text-on-surface font-bold px-1">검수 항목 (4)</h3>
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-sm flex flex-col gap-2 shadow-sm border-l-4 border-l-outline-variant">
+<div class="flex justify-between items-center">
+<span class="text-body-sm font-body-sm text-on-surface font-medium">장치물 높이 (제한 4m)</span>
+<div class="flex bg-surface-container-low rounded border border-outline-variant p-0.5">
+<button class="px-3 py-1 rounded text-label-md font-label-md bg-surface text-on-surface border border-outline-variant shadow-sm flex items-center gap-1">
+                            적합
+                        </button>
+<button class="px-3 py-1 rounded text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">
+                            부적합
+                        </button>
+</div>
+</div>
+</div>
+
+<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-sm flex flex-col gap-2 shadow-sm border-l-4 border-l-outline-variant">
+<div class="flex justify-between items-center">
+<span class="text-body-sm font-body-sm text-on-surface font-medium">방염 라벨 부착</span>
+<div class="flex bg-surface-container-low rounded border border-outline-variant p-0.5">
+<button class="px-3 py-1 rounded text-label-md font-label-md bg-surface text-on-surface border border-outline-variant shadow-sm flex items-center gap-1">
+                            적합
+                        </button>
+<button class="px-3 py-1 rounded text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">
+                            부적합
+                        </button>
+</div>
+</div>
+</div>
+
+<div class="bg-error-container/20 border border-error rounded-lg p-stack-sm flex flex-col gap-stack-sm shadow-sm border-l-4 border-l-error">
+<div class="flex justify-between items-start">
+<div class="flex flex-col">
+<span class="text-body-sm font-body-sm text-on-surface font-medium flex items-center gap-1">
+                            통로 침범 여부
+                            <span class="material-symbols-outlined text-[16px] text-error" data-icon="warning">warning</span>
+</span>
+<span class="text-label-xs font-label-xs text-error font-bold mt-1">통로 0.3m 침범 확인</span>
+</div>
+<div class="flex bg-surface-container-low rounded border border-outline-variant p-0.5 shrink-0">
+<button class="px-3 py-1 rounded text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">
+                            적합
+                        </button>
+<button class="px-3 py-1 rounded text-label-md font-label-md bg-error text-on-error shadow-sm flex items-center gap-1">
+                            부적합
+                        </button>
+</div>
+</div>
+<div class="flex gap-stack-sm">
+<img alt="위반 사진" class="w-16 h-16 rounded border border-error object-cover" data-alt="Close up mobile photo of the edge of an exhibition booth encroaching over a taped line on the concrete floor of a convention hall, a measuring tape is visible on the ground indicating a small overlap, bright industrial lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBu3ptGqxxWQkXJFLeTMvIlQo6FlKW9rWtwzu-Z3vvZrBvNH2jfHaH8UOE09ZTXLGRWycMHCd-nxDIr4hSWS8yCysMtz1G7-1GxBpAF3WqIqcNBQtQ224cjEiZ7SSh3CuuuP-60pYrxyB5X8UMQGo7Os9drVCqcj4cYHhyZk5lUyWym6HePvpVY46cLOvcYaO8FqjMvb621QIAFlUKCTutSostHt_Vc_YC6yEn0_ZUzLhtHtVnLEjXK"/>
+<textarea class="flex-1 bg-surface-container-lowest border border-error rounded p-2 text-body-sm font-body-sm text-on-surface resize-none focus:outline-none focus:border-error focus:ring-1 focus:ring-error" placeholder="메모 입력..." rows="2">통로 0.3m 침범

부스번호	업체명	설계 상태	유틸리티	예상 사진
A-101	삼성전자 (스마트팩토리 사업부)	+ + 승인 + +	전기(30kW), LAN	+ +
A-102	LG CNS	+ +auto_awesome AI 제안 + +	전기(20kW), 압축공기	+ +
B-205	+ 현대위아 error +	+ + 반려 (높이 초과) + +	전기(50kW), 용수	+ 미제출 +
C-311	두산로보틱스	+ + 작성중 + +	-	+ 작성중 +
A-105	LS ELECTRIC	+ + 승인 + +	전기(40kW)	+ +image + +

항목	금액	기한	상태	액션
계약금 (20%)	₩12,900,000	2026.06.01	+ + 완료 + +	+ +
중도금 (30%)	₩19,350,000	2026.07.15	+ + 미납 + +	+ +
잔금 (30%) + 예치금 (15%)	₩29,025,000	2026.08.10	+ + 대기 + +	-
유틸리티 추가 비용	₩3,225,000	2026.08.20	+ + 대기 + +	-

항목 코드	세부 내역	단가/수량	합계 금액	정산 상태
UT-2601	전기사용료 (Primary Line)	₩1,500 / 1,200kWh	₩1,800,000	+ + 산정 완료 + +
WM-2605	폐기물 처리비 (산업폐기물 포함)	₩50,000 / 15.5t	₩775,000	+ + 산정 완료 + +
CS-2602	청소 용역비 (야간/상설)	₩325,000 / 2회	₩650,000	+ + 산정 중 + +

공종	자재/품명	수량	단가 (₩)	금액 (₩)
골조	알루미늄 프로파일	48	+ +	2,160,000
조명	LED 매립등	24	+ +	360,000
바닥재	니들펀치 카펫 (회색)	120	+ +	1,440,000
가구	상담용 테이블/체어 세트	8	+ +	3,040,000
그래픽	대형 배너 실사출력	6	+ +	636,000

품명	수량	단가	금액
골조 (AL Profile)	48	45,000	2,160,000
조명 (LED)	24	15,000	360,000
바닥재 (카펫)	120	12,000	1,440,000
기타...	-	-	3,676,000

행사명	2024 글로벌 테크 엑스포
일시	2024. 11. 15. ~ 11. 17.	장소	제1전시장 1~3홀
주최/주관	KINTEX 테크조직위원회	예상인원	15,000명 (최대 5,000명/일)

비교 항목	+ 최적 추천 + 업체 A + 종합 1위 (추천) +	+ 업체 B + 종합 2위 +	+ 업체 C + 종합 3위 +
총액 (VAT 별도)	+₩8,400,000 + +arrow_downward 최저가 + +	+₩8,700,000 + +3.5% 차이 +	+₩8,900,000 + +5.9% 차이 +
납기 (시공 완료)	12일	+10일 + + 최단 납기 + +	14일
업체 평판 (최근 1년)	+ +star + 4.8 + +	+ +star + 4.6 + +	+ +star + 4.2 + +
종합 점수	+ +92.4 +AI 가중 스코어 + +	+89.1 +	+84.7 +

이름	유형	소속	등록일	체크인	배지
+ + K +김*희 + +	+관람객 +	LG 전자	2024.10.12	+ + 완료 + +	+qr_code +	+more_vert +
+ + L +이*준 + +	+바이어 +	Samsung Electronics	2024.10.14	+ + 미입장 + +	+qr_code +	+more_vert +
+ + P +박*서 + +	+VIP +	Hyundai Motors	2024.10.15	+ + 완료 + +	+qr_code +	+more_vert +
+ + C +최*훈 + +	+관람객 +	개인 참관	2024.10.15	+ + 취소 + +	+qr_code +	+more_vert +

이름	소속	관심 제품	관심도	AI 스코어	수집시각
김**	(주)테크솔루션	협동로봇 HR-A1	+ +star +star +star +star +star + +	+ + + + +87 + +	14:22:05
이**	넥스트 이노베이션	스마트 물류 시스템	+ +star +star +star +star +star + +	+ + + + +65 + +	14:15:30
박**	미래 제조 연구소	AI 비전 검사 모듈	+ +star +star +star +star +star + +	+ + + + +82 + +	14:02:11
정**	글로벌 테크	자율주행 AMR	+ +star +star +star +star +star + +	+ + + + +44 + +	13:55:42
강**	SCT 시스템	클라우드 모니터링	+ +star +star +star +star +star + +	+ + + + +28 + +	13:48:19

콘텐츠 ID / 원문 (KO)	번역본 (Target)	상태	최근 업데이트
+ 행사명 + GLOBAL_EVENT_NAME +	KINTEX Global Smart Tech Expo 2024	+검수완료 +	2시간 전
+ 홀 안내 + HALL_GUIDE +	Exhibition Hall Floor Information	+AI 초벌 +	1일 전
+ 참가 신청 + REGISTRATION +	Pending translation...	+미번역 +	-
+ 전시 개요 + EXHIBITION_OVERVIEW +	Overview of the upcoming tech showcase and participation guidelines.	+AI 초벌 +	3시간 전
+ 전시장 안내도 + FLOOR_MAP_ALT +	Detailed layout and booth mapping for KINTEX 1 and 2.	+검수완료 +	5일 전

날짜	제목	유형	진행상태	공수
2024-05-24	제1전시장 3홀 냉방 공조 시스템 필터 교체 작업	+정기 +	+진행중 +	4.0h
2024-05-24	야외 주차장 구역 조명 램프 불량 교체 (C구역)	+긴급 +	+완료 +	1.5h
2024-05-23	2024 서울 모빌리티 쇼 전력 부하 모니터링	+일반 +	+완료 +	8.0h
2024-05-23	제2전시장 7-8홀 화장실 수전 누수 점검 및 보수	+정기 +	+완료 +	2.0h
2024-05-22	그랜드볼룸 오디오 시스템 무선 마이크 수신 테스트	+일반 +	+완료 +	3.0h
2024-05-22	전시장 바닥 마감재 크랙 보수 (5홀 입구측)	+정기 +	+진행중 +	4.5h

번호	제목	작성자	게시일	조회수
42	+ +제 2전시장 AI 통합 관제 시스템 점검 공지 +attach_file + +	시스템운영팀	2023.10.25	1,204
41	+ +KINTEX 멤버십 서비스 혜택 변경 안내 (11월부터 적용) + +	전략마케팅팀	2023.10.22	856
40	+ +전시 참관객 데이터 분석 리포트 업데이트 완료 (Q3) +attach_file + +	데이터분석실	2023.10.18	2,311
39	하반기 신규 전시 제안서 접수 기간 연장 알림	기획사업본부	2023.10.15	542
38	추석 연휴 기간 시스템 고객지원 센터 운영 시간 안내	운영본부	2023.09.25	1,098

카테고리	제목	접수일시	상태	관리
+개선 제안 +	제1전시장 로비 키오스크 UI 반응 속도 개선 요청	2024.11.20 14:30	+답변완료 +	+expand_more +
+ + + 문의 내용 + 제1전시장 입구에 위치한 무인 키오스크에서 데이터 로딩 시 약 3초간의 딜레이가 발생합니다. 관람객 몰리는 시간대에 병목 현상이 예상되니 최적화 부탁드립니다. + + + +smart_toy + AI 요약 및 담당자 답변 + + + + 안녕하세요. KINTEX AI 운영지원팀입니다. 제안해주신 키오스크 지연 문제는 현재 API 응답 캐싱 최적화 작업을 통해 0.5초 이내로 단축하는 업데이트가 차주 화요일 배포 예정입니다. 적극적인 의견 감사드립니다. + + + 이 답변은 AI 기술 지원을 통해 신속하게 생성되었으며 운영 책임자의 검토를 마쳤습니다. + + + + +
+불편 신고 +	관리자 대시보드 모바일 뷰 깨짐 현상	2024.11.22 09:15	+검토중 +	+expand_more +
+ + 아이폰 15 프로 환경에서 대시보드 그래프가 영역을 벗어나 표시됩니다. 긴급 수정 부탁드립니다. + + +pending + 담당 부서에서 해당 기기를 통해 재현 테스트 중입니다. + +
+규정 문의 +	야간 연장 운영 시 보안 인력 배치 기준	2024.11.23 11:00	+접수 +	+expand_more +

할 일	담당자	기한	연결 서비스
+ + +AI 알고리즘 파일럿 테스트 계획서 작성 + +	김민수 대리	2024.05.20	+ +
+ + +엣지 서버 하드웨어 발주 및 설치 + +	이지현 팀장	2024.05.25	+ +

ID	작성자	업무 유형	주요 내용	건수	상태	최종 업데이트
#WR-1029	+ MK + 민경호 +	+시설 +	1전시장 3홀 냉난방 장치 정기 점검 완료	12	+ + 완료 + +	2024.05.21 14:20
#WR-1030	+ ST + 성태호 +	+보안 +	야간 순찰 및 출입 통제 구역 시스템 로그 분석	45	+ + 진행중 + +	2024.05.21 15:05
#WR-1031	+ JH + 정현우 +	+안내 +	VIP 컨퍼런스 의전 및 챗봇 연동 고객 문의 대응	108	+ + 완료 + +	2024.05.21 16:30
#WR-1032	+ MS + 미화팀 +	+미화 +	전시 종료 후 메인 로비 방역 및 카펫 크리닝	8	+ + 지연 + +	2024.05.21 16:45
#WR-1033	+ CS + 최승우 +	+시설 +	옥상 태양광 패널 효율 측정 및 클라우드 데이터 전송	2	+ + 진행중 + +	2024.05.21 17:10

이름	이메일	역할	소속	상태	2FA	최근 접속	작업
+ + 김 +김민수 + +	admin***@kintex.com	+관리자 +	KINTEX 본사	+ + 활성 + +	+ +verified_user +2FA 설정됨 + +	2023-11-20 14:22	+ +
+ + 이 +이서연 + +	sy.lee***@company.com	+주최자 +	글로벌 엑스포	+ + 활성 + +	+ +verified_user +2FA 설정됨 + +	2023-11-20 09:15	+ +
+ + 박 +박지훈 + +	jihoon***@booth.net	+참가업체 +	테크트리 주식회사	+ + 잠금 + +	+ +no_encryption +미설정 + +	2023-11-18 17:40	+ +
+ + 최 +최현우 + +	hwchoi***@system.kr	+장치업체 +	대성 인테리어	+ + 활성 + +	+ +verified_user +2FA 설정됨 + +	2023-11-19 11:05	+ +
+ + 정 +정미경 + +	mk.jung***@kintex.com	+홀매니저 +	KINTEX 1전시장	+ + 비활성 + +	+ +verified_user +2FA 설정됨 + +	2023-10-30 16:55	+ +

코드	코드명(KR)	정렬 순서	구분	사용 여부	관리
C001	건축/목공	1	+전역 +	+ + +활성 + +	+ + + + +
C002	전기/조명	2	+테넌트 재정의 +	+ + +활성 + +	+ + + + +
C003	가구/비품	3	+전역 +	+ + +활성 + +	+ + + + +
C004	리깅/현수막	4	+전역 +	+ + +비활성 + +	+ + + + +

시각 (Timestamp)	사용자 (User)	액션 (Action)	대상 (Target)	IP 주소 (IP Address)	결과 (Result)	상세
2026-08-01 14:22:15	+ + 최 +최매니저 + +	+ +gavel + 낙찰(Award) + +	옥션 #A-102	192.168.0.45	+ + 성공 + +	+ +
2026-08-01 14:20:03	+ + 김 +김운영 + +	+ +settings_input_component + 시스템 설정 변경 + +	공조 시스템 제어	10.0.45.122	+ + 성공 + +	+ +
2026-08-01 14:15:55	+ + 外 +외부접속자 + +	+ +login + 로그인 시도 + +	어드민 콘솔	211.23.4.89	+ + 실패 + +	+ +
2026-08-01 14:10:22	+ + 박 +박시스템 + +	+ +visibility + 조회(Read) + +	개인정보 로그	192.168.0.12	+ + 성공 + +	+ +
2026-08-01 14:05:00	+ + 최 +최매니저 + +	+ +edit + 수정(Update) + +	전시 일정표	192.168.0.45	+ + 성공 + +	+ +

홀	면적(㎡)	규격(L×W×H)	바닥하중	부스수(Max)	관리
홀 1	10,611㎡	126×84×12m	5t/㎡	480	+ + +
홀 2	10,611㎡	126×84×12m	5t/㎡	480	+ + +
홀 7	11,290㎡	126×90×12m	5t/㎡	510	+ + +
홀 8	11,290㎡	126×90×15m	5t/㎡	510	+ + +
홀 10	10,000㎡	100×100×15m	5t/㎡	450	+ + +

메뉴 / 기능 카테고리	조회 (Read)	생성 (Create)	수정 (Update)	삭제 (Delete)	승인 (Approve)
+ + +dashboard + + + 대시보드 + 전체 운영 현황 모니터링 + + +
+ + +calendar_month + + + 전시회 일정 + 연간 전시 스케줄 관리 + + +
+ + +grid_view + + + + 부스 배치 에디터 +auto_awesome + + AI 부스 자동 배치 및 편집 + + +
+ + +receipt_long + + + 유틸리티 신청 + 전기, 급배수, 랜선 등 신청 + + +
+ + +account_balance_wallet + + + 결제/정산 + 대금 청구 및 정산 처리 + + +
+ + +manage_accounts + + + 사용자 관리 + 계정 생성 및 권한 위임 + + +

규칙명	수치/설정값	논리/요구사항	위반 수준	관리
장치물 높이	+ + + +	+ +≤ +최대 높이 제한 + +	+차단 +	+ +
리깅(Rigging) 높이	6.5–8.5m	+ +info + 구조계산서 제출 (D-7) + +	+경고 +	+ +
복층 부스	≤ 1/2 면적	전체 점유 면적 대비 기준	+차단 +	+ +
방염 성능	방염필증 필수	모든 목재 및 가연성 자재	+차단 +	+ +
소음 규정	70–75dB	상시 모니터링 기준	+경고 +	+ +
이격 거리	벽체 30 / 천장 60	단위: cm, 소방 통로 확보	+경고 +	+ +

전시관 (Venue)	코드	도메인	상태	행사수	사용자수
+ + K +킨텍스 + +	KINTEX	kintex.wise.ai.kr	+ + 활성 (Active) + +	24	1,280	+ +
+ + C +코엑스 + +	COEX	coex.wise.ai.kr	+ + 온보딩중 (Onboarding) + +	-	-	+ +
+ + +add + + +auto_awesome +신규 입점 예정... + + +	+ 임시 데이터 분석 중: BEXCO (부산) 테넌트 구성 제안됨 +

2차 인증(OTP) 등록

{t('authPolicy.pwSection')}

{t('authPolicy.lockSection')}

{t('code.codeGroup')}

{t('code.valuesOf', { name: activeGroup?.grpName ?? t('code.code') })}

{selectedNode.deptName}

{t('slide.addTitle')}

+ {t('slide.registered')}{' '} + {slides && ( + + {t('slide.countActive', { total: slides.length, active: activeCount })} + + )} +

+ {t('ruleset.rulesOf', { name: current?.version ?? activeName, n: rules.length })} +

{t('settings.addTitle')}

{t('tenant.venue')}

{t('ai.console.title')}

{t('analytics.trendTitle')}

{t('analytics.sectorsTitle')}

{isOperator ? t('analytics.pnlTitle') : t('analytics.exhibitorPerfTitle')}

{t('global.title')}

{t('global.evComp')}

{t('global.retention')}

{t('global.occupancy')}

{t('global.forecastTitle')}

{t('appqr.steps.heading')}

2026 스마트팩토리 코리아

D-150 홀 배정

D-30 사전협의

D-25 유틸리티 마감

D-7 신고서류

D-0 개장

+table_chart 참가업체 현황 +

홀 전경 조감

+history 최근 활동 +

2024년 11월

배정 신청

+ 자동 견적(가견적) + AI Draft +

A-102 · 독립부스 · 6×3m

부스 A-102

AI INSIGHT

정산 및 결제 관리

납부 일정 및 내역

결제 수단 선택

예치금 정산 요약

AI 지출 분석

사후 정산 세부 내역

+reorder + 전시 마일스톤 현황 +

Required Documents Checklist

AI 서류 검수

전체 공정률

재해대처계획서 작성

1. 행사 개요

2. 안전 관리 담당

3. 비상 연락 체계

4. 위험물 목록

재 해 대 처 계 획 서

1. 안전관리 조직체계

2. 주요 재해대처 방안

(주)공간디자인

유니버셜 아트텍

(주)킨텍스모듈

A-102 독립부스 시공

B-405 트러스 구조물 설치

C-10 공용 통로 조명 공사

+add_box + 옥션 개설 (Open Auction) +

+leaderboard + 실시간 순위 +

견적서 작성

SCR-29 역경매 응찰 비교 및 낙찰

+analytics + AI 시뮬레이션: 리스크 분석 +

히스토리 분석

12,480

8,210

12%

34%

2,140

등록 및 체크인 추이

등록 폼 관리

배지 템플릿

전체 신청자 명단

정관람